Creating Android App for Bolt using MIT app inventor

MIT App Inventor
Let’s get started with building our own Android App to control and monitor IoT enabled devices!

MIT App Inventor is an innovative beginner's introduction to programming and app creation that transforms the complex language of text-based coding into visual, drag-and-drop building blocks. The simple graphical interface grants even an inexperienced novice the ability to create a basic, fully functional app within an hour or less.

We will build an APP to control LED and get data for Analogue Sensor.

Step 1: Setting up App Inventor

You can set up App Inventor and start building apps in minutes. The Designer and Blocks Editor run completely in the browser (aka the cloud) .

Visit site here to get started.  

Step 2: 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 the following option for setting up live testing while you build apps

Step 2.1 You will need to install the App Inventor Companion App on your device. Choose Option One below. 

Setup an Android Device

You will need a computer, an Android device, and a Wi-Fi connection, this is the easiest way to test your apps.


Instructions

Connect your Phone or Tablet over Wi-Fi

To do live testing on your Android device just install the MIT App Inventor Companion app on your Android phone or tablet.  Once the Companion is installed, you can open projects in App Inventor on the web, open the companion on your device and you can test your apps as you build them:

Note: You will have Sign In to your Gmail account to access the MIT APP INVENTOR Website. 

Download and install the Companion App from the Play Store. If you can't use the Play Store, use the QR code on the right to download the Companion App directly to your phone.

Play Store

Recommended: Automatic updates

APK File

Manual updates required



Scan this QR code (or click this link)
to get the app from the Play Store

Scan this QR code (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.

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 the INSTALL button for the Companion app.

Recommended : Connect both your computer and your device to the SAME Wi-Fi Network

App Inventor will automatically show you the app you are building, but only if the computer (running the App Inventor) and your Android device (running the Companion) are connected to the same Wi-Fi Network.

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

Step 3.1 Go to App Inventor and open a project (or create a new one -- use Project > Start New Project and give your project a name).

Step 3.2 Then Choose "Connect" and "AI Companion" from the top menu in the AI2 browser:


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”. 

Troubleshooting:

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 Wi-Fi. Make sure you see an IP address at the bottom of the AICompanion App screen on your phone or tablet.
  • Your device may not be connected to the same Wi-Fi network as your computer. Make sure both devices are connected to the same Wi-Fi network name.

LED Control and Analogue Data App

Building your first app: Bolt App
Bolt App: Tap the LED or Analogue Buttons, To Control an LED or To Get Analogue Data.


Now that you've set up your computer and device, you are ready to build the Bolt app. At this point, you should have the Designer or Blocks Editor open in your browser, and either an Android device

Bolt App is a simple app that you can build in a very short time. To create a button Select components to design your app


The App Inventor Components are located on the left hand side of the Designer Window under the title Palette. Components are the basic elements you use to make apps on the Android phone. They're like the ingredients in a recipe. Some components are very simple, like a Label component, which just shows text on the screen, or a Button component (#1 left) that you tap to initiate an action.

To use a component in your app, you need to click and drag it onto the viewer in the middle of the Designer. When you add a component to the Viewer (#1 below), it will also appear in the components list on the right hand side of the Viewer.

Components (#2 below) have properties that can be adjusted to change the way the component appears or behaves within the app. To view and change the properties of a component (#3 below), you must first select the desired component in your list of components.


Steps for selecting components and setting properties

Bolt App will have three Button components namely LED ON, LED OFF and Analogue Data.

Creating the Buttons.

Step 1. From the User Interface palette, drag and drop the Button component to Screen1.

Step 1.1.To name the button, Properties pane, under Text, Type the “LED ON”. And you can also change the size and position of the Button. Under Height and Width option you can change the size and position of the Button.Height and Width properties of the button to "Fill Parent". To do this, click on the Button component, go to the right-hand Properties pane, scroll down to the very bottom to where it says Width and click on the word "Automatic..." to activate the drop down list. Choose "Fill Parent". Do the same for the Height property.

Similarly, Create Two more Buttons with name LED OFF and Analogue Data.

Step 2: Creating Web Component

Step 2.1: Click on Connectivity under the Palette. Select Web and drag it to screen and drop it. Since Web is hidden component it won’t appear on the screen but it will in the backend. Now you will be seeing web option in the components column.


Step 3: Creating the Label.

Step 3.1 From the User Interface palette, drag and drop the Label component to the Viewer, placing it below the analogue data button. It will appear under your list of components as Label1.

Step 3.2 Under the Properties pane, change the Text property of Label1 to read "Analogue Data Value". You'll see the text change in the Designer and on your device. Change the FontSize of Label1 to 30. Change the BackgroundColor of Label1 by clicking on the box : you can change it to any color you like. Change the TextColor of Label 1  to any color you like. 


Now, we are done with designing the App. Let’s program the App by building the blocks.

Programming with the Blocks Editor

So far you have been arranging your app's screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks Editor. Click the Blocks button to go to the Blocks Editor.


Once you have the Blocks Editor in front of you, continue to the next step to start programming your app with blocks.

Controlling the LED

Step 1. On the left side of the Blocks Editor, click the Button1 drawer to open it. Drag and drop the Button1.Click block in the work area (the open area on the right).

 

Those mustard yellow blocks are called event handler blocks. The event handler blocks specify how the phone should respond to certain events: a button has been pressed, the phone is being shaken, the user is dragging her finger over a canvas, etc. The event handler blocks are mustard yellow in color and use the word when. For example, when Button1.Click is an event handler

Step 2. Click the Web1 drawer and drag the Web1.set URL block and connect it to the "do" section of the when Button1. Click block. The blocks connect together like puzzle pieces and you can hear a clicking sound when they connect.


The green blocks are called expression blocks, which are placed in the body of event handlers. When an event handler is executed, it sets the parameters for the commands in its body which will follow. A command is a block that specifies an action to be performed (e.g., playing sound) when the event (e.g., pressing Button1) is triggered.

Step 3: Click the Web1.Get drawer and drag the block and connect it to the "set" section of the when Web1.set URL block. The blocks connect together like puzzle pieces and you can hear a clicking sound when they connect


The purple blocks are called command blocks, which are placed in the body of event handlers. When an event handler is executed, it runs the sequence of commands in its body. A command is a block that specifies an action to be performed (e.g., playing sound) when the event (e.g., pressing Button1) is triggered.

Step 4: Click on the  and drag the  block and connect it to the “set” section of the Web1.Url to black.

This block will be used to set the value of the URL as seen in the next step

Step 5: Type the URL in the pink box 'http://cloud.boltiot.com/remote/YourDeviceApi/WriteyourCommand &deviceName=BOLTxxxxxxx’

URL Explanation:

  • YourDeviceAPI- This is API key which you have generated while doing normal operations with Bolt API. This is different for every user.
  • BOLTxxxxxxx - This is your device name which is different for every user.
  • WriteyourCommand –Replace with To turn on the LED - “digitalWrite?pin=0&state=HIGH”

Your blocks should look like this at this point for the LED ON Button.


Follow the same steps 1 to 4 for the LED OFF Button.

Step 5: Type the URL in the pink box to turn off the LED'http://cloud.boltiot.com/remote//WriteyourCommand&deviceName=BOLTxxxxxxx’

URL Explanation:

  • YourDeviceAPI- This is API key which you have generated while doing normal operations with Bolt API. This is different for every user.
  • BOLTxxxxxxx - This is your device name which is different for every user.
  • WriteyourCommand –Replace with To turn off the LED - “digitalWrite?pin=0&state=LOW”

Your blocks should look like this at this point for the LED OFF Button


Now you can see that the command block is in the event handler. This set of blocks means; "when Button1 is clicked,it will first set the URL for Web 1 and then call the Web1.Get which is set to run your URL which in turn glows your LED ON/OFF." The event handler is like a category of action (e.g., a button is being clicked), and the command specifies the type of action and the details of the action (e.g., to run the URL).

Step 6: For Reading analog Sensor data we need to Repeat Step 1-4 above but with the difference in the set URL being as below

  • WriteyourCommand –Replace with To turn off the LED - “analogRead?pin=A0”

Final Step:
Displaying the data sent back by Bolt

Step 1.1 From the Web1 Component Drag and drop the When Web1.gotText event as highlighted below



Step 1.2 To this event Block attach the set box from the Label1.Text component as highlighted below



Step 1.3 Once you have clicked this Box with the Web1.gotText Event scroll your mouse above the label responseContent on the Web1.gotText event Box.
Step 1.3.1 This will give you option to select two actions as shown below.



Step 1.3.2 Select get responseContent Box and attach it to the set Label1.Text box from the previous step

The Final App Code Blocks should look like the Image shown below.


You can read more about the blocks and how they work here: Understanding Blocks in App Inventor 2.

Try It! When you click the LED ON/OFF Your LED should glow and you will be able to display the output on the Label1 of your App. As well as analog reading from pin A0.

Congratulations, your first app is running! 

Packaging your app

While your device (emulator or phone/tablet) has been connected to App Inventor, your app has been running in real time on your device. If you disconnect the emulator/phone/tablet from the Blocks Editor, the app will vanish. You can always make it return by reconnecting the device. To have an app running without being connected to App Inventor, you must "package" the app to produce an application package (apk file).

To "package" the app to your phone or to send to someone else, click the Build tab at the top of the screen. Under Build, here are two options available for you to choose from:


1. App (provide QR code): You can generate a Barcode (a QR Code), which you can use to install the app on a phone or tablet that has a camera, with the aid of a barcode scanner, like the ZXing barcode scanner (freely available in Google Play).

Note: this barcode works only for your own device because it is associated with your google account. If you want to share your app with others via barcode, you'll need to download the .apk file to your computer and use third-party software to convert the file into a barcode. More information can be found here.

2. App (save to my computer): You can download the app to your computer as an apk file, which you can distribute and share as you like by manually installing it on other devices. (Sometimes called "side loading").

Done!

Review

Here are the key ideas covered so far:

  • You build apps by selecting components (ingredients) and then telling them what to do and when to do it.
  • You use the Designer to select components and set each component's properties. Some components are visible and some aren't.
  • You can add media (sounds and images) to apps by uploading them from your computer.
  • You use the Blocks Editor to assemble blocks that define the components' behaviour
  • when ... do ... blocks define event handlers, that tell components what to do when something happens.
  • call ... blocks tell components to do things.