Lesson 17: Linking Prototype Screens

Distribute: Make sure each team has their materials available.

Prompt: Today we will be combining all of our digital screens into a single app. Based on yesterday’s lesson, what are the steps it will take to get a button on your screen to click and change to a screen that a teammate created?

Discuss: Have students journal on their own, then discuss in a group then share as a class.

Goal: This prompt is a review of yesterday’s lesson. Try to draw out that there are several steps to complete in this process:

1. import the screen your teammate created
2. add an event handler to your code using the button ID
3. use the setScreen block to change to the new screen

Today we will be combining all of our screens to create our digital prototypes! By the end of this lesson, each person on your team should have their own working version of your app that we will use for testing and feedback tomorrow.

Question of the Day: How can I combine screens to create a complete digital prototype?

Prepare: Give teams a few minutes to review the state of their screens, identifying any remaining work to be done before combining them. Once they are ready, have students share their screen import URLs according to the plan they made at the end of yesterday’s lesson.

Code Studio: Have students log into their computers and open Code Studio. The first level has students import all of the screens from their teammates. The next level has students add the code for the event handlers so students can click through each screen.

Circuate: Monitor students as they complete the tasks above. Teams may be in different stages of development - some teams may still need support finishing their screens, some teams may need help sharing their screens with each other, and some teams may need help adding the events to their code. Regardless of each team’s progress, provide support and encouragement to help teams progress and move to the next steps of their prototype development.

Debugging Screen Imports: There are several potential stumbling blocks that teams may run into during the import process:

• Miscommunicated urls: The sharing URLS are long and complicated, so students will need a shared location where they can copy/paste their urls
• Conflicting screen IDs: Importing a screen with the same ID as an existing one will allow you to overwrite the existing screen. This is particularly troublesome when students leave the default screen ID "screen1"
• Conflicting element IDs: If students have properly namespaced all of their elements this shouldn't be an issue, but any elements that have the default ID or share an ID with an existing element will prevent a screen from importing

Working Independently: Once teams move to the programming phase of this project, it becomes much more difficult for students to collaborate on the same app. The design phase is the primary opportunity for all students to collaborate on the app - after this teams will still be working together, but each student will be working on their own copy of the app. Encourage students to use this as an opportunity to be creative and add personal style decisions to their personal version of the team app.

Share: Give students a chance to share their prototypes with each other and do some initial testing. Because every student is now working on a separate version of the team app, each app will likely be slightly different.

(Optional) Share Via Phone: Depending on the norms and rules of your classroom, you may decide to make a temporary exception and allow students to test their apps on their own devices. App Lab is modeled after the apps we use on our phones, so it can be incredibly exciting for a student to load the app they made on their own device. To do this, students press the “Share” button in the upper-left corner of their project and then press “Send to Phone”. This opens a menu where students can send the app to their device via a text message, or scan a QR code. These instructions are also in the slides for this unit - if you decide to skip this step, make sure to also delete this slide from the presentation.

Now that we have our digital prototypes, it’s time to test them! Tomorrow we’ll do another round of user feedback, where you will have a chance to test each other’s apps. Right now, each team member has their own version of the team app. For tomorrow, we need to pick one of these versions that we will use for testing

Discuss: Have teams discuss with each other which team member’s app they will use for testing tomorrow. If several students have apps “complete enough” for testing, teams can use a random process to make a decision (such as flipping a coin or rolling a dice).

Testing Outside of Class: Now that each student has their own copy of the app, they can share the app with friends and family outside of the classroom. This is especially true if you’ve allowed students to share the app to their phones. Encourage students to do some initial sharing and testing outside of class. This helps get some initial feedback on the app, but also gives students a chance to share their excitement and hard work with their community.