Dalam era teknologi yang semakin maju, Internet of Things (IoT) menjadi salah satu inovasi yang banyak digunakan untuk mengotomatisasi berbagai perangkat. Salah satu komponen penting dalam ekosistem IoT adalah modul DST-ESP8266, yang memungkinkan perangkat keras terhubung ke internet dan dikendalikan dari jarak jauh. Artikel ini akan membahas bagaimana membangun sebuah web server sederhana menggunakan DST-ESP8266 untuk mengontrol dua relay dan mengelola koneksi WiFi.
Dalam proyek ini, DST-ESP8266 akan berfungsi sebagai pusat pengendali yang menghubungkan perangkat relay dengan jaringan WiFi. Relay digunakan untuk mengontrol perangkat listrik yang lebih besar, seperti lampu atau motor, melalui sinyal elektronik dari DST-ESP8266. Koneksi WiFi memungkinkan kita untuk mengakses dan mengendalikan relay tersebut dari mana saja melalui halaman web yang dihosting oleh DST-ESP8266.
Kode yang disertakan dalam artikel ini menunjukkan bagaimana mengkonfigurasi DST-ESP8266 untuk menghubungkan ke jaringan WiFi menggunakan WiFiManager, yang memudahkan pengguna untuk mengatur koneksi WiFi tanpa perlu menuliskan SSID dan kata sandi dalam kode. Selain itu, kode ini juga mencakup pembuatan beberapa rute (route) untuk halaman web, yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan relay serta mengatur ulang koneksi WiFi jika diperlukan . Cara untuk menjalankan program ini adalah sebagai berikut
- Pastikan teman-teman telah memiliki library ESP2866 Wifi, Wificlient , ESP8266 Web Server, ESP 8266 mDNS , dan Wifi manager. Untuk library wifi manager dapat teman-teman download disini https://github.com/tzapu/WiFiManager
- Unggah program ke DST-ESP8266 teman-teman, dan buka serial monitor. Program dapat didownload di link berikut. Bagaimana cara upload program ke DST-ESP8266 dapat dilihat pada artikel berikut. Dalam serial monitor akan tampak deskripsi sebagai berikut
- Tampilan saya seperti pada gambar sebelumnya karena saya sudah pernah terhubung dengan AP (Access Point) lainnya. Dalam kondisi ini, DST-ESP8266 teman-teman bertindak sebagai AP dan untuk membuka web server untuk mengkonfigurasi wifi , teman-teman perlu menghubungkan wifi teman-teman dengan hotspot DST-ESP8266 yang bertindak sebagai AP.
- Saya beri nama BRIAN123123. Setelah teman-teman menghubungkan dengan AP DST-ESP8266 seperti pada gambar di atas, teman-teman harus memasukkan IP dari DST-ESP8266 yang saya tunujkkan pada gambar serial monitor sebelumnya
- Pada browser akan muncul tampilan seperti ini :
- Setelah muncul tampilan seperti gambar di atas, teman-teman klik Configure wifi. Maka akan muncul tampilan seperti berikut :
- Gambar di atas adalah tampilan wifi yang tersedia. Teman-teman dapat secara manual memasukkan SSID dan Password , kemudian klik save. SSID dan Password sudah tersimpan dalam DST-ESP8266. Setelah itu, hubungkan kembali perangkat teman-teman dengan wifi yang sudah teman-teman masukkan SSID dan Passwordnya ke dalam DST-ESP8266.
- Pada serial monitor, akan muncul IP yang diberikan oleh DST-ESP8266 yang telah teman-teman hubungkan ke perangkat.Ketikkan IP tersebut ke browser teman-teman.
- Pada gambar di bawah ini, saya beri contoh untuk mengendalikan relay 2 channel.
- Namun, kali ini saya menambahkan tombol untuk memutus jaringan . Apa fungsi dari tombol ini? Ya, agar teman-teman dapat memutuskan jaringan dengan wifi yang telah terhubung apabila teman-teman ingin mengontrol relay ini Via wifi yang lain. Ketika teman-teman menekan pada tombol memutus jaringan, program akan berjalan kembali seperti poin penjelasan saya dari nomor 1.
Cara Kerja Program
Halaman HTML
Sebelum membuat halaman HTML pada ARDUINO IDE, kita harus menambahkan kode ini sebagai pembuka dan penutup agar kode HTML dapat berjalan pada WEB SERVER.
Bagian <body> halaman HTML ini menyajikan antarmuka pengguna untuk mengontrol dua relay. Terdapat dua tombol switch yang masing-masing memiliki ID unik (“led” dan “led2”). Saat switch diubah, fungsi JavaScript (ledButton atau ledButton2) akan dipanggil untuk mengirim permintaan ke DST-ESP8266 guna mengaktifkan atau menonaktifkan relay yang sesuai. Status relay (ON/OFF) akan ditampilkan pada elemen <div> dengan ID “status”. Terdapat juga tombol untuk memutuskan jaringan WiFi (/resetwifi).
Fungsi ledButton dan ledButton2 adalah fungsi JavaScript yang merespons perubahan pada switch toggle. Fungsi ini akan mengirim permintaan HTTP ke ESP8266 untuk mengaktifkan atau menonaktifkan relay yang sesuai, tergantung pada status switch. Setelah berhasil, fungsi ini akan memperbarui tampilan status relay (ON/OFF) pada halaman web.
Menambahkan skrip popper dan bootstrap untuk mendukung interaksi di halaman web dan efek visual lainnya. Menutup tag body dan html, menandakan akhir dari dokumen HTML.
Modul pendukung artikel ini
- DST-ESP8266 sebagai Sistem Minimum ESP8266 + Relay 2 Channel
- DST-Universal Downloader sebagai ESP8266 downloader
- FT-232RL sebagai alternatif ESP8266 downloader
Program pada artikel ini:
- Web_server.rar untuk aktifkan 2 channel relay melalui web
- Web_server_OTA untuk aktifkan 2 channel relay melalui web + OTA
DELTA ELECTRONIC
Brian Poluan