Starting AppInventor in the Classroom Dale Jones @spookingdorf djones@excitingICT.co.uk 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…” Ticks boxes in NC Children are aware of apps in the marketplace, might like to see how they are cresated Become creators rather than consumers

What to use? iPhone SDK Android SDK AppInventor Windows Phone 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? 4 things need to come together

Feasibility Analyse It Design It Develop and Test It Implement It Systems Life Cycle Design It Develop and Test It Check out the Ideas Cards for starting points Implement It Evaluate It

Feasibility/Analysis Do we need another app for burps? Is there still a market for a voice-changing tomcat animation? (Apparently so…)

Design It Design Appearance Navigation Interface Inputs Outputs Screen layout Credits Corporate identity Splash Screens Navigation Buttons Image map Interface Inputs Sound Touch Movement Position Outputs Sound Vibration Storage Assets Sounds Images Text Movies

Data flow and navigation Splash Screen Instructions Page 1 Page 2 About Credits Don’t really create new screens. AppInventor won’t do multiple screens – it will allow one app to open another, or you can show/hide arrangements

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) Design editor isn’t quite WYSIWYG – it will be on the phone.

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 Downloading to phone needs phone to be on same Google Account

Some Tutorial Sources (there are others) http://appinventor.googlelabs.com/learn/ http://android.jwtyler.com/