AYP
1
2
3
4
5
6
7
8
9

Lesson 7: App Development - Intro to App Lab (13+ only)

Overview

Tutorial Summary: 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.

Age Appropriateness: The tutorial is designed for students over 13. Because it allows students to upload custom sounds and images.

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.

Have fun completing your Hour of Code with App Lab!

Purpose

This lesson is your students' first step with App Lab. The tutorial itself should be an approachable introduction to a powerful tool with broad functionality. Students should have a positive experience during the tutorial and more importantly should be motivated to keep building in App Lab. They are only scratching the surface of what the tool is capable of here, so afterwards they should use the code.org/applab page or the project gallery to get inspired for more complex types of projects they want to make.

Agenda

Warm Up (5 min)

Activity (45 min)

Wrap Up (10 min)

Preparation

  • Review and complete the online tutorial yourself
  • Be sure to test it first before asking your students to complete it. Check your technology and decide if you need to troubleshoot anything in advance of the activity.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teacher

Support

Report a Bug

Teaching Guide

Warm Up (5 min)

Build Excitement!

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.

Send students to the App Development: Intro to App Lab lesson in the PwC course on Code.org. From there, have them click the link the Introduction to App Lab tutorial.

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 (45 min)

General Support

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

  • 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 1-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 in onEvent() 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 same onEvent(). You should never have a program that has two onEvent() blocks for the combination of element (e.g. "button1") and event type (e.g. "click").

Teaching Tip

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.

Images and Sounds - Levels 8-9

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 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 (10 min)

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.

Career Discussion

Introduce yourself and your career:

  • What do you work, what do you do, and what do you love most about your job?
  • What or who inspired you?
  • How did you get interested in computer science?
  • Did you have a mentor?
  • Share a story about how tech affects everyone

Consider showing the inspirational Data and Medicine - Video.

Ask the students questions and leave time for Q&A.

  • What jobs are they interested in, what are their favorite tech gadgets or apps, and how do they think they are built?
  • Do the students have any questions for you?