app inventor n.
Skip this Video
Loading SlideShow in 5 Seconds..
App Inventor PowerPoint Presentation
Download Presentation
App Inventor

Loading in 2 Seconds...

play fullscreen
1 / 83

App Inventor - PowerPoint PPT Presentation

  • Uploaded on

App Inventor. CEMC – Summer Workshop 2012 Grant Hutchison Humberside CI, TDSB. Agenda. What is App Inventor? Why App Inventor? CS Educational Perspective How to use App Inventor? Hands on activities ( Lab 1 and 2) More App Inventor Resources and Futures

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'App Inventor' - helmut

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
app inventor

App Inventor

CEMC – Summer Workshop 2012

Grant Hutchison

Humberside CI, TDSB

  • What is App Inventor?
  • Why App Inventor?
  • CS Educational Perspective
  • How to use App Inventor?
    • Hands on activities (Lab 1 and 2)
  • More App Inventor
  • Resources and Futures
  • Student Projects
    • Hands on activities (Labs 3 and beyond)
what is app inventor
What is App Inventor?
  • App Inventor is a visual programming environment to create Android based mobile applications.
  • Originally created by Google Labs.
  • Jan 1, 2012 – MIT Media Lab
    • Center for Mobile Learning established by Hal Abelson
    • Google still active on the project
    • Language is also open sourced
why app inventor
Why App Inventor?
  • Students Love their Smartphones
  • Want to create mobile apps
  • Want to teach novice programmers
  • Want to create fun apps (games) quickly
  • Want to motivate "all" students
  • Want access to rapidly growing mobile application marketplace (Google Play)
cs education perspectives 1 of 3
CS Education perspectives (1 of 3)


  • data types (weak point)
    • numbers and text only (globally scoped)
  • data structures (weak, but good for intro CS)
    • lists only
  • operators / built-in functions
    • simple set of string and list functions and math operators
  • iterators
    • while, for next, for each
  • conditionals
    • if, if else, boolean / relational
  • modularity
      • procedures (within app only / no user defined libs)
cs educator perspectives 2 of 3
CS Educator perspectives (2 of 3)


  • Databases (?)
    • TinyDB(local – key-based access
    • TinyWebDB (cloud – key-based access)
  • Sensors
    • haptic (vibration – need phone)
    • gyroscope / accelerometer (need phone)
    • location (GPS)
  • Phone Libs
    • texting (SMS)
  • Other Libs
    • text to speech – used in my courses
    • Bluetooth / Lego Mindstorms
    • Web services / websites / Other apps / Fusion tables
cs educator perspectives 3 of 3
CS Educator perspectives (3 of 3)


  • Graphics
    • Sprites– Movement / Collision detection
  • User Interfaces
    • Multiple Screens - scoping
    • Input
      • Buttons, textboxes, checkboxes, list picker
      • canvas / sprites – location, motion, collision/edge detection
    • Output
      • labels, colours, sound, vibration (haptic)
why not app inventor
Why NOT App Inventor?
  • Want to teach O-O
  • Want to debug syntax errors
  • Want to create large group projects
  • Want to develop 3D games
where is app inventor used
Where is App Inventor Used?
  • U.S. Colleges/Universities
    • University of San Francisco – Dave Wolber
    • Wellesley College – Lyn Turbak
    • Trinity College (CS Principles) - Ralph Morelli
  • After school programming clubs
    • TechnovationChallenge
  • High Schools
    • Scotland (national curriculum) – Jeremy Scott
    • Various schools including Humberside CI
what do i need to get started
What do I need to get started?
  • GMail enabled account
  • Browser (anything but IE)
  • Install the App Inventor Setup program for your platform (Windows, Mac OSX, Linux)
    • provides Android emulator
  • Recent version of Java (v6+)
  • Internet connectivity
  • optional
    • Android phone/tablet
    • device driver for Android device
follow the steps
Follow the steps

classroom environment
Classroom environment

Most students use the emulator

Development Steps

  • Start browser
  • Start emulator
  • Connect App Inventor (Blocks Editor) to emulator for testing

Emulator takes a few minutes to start. Each code change will be reflected in emulator.

classroom environment files
Classroom environment - Files

Source code is a zip file

  • The file can be transferred between computers and it is hosted on MIT webservers for each user.
  • Only App Inventor "understands" the contents of the zip file.
    • Students should provide zip file for assessment

Install/Binary image is an apk(Android Package File)

  • The apk file is only created when the developer decides to create a release.
    • Students would only create these file to share final application with other Android users.
classroom environment alternate
Classroom environment (alternate)

Students have phones

Development Steps

  • Start browser
  • Connect phone to USB port
    • ensure device drivers are present and phone is in USB debugging mode
  • Connect App Inventor (Blocks Editor) to phone for live testing.

Each code change will be reflected in phone.

take it with you
Take it with you !!

Students have phones.

Three ways to get the app on a phone.

  • Create a QR code
    • download to a phone (using developer email)
  • Download to the computer
    • save a an Android install file (APK) on your development computer
  • Download to Connected Phone
    • install the APK directly on the phone
publish to google play
Publish to Google Play
  • Register as a developer with Google Play
  • Agree to the Google Play Developer Distribution Agreement
  • Pay a registration fee ($25.00)


app inventor development cycle
App Inventor Development Cycle
  • Paper / Pencil
  • Component Designer
  • Blocks Editor
  • Blocks Editor
  • Phone/Emulator
get developing projects
Get Developing - Projects
  • An App Inventor Project is a collection of components and blocks.
  • Open website
  • Log in using your GMAIL account
  • Available Actions
    • Import existing project into new project
    • Create new project
    • Save/Export project
get developing tools
Get Developing - Tools

App Inventor consists of (3) tools working in unison:

  • Component Designer

Define Graphical User Interface (GUI) and Non-GUI components

  • Blocks Editor

Determine the behaviour (algorithms and data structures) of the components

  • Android phone or emulator

Platform for testing/using apps

ai components
AI Components

Event based programming

  • Components are visible or non-visible "objects" with defined properties and behaviours (libraries).
  • Set initial properties within Component Designer
ai component designer
AI Component Designer

Palette - Available component types

Viewer - "rough" visualization of app

Components - actual components in project

Properties - initial properties for component

  • Grouped by type
  • Action
    • select component and drag it to the Viewer
      • Note: Default name given
    • click RENAME button in Component section to give it a MEANINGFUL NAME
    • Change default property values (if desired)
  • Properties
    • Defaults – Comp Designer
    • BackgroundImage
      • may need to be resized
    • Icon
      • Used on devices only (50x50)
    • ScreenOrientation
      • can be fixed or flexible
    • Scrollable
    • Title – ALWAYS change
      • exception is Screen1
    • VersionCode - new
    • VersionName – new
  • Multiple Screens (later)
designing apps
Designing Apps
  • typical phone has 300 x 400 pixel screen
  • GUI components
    • default position is top and left
    • location can be adjusted
      • Screen Arrangements (later)
    • Properties (common)
      • Text
      • Width – Fill Parent
      • Height
best practices naming
Best Practices - Naming
  • Every component has a name
  • If component will be used in your algorithm
  • Naming Conventions
    • btnName – buttons
    • txtName – textbox (later)
    • Note: "Name" is decided by the programmer
  • Represents the logic of your application
  • Programs consist of 3 types of structures
    • Sequential operations
    • Conditional operations (decisions)
    • Repeated operations

Use the Blocks Editor to define the app behaviour.

button component
Button Component
  • Buttons are GUI components
    • Typical Use: Input
      • Take an Action / React to a User Initiated Event
  • Example: Reset Score button
  • Actions would be defined in Blocks Editor using Blocks/Code

Reset Score

  • Event
    • When Click do
    • The action occurs once for each button click.
      • Example: Change screen color
blocks editor1
Blocks Editor
  • Built-In
    • Definition
      • variables, procedures
    • Text
      • String library
    • Lists
      • List library
    • Math
      • Math operators
    • Logic
      • relational operators, conditionals
    • Control
      • screens, loops
    • Colors
      • color library
changing properties
Changing Properties
  • Properties are set initially based on their default value in the Component Designer.
  • Blocks can be used to change the properties of any components in your Project..
  • Blocks Editor
    • Locate the component of interest (Screen1)
    • Locate the SETTER block and provide (snap in) a valid value for the property (Color in this example)
lab 1 colourme
Lab 1 - ColourMe

ObjectiveCreate an interactive app that changes the colour of the screen on the computer.

  • Components
    • Buttons
    • Screen1
  • Algorithms
    • When "red" button is clicked (Event)

change the screen colour to red (Event Handler).

    • Include buttons for "Green", "Blue"
    • Initially
      • The app should have a "white" background when it starts and the "Reset" button will reset the screen
    • Include a "Quit" button to close the application.
lab 1 colourme1
Lab 1 - ColourMe

App Inventor Skills

  • Screens
    • properties
      • BackGroundColor
  • Buttons
    • properties
      • Text
    • Events
      • WhenClicked
  • Purpose
    • To obtain user input (text or numbers).
  • Properties
    • Text
      • value provided by user
    • Hint
      • user prompt for user (before they provide input)
        • useful to avoid extra Labels for user directions
    • FontSize
      • Consider setting to 20 px or more
  • Advice
    • Use Set Text Property Block to reset input between tasks
  • Purpose
    • To display output to users (text or numbers).
  • Properties
    • Text
      • value provided to user
    • FontSize
      • Consider setting to 20 px or more
  • Advice
    • Use meaningful component names to ease code readability.
ui guidelines
UI Guidelines
  • KISS
    • Keep It Simple
      • Best apps are intuitive – no manuals required
  • Use easy to read fonts
  • Position GUI inputs in logical locations
  • Size GUI input or output components
    • large enough
  • Consider best feedback mechanisms
    • Consider Users and Devices
    • Options
      • vibration, speech, sound, display
lab 2 calculator
Lab 2 - Calculator

ObjectiveCreate a simple calculator app that can add, subtract, multiply, and divide operations.

  • Components
    • Button
    • TextBox
    • Screen Arrangement
  • Concepts
    • Math operators
  • Algorithms
    • When math operator button is clicked
      • perform corresponding operation on the 2 numeric input values
      • display result to user

Extension : TextToSpeech

  • Numbers or Text
  • Global
    • available throughout app/screen
  • Use prefix var
  • Good habits
  • store all user input into variables and avoid re-reading values from GUI components
  • create a variable for any output before setting the GUI property
example events event handlers
Example: Events / Event Handlers
  • What is the event?
  • What does the handler do?
  • What are hits and misses?
lab 3 get the message
Lab 3 – Get the Message

ObjectiveCreate a program to determine the age of a person based on their year of birth. The application will also request the user's first name, last name, and it will display and announce their name and age within a complete sentence.

  • Components
    • Button
    • TextBox
    • Screen Arrangement
  • Concepts
    • Text methods
    • Math methods
    • Procedures
  • Algorithms
    • see lab instructions
  • Block in test socket
    • MUST evaluate to true / or false
lab 4 temp convertor
Lab 4 – Temp Convertor

ObjectiveCreate a temperature convertor program for Fahrenheit and Celsius.

  • Components
    • Button
    • TextBox
    • Screen Arrangement
  • Concepts
    • Math operators
    • Conditions
      • If test
        • then-do
      • Ifelse test
        • then-do
        • else-do
  • Algorithms
    • see lab instructions
  • Grid for animation and graphics
  • Uses (x,y) coordinates to locate objects





canvas components
Canvas components
  • coordinates provided to event handler
  • In this case the action is to Draw a Circle on the same canvas
    • can have multiple canvas objects
controlling objects
Controlling Objects
  • A separate canvas and sprite can be used as a game controller.
  • The value of draggedSprite is True when the sprite is being dragged
lab 5 paint the puppy
Lab 5 – Paint the Puppy

ObjectiveCreate an interactive drawing program.

  • Components
    • Canvas
  • Concepts
    • Responding to user input
      • Touched
      • Dragged
  • Algorithms
    • Increment / Decrement of variables

Clocks - non-visible components

Used for 2 REASONS

  • Determine current Time or Date
    • Use Now() method to determine the current timestamp
  • Cause events to occur at regular intervals
    • Enable the Timer property (true or false)and set the Interval property (milliseconds)
  • App Inventor has various methods of generating Random values
  • In the next lab we will move ImageSprites to Random locations within a Canvas.
  • An image sprite is an animated object that can interact with a canvas, balls, and other image sprites.
    • contained by a canvas
    • react to touches and drags
    • interact with other sprites and the edge of the canvas

Sprite Movement

  • Speed property to 10 (pixels)
    • amount of movement per interval
  • Interval property to 5 (milliseconds)
    • frequency of movement
  • Heading property to 180 (degrees)
    • Zero is horizontally to the right (east), 90 is straight up, 180 is to the left, and 270 is straight down.
  • Enabled property to True

You can change these and other properties to modify the image sprite's behavior.

lab 6 mole mash plus
Lab 6 – Mole Mash Plus

ObjectiveCreate an interactive game.

  • Components
    • Canvas
    • ImageSprite
    • Clocks
  • Concepts
    • Responding to user input
      • Touched
    • Randomness
    • Game levels and difficulty
  • Algorithms
    • see lab handout
loops counted for loop
Loops – Counted / For Loop
  • variable value
    • loop counter
  • no break option
loops for loop example
Loops – For Loop Example
  • How many iterations?
  • Value of varTotal
    • Before Loop?
    • After Loop?
lab 7 investments
Lab 7 – Investments

ObjectiveCreate an future investment calculator to determine the value of compound interest investments.

  • Components
    • Screens – Multiple
  • Concepts
    • Loops – For Range (Counted)
  • Algorithms
    • see lab handout (exponential relations)
loops conditional loop
Loops – Conditional Loop
  • Condition is checked at the beginning of every iteration
  • Very flexible
  • No loop variable
  • Heterogeneous
  • Indexed from one (1)
  • Many methods avail
  • Good habits
  • use clearly defined variable names
  • removing all values
    • set the variable with an empty "make a list" block
lab 8 looping with colour
Lab 8 – Looping with Colour

ObjectiveCreate a fun graphical application.

  • Components
    • Canvas
    • Ball
  • Concepts
    • Loops – For Range (Counted)
    • Lists – random colour from a list
  • Algorithms
    • see lab handout (exponential relations)
lab 9 know your elements
Lab 9 – Know your Elements

ObjectiveCreate a science-based quiz game involving knowing the most abundant elements on Earth.

  • Components
    • Notifier
  • Concepts
    • Maintaining parallel lists
  • Algorithms
    • see lab handout
list picker
List Picker
  • User Input Component
    • Predefined selection of possible values
      • Drop down list
lab 10 tip calculator
Lab 10 – Tip Calculator

ObjectiveCreate an application to calculate each person's equal share of the restaurant (or any) bill including a tip for service.

  • Components
    • ListPicker
  • Concepts
    • Improving user input data quality and overall UI
  • Algorithms
    • see lab handout

2 non-visible components for audio:

  • Player
    • play an audio or video file ( many formats available ) or to vibrate the phone
    • the name of the media file is specified in the Source property
    • methods include: start(), stop(), pause()
  • Sound
    • play a short audio file


  • Video files should be in Windows Media Video (.wmv), 3GPP (.3gp), or MPEG-4 (.mp4) format
  • file is set with the Source property
  • methods include:
    • Start()
    • Pause()
    • SeekTo(number of millisecs)
    • GetDuration()


  • Video files should be < 1 MB
    • The overall size of an app is set to a max of 5 MB
lab 11 music maker
Lab 11 – Music Maker

ObjectiveCreate a xylophone application that can be used to record and playback music.

  • Components
    • Sound
    • Clock
  • Concepts
    • Parallel list processing
    • Resetting timers – Controlled event processing
  • Algorithms
    • see lab handout
storage types
Storage Types

An application needs to remember information as it is being used by a user.

There are two storage areas for applications :

  • volatile storage
    • storage that exists only while the application is being used
  • non-volatile storage
    • storage that will exist between uses of the application
database storage
"Database" storage

App Inventor is able to store variables or lists in locally on the phone or on a web server.

Local storage

  • TinyDB component

Cloud Storage

  • TinyWebDB component
lab 12 quiz maker
Lab 12 – Quiz Maker

ObjectiveCreate an application to generate quizzes for students.

  • Components
    • TinyDB
  • Concepts
    • Storage and Retrieval of data
  • Algorithms
    • see lab handout
animation edge detection
Animation - Edge Detection

<ball/sprite>.EdgeReached (number edge)

The edge argument tells which edge was reached.

edge 1



edge -4

edge 2

edge -3

edge 3

edge -2

edge 4


edge -1


  • You can detect when an object meets the edge of a canvas.
    • bounce method is available for edge events
    • edge value can be checked
  • Collisions can be detected by either object.
    • eg. Ball is colliding with a paddle imageSprite
    • Note that the heading is changed to simulate a bounce
lab 13 andypong
Lab 13 – AndyPong

ObjectiveCreate an pong style game with a control pad for the paddle and various difficulty levels.

  • Components
    • Sprites
  • Concepts
    • Collision detection
    • Edge detection
    • Simulating bounces or providing direction to objects
    • Game levels
  • Algorithms
    • see lab handout
live app exploring computer science
Live AppExploring Computer Science

Purpose of the Application

  • To respond to declining enrolment in Computer Science, Technology and Business courses.
  • Create an free app that can be used as an interactive gateway for Computer Studies, Business Studies, and Technology courses in Ontario High Schools.
  • Audience
    • Students, parents, teachers, guidance
live apps exploring computer science
Live AppsExploring Computer Science

The application includes information about available courses along with extra information such as competitions.

The app also includes an interactive game called "MythBusting Computer Science".

Just go to Google Play and search for:

"Explore Computer Science"

  • Sample Code
    • tAIR – the App Inventor Repository:
  • Tools - prepare apps for Google Play
    • AppToMarket– available from
    • Marketizer – available from
  • App Inventor Site – Explore
    • Forums
    • Curriculum Resources
resources gallery
Resources - Gallery

Project Sharing

  • Java Bridge
    • AI components wrapped in a JAR file to enable a transition from AI to full Android SDK development using Eclipse and Java
  • Use in CS Education likely to increase
futures ai summit news
Futures – AI Summit News
  • Embed the Blocks Editor into the browser
  • Remove need for phone drivers – wireless app development
  • Services - notifications like twitter (long running apps)
  • Video Capture and play back
  • New Flung method for Sprites
  • Blocks to text and Text to Blocks
  • Support for team programming
  • I continually update my materials and will make them available at any time.
  • Website
  • Teaching resources
    • Available in a non-linked directory on my website
    • Directory Name: app-inventor-resources
  • Email