Developers
Studio
Studio is where you build and test before you submit. Open it from Studio in the portal menu.
#Projects
- Press New project and give it a name. Start from the starter app, import an archive, import a folder, or start empty.
- You can have 5 projects. Each can hold 500 files and 20 MB, and all of your projects together can use 60 MB.
- Click a project to open it. Delete it with the bin button on the Studio page. Deleting a project does not touch apps you already submitted.
#Importing code
- Use Import in the top bar: Archive (.zip, .tar.gz or .tar), Folder, or Files. You can also drag files or a .zip onto Studio.
- If everything sits inside one top folder, Studio drops that folder so your
index.htmlends up at the top. node_modules,.git,__MACOSXand.DS_Storeare skipped. Single files can be up to 5 MB.- Importing a file with the same path replaces the old one.
#Files and the editor
- The Files list on the left shows every file and folder. Click a file to open it in a tab. Hover a row to rename, move or delete it.
- A dot on a tab or file means it has changes that are not saved yet.
- New file makes a file. Put a
/in the name to make it inside a folder, likejs/app.js. - Pictures open as a preview. Other files that are not text can not be edited in Studio.
- Tab indents, Shift Tab un-indents, and Enter keeps the indent of the line above.
- Look picks the editor theme and text size. It is saved to your account, so it follows you to another computer.
- Studio checks your code while you type and marks errors in the margin and in the Problems list.
⌘/Ctrl S Save the open file
⌘/Ctrl R Run
⌘/Ctrl . Stop
↑ ↓ Terminal history
Tab Complete a command or file name
Ctrl L Clear the terminal
#The terminal
Type a command under Terminal and press Enter. Your app's console.log, warnings and errors show up here too, with the file and line.
| Command | What it does |
|---|---|
run | Saves every file, builds, installs the app on the test phone if needed and opens it |
stop | Closes the app on the test phone |
reload | Saves and reloads the running app |
install | Puts the app on the test phone without opening it |
uninstall | Takes the app off the test phone |
home | Goes to the test phone home screen |
theme dark | light | Switches the test phone between dark and light |
ls [folder] | Lists files and folders |
tree | Lists every file with its size |
cat <file> | Prints a file |
open <file> | Opens a file in the editor |
touch <file> | Makes an empty file |
mv <from> <to> | Renames or moves a file or a whole folder |
rm <path> | Deletes a file or a whole folder, without asking |
save | Saves every open file |
package | Zips the project and attaches it to your next submission |
check | Looks for errors in the open files |
icon | Opens the icon maker |
look | Changes the editor theme |
clear | Clears the terminal |
help | Lists the commands |
No npm needed. npm, node and similar commands are not needed. Studio runs your app as a web page, so typing them runs the app instead.
#The test phone
- The test phone on the right is a simulated UplinkOS phone with the real home screen.
- Press Run (the play button) or type
run. The first time, the app installs with a progress ring, then it opens. Test builds have an orange dot before their name. - The app stays on the test phone the next time you open the project. Remove from phone takes it off.
- Home, Reload and Theme sit under the phone. The phone's side button also goes home.
- Calculator runs on the test phone. The other built-in apps need a live Uplink server, so they only show a notice.
- Your app runs in the same kind of locked-down frame as on the real phone, so what works here works there.
- A test link lasts 2 hours. If you see This test build has expired, press Run again.
#Packaging for review
- Press Package in the top bar, or type
package. Studio zips the whole project. - The zip is attached to your next submission. Studio offers to open Submit an app for you.
- You still host the finished app on your own https address. The package is the code the reviewer checks.
#Making an icon
Type icon to open the icon maker. When you save, Studio adds icon.png to the project and sets it in uplink.json, so the test phone shows it right away.