Lesson 1: Intro to App Lab
45 minutes
Overview
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.
Standards
AP - Algorithms & Programming
- 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
Agenda
Objectives
Students will be able to:
- Build and share their own apps in App Lab using features like buttons, text, images, sound, and screens.
Preparation
- Review and complete the online tutorial yourself
- Print one or more of the Exit Ticket examples at the end of this lesson plan, or create your own.
Teaching Guide
Before The Lesson
Preparing for the Unit
Getting Started with Code.org: Consider watching our Getting Started with Code.org video series for an overview of how to navigate lesson plans, setup a classroom section, and other important features of the Code.org platform. Each video also has a support article if you'd prefer to read or print instructions - click here to learn more.
Setup a Classroom Section: You can use a class section in Code.org to manage your students, view their progress, and assign specific curriculum - click here to learn more.
If you are using a learning management system, there may be additional steps to sync your classes with Code.org:
- Click here for steps to setup your classes with Google Classroom
- Click Here for steps to setup your classes with Clever
Become a Verified Teacher: Lesson plans and levels have additional resources and answer keys for Verified Teachers, which is quick process that verifies your position at an educational institution. Click here to complete a form and you should have access to verified teacher resources in ~1 business day. Verified teachers also have access to the "Teacher's Lounge" section of the forums.
Get Inspired: Consider watching our Teacher Tips video playlist, featuring current CS Discoveries teachers.
Technical Requirements: For the very best experience with all Code.org content, we recommend consulting with your school or district's IT department to ensure specific sites are allowed and are not blocked. Click here to see a list of sites to unblock.
You can also find mobile and tablet support details, hardware recommendation information such as minimum Internet connection speed, smallest screen size supported, and other hardware recommendations, as well as a list of supported browsers and platforms at the same technical requirements website.
Warm Up (5 minutes)
Introduction
Motivate: Explain to students the goals of today's activity. They are going to start using a new tool that will let them quickly make apps they can instantly send to themselves or friends to use.
Hour of Code: This lesson is mostly identical to the App Lab Hour of Code activity, and many of the tips below reference the hour of code. It can be fun to lean-into the "Hour of Code" especially if it's your students first introduction to programming. You may decide to review the Hour of Code Educator Guide and Best Practices from Successful Educators in order to begin to plan your Hour of Code event.
Slides and Videos: This lesson is designed to be mostly self-paced and completed within Code Studio, so there isn't a Slide Deck for this lesson and the videos are included within the levels that students go through. In future lessons, we provide slide decks with the videos embedded to be watched as a class rather than interrupting a student experience.
Video: The first level of this activity is a video that should both motivate students to complete the activity and explain how it will work. Consider watching it as a class and quickly debriefing afterwards to answer questions.
Activity (35 minutes)
Intro to App Lab
General Support: As a teacher your role is primarily to support students as they make their way through the tutorial. Here are a few tips that should help students regardless of the level they're working on
- Checking Correctness: This tutorial will not tell students whether they completed the level correctly. Encourage students to use the target images and directions provided in every level to know if they are on the right track. If students want to move on past a particularly tricky level they can simply click "Finish" and continue on.
- Collaborate with Neighbors: Encourage students to check in with a neighbor when they're getting stuck. Since this tutorial includes videos and students may be wearing headphones it can get easy to "go into a bubble". Help break those barriers by actively pairing students if they seem like they need help.
- Read the Instructions: The instructions usually provide helpful tips on how to complete the level. Before completing a level for a student ensure they've actually looked closely at the target image and read all the text there.
- Stuck? Click here: Each level includes a GIF showing exactly how to complete the level. If students want help they can and should use these GIFs. If they only want to use them as a hint, just have them close the GIF once they've seen the first part.
- Move On and Come Back: Sometimes students will benefit more from coming back to a tricky level. Except for the "Design Mode" sequence, all levels are independent of one another, though they do rely to some degree on previously introduced concepts.
Setting Properties - Levels 2-4
These levels are all about learning to use the setProperty()
block. The dropdowns in this block make it easy to know exactly what it is capable of changing. That said, there's a couple tips that can help
- When to use Double Quotes: The
setProperty()
block automatically changes the final dropdown when you select what properties you want to change, including whether they use double quotes. When in doubt, students should first change the first two dropdowns, then use the last one as a model for what values work there. The most common error is failing to use double quotes around a color name. - Hover to Read IDs: By hovering over an element in your app you can read its ID. This will help students when they're trying to change multiple elements on their screen.
Make It Interactive - Levels 5-7
This sequence introduces the onEvent()
block. Here's some helpful tips if students are getting stuck.
- onEvents Don't Go Inside One Another: Students just starting out may try to put one block inside of the others. This is never the intended behavior for this tutorial. Even though this is mentioned in the videos, a quick reminder might help get kids unstuck.
- Check Your IDs: You need to change the
"id"
property inonEvent()
so that it detects events with the correct element. - You Can Use Multiple Blocks in an
onEvent()
: If you want multiple things to happen when you click the same button, just add more blocks to the sameonEvent()
. You should never have a program that has twoonEvent()
blocks for the combination of element (e.g. "button1") and event type (e.g. "click").
Finding Images: Students do not need to search for images or sounds online in order to complete this lesson, but they may wish to. You'll likely want to prepare in advance to advise responsible and appropriate searching for images.
This section has a single level that has students add an animal to a soundboard. This level is a little more involved that the previous ones, so expect that students may need to either rewatch the video beforehand or read instructions carefully to complete all the steps.
Images and Sounds - Levels 8-9
- Images Use
setProprety()
: To add an image to a screen element students can use the"image"
property. There is no new block. - Link to Images: Students can copy the URL of images they find directly into the
setProperty()
block in order to add them to their apps. There's no need to download them to their computers and upload them to App Lab if they don't wish to.
Design Mode - Levels 10-13
In the last sequence students are working on the same project for three bubbles in a row. They are now learning to add screen elements themselves which means that the total number of things they can do in App Lab has grown a lot. Assume that some students will spend some time exploring at this point as they try out all the new tools.
- Using Good IDs: An important part of programming in App Lab is giving your elements good IDs. Up to this section students have had their IDs created for them, so they haven't had a chance to practice this skill. This is a useful reminder for the teacher to reinforce during this section.
Share Your App - Levels 14-15
This section is very open-ended. The tutorial itself is designed to give students ample time to keep working on this project, either making Choose Your Own Adventure, or one of their own creation.
- Try the Samples: Students are provided 3 sample apps that should help them brainstorm their own ideas.
- Encourage Sharing: If students have cell phones with a data plan they can quickly text a link to their projects to their own phone or a friend's. If your school policy allows it, encourage them to do so here.
- Encourage Creativity: Compared to other activities in this lesson, this section asks students to be much more creative. Ask students to think "what will your story be about?" or do a quick group brainstorm so that classmates can hear ideas from one another.
Wrap Up (5 minutes)
Celebrate and Keep Going!
code.org/applab: At the end of the lesson encourage students to head to the App Lab home page where they can get ideas for more ways to keep their adventure with App Lab going.
Exit Ticket: Distribute the Exit Tickets to collect feedback on how the day felt for students.
(Optional) Certificates: You may decide to print certificates to celebrate students who completed the entire tutorial - printable certificates can be found here: http://code.org/certificates
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.