• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Develop WEB Applications with ESP32 and IBM Watson IoT

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

Develop WEB Applications with ESP32 and IBM Watson IoT

Advertisement

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.

Develop WEB Applications with ESP32 and IBM Watson IoT

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 :

Vim
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 :

Advertisement

---

Vim
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 :

Vim
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>
<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>

And here is the JavaScript :

Vim
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 :

Vim
1
2
3
4
5
#
 
https://www.thomaslaurenson.com/blog/2018/07/10/mqtt-web-application-using-javascript-and-websockets/
 
#

That ends the article.

This Article Has Been Shared 363 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

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

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

  • ESP32 Arduino : Create a Webpage to Control a Relay Module

    Here is How to Create a Webpage to Control a Relay Module Using ESP32 Arduino. This is a basic example which provides the base of advanced projects.

  • ESP32 Arduino with DHT11 Sensor : Connection & Code

    Here is Connection & Working Code for ESP32 Arduino with DHT11 Sensor. We will use Adafruit’s libraries for DHT11 and DH22 Temperature Humidity Modules.

  • ESP32 Arduino Built-in Hall Sensor Code & Theory

    ESP32 has a Hall Effect Sensor near pin 22. Here is ESP32 Arduino Built-in Hall Sensor Code & Theory. Here is something about Hall Effect Sensor as well.

  • ESP32 Arduino OLED Display Example (I2C)

    Interfacing OLED without I2C is difficult with ESP32, as it requires 6 connections. I2C based OLED display need only two IO lines.

  • ESP32 Arduino : Fetching Current Weather Data (No JSON Parsing)

    In this guide we have shown how to fetch current weather data from ESP32 Arduino. This code example is basic and no JSON parsing is shown.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • What are Offshore Sportsbooks and How to Take Advantage of Them? May 28, 2022
  • The True Cost Of Container Security: Why They’re Not A Silver Bullet May 28, 2022
  • How To Build An AI Strategy That Works May 26, 2022
  • The Future Of Serverless: The Load-Intensive Workload Case May 25, 2022
  • Cutting Out The Coding: Serverless Computing In Action May 24, 2022

About This Article

Cite this article as: Abhishek Ghosh, "Develop WEB Applications with ESP32 and IBM Watson IoT," in The Customize Windows, June 12, 2019, May 29, 2022, https://thecustomizewindows.com/2019/06/develop-web-applications-with-esp32-and-ibm-watson-iot/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy