Mobile Programming (MIT App Inventor 2)

Transcription

1 Mobile Programming (MIT App Inventor 2) 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 account in Google. ( -OR- Using the provided Gmail account as below. User name: <your registration (e.g. Password: <your HKID card number> (e.g. A ) 2. Open the MIT App Inventor ( with the Google Chrome browser and log in with your Gmail account. 3. Click the "Guide" hyperlink. Page 1 of 29

2 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 2 of 29

3 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 3 of 29

4 First Android Program 1. Download the kitty picture (kitty.png) from the following web site 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 4 of 29

5 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 5 of 29

6 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 6 of 29

7 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 Page 7 of 29

8 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 and set meow.mp3 as the Source property of Sound1. Page 8 of 29

9 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 9 of 29

10 PaintPot 1. Open the MIT App Inventor ( and log in with your Google account. 2. Complete the PaintPot program. The demonstration videos can be found in 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 10 of 29

11 Study the Block Editor carefully; can you identify the following elements? 1. Event 2. Command 3. Argument You can use the copy and paste method to make similar blocks. Note Show your work to your teacher. Page 11 of 29

12 Part 2: Add three new components. Component Name Property Value HorizontalArrangement HorizontalArrangement1 Button ButtonBig Text Big Dots Button ButtonSmall Text Small Dots Modify the following event. Change this argument Page 12 of 29

13 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 13 of 29

14 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 Text FontSize TextColor Visible Text Enabled TextAlignment Specifies whether the component should be visible on the screen. Text to display on label. Point size for label text. Color for label text. Specifies whether the component should be visible on the screen. The text in the input box. Whether the user can enter text into this input box. 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 14 of 29

15 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 15 of 29

16 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% % 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 16 of 29

17 The app can only allow the input of numbers. How can this be achieved? You can download the above source program from 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 17 of 29

18 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 $ % 800 On the next $ % 2800 On the next $ % 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 18 of 29

19 MoleMash 1. Download the mole picture (mole.png) from the web site 2. Open the MIT App Inventor ( and log in with your Google account. 3. Complete the MoleMash program. The demonstration videos can be found in Component Name Property Value 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 19 of 29

20 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 20 of 29

21 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 Deduct the score here. to check whether it is failed to touch any ImageSprite on the Canvas.) Further Skills (A) Screen Properties Study the meanings of various properties. Page 21 of 29

22 (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 22 of 29

23 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 23 of 29

24 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 (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 24 of 29

25 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 25 of 29

26 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 26 of 29

27 The ListPicker component can pick up an item in the list. Do you understand the above program block? You can download the above source program from 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. Page 27 of 29

28 (F) More Components ImagePicker Pick an image in the device's image gallery. Player You have to specify the source of the player. You can download a song (song.mp3) from You can Start, Pause or Stop the Player. TextToSpeech Use it to speak out the text. Page 28 of 29

29 SpeechRecognizer Use it to convert the spoken sound to text. You can download the above source program from Page 29 of 29