Integrasi Frontend Wokwi dengan Backend MySQL

Proyek ini bertujuan untuk mengintegrasikan sensor DHT22, yang terpasang pada perangkat ESP32 melalui simulator Wokwi, dengan backend berbasis Python Flask dan database MySQL. Data suhu dan kelembapan yang diukur oleh DHT22 dikirimkan secara real-time dari ESP32 ke server Flask menggunakan protokol HTTP melalui endpoint POST. Backend Flask bertugas memproses data ini dan menyimpannya ke dalam database MySQL untuk keperluan penyimpanan historis. Selain itu, proyek ini juga menyediakan endpoint GET untuk membaca data yang tersimpan, memungkinkan pengguna untuk memantau kondisi lingkungan secara berkelanjutan melalui tampilan dashboard atau aplikasi front-end berbasis web. Integrasi ini menciptakan sistem IoT sederhana yang mendukung pengumpulan, pengelolaan, dan visualisasi data lingkungan secara efisien.

Deskripsi Proyek

Proyek ini mengimplementasikan sistem IoT sederhana yang mengintegrasikan sensor DHT22 pada ESP32 (disimulasikan menggunakan Wokwi) dengan backend berbasis Python Flask dan database MySQL. Data suhu dan kelembapan yang dihasilkan sensor dikirimkan ke server Flask melalui protokol HTTP, kemudian disimpan dalam MySQL untuk keperluan analisis dan pemantauan historis. Selain itu, sistem menyediakan endpoint untuk membaca data dari database, memungkinkan visualisasi secara real-time.

Tujuan Proyek

1. Mengembangkan sistem IoT sederhana dengan koneksi antara perangkat ESP32 dan server backend.
2. Menyimpan data lingkungan (suhu dan kelembapan) secara terstruktur di database MySQL.
3. Menyediakan API RESTful (GET, POST) untuk mendukung integrasi lebih lanjut.
4. Mengotomasi pemantauan lingkungan menggunakan teknologi IoT.

Komponen Utama

Frontend (Wokwi Simulator):

• ESP32 dengan sensor DHT22 yang membaca suhu dan kelembapan.
• Kode di ESP32 dikembangkan dalam C++ untuk mengirimkan data melalui HTTP ke backend Flask.

Backend (Python Flask):

• Endpoint REST API:
  • POST: Untuk menerima dan menyimpan data dari sensor ke database MySQL.

• GET: Untuk membaca data yang tersimpan.

• PUT: Untuk merubah data yang tersimpan

• Framework Flask digunakan untuk membangun aplikasi backend sederhana.

Database (MySQL):

• Tabel untuk menyimpan data suhu, kelembapan, waktu, dan metadata lainnya.
• MySQL digunakan untuk menyimpan data secara terstruktur dan mendukung query historis.

Arsitektur Sistem

ESP32 (Wokwi) ---> Flask Backend ---> MySQL Database ---> API Response

Fitur Utama

1. Pengumpulan Data Real-Time:
   • ESP32 membaca data dari DHT22 dan mengirimkannya ke backend.
2. Penyimpanan Data:
   • Backend menyimpan data dalam MySQL dengan struktur tabel:

1. Akses Data:
   • Endpoint GET memungkinkan akses data untuk visualisasi atau analisis.

Teknologi yang Digunakan

1. Frontend:
   • Wokwi Simulator.
   • Sensor DHT22.
2. Backend:
   • Python Flask.
   • REST API (GET, POST).
3. Database:
   • MySQL.
4. Tools Pendukung:
   • Postman untuk pengujian API.
   • MySQL Workbench untuk manajemen database.

Langkah Pengembangan

1. Konfigurasi ESP32 di Wokwi:
   • Menulis kode untuk membaca data dari DHT22.
   • Mengirimkan data ke backend menggunakan HTTP.
2. Membangun Backend Flask:
   • Membuat endpoint REST API untuk menerima dan membaca data.
   • Menghubungkan backend dengan database MySQL.
3. Mendesain Database:
   • Membuat tabel untuk menyimpan data sensor.
4. Pengujian dan Validasi:
   • Menggunakan Postman untuk memastikan API berjalan sesuai kebutuhan.
   • Simulasi data sensor di Wokwi untuk memvalidasi proses end-to-end.

Hasil dan Dampak

• Efisiensi Data Collection: Data lingkungan dikumpulkan secara otomatis.
• Integrasi Sistem IoT: Memberikan wawasan untuk pengembangan IoT lebih lanjut, seperti pengelolaan pertanian atau pemantauan ruangan.
• Scalability: Sistem ini dapat dikembangkan untuk mendukung lebih banyak sensor dan perangkat.

Kode ESP32

#include <Wire.h>

#include <LiquidCrystal_I2C.h>

#include <WiFi.h>

#include <HTTPClient.h>

#include <DHT.h>

#define DHTPIN 4       // Pin untuk sensor DHT22

#define DHTTYPE DHT22  // Sensor DHT22

// Inisialisasi DHT sensor

DHT dht(DHTPIN, DHTTYPE);

// Inisialisasi LCD I2C dengan alamat 0x27

LiquidCrystal_I2C lcd(0x27, 16, 2);

// Informasi Wi-Fi

const char* ssid = "Wokwi-GUEST";

const char* password = "";

// API endpoint

const char* serverName = "http://127.0.0.1:4789/api/sensor";

void setup() {

  Serial.begin(115200);

  // Inisialisasi LCD dan DHT

  lcd.begin(16, 2);

  lcd.init();

  lcd.backlight();

  dht.begin();

  // Hubungkan ke Wi-Fi

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi...");

  }

  Serial.println("Connected to WiFi");

  lcd.print(WiFi.localIP());

}

void loop() {

  // Baca suhu dan kelembapan

  float temperature = dht.readTemperature();

  float humidity = dht.readHumidity();
 

  // Tampilkan suhu dan kelembapan di LCD

  lcd.clear();

  lcd.setCursor(0, 0);

  lcd.print("Temp: " + String(temperature) + " C");

  lcd.setCursor(0, 1);

  lcd.print("Humidity: " + String(humidity) + "%");

  // Kirim data ke API

  if(WiFi.status()== WL_CONNECTED){

    HTTPClient http;

    http.begin(serverName);

    http.addHeader("Content-Type", "application/json");

    // Buat payload JSON

    String httpRequestData = "{\"temperature\":\"" + String(temperature) + "\", \"humidity\":\"" + String(humidity) + "\"}";   

    int httpResponseCode = http.POST(httpRequestData);

    if (httpResponseCode > 0) {

      String response = http.getString(); // Dapatkan respon dari server

      Serial.println(httpResponseCode);   // Status code

      Serial.println(response);           // Data yang diterima

    } else {

      Serial.print("Error on sending POST: ");

      Serial.println(httpResponseCode);

    }

    http.end();

  }

  // Tunggu 5 detik sebelum pembacaan data selanjutnya

  delay(5000);

}

Kesimpulan

Proyek ini menunjukkan bagaimana teknologi IoT dapat diintegrasikan dengan sistem backend untuk menghasilkan solusi yang efisien dan scalable. Dengan penggunaan perangkat IoT seperti ESP32 dan DHT22, serta backend berbasis Python Flask dan database MySQL, sistem ini berhasil menciptakan solusi untuk pengumpulan, penyimpanan, dan akses data lingkungan secara otomatis.