Starting AppInventor in the Classroom

Dale Jones @spookingdorf djones@excitingICT.co.ukCAS 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

See iOS Dev Center Android SDK

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

Check out the Ideas Cards for starting points

Feasibility/Analysis

DesignScreen layout

Navigation

Corporate identity

Interface

Storage

Inputs

Outputs

Assets

Appearance

Sound

Vibration

SoundMovement

TouchPosition

ButtonsImage map

Sounds

Text

Images

Movies

Splash ScreensCredits

Data flow and navigation

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

Upload pictures, sounds Insert buttons in a table arrangement

Tell assets what to do in the Blocks Editor 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/paintpot-part1.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/