Starting AppInventor in the Classroom
Dale Jones
@spookingdorf
[email protected]
CAS Conference June 2011
Scope



Starting with AppInventor
Create a (very) simple app
Consider howthis could be developed in the classroom
Why Apps?





Inspiring
Computing, incorporating ICT
Challenge – to analyse needs, create and refine a solution
Creating something that works
Solving problems, Developing thinking
“Solving problems creatively by using ICT to explore ideas and try alternatives”
“Consider systematically the information needed to solve a problem”
“Solve problems…”
“Use ICT to make things happen by planning, testing and modifying…”
What to use?

iPhone SDK


Android SDK



See iOS Dev Center
Eg Eclipse
AppInventor
Windows Phone SDK
Making it real

Authentic context
Technical knowledge (of the dev environment)
Technical know-how (to make the dev environment do
the right things)
Creative flair

Use stimulus cards?



Systems Life Cycle
Feasibility
Analyse It
Design It
Check out the Ideas Cards
for starting points
Develop and Test It
Implement It
Evaluate It
Feasibility/Analysis
Design
Appearance
Design It
Navigation
Screen layout
Corporate identity
Credits
Splash Screens
Buttons
Image map
Interface
Inputs
Sound
Touch
Movement
Position
Sound
Outputs
Vibration
Storage
Assets
Sounds
Text
Images
Movies
Data flow and navigation
Splash
Screen
Instructions
Page 1
Page 2
About
Credits
Design Tools


Storyboards
Screen mock-ups
(some good iPhone templates
at modoku.com)
Make It!
Our brief (though curiously unreliable) market
research suggests that there is an opening for an app
that changes the colour of text and its background
at the press of a button. Please develop an app that
will do this.
Using AppInventor

Get a Google Account



Works on Google Apps for Education too
Start AppInventor at http://appinventor.googlelabs.com
and log in.
3 parts to AppInventor:



Designer – where assets are compiled
Blocks editor, where you tell things what to do
Emulator, a virtual mobile device

(or connect a real one)
Using Appinventor


Start the designer and create a new project.
Assemble assets according to your design plan

Drag and drop AppInventor components




Give them appropriate names (eg btnBlkOnRed)
Upload other assets (images, sounds) and name them
Tell assets what to do in the Blocks Editor
See what it looks like in the Emulator (or on the device)
Using AppInventor – Drumkit

Assemble assets in the designer



Tell assets what to do in the Blocks Editor




Upload pictures, sounds
Insert buttons in a table arrangement
When button is clicked, play the sound
Test in the Emulator
Add other buttons
Use a vertical arrangement to add a splash screen
Using AppInventor – DrawKitteh
Introduces use of the Canvas element to enable on-screen drawing.
See tutorial at
http://appinventor.googlelabs.com/learn/tutorials/paintpot/paintpotpart1.html
Using AppInventor - sharing



Download and publish elsewhere
Use the barcode
Download to phone
Some Tutorial Sources (there are others)


http://appinventor.googlelabs.com/learn/
http://android.jwtyler.com/