How to MQTT?

How to make MQTT android application using MIT app inventor

Support us by sharing
Mqtt in android application
Mqtt in android appliation

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.

pcbway.com
pcbway.com

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.

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.

MIT app inventor window
MIT app inventor window

You can do the back-end development in the block menu, like how a specific button will behave when clicking on it.

MIT app inventor blocks window
MIT app inventor blocks window

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.

MIT app inventor dragging vertical arrangement
MIT app inventor dragging vertical arrangement

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.

MIT app inventor adding label
MIT app inventor adding label

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.

MIT app inventor adding media
MIT app inventor adding media

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.

MIT app inventor adding images to button
MIT app inventor adding images to button

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.

MIT app inventor creating layout
MIT app inventor creating layout

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.

MIT app inventor adding button
MIT app inventor adding button

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.

MIT app inventor MQTT app
MIT app inventor MQTT app

Then we will drag a notifier component so we can generate notification alerts in certain cases.

MIT app inventor adding notifier
MIT app inventor adding notifier

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.

MIT app inventor adding MQTT extension
MIT app inventor adding MQTT extension

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.

MIT app inventor adding MQTT parameters
MIT app inventor adding MQTT parameters

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.

MQTT when connect button clicks
MQTT when connect button clicks

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.

MQTT when connection state changes
MQTT when connection state changes

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.

MQTT publish message
MQTT publish message

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.

MIT app inventor create a variable
MIT app inventor create a variable

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.

MIT app inventor when message recieves
MIT app inventor when message recieves

And our application is ready.

Get ESP8266 code and MIT app inventor *.aia file from this github repository.

Building APK and running it

MIT app inventor building apk
MIT app inventor building apk

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.

MIT app invetor MQTT android application for ESP8266
MIT app invetor MQTT android application for ESP8266

I hope you liked this tutorial, if you do so, please like, share and subscribe.

Video tutorial

Summary
How to make MQTT android application using MIT app inventor
Article Name
How to make MQTT android application using MIT app inventor
Description
In this video we will implement MQTT in Android application using drag and drop programming blocks in MIT App inventor.
Author
Publisher Name
High voltages
Publisher Logo
Support us by sharing

Comments (7)

  1. […] In this tutorial we will implement MQTT in Android application using drag and drop programming blocks in MIT App inventor.  […]

  2. […] How to make MQTT android application using MIT app inventor December 18, 2021 […]

  3. […] How to make MQTT android application using MIT app inventor December 18, 2021 […]

  4. Please share the MIT app aia file for MQTT project.

Leave a Reply

%d bloggers like this: