Graphics Programs as Mobile Apps
Hi! I’m Elysa, an intern at CodeHS for the summer. I’ve been working on a new feature that I’m excited to share: JavaScript graphics programs can be viewed and shared as mobile apps!
If you want to view or share your own graphics programs as mobile apps, you first need to download the free Expo app to your phone. Expo is available as an iOS app and as an Android app.
Viewing a Graphics Program as an App
If you want to view your graphics program as a mobile app while you are developing it, you should navigate to the Run on Phone tab from the CodeHS editor. This tab is accessible via the “More” dropdown:
The Run on Phone tab has a QR code. You should open the Expo app on your phone, click “Scan QR Code,” and scan the QR code:
After scanning the QR code, your graphics program will open as its own app within Expo, and you can now view and interact with it as you would on a computer. If any mouse methods are specified in the graphics program, the program will respond to touches to the screen as it would respond to clicks in the browser. If you make changes to your code, clicking Run Code in the editor will transfer changes to the mobile app version.
Sharing Your Graphics Program as an App
If you are finished working on a graphics program and want to share it with others as a mobile app, that is also possible. First, navigate to the Share tab and click “Publish.”
Publish creates a CodeHS URL and a QR code that can be shared with others. The link created by clicking “Publish” works even after you exit the program on CodeHS. You, and anyone you share the link with, can either go directly to the link in a mobile browser or scan the QR code below the link, and a page for the project will open. As long as they have the Expo app, they just need to click “Open with Expo” to view and interact with your program on their phone.
If you change your program in the editor and want to update this mobile app version, you just need to click “Republish.” The CodeHS URL will remain the same, but the QR code will change to reflect the updated code.
We hope this feature is a fun new addition to writing graphics programs on CodeHS. If you have any questions or feedback about it, please shoot us an email at hello@codehs.com!
