Web Server Arising

29 Maret 2020.

Halo! Selamat datang kembali di tulisan gua yang ke-xx. Setelah 2 minggu lebih dari kasus pertama corona muncul di Indonesia, sejauh ini kondisinya belum membaik juga. Saat ini pun gue udah menjalani minggu ke-2 PJJ (Pembelajaran jarak jauh) gue, dan besok akan menjadi minggu ke-3 PJJ gue setelah corona ini muncul. Semakin kesini kondisinya bisa dibilang udah cukup parah dan mengganggu untuk melakukan aktivitas seperti biasanya. Bahkan saat ini beberapa jalan di Bandung pun di jam-jam tertentu udah ditutup untuk menghindari dan mengurangi massa yang ada di jalan.

Oiya, fyi dengan kondisi kayak gini gue masih bertahan di Bandung. Bukan cuma karena takut jadi carrier virus untuk orang di rumah, tetapi karena di rumah gue juga gaada wifi, sedangkan PJJ gue ini banyak matkulnya yang ngadain kuliah online dengan sistem video conference. Boros kuota dong? jelas :). Oleh karena itu lah gua masih memilih untuk bertahan di Bandung karena kalo gue balik artinya pengeluaran gua buat kuota internet bakal lebih besar :). Tetapi, tentunya keputusan tersebut memberikan konsekuensi buat gue. Semakin kesini, gue cuma khawatir gue gabisa makan aja karena banyak warung di sekitar kostan gue udah tutup wkwk. Jadi hidup gue saat ini sangat bergantung pada layanan pesan antar makanan, serta mie instan :). Kenapa gitu? Karena gue adalah salah satu anak kost yang gak punya alat masak di kosan hehe. Selama ini ada gue kalo masak mie instan cuma menggunakan teko listrik huahahaha.

Eits kayaknya agak offside ya tulisannya hehe. Seperti yang tadi udah gue jelasin, kondisi saat ini ternyata pun makin memburuk. Sehingga emang gak memungkinkan sepertinya untuk mengerjakan project ini bersama kelompok gue. Tetapi untungnya minggu lalu, kelompok gue pun udah mengantisipasi dengan mengerjakan project ini sekalian ketika mengerjakan project sebelumnnya. Untuk yang belum baca tulisan gue sebelumnya, kalian bisa akses di Corona Attacks.

Pada tulisan kali ini, project yang akan gue lakukan adalah penggunaan web-server dan sensor cuaca (gue akan menggunakan DHT11). Menurut gue project ini cukup dibilang mudah karena tutorial yang gunain untuk jadi acuan project ini udah cukup jelas dan tinggal ngubah beberapa potongan kode sedikit aja hehe.

Seperti biasa, sebelum kita memasuki ke tahap pengerjaan project kali ini, berikut adalah peralatan yang perlu kita siapkan:
1. Laptop
2. ESP32
3. DHT11/22
4. Arduino IDE
5. 330 Ohm Resistor
6. Kabel jumper
7. Kabel micro USB
8. Breadboard
Berikut penampakannya:

Alat dan Bahan

Nah, sekarang kalo alatnya udah siap, lansung aja kita ke step berikutnya!

Skema Rangkaian

Sebelum masuk ke bagian web-server, kita perlu menghubungkan sensor cuaca DHT11 ataupun DHT22 ke ESP32 dengan menggunakan pin seperti pada contoh di bawah .

Untuk sekarang ini, gue akan menghubungkan pin DHT paling kiri ke pin GPIO27. Tetapi kita juga bisa ngehubungin ke GPIO lainnya yang fungsinya serupa dengan GPIO27.

Sumber: https://randomnerdtutorials.com/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide/#more-39319

Menginstall Library

Sebelum kita bisa menjalankan project ini, kita perlu meng-install beberapa library:

• DHT dan Adafruit Unified Sensor library untuk membaca input dari sensor DHT.
• ESPAsyncWebServer dan Async TCP library untuk membuat web server.

Berikut adalah langkah-langkah untuk meng-install librarynya:

Menginstall DHT Sensor Library

1. Download DHT Sensor library.
2. Unzip folder .zip dan nantinya kita akan mendapatkan folder DHT-sensor-library-master.
3. Rename folder tersebut menjadi DHT_sensor.
4. Pindahkan folder DHT_sensor ke folder library Arduino IDE.
5. Lalu buka kembali Arduino IDE.

MenginstallAdafruit Unified Sensor Driver

1. Download Adafruit Unified Sensor library.
2. Unzip folder .zip dan kita akan mendapatkan folder Adafruit_sensor-master.
3. Rename folder tersebut menjadi Adafruit_sensor.
4. Pindahkan folder Adafruit_sensor ke folder library Arduino IDE.
5. Lalu buka kembali Arduino IDE.

Menginstall ESPAsyncWebServer library

1. Download ESPAsyncWebServer library.
2. Unzip folder .zip dan kita akan mendapatkan folder ESPAsyncWebServer-master.
3. Rename folder tersebut menjadi ESPAsyncWebServer.
4. Pindahkan folder ESPAsyncWebServer ke folder library Arduino IDE.

Menginstall Async TCP Library

1. Download AsyncTCP library.
2. Unzip folder .zip dan kita akan mendapatkan folder AsyncTCP-master folder.
3. Rename folder tersebut menjadi AsyncTCP.
4. Pindahkan folder AsyncTCP ke folder library Arduino IDE.
5. Lalu buka kembali Arduino IDE.

Kode Program

Di bawah ini adalah kode program yang akan gue gunakan, tapi jangan lupa untuk mengganti beberapa blok kode sesuai dengan konfigurasi rangkaian kalian hehe. Berikut kodenya:

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/
// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
#define DHTPIN 27     // Digital pin connected to the DHT sensor
// Uncomment the type of sensor in use:
//#define DHTTYPE    DHT11     // DHT 11
#define DHTTYPE    DHT22     // DHT 22 (AM2302)
//#define DHTTYPE    DHT21     // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
String readDHTTemperature() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Check if any reads failed and exit early (to try again).
  if (isnan(t)) {    
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}
String readDHTHumidity() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return readDHTTemperature();
  }
  else if(var == "HUMIDITY"){
    return readDHTHumidity();
  }
  return String();
}
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  dht.begin();
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });
  // Start server
  server.begin();
}
 
void loop(){
  
}

Selanjutnya, kita bisa mengkonfigurasi potongan kode tersebut sesuai dengan kreativitas kita masing-masing.

Melakukan Testing

Setelah mengonfigurasi rangkaian dan kode telah selesai, kita dapat meng-upload kode ke ESP32.

Setelah kode berhasil ter-upload, selanjutnya buka Serial Monitor, dan setting baud rate ke angka 115200. Selanjutnya IP Address dari ESP32 akan tercetak pada Serial Monitor.

Ketika kita membuka IP Address tersebut pada browser, maka Voila! nantinya akan ditampilkan halaman yang telah dikonfigurasi pada kode program ESP32. Berikut adalah hasil dari kode program yang gue buat:

Selesai deh project kali ini hehe. Gimana? gampang bukan? Walaupun gue mengalami beberapa kendala seperti lupa ngekonfigurasi ulang kode program tersebut dan sempet ada kendala waktu ngehubungin ESP32 ke wifi yang ada di oksan gue, tapi menurut gue dalam tahap perancangannya project kali ini gak begitu sulit sih hehe.

Sekian dulu tulisan gue kali ini, semoga bisa bermanfaat, dan semoga kasus corona ini bisa segera kelar ya sebelum bulan ramadhan nanti :). Gak kebayang sih kalo ramadhan nanti gak bisa bukber ataupun gak ada tarawih :(.

Oke sekian dari gue,

Enjoy!