MIT app inventor is a platform developed to help you expand your ideas into mobile applications that can be used throughout various devices. Arduino, as you most probably have heard of is mainly used to develop and implement many projects. When you put together the ease of the MIT app inventor and the adaptability and popularity of Arduino – the possibilities are endless! So, whether you already have an idea, or are yet to find inspiration go ahead and read further. In this article we’ll discuss what the MIT app inventor is, and what it can do. We’ll also build our first project integrating the app inventor with the Arduino board and an LED.

 What is MIT app inventor?

MIT App Inventor is a visual programming environment to build applications, in as less as 15-20 minutes. They have block-based tools that enable even children to create complex, high-impact app when they don’t have the traditional coding skills the application may require. You can develop applications for Android phones using a web browser with a phone or emulator. The App Inventor servers store your work and help you keep track of your projects.

The apps can be built using:

App Inventor Designer, to select its components.

App Inventor Blocks Editor, to assemble blocks of the program that determine how the components will behave. This is done by visually fitting pieces together.

Building your first project:

Akin to ‘Hello, world’ of computer programming, enabling blinking of an LED light qualifies as the first stepping stone to learning how to code new hardware. So, our first project is going to be just that!

First we have to setup the Arduino with the App Inventor app

Step 1:  Download and Install the IDE

If you haven’t already, install the Arduino Integrated Development Environment (IDE). If you already have it up and running, great! Open the AIM-for-Things-Arduino101.ino file, which is the Arduino file for App Inventor. If you don’t have that, download it here.

Step 2: Install Libraries

Next we’re going to install some libraries to run Arduino with App Inventor. You might not require all of these for simpler projects, but will come in handy later. To do this, click on the Sketch dropdown menu, hover over Include Library, and select Manage Libraries.

In the window that opens, search for ‘DHT-sensor-library’ and click Install. Then, repeat the process for “Adafruit Unified Sensor”. To get the Grove LCD RGB Backlight working, you first need to download the library file. After downloading, click on Sketch, then Include Library.  Unlike last time, now click on Add .ZIP Library. Find the file and upload it.

Step 3: Select Board

If you hadn’t until now, plug your Arduino into your computer

Next, you can select the correct Arduino board:

Click on the Tools menu and go to the Board sub-menu to select your board. (if you cannot find it, go to Boards Manager and search for your board version.

Step 4: Select port

Select the port that the Arduino IDE will interact with the Arduino.

Under the Tools menu, select the “Port” sub-menu and selct the option that starts with

○ /dev/cu.usbmodem… (for MAC) or ○ COM… (For others)

Now to run AIM-for-Things-Arduino101, the Arduino program we first opened, we need to send it to the board. But before doing this, change the DISABLED against LED to ENABLED. Then, click on the arrow button in the top left corner of the program window.

Once you have sent pressed the arrow, and sent the code to the Arduino board, your App Inventor app can interact with the Arduino.

Now let’s start to use this for our first project!

Step 5: Basic screen layout

Open the app inventor window, and click on Start a new project and specify a name. The left side column, called Palette contains several options that we can use to build our project. The buttons we require for this project are Bluetooth(to select and connect to the device), on and off. Now, to create these buttons.

1. The Bluetooth select button, will allow us to pick the device from the list of devices connected to our phone. So we choose the ListPicker option, and drag and drop it onto the screen. And on the properties tab, on the right – change the width – fill parent. You can also change the text on the button to Bluetooth, or whatever name you want to give the button. You can also drag and drop Label from the Palette to below the Bluetooth button. This will indicate whether the device is connected or not. For the label, change the width – fill parent and delete the text to leave the label empty.
2. Before the next two buttons, open the Layout on the Palette and choose the Horizontal Layout, with width à fill parent. Now you can go back to the User Interface and drag and drop two buttons onto the horizontal layout with the text set to – ‘On’ and ‘Off’ respectively and set their widths to fill parent as well.

With these buttons you can feel free to play with the other buttons to customise and colour them or add images within the buttons as well.

Step 6: Connect to the Bluetooth

Scroll down in the Palette to find the Connectivity tab, open that and drag and drop BluetoothClient onto the screen

Step 7: Add the clock trigger

On the palette find the Sensors tab, open it and drag and drop a clock onto the screen as well.

Step 8: Programming the app using Blocks

To do this, click on Blocks on the right upper corner of the window. Using this interface, we will join the functions like puzzle pieces to get the desired output. Which in our case is, the LED control when the Arduino is connected to the app. First, we have to program the app for before picking the device. To do this click on the ListPicker1, under Screen1 on the left-hand side Blocks tab.

This will display various blocks. Drag and drop the ‘when ListPicker1 BeforePicking do’ to the screen. Again click on the ListPicker1 option and select ‘set ListPicker1 Elements to’ and place it within the first block. Then pick the ‘BluetoothClient1 AddressesandNames’ from the BluetoothClient option.

What this will do is, before you pick the device, the List Picker will display its elements as the connected Bluetooth devices.

Step 9: After picking the device

Next we will form the flow of action After Picking. For this again open the ListPicker1 tab and drag and drop the ‘when ListPicker1 AfterPicking do’ to the screen. Then, click control and choose the ‘if then’ box and place within the first one. Click on the BluetoothClient option and select ‘call BlueToothClient1 Connect address’ block to place against the ‘if’ of the previous block. Under ListPicker1 option and select ‘ListPicker1 Elements’ click on ‘Elements’ and replace it with selection from the drop down menu.

Right click within the Before picking to select duplicate and place the same blocks within the ‘then’ block.

Step 10: Add clock

From Clock1 in the Blocks pane, add when Clock1.Timer do to the viewer. Like before, click control and choose the ‘if then’ box and place within the first one. Then pick the ‘BluetoothClient1 AddressesandNames’, change AddressesandNamesto IsConnected and place it near if. Now, if connected we want the label to display connected. For this, click Label and drag and drop ‘set Label1 text To’ near then. From the Text option, pick the empty text option, drop it near the set Label1 text To and type Connected in the space provided.

To display ‘Not connected’ when Bluetooth device is not connected, click the small blue box near ‘if’ on the ‘if then’ box and drag and drop ‘else’

For the else, duplicate the then blocks and change ‘Connected’ to ‘Not Connected’.

Step 11: Buttons

From Button1 on the Palette, drag and drop the ‘when Button1 Click do’ block, and from Button2, drag and drop the ‘when Button2 Click do’ block. When Button1 is clicked, we want the app to send an ‘on’ and ‘off’ when Button2 is clicked. Click the BluetoothClient, and scroll down to find ‘call BluetoothClient  SendText text’, then from the text options, select the empty one, drag and drop and rename as on. Repeat the same for Button2 and rename the text as off.

And that concluds the program!

Step 12: Save App

From Build option on top, select the App (save. Apk to my computer)

Once you’ve saved it to your computer, download and install the app on your android phone.

Step 13: Hardware connection

This is the Bluetooth connected Arduino. Make sure to note the connection of TXD pin to the 10^th, and RXD to the 11^th. Even though by norm it is connected to the 1^st and 2^nd pins on the board, here we also want the computer monitor to be connected to see the on and off texts from the BluetoothClient. The LED is connected to the 13^th pin.

We will now look at the code we need for this, in which we will use software serial to interface with Bluetooth.

Initial setup, with two different communications, one is with monitor and the other with Bluetooth.

#include <softwareserial.h>
SoftwareSerial BT(10, 11); //TX, RX respectively
String state;// string to store incoming message from bluetooth
void setup() {
 BT.begin(9600);// bluetooth serial communication will happen on pin 10 and 11
 Serial.begin(9600); // serial communication to check the data on serial monitor
  pinMode(13, OUTPUT); // LED connected to 13th pin
}

The main program, tells the Arduino to check any incoming message. If there is a message it builds the string from the incoming and checks whether its On or Off. The building is needed since it is serial communication – the message comes letter by letter. If on the 13^th pin will be HIGH and LED will turn on.

void loop() {
  while (BT.available()){  //Check if there is an available byte to read
  delay(10); //Delay added to make thing stable 
  char c = BT.read(); //Conduct a serial read
  state += c; //build the string- either "on" or "off"
  }  
  if (state.length() > 0) {
    Serial.println(state); 

  if(state == "on") 
  {
    digitalWrite(13, HIGH);
     } 
  
  else if(state == "off") 
  {
    digitalWrite(13, LOW);
     }
  
state ="";}} //Reset the variable
</softwareserial.h>

Step 14: Run the program

Now you are all set to run the program, connect everything and from the MIT inventor go to Connect à AI companion.

From the app on your phone you should be able to control the LED on and off!