Please enable JavaScript to use CodeHS

Mobile Apps (Semester)

View Syllabus Overview
Introduction to Mobile Apps
Description

In this first lesson, students will be introduced to React Native, a framework that will be used to develop apps throughout this course. They will also be guided through the download process for Expo, an app that helps students run their programs on their handheld devices as they are created.

Objective

Students will be able to:

  • Articulate what React Native is, what it is used for, and the benefits of the framework
  • Download and run the Expo app on a device in order to physically view apps as they create them throughout the course
Components and the Stylesheet
Description

In this lesson, students are introduced to the basic components used to build React Native apps. They will learn about the parent view component and see how all child components are nested inside.

Objective

Students will be able to:

  • Create a basic app using view and text components
  • Nest child components inside a parent view component
Description

In this lesson, students learn how to add styling to specific components to their apps using the Stylesheet API.

Objective

Students will be able to:

  • Define style rules using a stylesheet
  • Apply a specific style rule to a particular component
Description

In this lesson, students will begin to style their app layout using various Stylesheet components.

Objective

Students will be able to:

  • Position different components relative to each other
  • Control the size and position of components
Description

In this lesson, students will learn about the text attributes that can be styled.

Objective

Students will be able to:

  • Style a Text component’s font size, weight, and color using the Stylesheet API
Description

In this lesson, students will begin creating their Scorekeeper program. They will be able to design it how they wish and will be adding to this program throughout the course as they learn new concepts.

Objective

Students will be able to:

  • apply their knowledge of components and styling to develop a layout for a scorekeeper app
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of view and text components and styling through a multiple choice quiz
Buttons and Text Boxes
Description

In this lesson, students will learn how to make components of their apps react to being pressed.

Objective

Students will be able to:

  • create an alert when a particular component is pressed
  • make any component behave like a button
Description

In this lesson, students will learn how to use the TextInput component to allow users to input information into their apps.

Objective

Students will be able to:

  • use the TextInput component to allow users to enter text into their apps
  • set state values that will control the initial values in their text boxes
  • concatenate strings with state objects to personalize alert messages
Description

In this lesson, students will add some functionality to their Scorekeeper program. They will allow users to enter team names as well as fire alerts when certain buttons are pressed.

Objective

Students will be able to:

  • apply their knowledge of buttons and text boxes to update and add functionality to their scorekeeper app
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of buttons and text boxes through a multiple choice quiz
Advanced Layouts and Images
Description

In this lesson, students will learn how to add images to their apps.

Objective

Students will be able to:

  • incorporate images into their app designs and size them appropriately
  • explain what the aspect ratio of an image is
Description

In this lesson, students will learn how to use the ImageBackground component to allow other components to be placed on top of an image.

Objective

Students will be able to:

  • use ImageBackground components to layer various components on top of an image
Description

In this lesson, students will learn how the Image component can be nested inside a TouchableHighlight component in order to use images as buttons.

Objective

Students will be able to:

  • use Image components as buttons in their apps
Description

In this lesson, students will learn how to create responsive layouts using flex values.

Objective

Students will be able to:

  • size components relative to each other and the screen size using flex
Description

In this lesson, students will learn how to create responsive layouts using the Dimensions API.

Objective

Students will be able to:

  • size components relative to each other and the screen size using the Dimensions API
  • note the reasons we would use Dimensions over flex values to create responsive designs
Description

In this lesson, students will add images to their Scorekeeper apps. They will also alter the way their components are sized so that their layout is responsive.

Objective

Students will be able to:

  • apply their knowledge of Image components to make their Scorekeeper app more appealing
  • use flex values or Dimensions to create a responsive layout
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of images and advanced layout concepts through a multiple choice quiz
App Build: Recreate a Popular App
Description

In this lesson, students will spend time researching, exploring, planning, and developing a replica of an app screen they’ve used previously. They should try their best to mirror the features of the chosen screen and think about the functionality that should be built into the app in order to clearly determine which topics they still need to learn when it comes to app creation.

Objective

Students will be able to:

  • replicate an app screen design using the skills they’ve learned up to this point
  • think critically about the layout and style of an app screen
Events and State
Description

In this lesson, students will learn how to set state variables and use their values inside their programs.

Objective

Students will be able to:

  • set multiple state values
  • use state values inside their programs
Description

In this lesson, students will learn how to update the values of states by using TouchableHighlight components.

Objective

Students will be able to:

  • create and use functions that are called using the onPress function to update state values
Description

In this lesson, students will learn how to set numerical state values and update them using mathematical equations.

Objective

Students will be able to:

  • use mathematical equations to update numerical state values in their programs
Description

In this lesson, students will learn how string methods can be used to update the value of string states.

Objective

Students will be able to:

  • use string methods to update the value of string states
Description

In this lesson, students will add functionality to their app that will update the score of each team based on button presses.

Objective

Students will be able to:

  • apply their knowledge of state values to update the scores for each team in their Scorekeeper app
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of Events and State through a multiple choice quiz
Creating Multiple Screens
Description

In this lesson, students will learn how to create layouts that include navbars.

Objective

Students will be able to:

  • create a layout which includes a component for each screen’s information and a container that acts as a navbar
Description

In this lesson, students will learn how to create apps that have multiple screens.

Objective

Students will be able to:

  • develop apps that use buttons placed in a navbar to navigate between multiple screens
Description

In this lesson, students will separate the contents of their Scorekeeper app onto multiple screens.

Objective

Students will be able to:

  • use their knowledge of navbars to create navigation between multiple screens on their Scorekeeper app
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of creating multiple screens through a multiple choice quiz
Working with Conditionals
Description

In this lesson, students will learn how they can use conditionals in their React Native apps.

Objective

Students will be able to:

  • use conditionals in their programs to tell the computer to complete one action over another
Description

In this lesson, students will learn how parameters can be used inside React Native functions.

Objective

Students will be able to:

  • use parameters inside functions to control conditional blocks
Description

In this lesson, students will add a new screen to their app where the record of each team’s wins, losses, and ties will be recorded. They will use their prior knowledge of creating multiple screens and the new concepts of conditionals to complete this task.

Objective

Students will be able to:

  • use their knowledge of conditionals to create a Standings screen where a record of wins, losses, and ties for each team will be stored
Description

In this lesson, students review content with a 15 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of conditionals through a multiple choice quiz
App Build: Currency Converter
Description

In this lesson, students will spend time researching, exploring, planning, and developing an app that converts between multiple currencies.

Objective

Students will be able to:

  • create an app that converts between multiple currencies
  • think critically about the user experience while using their app