Unit4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Lesson 4: Variables Make

App Lab

Overview

Using Programming Patterns and a step-by-step approach students make their own version of a Photo Liker app. At the beginning of the lesson students are able to explore a working version of the app. They are then given the design elements of the app but begin with a blank screen. A progression of levels guides students on the high level steps they should use to develop their app but leaves it to them to decide how to write the code. At the end students submit their apps which can be assessed using a provided rubric.

Purpose

This lesson is an opportunity for students to take on the "blank screen" and build the code that runs an app entirely from scratch. Guidance provided throughout the lesson helps students break down the large task of "building an app" into more incremental steps that they can use on future projects, including this unit's final project and the Create PT.

Agenda

Lesson Modifications

Warm Up (2 mins)

Activity (38 mins)

Wrap Up (5 mins)

View on Code Studio

Objectives

Students will be able to:

  • Recognize the need for programming patterns with variables as part of developing a functioning app
  • Implement programming patterns with variables to develop a functioning app
  • Write comments to clearly explain both the purpose and function of different segments of code within an app
  • Use debugging skills as part of developing an app

Preparation

  • Review the different steps students will be asked to complete as they build the app
  • Review the information covered in the slides

Links

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

For the Teachers

For the Students

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.

Warm Up (2 mins)

Teaching Tip

This is the first official "Make" lesson in the EIPM model. Review the EIPM model in the EIPM: A Short Introduction - Resource .

Make Lessons:

Overview: Students make a target app for which they are given the screen elements but little to no starter code.

  • Students are provided high-level steps to break down the project
  • Teacher supports students by directing them towards notes, previous work, and debugging strategies practiced in earlier lessons.

Goal: Students are able to independently decide when and how to use the new concept in the context of a larger project.

Watch the following videos:

Teaching Tip

Short Intro: The Warm Up today is short and light. Students should spend the maximum amount of time working on their projects.

Intro the Project

Remarks

For the past few days, we've learned a lot about storing and updating information in variables. Today you are going to have an opportunity to demonstrate your learning by making an app.

Activity (38 mins)

Build the Photo Liker

Group: Make a determination as to whether this project will be completed in pairs or individually. You may even choose to let students decide.

Do This: Have students explore the working Photo Maker App in Level 2.

Discussion Goal

  • What does this app do?
  • It lets a user "like" an image and add comments to it.
  • What are the inputs?
  • The thumbs up and thumbs down button, the text input for adding a new comment, and the button to add the comment.
  • What are the outputs?
  • The number showing how many thumbs up the image has.
  • What's one piece of information that might be stored in a variable?
  • The number of likes and all the comments added so far.

Prompt: If students are not working in pairs they should still discuss the prompts with a neighbor.

  • What does this app do?
  • What are the inputs?
  • What are the outputs?
  • What's one piece of information that might be stored in a variable?

Teaching Tip

Supporting Students: While students are working on their apps, circulate the room and check in with students who need a little help. Encourage students to collaborate and discuss bugs with each other.

Debugging: Review with students steps they can use to debug if they get stuck:

  • Run the code on turtle mode
  • Add the variables to the watcher
  • Use console.log() to get output from the app
  • Explain the code to a friend
  • Read the code carefully line by line, trying to decide which one is causing the error.

Remarks

Now let's build the this app. The screen has been set up for you - it's your job to add the code!

Distribute: Give students copies of CSP Variables Make - Photo Liker App - Activity Guide if you will be using it during the class.

Do This: Direct students to level three where they complete the Photo Liker App. Given this is students first Make project, it is highly recommended that students practice with this guide the first time. In future Make lessons they may opt not to use this guide. For students who need more detailed guidance once they've started programming, Step 3 includes step by step instructions that the student can follow.

Based on the needs of your classroom decide whether you will collectively go through the activity guide or have students complete it individually.

Submit: Encourage students to check the rubric on the last page of the Activity Guide before submitting.

Wrap Up (5 mins)

Teaching Tip

Maximize Work Time: The wrap up is short to allow the maximum amount of time for students to complete the activity.

Remarks

Awesome work today! Make sure to submit your project when you're done with it!

Assessment: Make Project

Use the rubric provided with the project to assess student projects.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.