C-Tech2

 App Inventor

Android Programming

StaffDwight Barnette, Zoe Smith

AppInventor

App Inventor (AI) is a web browser based graphical programming environment for creating Android apps.

MIT App Inventor Setup

Learning the AppInventor IDE (Integrated Development Environment)

Overview

The AppInventor interface requires selecting one of two modes: Designer button or  Blocks button. To switch to the other mode simply click on the non-depressed button in the upper-right corner.

The following image shows the AppInventor Designer window. The AI Designer is a prototyping tool.

AppInventor Designer

The designer window allows one to graphically layout the user interface (UI) of their app. It is broken up into five sections:

  1. Palette
    The twelve palettes, (User Interface, Layout, ... Extension), are displayed one at a time. Opening of a palette, by a mouse click on the rectangle containing the palette name, automatically closes the currently open palette and opens the selected palette. The desired UI palette element is then dragged and positioned into the Viewer with the mouse.
  2. Viewer
    Displays the app interface as the user would see it. UI components not displayable are depcited at the bottom.
  3. Components
    Lists all of the parts of the app. The currently selected item is highlighted. A component can be selected by clicking on it in either the Viewer or in the Components list.
  4. Media
    Lists all of the media resources that have been added to the app. Resources are typically images, icons, sounds, etc.
  5. Properties
    Displays the attributes of the selected component. To change a component's attribute simply click on it.

Look over this synopsis of the features of the App Inventor Designer.

The following image shows the AppInventor Blocks Editor window. The blocks are the program code of the app.

AI Blocks code

The AI Blocks Editor is a tool for creating an AI program. The AI visual blocks language uses an iconic jigsaw metaphor for grammar and syntax. The two main sections of the AI Blocks window are the Blocks palette and the Viewer. The palette is similar to the UI palette in functionality. First click on a block. An associated block menu sub-palette will open over the Viewer section contents, (see below). Next simply click & drag on the desired palette block component to place it in the Viewer window to add to the app code.

AI block menu sub-palette

Look over this synopsis of the App Inventor Blocks Editor.

AppInventor Programming

A typical AI programming session involves switching back and forth between the Designer prototyper and the Blocks Editor. Afetr an interface element is added in the Designer prototyper it is common to immediately switch to the Blocks Editor and add the program code blocks for the added element.

In Chrome, proceed to the AppInventor home page and click on the AI Create Apps btn button in the upper left corner of the page.

Learn by Doing/Experiential Learning

Part A: Simple Apps

First App: Talk To Me

Second App: Talk To Me Extended

Part B: Mediocre Apps

Third App: HelloPurr

Fourth App: Magic 8-ball

Part C: Useful Apps

Fifth App: NoTextingWhileDriving

Sixth App: Digital Doodle

Advanced Apps

Other Apps: tutorials

Standalone App

Phone App Installation

  1. From the Build menu and select "App (save .apk to my computer)" option. Wait for the progress bar to complete. In the file save dialog, note the folder location of the "<appName>.apk" packaged application file.
  2. Connect your phone to your computer with a USB cable. In windows explorer/Finder copy the "<appName>.apk" from your hard drive to your phone.
  3. Disconnect your phone.
  4. On your phone, open your applications and select the Settings application. In Settings, scroll down and select Security (or Security & Screen Lock). Scroll down in the Security settings and choose "Unknown sources". (Agree to the Android warning).
  5. On your phone, start a file manager application. Navigate to the copied "<appName>.apk" and select it. From the popup, select the "Package installer" and the "Just once" option.
  6. Open your applications and select your installed application.
  7. For security, you should repeat setp 4 above and deselect the  "Unknown sources" settings.

Practice Apps

The following two apps were given as assignments in a VT AppInventory introductory programming course.

References

AppInventor Help

Here is an AppInventor Help page that contains links to web resources for help with using and programming in AppInventor.

Android Apps on Chrome OS

Here is a page that describes how to port AppInventor apps to Google Chrome OS to run on a ChromeOS device.

Desktop App Execution: BlueStacks Bluestacks icon

Don't have an android device but want to show friends the Android apps you've written without using the AppInventor Emulator or Chrome OS?

BlueStacks Bluestacks icon

Download and install BlueStacks on your laptop or desktop. After installing BlueStacks, go through step 1 above in the Phone App Installation section to package and download your Android app.apk packaged application file.

Start BlueStacks on your laptop/desktop, (it will take 30-50 seconds to start). From within BlueStacks, click on the Install apk button in the lower right corner of the screen. BS install apk icon

Use the file open dialog window to select your downloaded Android app.apk packaged application file. It will automatically be decomepressed and installed in BlueStacks. Select your app icon to launch it in BlueStacks.

Nox Player 
An alternative to BlueStacks.

 

Reference:

App Inventor 2: Create Your Own Apps,
D Wolber, H Abelson, E Spertus, L Looney, O'Reilly Media, 2010. ISBN: 1449397484

Available for free PDF download.