Creating Apps with Devices (micro:bit) ('23-'24)

This unit assumes students are already familiar with App Lab, so we recommend starting with the App Lab Hour of Code which is included in this lesson. If your students are already familiar with App Lab, you may decide to skip this lesson, which requires hiding it from students in the unit overview page. Click here to learn more about hiding this lesson, allowing your classes to start right away with Physical Computing

This tutorial is designed to quickly introduce the App Lab programming environment as a powerful tool for building and sharing apps. The tutorial itself teaches students to create and control buttons, text, images, sounds, and screens in JavaScript using either blocks or text. At the end of the tutorial, students are given time to either extend a project they started building into a "Choose Your Own Adventure", "Greeting Card", or "Personality Quiz" app. They can also continue on to build more projects featured on the code.org/applab page.

To kick off a unit devoted to problem-solving and creating apps with devices, students begin by investigating the design of different physical devices and their apps. Students look at a variety of physical designs and attempt to match each design with a potential user. Then students choose a user and attempt to prototype a physical design for them on paper or in a digital template. To conclude the activity, students consider what it means to be a physical designer and create resources for other users.

Question of the Day: How can we design apps with devices based on the needs of a user?

This lesson gives students their first opportunity to write App Lab programs that incorporate the micro:bit physical computing device. After first inspecting the micro:bit boards, investigating some of its physical features and hypothesizing about potential uses, students move online to create applications that use App Lab inputs to control the micro:bit’s main output, its LED display, to show simple pictures, words and numbers.

Question of the Day: How can I control the main output on the BBC micro:bit?

Students should already be familiar with programming in App Lab, specifically using Design Mode to create screen elements and using onEvent blocks to create button click events. To expand the kinds of apps that students can make, and to encourage them to think in new ways about how users interact with apps, we introduce the setProperty() and setText() blocks that allow users to change the properties and content of various UI elements. In this lesson students explore how they can use events to update elements on the screen

Question of the Day: How can you update design elements of an app?

This lesson transitions students from considering the micro:bit as strictly an output device and instead introduces the buttons as tools for input. Starting with the hardware buttons, students learn to use onBoardEvent(), analogously to onEvent(), in order to take input from their micro:bit.

Question of the Day: How can the user interact with the micro:bit for input?

In this lesson, students are introduced to variables, the counter pattern, and if-statements. Students will use these concepts in the context of programming the micro:bit and creating more complex input/output behaviors, such as counting the number of button presses before having the micro:bit light up. The concepts in this lesson are used to make more complex and fulfilling apps in future lessons, and students may need to refer back to the videos and examples in this lesson as they continue to master these concepts.

Question of the Day: How can I create more complex programs that keep track of information and make decisions?

In this mini-project, students will use the micro:bit to collect data, then use App Lab to analyze the data that was collected. This is similar to citizen science fieldwork or survey apps where a person collects data on a device "in the field", then returns to a central location to view and analyze the data (such as cataloguing endangered species in the wild). Students will use variables and events to collect data from the micro:bit, then use if-statements to make decisions or recommendations based on the data they collect.

Question of the Day: How can I use events and variables to create an app that collects and analyzes data?

Students learn to use several new design elements - text inputs, dropdowns, and sliders - so they can get user input from the screen of their apps. This lesson also introduces students to the getProperty and getText blocks, which allow them to access their user input in their code. Students first practice using these tools to determine what the user has input in various user interface elements. Students later use getProperty and setProperty together with the counter pattern to make elements move across the screen. A new event trigger, change, is also introduced to represent when a dropdown or slider changes values.

Question of the Day: How can we use the app screen for user input?

In this lesson, students combine inputs and outputs across both the micro:bit and the app screen. For example, students may use dropdowns or sliders to make the LEDs on the micro:bit change. Or, students may use the buttons on the micro:bit to update elements on the screen. This lesson also extends how students use variables and if-statements to make more complex decisions based on user input. There are no new coding commands or micro:bit features in this lesson, but students are combining many elements from previous lessons in new ways.

Question of the Day: How can I use inputs and outputs from both the micro:bit and the app screen?

In this project, students create an app that controls the micro:bit so it interacts with the physical environment around it, similar to many smart phone apps that are used to control devices in a house or car or school. Students use physical materials to help design their physical device, then create an app that lets the user interact with the physical device or change settings.

In this lesson, students explore how the two sensors (light and temperature) can be used to write programs that respond to changes in the environment. The use of these sensors marks a transition in terms of how users interact with a program. By using sensors as an input, the user of an app doesn't have to directly interact with it at all or may interact without actually realizing they are doing so.

Question of the Day: How can I use sensors to detect changes in the environment?

In this lesson, students will explore the accelerometer and its capabilities. They’ll become familiar with its events and properties, as well as create multiple programs utilizing the accelerometer similar to those they’ve likely come across in real world applications.

Question of the Day: How can I use the accelerometer to create apps?

This lesson introduces students to functions as way to organize and group repeated blocks of code together. Then, students learn how to use parameters in their functions as a way to generalize behaviors to work for different contexts. Students will use these concepts in future lessons, and it may be necessary to return to this lesson to reference the resources and videos.

Question of the Day: How can I use functions to organize and simplify my code?

In this lesson, students create an interactive "pet" using the sensors on the micro:bit, the LED Display to represent expressions, and physical materials. Students explore how the micro:bit can augment physical materials to create an interactive experience. This project does not use the App Lab screen except to help with debugging - otherwise, users only interact with the interactive pet itself.

In this lesson, students learn how to attach external LEDs to their micro:bit and use code to light up these LEDs. This allows students to create more flexible devices that mimic real-world products. This lesson requires several external materials, as well as safety protocols to ensure students don’t accidentally damage their micro:bit.

Question of the Day: How can I use external LEDs to create physical prototypes?

In this lesson, students learn how to connect external wires to create input events when the wires touch, simulating a button press. Students learn to use code to recognize these external button events to make changes to their app. This allows students to create more flexible devices that mimic real-world products. This lesson requires several external materials, as well as safety protocols to ensure students don’t accidentally damage their micro:bit.

Question of the Day: How can I use external buttons to create physical prototypes?

In this final project for the course, students team to develop and test a prototype for an innovative computing device based on the micro:bit. Using the inputs and outputs available on the board, groups will create programs that allow for interesting and unique user interactions.