App Inventor: An Intro To Graphical Programming.

By: Andrew Kamau (@aandruk)

Event: Android Developer Challenge

Venue: iHub (@ihubNairobi)

Google Docs: http://goo.gl/fbmuq

Twitter: #AndroidSSA

Google Moderator:  http://goo.gl/sGkBj 

App Inventor: An Intro To Graphical Programming.

>> What is App Inventor?

>> Why use App Inventor?

>> Structure

>> Set Up

>> Demo (the 5-minute app)

How to build Android apps….

How to build Android apps….

1) You can learn how to code…

How to build Android apps….1) You can learn

how to code…

But that’s long and cumbersome

How to build Android apps….

(2)You can use App Inventor… :-)

(1) You can learn how to code…

Google App Inventor

Why App Inventor?? 1. “Build fully functional apps without a

single line of code”

2. “Use an easy to use GUI to build Android apps”

3. “Build apps QUICK!”

App Inventor…

NO coding::“Build fully functional apps without a single line of code”

-  visual programming language

App Inventor… “Build fully functional apps without a single line of

code”

“Use an easy to use GUI to build Android apps”

- Jigsaw puzzle - style

App Inventor…

“Build fully functional apps without a single line of code”

“Use an easy to use GUI to build Android apps”

“Build apps QUICK!”

– real time development and deployment

Requirements… 1.. Web browser (JS Enabled)

2.. Android phone3.. Internet connection4.. App Inventor Software package *5.. ADB (Android Debug Bridge found in SDK)

Set Up… Phone Computer http://goo.gl/OEUt

Connect via USB Download set up: platform specific

Enable USB debugging  Browse to http://appinventor.googlelabs.com 

Enable ‘Unknown Sources’

Enable ‘Stay Awake’

Keep keypad unlocked

Structure… 1.. Designer Window: pick interface components and set their properties.

Structure… 1.. Designer Window: pick interface components and set

their properties.

2.. Blocks Editor: set behaviour of components and assign behaviour.

Structure… 1.. Designer Window: pick interface components and set

their properties.

2.. Blocks Editor: set behaviour of components and assign behaviour.

3.. Phone / Emulator: Being real time dev, set up your phone or emulator.

Demo: An app in 5 minutes!!

Tap the android::

An app that has an image that changes colour when tapped, or when phone shakes.

Components: Label (200*50), Button (250*250), Image1, Image2, Accelerometer

Media: blue.png, green.png

Non-visible: accelerometer_sensor