Module 0327: Getting started with AppInventor

Tak Auyeung, Ph.D.

January 27, 2019

Contents

1 About this module
2 What is AppInventor?
 2.1 What you need to get started
  2.1.1 You have access to a Windows PC but no physical Android device
  2.1.2 You have access to a Mac OSX or Linux PC
  2.1.3 You have a PC and an Android device sharing the same Wi-Fi network that allows peer-to-peer connections
  2.1.4 You have a PC and an Android device connected by a USB cable
3 Getting started
 3.1 The concept of a mobile app
 3.2 The “Designer” view
  3.2.1 The Palette Pane
  3.2.2 The Viewer Pane
  3.2.3 The Components Pane
  3.2.4 The Properties Pane
 3.3 The “Blocks” view

1 About this module

2 What is AppInventor?

AppInventor is a web-based block-type development platform for Android devices. It offers a shallow learning curve to mobile app programming while providing enough flexibility for fairly complex projects.

2.1 What you need to get started

First, you will need access to Firefox or Chrome on a computer. You will need a fairly up-to-date browser. In addition, you also need about 1GB of available RAM after the browser is started.

You will need a Google account as owner of your projects. You can use a Los Rios student account, but any personal Google account will work as well.

There are several options.

2.1.1 You have access to a Windows PC but no physical Android device

In this case, you can only use an emulator. In general, you can follow the AppInventor emulator installation guide for instructions.

However, if your PC is locked down (such as computers in a campus lab or library), then the provided method will fail.

If you plan to use an emulator with AppInventor on a computer that requires administrator access to install the emulator, then follow these instructions:

2.1.2 You have access to a Mac OSX or Linux PC

In this case, you can only use an emulator. In general, you can follow the AppInventor emulator installation guide for instructions.

2.1.3 You have a PC and an Android device sharing the same Wi-Fi network that allows peer-to-peer connections

Important: When you are in certain Wi-Fi networks, firewall rules may be in place to block connections from one device to another device in the same network. This kind of Wi-Fi set up cannot be used with the AI2 Companion method.

If you confirm that peer-to-peer connections are allows on the Wi-Fi network connecting both your PC (running any operating system) and Android device, then you can use the AI2 Companion method to connect AppInventor to an Android device that will run the app being developed. You do need to install the AI2 Companion app on the Android device first to use this approach.

2.1.4 You have a PC and an Android device connected by a USB cable

This method does require that you have administrator access to the PC. Please follow the USB connection method for more details.

3 Getting started

Visit the AppInventor start page to start. Click “Create apps!” to enter the Project view if you do not have an active project. If you have an active project, AppInventor redirects to the project right away.

In the project view, you can manage your projects. You can create new projects, delete or open existing projects, or publish a project to the AppInventor gallery.

For more options applicable to projects, click the “Projects” menu to see a list of actions that you can perform.

If you are starting new with AppInventor, click “Start new project” either on the toolbar or in the “projects” menu to start a blank project. You will need to think of a name for the project.

3.1 The concept of a mobile app

Most mobile apps have several main aspects. The first is how it interacts with an end user. This is often known as the GUI (graphical user interface) on more traditional platforms like Windows or other desktop computers.

The second aspect is the logic of the app. This part specifies what action the app should take in response to an end user interacting with the screen element or other means of input and output.

Unlike a desktop computer, a mobile device also typically has many devices. Besides the screen, a mobile app can also make use of Bluetooth connections, accelerometer and other means to interact with an end user.

3.2 The “Designer” view

The “Designer” view allows a developer to specify what “components” are used in an AppInventor app. The “Designer” view is separated into various panes.

3.2.1 The Palette Pane

The “Palette” pane has several categories of components. The palette is like a factory that manufactures components to be included and utilized in an app.

3.2.2 The Viewer Pane

The “Viewer” pane provides a preview of the user interface of an app.

3.2.3 The Components Pane

The “Components Pane” shows the hierarchy of components of an app. This allows a structural way to find and select a component for editing in the “Properties Pane”.

One important function of the Components Pane is to let a developer remove a component.

3.2.4 The Properties Pane

The Properties Pane shows the properties of a component selected either in the Viewer Pane or the Components Pane. Note that properties of most components can be changed as an app runs, so the values of the properties merely reflect the initial values.

3.3 The “Blocks” view

Where the Designer view shows the static side of an app, the Blocks view shows the dynamic/behavioral side of an app.

Every component that is in the Design view is also found in the Blocks pane of the Blocks view. The Blocks pane shows available blocks for use to specify the logic of an app. The “Built-in” blocks are always available regardless of the components.

Each component has it own list of blocks that is unique to that type of components. Blocks specific to components typically start an action due to user interaction or some other events.