Title: App Inventor: Getting Started
Course: Appdate yourself 4t ESO (in English) - Curs 2020/21 > Section: Topic 3. First Contact with App Inventor

The App Inventor environment

When you go to http://appinventor.mit.edu you will find a map with this heading:

You can browse the App Inventor website, check out the documentation and resources it includes and, if you want to enter the programming environment, click the Create apps! button. You must validate with a Google account to access it.

When you have validated, a screen will pop up containing all the projects you will create. To start, create a new project with the Start new project button and give it a name:

This will let you access your workspace, which looks like this:

There are different zones in this work environment, marked in different colours in this image:

·         Red: The different components, grouped by categories, which you can use in your App

·         Dark blue: A space representing the mobile device screen where you have to position the different components to use

·         Pink: Zone with a list of all the components used, from where you can change the name or delete it.

·         Pumpkin: A space where you can see and modify the properties of the selected component

·         Yellow: A space from where you upload multimedia files (images, sounds, etc.) to your App

·         Sky blue: Buttons to define different screens on your App

·         Purple: Buttons to toggle between designer mode and blocks mode

.         Dark green and light green: Program menu zone

2. Work modes

App Inventor has three different work modes. The buttons in the purple zone let you toggle between Designer mode, where you sketch what your App screen will look like, and Blocks mode, where you can program the behaviour of the different components:

 Designer Mode

This mode lets you add components by dragging them directly into the centre to see what they will look like on the mobile device. Elements to add are on the left and added elements are in the “Components” box on the right. Below “Components” is another box (“Media”) where you can upload multimedia files to use in your App (sounds, photos, videos)

Blocks Mode

In this mode you can see all the components you added to your project in Screen 1. Select each one for instructions on what you can do with each component. On the top left there is a series of built-in blocks you can always utilise in your projects regardless of the components used.

On the top right there is a picture of a backpack. Open it to move around and save program pieces to reuse in other screens of the same project or in other projects you have started. The garbage can at the bottom of the screen indicates where you drag the program pieces you want to delete.

Run Mode

Finally, the third work mode is the run mode, where you can see the program you created up and running. There are three ways to see this mode:

·         Connect the computer and mobile device to the same wifi (AI Companion)

·         Use the mobile device emulator from the computer

.         Connect the mobile device to the computer with a USB cable

The option that works best, gives the least communication problems and is the most recommended is the first one: connecting both the devices to the same wifi.

Connection with the mobile device

The run mode is the work mode where you can see the program you created up and running. There are three ways to see this mode:

·         Connect the computer and mobile device to the same wifi (AI Companion)

·         Use the mobile device emulator from the computer

.         Connect the mobile device to the computer with a USB cable

To see your App on a device while you build it (also called "Live Testing"), you'll need to follow the steps below. You have three options:

Option 1: If you are using an Android device and you have a wifi internet connection

If you are using an Android device and you have a wireless internet connection, you can start building apps without downloading any software to your computer.

You will need to install the App Inventor Companion App on your device.

This option is strongly recommended

Option 2: If you do not have an Android device

If you do not have an Android device, you'll need to install software on your computer so you can use the on-screen Android emulator.

This option doesn't work properly with all Apps

Option 3: If you do not have a wireless internet connection (wifi)

You'll need to install software on your computer so you can connect to your Android device over USB.

The instructions for the recommended option are:

Option 1: If you are using an Android device and you have a wifi internet connection

Step 1: Download and install the MIT AI2 Companion App on your phone or tablet.

Link to Play Store

After downloading the App, follow the instructions to install it.

You only have to install it once and from then on you can run it every time you use App Inventor.

NB: You will need to enable an option in your phone settings to allow the installation of apps from "unknown sources".

To find this setting on versions of Android prior to 4.0, go to "Settings > Applications" and check the box next to "Unknown Sources".

For devices running Android 4.0 or above, go to "Settings > Security" or "Settings > Security & Screen Lock", check the box next to "Unknown Sources" and confirm your choice.

Step 2: Connect both your computer and your device to the same wifi network

App Inventor will automatically show you the App you are building, but only if your computer (running App Inventor) and your Android device (running Companion) are connected to the same wifi network.

Step 3: Open an App Inventor project and connect it to your Android device

Go to App Inventor and open a project (or create a new one). Then choose "Connect" and "AI Companion" from the top menu:

A dialog with a QR code will appear. On your device, launch the MIT App Companion App just as you would do any App.  Then click the “Scan QR code” button and scan the code in the App Inventor window. The code will look like this:

Within a few seconds, you should see the App you are building on your device.  It will update as you make changes to your design and blocks, a feature called “live testing”.

If you have trouble scanning the QR code, type the code shown to the right of it into the Companion's text area and then press “Connect with code”.

Troubleshooting:

If the App you are building does not appear on your device, the most likely problems are:

·        You may have an outdated version of Companion App. Download the latest version.

·        Your device may not be connected to wifi. Make sure you see an IP address at the bottom of the AI Companion App screen.

·        Your device may not be connected to the same wifi network as your computer. Make sure both devices are connected to the same wifi network.

·        Your school or organization may have network protocols in place such that the wifi connection is not allowed. If this is the case, you can use the emulator or a USB cable to connect your device.

·         If you need more information you can find it on the App Inventor page.