Lab3

Chong Oh IS4410

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