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 :
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 :
---
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 :
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 :
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 :
1 2 3 4 5 | # https://www.thomaslaurenson.com/blog/2018/07/10/mqtt-web-application-using-javascript-and-websockets/ # |
That ends the article.
