Membuat Aplikasi Web untuk menampilkan kekuatan Sinyal Wifi secara Real Time ber basis Mikrokontroller Esp 8266

 kali ini saya berhasil membuat aplikasi Web untuk menampilkan kekuatan sinyal Wifi secara Real time ber basis mikrokontroller esp 8266 💪💪💪. berkat bantuan chatGPT 🙏, saya bisa mewujudkan coding secara cepat dan singkat dan aplikasi dapat bekerja secara baik. aplikasi ini dapat di akses dengan membuka alamat IP pada esp 8266 yang saya gunakan. aplikasi web ini menampilkan tiga data utama, yaitu kekuatan sinyal (signal strength, kualitas sinyal (signal quality) dan jarak (distance). Adapun kode programnya adalah sebagai berikut:

(kode program)

Adapun gambar tampilan Web untuk melihat kekuatan sinyal Wifi adalah seperti terlihat pada gambar di bawah ini. tampilan web ini dapat di buka baik lewat PC maupun HP. adapun caranya yaitu dengan mengakses IP Board ESP 8266 (untuk di board saya yaitu dengan alamat: 192.168.43.94)

(gambar tampilan Web dengan alamat IP board ESP 8266)

penjelasan mengenai program di atas beserta langkah-langkah yang dapat Anda ikuti untuk memahaminya:

1. Pengaturan Awal: Pada bagian ini, Anda perlu mengganti nilai SSID dan password sesuai dengan jaringan WiFi yang akan digunakan.

2. Fungsi calculateDistance: Fungsi ini digunakan untuk menghitung jarak berdasarkan nilai RSSI. Anda dapat melakukan kalibrasi atau mengubah rumus perhitungan jarak sesuai dengan kebutuhan Anda.

3. Fungsi getSignalQuality: Fungsi ini mengembalikan kualitas sinyal berdasarkan range nilai RSSI. Anda dapat menyesuaikan range nilai dan kelas kualitas sinyal sesuai keinginan.

4. Fungsi handleRoot: Fungsi ini mengatur tampilan halaman web yang akan ditampilkan. Pada bagian ini, nilai RSSI, kualitas sinyal, dan jarak ditampilkan. Juga terdapat penentuan kelas CSS untuk memberi warna latar belakang dan tulisan kualitas sinyal.

5. Fungsi webSocketEvent: Fungsi ini meng-handle peristiwa yang terjadi pada koneksi WebSocket. Pada contoh tersebut, terdapat penanganan saat koneksi terputus dan saat koneksi berhasil terhubung.

6. Fungsi setup: Fungsi ini menjalankan konfigurasi awal seperti menghubungkan ke jaringan WiFi, mengatur server HTTP, dan mengatur server WebSocket.

7. Fungsi loop: Fungsi ini berjalan terus-menerus dalam loop. Pada setiap iterasi, server HTTP ditangani, server WebSocket ditangani, nilai RSSI diperbarui, jarak dihitung, dan data dikirim ke semua klien melalui WebSocket.

Langkah-langkah yang dapat Anda ikuti untuk memahami program ini secara lebih mendalam adalah:

1. Pelajari dan pahami fungsi-fungsi yang ada dalam program, seperti calculateDistance, getSignalQuality, handleRoot, webSocketEvent, setup, dan loop.

2. Pelajari bagaimana server HTTP dan server WebSocket diatur dan berinteraksi dengan klien.

3. Perhatikan bagaimana data nilai RSSI dan jarak diperbarui secara real-time dan dikirim ke klien melalui WebSocket.

4. Coba jalankan program ini pada ESP8266 dan amati tampilan halaman web serta nilai RSSI dan jarak yang diperbarui secara real-time.

5. Jika Anda ingin mengganti atau menyesuaikan rumus perhitungan jarak atau range nilai RSSI untuk kualitas sinyal, lakukan perubahan tersebut pada fungsi calculateDistance dan getSignalQuality.

6. Selain itu, Anda juga dapat memodifikasi tampilan halaman web dengan mengubah elemen HTML dan CSS pada fungsi handleRoot.

berikut adalah penjelasan singkat tentang fungsi-fungsi yang ada:

1. calculateDistance(int rssi):

   • Fungsi ini digunakan untuk menghitung jarak berdasarkan kekuatan sinyal (RSSI).
   • Mengambil argumen rssi yang merupakan nilai kekuatan sinyal dalam dBm.
   • Melakukan perhitungan untuk mengonversi nilai RSSI menjadi jarak dalam meter.
   • Mengembalikan nilai jarak dalam meter.

2. getSignalQuality(int rssi):

   • Fungsi ini tidak terdapat dalam program yang Anda berikan. Mungkin ada kekeliruan dalam penulisan atau penggunaannya.

3. handleRoot():

   • Fungsi ini merupakan fungsi penanganan permintaan untuk rute root ("/") pada server web.
   • Membuat halaman HTML yang akan dikirim sebagai respons ke klien.
   • Halaman tersebut berisi elemen-elemen HTML yang akan menampilkan kekuatan sinyal (RSSI) dan jarak yang diambil dari variabel global.
   • Juga mencakup skrip JavaScript untuk menerima data melalui WebSocket dan memperbarui nilai RSSI dan jarak secara real-time pada halaman.

4. webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length):

   • Fungsi ini merupakan penanganan acara WebSocket.
   • Dipanggil ketika ada peristiwa terkait WebSocket, seperti koneksi baru atau pemutusan koneksi.
   • Berguna untuk mencatat atau menangani peristiwa terkait WebSocket.

5. setup():

   • Fungsi ini digunakan untuk melakukan pengaturan awal saat Arduino pertama kali dijalankan.
   • Inisialisasi koneksi serial dan penundaan awal.
   • Menghubungkan Arduino ke jaringan WiFi dengan menggunakan SSID dan kata sandi yang telah ditentukan.
   • Membuka server web pada port 80 dan mencetak informasi koneksi WiFi ke Serial Monitor.
   • Membuka server WebSocket pada port 81 dan mencetak informasi koneksi ke Serial Monitor.

6. loop():

• Fungsi ini berjalan secara berulang terus menerus setelah setup() selesai.
• Menghandle klien yang terhubung ke server web.
• Menghandle event pada server WebSocket.
• Memperbarui nilai RSSI dengan menggunakan fungsi WiFi.RSSI().
• Menghitung jarak berdasarkan nilai RSSI dengan menggunakan fungsi calculateDistance().
• Mengirimkan data RSSI dan jarak melalui WebSocket ke semua klien yang terhubung.

Dalam program Arduino yang Anda berikan, digunakan beberapa pustaka (libraries) yang penting untuk mengaktifkan dan mengelola koneksi WiFi, server web, dan WebSocket pada modul ESP8266. Berikut adalah penjelasan tentang masing-masing pustaka:

1. ESP8266WiFi:

   • Pustaka ini digunakan untuk mengatur koneksi WiFi pada modul ESP8266.
   • Menyediakan fungsi-fungsi yang memungkinkan Anda untuk terhubung ke jaringan WiFi, memeriksa status koneksi, mendapatkan alamat IP, dan lainnya.
   • Memiliki fungsi WiFi.begin() untuk memulai proses koneksi ke jaringan WiFi yang telah ditentukan.
   • Fungsi WiFi.RSSI() digunakan untuk mendapatkan kekuatan sinyal (RSSI) WiFi saat ini.
   • Dengan menggunakan pustaka ini, Anda dapat menghubungkan modul ESP8266 ke jaringan WiFi dan mendapatkan informasi terkait koneksi WiFi.

2. ESP8266WebServer:

   • Pustaka ini digunakan untuk membuat server web pada modul ESP8266.
   • Memungkinkan Anda untuk menangani permintaan HTTP dari klien dan mengirimkan respons yang sesuai.
   • Menyediakan fungsi-fungsi untuk menambahkan rute, menangani permintaan HTTP GET dan POST, mengirimkan file, dan lainnya.
   • Pada program yang diberikan, digunakan untuk membuat server web pada port 80 dan menangani permintaan rute root ("/") melalui fungsi handleRoot().

3. WebSocketsServer:

   • Pustaka ini digunakan untuk mengaktifkan dan mengelola server WebSocket pada modul ESP8266.
   • WebSockets adalah protokol komunikasi dua arah yang memungkinkan komunikasi real-time antara klien dan server.
   • Pustaka ini menyediakan fungsi-fungsi untuk memulai server WebSocket, menangani peristiwa terkait WebSocket, dan mengirimkan data ke klien yang terhubung.
   • Pada program yang diberikan, digunakan untuk membuat server WebSocket pada port 81 dan menangani peristiwa WebSocket melalui fungsi webSocketEvent().

Dengan menggunakan pustaka-pustaka tersebut, Anda dapat dengan mudah mengelola koneksi WiFi, membuat server web, dan menggunakan WebSocket pada modul ESP8266. Setiap pustaka memiliki fungsi-fungsi yang spesifik untuk tujuan tertentu dan dokumentasi resmi pustaka-pustaka tersebut akan memberikan informasi lebih rinci tentang penggunaan dan parameter fungsi-fungsi yang tersedia. Anda dapat merujuk ke dokumentasi resmi dari ESP8266WiFi, ESP8266WebServer, dan WebSocketsServer untuk mendapatkan informasi yang lebih detail dan contoh penggunaan yang lengkap.

Dengan mempelajari dan memahami langkah-langkah di atas, Anda akan dapat menguasai program ini dan memahami bagaimana mengukur kekuatan sinyal WiFi menggunakan ESP8266 dan menampilkannya secara real-time pada halaman web.