Tugas: Membuat Web Server Stasiun Cuaca Menggunakan ESP32

6 min readApr 2, 2021

Halo! Pada artikel kali ini, saya akan menjelaskan bagaimana cara menampilkan hasil bacaan sensor cuaca ke sebuah website, sehingga bisa digunakan sebagai sebuah Web Server Stasiun Cuaca. Web Server ini dibuat menggunakan ESP32, memakai fitur Wi-Fi yang dimilikinya, serta sensor BMP280.

Alat dan Bahan

Berikut merupakan alat dan bahan yang dibutuhkan:

1 buah ESP32 Development Board
1 buah Breadboard
4 buah kabel male to male
1 buah sensor BMP280

Diagram Rangkaian

Berikut merupakan gambar diagram rangkaian yang digunakan untuk projek ini.

Setiap pin dari BMP280 dihubungkan ke pin GPIO pada ESP32 yang bersangkutan. Pin GND dihubungkan satu sama lain. Pin 3V3 pada ESP32 dihubungkan pada pin VCC pada sensor. Pin SCL dihubungkan ke GPIO22 dari ESP32, dan pin SDA dihubungkan ke GPIO21 dari ESP32. Perlu diperhatikan bahwa susunan pin pada sensor Anda mungkin berbeda. Lihat tulisan pada setiap pin untuk tahu koneksi antar pin yang benar.

Kode Program

Berikut merupakan kode program yang digunakan untuk menjalankan Web Server dan menampilkan hasil bacaan sensor dalam projek ini. Kode program diambil dari sumber ini dengan sedikit pengubahan untuk komponen BMP280 (sensor di sumber menggunakan BME280).

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>
#include <Adafruit_Sensor.h>//uncomment the following lines if you're using SPI
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/#define SEALEVELPRESSURE_HPA (1013.25)Adafruit_BMP280 bmp; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";// Set web server port number to 80
WiFiServer server(80);// Variable to store the HTTP request
String header;// Current time
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(115200);
  bool status;// default settings
  // (you can also pass in a Wire library object like &Wire2)
  //status = bme.begin();  
  if (!bmp.begin(0x76)) {
    Serial.println("Could not find a valid BMP280 sensor, check wiring!");
    while (1);
  }
  bmp.setSampling(Adafruit_BMP280::MODE_NORMAL,     /* Operating Mode. */
                  Adafruit_BMP280::SAMPLING_X2,     /* Temp. oversampling */
                  Adafruit_BMP280::SAMPLING_X16,    /* Pressure oversampling */
                  Adafruit_BMP280::FILTER_X16,      /* Filtering. */
                  Adafruit_BMP280::STANDBY_MS_500); /* Standby time. */
                  
  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}void loop(){
  WiFiClient client = server.available();   // Listen for incoming clientsif (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    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();
            
            // Display the HTML web page
            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 table 
            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
            client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #0043af; color: white; }");
            client.println("tr { border: 1px solid #ddd; padding: 12px; }");
            client.println("tr:hover { background-color: #bcbcbc; }");
            client.println("td { border: none; padding: 12px; }");
            client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");
            
            // Web Page Heading
            client.println("</style></head><body><h1>ESP32 with BME280</h1>");
            client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
            client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
            client.println(bmp.readTemperature());
            client.println(" *C</span></td></tr>");  
            client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
            client.println(1.8 * bmp.readTemperature() + 32);
            client.println(" *F</span></td></tr>");       
            client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
            client.println(bmp.readPressure() / 100.0F);
            client.println(" hPa</span></td></tr>");
            client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
            client.println(bmp.readAltitude(SEALEVELPRESSURE_HPA));
            client.println(" m</span></td></tr>"); 
            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("");
  }
}

Program dimulai dengan memasukkan beberapa Library agar program bisa berjalan dengan baik, seperti Library untuk Wi-Fi dan untuk sensor BMP280 (dapat di-download dengan mengakses Tools -> Manage Libraries, lalu mencari BMP280) dan juga Adafruit Unified Sensor. Patut diperhatikan bahwa kode di atas merupakan gabungan dari contoh kode dari link yang diberikan di atas dan dipadukan dengan contoh kode bawaan untuk BMP280 (File -> Examples -> Adafruit BMP280 Library -> bmp280test).

Setelah itu, program menginisialisasi beberapa variabel untuk sensor dan untuk keperluan koneksi. Kemudian, masukkan informasi dari koneksi Wi-Fi yang anda miliki. Informasi yang dibutuhkan adalah nama dari Wi-Fi anda (SSID) dan kata sandi dari Wi-Fi anda. Masukkan informasi tersebut pada bagian

const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Setelah itu, terdapat inisialisasi sensor dengan bmp.begin(0x76). Perhatikan bahwa 0x76 merupakan alamat sensor pada ESP32. Alamat ini mungkin berbeda, dan anda dapat melakukan pencarian alamat sensor anda dengan menggunakan kode di sini (bagian “Code to get the I2C address”). Terjadi inisialisasi standar untuk sensor, lalu Wi-Fi juga diinisialisasi.

Seluruh bagian kode berikutnya dijalankan secara terus menurus. Inti dari bagian program ini adalah memeriksa apakah ada perangkat yang terhubung ke alamat IP yang telah disebutkan sebelumnya. Selain itu, bagian program ini membuat sebuah tabel dalam format HTML (bahasa yang digunakan untuk membuat website). Masing-masing tabel dipasangkan dengan perintah untuk mendapatkan bacaan dari sensor.

Hasil

Berikut merupakan tangkapan layar dari projek ini.

Analisis dan Kesimpulan

Pada artikel sebelumnya, saya berkata bahwa banyak kemungkinan implementasi yang dapat dilakukan dari Web Server ini. Pembuatan Website Stasiun Cuaca ini merupakan salah satu kemungkinan tersebut. Saya sempat mengalami permasalahan karena kode contoh yang saya ikuti menggunakan sensor BME280 (beda E dan P). Namun, ternyata dengan kode bawaan dari BMP280, kode ini tetap dapat berjalan dengan baik dalam menampilkan hasil bacaan sensor.

Rangkaian dari projek ini pun cukup sederhana. Tentunya, perlu diperhatikan posisi pin yang benar pada sensor yang Anda gunakan. Pada sensor yang saya gunakan sendiri, pin SDA dan SCL terbalik, sehingga dibutuhkan penyesuaian.

Sebagai kesimpulan, dalam projek ini kita telah berhasil membuat sebuah Web Server yang dapat digunakan sebagai Weather Station untuk menerima hasil bacaan cuaca dari sensor. Projek ini memanfaatkan beberapa alat, seperti ESP32 dengan fitur Wi-Fi dan sensor BMP280. Terima kasih telah membaca, selamat bereksplorasi!