6. Chapter 3: Direct Control micro:bit by App Inventor 2

6.1. Introduction

App inventor 2 is a blocks-based programming tool, which help beginners to build fully functional app in Android or IOS device. The interface is graphical base and support drag and drop operations. It consists of different components, such as button, slider, date pickers, image, camera, sensors including Accelerometer and connectivity to web, etc. The app can be exported or published to Play store for our daily life.

auto_fit

For creating IoT application, you can use App Inventor 2 to create web connection with micro:bit. In WAN control, after micro:bit is connected to internet, it keep listening and execute customized operation when WAN command is received. The customized operation could be Pin On/off, such as “open/close LED”, or set value such as “set the light intensity” and “set current time”.

auto_fit

6.2. Know the API (control command)

What is API? API is one way to communicate between the objects in the Internet world. API is just like an “URL” which is website link.

In App inventor, we use “API” to communicate with micro:bit. Normally, we need to know the (1) device ID (2) the message need to be sent to the micro:bit and optionally (3) value if needed.

auto_fit

(1) Basic API:

https://control.smarthon.cc/publish?id=DeviceID&msg=ControlCommand

id: The unique ID of device, used to identify the target .
msg: The command needs to send.

Example: “https://control.smarthon.cc/publish?id=0x123456781&msg=lighton”. In this case, we send the msg command “lighton” to device id “0x123456781”.

(2) Advanced API:

https://control.smarthon.cc/publish?id=DeviceID&msg=ControlCommand&value=Value

id: The unique ID of device, used to identify the target .
msg: The command needs to send.
value(optional): Used when need for the command.

Example: “https://control.smarthon.cc/publish?id=0x123456781&msg=lighton&value=500” . In this case, we send the msg command “lighton” with intensity value “500” to device id “0x123456781”.

6.3. Scenario Example

Goal:

This example is to turn on/off micro:bit LED by using app inventor 2.

Description:

In this example, there are 2 parts involved.

  • In part 1, we need to connect the micro:bit to the internet and get the device ID.

  • In part 2, design the mobile app and set the API with the device ID from part 1.

auto_fit

6.4. Part 1: Coding

Goal:

We need to get the Device ID and set the corresponding action.

Connection Diagram:

  • Connect LED to P0

auto_fit

Pull the buzzer switch ‘up’ to disconnect the buzzer in this execrise

Step 1: Connect WiFI

Before we try to use WiFi Control function, we need to connect to the network, we have already know how to connect to the WiFi on the first chapter.

auto_fit

Step 2: Get Device ID

On WiFi connected is an event handler. It will be triggered once after connected with WiFi. The handler will provide the Device ID variable which used to identify and control the Microbit.

  • Go to OLED Tab

  • Snap initialize OLED with width…height.. to on start

  • Snap the show string inside the On WiFi connected

  • Draw the Device ID variable from On WiFi connected to the show tring block placeholder

auto_fit

*If you worried about forget the Device ID during program running, you may access it by the variable under Control tab

  • Go to Control tab

  • Snap the Device ID variable to the placeholder

auto_fit

Step 3: Control with Command

After connected to the WiFI, the connection to the server will be done automatically, it is ready to receive command though network. To get the command, we can use the on Wi-Fi received handler in WAN control tab.

  • Snap the on WiFi received handler to stage

  • Do the if-condition statement to the variable WAN_Command

  • If Wan_command “Pin_On” is received, white LED will be turned on (intensity:1023)

  • If Wan_command “Pin_Off” is received, white LED will be turned off (intensity:0)

Attention: Please be aware that the P is in capital letter.

auto_fit

Step 4: Show the Command

Sometimes you may need to show the recevied command for debugging, so if you need that, you can use the OLED show string to display the command on the OLED.

  • Go to OLED

  • Snap the clear OLED display to On WiFi received to avoid overlap

  • Snap the show string to On WiFi received

  • Draw the WAN_Command variable to show string placeholder

auto_fit

Advanced Usage: Command with value

If you want to control the module with value, you can use the another block which contain value variable.
If Wan command “PinValue” is received, white LED will be turned on with the given intensity value.
You may also show the WAN_Command and value by show string.

auto_fit

Full Solution

MakeCode: https://makecode.microbit.org/S66787-19640-36880-02841

You could also download the program from the following website:

6.5. Part 2: App Inventor 2 configuration

Goal:

We need to create mobile app to control the IoT:bit by using API.

Step 1: Create Layout

Create a new project in App Inventor 2, on “Designer”

  • Drag “Layout”>”HorizontalArragement” to the page.

  • Drag “User Interface” > “Button” twice to the place inside the HorizontalArrangement

  • Drag Connectivity> “Web” to the page auto_fit

Step 2: Define Function

Set the program in app inventor 2, on “Blocks”

  • Take the block as below auto_fit

  • When Button 1 and 2 is pressed, it calls the WAN control API respectively http://control.smarthon.cc/publish?id=DeviceID&msg=ControlCommand

auto_fit

Advanced Usage: Control with value

If you want to control the module with value, you can create in textbox with the button let the user to input the value.

Layout:
auto_fit

Programming:

When Button 3 is pressed, it calls the WAN control API respectively http://control.smarthon.cc/publish?id=0xfa240ac45917&msg=PinValue&value=600

auto_fit

Step 3: Build the apps

Build and test the mobile app.
In App Inventor 2, you can perform real-time testing in your mobile phone by AI Companion

auto_fit

Also, you can also build and download the android app and open it in your mobile phone.

auto_fit

6.6. Result

After the WiFI Connected, the Device ID will show

auto_fit

Normal Case:
When Button1 is clicked, it will send WAN command “Pin_On” to the micro:bit with provided Device ID, the LED on P0 will be turned on. When button 2 is clicked, the LED will be turned off.

auto_fit

Control the value(advanced):
When the button 3 is pressed with the intensity of 0 or 600, it will be turned on accordingly.

auto_fit