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
 STEP 4 (MAIN PANEL WITH ONE BUTTON)

Click on Layout (left side) and drag and drop

‘HorizontalArrangement’ to the Viewer.

Chong Oh IS4410
 STEP 5 (MAIN PANEL WITH ONE BUTTON)

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