App Development

From Spaldam's Wiki
Jump to navigationJump to search
World History Wiki is Brought to you by:
S.J.'s Adventures

App Inventor 2[edit]

A free drag and drop system used for creating Android Mobile Applications. Create an application without programming any code.

Getting Started With App Inventor 2[edit]

  1. The Components Editor
    • Were you put all the components you want within the application
    • Includes buttons, images, labels, etc.
    • Phone functions like sound, camera, GPS, texting, Bluetooth etc.
  2. Blocks Editor
    • Adds functionality to your applications by combining blocks.
    • Very similar to writing code
  3. AI2 Companion App And Emulator
    • Test your app using wifi and your phone.
    • Can also be used with an emulator


  1. Gmail Account
  2. Computer
  3. Android Phone or tablet


  1. Setup Google Account
  2. Go to
  3. Log-in with your gmail/google account
  4. Create a new Project

Companion App[edit]

The companion app is needed to test your apps. You can also use an emulator on your PC. Here are a few ways to test your apps:


  1. Download the companion app: MIT AI2 Companion
  2. Open App
  3. Go to the web-site and click on Connect Then AI Companion
  4. Scan QR code, or use code, or use wifi connection (Make sure Phone and Computer are on the same network)


  2. Pick Option Two Instructions
  3. Go through the appropriate Install for your OS
  4. Run the aiStarter desktop program
  5. Open up the appropriate project
  6. Select Connect then Emulator (Emulate should be installed and running on the same computer).


This is another option, but it is a more involved.

Must have appropriate drivers for your OS and the companion app on your phone.

You'll need to attach your android device to your phone via USB.

You'll also need to install the App Inventor Setup Software that is appropriate for your operating system.

Run the aiStarter program on your computer.

You'll have to have the MIT AI2 Companion app on your android device.

Open up a project on the web-page.

Click connect, then USB.

Component Editor[edit]

Components can be placed in the view by dragging and dropping them from the palette into to viewer. They can then be edited by selecting them in the components section and then changing the properties.


  • On left hand side
  • Has a number of different categories
  • Each category has a number of components in it
  • Each component has a Question mark next to it to explain what it does

Components Viewer[edit]

  • In the middle
  • Show's all the components being used
  • Show's how the app will look

Components section[edit]

  • To the right of the viewer
  • Shows all the components lists all the components in use.
  • used to rename and change settings for each component.

Properties Section[edit]

  • On the right
  • Shows the properties for the currently selected component from with the components section
  • Each component has it's own unite set of properties

Block Editor[edit]

Next to the Designer button on the top right, click on Blocks to enter the block editor

From here you can associate blocks with different components (i.e. Telling the buttons what they do).

Media Section[edit]

  • Found right below the Components section, or under the blocks section in the blocks view.
  • Allows you to upload videos, images, etc.
  • Images and videos can be selected from within the component properties.

Blocks Drawer[edit]

  • Left and side of the Block Editor
  • Built in section shows built in blocks that can help produce certain behaviors
  • Screen # is for specific components you put into the associated screen.
  • Any Component applies to all components

Each item in the blocks draw can be selected to review a list of actions that can be taken for that specific component.

Blocks Viewer[edit]

  • Big section in the middle and right of the Blocks Editor
  • Allows you to drag actions or logic into each other so they become associated with each other.
  • Also contains a trashcan for dragging actions to be discarded.
  • The Warning and Error triangles show you if you have problems with your configuration.
    • Red is error that needs to be fixed
    • Yellow is a warning that might cause a problem
  • The different actions have notches that show if different items can be connected.