Wemos ESP8266 - Part 3 - Hello Internet : Kontrol Perangkat Dari Luar Rumah

 

Setelah anda berhasil mengenal fungsi dasar dari Wemos D1 R2 dan berhasil mengirim data pengukuran suhu DHT 11 melalui protokol TCP ke smartphone, kini saatnya membawa data suhu kelembaban dan kontrol I/O ke luar rumah melalui jalur Internet. Jika sebelumnya data hanya berupa teksmelalui TCP, maka ini akan terlihat menjadi kurang menarik. Kita akan manfaatkan fasilitas Web Server yg dimiliki oleh ESP8266. Wihh kok canggih ? alat sekecil itu bisa menjadi web server ?

Library dasar yg digunakan adalah ESP8266WiFi.h dimana ada class WifiServer yg bisa dimasukkan kedalamnya teks berformat HTML  dan juga terdapat fungsi dasar response HTTP  baik GET maupun POST. 

Masih ingat kan, project sebelumnya untuk menghidupkan LED pada board wemos ? Kali ini kita buat versi lain dalam bentuk website yg lebih menarik dan mengandung CSS, sehingga UI tombolnya tampil lebih keren, script nya seperti berikut :

// Load Wi-Fi library
#include <ESP8266WiFi.h>

// Ganti dengan nama wifi yg digunakan
const char* ssid     = "nama wifi";
const char* password = "password";

// Set web server port :80
WiFiServer server(80);

// Variable menyimpan HTTP request
String header;

// Variabel menyimpan status LED SCK(14) dan Led ESP (2)
String LedSCKState = "off";
String LedESPState = "off";

// Pilih GPIO pin untuk kedua LED
const int LedSCK = 14; //LED SCK
const int LedESP = 2;  //LED ESP

// variabel untuk delay timer asynchronous tanpa mengganggu fungsi utama
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(9600);
  // Inisialisasi PIN
  pinMode(LedSCK, OUTPUT);
  pinMode(LedESP, OUTPUT);
  // Buat LED mati
  digitalWrite(LedSCK, LOW);
  digitalWrite(LedESP, HIGH); //logika terbalik aktif LOW

  // konek ke wifi
  Serial.print("Terhubung ke jaringan ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address lalu mulai web server
  Serial.println("");
  Serial.println("WiFi terhubung ...");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // Nyalain LED on and off sesuai header GET 
            if (header.indexOf("GET /SCK/on") >= 0) {
              Serial.println("Led SCK on");
              LedSCKState = "on";
              digitalWrite(LedSCK, HIGH);
            } else if (header.indexOf("GET /SCK/off") >= 0) {
              Serial.println("Led SCK off");
              LedSCKState = "off";
              digitalWrite(LedSCK, LOW);
            } else if (header.indexOf("GET /ESP/on") >= 0) {
              Serial.println("Led ESP on");
              LedESPState = "on";
              digitalWrite(LedESP, LOW);
            } else if (header.indexOf("GET /ESP/off") >= 0) {
              Serial.println("Led ESP off");
              LedESPState = "off";
              digitalWrite(LedESP, HIGH);
            }
            
            // Display the HTML web page & CSS
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Header
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for LED SCK
            client.println("<p>Status LED SCK " + LedSCKState + "</p>");
            // If the output5State is off, it displays the ON button       
            if (LedSCKState=="off") {
              client.println("<p><a href=\"/SCK/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/SCK/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for LED ESP 
            client.println("<p>Status LED ESP " + LedESPState + "</p>");
            // If the output4State is off, it displays the ON button       
            if (LedESPState=="off") {
              client.println("<p><a href=\"/ESP/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/ESP/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Dan lanjutkan mengcompile dan download menuju wemos, perhatikan IP address yg muncul pada serial monitor :

Lanjutkan masuk ke alamat IP tadi pada browser dan akan muncul layar berisikan status LED dan tombol ON - OFF :

Perhatikan ketika salah satu tombol ditekan maka akan ada perintah GET menuju ke header dari websever, mengikuti script a href sepert berikut :

client.println("<p><a href=\"/ESP/on\"><button class=\"button\">ON</button></a></p>");

Artinya saat tombol ditekan maka a href akan mengarahkan browser masuk ke http://ipnya/ESP/on , lalu dibaca headernya dan di baca oleh IF untuk menentukan  LED mana yang nyala dan yang mati.

 if (header.indexOf("GET /SCK/on") >= 0) {
              Serial.println("Led SCK on");
              LedSCKState = "on";
              digitalWrite(LedSCK, HIGH);
            } else if (header.indexOf("GET /SCK/off") >= 0) {
              Serial.println("Led SCK off");
              LedSCKState = "off";
              digitalWrite(LedSCK, LOW);
            } else if (header.indexOf("GET /ESP/on") >= 0) {
              Serial.println("Led ESP on");
              LedESPState = "on";
              digitalWrite(LedESP, LOW);
            } else if (header.indexOf("GET /ESP/off") >= 0) {
              Serial.println("Led ESP off");
              LedESPState = "off";
              digitalWrite(LedESP, HIGH);
            }

            

Memang agak sedikit primitive, ada juga cara lain yg asyncronous tapi memerlukan pemahaman webserver lebih lanjut seperti tulisan saya disini.

 

Lalu bagaimana jika ingin menambahkan pembacaan sensor DHT 11 dan tampil pada laman web ? Cukup ambahkan library DHT11 seperti penjelasan di tulisan  sebelumnya dan  buat function berikut, letakkan diatas setup :

String SendTempHumid(){
  
 String datae ="";
  
  float h = dht.readHumidity();
  float t = dht.readTemperature();


   if (isnan(h) || isnan(t) ) {
    Serial.println(F("Failed to read from DHT sensor!"));
    return "error";
  }

datae+= String(t).substring(0, 4); // tampilkan hanya 3 digit 
datae+= "°C / " ;
datae+= String(h).substring(0, 2); //tapilkan hanya 2 digit
datae+= "%";
Serial.println(datae);
return datae;

}

Function diatas akan menghasilkan string berupa pembacaan suhu dan kelembaban, selanjutnya akan ditampilkan pada layar web. Karena pembacaannya tidak periodik, maka butuh tombol refresh seperti script berikut :

 client.println("<br>");
 client.println("<p>Kondisi : " + SendTempHumid() + "</p>");
 client.println("<p><a href=\"/refresh/\"><button class=\"button\">Refresh</button></a></p>");

Tambahkan script diatas tadi dibagian sebelum client.println("</body></html>"); dan selanjutnya bila ingin mengupdate pembacaan sensor bisa tekan tombol refresh.

Pekerjaan belum selesai sampai disini, naggung ! Masih cuman bisa ngontrol wemos dari lokasi yg dekat dengan wifi routernya, lalu bagaimana menghubungkannya ke Internet ? 

Kita manfaatkan fasilitas DDNS, yaitu Dynamic DNS yg memungkinkan membuat nama domain gratis dan diarahkan ke IP publik yg bisa berubah-ubah. Ada syarat utama yaitu kamu harus menggunakan router wifi dari jaringan kabel/optik dengan ip publik , dan tidak bisa untuk koneksi melalui GSM /4G yang IP nya umumnya lokal / sharing IP. Untuk itu pastikan IP yg didapatkan oleh Router wifi kamu adalah IP publik seperti pada gambar.

Urutannya seperti berikut :

• Masuk ke konsole GPON atau wifi router (IP nya belakangnya mesti 1) , syukur-syukur masih admin:admin atau user passwordnya kamu ketahui, kalau tidak ya jangan lanjutkan praktek ini.
• Cek WAN status dan bandingkan dengan IP yg muncul dari  myipadress.com
• Daftar ke noip.com , tambahkan nama domain DDNS sesuai yg kamu inginkan seperti contoh diatas.
• Lanjut tambahkan DDNS pada wifi router seperti gambar berikut ini.

• Pada DDNS masukkan username dan password noip.com 
• Lakukan port forwarding di 80 (wan dan lan) sehingga setiap yg masuk ke domain akan di routing forward menuju IP Wemo s8266. Jadi jangan sampai salah menambahkan IP wemos kamu.
• Buka website seperti contoh dibawah ini : http://rumahnyo.ddns.net dan kini bisa mengontrol lampu dan mengetahui suhu dari luar rumah menggunakan jaringan GSM / Internet.

Cara ini adalah cara paling dasar untuk mempelajari IOT menggunakan wemos D1 R2, tujuannya agar mengerti prinsip dasarnya dan tidak bergantung pada platform siap pakai yg ada diluaran sana. Contohnya BLYNK yg sudah umum dipakai tugas IOT mahasiswa dengan library dan platform gratis, cukup menuliskan sebaris script pada sketch arduino dan kemudahan drag drop GUI pada smatphone.

Pada bagian selanjutnya kita akan kirim-kirim data menggunakan standar komunikasi IOT ke cloud yaitu MQTT - PUB SUB.