Basics: Project 107a
Project name: MIT App Inventor 2 and Arduino
Tags: MIT App Inventor 2, Arduino
In this project, you needed these parts (Dear visitors. You can support our project buy clicking on the links of parts and buying them or donate us to keep this website alive. Thank you):
1. Arduino Uno R3 (you can also use the other version of Arduino) 1pc
2. Arduino IDE (you can download it here)
3. Bluetooth module HC-04,HC-05 or HC-06
We will learn about the MIT App Inventor 2 software and we will show you what do you need to get started building your Android apps to control your Arduino.
Understanding the MIT App Inventor
MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for smartphones and tablets. You can have a simple first app up and running in less than 30 minutes. And what’s more, the blocks-based tool facilitates the creation of complex, high-impact apps in significantly less time than traditional programming environments. The MIT App Inventor project seeks to democratize software development by empowering all people, especially young people, to move from technology consumption to technology creation.
A small team of CSAIL staff and students, led by Professor Hal Abelson, forms the nucleus of an international movement of inventors. In addition to leading educational outreach around MIT App Inventor and conducting research on its impacts, this core team maintains the free online app development environment that serves more than 6 million registered users.
Blocks-based coding programs inspire intellectual and creative empowerment. MIT App Inventor goes beyond this to provide real empowerment for kids to make a difference – a way to achieve social impact of immeasurable value to their communities.
MIT App Inventor 2 features:
- Intuitive and simple to use.
- suitable for beginners as you don’t have to be an expert in programming or design to build awesome apps that can do useful stuff.
- easy to create own design for apps.
- all coding done with drag and drop puzzle blocks.
- easy to learn how to build own apps with MIT App Inventor 2 in some hours of practice.
What do you need?
App Inventor is a free, cloud-based service, it means that you don’t need to download or install any program in your computer (PC), that allows you to make your own mobile apps using a blocks based programming language. You access App Inventor using a web browser (Chrome, Firefox, Safari).
You will need a Mac or Windows PC and an internet connection.
To use App Inventor, your computer must meet the following system requirements:
- Computer and operating system:
- Macintosh (with Intel processor): Mac OS X 10.5, 10.6+
- Windows: Windows XP, Windows Vista, Windows 7+
- GNU/Linux: Ubuntu 8+, Debian 5+ (Note: GNU/Linux live development is only supported for WiFi connections between computer and Android device.)
- Mozilla Firefox 3.6 or higher (Note: If you are using Firefox with the NoScript extension, you’ll need to turn the extension off. See the note on the troubleshooting page.)
- Apple Safari 5.0 or higher
- Google Chrome 4.0 or higher
- MIT App Inventor does not support Microsoft Internet Explorer. Windows users should use Chrome or Firefox
3. Phone or Tablet (or use the on-screen emulator):
- Android Operating System 2.3 (“Gingerbread”) or higher
Whichever model you have, your phone must have an SD card (physical or virtual) installed, or else the phone won’t work with MIT App Inventor. Most modern Android phones have virtual SD cards, so this is an issue only for older phones. MIT App Inventor also works with many other Android phones, including models from HTC, Samsung, and Dell, but in many cases you will need to download and install additional software from the manufacturer. You can find details for a few of these models in that table at the bottom of the page for setting up your phone. Even if your phone is not listed there, it is still likely to work with MIT App Inventor. Consult the MIT App Inventor User Forum under “Getting set up and connecting your phone” for advice from others who may be using the same phone.
What about live testing? How can I see my app on device while I build it?
If you want to see your app on a device while you build it (also called “Live Testing”), there three options available.
1. 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 Android device. This option is STRONGLY RECOMMENDED.
2. If you do not have an Android device, you’ll need to install software on your computer so that you can use the on-screen Android emulator.
3. Some firewalls within schools and organizations do not allow the type of WiFi connection required. If WiFi doesn’t work for you, try USB. If you do not have a wireless internet connection, you’ll need to install software on your computer so that you can connect to your Android device over USB. The USB Connection option can be tricky, especially on Windows. Use this as a last resort.
Let’s us explore each option now.
Option one. If you are using an Android device and you have a wireless internet connection.
Step by Step instruction:
- Download the MIT AI2 Companion App on your phone.
Open your device’s QR code scanner and scan the QR code or click this link to get the app from the Play Store or click this link to download the app directly. If you need a QR code scanner, you can get one at the Play Store (e.g., ZXing).
- After downloading, step though the instructions to install the Companion app on your device. You need to install the MIT AI2 Companion only once, and then leave it on your phone or tablet for whenever you use App Inventor. Please note: If you are unable to use the QR code, you can still install MIT AI2 Companion on your phone or tablet. Use the Web browser on your device to go to the Google Play Store; look for MIT AI2 Companion in the store. Once you find Companion, click on INSTALL button for the Companion app; If you choose not to go through the Play store and instead load the app directly, you will need to enable an option in your device’s settings to allow installation of apps from unknown sources. To find this setting on versions of Android prior to 4.0, go to Settings -> Applications and then check the box next to Unknown Sources. For devices running Android 4.0 or above, go to Settings -> Security or Settings -> Security & Screen Lock and then check the box next to Unknown Sources and confirm your choice.
- Connect your PC (running MIT App Inventor) and your Android device (running the Companion) to the same WiFi Network. App Inventor will automatically show you the app you are building.
- Open an App Inventor project and connect it to your device. Go to the App Inventor website ai2.appinventor.mit.edu (to access it, you need a Google account) and open a project (or create a new one – use Project -> Start New Project and give your project a name).Then go to Connect -> AI Companion. A dialog with a QR code will appear on your PC screen. On your device, launch the MIT App Companion app just as you would do any app. Then click the “Scan QR code” button on the Companion, and scan the code in the App Inventor window.
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 or your device does not have a scanner, type the code shown on the computer into the Companion’s text area on your Android device exactly as shown. The code is directly below where the screen on your PC shows “Your code is” and consists of six characters. Type the six characters and choose the orange “Connect with code”. Do not type an Enter or carriage return: type just the six characters followed by pressing the orange button.
If your app does not appear on your device, the most likely problems are:
- You may have an outdated version of the App Inventor Companion App. Download the latest Companion App for App Inventor 2 from above.
- Your device may not be connected to wifi. Make sure you see an IP address at the bottom of the AI Companion App screen on your phone or tablet.
- 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 name.
- You may have network protocols in place such that the wifi connection is not allowed. If this is the case, you can still use App Inventor with the emulator or you can use a USB cable to connect your device.
Option two. If you do not have an Android device.
If you do not have an Android phone or tablet, you can still build apps with App Inventor. App Inventor provides an Android emulator, which works just like an Android but appears on your PC screen. So you can test your apps on an emulator and still distribute the app to others, even through the Play Store. Quite a lot of users develop primarily on emulators and provide a few Androids for final testing.
Step by Step instruction:
1. Install the MIT App Inventor software on your Mac OS X or Windows or GNU/Linux. It is explained very good here.
2. Launch aiStarter (Windows & GNU/Linux only). Using the emulator or the USB cable requires the use of a program named aiStarter. This program is the helper that permits the browser to communicate with the emulator or USB cable. The aiStarter program installed with the MIT App Inventor software package. You do not need aiStarter if you are using only the wireless companion.
- On a Mac, aiStarter will start automatically when you log in to your account and it will run invisibly in the background.
- On Windows, there will be shortcuts to aiStarter from your Desktop, from the Start menu, from All Programs and from Startup Folder. If you want to use the emulator with MIT App Inventor, you will need to manually launch aiStarter on your computer when you log in. You can start aiStarter this by clicking the icon on your desktop or using the entry in your start menu.
- You’ll know that you’ve successfully launched aiStarter when you see a window like that:
- On GNU/Linux, aiStarter will be in the folder /usr/google/appinventor/commands-for-Appinventor and you’ll need to launch it manually. You can launch it from the command line with /usr/google/appinventor/commands-for-appinventor/aiStarter &
3. Open a MIT App Inventor project and connect it to the emulator. Go to MIT App Inventor website ai2.appinventor.mit.edu (to access it, you need a Google account) and open a project (or create a new one – use Project -> Start New Project and give your project a name).
Then go to Connect -> Emulator. You’ll get a notice saying that the emulator is connecting. Starting the emulator can take a couple of minutes. You may see update screens like the following as the emulator starts up:
The emulator will initially appear with an empty black screen. Wait until the emulator is ready, with a colored screen background. Even after the background appears, you should wait until the emulated phone has finished preparing its SD card: there will be a notice at the top of the phone screen while the card is being prepared. When connected, the emulator will launch and show the app you have open in App Inventor.
If this is the first time you are using the emulator after installing the App Inventor Setup software, you will see a message asking you to update the emulator. Follow the directions on the screen to perform the update and reconnect the emulator. You will need to do this kind of update whenever there is a new version of the App Inventor software.
Option three. If you do not have a wireless internet connection
1. Install the MIT App Inventor software on your Mac OS X or Windows or GNU/Linux. To connect with USB, you need to first install the MIT App Inventor software on your PC. (This is not required for the wifi method) It is explained very good here. You can check whether your computer is running the latest version of the software by visiting the Connection Test Page.
2.Download and install the MIT AI2 Companion App on your phone.
3.Launch aiStarter (Windows & GNU/Linux only)
4. Set up your device for USB (Turn USB Debugging ON). On your Android device, go to System Settings -> Developer Options, turn them on, and be sure that USB Debugging is allowed. On most devices running Android 3.2 or older, you can find this option under Settings -> Applications -> Development. On Android 4.0 and newer, it’s in Settings -> Developer options. Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings -> About phone and tap Build number seven times. Return to the previous screen to find Developer options, including USB Debugging.
5. Connect your computer and device, and authenticate if necessary. Connect your Android device to the computer using the USB cable – be sure that the device connects as a “mass storage device” (not “media device”) and that it is not mounted as a drive on your computer. This may mean that you have to go to the Finder (on a Mac) or My Computer (on Windows) and disconnect any drive(s) that were mounted when you connected your Android device. On Android 4.2.2 and newer, your device will pop up a screen with the message Allow USB Debugging? the first time you connect it to new computer. Press OK. This authenticates the computer to the device, allowing the computer to communicate with it. You’ll need to do this for each computer you want to connect to the device, but only once per computer.
6. Test the connection. Go to this Connection Test Page (opens in a new tab in your browser) and see if you get a confirmation that your computer can detect the device. If the test fails, go to General Connection Help and look at the USB help for your computer (Windows or Mac). You won’t be able to use App Inventor with the USB cable until you resolve the connection issues.
How can I control Arduino with MIT APP Inventor 2?
To establish a connection between the Arduino and your Android app, you need a Bluetooth communication protocol. For that, you need a Bluetooth module. The most common Bluetooth modules used with the Arduino are the HC‑05, HC-04 and HC-06.
The Bluetooth module works with serial data. The Arduino sends information and the Bluetooth module receives it via serial (and vice-versa). Your smartphone sends information to the Bluetooth module via Bluetooth, the Bluetooth module sends the information via serial communication to the Arduino. The Arduino sends information to the Bluetooth module that sends it to your smartphone via Bluetooth.
MIT APP Inventor 2 overview
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start new project and give your project a name. As we’re just exploring the MIT App Inventor 2, you can name it as newproject. Click on OK button. Your project will be saved.
3.If you go to Projects -> My Projects you can see all your saved projects.
4.Click on the project name to open the MIT APP builder.
You can swap between the Designer and Blocks editor tabs (1). The Designer editor tab gives you the ability to add buttons, add text, add screens and edit the overall app look. The Blocks editor tab allows you to create custom functionality for your app, so when you press the buttons it actually does something with that event.
(2) The Palette contains the components to build the app design – buttons, sliders, images, labels, and so on…
(3) The Viewer. This is where you drag the components to build the app look.
(4) The Components. You can see all the components added to your app and how they are organized hierarchically.
(5) The Properties. This is where you select your components’ properties like color, size and orientation.
Go to the Blocks editor tab.
In the Blocks editor tab, you will see several sections:
(1) contains the built-in blocks for creating the app’s logic. This is what makes the app define the buttons functionalities, send commands to Arduino, connect to the Bluetooth module, etc. You have several blocks grouped by categories:
- Control: if/else statements, while loops, and so on…
- Logic: True, False, equal, not equal, and so on…
- Math: math operators.
- Text: blocks that deal with text.
- Lists: blocks for handling lists.
- Colors: blocks to handle colors, like choosing a color, make color and split colors.
- Variables: initialize variables, setting variables values, get variables values, etc…
- Procedures: procedures are like functions. A procedure is a sequence of code blocks with a given name. You can call that sequence of blocks later instead of creating the same long sequence.
Inside each group, you have blocks that you can drag to the Viewer (2). In the Viewer, you drag the blocks and join them in a specific way to make something happen.
Go to blocks section and explore what’s inside. The blocks look like puzzle pieces that fit into each other or not. If you can’t do something with certain blocks, they won’t fit.
In the backpack (3) you save code blocks to use later. You move blocks to the recycle bin (4) to delete them.
Download and use a Source Code (.aia)
If you’d like to work with project files in MIT App Inventor 2, download the source code (files with .aia on the end) to your PC, then open MIT App Inventor 2, click Projects, choose Import project (.aia) from my computer…, and select the source code (.aia) you just downloaded.
That was just an introduction to the MIT App Inventor 2. Let’s start to build apps now!
- Built-in Blocks Documentation
- Component Documentation
- Using App Inventor Templates and Creating App Inventor Template Repositories