• 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 416 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 (24.3K 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

  • Cyberpunk Aesthetics: What’s in it Special January 27, 2023
  • How to Do Electrical Layout Plan for Adding Smart Switches January 26, 2023
  • What is a Data Mesh? January 25, 2023
  • What is Vehicular Ad-Hoc Network? January 24, 2023
  • Difference Between Panel Light, COB Light, Track Light January 21, 2023

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, January 29, 2023, https://thecustomizewindows.com/2019/06/develop-web-applications-with-esp32-and-ibm-watson-iot/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

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

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

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

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT