App Inventor Lab 1

LAB
Mobile App Development & Business Process
Chong Oh IS4410
OBJECTIVES
1.Create business process for development of mobile

app.
2.Build mobile app using App Inventor for Android OS.
3.(Extra Credit) Test your mobile app on an Android
device.
Chong Oh IS4410
LAB REQUIREMENTS
A Google account
This PDF lab lecture
Lab files from canvas (containing boo.jpg, kitty.wav
and mike.wav)
[EXTRA CREDIT] An Android device/phone for
testing the app
The will to try and not CRY…
Chong Oh IS4410
STEPS
1. You build one business process and one mobile app.

• You build the BOO mobile app using App Inventor with
instructions in this lab lecture.
2. [EXTRA CREDIT] You test your mobile app using an
Android device.
3. Submit a Word doc containing your business process
and screenshots of your Boo app to canvas. [Extra
Credit] submit a video for testing your app.
Chong Oh IS4410
WHAT IS APP INVENTOR?
An open-source web app originally developed by

Google and now maintained by MIT.
It introduces newcomers to mobile app development
for Android OS.
More info: http://appinventor.mit.edu/explore/
Chong Oh IS4410
LAYOUT OF APP INVENTOR
There are 3 parts:

1.Designer: Where we build
the User Interface
(buttons, images, text
fields, etc.)
2.Blocks: Where we connect
code together.
3.Testing: Either emulator or
Android device.
Chong Oh IS4410
STEP 1: DESIGN BUSINESS PROCESS
In a Word doc, design a business
process for the flow of the ‘BOO’ app.
Refer to the textbook on how to do this.
1. User clicks on ‘BOO’ button in main panel.
Boo image appears.
2. User clicks on the image of ‘Boo’ (which is
a button) and her voice will be heard.
3. One of 2 different sound files will randomly
play in response to the click.
Chong Oh IS4410
STEP 2
Download 3 files -- boo.jpg, kitty.wav, and Mike.wav

from canvas.
Go to ai2.appinventor.mit.edu (Login to Google if
required).
Create a new project by selecting My Projects and
Start new project. Label project name as “Boo”.
Chong Oh IS4410
The Designer View appears
Chong Oh IS4410
STEP 3 (MAIN PANEL WITH ONE BUTTON)
Make sure ‘Screen1’ is selected. (Upper left)

Go to ‘Screen1’ Properties: Select AlignHorizontal
and AlignVertical to Center.
Chong Oh IS4410
Click on Layout (left side) and drag and drop

‘HorizontalArrangement’ to the Viewer.
Chong Oh IS4410
Click on User Interface (left side) and drag and drop

button on top of the HorizontalArrangement.
Go to the Properties and:
• Add ‘Boo’ in the Text field.
Chong Oh IS4410
STEP 5.1 (MAIN PANEL BLOCKS EDITOR)
Make sure you are still in ‘Screen1’

Select “Blocks” (upper right) to open
up the Blocks editor. The Blocks
Editor should appear.
Click on ‘Button1’ (left). Select ‘When
Button1.Click’ and drag it to the
Viewer.
Chong Oh IS4410
STEP 5.2 (MAIN PANEL BLOCKS EDITOR)
Click on ‘Control’ (Built-in). Select ‘Open another

screen screenname’. Drag and drop into Button 1
block.
Click on ‘Text’ (Built-in). Select drag and connect

to ‘open another screen’ block.
Go into ‘Text’ block and type ‘Screen2’. This will open
‘Screen2’ when the ‘Boo’ button is clicked.
Chong Oh IS4410
STEP 6 (BOO BUTTON)
Select ‘Add Screen’ and named it ‘Screen2’

Go to ‘Screen2’ Properties: Select AlignHorizontal
and AlignVertical to Center.
Select a Button (User Interface) and drag and drop it
to the Viewer.
Go to the ‘Button’ Properties and:
• Remove all text in Text. Leave it blank.
• Edit Width to 200 pixels and Height to 300 pixels.
• Edit Image, and Upload a new image. Choose boo.jpg and click ok. A cute
‘Boo’ picture should appear in the Viewer.
Chong Oh IS4410
STEP 7
Select Media (left side) and drag a Sound object to

the viewer.
Go to the Properties of the sound object, click in
Source, and Upload new sound file. Choose
Mike.wav and click ok.
Add another sound object using kitty.wav as the
upload.
Chong Oh IS4410
BOO APP
Chong Oh IS4410
STEP 7.1 – CODING RANDOM PLAYBACK
Select “Blocks” (upper right) to open up the Blocks

editor. The Blocks Editor should appear.
Click on ‘Button1’. Select ‘ When Button1.Click’ and
drag it to the Viewer.
Under the “Control” category of blocks, choose ‘If-
then’ and drag it inside the ‘Button1.Click’ block.
Add an ‘else’ condition using the small blue gear
icon.
Chong Oh IS4410
STEP 7.2 – CODING RANDOM PLAYBACK
Under “Math” blocks, use ‘()’=‘()’ to set a condition

under the ‘If’ portion of your code.
Use Random Integer from x to x, using 1 and 2 as
options (using 50/50 chance for our two sound files)
and set it = 1 with another integer code block.
Chong Oh IS4410
STEP 7.3 – CODING AUDIO PLAYBACK
Select Sound 1 blocks from the left and choose Call

Sound1.play and place that inside the ‘Then’ portion
of your code.
Likewise, insert Sound2 into the ‘else’ portion.
Save your project.
Chong Oh IS4410
STEP 8: TESTING (OPTIONAL: EXTRA CREDIT)
There are two ways to test your code:
• AI2 App on Android devices (recommended, download free from
Google Play on any Android device).
• Emulator on your computer (Not recommended).
For AI2 (Make sure you are in Screen1):
• Click on Connect -> AI Companion. The text code and QR code for
your Android phone should appear.
• Start your AI2 app on your android device. Scan the QR code or put
in the text code. The app should appear on your device.
• Click on the ‘Boo’ Button. The picture of Boo appears.
• Tap Boo a few times and see what she says.
Chong Oh IS4410
Chong Oh IS4410
STEP 8 CONTINUED (NOT RECOMMENDED)
For emulator:
• Start your aiStarter (this takes 2-3 minutes)
• Click on Connect -> Emulator
• When ready, the ‘Boo’ app will be seen.
• Tap Boo a few times and see what happens.
Chong Oh IS4410
CONGRATS!
Congrats! You have built your first mobile app.

If this interests you, go ahead and create other
awesome mobile apps…
Build a portfolio so you can show your ‘non-routine’
skills to potential employers
Chong Oh IS4410
SUBMISSION
Create a business process in a Word doc.
Take screenshots/pictures of ‘Designer’ viewer and ‘Blocks’
viewer
Add screenshots/pictures to the Word doc.
(EXTRA CREDIT) Take a video of your app running on a
phone or emulator.
Upload word doc and video to canvas.
Do not share your files with other students. (This is cheating)
Ask the TA if you need any help
Chong Oh IS4410
END
Chong Oh IS4410

App Inventor Lab 1

Uploaded by

Copyright:

Available Formats

App Inventor Lab 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

App Inventor Lab 1

Uploaded by

Copyright:

Available Formats

LAB

1.Create business process for development of mobile

1. You build one business process and one mobile app.

An open-source web app originally developed by

There are 3 parts:

Download 3 files -- boo.jpg, kitty.wav, and Mike.wav

Make sure ‘Screen1’ is selected. (Upper left)

Click on Layout (left side) and drag and drop

Click on User Interface (left side) and drag and drop

Make sure you are still in ‘Screen1’

Click on ‘Control’ (Built-in). Select ‘Open another

Click on ‘Text’ (Built-in). Select drag and connect

Select ‘Add Screen’ and named it ‘Screen2’

Select Media (left side) and drag a Sound object to

Select “Blocks” (upper right) to open up the Blocks

Under “Math” blocks, use ‘()’=‘()’ to set a condition

Select Sound 1 blocks from the left and choose Call

Congrats! You have built your first mobile app.

You might also like