Learning to program with AppLab, a brilliant new tool from Code.org

I recently started tinkering with a new product from Code.org called AppLab. AppLab is a web-based programming environment that makes it easy for students to create and share short computer programs.

Similar to Scratch and Snap, it features a visual block-based programming language that allows students to build programs via a drag-and-drop interface. What is unique about AppLab is that I can switch to “text mode” and start coding in JavaScript.

Text Mode

When teaching Computer Science using a block-based language, some students are inevitably interested in text-based languages. A month or two into the course, many advanced students will ask something like “When are we going to learn real programming?”. AppLab provides an answer to this by letting students view and edit the underlying JavaScript code. Behold:

Block Mode and Text Mode in AppLab

The ability to toggle between “block mode” and “text mode” allows students to easily compare visual programming blocks with their text-based equivalents. When teaching a second semester student Python programming, I often found myself making analogies to what he learned first semester in Snap. For instance, a “function” with parameters that returns a value in Python is analogous to a custom block with inputs that reports a value in Snap.

AppLab lets them see this comparison side by side, which makes the transition to text-based programming easy. I honestly think our first and second semester Intro to CS curriculum could have been collapsed into a single semester for many advanced students using this approach.

AppLab YouTube Tutorial

JavaScript

I love that they chose JavaScript for the programming language. This is great for several reasons:

1. JavaScript is one of the most popular programming languages. Not only does every front-end web developer use it — tools like React Native, nodejs, and Electron are making JavaScript an increasingly popular choice for mobile, server-side, and even desktop programming.
2. There is nothing to install. It lets students easily write code that runs in the browser that is already installed on their school computer. Installing and setting up a full blown IDE like Eclipse can be a pain, especially in a locked down environment.
3. Programs are easy to share. Since everything runs in the browser, a program can be shared with a simple link. Students can also show off their JavaScript skills and share snippets using sites like CodePen and JSFiddle.
4. It is easier to learn than Java. I personally find Java has a bit too much overhead to be a great language for teaching programming. It has often been stated: the most basic “Hello World” program in Java requires you to use classes, explain public vs. private, talk about what void means, specify where curly braces and semi-colons go, and use a static method that accepts an array of arguments as a parameter. It’s nice to use a language that lets you start simple and use more advanced functionality when it is needed.
5. It can be visual like Scratch. Students can start using plain JavaScript to draw graphics on a canvas and make games. Or they can make use of an existing library like processing.js to create advanced data visualizations and digital art.

Writing a Program Using AppLab

Design Mode

Before coding, it is nice to visually see what you are building, whether it is with a whiteboard sketch or using a mockup tool like Balsamiq Mockups. AppLab has a Design Mode built in where you can drag and drop widgets onto a canvas that represents your user interface.

Design Mode

Code Mode

Once you have designed your user interface, you can switch to Code Mode to wire up some code. UI components are referenced using their ID, the same way you would reference an element in JavaScript. Below you can see how I attached a mouse click event to each button and defined a callback function to play an instrument:

Code Mode

Sounds

AppLab has an asset manager that lets you upload images and sounds to use in your program. Below you can see how I was able to upload mp3 files to play when using the playSound() UI control:

Animation

Animation can easily be achieved using the setTimeout() block, which allows you to define a function that executes when a number of milliseconds has elapsed. Below I make a button pulsate by making its size larger and setting its background to a different color. After 100 milliseconds elapses, the setTimeout() callback function executes and returns the UI component to its original size and color:

Using the setTimeout block to animate a UI Component

Sharing

Programs are easily shareable using the Share button at the top of your program. This generates a link that can be copied to your clipboard, shared via social media, or texted to your friend’s mobile phone:

Creating Share Links

With a share link, AppLab programs are usable on mobile devices, which is especially useful when many students have a smartphone. AppLab allows them to make their own simple apps that can be used by their friends:

Mobile View

And Much, Much More

AppLab has many more advanced features built-in, including a data store, a charting widget, support for HTTP requests, and more. I would love to write about all of these features here, but this post has already gotten a bit long. I will cover more AppLab features in a future tutorial, so follow this blog if you want to hear more. For now, you can watch this YouTube video I created if you would like to learn how to build a full application using AppLab. If you just want to play with the final app and edit its source code, you can click on the Remix link below:

Code.org

I am excited about using this new programming tool in the classroom and look forward to seeing what students make with it. Enjoy!