Mobile Programming (MIT App Inventor 2) Contents Programming.pdf · App Inventor consists of the Designer and the Blocks Editor. (i) App Inventor Designer Design the App's User Interface

Computer Literacy Mobile Programming (MIT App Inventor 2)

__________________________________________________________________________________________

Page 1 of 28

Mobile Programming (MIT App Inventor 2) http://www.plk83.edu.hk/cy/ai2

Contents

1. Understanding the working environment (Page 1)

2. First Android Program (HelloPurr) (Page 4)

3. Completing HelloPurr (Page 8)

4. PaintPot (Page 10)

5. Basic Android Programming (Page 14)

6. MoleMash (Page 19)

7. Further Skills (Page 21)

(Screen properties, Changing Screen Display, Multiple Screens, Camera, List and Database,

Image Picker, Player, Text To Speech, Speech Recognizer)

Understanding the working environment

1. Create an email account in Google. (http://mail.google.com)

-OR-

Using the provided Gmail account as below.

User name: <your registration number>@student.plk83.edu.hk

(e.g. [email protected])

Password: <your HKID card number>

(e.g. A1234567)

2. Open the MIT App Inventor (http://ai2.appinventor.mit.edu/) with the Google Chrome browser

and log in with your Gmail account.

3. Click the "Guide" hyperlink.

http://mail.google.com/

http://ai2.appinventor.mit.edu/


__________________________________________________________________________________________

Page 2 of 28

4. Click "Resources" “Get Started” and read the Setup Instructures.

There are three options to test your build apps.

In option one; an app should be installed in the mobile device, what is the name of the app?

_______________________________

In the lessons, students should use option two and install the App Inventor Setup Software.


__________________________________________________________________________________________

Page 3 of 28

App Inventor consists of the Designer and the Blocks Editor.

(i) App Inventor Designer

Design the App's User Interface by arranging both on and off-screen components.

(ii) App Inventor Blocks Editor

Program the app's behavior by putting blocks together.


__________________________________________________________________________________________

Page 4 of 28

First Android Program

1. Download the kitty picture (kitty.png) from the following web site

http://www.plk83.edu.hk/cy/ai2/

2. Click New Project button on the left side. Enter the project name as HelloPurr.

3. Drag and drop the Button component to Screen1. The name of the component will be Button1.

4. Click on Button1 and add the kitty picture as the image property.

5. Delete Text for Button1 listed under the Text property.



__________________________________________________________________________________________

Page 5 of 28

1. Run the aiStarter program.

2. Click Connect and then Emulator. Wait for a few minutes.

3. Now you can run the program in the emulator.


__________________________________________________________________________________________

Page 6 of 28

Alternatively, you can test the apps with an Android device with the following steps.

1. Install the app "MIT AI2 Companion" in the Android device.

2. Click Reset Connection if you have opened the emulator.

3. Click Connect and then AI Companion.

4. Use the "MIT AI2 Companion" to scan the QR Code.


__________________________________________________________________________________________

Page 7 of 28

To run the program in the android device, you can download the package (an apk file) and install it in

an Android device.

1. Click Build and then App.

2. Use the "MIT AI2 Companion" to scan the QR Code.

3. Complete the installation process in the Android device.

You can use the HelloPurr app in the Android device with two methods (use the Connect and Build

menus). What is the difference between them?

Project Management

1. Click My Projects at the right hand side.

2. Select the HelloPurr project.

3. Click Project and then you can export or import the project file.

Note: You can find the above project (HelloPurr.aia) in http://www.plk83.edu.hk/cy/ai2/ .



__________________________________________________________________________________________

Page 8 of 28

Completing HelloPurr

1. Select the HelloPurr project.

2. Click Project and then Save project as ….

3. Name the new project as Complete_HelloPurr.

4. Open the Complete_HelloPurr project.

5. Add a Label component. Its name is Label1.

6. Enter Pet the Kitty in the Text property of Label1.

7. Change the BackgroundColor, TextColor and FontSize properties of Label1.

8. Expand the Media section and drag and drop the Sound component to Screen1. Its name will be

Sound1.

9. Download the mp3 file (meow.mp3) from http://www.plk83.edu.hk/cy/ai2/ and set meow.mp3

as the Source property of Sound1.



__________________________________________________________________________________________

Page 9 of 28

10. Open the Blocks Editor.

11. Click Button1 and drag and drop the when Button1.Click do block onto the editor.

12. Click Sound1 and drag the call Sound1.Play block onto the editor as shown below.

13. Run the program with the emulator. You can click the kitty picture and hear the kitty meow.


__________________________________________________________________________________________

Page 10 of 28

PaintPot

1. Open the MIT App Inventor (http://ai2.appinventor.mit.edu/) and log in with your Google email

account.

2. Complete the PaintPot program.

The demonstration videos can be found in http://www.plk83.edu.hk/cy/ai2/

Part 1:

Component Name Property Value

HorizontalArrangement ThreeButtons Width Fill parent

Button ButtonRed BackgroundColor Red

Text Red

Button ButtonGreen BackgroundColor Green

Text Green

Button ButtonBlue BackgroundColor Blue

Text Blue

Canvas DrawingCanvas BackgroundImage Kitty.png

Width Fill parent

Height 300 pixels

Button ButtonWipe Text Wipe




__________________________________________________________________________________________

Page 11 of 28

You can use the copy and paste method to make similar blocks.

Note

Show your work to your teacher.

Study the Block Editor

carefully; can you identify the

following elements?

1. Event

2. Command

3. Argument


__________________________________________________________________________________________

Page 12 of 28

Part 2:

Add three new components.


HorizontalArrangement HorizontalArrangement1

Button ButtonBig Text Big Dots

Button ButtonSmall Text Small Dots

Modify the following event.

Change this

argument


__________________________________________________________________________________________

Page 13 of 28

First, define a new variable called dotsize.

Use the value of dotsize to draw the circle.

Define two new events to modify the value of dotsize.

More to do

Using the following command and add two new buttons such that we can draw thick lines and thin

lines.

Show your work to your teacher.


__________________________________________________________________________________________

Page 14 of 28

Basic Android Programming

App Inventor Designer

Some standard user interface components.

Component Event Description

Click() User tapped and released the button.

LongClick() User held the button down.

Changed() Detect user taps and can change their Boolean state in response.

Component Properties Description

Picture The file name of the picture.

Visible Specifies whether the component should be visible on the screen.

Text Text to display on label.

FontSize Point size for label text.

TextColor Color for label text.

Visible Specifies whether the component should be visible on the screen.

Text The text in the input box.

Enabled Whether the user can enter text into this input box.

TextAlignment Whether the text should be left justified, centered, or right

justified.

App Inventor Block Editor

Some Build in Blocks

Math Addition, subtraction, multiplication and division operators.

Find the power.

Relational operators. The result is either True or False.


__________________________________________________________________________________________

Page 15 of 28

Logic Two logic values.

Logical operators.

Control Selection.

Looping.

Variables Initialize new variable.

Set and get the value of a variable.

Procedure Define and call a procedure.

Define and call a procedure that will return a result.


__________________________________________________________________________________________

Page 16 of 28

Example

The following app can display the total price when buying some apples.

The unit price of apple is $5. Discount will be given when buying more apples (details in the following

table).

Number of apples purchased Discount percentage

1-9 0%

10-19 10%

20 or above 20%

At the beginning, the Text property of the Label 'Results' should be blank.

Then, enter the number of apples in the TextBox 'Apples' and click Button1.


__________________________________________________________________________________________

Page 17 of 28

The app can only allow the input of numbers. How can this be achieved?

__________________________________________________________________

You can download the above source program from http://www.plk83.edu.hk/cy/ai2/

More to do

1. Add the dollar sign ($) in the results.

2. Prevent the input of negative numbers.

3. The unit price of apple may be changed from time to time. Suggest one modification such that the

app can be used for changing unit price.

Note

Show your app to your teacher.



__________________________________________________________________________________________

Page 18 of 28

App Design 1

In general, if we deposit principal $P for n periods with the interest compounded r% per period,

then the amount $A can be calculated by the following formula.

A = P x (1 + r%)n

And, the compound interest $I is given by the following formula.

I = A – P

Design an app to accept the inputs of principal ($P), interest rate (r%) and number of periods

(n), and output the amount ($A) and compound interest ($I).

App Design 2

Study the following salaries tax table.

Salaries tax based on the net chargeable income (2008/09)

Net chargeable income Tax rate Salaries tax ($)

On the first $40 000 2% 800

On the next $40 000 7% 2800

On the next $40 000 12% 4800

Remainder 17% --

Design an app to input the net chargeable income and output the salaries tax payable.

Note

Show your apps to your teacher.


__________________________________________________________________________________________

Page 19 of 28

MoleMash

1. Download the mole picture (mole.png) from the web site


2. Open the MIT App Inventor (http://ai2.appinventor.mit.edu/) and log in with your Google email

account.

3. Complete the MoleMash program.

The demonstration videos can be found in http://www.plk83.edu.hk/cy/ai2/


Screen Screen1 Title MoleMash

Canvas MyCanvas Width 300 pixels

Height 300 pixels

ImageSprite Mole Picture Mole.png

Label ScoreLabel Text Score: 0

Button ResetButton Text Reset

Sound Notify

Clock MoleTimer TimerInterval 1000





__________________________________________________________________________________________

Page 20 of 28

Open the Block Editor.

1. The variable score is defined to store the score of the game.

2. Two procedures MoveMole and UpdateScore are defined such that they can be called again and

again. In the MoveMole procedure, the random fraction will generate a random number from 0

to 1 such that the Mole can get the new x and y coordinates.

3. When the MoleTimer is triggered (every 500ms), the MoveMole procedure is called.

4. When touching the Mole, one mark will be added to the score and other consequences will be

triggered.

5. Finally, the reset button can reset the score to 0.


__________________________________________________________________________________________

Page 21 of 28

More to do

1. Add a sound effect when the Mole is touched.

2. Add one more moving Mole (with different moving speed) in the game.

(Hint: Add one more ImageSprite and one more Clock component.)

3. When touching the two different Moles, different scores can be obtained.

4. If the Mole cannot be touched, one mark should be deducted.

(Hint: Use the following event

and the following logical test

to check whether it is failed to touch any ImageSprite on the Canvas.)

Further Skills

(A) Screen Properties

Study the meanings of various properties.

Deduct the score here.


__________________________________________________________________________________________

Page 22 of 28

(B) Changing Screen Display

Use the TableArrangement component to store some components such that we can

show or hide these components by changing the Visible attribute of

TableArrangement to true or false accordingly.

You can download the above source program from


(C) Multiple Screens

App Inventor supports multiple screens.

Use the Add Screen button to create a new screen.

Then use the open another screen command to open a new screen.

However, the open another screen command cannot be used in the emulator. You have to test this app

in an Android device.



__________________________________________________________________________________________

Page 23 of 28

Something to do

Create an app with the following requirements.

1. Landscape screen orientation.

2. Screen title is "Animals".

3. Yellow colour background.

4. Two buttons to show a dog and a cat

respectively.

(D) Camera

Invisible component Camera is used to activate the camera function.

Click Button1 to take a photo. After taking the photo, the photo is displayed as the background image

of Canvas1.

However, the Camera component cannot be used in the emulator.


__________________________________________________________________________________________

Page 24 of 28

You can use the skills in PaintPot to draw on the canvas.

To save the background image of the canvas, first enter the file name in TextBox1 and then click

Button2.

If the file name is not empty, the picture will be stored in a folder called AI2.

Notifier component can be used to pop up a message on the screen.

You can download the above source program from http://www.plk83.edu.hk/cy/ai2/.

(E) List and Database

Two invisible components TinyDB and Notifier are used in the app.

TindyDB is a database component and it can store data in the Android device permanently.

ListPicker component can display an item in a list. Lists store data temporarily.



__________________________________________________________________________________________

Page 25 of 28

Two lists are defined to store the names and birthdays respectively. (A list contains multiple items.)

Two databases (NameDB and BirthdayDB) are used to store the above two lists respectively.

List Database

Name NameDB

Birthday BirthdayDB


__________________________________________________________________________________________

Page 26 of 28

Command TinyDB1.GetValue is used to read the stored data from the database when the app is opened.

We should not assign the read data to the two lists directly. Do you know why?

_________________________________________________________________________________

Click Button1 to add the name and birthday to the two lists respectively. Then store the two lists in the

corresponding databases.


__________________________________________________________________________________________

Page 27 of 28

The ListPicker component can pick up an item in the list.

Do you understand the above program block?


More to do

1. Can you write a block to delete the wrong data?

Hint

Add another ListPicker and use the following command to remove the items in the two lists and

update the two databases.

2. Use the component to input the birthday in order to reduce input mistakes.

(F) More Components

ImagePicker

Pick an image in the device's image gallery.



__________________________________________________________________________________________

Page 28 of 28

Player

You have to specify the source of the player.

You can download a song (song.mp3) from http://www.plk83.edu.hk/cy/ai2/.

You can Start, Pause or Stop the Player.

TextToSpeech

Use it to speak out the text.

SpeechRecognizer

Use it to convert the spoken sound to text.




Documents

Mobile Programming (MIT App Inventor 2) Contents Programming.pdf · App Inventor consists of the Designer and the Blocks Editor. (i) App Inventor Designer Design the App's User Interface