Starting with App Inventor

Quicklinks: USB Connection WiFi Connection WiFi is easier, but the classroom WiFi lags sometimes

App Inventor

a block-based programming environment with which you can create Android Apps.

All of the software tools needed to design, develop, and test a mobile Android app are integrated within the App Inventor platform. Integrated Development Environments (IDE) are part of the standard toolkit that programmers use to develop programs.

App Inventor is also a cloud application: it runs completely within a browser (eg. Chrome, Firefox, and Safari, which are the recommended browsers and should be kept up to date).

You must have a gmail account (for example your ######@gilroyunified.org account will work).

Rules for Tablets

Do not log into tablets. They already have an account (chs.cs), so if you log in, other people will be able to mess with your account.
Do not install any programs (i.e. games).
Do not take pictures of other students.
Do not play music or videos with tablets.
Turn the sound off, put the tablet back and plug into the charger at the end of the period.

Note on Tablets

The tablet needs to be connected to the GUSD network for it to work with the computers.

If the tablet is not connecting, give it to TClark to troubleshoot and try another.

Test your set up:

On your computer, download TestApp.aia (the App Inventor Test App project) and remember where your computer downloads the file (e.g., Desktop, Downloads folder). (NOTE: App Inventor project files are zip archives but they have the App Inventor suffix, .aia, short for App Inventor Archive.)
- DO NOT open this file, use App Inventor to access it

2. Follow the link to App Inventor 2, and use your computer to sign in with your @gilroyunified account.

3. Click on "Projects → Import Project (.aia) from my computer"

4. Choose file and browse to find the TestApp.aia file. Note there must be no spaces in the filename.

Once it loads up you should see the Designer view, where you will design your app's User Interface. This app has an image, a couple of labels that display text and a Player component that will play a triumphant sound.

5. Click on the upper right tab to switch to the Blocks view.

The Blocks Editor is where all the coding happens. Notice that App Inventor blocks connect together like puzzle pieces. The blocks for this app will cause it to display a congratulatory message on your screen and play a sound.

You are on your way to becoming a programmer! In the next lesson, you will learn how to navigate through the different views, what each view is specifically for, how to design an app, and how to program an app.

Running and Testing the Apps

There are four ways to connect the projects you make with an Android tablet or phone. You will need the MIT AI2 Companion App on your device.

WiFi: Connecting an Android mobile device via a WiFi link (both on same network). This is the preferred method.
USB: Connecting an Android mobile device via a USB cable.
Android emulator: Using emulator software running on your computer to test your apps.
- or a different emulator: Genymotion Emulator
- note: emulators are not always the best solution because 1) you are creating mobile apps for devices and 2) not all the emulation software will work as intended
You can "publish" the app by building it: "Build → App (save .apk to my computer)", then downloading the apk file to your device and running it. You must change the settings to allow your device to install from unknown sources.

1. Running the App on Tablet via Wifi Companion

For now, we just want to make sure everything is set up properly. Follow these instructions to test your set up. Note: this should already be set up if you are using TClark's tablets in class.

A. Make sure that both your computer and your phone or tablet are connected to the same WiFi, then start the MIT AI2 Companion app on your phone or tablet.

B. App Inventor, click Connect and then select AI Companion. This will display a 6-letter code both as a barcode and as plain text. (Note: The 6-letter code will be a unique code and different from the one shown)

C. On the companion app, either type in the 6-letter code and click the "Connect to App Inventor" button or scan the barcode.

D. Now the app should load onto the tablet and you should hear the sound (turn up the volume if you do not).

Getting the Companion App to run on iPhones 2020

A. Download TestFlight on your iPhone

B. Download the App Inventor iOS Companion app from this link on your iPhone. Visit that link, click open, then install.

Note: Membership using this link is approved only until the end of June 2020

Your smartphone has to be using the same WiFi as your computer or chromebook for the App Inventor Companion to work

2. Running the App on Tablet via USB

For now, we just want to make sure everything is set up properly. Follow these instructions to test your set up. Note: this should already be set up if you are using TClark's tablets in class.

A. Open the AI Starter on your computer

- Click on windows icon in the bottom left, then select aiStarter from list of apps

B. It should open up the window you see below. Note: ONLY 1 window should be open, and it might not pop up in front, so don't click twice.

C. Plug in the tablet to the laptop using a micro USB cable.

ALLOW it to have permissions when it pops up, and you can test your tablet to laptop connection here.

D. On the App Inventor Website, click on Connect, and select USB to connect to the tablet

2b. Chromebook

If your Chromebook can install Android apps via the Google Play Store, you can install the MIT AI2 Companion App and run the app in one tab, and the coding website in another and connect with code.

3. Running the App on the Emulator

A. Open the AI Starter on your computer

- Click on windows icon in the bottom left, then select aiStarter from list of apps

BIn App Inventor, click Connect and then select Emulator.

C. This will automatically connect to the app to the the Emulator. There is no need to scan a barcode or type in a 6-digit code. The connection will happen automatically.

Troubleshooting

If everything is configured properly, you should see the Test app on your device or emulator. You should see a message and an image of an Android. You should also hear a round of applause for your great work!

If the app is not running correctly, you may need to retrace your setup steps to make sure you performed all of the necessary steps. After doing that, if you are still having problems, ask TClark for some help.

Report abuse