Massachusetts Institute of Technology (MIT) has a tool called MIT App Inventor that creates apps using block-based programming. This is an intuitive, visual programming environment that allows everyone to build fully functional apps for Android phones, iPhones, and Android/iOS tablets.

Access MIT App Inventor in a new window on your computer. 

Create Account

Click “Create Apps!“ in the top left corner to create an account using your @sps.org email address for Launch.

Start New Project

1. Select Start New Project.

2. Name the project to refer to you and the activity using the following convention: LastNameFirstInitialProjectName (for example: DoeJImageDraw)

TWO VIEWS IN APP INVENTOR

There are two types of views in App Inventor: Designer and Blocks. You can switch between the two using the buttons on the top right of the screen:

• Designer view: where you can create the user interface and add various features to an app. You can add components such as buttons, images, and text boxes. 

• Blocks view: where you can program functionality for the components you added in the designer view.

As you work through the activities, be sure to pay attention to whether you are working on the designer view or the block view.

The Emulator

App Inventor provides an emulator that mimics a physical mobile device so that you can test the functionality of your app. Please use the following links to download an applicable version of the emulator:

• MIT AI2 Companion App for Chromebook

• MIT AI2 Companion App for Andriod or iOS Device

• MIT AI2 Companion App for Windows, MacOS, or Linux devices

After choosing the Chromebook option above it will take you to the Google Play Store and you will click “Install“

To test your program, start the emulator. In MIT App Inventor select Connect then select Chromebook. Make sure your companion app is installed first! The Chromebook option will only appear if you are building your app on a Chromebook.

The first time you connect, it will prompt you to “Open with” the companion app. You can tell it to remember this option and open it. 

You will see a number of loading screens while it establishes a connection. After you first establish this connection, you will be able to refresh the view as needed. 

You should now see your app on your emulator screen.