Input Data ThingSpeak via XMLHttpRequest

XMLHttpRequest ThingSpeak Input Data
Input Data ThingSpeak via XMLHttpRequest

ThingSpeak adalah layanan platform analitik IoT yang memungkinkan kita untuk mengumpulkan, memvisualisasikan, dan menganalisis aliran data langsung dengan metode cloud computing. ThingSpeak memberikan kemudahan dalam penelitian yang berhubungan dengan IoT. Kita tidak perlu membangun sebuah server layanan sehingga pekerjaan akan menjadi lebih cepat dan praktis. ThingSpeak menyediakan web API untuk memudahkan komunikasi data dan pengolahannya. API (Application Programming Interface) memungkinkan developer untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan. API terdiri dari berbagai elemen seperti function, protocols, dan tools lainnya yang memungkinkan pengembang untuk membuat aplikasi. Tujuan penggunaan API adalah untuk mempercepat proses development dengan menyediakan function secara terpisah sehingga developer tidak perlu membuat fitur yang serupa. Terdapat berbagai jenis sistem API yang dapat digunakan, termasuk sistem operasi, library, dan web.

Biasanya Platform ThingSpeak banyak digunakan untuk aplikasi monitoring karena memiliki fitur yang bagus dan mendukung (Visualisasi grafik, Matlab Analisis), nah kali ini kita akan coba melakukan proses kontrol ke esp8266 esp-01 / node mcu  menggunakan ThingSpeak. Caranya adalah kita melakukan input data ke ThingSpeak melalui perintah Write Channel, selanjutnya esp8266 akan melakukan Request untuk membaca data terakhir di ThingSpeak yang kita inputkan. Dari data ini digunakan untuk proses kontrol.

BASIC
Pertama-tama mari kita siapkan channel beserta kolomnya (disini saya hanya menggunakan 1 field saja)

Selanjutnya mari kita lihat bagian API Keys nya, yang akan digunakan adalah write api key. 

Nah dibagian write channel feed, dapat kita lihat alamat untuk melakukan input data ke channel. Alamat ini dapat diakses via standar browser dan akan memberikan response. Sebagai contoh saya akan memberikan input pada field 1 dengan nilai 0 maka apabila proses berhasil, respon yang didapatan adalah nilai entry id. Dalam hal ini respon yang saya dapatkan adalah 1 yang menandakan bahwa data tersenut merupakan data ke-1 yang diinputkan. Kalau diinput lagi maka akan mendapatkan respon 2, 3 dst.. Nah dalam prakteknya kadang kita akan memperoleh response bernilai 0. Nilai ini menandakan bahwa proses input data kita gagal. Biasanya dikarenakan interval antar proses input. Infonya ini = "The write frequency is limited to once per 15 seconds for a free account, per channel". Jadi untuk jeda proses input/menulis data ke channel harus kurang lebih 15 detik.
Proses uji coba mari kita gunakan node mcu untuk melihat apakah data yang kita input telah berhasil atau tidak. Nilai ini akan kita lihat via software serial. Programnya dan hasilnya seperti berikut, pastikan sudah mengistall library thingspeak !

#include "ThingSpeak.h"
#include <ESP8266WiFi.h>

char ssid[] = "##########";       // your network SSID (name) 
char pass[] = "##############";   // your network password
int keyIndex = 0;                 // your network key Index number (needed only for WEP)
WiFiClient  client;

// Channel details
unsigned long ChannelId = 1234567;             //Channel ID
const char * ReadAPIKey = "###############$";  //Read API key --> for private channel
unsigned int FieldNumber = 1; 

void setup() {
  Serial.begin(115200);  // Initialize serial
  WiFi.mode(WIFI_STA); 
  ThingSpeak.begin(client);  // Initialize ThingSpeak
}

void loop() {
  int statusCode = 0;
  
  // Connect or reconnect to WiFi
  if(WiFi.status() != WL_CONNECTED){
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    while(WiFi.status() != WL_CONNECTED){
      WiFi.begin(ssid, pass); 
      Serial.print(".");
      delay(5000);     
    } 
    Serial.println("\nConnected");
  }

  // Read in field 1 of the private channel 
  int CtrlStatus = ThingSpeak.readLongField(ChannelId, FieldNumber, ReadAPIKey);  

   // Check the status of the read operation to see if it was successful
  statusCode = ThingSpeak.getLastReadStatus();
  if(statusCode == 200){
    Serial.println("Status: " + String(CtrlStatus));
  }
  else{
    Serial.println("Problem reading channel. HTTP error code " + String(statusCode)); 
  }
  
  delay(2000); // request interval
  
}
*Status 0 adalah saat kita inputkan nilai 0 sedangkan status 1 adalah saat kita inputkan data ke channel dengan nilai 1. Ok dengan demikian bagian dasar terbukti berfungsi dengan baik (write dan read channel)

Lets Improve!
Berbicara mengenai IoT maka akan tidak jauh dengan istilah-istilah pemrograman web. Nah disini saya akan mencoba mengganti proses input via webrowser (yang harus merubah-rubah URL seperti diatas ) dengan aplikasi web yang tentunya akan sangat erat dengan program java script. Disini kita akan menggunakan fungsi XMLHttpRequest.

Saya mencoba membuat aplikasi kontrol on/off dengan menginput nilai 1 atau 0 di channel yang sudah dibuat. Disisi perangkat saya menggunakan ESP-01 yang akan digunakan untuk mengontrol lampu(berhubung saya ada relay shieldnya). Saat nilai yang ada di channel field bernlai 0, maka lampu mati. Apabila 1 maka lampu nyala.

Karena programnya panjang (klo di post disini) maka silahkan download file nya di DOWNLOAD. Dalam file tersebut akan ada 2 file yaitu desain.css dan index.html. Konfigurasi tampilan seperti button, modal, dan warna-warninya ada di file css. Nah untuk proses input datanya ada di file html. Silahkan buka langsung  menggunakan web browser. Langsung saja bisa dicoba dengan menginput write key dan langsung tekan tombol kontrol.
Pada bagian javascript dapat dilihat code berikut:

window.onload = function() {
 document.getElementById("button_control").onclick = function fun() {
  var write_key = document.forms["myForm"]["key_input"].value;
  if ( write_key == "") {
  document.getElementById("invalid-feedback").style.visibility = 'visible';
  document.getElementById("key_input").style.borderColor = "red";
  return false;
   }
  var Url_on = "https://api.thingspeak.com/update?api_key="+write_key+"&field1=1";
  var Url_off = "https://api.thingspeak.com/update?api_key="+write_key+"&field1=0";
  var xhr = new XMLHttpRequest();
  
  if(document.getElementById("button_control").value=="ON"){
  xhr.open('GET', Url_on, true);
  }
  else if(document.getElementById("button_control").value=="OFF"){
  xhr.open('GET', Url_off, true);
  }
  
  xhr.send();
  xhr.onreadystatechange = processRequest;
  function processRequest(e) {
   if (xhr.readyState == 4 && xhr.status == 200) {
   var response= this.responseText;
   console.log(response);
   var ctrlStatus = document.getElementById("control_status");
   var ctrlButton = document.getElementById("button_control");
   var keyInput   = document.getElementById("key_input");
   
   if (response == "0"){
    showModal(2000,0);
    return false;
   }else{   
    if(ctrlButton.value=="ON"){
     ctrlButton.value="OFF";
     ctrlButton.style="background-color: #51db8f";
     document.getElementById("invalid-feedback").style.visibility = 'hidden';
     keyInput.style="border: 2px solid #f6f6f6; border-bottom: 2px solid #51db8f";
     ctrlStatus.innerHTML = "Turning ON ...";
    }
    else if(ctrlButton.value=="OFF"){
     ctrlButton.value="ON";
     ctrlButton.class="fadeIn fourth";
     ctrlButton.style="background-color: #56baed;";
     document.getElementById("invalid-feedback").style.visibility = 'hidden';
     keyInput.style="border: 2px solid #f6f6f6; border-bottom: 2px solid #5fbae9";
     ctrlStatus.innerHTML = "Turning OFF ...";
     }
    showModal(5000,1);
   } 
  }
 }
 function showModal(interval,modalType){
    if (modalType==0){
     $("#ModalFailed").modal();
     setTimeout(function(){
      $("#ModalFailed").modal('hide');
     }, interval);
     
    }else{
     $("#exampleModalCenter").modal();
     setTimeout(function(){
      $("#exampleModalCenter").modal('hide');
     }, interval);
    }
    }
 }
 
 }

Pada fungsi processRequest ada 2 kondisi terkait dengan pengiriman data ke server yaitu readyState dan status. readyState == 4 maksudnya adalah proses pengiriman request telah selesai dan sudah menerima response dari server.
Proses selanjutnya adalah handling terhadap respon yang diterima (mengubah warna button dan tulisannya). Kalau respon bernilai 0 maka modal fail akan tampil. kembali lagi respon yang didapat bernilai 0 saat interval pengiriman request write channel ke server Thingspeak kurang dari 15 detik. Jadi untuk jaga-jaga bisa kita setting interval waktu modal tampil sehingga saat melakukan proses input selanjutnya interval waktunya bisa mencukupi.

Convert to Android Apps
Sekedar info bahwa dengan aplikasi website to apk android app builder, kita dapat mengkonversi aplikasi berbasis web baik yang bersifat lokal ataupun yang sudah online ke aplikasi android. Silahkan bisa dicoba disini

Hasilnya seperti berikut. APK hasil konversi bisa di download disini
Program ESP-01
Untuk persiapannya adalah modul ESP-01, serial downloader, dan relay modul. Silahkan dibaca-baca post sebelumnya terkait cara download program dan pin IO yang digunakan pada ESP-01 relay modul 

#include "ThingSpeak.h"
#include <ESP8266WiFi.h>
#define LED    1 //esp01 pin I/O 1
#define RELAY  0 //esp01 pin I/O 0

char ssid[] = "##########";       // your network SSID (name) 
char pass[] = "##############";   // your network password
int keyIndex = 0;                 // your network key Index number (needed only for WEP)
WiFiClient  client;

// Channel details
unsigned long ChannelId = 1234567;             //Channel ID
const char * ReadAPIKey = "################";  //Read API key --> for private channel
unsigned int FieldNumber = 1; 

void setup() {
  pinMode(LED, OUTPUT);
  pinMode(RELAY, OUTPUT);
  digitalWrite(RELAY, 1);//Led mati
  WiFi.mode(WIFI_STA); 
  ThingSpeak.begin(client);  // Initialize ThingSpeak
}

void loop() {
  int statusCode = 0;
  
  // Connect or reconnect to WiFi
  if(WiFi.status() != WL_CONNECTED){
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(ssid);
    WiFi.begin(ssid, pass);
    while(WiFi.status() != WL_CONNECTED){ 
      Serial.print(".");
      //led kedip-kedip kalau belum connect wifi
      digitalWrite(LED, 0);
      delay(300);
      digitalWrite(LED, 1);
      delay(300);    
    } 
    digitalWrite(LED, 1);//Led mati
  }

  // Read in field 1 of the private channel 
  int CtrlStatus = ThingSpeak.readLongField(ChannelId, FieldNumber, ReadAPIKey);  

   // Check the status of the read operation to see if it was successful
  statusCode = ThingSpeak.getLastReadStatus();
  if(statusCode == 200){
    Serial.println("Status: " + String(CtrlStatus));
    if (CtrlStatus==0){ 
      digitalWrite(RELAY, 1); // relay mati 
    }
    else{
      digitalWrite(RELAY, 0); // relay nyala 
    }
  }
  else{
    //Problem reading channel==> kedip 3 kali
    digitalWrite(LED, 0);delay(100);
    digitalWrite(LED, 1);delay(100); 
    digitalWrite(LED, 0);delay(100);
    digitalWrite(LED, 1);delay(100); 
    digitalWrite(LED, 0);delay(100);
    digitalWrite(LED, 1);delay(500); 
  }
  
  delay(1000); // request interval
  
}


Pencarian Terkait: