Proyek ini akan mengubah ESP32-mu menjadi sebuah mini server yang bisa diakses melalui jaringan WiFi. Siapa pun yang terhubung ke jaringan yang sama dapat meminta data sensor dari ESP32, dan data tersebut akan dikirimkan dalam format JSON, format standar untuk pertukaran data di dunia web.

---

1. Kebutuhan Proyek

Pastikan kamu memiliki semua komponen yang dibutuhkan sebelum memulai.

Perangkat Keras (Hardware) 🔌

• ESP32 Development Board: Sebagai unit pemroses utama.
• Sensor Analog: Contohnya potensiometer, sensor cahaya (LDR), atau sensor kelembaban tanah. Untuk tutorial ini, potensiometer adalah pilihan termudah untuk simulasi.
• Breadboard dan Kabel Jumper.
• Kabel Micro USB.

Perangkat Lunak (Software) 💻

• Arduino IDE: Pastikan sudah ter-install dan sudah ditambahkan dukungan untuk board ESP32.

---

2. Rangkaian Proyek

Hubungkan sensor analog ke ESP32. Kita akan menggunakan potensiometer sebagai contoh. Potensiometer memiliki tiga kaki: VCC, GND, dan Output.

• VCC (kaki terluar) → 3V3 pada ESP32.
• GND (kaki terluar lainnya) → GND pada ESP32.
• Output/Wiper (kaki tengah) → GPIO 34 (Pin D34) pada ESP32.

Catatan: GPIO 34 adalah pin yang hanya bisa berfungsi sebagai input analog (ADC), sehingga sangat cocok untuk proyek ini.

---

3. Program Dasar

c++

#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "NAMA_WIFI";       // Ganti dengan SSID WiFi kamu
const char* password = "PASSWORD";    // Ganti dengan password WiFi kamu

const int sensorPin = 34;    // Misalnya sensor di GPIO34 (input analog ESP32)

WebServer server(80);

void setup() {
  Serial.begin(115200);

  // Koneksi ke WiFi
  Serial.print("Menghubungkan ke WiFi: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi tersambung!");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Endpoint utama
  server.on("/", []() {
    server.send(200, "text/plain", "ESP32 Sensor Server Aktif");
  });

  // Endpoint sensor
  server.on("/sensor", []() {
    int sensorValue = analogRead(sensorPin);   // Baca nilai sensor
    // int sensorValue = random(0, 100);       // Atau dummy data random
    String json = "{\"value\": " + String(sensorValue) + "}";
    server.send(200, "application/json", json);
    Serial.println("Sensor: " + String(sensorValue));
  });

  server.begin();
  Serial.println("Web server dimulai...");
}

void loop() {
  server.handleClient();
}

---

4. Penjelasan Kode Program

Mari kita pahami alur kerja dari kode yang kamu sediakan.

Bagian 1: Inisialisasi dan Konfigurasi

C++

#include <WiFi.h>
#include <WebServer.h>

// --- GANTI BAGIAN INI ---
const char* ssid = "NAMA_WIFI";      // Ganti dengan nama (SSID) WiFi kamu
const char* password = "PASSWORD";  // Ganti dengan password WiFi kamu
// -------------------------

const int sensorPin = 34; // Sensor dihubungkan ke GPIO34

WebServer server(80); // Membuat objek server pada port 80 (HTTP)

• #include <WiFi.h> & #include <WebServer.h>: Mengimpor library yang diperlukan untuk fungsi WiFi dan web server.
• ssid & password: Variabel krusial yang wajib kamu ubah. Sesuaikan dengan nama dan password jaringan WiFi-mu.
• sensorPin: Mendefinisikan pin tempat kita menghubungkan output sensor, yaitu GPIO 34.
• WebServer server(80): Menginisialisasi server yang akan berjalan di port 80.

Bagian 2: Fungsi setup()

Fungsi ini dieksekusi satu kali saat ESP32 pertama kali dinyalakan. C++

void setup() {
  Serial.begin(115200);

  // Koneksi ke WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi tersambung!");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP()); // Cetak IP Address ESP32

  // ... (lanjutan di bawah)

• Serial.begin(115200): Memulai komunikasi serial untuk menampilkan pesan status di Serial Monitor.
• WiFi.begin(...): Memulai proses koneksi ke jaringan WiFi. Loop while akan menunggu hingga koneksi berhasil.
• Serial.println(WiFi.localIP()): Setelah terhubung, kode ini akan mencetak alamat IP ESP32. Alamat ini sangat penting untuk mengakses server.

Bagian 3: Endpoint Web Server (di dalam setup())

Endpoint adalah alamat URL spesifik yang akan direspons oleh server. Inilah inti dari fungsionalitas server kita. C++

  // Endpoint utama
  server.on("/", []() {
    server.send(200, "text/plain", "ESP32 Sensor Server Aktif");
  });

  // Endpoint untuk meminta data sensor
  server.on("/sensor", []() {
    int sensorValue = analogRead(sensorPin); // Baca nilai sensor

    // Format data ke dalam bentuk string JSON
    String json = "{\"value\": " + String(sensorValue) + "}";

    // Kirim respons JSON ke client
    server.send(200, "application/json", json);
    Serial.println("Sensor: " + String(sensorValue));
  });

  server.begin(); // Mulai web server
  Serial.println("Web server dimulai...");
}

• server.on("/", ...): Ini adalah endpoint root atau utama. Jika kita mengakses alamat IP ESP32, server akan merespons dengan teks “ESP32 Sensor Server Aktif”.
• server.on("/sensor", ...): Ini adalah endpoint untuk data. Ketika alamat http://<IP_ADDRESS>/sensor diakses:
  1. analogRead(sensorPin): ESP32 membaca nilai tegangan analog dari sensor (nilai mentahnya berkisar dari 0 hingga 4095).
  2. String json = ...: Nilai sensor tersebut diformat menjadi sebuah string JSON. Contoh: {"value": 1750}.
  3. server.send(200, "application/json", json): Server mengirimkan respons ke browser. Tipe kontennya diatur sebagai application/json agar browser atau aplikasi lain tahu cara menanganinya.

Bagian 4: Fungsi loop()

C++

void loop() {
  server.handleClient(); // Menangani permintaan yang masuk ke server
}

• server.handleClient(): Baris tunggal ini membuat ESP32 terus-menerus “mendengarkan” setiap permintaan yang masuk dari klien (browser) dan menjalankannya.

---

5. Langkah-Langkah Penggunaan

1. Rangkai Sirkuit: Hubungkan komponen sesuai dengan diagram di atas.
2. Masukkan Kode: Salin kode program ke Arduino IDE.
3. Ubah Kredensial WiFi: Ganti NAMA_WIFI dan PASSWORD di dalam kode.
4. Pilih Board & Port: Di menu Tools, pilih board “ESP32 Dev Module” dan Port COM yang benar.
5. Upload Kode: Klik tombol Upload (panah ke kanan).
6. Cari Alamat IP: Buka Serial Monitor (Tools > Serial Monitor) dan atur baud rate ke 115200. Tunggu hingga proses koneksi WiFi selesai dan catat IP Address yang muncul.
7. Uji Server: Buka browser di perangkat (HP/laptop) yang terhubung ke jaringan WiFi yang sama. – Kunjungi alamat IP yang kamu catat (misalnya http://192.168.1.12). Kamu akan melihat teks “ESP32 Sensor Server Aktif”. – Sekarang, kunjungi alamat IP tersebut ditambah /sensor (misalnya http://192.168.1.12/sensor). Kamu akan melihat output data dalam format JSON, seperti ini:

JSON

{"value": 2048}

Jika kamu menggunakan potensiometer, coba putar kenopnya lalu segarkan (refresh) halaman browser. Kamu akan melihat nilai value berubah!

Kenapa Menggunakan JSON?

JSON (JavaScript Object Notation) adalah format data yang ringan dan mudah dibaca oleh manusia maupun mesin. Dengan menyajikan data dalam format ini, kamu memudahkan aplikasi lain (misalnya aplikasi Android, dashboard web, atau program Python) untuk mengambil dan memproses data sensormu secara otomatis. Ini adalah langkah pertama untuk membangun proyek IoT yang lebih kompleks.

---

6. Integrasi Dengan UnIoT

Untuk bisa mengontrol relay dengan UnIoT hanya dengan memasukkan address ke textbox HTTP URL Device: http://192.168.1.12/sensor