Overview

Students work through a progression of levels to build an understanding of how to layout an app. The final challenge has students setting up the screen of an app by attempting to copy an image of an app.

Goals

Students will be able to:

Purpose

This lesson introduces students to the code used to build apps, as well as the different kinds of screen elements and properties at their disposal. This lesson not only builds up skills in designing a user interface but also sets students up to begin designing an app of their own in the following lesson.

Resources

Getting Started

Prompt: What is a common app that you use? Take a minute to sketch the User Interface of the main screen. Note how the user interacts with the app.

Teaching Tip: Students who are blind or visually impaired may not be able to sketch a user interface, but they can still engage with the core lesson. Emphasize the question of how users interact with the app. What kind of elements does the user interact with? How do they move between them? Have students describe or list the process of using the app.


Do This: Compare your sketch with a partner and discuss common elements that both of your apps share.


Discussion Goal: This prompt is designed to bring out students' prior experiences working with apps. If students aren't sure what app to choose, you can even ask them to pick a website, such as Code.org. This discussion can pull out the fact that most apps contain images, buttons, and text that help users find and interact with information and content.

Remarks

Activity

Running the Challenges

For today's activity, students will use a number of apps from the CSP-Widgets Repository. Unlike the previous lesson, this time students will inspect and modify the code of the apps. Each app is a carefully scaffolded challenge that teaches a small portion of the overall tools that will be used later.

For full instructions on downloading and running the apps, including downloading the Quorum Studio environment, see the Getting Started with CSP Widgets help page.

Challenge #1: Review an App

Open a Project: Have students open the "Lesson2_App1" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: This project is one of the apps from the last lesson. This time, we'll explore the code. Spend some time looking around and change some of the properties.

Discuss: After the students have had some time to explore, pull the class back together to discuss their findings. What did they discover? Was there anything they found interesting or wanted to know more about?

Discussion Goals: There's lots of code in the app, and students won't understand all of it yet. When discussing their observations, here's a few things they might notice:


Challenge #2: Changing App Properties

Open a Project: Have students open the "Lesson2_App2" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Read the comments (the grayed out text) in the code starting on line 17. Then follow the instructions to change some of the app's properties.


Challenge #3: Changing Colors

Open a Project: Have students open the "Lesson2_App3" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Read the directions beginning on line 22 in the code. Then follow the instructions to change the colors of the components in the app.


Challenge #4: Using Custom Assets

Open a Project: Have students open the "Lesson2_App4" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Read the instructions on line 7. Then, upload a custom image into the app by following the instructions on line 26, or upload a custom sound by following the instructions on line 48.


Challenge #5: Making and Positioning Elements

Open a Project: Have students open the "Lesson2_App5" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Follow the instructions on line 39 to update the properties of an icon in the app. Then follow the instructions on line 64 to create a brand new icon and set its properties.


Challenge #6: Setting Useful Names and Descriptions

Open a Project: Have students open the "Lesson2_App6" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Read the instructions on line 25. Then, change the name of each item in the app, and set meaningful descriptions on the icons.


Challenge #7: Putting it Together -- Recreate an App

Open a Project: Have students open the "Lesson2_App7" project. In the SourceCode folder, students should open "Main.quorum".

Challenge: Now that we've spent some time exploring how these apps work, it's time to build one from scratch. Read the instructions starting on line 33. Then, using the comments and everything you've learned so far, create an app that looks like this picture.

A picture of an example app. It has a light blue background, and a dark blue banner at the top. There is a label on top of the banner which reads

Teaching Tips

Looking Back: If students are having trouble putting together the code for this challenge, encourage them to reference the code in the previous challenges. Understanding how to copy and modify existing code is a useful tool for students and professionals alike!

Teaching Accessibly: For blind students, rather than using the picture to recreate the app, you can have them build off of the "feature list" on line 45 of the app template. Alternatively, you can have all of the students work from the feature list without seeing the picture -- students' apps will look different when they're done, which can make for an interesting point of discussion later.

Outcomes: It's ok if students' designs do not exactly match the sample. The goal is for students to become comfortable setting up a User Interface before the sketch out plans for their own apps in the next lesson.


Wrap Up

Prompt: Have students answer the following:


Discussion Goals

What elements collect input?

What elements display output?

Do you think there are elements that can do both?


Assessment: Check for Understanding

Question: Why is it important for element IDs to have meaningful names?

Standards Alignment