Course-in-a-Box


Teaching a course on App Inventor? This  site provides a framework for doing so, based on the materials I've created and collected teaching App Inventor at the University of San Francisco. I've taught introductory CS for non-majors (CS0), but the materials could be adapted for a CS1 course for majors as well. You can pick and choose from the seven available modules, or just give a two or three week intro to App Inventor with the introductory module.

The course-in-a-box includes:
  • Course framework
  • Lesson plans and lecture notes
  • Tutorials
  • Assigned readings (where to place chapters from the App Inventor book)
  • Conceptual worksheets
  • Screencast demos
  • Creative projects
  • Tests

Each teaching module assigns readings from the O'Reilly textbook App Inventor: Create your own Android Apps,
of which I am a co-author. The book provides updated and refined versions of the tutorials available on the App Inventor site, additional tutorials not on that site, and an "inventor's manual" section that is conceptual in nature as opposed to being in tutorial form. Each teaching module assigns both tutorials and conceptual chapters from the book so as to enrich the more mechanical, practical app building with a deeper understanding of the computer science and programming concepts. You can use these modules without the text, but you'll find that the text will provide a great resource for your students.

Modules


There are some dependencies between modules. For instance, the introduction should be provided before the other modules and its a good idea to give your students some experience with module 2 (Games) and/or 3 (Apps using technology) before moving onto modules 4 and 5 which require abstract thinking and programming. Module 6 on procedures could be given earlier, but I prefer to give it once students have written a number of event-handling apps without thinking of sub-procedures. Module 7 includes fairly complex parsing of web results so should definitely be presented after the other modules.

Module 1: Introduction to Event-Driven Apps
The introduction acclimates students with the App Inventor environment, leads them to building their first apps, and provide an introduction to event-handlers, calling functions, variables, and drawing canvases. The students learn that an app is something that responds to events such as the user clicking a button or an SMS text being received, and they're introduced to the architecture of an app including components, properties, behaviors, function  calls, and parameters.

The students first create a course portfolio using Google Sites-- this is where they'll post all their work during the semester. They then build the canonical App Inventor app where a kitty that meows, along with a drawing program that lets you take a picture and draw on it. After building the tutorials, the students break into groups and discuss a set of post-tutorial questions. I walk around and eavesdrop, then after each question or two lead a class-wide discussion/lecture to answer the questions.

The students are also assign some reading about App Inventor so they can put the work they're doing in context-- App Inventor is truly revolutionary in how it democratizes programming, and its good for students to understand this. I also like to expose students to some cool mobile apps just to get them thinking-- augmented reality apps like wikitude and Google Goggles.

Like with all modules, a creative project is assigned. For this introductory module, its a soundboard-like app of the student's choice-- any app with multiple images and sounds that play when the images are clicked. This project is fun and fairly easy, and allows for a lot of creativity. The students also get working experience with finding images and sounds on the web, which can lead to great discussions about copyright and sites like Creative Commons.

Topics  Lessons Reading, Tutorials, Assignments
Components and properties
Events and event handlers
Calling built-in functions
Parameters
Variables
Drawing Canvases
Drag and Touch Events

Web: Working with images and sound
Introduction
Create your Portfolio

PaintPot and Initial Discussion of Programming Concepts

Optional: Mobility and Augmented Reality


Tutorials
Chapter 1. Hello Purr pdf chapter and video
Chapter 2. PaintPot
pdf chapter and video
Deploying an app on the web with barcode

Conceptual Reading:
Preface
Chapter 14. App Architecture
Chapter 16. Programming your Apps Memory (Variables)

Assignments
What is App Inventor?
  solution

Creative Project: Soundboards

Additional Tutorials
Getting Started (Jason Tyler)
Getting Started (Ben Martin)

Module 2: Games
The second module introduces students to animation, timer events, image sprites, incrementing a number (score), game-like events (e.g., CollidedWith) and conditional (if) blocks. The students first create MoleMash, a game in which a mole jumps randomly around the screen and the player gets points for touching it. After building the game using the tutorial, the students break into groups and discuss some questions concerning the game. I then assign some customizations or allow them to think of their own. The customizations are fun and range from simple ones like changing the mole to a picture of your brother or adding a background, to complex ones like making the mole go faster when the score reaches a certain point.

After MoleMash, we move to the development of more complex games. Ladybug Chase introduces multiple imageSprites and Orientation Sensor. The Shooter game introduces collision and edge events as well as abstract formulas, e.g., moving the bullet to the top of the shooter wherever that shooter might be.

Topics Lessons  Reading, Tutorials, Assignments
Timer Events
Canvases and Image Sprites
Moving Objects over time
Incrementing a number
Conditionals
MoleMash
MoleMash Worksheet
Introduction to Animated Games


Tutorials
Chapter 3. MoleMash pdf  and video
New Video: Coordinate System
New Video: Diagonal Movement  pt2
New Video:ShooterGame video
Chapter 5:  Ladybug Chase pdf

Graphics and Arrangements (androidandme)

Conceptual Reading:
Chapter 23: Sensors

Project
Creative Project: Space Invaders



Module 3: Texting, Location and Other Mobile Technology
In Module 3, students learn how to program some of the phone's advanced technology: responding to SMS texts, making use of location sensors, scanning barcodes, text-to-speech, and dealing with URLs. They also are introduced to persistence, e.g., storing a user's custom response to be sent to incoming texts. In terms of computer science concepts, this module doesn't add too much, but it is highly motivating and gives them more experience with building event-handling apps.

Topics      Lessons  Reading, Tutorials, Assignments
Sending/Receiving Texts
Location Sensor and GPS
Maps
Working with URLs
Text-to-speech
Speech-to-text
Barcode Scanner
Introduction to persistence
Love You App
No Texting and customizations

Where's My Car, post-tutorial worksheet

Location-aware apps and maps
Tutorials:
Chapter 4:No Text While Driving
pdf/video
Chapter 6:Map Tour pdf/video
Chapter 7:Where's My Car? pdf/video

Conceptual Reading:
Chapter 23: Sensors

Project:
Creative Project 3: Communication and Location

Module 4: Quizzes and Other Informational Apps
This module introduces students to list data and using an index to traverse a list. The quiz app is a fun one that can be customized by every students for practical use (study guides, fun quizzes about their favorite movies, etc). It is also more abstract than the previous apps-- dealing with a list variable and and index is conceptually challenging but obviously very important in learning how to program.
Topics      Lessons Reading and Video 
Lists of data
Iterating a list with an index
Lists of lists

Pre-quiz worksheet
 Iterating through a list

Quiz tutorial and customizations

Post-Quiz Tutorial

Tutorials:
Presidents Quiz (ch 8) pdf/video

Conceptual Reading:

Programming Lists (ch 19, up to 273)

Video:
O'Reilly Video

Module 5: Input Forms, User-Generated Data and Persistence

This module introduces students to dynamic user-generated data. Such apps present a significant challenge to the beginning programmer because of their abstract nature. The module can begin using one (or both) of two relatively simple apps with user-generated data-- a single user notetaker, or a xylophone apps that records musical notes and replays them.

Next, students can explore a Broadcast Hub app that allows people to join a group (on the hub phone), then allows them to broadcast messages to the entire group. This app is of great interest to students and is often chosen as a basis for final projects. Students can also explore a dynamic quiz in which a teacher can add fresh quizzes.
Topics Lessons Reading and Video
Input forms
Screen Arrangements
Dynamic Lists
Iteration: Displaying Lists
Persistence
user-generated data and NoteTaking

NoteTaking
foreach iteration and displaying a list

Persistence worksheet
  followup
Tutorials:
Xylophone (ch 9)  pdf
NoteTaker video
Broadcast Hub (ch 11) pdf
Make Quiz (ch 10) pdf

Conceptual Reading:

Programming Lists (ch 19, 273-)
Iteration (ch 20)
Databases (ch 22)

Project:

Module 6: Software Engineering and Procedural Abstraction
This module discusses procedures and modular programming. It can fit in as early as module 2, depending on when you want to discuss procedures. This module also contains the chapter on engineering and debugging, which explains tracing programs and using some of the tools in the App Inventor environment like comments and watching variables.

The MoleMash app in module 2 introduces procedures. I only briefly discuss procedures there, and wait until later in the semester to discuss fully. My reasoning is that procedures and parameters add a layer of complexity which beginners are not developmentally ready for in the first few weeks of class.. They can build small apps without them, and the event-handling blocks (when-do) provide modularity already (code is split between event-handling "procedures").
Topics  Lessons Reading and Video
Procedures
Parameterizing procedures
Debugging 
Procedures
Procedures and code reuse
Deploying an app 
Conceptual Reading:
Procedures (ch 21)
Engineering and Debugging (ch 15)

Tutorials:
NoteTaker (parts 6 and 8)


Module 7: Apps that access web data
This module introduces APIs and accessing data from the web. The students have already dealt with URLs in Module 3 when they access Google Maps. Here we go over apps that call an API then process the data that is returned.

The first app is a Stock Market app that gets data from Yahoo Finance. It works as a first foray into APIs because the data returned is a simple list of comma-separated data. It uses the Web component in App Inventor.

The Amazon app uses the TinyWebDB component. TinyWebDB is really for web databases, but a programmer (or teacher) can build a tinywebdb web service that serves as an API. I built one for the Amazon Books API. Students can use it to access book data that is returned in list form. Advanced students can go further and access more complex APIs. Here, you'll need to teach them XML or JSON parsing. I don't have examples of those.

Topics Lessons  Reading and Video
URLs and URL parameters
Web component
TinyWebDB component
Parsing CSV
Parsing XML 
Displaying charts with Google Chart API

 
Tutorials:
Stock Market video
Amazon (ch 13) pdf

Sites:
appinventorapi.com

Video:
O'Reilly Video


Creative Commons License
App Inventor "Course in a Box" by David Wolber is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Comments