[Dept. of Computer Science]

CS4HS at the University of Toronto: App Inventor workshop

Diane Horton

This workshop is part of the CS4HS program at the Department of Computer Science, University of Toronto.

This page contains links to some of the material that we will refer to during the workshop, as well as quick summaries of some instructions you'll read in more detail in their original.

Links

Tutorials / examples

Running App Inventor

  1. Start the Designer: go to the App Inventor website and open a [new] project
  2. Launch the Blocks Editor: In the Designer window, click "Open the blocks editor" (near the top right)
  3. Connect to an Emulator (or a phone): In the Blocks Editor, click "New emulator" (at the top). Once the emulator is ready, click "Connect to Device".

Setting up App Inventor on your computer

The App Inventor website has full details. Here is a summary of the steps involved:

  1. Prepare your computer
    1. make sure you have an acceptable OS and browser
    2. make sure you have (or get) Java 6
    3. make sure that Java is enabled in your browser
  2. Install the AppInventor Setup software

Suggested sequence through the tutorials

This sequence emphasizes apps that use only the emulator and cover the key elements of App Inventor as quickly as possible. Be sure to look at the other Google tutorials when you are ready to exploit the phone's capabilities more fully.

Tutorial Summary New topics covered Requires Comments, further extensions, etc.
HelloPurr Click on picture of a cat to play purring sound UI component: button (and sensing when clicked); Media components: picture, sound Emulator only Opportunity to play around with other basic UI components.
Eg, a button to make the cat appear and disappear; a label with instructions.
PaintPot Simple paint program UI component: drawing canvas (and sensing touch and drag events); Screen arrangement components: horizontal arrangment Emulator only Rather than 2 sizes of line/circle, define fatter and skinner buttons
MoleMash Whack-a-mole style game clock component (and acting when the timer "goes off"); image sprite (and moving it, sensing when touched); procedures; strings; label component (and using it for output); random numbers Emulator only Once you learn about tinyWebDB (in MakeQuiz and TakeQuiz), save the highest score
PicCall Choose a phone number from contacts list and click on photo to call phone number picker component (and acting when the user has picked); phone call component (and making a call) Phone, but emulator alone can simulate making a call
QuizMe Trivia game with hard-coded questions and answers lists, including non-homogenous and parallel lists; screen.initialize; ifs Emulator only Replace the if with modular arithmetic
MakeQuiz and TakeQuiz Trivia game where users can create questions and answers that persist and can be shared tinyWebDB for persistent data; foreach loops Emulator plus internet Make another version that is for "Cosmo"-style quizzes
MapTour User chooses from a fixed set of locations and sees a pre-chosen map listpicker component; activity starter component for launching any Android app Emulator plus internet
StockQuotes User types a stock code to get its current price web component for calling an arbitrary web API Emulator plus internet Major extension: use tinyWebDB to build an app that let's the user build a fantasy portfolio and track its value over time.

App Inventor Bridge (to Java)

Other Unrelated Stuff