Develop WEB Applications with ESP32 and IBM Watson IoT

Abhishek Ghosh

By Abhishek Ghosh June 12, 2019 6:24 pm Updated on June 12, 2019

Develop WEB Applications with ESP32 and IBM Watson IoT

Here is How to Develop Web Applications with ESP32 and IBM Watson IoT. Often, using an HTML page with JavaScript is practical than developing an Android App. Because, web applications can be hosted on own cloud server or cloud storage service – thus it becomes device independent. Securing access to such web application usually, need minimal configuration for the Apache2 server. Cloud storages provide various ways to control access. Developing dedicated mobile applications arises when the solution is commercial. Otherwise, at least for IBM Watson IoT, there are Android apps to send commands to IBM Watson IoT, and also there are Android apps to receive push notifications. Developing an Android App at least sucks time which distracts a maker. Today, web interface commonly used by various commercial hardware including Modems, Routers to decrease the burden of cross-platform application development. Also, it is easy to add server-side functions or Serverless functions on a web app than a mobile application.

---

Our present topic is to show the way to really develop a WEB application for ESP32, ESP8266 connected with IBM Watson IoT. We found a good GitHub repository for this purpose as a template :

#


https://github.com/altaga/The-Ultimate-IBM-Watson-IoT-Platform-Guide


#

1

2

3

4

5

6

7

#

https://github.com/altaga/The-Ultimate-IBM-Watson-IoT-Platform-Guide

#

The example is with ESP8266, which can be easily converted for ESP32. Here is the Arduino/ESP code :

#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <PubSubClient.h>

//-------- Modify these values -----------
const char* ssid = "YOUR_SSID";      // The name of your Internet BTW
const char* password = "YOUR_PASS";  // Your pass 

#define ORG "YOUR_ORGANIZATION_ID" // This information is in the previous image
#define DEVICE_ID "Test001"        //  Only for this Example 
#define DEVICE_TYPE "ESP8266"      // your device type 
#define TOKEN "YOUR_TOKEN"         // your device token

//-------- Modify these values --------

char server[] = ORG ".messaging.internetofthings.ibmcloud.com";
char TopicSub[] = "iot-2/cmd/status/fmt/json";
char TopicPub[] = "iot-2/evt/status/fmt/json"; 
// This is the topic that needs to be put in order for data to be sent and recieve in the platform, NOT MODIFY.
char authMethod[] = "use-token-auth";
char token[] = TOKEN;
char clientId[] = "d:" ORG ":" DEVICE_TYPE ":" DEVICE_ID;
unsigned int Delay = 30;    // This time is what the device will take to send data
unsigned int i=(Delay*100);

WiFiClientSecure wifiClient;
PubSubClient client(server, 8883, wifiClient); //Never modify the 8883 as it is a safe port for sending data


void callback(char* topic, byte* payload, unsigned int length) 
{
  String data="";
  for (int i = 0; i < length; i++) 
  {
    data+=char(payload[i]);
  }
  Serial.println("Received Data:" + data); // In this case we print the data recive from the website.
}

void setup() {
  Serial.begin(115200); Serial.println();
  Serial.print("Connecting to "); Serial.print(ssid);
  if (strcmp (WiFi.SSID().c_str(), ssid) != 0) {
     WiFi.begin(ssid, password);
  }
  while (WiFi.status() != WL_CONNECTED) {
     delay(500);
     Serial.print(".");
  }  
  Serial.println("");
  Serial.print("WiFi connected, IP address: "); Serial.println(WiFi.localIP());
  client.setCallback(callback); // Here we "connect"the callback function to subscribe data receive
}

void loop() {
  client.loop();
   
   // Do not modify the delay of 500 ms since it depends on the correct connection.
   if (!!!client.connected()) 
   {
     Serial.print("Reconnecting client to "); Serial.println(server);
     while ( !client.connect(clientId, authMethod, token)) 
     {
        Serial.print(".");
        delay(500);
     }
     Serial.println();
     client.subscribe(TopicSub);  // This is for callback
   }

  if(i>=(Delay*100)) 
  {
    String payload ="Hello IBM"; // Data sent, you can also send a json if you want.
    Serial.print("Sending payload: "); Serial.println(payload);
      
    if (client.publish(TopicPub, (char*) payload.c_str())) 
    {
      Serial.println("Publish ok");
    } 
    else 
    {
      Serial.println("Publish failed");
    }
    i=0;
  }
  else
  {
    i++;
    delay(10);
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <PubSubClient.h>

//-------- Modify these values -----------

const char* ssid = "YOUR_SSID"; // The name of your Internet BTW

const char* password = "YOUR_PASS"; // Your pass

#define ORG "YOUR_ORGANIZATION_ID" // This information is in the previous image

#define DEVICE_ID "Test001" // Only for this Example

#define DEVICE_TYPE "ESP8266" // your device type

#define TOKEN "YOUR_TOKEN" // your device token

//-------- Modify these values --------

char server[] = ORG ".messaging.internetofthings.ibmcloud.com";

char TopicSub[] = "iot-2/cmd/status/fmt/json";

char TopicPub[] = "iot-2/evt/status/fmt/json";

// This is the topic that needs to be put in order for data to be sent and recieve in the platform, NOT MODIFY.

char authMethod[] = "use-token-auth";

char token[] = TOKEN;

char clientId[] = "d:" ORG ":" DEVICE_TYPE ":" DEVICE_ID;

unsigned int Delay = 30; // This time is what the device will take to send data

unsigned int i=(Delay*100);

WiFiClientSecure wifiClient;

PubSubClient client(server, 8883, wifiClient); //Never modify the 8883 as it is a safe port for sending data

void callback(char* topic, byte* payload, unsigned int length)

{

String data="";

for (int i = 0; i < length; i++)

{

data+=char(payload[i]);

}

Serial.println("Received Data:" + data); // In this case we print the data recive from the website.

}

void setup() {

Serial.begin(115200); Serial.println();

Serial.print("Connecting to "); Serial.print(ssid);

if (strcmp (WiFi.SSID().c_str(), ssid) != 0) {

WiFi.begin(ssid, password);

}

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

Serial.println("");

Serial.print("WiFi connected, IP address: "); Serial.println(WiFi.localIP());

client.setCallback(callback); // Here we "connect"the callback function to subscribe data receive

}

void loop() {

client.loop();

// Do not modify the delay of 500 ms since it depends on the correct connection.

if (!!!client.connected())

{

Serial.print("Reconnecting client to "); Serial.println(server);

while ( !client.connect(clientId, authMethod, token))

{

Serial.print(".");

delay(500);

}

Serial.println();

client.subscribe(TopicSub); // This is for callback

}

if(i>=(Delay*100))

{

String payload ="Hello IBM"; // Data sent, you can also send a json if you want.

Serial.print("Sending payload: "); Serial.println(payload);

if (client.publish(TopicPub, (char*) payload.c_str()))

{

Serial.println("Publish ok");

}

else

{

Serial.println("Publish failed");

}

i=0;

}

else

{

i++;

delay(10);

}

Here is the HTML :

<!DOCTYPE html>
<html lang="en" html manifest="manifest.appcache">
<head>
<title>Example Page</title>
<script src="js/mqttws31.js" type="text/javascript"></script>
<script>
// Create a client instance

var org = "YOUR_ORG"; // Your Organization ID
var apl= "YOUR_MODIFIED_APIKEY" // PUTT YOUR API KEY AND REPLACE THE "-" WITH ":"
// For this example, the topic should already work, but remember to change the
// Device ID and the Type for what you put your devices on the platform.
// "iot-2/type/DeviceType/id/DeviceID/evt/status/fmt/json"
var topic = "iot-2/type/ESP8266/id/Test001/evt/status/fmt/json"

client = new Paho.MQTT.Client(org+".messaging.internetofthings.ibmcloud.com", 8883, apl);

// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
var options = {
  useSSL: true,
  userName: "YOUR_APIKEY", // Put Here your API KEY
  password: "YOUR_TOKEN",  // Put Here your Authentication Token
  onSuccess:onConnect,
  onFailure:doFail
}

// connect the client
client.connect(options);

// called when the client connects
function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  // For this example, the topic should already work, but remember to change the
  // Device ID and the Type for what you put your devices on the platform.
  // "iot-2/type/DeviceType/id/DeviceID/evt/status/fmt/json"
  client.subscribe(topic);
}

function doFail(e){
  console.log(e);
}

// called when the client loses its connection
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:"+responseObject.errorMessage);
  }
}

// called when a message arrives
function onMessageArrived(message)
{
    var mensaje = message.payloadString;
    messag = new Paho.MQTT.Message(mensaje);
    messag.destinationName = "iot-2/type/ESP8266/id/Test001/cmd/status/fmt/json";
    client.send(messag);
    console.log(mensaje);
    var payload = mensaje.substring(0, 12);
    doFunction(payload);
    payload="";
}

function doFunction(variable)
{
  alert(variable); // Each piece of information that arrives in our app will be shown in an alert. 
}
</script>

</head>
<body>

Hello IBM.

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

<!DOCTYPE html>

<head>

<title>Example Page</title>

// Create a client instance

var org = "YOUR_ORG"; // Your Organization ID

var apl= "YOUR_MODIFIED_APIKEY" // PUTT YOUR API KEY AND REPLACE THE "-" WITH ":"

// For this example, the topic should already work, but remember to change the

// Device ID and the Type for what you put your devices on the platform.

// "iot-2/type/DeviceType/id/DeviceID/evt/status/fmt/json"

var topic = "iot-2/type/ESP8266/id/Test001/evt/status/fmt/json"

client = new Paho.MQTT.Client(org+".messaging.internetofthings.ibmcloud.com", 8883, apl);

// set callback handlers

client.onConnectionLost = onConnectionLost;

client.onMessageArrived = onMessageArrived;

var options = {

useSSL: true,

userName: "YOUR_APIKEY", // Put Here your API KEY

password: "YOUR_TOKEN", // Put Here your Authentication Token

onSuccess:onConnect,

onFailure:doFail

}

// connect the client

client.connect(options);

// called when the client connects

function onConnect() {

// Once a connection has been made, make a subscription and send a message.

console.log("onConnect");

// For this example, the topic should already work, but remember to change the

// Device ID and the Type for what you put your devices on the platform.

// "iot-2/type/DeviceType/id/DeviceID/evt/status/fmt/json"

client.subscribe(topic);

}

function doFail(e){

console.log(e);

}

// called when the client loses its connection

function onConnectionLost(responseObject) {

if (responseObject.errorCode !== 0) {

console.log("onConnectionLost:"+responseObject.errorMessage);

}

// called when a message arrives

function onMessageArrived(message)

{

var mensaje = message.payloadString;

messag = new Paho.MQTT.Message(mensaje);

messag.destinationName = "iot-2/type/ESP8266/id/Test001/cmd/status/fmt/json";

client.send(messag);

console.log(mensaje);

var payload = mensaje.substring(0, 12);

doFunction(payload);

payload="";

}

function doFunction(variable)

{

alert(variable); // Each piece of information that arrives in our app will be shown in an alert.

}

</script>

</head>

<body>

Hello IBM.

</body>

</html>

And here is the JavaScript :

#
https://raw.githubusercontent.com/altaga/The-Ultimate-IBM-Watson-IoT-Platform-Guide/master/html/js/mqttws31.js
#

1

2

3

#

https://raw.githubusercontent.com/altaga/The-Ultimate-IBM-Watson-IoT-Platform-Guide/master/html/js/mqttws31.js

#

You can study our examples codes for ESP32 connected with IBM Watson IoT to develop the idea how to modify code for ESP8266 to ESP32.

There are a lot of examples on the web with mqttws31.js and detailed tutorial to learn works :

#

https://www.thomaslaurenson.com/blog/2018/07/10/mqtt-web-application-using-javascript-and-websockets/

#

1

2

3

4

5

#

https://www.thomaslaurenson.com/blog/2018/07/10/mqtt-web-application-using-javascript-and-websockets/

#

That ends the article.

Develop WEB Applications with ESP32 and IBM Watson IoT

This Article Has Been Shared 2162 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

This Article Has Been Shared 2162 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Develop WEB Applications with ESP32 and IBM Watson IoT

Take The Conversation Further ...