Adafruit-IO Meets ESP8266, Arduino & MIT App Inventor 2

Hello World for Adafruit-io & MQTT Protocol — 05 #kidSerie

MQTT & Adafruit-io & IFTT - Part I

Dying to know the codes? What you really wanted was “The real thing”? and the likes? so it’s about time to check it out!!!

MockFlow BannerPro - https://bannerpro.mockflow.com

Step 00-Intranet ES8266 test

Let's see if it works indoors first.

Get all the code sequence from my Github. There are 4 codes. I put _05_ kidSerie_ sketch prefix to better locate them; First, run the code to ESP8266 as the community offers, then I used the code written by Tony DiCola from Adafruit (thank you man!); then mixed the two and viola!! The magic happens…

Step 01-Adafruit w/ dummy data

The code sends an estimated reading and things work. There is only one more step and ready !! Subscribe and publish with MQTT not appear more a problem…

Step 02-MQTT for real

Enjoy this wonderful IoT protocol and a kind Dashboard!!!

MQTT is a machine-to-machine (M2M) IoT communication protocol, useful when a small footprint is needed.

But lack a piece in this gear: android !! For this, I used the fabulous idea of MIT App Inventor 2 that makes it much easier.

JavaScript is the tailpiece to complete my app. in fact it is in javaScript that the magic happens… Let’s start there. JS. Here is webviewstring_mqtt_00.html:

Step 03-JavaScript code

The callback message is where everything happens. as soon as it is available the subscription data temp writes the data in the <pre> and that’s it …

Note that we use the jquery and MQTT libs calling them at the beginning of the script.

Now how to connect this code to the MIT App Inventor 2?

To understand how it works I think it’s good to run WebViewString.aia.

You find the code to download to your machine in my Github too (WebViewString.aia). But boils down to use WebView object. We load the webviewstring_mqtt_00.http to media and in your application use webViewer.webViewString object. In javaScript use window.AppInventor object and its two properties getWebViewString and setWebViewString to interact with it. Touché!!!

Here is schematic:

Step 04-MIT App Inventor 2

Here is the code in MIT App Inventor 2:

Step 05-ESP8266

Here is the ESP8266.ino code (see GitHub if you will):

In the meantime, feel free to contact me and I’ll help you any way I can. I think you’ll know my username j3 by now, so it won’t be that hard to send a message or comment on my youtube channel.

keep playing with electronics! Thank you for following my posts! See you soon! Bye!!!

Download All Project Archive