Presented at the annual conference for Association for Career and Technical Education (ACTE) – Friday, November 18, 2011 (St. Louis )

The goals for today’s session: How to get started with App Inventor

(what’s needed and how to install)

Understand App Inventor workflow

Demonstrate how to layout app interface

Demonstrate how to program with drag and drop block editor

Demonstrate how to test and deploy an app to your phone.

Presentation available at www.tricalico.com/acte/2011

What is Google App Inventor? Google App Inventor is a relatively easy-to-use environment for creating custom personal applications for the Android family of mobile devices. Rather than writing code in a traditional language (Java), App Inventor allows a developer to program an app using blocks that fit together like a flowcharting jigsaw puzzle. It permits access to device sensors such as the GPS-enable location sensor, the accelerometer, and the camera. Features such as the barcode scanner, the text-to-speech synthesizer, and the vibration module can be utilized as well as the phone routines, web browser, and audio playback system. It incorporates many of the structures one would expect in a full-featured programming environment such as conditional structures (if…then…else…end if), repetitions (while loop, for loop), Math functions (random number generation, sin, cos, floor, ceiling, round), and simple arrays (lists). The interface of a project is laid out graphically in much the same way that Java developers create activities in Eclipse, utilizing objects (views) such as buttons, labels, textboxes, and images within horizontal, vertical, and table layouts (viewGroups). Apps may be tested in an emulator on the computer, or directly on developer’s mobile device.

For more information, visit: http://www.appinventorbeta.com/about/ NOTE: In January 2012, App Inventor will transition from Google Labs to the new Mobile Learning lab at the Massachusetts Institute of Technology (MIT).

What is the educational application of App Inventor? App Inventor is a great tool for introducing students to the concepts of software development, programming and the various structures within programming.

Increased student interest in mobile app development vs. traditional programming

Java Programming – develop logic constructs without worrying about syntax (good intro to Android development with Java and Eclipse)

Engages students in a fun and relatively easy-to-use development environment.

Get students hooked into taking a more traditional programming language course

Advantages to the institution and to the student: o Very low-cost (Free!) o Cloud based o Small installation – low maintenance o Emulator availability (no phone necessary to test application)

Go

ogl

e A

pp

Inve

nto

r C

ell

ph

on

e p

rogr

amm

ing

wit

ho

ut

cod

e

Ste

ph

en F

. Hu

ste

dd

e

Sou

th M

ou

nta

in C

om

mu

nit

y C

olle

ge

Ph

oen

ix, A

rizo

na

hu

ste

dd

e@so

uth

mo

un

tain

cc.e

du

P

ho

ne:

60

2.3

05

.56

05

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

2

Developing content for the Android – Four methods:

Method Pros Cons Deployment

Java code

http://developer.android.com

Most use Eclipse IDE; Android SDK: Android Developer Tools plugin

Native code – compiled

Full functionality

All FREE!

Very steep learning curve

Installation is tricky

USB direct

Bundle as APK download/install

Sell thru Marketplace

Emulator testing

Online app/game

Flash: http://www.adobe.com (announced discontinuance on 11-9-2011)

HTML5 / Javascript / etc.

Coding for all web devices and browsers

Free depending on tools

Moderate learning curve

Need server to deploy

Must be online to use

Online

Adobe Flash or Flex /AIR

http://www.adobe.com

Pre CS5.5. needs Android add-on

Flash – very powerful

Great for animation

Flexible GUI

Powerful ActionScript

Lots of resources

Flash - $$$

Moderate to high learning curve

AIR on phone is large

Not for pre 2.1 OS

USB direct

Bundle as APK download/install

Marketplace

Adobe Showcase

Emulator testing

App Inventor

http://www.appinventorbeta.com

Must have Google email acct. Needs Java to be installed; App Inventor Extras

Easy learning curve

No code to write!

Easily access phone features

Cloud based

FREE!

Large file sizes

Slower than native apps

Can’t sell on Android Marketplace

USB direct

Barcode scanning (very cool!)

Bundle as APK

What do I need to create apps with App Inventor? 1. COMPUTER: Windows 7 / Vista / XP; Mac OSX 10.5+; Linux: Ubuntu 8+; Debian 5+ 2. INTERNET ACCESS (App Inventor runs in the cloud) 3. BROWSER: IE 7.0+; Google Chrome 4.0+; Safari 5.0+; Firefox 3.6+ (turn off “no scripting”) 4. GMAIL ACCOUNT (Currently – that will change in 2012 with MIT’s Mobile Learning Lab) 5. JAVA: Install Java 6 (1.6) JDK/JRE (www.java.com) 6. APP INVENTOR EXTRAS (http://www.appinventorbeta.com/learn/setup/setupwindows.html

http://www.appinventorbeta.com/learn/setup/setupmac.html http://www.appinventorbeta.com/learn/setup/setuplinux.html)

7. OPTIONAL: Drivers for other phones (non-common) - Instructions on previous site. 8. OPTIONAL: Android SDK / AVD (http://developer.android.com/sdk) Add APIs as desired. Create and

start additional custom emulators.

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

3

Creating an Android App . . .

Step 1: Define the Problem

Why do we need this app?

What does it need to do?

Step 2: Design the Solution

Brainstorm the design, features, resources needed, input values, output format, etc.

Storyboard the interface

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

4

Step 3: Build the Interface

Log in to www.appinventorbeta.com (through 2011 – then will be housed at MIT Center for Mobile Learning)

Create a New Project

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

5

Interface Design Screen

You can also import graphics and audio

when building the interface.

For this project I imported six .PNG files

I created in Photoshop of the six faces of

the dice.

I also imported an MP3 file of dice

rolling (downloaded from Flashkit.com).

TIP: Rename any component that you

will refer to in the Blocks Editor

(“code”).

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

6

Step 4: “Code it” with the Blocks Editor

Open up the Blocks Editor by clicking the “Open the Blocks Editor” button. The first time you click it will download the Java coded applet. Click “Open”, “Allow” and “Run” when prompted in the various dialogs. (Depending on browser, you may have to click the “Open…” button a second time. It should launch the Block Editor program and you will see the Java icon on the status bar. You can toggle between the Design view in your browser and the Block Editor (and eventually the Emulator window)via the Windows status bar or the Alt+Tab method of cycling through your open applications.

Define variable and lists . . .

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

7

Program the “Roll Dice” button Click event . . .

Step 5: Test / Debug your app Run the” SDK Manager.exe” app to define/launch a custom emulator)

Click the “Connect to Device” button int eh upper right of the Blocks Editor. Patience, it can take a few minutes to load your app into the emulator

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

8

Step 6: Modify or Improve your App as necessary/desired

Modify “code” that does not function correctly

Modify interface or add new views (components/controls), and then code those views.

Deploy the app to your phone NOTE: On the phone 1.) Enable the “Unknown Sources: Allow installation of non-Market applications” option (Settings > Applications );

1. Cabled directly to your phone via USB. NOTE: TO debug directly on a cabled device, you need to: 1.) Turn on “USB Debugging” (Settings > Applications > Development); and 2.) Turn on “Stay Awake” (Settings > Applications > Development) while testing directly. On the Design Screen, click the “Package for Phone” and choose “Download to Connected Phone”. Follow the instructions on the phone for installing from the Notifications list..

2. Create a barcode and scan the barcode with your phone’s barcode reader (camera).

3. Create an APK file and download it to your computer. It can then be emailed to your phone for installation or later copied via a USB cable connection.

Suggested Resources

Tyler, J. (2011). App Inventor for Android: Bulid Your Own pPps - NO Experience Required. West Sussex

(UK): John Wiley & Sons, Ltd. (ISBN: 978-1-119-99133-5)

Wolber, D., Abelson, H., Spertus, E., & Looney, L. (2011). App Inventor: Create Your Own Android Apps.

Sebastopol, CA: O'Reilly Media. (ISBN: 978-1449397487)

http://www.appinventorbeta.com/learn (tutorials, reference materials, FAQ, help, etc.)

http://appInventor.org (David Wolber's site; info on teaching App Inventor at Univ. of San Francisco.)

http://appinventorblog.com (David Wolber's blog)

http://www.youtube.com (search for “App Inventor”; Both Wolber and Tyler have videos there, Check ou thte O’Reilly channe).

http://www.simply-android.com/discussion/531/publishing-an-app-inventor-app-on-the-android-market./p1 (Publishing your app inventor project to he Android Marketplace)

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

9

The

An

dro

id M

ath

Lab

pro

ject

T

he A

ndro

id M

ath

La

b b

y S

teph

en F

. H

uste

dde is lic

en

sed u

nder

a C

reative C

om

mons A

ttribution-N

onC

om

merc

ial-

Sh

are

Alik

e 3

.0 U

np

ort

ed

Lic

en

se

This

pro

ject

pre

sen

ts a

stu

den

t w

ith

un

limit

ed p

ract

ice

exam

ple

of

add

ing

two

do

ub

le-d

igit

nu

mb

ers.

Th

e p

rob

lem

s ar

e al

l ran

do

mly

gen

erat

ed.

Feed

bac

k is

giv

en a

s to

wh

eth

er t

he

stu

den

t’s

answ

er

is c

orr

ect

or

no

t, a

nd

if in

corr

ect,

wh

at t

he

solu

tio

n w

as t

o t

he

pro

ble

m. A

sco

reb

oar

d is

mai

nta

ined

tra

ckin

g th

e to

tal c

orr

ect

answ

ers

, th

e to

tal i

nco

rrec

t an

swe

rs, a

nd

th

e p

erce

nta

ge c

orr

ect.

Google App Inventor: Cell phone programming without code (Hustedde – ACTE 2011)

10

Sim

ple

Am

azo

n B

arco

de

Sca

nn

er p

roje

ct

S

imple

Am

azo

n B

arc

ode S

canner

by S

tephe

n F

. H

uste

dde

is lic

ense

d u

nder

a C

reative

Com

mons A

ttributio

n-N

onC

om

merc

ial-

Sh

are

Alik

e 3

.0 U

nport

ed L

icense

.

This

pro

ject

uti

lizes

th

e b

arco

de

scan

ner

fea

ture

of

an A

nd

roid

ph

on

e to

sca

n t

he

ISB

N b

arco

de

of

a b

oo

k an

d c

hec

k th

e p

rice

s o

f it

on

Am

azo

n. I

t al

so h

as a

chec

kbo

x vi

ew, w

hic

h if

ch

ecke

d w

ill s

earc

h f

or

wh

eth

er a

Kin

dle

ver

sio

n e

xist

s.

This