Welcome to another tutorial of the How to MQTT series. In this tutorial, we will learn to make an android application for controlling the LED and showing the sensor data (DHT11) using the MQTT protocol. We will be using MIT app inventor to create our android application.
One of the main aims of the internet of things is to make connectivity with all intelligent devices. Android devices are convenient to control appliances from anywhere around the world.
The data we will be showing on the MQTT android application will come from ESP8266, DHT11 sensor, which we programmed in our last tutorials.
Revision
If you have been following my MQTT series or youtube channel. You will be familiar with What is MQTT protocol?
If not, here is a short introduction to the MQTT protocol.
MQTT protocol is an IoT ( Internet of things) lightweight protocol that uses publish/subscribe to communicate between devices.
MQTT works well at unreliable networks.
There are a few MQTT terminologies that you should know, which are as follows.
- Publish / Subscribe
- Messages
- Topics
- Broker
We already discussed brokers in the “Mosquitto MQTT Broker Raspberry Pi” blog. In which we made our cheap MQTT broker.
Also, we have covered how to use the MQTT protocol in MATLAB, Python and how to make real time plotting using python and MQTT protocol.
Also, PCBWay.com are the sponsor of this video. Who are experts at providing PCB, 3D, CNC services. Make sure to check their website.
![How to make MQTT android application using MIT app inventor pcbway.com](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/WhatsApp-Image-2021-12-17-at-1.54.33-AM.jpeg?resize=1024%2C340&ssl=1)
Why MIT app inventor ?
MIT app inventor is very simple to use, and you can build any android application in minutes by just dragging and dropping components. Also, the MIT app inventor has been very popular among the young kids who start with STEM education, as block programming helps them understand the programming concept.
So, lets start our project by creating a new project in MIT app inventor.
Buying guide
Development board | Amazon (US) | Ali express |
---|---|---|
ESP32 | ![]() | ![]() |
Raspberry pi zero | ![]() | ![]() |
Raspberry pi 4 | ![]() | ![]() |
ESP8266 | ![]() | ![]() |
DHT11 | ![]() | ![]() |
Starting a new project and introduction to MIT app inventor
First, when you are on the MIT app inventor website, click on create apps, it will ask you to log in; you can log in using a Google account, and then you will see a bunch of projects if you have created before or you can create a new project and name it.
Then you will see a mobile screen where you will drag and drop items from the left menu, and on the right menu, you can change the parameters of those components.
![How to make MQTT android application using MIT app inventor MIT app inventor window](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image.png?resize=1024%2C514&ssl=1)
You can do the back-end development in the block menu, like how a specific button will behave when clicking on it.
![How to make MQTT android application using MIT app inventor MIT app inventor blocks window](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-1.png?resize=1024%2C508&ssl=1)
Creating Layout
Ok, lets start by dragging a vertical layout in our screen, so all the items are in vertical arrangement and set the width of layout to fill-parent.
![How to make MQTT android application using MIT app inventor MIT app inventor dragging vertical arrangement](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-2.png?resize=1024%2C495&ssl=1)
Then we will add a horizontal layout, and inside it, we will add a label to show the title MQTT dashboard, and in the right menu, you can play with parameters to adjust the size, width, height alignment, etc.
![How to make MQTT android application using MIT app inventor MIT app inventor adding label](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-3.png?resize=1024%2C506&ssl=1)
Now let’s import our media that we will be using in our app. I have downloaded some images that I want to place in the app . Let’s import them by clicking on upload file in the right menu.
![How to make MQTT android application using MIT app inventor MIT app inventor adding media](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design.png?resize=1024%2C576&ssl=1)
Now let’s add another horizontal layout inside the vertical one and add image and label components to it.
Then, from the right side menu, change the picture and set the label text and sizing, etc. Also, we will make the first image clickable. So, when we press it, the picture changes and it can send an MQTT message.
![How to make MQTT android application using MIT app inventor MIT app inventor adding images to button](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-4.png?resize=1024%2C459&ssl=1)
Now let’s copy the whole horizontal layout, place it under the first, change the image to temperature and text. Similarly, copy-paste again for the humidity part.
![How to make MQTT android application using MIT app inventor MIT app inventor creating layout](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-5.png?resize=1024%2C506&ssl=1)
We need to add a button for connecting to the MQTT broker. So, I will copy the same horizontal layout, and instead of the image, i will put a button. Then rename it to “connect” and change the label text as well.
![How to make MQTT android application using MIT app inventor MIT app inventor adding button](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-6.png?resize=1024%2C499&ssl=1)
Finally, I want to place an image to fill the space and publicize my channel. Also, if you have not liked and subscribed, please do so I can make more such videos.
![How to make MQTT android application using MIT app inventor MIT app inventor MQTT app](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/image-7.png?resize=1024%2C495&ssl=1)
Then we will drag a notifier component so we can generate notification alerts in certain cases.
![How to make MQTT android application using MIT app inventor MIT app inventor adding notifier](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design-1.png?resize=1024%2C576&ssl=1)
Also, we need to download the MQTT extension, which we can download from ullis robotor seite. You will find detailed documentation of the MQTT extension as well. After downloading, extract the extension and import it in the MIT app inventor and drag it down on the screen.
![How to make MQTT android application using MIT app inventor MIT app inventor adding MQTT extension](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design-2.png?resize=1024%2C576&ssl=1)
When you drag the MQTT extension, you will see many values that you need to put to use the MQTT protocol.
So, set the broker, port, user name, password, client ID, etc.
![How to make MQTT android application using MIT app inventor MIT app inventor adding MQTT parameters](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design.jpg?resize=1024%2C576&ssl=1)
and the layout is ready now , we need to do the programming part.
ESP8266 code
Let me show you the esp8266 code I am using for this; we wrote that program in our last tutorials. So, I want to show that we are sending sensor data to the Tempdata topic. And we are subscribing to the “lights” topic in esp8266 and the ON message turns on the LED.
#include <Adafruit_Sensor.h> //Library for Adafruit sensors , we are using for DHT #include <DHT_U.h> //DHT library which uses some func from Adafruit Sensor library #include <ESP8266WiFi.h> //library for using ESP8266 WiFi #include <PubSubClient.h> //library for MQTT #include <ArduinoJson.h> //library for Parsing JSON //defining Pins #define DHTPIN 5 #define LED D2 //DHT parameters #define DHTTYPE DHT11 // DHT 11 DHT_Unified dht(DHTPIN, DHTTYPE); uint32_t delayMS; //MQTT Credentials const char* ssid = "ssid";//setting your ap ssid const char* password = "password";//setting your ap psk const char* mqttServer = "iot.reyax.com"; //MQTT URL const char* mqttUserName = "mqtt username"; // MQTT username const char* mqttPwd = "mqtt password"; // MQTT password const char* clientID = "username0001"; // client id username+0001 const char* topic = "Tempdata"; //publish topic //parameters for using non-blocking delay unsigned long previousMillis = 0; const long interval = 5000; String msgStr = ""; // MQTT message buffer float temp, hum; //setting up wifi and mqtt client WiFiClient espClient; PubSubClient client(espClient); void setup_wifi() { delay(10); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); } void reconnect() { while (!client.connected()) { if (client.connect(clientID, mqttUserName, mqttPwd)) { Serial.println("MQTT connected"); client.subscribe("lights"); Serial.println("Topic Subscribed"); } else { Serial.print("failed, rc="); Serial.print(client.state()); Serial.println(" try again in 5 seconds"); delay(5000); // wait 5sec and retry } } } //subscribe call back void callback(char*topic, byte* payload, unsigned int length) { Serial.print("Message arrived in topic: "); Serial.println(topic); Serial.print("Message:"); String data = ""; for (int i = 0; i < length; i++) { Serial.print((char)payload[i]); data += (char)payload[i]; } Serial.println(); Serial.print("Message size :"); Serial.println(length); Serial.println(); Serial.println("-----------------------"); Serial.println(data); if(data=="ON"){ Serial.println("LED"); digitalWrite(LED, HIGH); } else{ digitalWrite(LED, LOW); } } void setup() { Serial.begin(115200); // Initialize device. dht.begin(); // get temperature sensor details. sensor_t sensor; dht.temperature().getSensor(&sensor); dht.humidity().getSensor(&sensor); pinMode(LED, OUTPUT); digitalWrite(LED, LOW); setup_wifi(); client.setServer(mqttServer, 1883); //setting MQTT server client.setCallback(callback); //defining function which will be called when message is received. } void loop() { if (!client.connected()) { //if client is not connected reconnect(); //try to reconnect } client.loop(); unsigned long currentMillis = millis(); //read current time if (currentMillis - previousMillis >= interval) { //if current time - last time > 5 sec previousMillis = currentMillis; //read temp and humidity sensors_event_t event; dht.temperature().getEvent(&event); if (isnan(event.temperature)) { Serial.println(F("Error reading temperature!")); } else { Serial.print(F("Temperature: ")); temp = event.temperature; Serial.print(temp); Serial.println(F("°C")); } // Get humidity event and print its value. dht.humidity().getEvent(&event); if (isnan(event.relative_humidity)) { Serial.println(F("Error reading humidity!")); } else { Serial.print(F("Humidity: ")); hum = event.relative_humidity; Serial.print(hum); Serial.println(F("%")); } msgStr = String(temp) +","+String(hum); byte arrSize = msgStr.length() + 1; char msg[arrSize]; Serial.print("PUBLISH DATA:"); Serial.println(msgStr); msgStr.toCharArray(msg, arrSize); client.publish(topic, msg); msgStr = ""; delay(50); } }
Programming MQTT android app
Now let’s be a kid and program our application using block programming.
Firstly, we will use the button event when the button clicks for connect button. Then we will use if and else block to see state of connection to MQTT broker. If the current state is “connected to the broker” we will disconnect from MQTT broker.
Otherwise, we will connect and use a clean session, which means MQTT does not store any information about subscriptions, etc.
![How to make MQTT android application using MIT app inventor MQTT when connect button clicks](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/blocks-1.png?resize=476%2C191&ssl=1)
Then from the MQTT extension, we will use the event block when the connection state has changed. Using the if and else block, we will see if we are now “connected” or “disconnected”.
If we are connected now, we will modify the button text to disconnect and change the label’s text; we will subscribe to our topic using QoS 0. Wildcards are also accepted. Otherwise, we will change the button and label text if we are disconnected.
![How to make MQTT android application using MIT app inventor MQTT when connection state changes](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/blocks-2.png?resize=589%2C318&ssl=1)
Then we will use the event of bulb image; when it clicks, we will see if we are connected to the broker or not; if we are connected, and the current image is “off.png” the bulb, we will publish a message ON on topic lights and change the button image and label. Otherwise, we will publish an “off” message and change the picture and label.
If we are not connected to the broker and are pressing that button, we will alert that we are not connected to the MQTT broker using the notifier extension.
![How to make MQTT android application using MIT app inventor MQTT publish message](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/blocks-3.png?resize=603%2C501&ssl=1)
Then we will use the MQTT extension event when we receive the message, and using if and else block, we will check if we have received notification on the temp data topic.
Then, we will create a list to store temperature and humidity data; from esp8266, we are sending data comma separated.
![How to make MQTT android application using MIT app inventor MIT app inventor create a variable](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/blocks-4.png?resize=454%2C35&ssl=1)
So we will split the data using “,” as a separator and store both values in the data list at index 1 and 2. Then in the label three texts, which is for temperature, we will show the value of temperature, and here we are using join block to combine value and the degree symbol.
Similarly, we will add text to label four which is for humidity.
![How to make MQTT android application using MIT app inventor MIT app inventor when message recieves](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/blocks-5.png?resize=674%2C331&ssl=1)
And our application is ready.
Get ESP8266 code and MIT app inventor *.aia file from this github repository.
Building APK and running it
![How to make MQTT android application using MIT app inventor MIT app inventor building apk](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design-1.jpg?resize=1024%2C576&ssl=1)
Click on build and then android app (apk) , you will get two options either to dowload it or you can directly download from your android device by scanning the QR code.
here is the final look of the application.
![How to make MQTT android application using MIT app inventor MIT app invetor MQTT android application for ESP8266](https://i0.wp.com/highvoltages.co/wp-content/uploads/2021/12/Untitled-design-3.png?resize=1024%2C576&ssl=1)
I hope you liked this tutorial, if you do so, please like, share and subscribe.