Intro to App Design - Lesson 1: Introduction to Apps

Overview

Students explore and investigate what makes an app an app. They begin by looking at and discussing several different apps. Following this, students watch a video explaining the basics of how computers work. Finally students return to the apps and consider the various inputs and outputs.

Goals

Students will be able to:

  • Identify the inputs of an app
  • Identify the outputs of an app
  • Identify the purpose of an app

Purpose

This lesson is an introduction to a unit that introduces programming through the broader context of designing apps that help people. This lesson is designed to build excitement about the skills that students will develop throughout the unit and get them thinking early about the ways programming can help others. This lesson also establishes shared vocabulary for talking about apps in a generic sense, for example its inputs, outputs, and overall user interface.

Resources

Getting Started (5 minutes)

Remarks

  • Now that we've learned how to represent information digitally and how the Internet works, it's time to think about creating digital content for others to interact with.

Discuss: What are apps? How do we interact with them? What kinds of things do apps do?

Discussion Goal

Apps are designed to solve a problem by providing a service

  • Entertainment: images, movies, tv shows, etc.
  • Social: social media, chatting
  • Commerce: marketplaces
  • Finding Information: search engines, maps

Apps have screens or User Interfaces to display and collect information to and from users

  • These things collect information: Buttons, sliders, text boxes, etc.
  • This is the type of information that can be displayed: Sounds, images, video, text

Activity (35 minutes)

App Exploration

For today's activity, students will explore a number of apps which can be found in the CSP-Widgets Repository. Each app is a Quorum Studio project in the "Unit 3" folder. For full instructions on downloading and running the apps, including downloading the Quorum Studio environment, see the Getting Started with CSP Widgets help page.

Group: Organize students in groups of two. Students should open the apps used for this lesson, starting with "Lesson1_App1".

Teaching Tip

Teaching Tip: There are several different sample apps. Depending on time, students might not explore all of them right now.

During this activity, make sure students are running and exploring the apps and not focusing on the code. Students will have opportunities to inspect and work with code in later lessons.

Prompt: With a partner, discuss the following and note down in your journal:

  • How does the user interact with the app?
  • What is the overall purpose of this app?
  • Who is the target audience?

Share Out: As a class, discuss student answers to the discussion questions.

Discussion Goal
App #1: Water Conservation Tips
  • The user selects through the different screens and makes choices about the correct ways to conserve water. When the user makes choices, images or sounds are played to indicate if a choice is the right one.
  • The purpose of the app is to teach people about ways to conserve water.
  • The target audience is young people who are interested in the topic
App #2: Bird Quiz
  • The user answers trivia questions about birds. If the answer is correct, they go to the next question. If wrong, they are taken to a losing screen, and then start the quiz again. If three questions are answered correctly the user is taken to the winning screen.
  • The purpose of the app is to teach users different facts about birds
  • The target audience is anyone interested in birds
App #3: Hamilton Township
  • The user selects through a few different screens to learn about township efforts to beautify the town
  • The purpose of the app is to educate users on steps the town is taking to improve the town
  • The target audience is people who live in Hamilton Township

Remarks

  • In developing apps, which are a kind of computing innovation, it's important to understand both their purpose and function. The purpose helps the developer focus on creating an app with specific goals in mind.
  • Now let's dig in to how the user interacts with the apps.

Input & Output

Display:Show

How Computers Work - What Makes a Computer, a Computer - Video

Remarks

  • The video explained Input, Storage, Processing, and Output. Today we are going to focus on input and output. An app on a phone gets input in many different ways from a user or from another program and displays (or in the case of sound: plays) output. The output of a program is usually based on inputs or the initial way the program was set up. For example, you could program an app to play a song as soon as it runs.

App Exploration

Do This: With your partner, take another look at the sample apps you explored before. Consider what the inputs and outputs are for the apps. Note these down in your journal.

Teaching Tip

After students are finished writing in their journals, discuss as a class or collect the journals to review student answers.

  • An input could be a user selecting a button or tapping the screen
  • An output could be an image displayed or a sound played

Wrap up (10 Minutes)

Remarks

  • Apps solve a problem for a target audience. Apps take in input from users and output information in various ways. Users interact with apps through the user interface.

Discuss: Think of your favorite app. Discuss with a partner what the user interface looks like and the inputs and outputs.

Discussion Goal

Goal: After students have shared with a partner, bring the class back together and discuss a few examples.

Journal

Add to your journal the following terms along with your own definitions:

  • User Interface: The inputs and outputs that allow a user to interact with a piece of software. User interfaces can include a variety of forms such as buttons, menus, images, text, and graphics.
  • Input: Data that are sent to a computer for processing by a program. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text.
  • Output: Any data that are sent from a program to a device. Can come in a variety of forms, such as tactile interaction, audio, visuals, or text.

Assessment: Check for Understanding

For Students

Open a word doc or google doc and copy/paste the following question.

Question

Match each term from the definition list to an entry in the example list:

Definitions

  1. Output
  2. Input
  3. User Interface

Examples

  1. A song is played
  2. The user selects a button
  3. A screen with buttons, images, and text

Standards Alignment

  • CSP2021: CRD-2.A.2, CRD-2.C.1, CRD-2.C.4, CRD-2.C.6, CRD-2.D.1, CRD-2.D.2

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 3 Lesson 2 (Introduction to Interface Design), which describes Learn about interface design.

Next Tutorial