1. App Inventor 2

1. App Inventor 2
1.1 What is MIT App Inventor?
MIT App Inventor is an innovative beginner's introduction to programming and app creation that
transforms the complex language of text-based coding into visual, drag-and-drop building blocks.
The simple graphical interface grants even an inexperienced novice the ability to create a basic, fully
functional app within an hour or less.
App Inventor lets you develop applications for Android phones using a web browser and either a
connected phone or emulator. The App Inventor servers store your work and help you keep track of
your projects.
X4-XT-CDP-0261-A @ Peter Lo 2016
1
1.2 Getting Start
To get started, go to App Inventor web site (http://ai2.appinventor.mit.edu), and log in with a Gmail
user name and password.
X4-XT-CDP-0261-A @ Peter Lo 2016
2
2. Setup Development Environment
2.1 Connect your Mobile over same WiFi Network
Download the “MIT AI2 Companion” from Google Play or http://appinv.us/companion. Connect
both your computer and your device to the same WIFI network. Then choose Connect  AI
Companion from the top menu in the AI2 browser:
A dialog with a QR code will appear on your PC screen. On your device, launch the MIT App
Companion app just as you would do any app. Then click the “Scan QR code” button on the
Companion, and scan the code in the App Inventor window:
X4-XT-CDP-0261-A @ Peter Lo 2016
3
2.2 Connecting to a Mobile with USB cable
2.2.1 Setup your Computer
Install the App Inventor Setup Software

Windows: http://appinventor.mit.edu/explore/ai2/windows.html

Mac: http://appinventor.mit.edu/explore/ai2/mac.html
Using the emulator or the USB cable requires the use of a program named aiStarter. On a Mac,
aiStarter will start automatically on Mac. However, you need to execute the shortcuts from Desktop
or Start menu in Windows.
X4-XT-CDP-0261-A @ Peter Lo 2016
4
2.2.2 Setup your Mobile
Power on your device, then select Settings  Developer Option, to enter developer mode (If the
developer mode is not enable, press the build number several times to turn on developer mode).
․
․
․
․
USB debugging (Required)
Stay awake (Optional)
Allow mock locations (Optional)
Power menu bug reports (Optional)
Download the “MIT AI2 Companion” from Google Play or http://appinv.us/companion. Connect
both your computer and your device by USB. Then choose Connect  USB from the top menu in
the AI2 browser:
X4-XT-CDP-0261-A @ Peter Lo 2016
5
3. Designer and Blocks Editor
3.1 App Inventor Designer
The App Inventor Designer, where you select the components for your app. Design the App's User
Interface by arranging both on- and off-screen components.
3.2 App Inventor Blocks Editor
The App Inventor Blocks Editor, where you assemble program blocks that specify how the
components should behave. You assemble programs visually, fitting pieces together like pieces of a
puzzle.
X4-XT-CDP-0261-A @ Peter Lo 2016
6
4. Sharing and Packaging Apps
4.1 Sharing your Project
Select the project you wish to share by checking the box next to it. Choose Project  Export
selected project (.aia) to my computer to export the source code for your project. The source code is
downloaded in .aia file.
If you send it to a friend, they can open it with Project  Import project (.aia) from my computer.
X4-XT-CDP-0261-A @ Peter Lo 2016
7
4.2 Sharing your App
Package the app by selecting Build  App (save .apk to my computer) on the App Inventor
toolbar.
A pop-up box should alert you that your download has begun. Once the build completes, you can
email the app to your friends who can install it by opening the email from their phone. If you want to
distribute it more widely, you can upload it to a website that both you and your friend can access. You
can also distribute your app on the Google Play store.
X4-XT-CDP-0261-A @ Peter Lo 2016
8
5. Architecture
5.1 Components
There are two main types of components in an app:

Visible Components are those that you can see when the app is launched—buttons, text boxes,
and labels. These are often referred to as the app’s user interface.

Non-visible Components are those that you can’t see, so they’re not part of the user interface.
Instead, they provide access to the built-in functionality of the device. For example, the Texting
component sends and processes SMS texts, the LocationSensor component determines the
device’s location, and the TextToSpeech component talks.
5.2 Behavior
The behavior defines how the app should respond to events, both user initiated (e.g., a button click)
and external (e.g., an SMS text arriving to the phone).
X4-XT-CDP-0261-A @ Peter Lo 2016
9
Many events are initiated by the end user, but some are not. An app can react to events that happen
within the phone, such as changes to its orientation sensor and the clock (i.e., the passing of time), or
it can respond to events that originate outside the phone, such as an incoming text or call from another
phone, or data arriving from the Web.
App Inventor provides a high-level blocks-based language for specifying behaviors. The blocks make
programming behaviors more like plugging puzzle pieces together which involve learning and typing
vast amounts of code.
5.3 Event Types
Event type
Example
User-initiated event
When the user clicks button1, do...
Initialization event
When the app launches, do...
Timer event
When 20 milliseconds passes, do...
Animation event
When two objects collide, do...
External event
When the phone receives a text, do...
5.3.1 User-Initiated Events
User-initiated events are the most common type of event. With input forms, it is typically the user
tapping a button that triggers a response from the app. More graphical apps respond to touches and
drags.
5.3.2 Initialization Events
Sometimes, your app needs to perform certain functions immediately upon startup, not in response to
any end-user activity or other event.
5.3.3 Timer Events
Some activity in an app is triggered by the passing of time. You can think of an animation as an object
that moves when triggered by a timer event. App Inventor has a Clock component that you can use to
trigger timer events. For instance, if you wanted a ball on the screen to move 10 pixels horizontally at
a set time interval
X4-XT-CDP-0261-A @ Peter Lo 2016
10
5.3.4 Animation Events
Activity involving graphical objects within canvases will trigger events. So you can program games
and other interactive animations by specifying what should occur on events such as an object
reaching the edge of the canvas or two objects colliding
5.3.5 External Events
When your phone receives location information from GPS satellites, an event is triggered. Likewise,
when your phone receives a text, an event is triggered
5.4 Comment
If you’ve completed a few of the tutorials in this book, you’ve probably seen the small yellow boxes
within the blocks. These are called comments. In App Inventor, you can add comments to any block
by right-clicking it and choosing Add Comment. Comments are just annotations; they don’t affect the
app’s execution at all.
X4-XT-CDP-0261-A @ Peter Lo 2016
11
6. Properties
6.1 Defining Properties
The user of an app can see visible components such as buttons, textboxes, and labels. Internally, each
component is completely defined by a set of properties. The values stored in the memory slots of each
property determine how the component appears. You can set component properties in the Designer;
you are setting the initial values of the properties
When you set a property in the Component Designer, you are specifying the initial value of the
property. Property values also can be changed as the app runs, with blocks. The values shown in the
Component Designer don’t change; these always show only the initial values.
X4-XT-CDP-0261-A @ Peter Lo 2016
12
7. Develop your Simple Apps
7.1 My First App
7.1.1 Designer View
7.1.2 Components
Component
Name
Screen
Screen1
Button
Button1
Notifier
Notifier1
Properties
Remark
7.1.3 Block Configuration
X4-XT-CDP-0261-A @ Peter Lo 2016
13
7.1.4 Sample Output
7.2 Web Browser
7.2.1 Designer View
X4-XT-CDP-0261-A @ Peter Lo 2016
14
7.2.2 Media
polyulogo.png
7.2.3 Components
Component
Screen
Name
Screen1
Properties
Remark
Title = “Web Browser”
Icon = “polyulogo.png”
HorizontalArrangement
HorizontalArrangement1
Width = “Fill Parent”
TextBox
TextBox1
Width = “Fill Parent”
Inside HorizontalArrangement1
Hint = “URL”
Button
Button1
WebViewer
WebViewer1
Text = “Go”
Inside HorizontalArrangement1
7.2.4 Block Configuration
7.2.5 Sample Output
X4-XT-CDP-0261-A @ Peter Lo 2016
15

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project