Make A Phone App | MindPlus Coding Kit for Arduino Started Tutorial E21

Everyone we use a variety of apps on our phones. These apps are developed by various companies and individuals for us to use immediately. Therefore, all the features and interfaces are designed by other people. Sometimes we would want some custom interfaces and features, but as it requires a lot to develop an app, we often struggle to implement what we have in mid.

Now we can use APP Inventor to implement our ideas. In the first section, we learned the configuration method of the BLE Bluetooth module. Next, we will learn how to design and make a mobile app to work with the BLE Bluetooth module.

Task Navigation

1. Learn how to use APP Inventor

Key Points Analysis

What is app Inventor?

App Inventor is a mobile app development and programming software launched by Google. You can use graphical programming to design and make mobile apps. App Inventor is an Android programming environment developed entirely online. It has no complicated codes but features building blocks for Android program development.

Hands-On

App production

1. Interface design

1) First open the appinventor web page: ( http://www.appinventor.mit.edu/ )

You can register your own account or log in.

2) On the first log in, you will have to agree to Terms of Service. Read through the Terms of Service and click accept.

3) Click " New Project " on the interface after login.

4) Fill in the project name in the pop-up window and click confirm.

5) The newly created project interface is shown in the figure.

· Component panel: contains a lot of functional components, which can be dragged into the working panel when needed. A component is display, interaction, or actions on the interface. It also plays an important role in the subsequent logic design.

· Working panel : simulates app display interface and adds components. You can arrange different components in different layout and decorations according to your needs.

· Component list : shows the components we have placed in the working panel. By clicking it you can edit, rename, and delete the component in the corresponding component properties.

· Component properties : the properties of the component, such as color, shape, text, image, function, etc. You can edit the corresponding component properties for the components placed in the work panel. The editable parts of different components may vary.

6) Find the interface layout component. The layout component can divide display function zones. Drag the two Horizontal Layout components into the working panel one after the other.

7) Change the width properties of both Horizontal Layout components to Fill.

8) Drag three " button " components to the work panel.

9) Click " Button 1 " in the component list. In the component properties, you can modify the text content displayed on the button in the interface (at the bottom of the page).

10) Change the display text of " Button 1/2/3 " to "Connect Bluno", "Hello", and "World", as shown in the figure.

11) Rename " Button 1/2/3 " in the component list. Select " Button 1 " and click " Rename ". In the pop-up window, type in "Connect and Disconnect Bluetooth" and click Confirm.

(The reason we rename buttons here is to make it clear what each button does when we design logic later. If we leave them as Button 1/2/3, once the project becomes complicated and more components are added, it would be difficult to keep track of functions of the buttons.)

12) Change the names of Button 2 and Button 3 to "Send Signal 1" and "Send Signal 2".

13) Add a "list selection box”, by dragging it into the working panel that lists Bluetooth devices available for connection currently during a search.

14) Modify the properties of the list selection box and uncheck the "Visibility" of the list selection box (at the bottom of the properties).

15) Add the BLE Bluetooth plug-in (> Click here to download < Download edu.mit.appinventor.ble.BluetoothLE.aix). Click Import to confirm loading BLE Bluetooth Plugin.

16) Drag the BLE Bluetooth component (BluetoothLE), timer component, Activity launcher to the working panel.

We can now see that after adding the module, " non-visual components" appears on the interface. And three modules we added this time are all under the non-visual components. Let's have a look at what the "visual components" and "non-visual components" are.

Visual components are the components that we can see after the application is launched, such as buttons, text, and labels. These components together make the user interface of our application.

Non-visual components are not visible after the application is launched, so they are not part of the user interface. They are usually used to access the built-in functions of the device. For example: Bluetooth components are used to connect to Bluetooth to send and receive data; timers are used to record specified durations, and the proximity sensor is used to determine the position of the device, etc. Non-visual components provide functional building blocks for app’s logic design.

17) Change the timer interval of " Timer 1 " to "500ms" and uncheck the "Enable timing" option.

18) Set the component properties of the Activity launcher and add: "android.bluetooth.adapter.action.REQUEST_ENABLE" in the Action to turn on the phone's Bluetooth

2. Logic design

Upon finishing with interface of the app, we need to design modules and internal logics of the app. Click the logic design in the upper right corner of the interface to switch the interface.

1) Switch to the logical design interface. The logical design interface consists of three parts: modules, working panels, and materials.

Modules: The modules contain built-in blocks (general modules, similar to the module when no extension is added in Mind+) and the components we added during component design. You can edit the specific function on which you would like to control.

Working panel: you can drag and drop functional modules from the modules list into the working panel for combination and editing, etc.

Materials: add image materials can be used according to the content of the design. (This feature is not used in this section)

Click on the module and we will find that App Inventor’s modules are similar to the ones in Mind+. They are also used in the similar way. However, the biggest difference is that: in Mind+, we usually have only one program at the same time. It goes linear and from top to bottom. However, in App Inventor, there will be many groups programs. There will be a separate group for defining different functions and commands.

2) Since the communication with the BLE Bluetooth module requires an address, two global text variables need to be initialized:

Right-click -- copy the code block to have one extra copy of the above combined modules.

3) Next, define the variable, and change the "variable name" to "ble_service_uuid " as the address of the Bluetooth service, which is defined by the BLE Bluetooth module firmware and cannot be modified. Lock the text to " 0000dfb0-0000-1000-8000-00805f9b34fb "
Change "Variable name 2" to "ble_characteristic_uuid" as the device communication address, which is defined by the BLE Bluetooth module firmware and cannot be modified. Lock the text to "0000dfb1-0000-1000-8000-00805f9b34fb "

4) Next, at the beginning of the program, use the launcher to turn on Bluetooth to obtain the permission to scan for surrounding Bluetooth devices.

Complete program example:

5) Check whether Bluetooth is connected. Define “connect/disconnect Bluetooth” button’s status change. Why start the timer? Checking for Bluetooth data every 500ms will prevent the program check too frequently and cause phone to be not responding.

1) After Bluetooth is turned on, you need to open the device list for the user’s selection.

First, find if-then module in control options. Add else, if in if-then module.

Click on the gear icon on top left of if-then module, and drag else, if into if box on the right side.

Complete program example:

When the button is clicked, check text inside the button. If the text in the button is "Connect Bluno", execute:

1. Stop searching for Bluetooth devices (In the previous procedure, the search for Bluetooth devices started after the screen was initialized. Therefor, in this step, stop searching for Bluetooth first, so that the list can show the Bluetooth devices that were found when the button was pressed.)；

2. Match the contents of the list with the list of devices searched by Bluetooth;

3. Open the list and show contents. (At this time, you can select the Bluetooth device to be connected. The selected function is described in the next step. )

If the text in the button is "Disconnect Bluno", execute:

Disconnect the connected Bluetooth. (If the text shows "Disconnect Bluno", it means that the mobile phone and Bluetooth are connected at this time. The text conversion process will be reflected in the next few steps. )

7) When the user clicks on the list and selects a device, we should connect the device. Connect the selected Bluetooth device, which is the selected option.

8) After establishing the Bluetooth connection, we need to start the data transmission between phone and BLE Bluetooth module. In this section, we are mainly sending data to BLE Bluetooth module via a phone. All the data sent can be checked at serial port data in Mind+.

Set up a definition process to send data.

Set the process name as "send", click the gear button in the upper left corner of the "define process" block, add "input: X" and change the input to "input: data "

When a connected Bluetooth is found, stop the timer first then send the data.

After the data is sent, the timer is re-enabled.

Complete program example:

9) When the "Send Signal 1" button is clicked, send "Hello." And when the "Send Signal 2" button is clicked, Send "World. ". A comma is used to mark the end of the sent data for the BLE Bluetooth module to parse the data. (The content of the data sent can be modified as needed. )

Complete program example:

10) After the design of the program is complete, we can export the .apk format file and install it on an Android phone.

At the top of the page, there is a "package apk" option, in which there are two methods: you can scan the QR code by phone to download directly to the phone for installation; or you can download the apk file to the computer, and install it by sending the app from computer to the phone via a cable.

11) After the installation is complete, we can see the app we designed on the mobile interface.

3. Program operation:

Connect phone to the computer with a data cable and start Mind+.

Upload a program that reads the serial port data to the main control board. Pay attention the dial has to be on "PROG" option when uploading. After the upload is complete, return the dial to "RUN".

Example program:

Open the serial port and set the baudrate to 115200.

Open the mobile app and select "Connect Bluno", find the BLE Bluetooth module (BLE001, the name you set in the previous section, customizable), wait for the button text to display "Disconnect Bluno" (means the connection is successful), click the buttons "Hello" and "World".

Mind+ serial interface:

Mind+ serial interface:

4. Program’s effect:

Click the Hello button, the string "Hello." is received in the serial data in Mind+, and click the World button, and the string "World." is received in the serial data.

Further Reading

The role of the timer

As we know that the Bluetooth module is not limited to receiving data, but can capable of sending data (detailed in the next section). The timer is mainly used in the program to scan whether Bluetooth data is received. If yes, read the data and process it (we just have to display them in the app). When the timer goes off, check Bluetooth connection status and receives Bluetooth data if connected. We set the timer to 500ms. Therefore, every 500ms there is a check on if any data is received. If the data is too small, it will cause packet loss in the transmitted data, thus a 500ms timer is set.

BLE Bluetooth module pins

The most important modules in Bluetooth usasge are RX and TX, besides 3.3V and GND.

TX means “transport”, and RX means “receive”. It can also be understood as upload (TX) and download (RX). They are the pins used when BLE Bluetooth module receives and sends data. In this example, our BLE Bluetooth module can be directly plugged onto the pins of the extension board, so we didn’t have to find the pins. If we don’t have an extension board or are using other kinds of Bluetooth module, we will have to wire by ourselves.

When the Bluetooth module is connected to the main control, we need to connect the TX (transmit) of Bluetooth to the RX (receive) on the main control board, and connect the RX (receive) of Bluetooth to the TX (send) of the main control board.

This is the reason why we don’t usually use P0 (RX) and P1 (TX) pins on Arduino. They are multiplexed pins, which can be general pins or hard serial port pins and will affect program’s uploading and downloading, as well as reading of the ports.