Building a Mobile-based Device Control Block

This tutorial explains the steps involved in building a Mobile App-based Device Control Block to control the operation of a Buzzer Block in the Temperature & Fire Monitoring & Alerting Tinker Block Application. You will specifically learn how to remotely control an actuator device from a mobile app screen.  

Before building Mobile-based Device Control Block, please make sure to build:

1. Buzzer Block, Processor Block and Power Block

2. IoT-based Server Block 

3. IoT-based Device Control Block

4. Device Integration Block 

1. Go to MIT App Inventor and click to "Create Apps".  Sign-in with your Google Account.

2. Once you sign-in, click on "New project" to create one and give it a name such as "Buzzer Control App".

3. Once the new project is created, drag and drop a "Label" user interface element into the blank mobile screen.  Re-name the label as "BuzzerControlLabel".  Change the label's Text property to "Buzzer Control: ".

4. Next, drag and drop a "List Picker" user interface element into the screen.  Re-name the text-box as "BuzzerCommandsList" and change it's Text property to "Select a command from the list...".  Add "TURN_ON, TURN_OFF" in the ElementsFromString property.  In addition, increase the Width property of the List Picker to "Parent".

5. Next, drag and drop a "Label" user interface element into the screen.  Re-name the label as "BuzzerCommandSelected".

6. Next, drag and drop a "Button" user interface element into the mobile screen.  Re-name the button as "BuzzerControlBotton".  Change the Text property of the button to "Send Command".

7. Next, drag and drop a "Label" user interface element into the mobile screen.  Re-name the label as "CommandStatus".  Change the Text property of the label to "Status" and increase the Width property to "Parent".

8. Finally, drag and drop "Connectivity->Web" component into the mobile screen and re-name it as "CommandWeb".

9. This completes the design of the mobile app screen.  The same will be displayed as shown below:

10. Next, let's add a few blocks of code.  Click on "Blocks" button option in the top-right corner of the window.

11. Add the following code blocks to read the selected command from the ListPicker and assign the same to the global variable "selectedCommand". 

12. Next, add the following code blocks to send the selected command to ThingSpeak IoT Platform.

In the URL field of the code block, key-in the following:

https://api.thingspeak.com/talkbacks/99999/commands.json?api_key=XXXXXXXXXXXXXXXX

Where 99999 is the Talkback ID and XXXXXXXXXXXXXXXX is the Talkback API key which you created in ThingSpeak earlier.

13. Next, add the following code blocks to check whether the command was sent successfully to ThingSpeak or not: