May 2023: Click HERE for updated article about exporting your App Lab program.

App Lab is a programming environment where you can design simple apps with code blocks or JavaScript, then share your apps with others. We designed App Lab as a starting point for app creation. It’s a tool in our CS Principles course, but it’s used much more broadly—in classrooms or just for fun.

Many students and teachers have requested the ability to export App Lab creations so that the HTML, CSS, and JavaScript can be used and edited outside the Code Studio environment. This allows teachers to start teaching with App Lab so students can quickly create apps and then graduate to more advanced features in a professional development environment. We’re excited to share that this feature is now live in App Lab!

Here’s how to export your app:

1. Go to the ‘Share’ button at the top left of App Lab.

2. Select ‘Show advanced options’ to bring up the ‘Export’ tab.

3. Select the export button. This will download a zipped archive. Note that it will at least 8MB in size. Here’s what’s in the zip file:

Once you export your app, click on the ‘index.html’ file to open your app on your browser. Your app should now be running locally on your computer! You can edit these files locally with any text editor or modern development environment. You can also upload the files to your own web server or online web development environment.

A note about database APIs

The App Lab database APIs are only available if the app is running in Code Studio. If you want to go further in your courses, you can use your exported App Lab apps as a starting point to teach more complex databases and queries such as MySQL.

We wanted to let you know about the export feature so you can experiment beyond what’s available in App Lab and give us feedback about what you’d like to see in the future. As always, we’d love to hear what you think — just email us at support@code.org!

- Josh Schulte, Support Program Manager at Code.org

One of our favorite features of App Lab is its database capabilities for beginners. 

App Lab’s database allows students to do so much more with the apps they create! Students love creating surveys for friends; games are more fun when you can store the worldwide high score; even personal apps like a schedule organizer are cooler when they remember the data you’ve given them.

App Lab’s most recent update makes it easier for students to explore and edit data in the “data browser”—right next to the app itself!

As students learn about databases, they can easily view and edit their tables and data through a friendly user interface. Then, they can seamlessly transition to editing the same data values through functions in their code (see the gif below). Simple buttons let them create tables, add columns, change values, and see what data their app has collected so far.

You’ll see tabs in the top-left corner to switch between design mode, traditional coding, or the data browser, helping you teach students that apps are more than just “code.” Students can separately think about the design, the code logic that powers the functionality, and the data they are collecting and analyzing.

You can also jump-start your project by uploading a data set from a CSV file, or have your students download the data they collect and analyze it in Excel or Google Sheets.

Using data blocks to create and update your data tables

This Cats v. Dogs voting app (in the above gif) uses the ‘onRecordEvent’ block, one of the coolest additions to the data blocks in App Lab. Students can use this block to run code whenever someone updates the data. So, if a friend voted using this app, you wouldn’t need to refresh the screen to see the update. The app detects the new vote and draws a new pie chart. 

Explore this data block: Remix this app, and use the data browser to add more voting options than cats and dogs.

If you have comments, feedback, or questions on AppLab, tweet us @TeachCode or email us at support@code.org. We appreciate any and all feedback, especially through live user-driven site tests with this new UI. We’d love to see what you can dream up in App Lab!

We think it’s important to encourage collaboration across students. But it’s been tricky for students to merge App Lab projects together when working with others. It is easy to copy and paste code, but what about the screens that are carefully crafted in design mode? Well now you can import screens from one App Lab project to another!

To import screens, simply go to design mode in your project and click on the “Import screens…” option from the screen selector dropdown. You’ll need to paste in the share link of the project you want to import screens from. The screens and assets you choose will get added to your existing project. Easy as that!

We hope this feature makes it easier for students to work together on projects in App Lab. It’s also a handy tool if you want to reuse screens across different projects. Let us know what you think!

We updated the App Lab user interface to make it easier for students to view, explore, and edit data collected by their apps in real time—right next to the app itself! Here’s some background to explain why we think this is awesome. (Test it out and let us know if you agree!) 

What’s App Lab?

App Lab is a powerful tool that allows users to easily create apps in an online programming environment. Middle and high school students of all experience levels can use App Lab to bring their ideas to life with computer science. Some of our very own Code.org engineers use it, too!

One of the most exciting features of App Lab is how it enables students to make apps that store data. 

The ability to store data significantly opens up the different kinds of apps that students can build—restaurant review apps, game apps with high scores, or survey apps that save and graph responses are a few examples.

Since the ability to store data is such a powerful feature, we want to better empower students to interact with their apps’ data. With our most recent update, we made it easier for students to explore and edit this data in the “data browser” right next to the app itself. Students can even import data files directly into the data browser, creating apps with existing datasets.

We hope these improvements to App Lab’s UI make the data browser feel more integrated with App Lab. Now, instead of opening up a new browser tab just to view your app’s data, you can view it side-by-side and watch updates happen in real-time as more data is collected. Check it out:

To turn on and test the new UI, paste the following query param at the end of any of your existing or new App Lab project URLs:  

“?enableExperiments=useFirebaseForNewProject”

Or just click here to turn this feature on. You’ll see the new data browser for all newly created App Lab projects. 

Comments or feedback? Tweet us @TeachCode (we’d love to see what apps you create) or email us at support@code.org. 

-Poorva Singal, Product Manager 

The following updates to the app display UI in App Lab will make it more obvious when the app is running and when it’s paused in the debugger:

• a phone frame around the app display that lights up when the app is running

• the app will dim when paused in the debugger to signal that you cannot interact with it

You might have also noticed the screen switcher in the above screencap. You can now switch screens in your app when it isn’t running—without going to design mode.

This is especially great for teachers viewing their students’ projects, as the read-only view of projects doesn’t provide access to design mode.

This feature will be turned on soon in App Lab. But if you want to try it out now, use the query param “?enableExperiments=phoneFrame” on any of your existing App Lab project URLs. Or just click here to turn this feature on! 

Feedback? Tweet @TeachCode or email support@code.org.

In JavaScript, many functions have optional parameters that you may or may not want to specify. We’ve now added little arrow buttons to blocks that can be used to add and delete optional parameters.  Use the right arrow to add a parameter; use the left arrow to delete.

Note that unlimited parameters can be added to the dropdown block, but the penRGB only has a single optional parameter for the alpha value.

You can even use this new functionality with function blocks for user-defined functions. When using a block to call a user-defined function, you can use the arrow buttons to add as many parameters as needed.

Poorva Singal
Product Manager

Good comments are essential to good code. Our comment block is now even easier to use, making App Lab code easier to understand and maintain. Explore the changes we made:

• Just drag out a comment block and start typing - no need to worry about putting your cursor in the right place.

• If you want to add a longer multi-line comment, just press the Enter/Return key at the end of a comment block. A new comment block will automatically be added below.

• Have you ever worried about accidentally deleting the two backslashes at the beginning of a comment block? Worry no more - they’re now a fixed part of the block and can’t be deleted!

Give the improved comment block a try!  

Poorva Singal
Product Manager