Android Programming

Staff:  Dwight Barnette, April Monk

AppInventor

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

MIT App Inventor Setup

• Logon to the lab computer and VT campus wireless using the provided CEED username and password. Start Google chrome, (or Brave, or Mozilla Firefox if Chrome is not present).  Do NOT use Microsoft Internet Explorer or MS Edge.
• Create a Google account
  It is unnecessary to enter your actual name, real birthday, gender, an existing email address or your cell phone number. Skip the add photo step. Proceed to gmail and remain logged on. (If an existing email address is required get a disposable address at  temp-mail.org.)
  
  
• App Inventor web site, Click Resources > Get Started
  Sign in to your Google account & allow AppInventor to know your Google email.
  
  
• Setting up MIT App Inventor (AI)
  • In a new browser tab/window open the
    Setup Instructions for Testing page.
  • Step 1: Install the App Inventor Software
    Option One: Android Device or iPhone
    If you have a laptop and an Android phone or tablet (or iPhone),  both connected to the VT wireless network, follow the Option One instructions to use your device for app execution/testing instead of using the emulator. If you do have an Android device/iPhone this is the best option. Raise your hand we will come to help you with the install. Skip steps 1 & 2 in this case.

  Option Three: in a new browser tab/window  open the App Inventor Setup Emulator page.Click on the instructions link for the Operating System you are using from the App Inventor Setup Emulator page.

  Download the installer (Windows). Follow the instructions on the page for downloading and opening the installer. (Accept/Run the installer file from the prompt at the bottom of your browser window. Check the Desktop icon option when choosing components to install.)
  Agree to the License Agreement.
  Accept the default install location:
  C:\Program Files (x86)\AppInventor
  Install in the default start menu folder.  C:\Program Files (x86)\AppInventor\commands-for-Appinventor

  Follow the    Setup Emulator link  

   Step 2: Launch aiStarter (Windows)
  Look for the aiStarter icon on the desktop and double click it. (Once only!)

  • Step 3: Start the App Inventor cloud-based software at ai2.appinventor.mit.edu
    On the Google account page, select the gmail account you created earlier and hit the   Allow   button.
    Take the survey later. Click the  Continue   button in the Welcome to App Inventor dialog popup window.
    • If you had to install the Emulator, from the Connect Menu select the  Emulator  Option. Wait for the Emulator to start, connect and verify. When informed that the Companion App is out of date select Ok to Install the Companion App update on the emulator. Open the emulator window (it will look similar to the one at the far right. This will take several minutes and it will look like nothing is happening. Be patient. Wait until you see a popup dialog in the emulator Window requesting to replace the application. Select Ok and then Install to proceed. Wait for the intsaller update to complete. Select the   Done   button on the emulator once the update has installed, NOT the open button. (If the Emulator does not open then wait until after you have created your first project to start it. If you have problems you may need to reset the connection from the Connect menu and then restart the emulator.)

Learning the AppInventor IDE (Integrated Development Environment)

Overview

The AppInventor interface requires selecting one of two modes: or  . 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.

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.

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.

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 button in the upper left corner of the page.

Learn by Doing/Experiential Learning

Part A: Simple Apps

First App: Talk To Me

• Follow along as the video plays to create your first app.
• Click on the  New Project   button, (upper left of AI window), or click on the Project▼ menu and select "Start new project..." Enter a project name. It cannot contain spaces.
• If neccessary click on the Connect▼ menu and select "Emulator".
• Skip step two in the video tutorial as we are using the emulator.
• Designer: As you drag user interface elements from the palette drawer to the AI Designer viewer you should see them appear on the emulator.
  
• Blocks: Part 4. In the Blocks Editor as you click on a block menu rectangle  ■ ■ ■ ■ ■ ■ ■ ■  on the left, a palette will open for selection of a specific component. Simply click and drag on the component, the palette will disappear and you can plug the component into your program.

Second App: Talk To Me Extended

• Follow along with the video to extend the previous app.
• Pick up where you left off in the first app.
• Unfortunately the emulator cannot be shaken.
• Make sure you select the correct TextBox1 component to allow the user to enter their phrase:  
  

Part B: Mediocre Apps

Third App: HelloPurr

• In a new browser tab/window open the Hello Purr tutorial.
• Follow the instructions creating the HelloPurr app tutorial.
• After you have the Hello Purr application running use the following two files to create a corresponding Va Tech Hokie fan app:
  • Hokie Bird image
  • Turkey gobble mp3 (1400 ms) or turkeyGobble.wav

Fourth App: Magic 8-ball

• In a new browser tab/window open the Magic 8-Ball tutorial.
• Proceed through the first two parts of the tutorial. (Part 3 requires an actual Android phone.)
  

Part C: Useful Apps

Fifth App: NoTextingWhileDriving

• Develop the No Texting While Driving app:
  • Follow the written tutorial.

Sixth App: Digital Doodle

• Develop the Digital Doodle app:
  • Follow the written tutorial.
  • Follow the video tutorial.

Advanced Apps

Other Apps: tutorials

• Look through the three pages of AI tutorials.
• AppInventor: Decision Making
  

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.

• Develop the "I Have a Dream App" app 
    
• Develop the "Body Mass Indicator calculator" app
  

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

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

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.

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.