Android Apps ontwikkelen met App Inventor - Service @ School

fullfattruckΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

67 εμφανίσεις

29
-
3
-
2012



Project 1e jaar periode 4, 2012

|
Erik Seldenthuis

D
RENTHE
C
OLLEGE
ICT

LYCEUM

A
NDROID
A
PPS ONTWIKKELEN MET
A
PP
I
NVENTOR




Project 1e jaar Periode 4
, 2012

Pagina
1

van
32


Drenthe College
-

ICT Lyceum


INHOUD

Projectgegevens

................................
................................
................................
................................
......

3

What is App Inventor
................................
................................
................................
...............................

4

App Inventor Setup

................................
................................
................................
................................
.

6

Step 1


Set up your computer

................................
................................
................................
...........................

7

System requirements:

................................
................................
................................
................................
.....

7

Test your Java configuration

................................
................................
................................
...........................

7

Install the App Inventor Setup Software

................................
................................
................................
.........

8

Instructions for Windows

................................
................................
................................
................................

8

Installing the App Inventor Setup software package

................................
................................
......................

8

Locating
the Setup software

................................
................................
................................
...........................

8

Phone drivers

................................
................................
................................
................................
..................

9

Step 2


Set up your Android phone

................................
................................
................................
.................

10

Compatible phones

................................
................................
................................
................................
.......

10

Check your settings

................................
................................
................................
................................
.......

10

Details for various phone models

................................
................................
................................
.................

11

Building your first app with an Android phone (Part 1): HelloPurr

................................
.......................

12

Start the Designer and create a new project

................................
................................
................................
....

12

Create a new project

................................
................................
................................
................................
.........

13

Select components to design your app

................................
................................
................................
.............

13

Steps for selecting components and setting properties

................................
................................
...................

14

Open the Blocks Editor and connect your phone

................................
................................
.............................

15

Building your first app (Part 2): Completing HelloPurr

................................
................................
.........

16

In the Designer:

................................
................................
................................
................................
.................

16

In the Blocks Editor:

................................
................................
................................
................................
..........

16

Adding the label

................................
................................
................................
................................
................

16

Adding the meow sound

................................
................................
................................
................................
...

17

Making the sound play

................................
................................
................................
................................
......

18

Steps for making the sound play

................................
................................
................................
.......................

18



Project 1e jaar Periode 4
, 2012

Pagina
2

van
32


Drenthe College
-

ICT Lyceum


Packaging your app

................................
................................
................................
................................
...........

20

Review

................................
................................
................................
................................
...............................

20

Building your first app with the emulator (Part 1): Hello Purr

................................
..............................

21

Start the Designer and create a new project

................................
................................
................................
....

22

Create a new project

................................
................................
................................
................................
.........

22

Selectin
g components to design your app

................................
................................
................................
........

23

Steps for selecting components and setting properties

................................
................................
...................

23

Open the Blocks Editor and connect to the emulator
................................
................................
.......................

25

Building your first app (Part 2): Completing HelloPurr

................................
................................
.........

27

Adding the meow sound

................................
................................
................................
................................
...

28

Making the sound play

................................
................................
................................
................................
......

29

Packaging your app

................................
................................
................................
................................
...........

31

Review

................................
................................
................................
................................
...............................

31

The next steps …

................................
................................
................................
................................
....

32

App “
P
aintPot”

................................
................................
................................
................................
..................

32

APP “MoleMash” or “PicCall”

................................
................................
................................
...........................

32






Project 1e jaar Periode 4
, 2012

Pagina
3

van
32


Drenthe College
-

ICT Lyceum


PROJECTGEGEVENS

Project formulier

Algemene informatie

Titel van opdracht/taak/project/prestatie

App Inventor


apps schrijven voor Android phone

Opleiding

90020 (Applicatie Ontwikkelaar)

Behorende bij kentaak/kerntaken

1 en 2

Werkproces(sen)

1.2, 1.4, 2.2, 2.3

Beoordelaar

Erik Seldenthuis

Functie beoordelaar

Docent

Doorlooptijd

4 weken



3 lesuren per week begeleid



27 lesuren per week onbegeleid

Inleiding en samenvatting opdracht

Met behulp van MIT App Inventor

wordt geleerd hoe
je apps voor de Android phone ontwikkelt. Eerst
wordt een voorbeeld app stap voor stap opgebouwd.
Daarna volgt een opdracht voor één of meer zelf te
bouwen apps.

Context, uitgebreide omschrijving

1.

Ga naar link
http://beta.appinventor.mit.edu/learn/


2.

Lees sectie
What is App Inventor

3.

Lees sectie
Setup

en voer de stappen uit

a.

setup van de computer

b.

setup Android phone of emulator

c.

1
e

app bouwen


Hello Purr

4.

Ga naar
Tutorials

en start met het bouwen
van de eerste echte app
PaintPot

5.

Maak het vervolg op PaintPot in
Part 2

6.

Kies vervolgens één van
de volgende basis
apps om te maken:
MoleMash

of
PicCall

Beschrijving huidige situat
ie

Er is geen specifieke programmeerkennis noodzakelijk
om apps te kunnen ontwikkelen met App Inventor.
Wel is het
een pré als je kennis/inzicht hebt in
logische opbouw van programma’s (scheiding van
Model en View, grafische interface, eventhandling,
objec
ten, herhaling, keuze, opeenvolging, etc.)

Op te leveren producten

Werkende Android apps op phone of in emulator:



De voorbeeld app “Hello Purr”



De app “PaintPot”



Één van de apps “MoleMash” of “PicCall”




Project 1e jaar Periode 4
, 2012

Pagina
4

van
32


Drenthe College
-

ICT Lyceum



WHAT IS APP INVENTOR


App Inventor lets you develop applications for Android phones using a web browser and either a connected
phone or emulator. The App Inventor servers store your work and help you keep track of your projects.






Project 1e jaar Periode 4
, 2012

Pagina
5

van
32


Drenthe College
-

ICT Lyceum


You build apps by working with:



The
App Inv
entor Designer
, where you select the components for your app.



The
App Inventor Blocks Editor
, where you assemble program blocks that specify how the
components should behave. You assemble programs visually, fitting pieces together like pieces of a
puzzl
e.

Your app appears on the phone step
-
by
-
step as you add pieces to it, so you can test your work as you build.
When you're done, you can package your app and produce a stand
-
alone application to install.

If you don't have an Android phone, you can build
your apps using the
Android emulator
, software that runs on
your computer and behaves just like the phone.

The App Inventor development environment is supported for Mac OS X, GNU/Linux, and Windows operating
systems, and several popular Android phone mod
els. Applications created with App Inventor can be installed
on any Android phone. (See
system requirements
.)

Before you can use App Inventor, you need to
set up your computer
and install the
App Inventor Setup
package
on your computer.





Project 1e jaar Periode 4
, 2012

Pagina
6

van
32


Drenthe College
-

ICT Lyceum


APP INVENTOR SETUP

App Inventor runs through a Web browser. If you're using a phone, you work with the phone connected to your
computer by a USB cord. Your app will emerge on the phone bit by bit as you work. If you don't have a phone,
there's a phone emulator included with
the App Inventor setup package that you can use instead. When you're
done building, you can "package" your finished app to produce an "application package" (Android apk file) that
can be shared around and installed on any Android phone, just like any other

Android app.

To get started you need to complete the following steps:



Step 1:
Set up your computer



Step 2:
Do one of the following, depending on whether you will
develop on an Android phone or with
the emulator:



Set up your Android phone
and
build your first app with the phone
, OR



Build your first app with the emulator





Project 1e jaar Periode 4
, 2012

Pagina
7

van
32


Drenthe College
-

ICT Lyceum


STEP 1


S
ET UP YOUR COMPUTER

SYSTEM REQUIREMENTS:


Computer and operatin
g system



Macintosh (with Intel processor): Mac OS X 10.5, 10.6



Windows: Windows XP, Windows Vista, Windows 7



GNU/Linux: Ubuntu 8+, Debian 5+

Browser



Mozilla Firefox 3.6 or higher



Note: If you are using Firefox with the
NoScript
extension, you'll need

to turn the extension
off. See the
note on the troubleshooting page
.



Apple Safari 5.0 or higher



Google Chrome 4.0 or higher



Microsoft Internet Explorer 7 or h
igher


TEST YOUR JAVA CONFI
GURATION

Your computer needs to run Java 6 (also known as Java 1.6). You can download Java from
www.java.com
.

Test your Java configuration by performing both of the following tests:

1.

Visit the
Java test page
. You should see a message that Java is working and that the version is Java 1.6.

2.

Run the AppInventor Java test by clicking on
this link
. This will check that your browser is properly
configured to run Java, and that your computer can launch applications with Java Web Start.

App Inventor will not work on your computer if these tests do not succeed. Don't go on to try to use App
Inventor until you've dealt with the issue.





Project 1e jaar Periode 4
, 2012

Pagina
8

van
32


Drenthe College
-

ICT Lyceum


INSTALL THE APP INVE
NTOR SETUP SOFTWARE

Before you can use App Inventor, you need to install some softw
are on your computer. The software you need
is provided in a package called
App Inventor Setup
. Follow the instructions for your operating system to do the
installation, and then go on to build the demo app (Hello Purr) with the phone or with the emulator
.

INSTRUCTIONS FOR WIN
DOWS

Installing App Inventor Setup for Windows

Installing the App Inventor Setup for Windows has two parts:

1.

Installing the App Inventor Setup software p
ackage. This step is the same for all Android devices, and
the same for Windows XP, Vista, and 7.

2.

Installing the Windows drivers for your Android phone.

INSTALLING THE APP I
NVENTOR SETUP SOFTWA
RE PACKAGE

We recommend that you perform the installation fr
om an account that has administrator privileges. This will
install the software for all users of the machine. If you do not have administrator privileges, the installation
should still work, but App Inventor will be usable only from the account you used wh
en you installed.

1.

Download

the installer.

2.

Locate the file
AppInventor_Setup_Installer_v_1_2.exe (~92 MB)
in your Downloads file or your
Desktop.

The location of the download on your computer depends on how your browser is configured.

3.

Open the file.

4.

Click through the steps of the installer.
Do not change the installation location
but record the
installation directory, because you might need it to

check the driver. The directory will differ
depending on your version of Windows and whether or not you are logged in as an administrator.

LOCATING THE SETUP S
OFTWARE

In most cases, App Inventor should be able to locate the Setup software on its own. But if it asks for the
location of the software, the path to enter is
C:
\
Program Files
\
Appinventor
\
commands
-
for
-
Appinventor
. If
you are using a 64
-
bit machine, you should
type Program Files (x86) rather than Program Files. Also, if you did
not install the software as an administrator, it was installed in your local directory rather than in C:
\
Program
Files. You'll need to search for it to find the correct pathname.





Project 1e jaar Periode 4
, 2012

Pagina
9

van
32


Drenthe College
-

ICT Lyceum


PHONE

DRIVERS

The App Inventor Setup software includes drivers for these common Android phones:



T
-
Mobile G1* / ADP1



T
-
Mobile myTouch 3G* / Google Ion / ADP2



Verizon Droid (not Droid X)



Nexus One



Nexus S

Phones not listed here will require you to
obtain and install a driver manually
.

In some cases the Windows drivers do not always install automatically, in which case you'll need to do a
manual driver installation
.







Project 1e jaar Periode 4
, 2012

Pagina
10

van
32


Drenthe College
-

ICT Lyceum


STEP 2


S
ET UP YOUR ANDROID P
HONE

In this section, we'll make sure your phone is ready for you to use with App Inventor. This involves checking a
few settings and making su
re they're set the right way, then connecting the phone to your computer with a
USB cable. If you have a Windows machine, then you may also need to install a driver for the phone.

COMPATIBLE PHONES

There are hundreds of different Android phone models, an
d new ones are appearing all the time. Even
we
don't know about all of them. Here are a few of the phones that are being used successfully with App Inventor:



Google: Nexus One, Nexus S



Motorola: Droid, Droid X, Droid Incredible



T
-
Mobile: G1



HTC: Incredible, Hero, Desire, ‌

Note, however, that some of these phones will require the installation of drivers to work with Windows
computers.

Whichever model you have, your phone must have an SD card installed, or else it won't work with App
Inven
tor.

Even if your Android phone isn't on this list, it's still likely to work with App Inventor, but we can't say for sure.
Follow the instructions on this page, and if you have any problems, see the
troubleshooting page
, or search the
App Inventor User Forum
under "Getting set up and connecting your phone" for advice from others who may
be using the same phone.

CHECK YOUR SET
TINGS

To get your phone ready to work with App Inventor, follow these steps:

1.

Tap the Home button to go to your phone's Home screen.

2.

Tap the Menu button, then Settings, then Applications.

3.

If your phone has an Unknown sources setting, make sure it is che
cked.



Project 1e jaar Periode 4
, 2012

Pagina
11

van
32


Drenthe College
-

ICT Lyceum



4.

Tap Development.

5.

Make sure both USB Debugging and Stay Awake are checked.


If your phone is on the lock screen, unlock it as you would to get ready to run an app. Now get your USB cable
and connect the phone to the computer. Two status messages appear on the phone in the notifications area at
the top of the screen:



USB Connected

means the phone is connected to the computer.



USB Debugging Connected allows the App Inventor on the computer to control the phone.

DETAILS FOR VARIOUS
PHONE MODELS

If your phone model is listed below, click on the name of the phone for additional set
up information:

+
Nexus One, Nexus S

+
Droid X





Project 1e jaar Periode 4
, 2012

Pagina
12

van
32


Drenthe College
-

ICT Lyceum


BUILDING YOUR FIRST
APP WITH AN ANDROID
PHONE (PART 1): HELL
OPURR

This page will get you started building your first app: A picture of a kitty that meows
when you pet it. You can also
watch a vid
eo
(
http://www.youtube.com/watch?v=nC_x9iOby0g

) of this app being built. When
you're done building Hello Purr, you'll be ready to design and build apps on your own.
Before starting, make sure that

you've
set up your computer
.

As you build HelloPurr, you'll learn how the three key tools of App Inventor work:



The
Designer
, the place w
h
ere you design your app. It runs in your w
eb
browser.



The
Blocks Editor
, the place w
h
ere you set the behavior of the app. It is a
separate application with its own window.



The
phone
, connected to your computer via a USB cord.

To build Hello Purr you'll need a picture of the kitty and also a m
eow sound. Download
these files to your computer:



kitty picture



meow sound

START THE DESIGNER A
ND CREATE A NEW PROJ
ECT

In your web browser, go to the App Inventor website at
http://appinventor.mit.edu
. If this is the first time
you've used App Inventor, you'll see the
Projects
page, with no projects in it yet. It should look like this:






Project 1e jaar Periode 4
, 2012

Pagina
13

van
32


Drenthe College
-

ICT Lyceum


CREATE A NEW PROJECT


1.

Click
New
on the left side, near the top of the page.

2.

Enter the

project name HelloPurr (one word, with no spaces) in the dialog box that appears, click OK.

The browser will open the
Designer
, the place where you select
components
for your app, and should look like
this:


SELECT COMPONENTS TO

DESIGN YOUR APP

App I
nventor components are located on the left hand side of the Designer screen under the title
Palette
.
Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in
a recipe. Some components are very simple, li
ke a
Label
component, which just shows text on the screen, or a
Button
component that you tap to initiate an action. Other components are more elaborate: a drawing
Canvas
that can hold still images or animations, an
accelerometer (motion) sensor
that works

like a Wii controller and
detects when you move or shake the phone, components that make or send text messages, components that
play music and video, components that get information from Web sites, and so on.

To use a component in your app, you need to c
lick and drag it onto the viewer in the middle of the Designer.
When you add a component to the viewer, it will also appear in the components list on the right hand side of
the viewer.

Components have properties that can be adjusted to change the way the
component appears within the app.
To view and change the properties of a component, you must first select the desired component in your list of
components.



Project 1e jaar Periode 4
, 2012

Pagina
14

van
32


Drenthe College
-

ICT Lyceum



STEPS FOR SELECTING
COMPONENTS AND SETTI
NG PROPERTIES

We want HelloPurr to have a
Button
component that has the Image property set to the kitty.png file you
downloaded earlier. To set this:

1.

Drag and drop the
Button
component to
Screen1
. The
Button
component is located in the Basic
section of the
Palette
.

2.

In the list of properties, under Im
age, click on
none...

3.

Click
Add…
.

4.

Select the the kitty.png file you downloaded earlier.

5.

Delete
Text for Button1
listed under the
Text
property using the Backspace key.

Your Designer should look like this:






Project 1e jaar Periode 4
, 2012

Pagina
15

van
32


Drenthe College
-

ICT Lyceum


OPEN THE BLOCKS EDIT
OR AND CONNECT YOUR
P
HONE

The Designer is one of three key tools you'll use in creating your apps. The second is the
Blocks Editor
. The
third is the phone. You'll use the Blocks Editor to assign behaviors to your components, such as what should
happen when the user of your a
pp taps a button.

The Blocks Editor runs in a separate window. When you click
Open the blocks editor
from the Designer
window, the Blocks Editor program file should download and run. This process may take 30 seconds or longer.
If the Blocks Editor never opens, it might be because your browser is not set up to run downloaded Java
applications automatically
. In this case, find the downloaded file named
AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look as shown below,
with "drawers" for the program blocks to the left, and a large empty "canvas" space for placing blocks to
assemble the program, which you'll do below.


Before continuing to build the app, you'll need to connect your phone. Make sure you've already
set up your
phone
. Now connect your phon
e to the computer with a USB cable, and click the
Connect to device...
button
at the top of the Blocks Editor window. You'll see a drowdown list with your phone listed, identified by its
model type (e.g., HT99TP800054). Click on that. You'll see a yellow a
nimated arrow move back and forth,
showing that App Inventor is connecting to the phone. Creating this connection can take another minute or
two. When it's all done, the arrow will stop moving and turn green, and if you look at the phone screen, you'll
see

the kitty there


this is the beginning of your app!





Project 1e jaar Periode 4
, 2012

Pagina
16

van
32


Drenthe College
-

ICT Lyceum


BUILDING YOUR FIRST
APP (PART 2): COMPLE
TING HELLOPURR

Now that you've set up your computer and device, and you've learned how the Designer and the Blocks Editor
work, you are ready to complete the
HelloPurr app. At this point, you should have the Designer open in your
browser, the Blocks Editor open in another window, and your chosen device (phone or emulator) connected to
the Blocks Editor.

Here's a preview of the steps you'll do in this tutorial
to complete the app:

IN THE DESIGNER:



Add a
Label
component that reads "Pet the Kitty".



Upload the meow.mp3 file



Add a
Sound
component that plays the meow.mp3 file.

IN THE BLOCKS EDITOR
:



Create an
event handler
that tells the Sound component to play
when the user taps the button.

ADDING THE LABEL

Under
Palette

1.

Drag and drop the
Label
component to the
Viewer
, placing it below the kitty. It will appear under your
list of components as
Label1

Under
Properties

1.

Change the Text property of Label1 to r
ead "Pet the Kitty". You'll see the text change in the Designer
and on your device.

2.

Change the BackgroundColor of Label1 by clicking on the box

3.

Change the TextColor of Label1

4.

Change the FontSize of Label1 to 30

The Designer should now look like this:



Project 1e jaar Periode 4
, 2012

Pagina
17

van
32


Drenthe College
-

ICT Lyceum



ADDING THE MEOW SOUN
D

Under
Palette

1.

Click on the header marked
Media
to expand the Media section of the palette of components.

2.

Drag out a
Sound
component and place it in the
Viewer
. Wherever you drop it, it will appear in the
area at the bottom of the
Viewer
marked
Non
-
visible components
.

Under
Media

1.

Click
Add...

2.

Upload the meow.mp3 file to this project.

Under
Properties

1.

For the
Sound1
component, set its
Source
to meow.mp3.

T
he Designer should now look like this:



Project 1e jaar Periode 4
, 2012

Pagina
1
8

van
32


Drenthe College
-

ICT Lyceum



MAKING THE SOUND PLA
Y

Using the Blocks Editor we will define how the app is going to behave. We'll tell the components what to do,
and when to do it. You're going to tell the kitty button to play a sound when the
user taps it. If components are
ingredients in a recipe, you can think of blocks as the cooking instructions.

The Blocks Editor has two tabs on the upper left hand corner:
Built
-
in
and
My Blocks
. The buttons under each
tab expand and expose blocks when c
licked. The
Built
-
in
blocks are the standard set of blocks that are available
for every app you build. The blocks under
My Blocks
contain specific blocks that are tied to the set of
components that you have chosen for your app.

To make the sound play, you
'll need to drag and drop the
Button1.Click
block and the
Sound1.Play
block into
the editor. The blocks connect together like puzzle pieces.

STEPS FOR MAKING THE

SOUND PLAY

1.

Navigate to the
Blocks Editor
. It may be covered up by the web browser.

2.

Click t
he
My Blocks
tab at the top left hand side.

3.

Click
Button1
.

4.

Drag and drop the when Button1.Click do block onto the editor.

5.

Click
Sound1
.



Project 1e jaar Periode 4
, 2012

Pagina
19

van
32


Drenthe College
-

ICT Lyceum


6.

Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block.

7.

Click the kitty picture on your device. You should hear the kitty meow.

Your Blocks Editor should look like this:






Project 1e jaar Periode 4
, 2012

Pagina
20

van
32


Drenthe College
-

ICT Lyceum


PACKAGING YOUR APP

Congratulations, your first app is running! If you're using a phone, then the app is running on the phone, but it
runs only while the phone is connected to App Inventor. If you unplug the USB cord, the app will vanish. You
can reconnect the phone to make i
t come back. To get an that app runs without being connected to App
Inventor, you must "package" the app to produce an
application package
(apk file). Pressing
Package for Phone
at the upper right of the designer page will present three options for packagi
ng:

1.

If the phone is connected, you can download and automatically install the app on your phone.

2.

You can download the app to your computer as an apk file, which you can distribute and share as you
like, and manually install on phones using the Android AD
B program.

3.

You can generate a Barcode, which you can use to install the app on your phone with the aid of a
barcode scanner, like the ZXing barcode scanner (freely available in the Android Market). This barcode
works only for your own phone. If you want t
o share the app with others, you'll need to download the
apk file to your computer and share the file.

REVIEW

Here are the key ideas covered so far:



You build apps by selecting components (ingredients) and then telling them what to do and when to
do it.




You use the
Designer
to select components. Some components are visible and some aren't.



You can add media (sounds and images) to apps by uploading them from your computer.



You use the Blocks Editor to assemble blocks that define the components' behavio
r



when ... do ... blocks define
event handlers
, that tell components what to do
when
something
happens.



call ... blocks tell components to do things.





Project 1e jaar Periode 4
, 2012

Pagina
21

van
32


Drenthe College
-

ICT Lyceum


BUILDING YOUR FIRST
APP WITH THE EMULATO
R (PART 1): HELLO PU
RR

Please visit
Building your first app with a phone
rather than proceeding here if you'd
prefer to use a phone.

This page will get you started building your first app: A pictur
e of a kitty that meows
when you pet it. You can also
watch a video
(
http://www.youtube.com/watch?v=nC_x9iOby0g

) of this app being built.

When
you're done building Hello Purr, you'll be ready to design and build apps on your own.
Before starting, make sure that you've
set up your computer
.

As you build Hello Purr you'l
l learn how the three key tools of App Inventor work:



The
Designer
, the place were you design your app. It runs in your web
browser.



The
Blocks Editor
, the place were you set the behavior of the app. It is a
separate application with its own window.



T
he
emulator
, a virtual mobile device that runs on your computer along side
App Inventor.

To build
Hello Purr
you'll need a picture of the kitty and also a meow sound. Download
these files to your computer:



kitty picture



meow sound





Project 1e jaar Periode 4
, 2012

Pagina
22

van
32


Drenthe College
-

ICT Lyceum


START THE DESIGNER A
ND CREATE
A NEW PROJECT

In your web browser, go to the App Inventor Web site at
http://appinventor.mit.edu
. If this is the first time
you've used App Inventor, you'll see the
Projects
page, with no projects in it yet. It
should look like this:


CREATE A NEW PROJECT


1.

Click
New
on the left side, near the top of the page.

2.

Enter the project name HelloPurr (one word, with no spaces) in the dialog box that appears, click OK.

The browser will open the
Designer
, the place whe
re you select
components
for your app, and should look like
this:



Project 1e jaar Periode 4
, 2012

Pagina
23

van
32


Drenthe College
-

ICT Lyceum



SELECTING COMPONENTS

TO DESIGN YOUR APP

App Inventor components are located on the left hand side of the Designer screen under the title
Palette
.
Components are the basic elements you u
se to make apps on the Android phone. They're like the ingredients in
a recipe. Some components are very simple, like a
Label
component, which just shows text on the screen, or a
Button
component that you tap to initiate an action. Other components are mor
e elaborate: a drawing
Canvas
that can hold still images or animations, an
accelerometer (motion) sensor
that works like a Wii controller and
detects when you move or shake the phone, components that make or send text messages, components that
play music a
nd video, components that get information from Web sites, and so on.

App Inventor components are located on the left hand side of the Designer screen under the title
Palette
. To
use a component in your app you need to click and drag it onto the viewer in

the middle of the Designer. When
you add a component to the viewer it will also appear in the components list on the right hand side of the
viewer.

Components have properties that can be adjusted to change the way the component appears within the app.
To

view and change the properties of a component you must first select the desired component in your list of
components.

STEPS FOR SELECTING
COMPONENTS AND SETTI
NG PROPERTIES

HelloPurr will use a
Button
component that has the image property set to the kitt
y.png file you downloaded
earlier. To do this:

1.

Drag and drop the
Button
component to
Screen1
. The
Button
component is located under
Palette
.

2.

Click on
Button1
listed under
Components
.



Project 1e jaar Periode 4
, 2012

Pagina
24

van
32


Drenthe College
-

ICT Lyceum


3.

In the list of properties, under image, click on
none...

4.

Click
add
.

5.

Upload the the kitty.png file.

6.

Delete
Text for Button1
listed under the
Text
property.

Your Designer should look like this:






Project 1e jaar Periode 4
, 2012

Pagina
25

van
32


Drenthe College
-

ICT Lyceum


OPEN THE BLOCKS EDIT
OR AND CONNECT TO TH
E EMULATOR

The Designer is one of three key tools you'll use in creating your apps. The second is the
Blocks Editor
. You'll
use the Blocks Editor to assign behaviors to your components, such as what should happen when the user of
your app taps a button.

The Blocks
Editor runs in a separate window. When you click
Open the blocks editor
from the Designer
window, the Blocks Editor program file should download and run. This process may take 30 seconds or longer.
If the Blocks Editor never opens, it might be because your

browser is not set up to run downloaded Java
applications automatically. In this case, find the downloaded file named
AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look as shown below,
with "drawers" for the program blo
cks to the left, and a large empty "canvas" space for placing blocks to
assemble the program, which you'll do below.


Before continuing to build the app, you'll need to start the emulator. Click the
New emulator
button at top of
the window. You'll get a
notice saying that the emulator is starting, and asking you to be patient: starting the
emulator can take a couple of minutes. The emulator will initially appear with an empty black screen. Wait until
the emulator is ready, with a colored screen background

as shown below. Even after the background appears,
you should wait until the emulated phone has finished preparing its SD card: there will be a notice at the top of
the phone screen while the card is being prepared. You might also need to use your mouse o
n the emulated
phone screen to unlock the device by dragging the green lock button to the right.



Project 1e jaar Periode 4
, 2012

Pagina
26

van
32


Drenthe College
-

ICT Lyceum



When the emulator is finally ready, click the
Connect to device...
button, select the emulator from the
dropdown list and click it. You'll see a yellow anim
ated arrow move back and forth, showing that App Inventor
is connecting to the emulated phone. Creating this connection can take another minute or two. When it's all
done, the arrow will stop moving and turn green, and if you look at the emulated phone scr
een, you'll see the
kitty there — this is the beginning of your app!





Project 1e jaar Periode 4
, 2012

Pagina
27

van
32


Drenthe College
-

ICT Lyceum


BUILDING YOUR FIRST
APP (PART 2): COMPLE
TING HELLOPURR

Now that you've set up your computer and device, and you've learned how the Designer and the Blocks Editor
work, you are ready to complete the HelloPurr app. At this point, you should have the Designer open in your
browser, the Blocks Editor open in anothe
r window, and your chosen device (phone or emulator) connected to
the Blocks Editor.

Here's a preview of the steps you'll do in this tutorial to complete the app:

In the Designer:



Add a
Label
component that reads "Pet the Kitty".



Upload the meow.mp3 fi
le



Add a
Sound
component that plays the meow.mp3 file.

In the Blocks Editor:



Create an
event handler
that tells the Sound component to play when the user taps the button.

Adding the label

Under
Palette

1.

Drag and drop the
Label
component to the
Viewer
, placing it below the kitty. It will appear under your
list of components as
Label1

Under
Properties

1.

Change the Text property of Label1 to read "Pet the Kitty". You'll see the text change in the Designer
and on your device.

2.

Change the BackgroundColor

of Label1 by clicking on the box

3.

Change the TextColor of Label1

4.

Change the FontSize of Label1 to 30

The Designer should now look like this:



Project 1e jaar Periode 4
, 2012

Pagina
28

van
32


Drenthe College
-

ICT Lyceum



ADDING THE MEOW SOUN
D

Under
Palette

1.

Click on the header marked
Media
to expand the Media section of the pal
ette of components.

2.

Drag out a
Sound
component and place it in the
Viewer
. Wherever you drop it, it will appear in the
area at the bottom of the
Viewer
marked
Non
-
visible components
.

Under
Media

1.

Click
Add...

2.

Upload the meow.mp3 file to this project.

Under
Properties

1.

For the
Sound1
component, set its
Source
to meow.mp3.

The Designer should now look like this:



Project 1e jaar Periode 4
, 2012

Pagina
29

van
32


Drenthe College
-

ICT Lyceum



MAKING THE SOUND PLA
Y

Using the Blocks Editor we will define how the app is going to behave. We'll tell the components what to do,
and whe
n to do it. You're going to tell the kitty button to play a sound when the user taps it. If components are
ingredients in a recipe, you can think of blocks as the cooking instructions.

The Blocks Editor has two tabs on the upper left hand corner:
Built
-
in

and
My Blocks
. The buttons under each
tab expand and expose blocks when clicked. The
Built
-
in
blocks are the standard set of blocks that are available
for every app you build. The blocks under
My Blocks
contain specific blocks that are tied to the set of

components that you have chosen for your app.

To make the sound play, you'll need to drag and drop the
Button1.Click
block and the
Sound1.Play
block into
the editor. The blocks connect together like puzzle pieces.

Steps for making the sound play

1.

Naviga
te to the
Blocks Editor
. It may be covered up by the web browser.

2.

Click the
My Blocks
tab at the top left hand side.

3.

Click
Button1
.

4.

Drag and drop the when Button1.Click do block onto the editor.

5.

Click
Sound1
.

6.

Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block.



Project 1e jaar Periode 4
, 2012

Pagina
30

van
32


Drenthe College
-

ICT Lyceum


7.

Click the kitty picture on your device. You should hear the kitty meow.

Your Blocks Editor should look like this:






Project 1e jaar Periode 4
, 2012

Pagina
31

van
32


Drenthe College
-

ICT Lyceum


PACKAGING YOUR APP

Congratulations,
your first app is running! If you're using a phone, then the app is running on the phone, but it
runs only while the phone is connected to App Inventor. If you unplug the USB cord, the app will vanish. You
can reconnect the phone to make it come back. To g
et an that app runs without being connected to App
Inventor, you must "package" the app to produce an
application package
(apk file). Pressing
Package for Phone
at the upper right of the designer page will present three options for packaging:

1.

If the phone

is connected, you can download and automatically install the app on your phone.

2.

You can download the app to your computer as an apk file, which you can distribute and share as you
like, and manually install on phones using the Android ADB program.

3.

You c
an generate a Barcode, which you can use to install the app on your phone with the aid of a
barcode scanner, like the ZXing barcode scanner (freely available in the Android Market). This barcode
works only for your own phone. If you want to share the app w
ith others, you'll need to download the
apk file to your computer and share the file.

REVIEW

Here are the key ideas covered so far:



You build apps by selecting components (ingredients) and then telling them what to do and when to
do it.



You use the
Des
igner
to select components. Some components are visible and some aren't.



You can add media (sounds and images) to apps by uploading them from your computer.



You use the Blocks Editor to assemble blocks that define the components' behavior



when ... do ..
. blocks define
event handlers
, that tell components what to do
when
something
happens.



call ... blocks tell components to do things.





Project 1e jaar Periode 4
, 2012

Pagina
32

van
32


Drenthe College
-

ICT Lyceum


THE NEXT STEPS …

Now you are ready to build your first real Android app!


APP “
PAINTPOT”

Go to
http://beta.appinventor.mit.edu/learn/tutorials/paintpot/paintpot
-
part1.html

for further instructions.


APP “MOLEMASH” OR “P
ICCALL”

After you have successfully buil
t the “PaintPot” app, you will proceed by choosing one of the following apps:



MoleMash (
http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html

)



PicCall

(
http://beta.appinventor.mit.edu/learn/tutorials/piccall/piccall.html

)