MQTT Client-Only Controller
MQTT Client-Only Controller with App Inventor
calendar_today 17/03/2020 | today 20 | visibility 14655[Status]: Building project.
Hello! this is the first project from the IoT MQTT series. click on the Next Project to follow "MQTT Server with Android" or visit IoT MQTT Series.
In this project:
1. We'll use App Inventor
2. We'll send text data through MQTT
3. We'll receive data through an ESP32
4. All just to turn ON a LED (for now).
Introduction. App Inventor and MQTT
App Inventor is a visual, easy-to-use online Android Application development platform. It is a do-it-yourself tool to develop mobile apps without the strugle of traditional text-based development platforms.
I personally use App Inventor over a tex-based patform because of it's lightweight. Yes, App Inventor has less flexibility and fewer components than the alternatives, but, it is a lot easier to make a Android app when you've yust entered in the wireless communications domain.
MQTT is a machine-to-machine connectivity protocol, it manages data as messages to communicate with the IoT “things”. The most important reason to use MQTT to send and receive data is because of it's lightweight.
Now, App inventor for himself doesn't have a component fot using a MQTT connection but there's a way, the WebViewer, with the webviewer you can use a HTML doccument to run scripts, Javascripts.
Using a script library for Paho MQTT by Eclipse (see the docummentation here) you can implement your own MQTT client using websockets.
Set up the ESP32 for this guide HERE.
Documentation for the ESP32 with Mongoose OS HERE
Building the app with App Inventor
 - MQTT_CustomClientOnly.png)
 - MQTT_CustomClientOnly.png)
 - MQTT_CustomClientOnly.png)
The App Inventor's designer view is the user interacions screen where you configure the settings and set the message and destination.
In the blocks view, we only need to send the settings by pressing the "Save settings" button and message instructions pressing "send" button. The input mode buttons are only for a cleaner user interaction.
Then, there's a background processing where the communication happens. In this part we're gonna use the Webviewer component as a Javascript emulator and it manages the data that the user sends [jump to code].