Developing mobile apps with MIT App Inventor is an exciting journey, and instantly testing your creations on a real device makes the process even more dynamic. To do this seamlessly, you need the MIT App Inventor Companion app. This guide will walk you through downloading and installing the Companion app using a QR code from the Play Store or App Store, ensuring you can preview your apps live as you build them.
Step 1: Get the MIT App Inventor Companion App from Your App Store
The first step is to download and install the MIT App Inventor Companion app on your Android or iOS phone or tablet. This app is your bridge between the App Inventor development environment on your computer and your mobile device.
To quickly find the app, you can directly visit the Google Play Store or the Apple App Store using the buttons below:
Simply click on the appropriate button for your device type. Once you’re on the app store page, proceed with the download and installation. You’ll only need to install the Companion app once. After installation, it will remain on your device, ready for all your future App Inventor projects.
For an even faster method, you can scan the QR code specific to your device’s operating system. Use your phone or tablet’s camera or a QR code scanner app to scan the appropriate QR code below, which will directly take you to the app in either the iOS App Store or the Google Play Store. This is a quick way to access the app, especially if you are familiar with using QR codes for Play Store app downloads.
It’s worth noting that there are slight differences between the Android and iOS versions of the Companion app. For specific details and tips related to the iOS version, you can review this page.
Step 2: Connect Your Computer and Device to the Same Wi-Fi Network
For the live testing feature to work, it’s crucial that both your computer, where you’re running App Inventor, and your mobile device, with the Companion app, are connected to the SAME Wi-Fi network. This shared network is what allows App Inventor to instantly display your app on your device as you develop it.
If you’re unsure about this connection, a more detailed explanation of the Wi-Fi connection process is available here. Ensuring both devices are on the same network is a key step to successful live testing.
Step 3: Connect Your App Inventor Project to Your Device
Now, open your App Inventor project on your computer. If you don’t have a project open, go to Project > Start New Project and name your project.
Once your project is ready, look at the top menu in your browser and click on “Connect”, then select “AI Companion” from the dropdown menu:
Connecting to AI Companion in MIT App Inventor menu.
A dialog box will appear on your screen displaying a QR code. On your mobile device, open the MIT AI2 Companion app. You’ll see a “Scan QR code” button within the app – tap this button and use your device’s camera to scan the QR code shown on your computer screen within the App Inventor window.
Almost instantly, you should see the app you are building appear on your mobile device. This is the power of “live testing”. As you make changes to your app’s design or blocks in App Inventor, you’ll see those changes reflected live on your device.
If you have trouble scanning the QR code, or if your device doesn’t have a QR code scanner, there’s an alternative. In the dialog box on your computer screen, you’ll see a six-character code displayed below “Your code is”. In the Companion app on your device, there is also a text area. Type this six-character code exactly as it appears on your computer screen into the Companion app, and then tap the orange “Connect with code” button. Remember to only type the six characters and press the connect button – no need to press Enter or return.
Troubleshooting Connection Issues
If your app doesn’t show up on your device, here are a few common issues and their solutions:
- Outdated Companion App: Ensure you have the latest version of the MIT App Inventor Companion app. Download the newest version from the links provided in Step 1.
- Wi-Fi Connection on Device: Check that your device is connected to Wi-Fi. The AI Companion app screen should display an IP address at the bottom if connected.
- Same Wi-Fi Network: Double-check that both your computer and your device are connected to the same Wi-Fi network name.
- Network Restrictions: Some networks, particularly in schools or organizations, might have protocols that prevent this type of connection. If this is the case, you can still use App Inventor with the emulator, or connect your device using a USB cable. You can find more information about these alternative setup options on the main setup page.
Once you’re successfully connected, you can start building and testing your apps in real-time!
