Connect App Inventor to Your Phone

App Inventor runs through a Web browser. Your phone will be connected to your computer through a USB cord and your app will emerge on the phone as you work in the Web browser. When you're done, you can "package" your finished app to produce an "application package" (Android apk file) that can be shared around and installed on any Android phone, just like any other Android app.

Before you can use App Inventor, your computer and phone need to be set up. If someone has already done this for you, you can continue right below. Otherwise, visit Setting up your computer and phone to use App Inventor and then return here.

Create a New Project

Using a web browser to go to http://appinventor.googlelabs.com. You should see an empty Projects page. To create a new project:

Press the New button near the top left of the page.
Enter a project name in the dialog box that appears and press OK.

The browser page should change to look like the figure below. This is the App Inventor Designer. This is where you'll create the pieces of your apps — buttons, text labels, pictures, and so on — by dragging them from the column of components on the left to the viewer in the center.

Open the Blocks Editor

The Designer is one of two key tools you'll use in creating your apps. The other is the Blocks Editor. You'll use the Blocks Editor to assign behaviors to your components, such as what should happen when the user taps a button. To open the Blocks editor click on Open the Blocks Editor button on the Designer screen. This will download the App Inventor Codeblocks Application and start the Blocks Editor. This brings up a new window, as in the figure below.

Tips:

It may take 30 seconds or so to download and start the Blocks Editor &mdash that's normal. You'll also need to allow permission for the application to run.

Depending on how your browser is configured, it might download the application, but not automatically launch the Blocks editor, in which case you'll have to launch the application manually after it downloads.

When the Blocks editor starts, it attempts to find the adb (Android Debug Bridge) program, which it uses to connect to the phone. If App Inventor cannot locate the program automatically, it will ask you to enter the location where adb is stored. Be sure to enter the complete file name, including (on the Mac or GNU/Linux) adb, and (on Windows) adb.exe. Once you've entered this, App Inventor will remember the location for future sessions. If you change computers, you may need to enter a new location.

App Inventor will become confused if, in the step above, you enter the name of a path that exists on your computer but is not the adb program -- for example, if you enter just the directory name without adb or adb.exe. App Inventor will now keep trying to use this "bad" path as a place to find adb. One way to fix this is to temporarily rename the file or directory at the path you entered, so that App Inventor won't find something at that path. That will make App Inventor forget the bad path it is using. Then you can undo the name change, restart the Block Editor, and enter the correct place for it to look.

Connect the Phone to the Computer

To finish connecting the phone to your computer, tap the Connect to Phone button at the top of the Blocks Editor. The text should change to Connecting, and when the connection is complete the text will change to Restart Phone App. The phone should start the AppInventor Phone Application, which displays on the phone as a blank white screen with the word Screen1 at the top, as shown here:

Later, while you're working, you can use the Restart Phone App button to restart the phone if things get hung up. Also, if the phone becomes disconnected, the button will change back to Connect to Phone as a signal that the connection has broken. You can press the button to reconnect.

At last, everything is set up. You're ready to go to the tutorials to work on your first App Inventor app!

Tips:

If your app on the phone doesn't look or act as you expect it to, try clicking the Restart Phone App button to reload your current project to the phone. This is a good troubleshooting approach.

If App Inventor is unable to communicate with the app on the phone the button text will change back to Connect to Phone

If you unplug your phone from your computer or close the Blocks Editor window, your app on the phone will go away. Don't worry, it will come back the next time you plug in your phone and click the Connect to Phone button