行動寬頻尖端技術跨校教學聯盟
Lab 1: Android Programming
with App Inventor 2
物聯網核心技術及應用專題 Key Technologies of IOT and their Applications
國立交通大學資訊工程系
Department of Computer Science
National Chiao Tung University
September 24, 2015
1
Outline
o
App Inventor 2 Overview
o
o
o
o
o
Hello World Application
Guess the Number Application
(Checkpoint 1)
(Checkpoint 2)
o
o
App Inventor 2 Login
App Inventor 2 GUI
Installing USB connectivity and Emulator
Coding with Blocks
(Checkpoint 3)
(Checkpoint 4)
Http Post Application
(Checkpoint 5)
2
App Inventor 2 Overview
o
Cloud-based tool for developing Android Apps.
o
Originally provided by Google, and now maintained
by the Massachusetts Institute of Technology (MIT).
o
Apps can be built right in your web browser.
o
Url of the service: ai2.appinventor.mit.edu.
o
Works with your google account.
o
Focus on the Application not on Coding.
3
App Inventor 2 Overview
General Features:

o
A designer, in which a program's components are specified. This includes
visible components, such as buttons and images, which are placed on a
simulated screen, and non-visible components, such as sensors and web
connections.
o
A blocks editor, in which the program's logic is created.
o
A compiler based on the Kawa language framework.
o
Real-time deployment and debugging on a connected Android device.
o
Real-time deployment and debugging on a provided Emulator.
o
Deployment via .apk using QR code or direct download.
4
App Inventor 2 Login
1. Type http://ai2.appinventor.mit.edu
2. Login using your google account.
3. Allow permission to MIT AppInventor Version 2 to access your google
account (if required).
5
App Inventor 2 New Project
From menu “My projects” select “Start new project”.
6
App Inventor 2 New Project
In “Project name” type “New” and click “OK”.
7
App Inventor 2 GUI
8
App Inventor 2 GUI
9
Installing the Emulator
1. From menu “Help” click on “Library”.
10
Installing the Emulator
2. From the newly opened web page click on “Set Up: Connect phone…”.
11
Installing the Emulator
3. Scroll down and click on “Option Three … Instructions”.
12
Installing the Emulator
4. Scroll down and select the link corresponding to your Operating System.
Mac OS, Windows, or Linux.
For this tutorial, we assume we are using Windows.
13
Installing the Emulator
5. Download the Windows Installer Program.
6. Run the Windows Installer Program.
14
Installing the Emulator
8. Launch aiStarter application. (You installed this software on steps 5 and 6).
This is the actual software that allows the communication between App
Inventor 2 and your phone via USB, and enables running the Emulator.
15
CHECKPOINT 1!
16
Hello World Application
1. Create a new project
17
Hello World Application
2. Provide a name to your project. (In this example we use “HelloWorldApp”).
18
Hello World Application
3. Drag and Drop a “Label” control from the “User Interface Panel” to the
screen of your app.
19
Hello World Application
4. Change the text of the label component. (Click “Label1” in the
“Components” panel, then type “Hello World!” in the “Text” field in the
“Properties” panel.
20
Hello World Application
5. Change settings of main screen. (Click “Screen1” in the “Components”
panel, then in “Properties” panel change “AlignHorizontal” field to “Center”
and type “Hello World App” in the “Title” field.
21
Hello World Application
6. Create an .apk and install the application in your phone. (Select “App
(provide QR code for .apk)” from Build menu.
22
Hello World Application
7. Read the provided QR code using any QR code reader app in your phone.
This action will download an .apk file into your phone. After download just
install it and run it.
23
Hello World Application
8. Run your application using the provided Emulator. (From menu “Connect”
select “Emulator”).
24
Hello World Application
9. Execute your Hello World Android app.
25
CHECKPOINT 2!
26
Guess the Number Application
1. Create a new project
27
Guess the Number Application
2. Provide a name to your project. (In this example we use “GuessTheNumber”).
28
Guess the Number Application
3. Draw the GUI components and change their properties as showed in the
picture.
29
CHECKPOINT 3!
30
Coding with Blocks
• The Blocks editor has different components that can be used to build our
application logic.
• The components follow the drag and drop paradigm.
31
Coding with Blocks
• Control: If, for, while, open screen, close screen, close application, etc.
32
Coding with Blocks
• Logic: true, false, and, or, not, equals.
33
Coding with Blocks
• Math: numbers, numerical operators, random number, abs, sin, cos, etc.
34
Coding with Blocks
• Text: input user text, join strings, trim, split, replace, etc.
35
Coding with Blocks
• Lists: functions for managing list of objects.
36
Coding with Blocks
• Colors: common colors, create your own color based on r, g, b.
37
Coding with Blocks
• Variables: local variables, global variables, get value, set value.
38
Coding with Blocks
• Procedures: allows reusability of code creating functions.
39
Coding with Blocks
• Additionally, each GUI component has its own blocks. For example, a label
has blocks for getting and setting its text, getting and setting its font height
and size, etc.
40
Guess the Number Application
4. Setting up variables and a random number.
• “theNumber” contains a random number between 1 and 100. This is the
number that we want the user to guess.
• “min” and “max” are variables used to provide hints to the user.
• “theCounter” counts the number of trials during the game.
41
Guess the Number Application
5. Programming the “Guess” button.
a) When the user clicks the button,
b) If the number that the user input is equals to the random number we
initialized at the beginning (TextBox1.text = theNumber),
c) Then, display a congratulations message (using Label2) showing the
number that the user is guessing and the number of trials the user did.
Additionally, disable the “Guess button”. End of game.
d) If the guess is wrong, increment the counter by 1.
42
Guess the Number Application
TASKS:
• Add an else-If case when the value input by the user is bigger than the
actual number, and when the value of max is bigger than the value input
by the user, update value of max. Provide a hint to the user.
Else if (user_input > guessing number AND max > user_input) then
update value of max to user_input (use Label1 to show the hint)
• Add an else-If case when the value input by the user is lower than the
actual number, and when the value of min is lower than the value input by
the user, update value of min. Provide a hint to the user.
Else if (user_input < guessing number AND min < user_input) then
update value of min to user_input (use Label1 to show the hint)
43
Guess the Number Application
6. The blocks for button “Restart” are as follows:
44
Guess the Number Application
7. The blocks for button “About” are as follows:
45
Guess the Number Application
8. The blocks for button “Quit” are as follows:
46
Guess the Number Application
9. Compile the application and run it in your phone. (Use QR code download
method).
47
CHECKPOINT 4!
48
Http Post Application
1. Create a new project called “HttpPostApplication”.
2. Design the GUI according to the image below.
49
Http Post Application
3. Be sure to include the following url: http://140.113.241.3:3000/hello in the
“Url” field for the “Web1” component.
50
Http Post Application
4. In the Blocks designer, drag and drop the application logic according to the
picture below.
• When user clicks the button “Send Request”, the app will send an Http
Post request to a remote server in a specific location
(http://140.113.241.3:3000/hello).
• The response is shown on the screen (using lblResponse).
51
Http Post Application
5. Compile the application and run it in your phone. (Use QR code download
method).
52
CHECKPOINT 5!
53