Kontrol ESP32 dari Ponsel: Setup BlueGrays IoT dalam 5 Langkah

Kontrol ESP32 dari ponsel artinya menyalakan dan mematikan relay, LED, atau motor di board langsung dari ponsel di sakumu, sekaligus melihat nilai sensor di layar ponsel. Inilah langkah pertama paling seru untuk belajar IoT. ESP32 sudah punya Wi-Fi 2,4 GHz dan Bluetooth di dalamnya, jadi kamu nggak perlu modul tambahan. Pertanyaannya tinggal cara mana yang mau kamu pilih. Untuk kontrol ESP32 dengan aplikasi, kamu bisa menulis web server sendiri, terhubung lewat Bluetooth, atau membuat bot Telegram. Panel cloud seperti Blynk dan Arduino IoT Cloud juga bisa jadi pilihan. Tiap metode punya waktu setup, jangkauan, dan batasan yang berbeda.

Di panduan ini kamu akan menyiapkan cara paling singkat langkah demi langkah: fitur BlueGrays IoT di aplikasi BlueGrays. Kodenya disiapkan Ohmi untukmu. Kamu cukup merakit rangkaian dan meng-upload kode ke ESP32 dari Arduino IDE. Board terhubung ke server BlueGrays lewat koneksi terenkripsi, jadi ponsel dan board-mu nggak perlu berada di jaringan yang sama. Lampu di rumah bisa kamu nyalakan dari kantor pakai data seluler. Pertama kamu akan membuat sakelar lampu dengan relay. Setelah itu kamu menambahkan DHT22 ke rangkaian dan menampilkan suhu serta kelembapan di ponsel sebagai nilai live dan grafik. Di akhir artikel ada perbandingan dengan metode lain dan tabel solusi untuk error yang paling sering muncul.

5 cara mengontrol ESP32 dari ponsel

• Web server lokal: ESP32 menyajikan halaman web, lalu kamu membuka alamat IP board dari browser ponsel. Nggak perlu akun tambahan, tapi biasanya hanya bisa diakses dari jaringan Wi-Fi yang sama. Detailnya ada di artikel WebSocket ESP32.
• Bluetooth Classic dan BLE: Nggak butuh internet dan router, ponsel terhubung langsung ke board. Jangkauannya di dalam ruangan biasanya sekitar 10 meter. Kedua jenisnya kami bahas di panduan Bluetooth dan BLE ESP32.
• Bot Telegram: Kamu mengirim perintah ke board lewat pesan dan menerima notifikasi dari board. Bisa dipakai dari luar rumah, tapi nggak menyediakan panel seperti grafik atau slider. Untuk setup-nya, lihat artikel bot Telegram.
• Panel cloud (Blynk, Arduino IoT Cloud): Kamu mendefinisikan template dan variabel di konsol web, menulis kode sendiri, dan mendesain panel di ponsel sendiri. Caranya fleksibel, tapi kamu perlu mempelajari beberapa layar dan konsep yang berbeda. Untuk Blynk sudah ada panduan Blynk IoT dengan ESP32.
• BlueGrays IoT: Di aplikasi kamu memilih salah satu dari 8 template siap pakai. Ohmi menyiapkan kode dengan pengaturan pin dan kunci perangkatmu. Di ponsel, sakelar, slider, pemilih warna, dan grafik muncul otomatis sesuai template. Kamu nggak perlu mendesain panel atau menyiapkan server.

Yang dibutuhkan: daftar komponen dan software

Bagaimana cara kerja kontrol ESP32 dengan aplikasi?

Di BlueGrays IoT, ponsel dan ESP32 nggak terhubung langsung satu sama lain. Begitu dinyalakan, board lebih dulu terhubung ke jaringan Wi-Fi 2,4 GHz di rumah. Lalu board membuka koneksi WebSocket terenkripsi (TLS) ke server BlueGrays lewat port 443 dan menjaga koneksi itu tetap terbuka. Aplikasi di ponsel juga terhubung ke server yang sama. Ketika kamu menyentuh sakelar lampu, perintah berjalan dari ponsel ke server, lalu dari server ke board. Karena koneksinya sudah terbuka, perintah sampai tanpa menunggu. Nilai suhu yang dikirim board menempuh jalur yang sama ke arah sebaliknya. Port 443 adalah port yang juga dipakai situs web. Karena itu kamu nggak perlu mengatur port forwarding di router, menyiapkan server sendiri, atau tahu alamat IP board.

Yang memperkenalkan board ke server adalah kunci perangkat. Kunci ini berupa teks rahasia berawalan bgd_ yang dibuat aplikasi ketika perangkat dibuat. Ketika membuka koneksi, board mengirim kunci di header koneksi. Server lalu meneruskan perintah dari ponsel ke board yang tepat. Kunci ini nggak dicetak ke Serial Monitor. Kalau koneksi putus, library BlueGraysIoT mencoba lagi sendiri dengan jeda yang makin panjang. Nilai yang diukur selama offline dikirim begitu tersambung lagi, dan ketika listrik padam lalu menyala lagi, status terakhir sakelar dipulihkan. Cukup board dan ponselmu punya akses internet: board bisa di Wi-Fi rumah, sementara ponsel pakai data seluler di kota lain.

Rangkaian: menghubungkan modul relay ke ESP32

Di template Lampu relay dan Stasiun ruangan, pin bawaannya seperti ini: kaki IN relay ke GPIO26, kaki data DHT22 ke GPIO4. Pin ini bisa kamu ubah di langkah ke-3 setup. Cek susunan pin board-mu di alat Pinout. Di beberapa board, pin 5 V bertuliskan VIN, di board lain 5V.

Setup BlueGrays IoT: 5 langkah di aplikasi

Di aplikasi, buka Labku › Perangkatku › Tambah perangkat baru. Di bagian atas layar kamu akan melihat penghitung seperti "Langkah 1 / 5". Tiga langkah pertama dikerjakan di ponsel, langkah keempat di komputer, dan langkah kelima kembali di ponsel.

1. Board dan template: Di pertanyaan "Board-mu yang mana?" pilih ESP32, lalu di pertanyaan "Mau dipakai untuk apa?" tandai salah satu dari 8 template. Untuk percobaan pertama, "Lampu relay" atau "Stasiun ruangan" yang pakai sensor adalah awal yang bagus. Beri perangkat nama yang mudah kamu kenali, misalnya "Lampu ruang tamu".
2. Komponen dan rangkaian: Daftar "Siapkan komponen" menampilkan komponen yang dibutuhkan template. Skema "Sambungkan kabel" menggambarkan kaki mana masuk ke pin mana. Di template relay kamu akan melihat peringatan "Kalau mau pakai 220 V, kerjakan bersama orang yang paham. Coba dulu dengan LED."
3. Wi-Fi dan kode: Masukkan nama jaringan Wi-Fi dan kata sandinya. Nama jaringan harus persis sama dan termasuk pita 2,4 GHz. Kalau mau, ganti GPIO26 dan GPIO4 dengan pin lain di bagian "Pin koneksi". Lalu tekan tombol "Buat perangkat dan siapkan kode". Ohmi menyiapkan kode dengan kunci perangkatmu; pindahkan kode ke komputer lewat "Salin kode" atau "Bagikan".
4. Upload di Arduino IDE: Kamu meng-upload kode ke ESP32. Sub-langkah di aplikasi kami jelaskan satu per satu di bagian berikutnya.
5. Koneksi: Layar "Menunggu board-mu" otomatis lanjut begitu board terhubung ke server.

Langkah 4 dan 5: upload kode dan cek koneksi

1. Kalau Arduino IDE belum terinstal, instal dulu. Langkahnya ada di artikel Cara Instal Arduino IDE 2.
2. Di Boards Manager, cari "esp32" lalu instal paket esp32 dari Espressif. Paket ini harus versi 3.x; kalau yang terinstal masih versi 2.x, perbarui. Instalasi paketnya juga ada di artikel Apa Itu ESP32?.
3. Colokkan board dengan kabel USB yang bisa mengirim data. Di menu Tools › Board pilih ESP32 Dev Module (atau model board-mu), lalu di Tools › Port pilih port yang baru muncul. Kalau port nggak muncul, ganti kabelnya. Setelah itu instal driver CP210x atau CH340 sesuai chip USB di board-mu.
4. Di Library Manager, cari BlueGraysIoT lalu tekan Install. Ketika ditanya soal dependensi, pilih "Install All"; dengan begitu WebSockets, ArduinoJson, dan DHT sensor library ikut terinstal. Kalau mentok, lihat panduan Cara Instal Library Arduino.
5. Buka sketch baru, hapus isinya, tempel kode yang kamu salin dari aplikasi, lalu tekan Upload. Kalau di jendela bawah tertahan di tulisan "Connecting…", tekan dan tahan tombol BOOT di board. Lepaskan tombolnya begitu persentase penulisan mulai muncul.
6. Buka Serial Monitor dan atur kecepatannya ke 115200. Kamu seharusnya melihat "Wi-Fi connected" lebih dulu, lalu beberapa detik kemudian baris "BlueGrays IoT: connected".

Begitu tulisan connected muncul di Serial Monitor, layar "Menunggu board-mu" di ponsel berganti ke layar "Terhubung: Nilai sekarang datang secara real-time." Sekarang sentuh sakelar lampu: kamu seharusnya mendengar bunyi klik relay atau melihat LED menyala. Kalau board belum terhubung dalam 2 menit, aplikasi memintamu memeriksa tiga hal. Apakah kamu memilih jaringan 2,4 GHz? Apakah di Serial Monitor muncul "Wi-Fi connected"? Apakah huruf besar-kecil di kata sandi sudah benar? Kalau baris pertama sama sekali nggak muncul, masalahnya ada di sisi Wi-Fi. Dalam kasus itu, daftar cek di artikel ESP32 tidak mau terhubung ke Wi-Fi bisa membantumu.

Kode pertama: menyalakan dan mematikan lampu dari ponsel

Kode yang disiapkan aplikasi untuk template "Lampu relay" kurang lebih seperti di bawah ini. Tiga baris paling atas sudah terisi dengan kunci perangkat, nama jaringan, dan kata sandimu; di sini ditampilkan dengan placeholder. Sisa kodenya pendek: satu fungsi relay, satu definisi sakelar, dan loop() satu baris.

1/*
2 * Salon lambası · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9
10// Uygulama bu üç satırı senin bilgilerinle doldurur / The app fills these three lines with your details
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20
21void setup() {
22  Serial.begin(115200);
23  pinMode(RELAY_PIN, OUTPUT);
24  setRelay(false);                  // açılışta lamba kapalı / lamp off at power-up
25  bg.onSwitch("lamba", setRelay);   // uygulamadaki "Lamba" anahtarı / the "Lamba" switch in the app
26  bg.setDebug(Serial);              // durum mesajları Seri Port Ekranı'na / status messages to the Serial Monitor
27  bg.setLanguage(BG_LANG_TR);
28  bg.begin(WIFI_NAME, WIFI_PASSWORD);
29}
30
31void loop() {
32  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
33}
34

Menambahkan sensor: Stasiun ruangan (relay + DHT22)

Sekarang ayo tambahkan DHT22 ke board yang sama dan kirim data ke ponsel. Kalau di aplikasi kamu memilih template "Stasiun ruangan", di samping sakelar lampu akan muncul nilai suhu (°C) dan kelembapan (%) beserta grafiknya. DHT22 mengukur rentang -40 sampai 80 °C dengan akurasi sekitar ±0,5 °C. Kelembapan diukur di rentang 0–100% dan sensor bisa dibaca paling cepat sekali tiap 2 detik. Hubungkan kaki data ke GPIO4, VCC ke 3V3, dan GND ke GND. Cara kerja keluarga DHT kami jelaskan sambil dibandingkan di artikel Sensor Suhu dan Kelembapan DHT11.

1/*
2 * Oda istasyonu · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9#include <DHT.h>
10
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20DHT dht(4, DHT22);                   // DHT22 veri ucu GPIO4 / DHT22 data on GPIO4
21unsigned long lastReadMs = 0;
22
23void setup() {
24  Serial.begin(115200);
25  pinMode(RELAY_PIN, OUTPUT);
26  setRelay(false);
27  bg.onSwitch("lamba", setRelay);
28  dht.begin();
29  bg.setDeadband("sicaklik", 0.1);   // 0,1 °C değişmeden gönderme / send only after a 0.1 °C change
30  bg.setDeadband("nem", 1.0);        // %1 değişmeden gönderme / send only after a 1 % change
31  bg.setDebug(Serial);
32  bg.setLanguage(BG_LANG_TR);
33  bg.begin(WIFI_NAME, WIFI_PASSWORD);
34}
35
36void loop() {
37  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
38  if (millis() - lastReadMs >= 2000) {  // DHT22 en fazla 2 saniyede bir okunur / DHT22 reads at most every 2 s
39    lastReadMs = millis();
40    bg.send("sicaklik", dht.readTemperature());
41    bg.send("nem", dht.readHumidity());
42  }
43}
44

Bagian relay sama dengan kode pertama; ada tiga hal baru. Yang pertama baris bg.send("sicaklik", dht.readTemperature()): mengirim nilai dari board ke aplikasi, dan parameter pertama adalah nama variabel di aplikasi (sicaklik = suhu). Yang kedua baris bg.setDeadband("sicaklik", 0.1). Baris ini menentukan selisih perubahan terkecil: suhu nggak dikirim ulang sebelum berubah 0,1 °C, dan untuk kelembapan selisihnya 1%. Yang ketiga pengecekan millis() - lastReadMs >= 2000 di dalam loop. Sensor dibaca tiap 2 detik, tapi di sela-selanya bg.loop() tetap berjalan tanpa menunggu. Library hanya mengirim nilai ketika berubah dan nggak melebihi kecepatan paketmu. Untuk variabel yang sama, jarak antara dua pengiriman minimal 1 detik di paket gratis dan minimal 0,2 detik di Premium. Batas ini dicek di server; mengubah angka di kode nggak akan menembusnya. Kalau suhu ruangan bertahan di 23,4 °C selama beberapa menit, board nggak mengirim nilai baru; begitu jadi 23,5 °C, satu pesan terkirim. Kalau kabel longgar atau pull-up kurang, pembacaan jadi tidak valid (NaN). Kalau nilai nggak muncul, cek dulu sambungan GPIO4 dan catu dayanya.

Apa yang kamu lihat di ponsel?

• Status: Di bagian atas layar perangkat tertulis Online atau Offline, dan di bawahnya ada info "Data terakhir … lalu". Dari sinilah kamu pertama kali tahu apakah board benar-benar terhubung.
• Kontrol: Di template lampu muncul sakelar nyala/mati. Di template LED strip RGB ada pemilih warna, kecerahan 0–100%, dan pilihan efek. Di template tirai ada slider sudut 0–180°.
• Nilai live dan grafik: Tersedia rentang 1 j, 24 j, 7 hari, dan 30 hari. Di tampilan 7 dan 30 hari ditampilkan rata-rata per jam. Grafik menampilkan nilai Terendah, Tertinggi, dan Terakhir. Selama board tetap terhubung, satu titik baru ditambahkan setiap menit.
• Kode dan kunci: Seluruh kode, kunci perangkat, dan info Wi-Fi bisa kamu lihat lagi di sini nanti. Kalau perlu memprogram ulang board, salin kodenya dari sini.
• Perbarui kunci: Pakai ini kalau ada orang yang melihat kuncimu atau kamu mengganti board. Kunci lama langsung tidak berlaku, dan kamu cukup meng-upload kode baru ke board sekali.
• Hapus perangkat: Perangkat dan riwayat grafiknya dihapus, dan jatah perangkatmu kembali.

Gratis dan Premium: seberapa banyak yang bisa kamu pakai?

Perangkat pertamamu gratis. Untuk membuat sakelar lampu atau stasiun ruangan dengan satu ESP32, kamu nggak butuh apa-apa lagi. Di Stasiun ruangan, suhu dan kelembapan adalah dua variabel terpisah. Di paket gratis, nilai live keduanya tetap sampai ke ponsel, tapi riwayat grafik hanya disimpan untuk satu variabel. Perbedaan antar paket ada di bawah; detailnya di artikel BlueGrays Premium: gratis vs Premium.

Perbandingan dengan metode lain

Pilihan yang tepat tergantung kebutuhanmu. Kalau sama sekali nggak ada internet, Bluetooth atau web server lokal adalah satu-satunya pilihan. BlueGrays IoT, Blynk, dan Arduino IoT Cloud membutuhkan akses internet di board dan ponsel. Kalau kamu ingin setup yang fleksibel, seperti mendesain antarmuka dari nol atau menghubungkan ke Home Assistant, MQTT dan Home Assistant serta panel cloud menawarkan pilihan yang lebih luas. Jumlah template siap pakai di BlueGrays IoT ada 8. Sebagai gantinya, skema rangkaian, daftar komponen, kode, dan antarmuka ponsel datang dalam keadaan siap dan saling cocok. Selama belajar, kemungkinan kamu salah di satu bagian jadi lebih kecil.

Keamanan: kunci, kata sandi Wi-Fi, dan kode

• Kunci perangkat adalah identitas board-mu. Orang yang tahu kunci berawalan bgd_ bisa menyamar sebagai board-mu. Karena itu jangan bagikan kunci di screenshot, forum, atau grup chat.
• Kata sandi Wi-Fi tetap di ponsel. Kata sandi nggak dikirim ke server; nama jaringan disimpan bersama perangkat supaya kode bisa ditampilkan lagi nanti. Tapi di dalam kode yang di-upload ke board, kata sandinya tertulis.
• Jangan bagikan kode. Seperti yang juga diperingatkan aplikasi, di dalam kode ada kunci perangkat dan kata sandi Wi-Fi-mu. Kalau mau menunjukkan kode di forum untuk minta bantuan, hapus dulu baris DEVICE_KEY, WIFI_NAME, dan WIFI_PASSWORD.
• Koneksinya terenkripsi. Lalu lintas antara board dan server berjalan dengan TLS di port 443, jadi orang di jaringan yang sama nggak bisa membaca perintahnya.
• Kalau curiga, perbarui kunci. Tombol Perbarui kunci langsung membuat kunci lama tidak berlaku. Kalau board mau kamu berikan ke orang lain, perbarui kunci atau hapus perangkatnya.

Error yang sering muncul dan solusinya

Ide proyek IoT yang bisa kamu buat dengan ESP32

• Sakelar lampu: Versi lengkap rangkaian pertama di artikel ini ada di proyek Sakelar Lampu IoT ESP32 (Relay). Proyek ini dilengkapi skema rangkaian dan daftar komponen.
• Stasiun ruangan: Relay dan DHT22 dalam satu rangkaian, lengkap dengan grafik suhu: Stasiun Ruangan IoT ESP32 (Relay + DHT22).
• Penyiraman tanaman: Sensor kelembapan tanah dihubungkan ke GPIO34 (salah satu pin ADC1). Ketika kelembapan turun di bawah slider Ambang penyiraman di ponsel, pompa menyala, dan mati lagi ketika naik 10 poin di atas ambang. Halaman proyeknya: Penyiraman Tanaman IoT ESP32 (Sensor Kelembapan + Pompa). Untuk kalibrasi sensor, lihat juga artikel Sensor Kelembapan Tanah.
• LED strip RGB: Pilih warna, kecerahan, dan efek (Statis, Pelangi, Napas, Berkedip) untuk LED strip WS2812B 30 LED di GPIO13 dari ponsel: LED Strip RGB IoT ESP32 (WS2812B). 30 LED dalam warna putih penuh bisa menarik arus sekitar 1,8 A; beri daya strip dari sumber 5 V terpisah. Detailnya di artikel LED Strip WS2812B NeoPixel.
• Pembuka tirai: Putar servo SG90 di GPIO18 dengan slider 0–180°: Pembuka Tirai IoT ESP32 (Servo SG90). Beri daya servo juga dari sumber 5 V terpisah dan satukan GND-nya.
• Template lain: Proyek sensor pintu, penghitung gerakan, dan suhu dan kelembapan dijelaskan dengan Pico W. Template ini juga bisa kamu pilih untuk ESP32 di aplikasi.

Setelah jalur antara board, server, dan ponsel sudah kamu siapkan sekali, menambahkan perangkat baru cuma butuh beberapa menit. Mulai dengan sakelar lampu, lalu lihat data mengalir ke ponsel dengan DHT22, kemudian lanjut ke proyek yang lebih besar seperti penyiraman atau tirai. Di aplikasi BlueGrays kamu bisa melihat proyek IoT ESP32 ini langkah demi langkah lengkap dengan skema rangkaian dan kodenya. Pakai filter proyek IoT di Jelajah, dan dengan kartu "Pasang sebagai perangkat IoT" di halaman proyek, kamu bisa langsung menghubungkan rangkaian yang sama ke ponselmu.