Stasiun Cuaca Awan DIY dengan ESP32/ESP8266 (Database MySQL dan PHP)

Buat dasbor stasiun cuaca cloud untuk memvisualisasikan pembacaan sensor ESP32 atau ESP8266 Anda dari mana saja di dunia. Anda akan melihat data sensor Anda ditampilkan di pengukur dan di atas meja. ESP32 atau ESP8266 akan membuat permintaan HTTP POST ke skrip PHP untuk memasukkan data Anda ke dalam database MySQL.

Sebelumnya, kami telah menyimpan pembacaan sensor ke database dan menampilkannya di tabel atau bagan yang dapat Anda akses dari mana saja menggunakan server Anda sendiri. Sekarang, saya telah memutuskan untuk mengambil beberapa langkah lebih jauh dan menambahkan beberapa informasi lagi ke halaman web.

Saya telah menambahkan dua pengukur untuk menampilkan pembacaan suhu dan kelembaban terbaru serta beberapa statistik tentang pembacaan minimum, maksimum, dan rata-rata dari jumlah pembacaan yang dapat Anda tentukan. Anda juga dapat memvisualisasikan semua bacaan terbaru di atas meja dan Anda dapat memilih berapa banyak bacaan yang ingin Anda tampilkan.
Untuk membangun proyek ini, Anda akan menggunakan teknologi ini:
• ESP32 atau ESP8266 diprogram dengan Arduino IDE
• Server hosting dan nama domain
• Skrip PHP untuk memasukkan data ke MySQL dan menampilkannya di halaman web
• Database MySQL untuk menyimpan bacaan

Tonton Video Demonstrasinya

Untuk melihat bagaimana proyek ini bekerja, Anda dapat menonton video demonstrasi berikut:

Hosting Aplikasi PHP dan Database MySQL Anda

Tujuan dari proyek ini adalah untuk memiliki nama domain dan akun hosting Anda sendiri yang memungkinkan Anda untuk menyimpan pembacaan sensor dari ESP32 atau ESP8266. Anda dapat memvisualisasikan bacaan dari mana saja di dunia dengan mengakses domain server Anda sendiri.
Berikut ini ikhtisar tingkat tinggi tentang cara kerja proyek:

• Anda memiliki ESP32 atau ESP8266 yang mengirimkan pembacaan sensor ke server Anda sendiri. Untuk ini, Anda memiliki papan Anda terhubung ke router Anda;
• Di server Anda, ada skrip php yang memungkinkan Anda menyimpan bacaan Anda di database MySQL;
• Kemudian, skrip php lain akan menampilkan halaman web dengan pengukur, tabel, dan semua informasi lainnya;
• Terakhir, Anda dapat memvisualisasikan bacaan dari mana saja di dunia dengan mengakses nama domain Anda sendiri.

Mempersiapkan Database MySQL Anda

Setelah mendaftar untuk akun hosting dan menyiapkan nama domain, Anda dapat masuk ke cPanel atau dasbor serupa. Setelah itu, ikuti langkah selanjutnya untuk membuat database, nama pengguna, kata sandi, dan tabel SQL Anda.

Membuat database dan pengguna

Buka tab "Advanced":

1. Ketik "database" di bilah pencarian dan pilih "MySQL Database Wizard".

2. Masukkan nama Database yang Anda inginkan. Dalam kasus saya, nama databasenya adalah esp_data. Kemudian, tekan tombol "Next Step":

Catatan: nanti Anda harus menggunakan nama basis data dengan awalan yang diberikan host Anda (awalan basis data saya pada tangkapan layar di atas kabur). Saya akan menyebutnya sebagai example_esp_data mulai sekarang.

3. Ketik nama pengguna Database Anda dan atur kata sandi. Anda harus menyimpan semua detail itu, karena Anda akan membutuhkannya nanti untuk membuat koneksi database dengan kode PHP Anda.

Database dan pengguna baru Anda berhasil dibuat. Sekarang, simpan semua detail Anda karena Anda akan membutuhkannya nanti:
• Nama basis data: example_esp_data
• Nama pengguna: example_esp_board
• Kata sandi: kata sandi Anda

Membuat tabel SQL

Setelah membuat database dan pengguna Anda, kembali ke dashboard cPanel dan cari “phpMyAdmin”.

Di bilah sisi kiri, pilih nama database Anda example_esp_data dan buka tab "SQL".

Penting: pastikan Anda telah membuka database example_esp_data. Kemudian, klik tab SQL. Jika Anda tidak mengikuti langkah-langkah tepat ini dan menjalankan kueri SQL, Anda mungkin membuat tabel di database yang salah.

Salin kueri SQL dalam cuplikan berikut:

Rekatkan di bidang kueri SQL (disorot dengan persegi panjang merah) dan tekan tombol "Go" untuk membuat tabel Anda:

Setelah itu, Anda akan melihat tabel yang baru dibuat bernama SensorData di database example_esp_data seperti yang ditunjukkan pada gambar di bawah ini:

PHP Script HTTP POST – Menerima dan Memasukkan Data ke Database MySQL

Di bagian ini, kita akan membuat skrip PHP yang bertanggung jawab untuk menerima permintaan masuk dari ESP32 atau ESP8266 dan memasukkan data ke dalam database MySQL.

Jika Anda menggunakan penyedia hosting dengan cPanel, Anda dapat mencari “File Manager”:

Kemudian, pilih opsi public_html dan tekan tombol “+ File” untuk membuat file .php baru.

Catatan: jika Anda mengikuti tutorial ini dan Anda tidak terbiasa dengan PHP atau MySQL, saya sarankan untuk membuat file yang sama persis ini. Jika tidak, Anda harus memodifikasi sketsa ESP yang disediakan dengan jalur URL yang berbeda.

Buat file baru di /public_html dengan nama dan ekstensi persis seperti ini: esp-post-data.php

Edit file yang baru dibuat (esp-post-data.php) dan salin cuplikan berikut:

Skrip PHP untuk Fungsi Basis Data

Buat file baru di /public_html yang bertanggung jawab untuk memasukkan dan mengakses data di database Anda. Beri nama file Anda: esp-database.php

Salin skrip PHP itu:

Sebelum menyimpan file, Anda perlu memodifikasi variabel $dbname, $username dan $password dengan detail unik Anda:

Setelah menambahkan nama database, username dan password, simpan file dan lanjutkan dengan tutorial ini. Jika Anda mencoba mengakses nama domain Anda di jalur URL berikutnya, Anda akan melihat yang berikut:

Skrip PHP – Menampilkan Pembacaan Basis Data pada Pengukur dan Tabel

Anda juga perlu menambahkan file CSS untuk menata dasbor Anda, beri nama: esp-style.css:

Salin CSS itu ke file Anda dan simpan:

Terakhir, buat file PHP lain di direktori /public_html yang akan menampilkan semua konten database di halaman web. Beri nama file baru Anda: esp-weather-station.php.

Edit file yang baru dibuat (esp-weather-station.php) dan salin kode berikut:

Jika Anda mencoba mengakses nama domain Anda di jalur URL berikut, Anda akan melihat yang berikut:

Jika Anda melihat halaman web dengan nilai kosong di browser Anda, itu berarti semuanya sudah siap. Di bagian berikutnya, Anda akan mempelajari cara memasukkan data dari ESP32 atau ESP8266 ke dalam database.

Mempersiapkan ESP32 atau ESP8266 Anda

Proyek ini kompatibel dengan papan ESP32 dan ESP8266. Anda hanya perlu merakit sirkuit sederhana dan mengunggah sketsa yang disediakan untuk memasukkan suhu, kelembapan, tekanan, dan lainnya ke dalam basis data Anda setiap 10 menit.

Bagian yang Diperlukan

Untuk contoh ini kita akan mendapatkan pembacaan sensor dari sensor BME280. Berikut daftar bagian yang Anda butuhkan untuk membangun sirkuit untuk proyek ini:
• Papan ESP32
• Alternatif – Papan ESP8266
• Sensor BME280
• Kabel Jumper
• Breadboard

Skema Rangkaian

Modul sensor BME280 yang kami gunakan berkomunikasi melalui protokol komunikasi I2C, jadi Anda perlu menghubungkannya ke pin ESP32 atau ESP8266 I2C.
Kabel BME280 ke ESP32
Pin ESP32 I2C adalah:
• GPIO 22: SCL (SCK)
• GPIO 21: SDA (SDI)

Kabel BME280 ke ESP8266
Pin ESP8266 I2C adalah:
• GPIO 5 (D1): SCL (SCK)
• GPIO 4 (D2): SDA (SDI)

Kode ESP32/ESP8266

Kami akan memprogram ESP32/ESP8266 menggunakan Arduino IDE, jadi Anda harus menginstal add-on ESP di Arduino IDE Anda.
Ikuti salah satu tutorial berikutnya tergantung pada papan yang Anda gunakan:
• Instal Papan ESP32 diArduino IDE – Anda juga perlu menginstal Perpustakaan BME280 dan perpustakaanAdafruit_Sensor
• Instal Board ESP8266 diArduino IDE – Anda juga perlu menginstal Library BME280 dan libraryAdafruit_Sensor
Setelah menginstal add-on dan pustaka papan yang diperlukan, salin kode berikut ke Arduino IDE Anda, tetapi jangan mengunggahnya dulu. Anda perlu membuat beberapa perubahan untuk membuatnya bekerja untuk Anda.

Mengatur Kredensial Jaringan Anda

Anda perlu mengubah baris berikut dengan kredensial jaringan Anda: SSID dan kata sandi. Kode dikomentari dengan baik di mana Anda harus membuat perubahan.

Menyetel nama server Anda

Anda juga perlu mengetikkan nama domain Anda, sehingga ESP menerbitkan bacaan ke server Anda sendiri.

Sekarang, Anda dapat mengunggah kode ke papan Anda. Ini harus bekerja langsung baik di papan ESP32 atau ESP8266. Jika Anda ingin mempelajari cara kerja kode, baca bagian selanjutnya.

Cara kerja kode

Proyek ini sudah cukup lama, jadi kami tidak akan membahas secara detail cara kerja kode, tetapi inilah ringkasan singkatnya:
• Impor semua perpustakaan untuk membuatnya berfungsi (itu akan mengimpor perpustakaan ESP32 atau ESP8266 berdasarkan papan yang dipilih di Arduino IDE Anda)
• Setel variabel yang mungkin ingin Anda ubah (apiKeyValue, sensorName, sensorLocation)
• apiKeyValue hanyalah string acak yang dapat Anda modifikasi. Ini digunakan untuk alasan keamanan, jadi hanya siapa pun yang mengetahui kunci API Anda yang dapat memublikasikan data ke database Anda
• Inisialisasi komunikasi serial untuk keperluan debugging
• Buat koneksi Wi-Fi dengan router Anda
• Inisialisasi BME280 untuk mendapatkan bacaan
Kemudian, di loop() adalah tempat Anda benar-benar membuat permintaan HTTP POST setiap 10 menit dengan pembacaan BME280 terbaru:

Anda dapat mengomentari variabel httpRequestData di atas yang menggabungkan semua pembacaan BME280 dan menggunakan variabel httpRequestData di bawah ini untuk tujuan pengujian:

Demonstrasi

Setelah menyelesaikan semua langkah, biarkan papan ESP Anda mengumpulkan beberapa bacaan dan mempublikasikannya ke server Anda.

Jika semuanya benar, inilah yang akan Anda lihat di Serial Monitor Arduino IDE Anda:

Jika Anda membuka nama domain Anda di jalur URL ini:

Anda akan melihat 20 bacaan terbaru yang tersimpan di database Anda. Ada dua pengukur yang menunjukkan pembacaan suhu dan kelembaban terbaru, dan stempel waktu.

Refresh halaman web untuk melihat bacaan terbaru:

Anda akan melihat 20 bacaan terbaru yang tersimpan di database Anda. Ada dua pengukur yang menunjukkan pembacaan suhu dan kelembaban terbaru, dan stempel waktu.

Refresh halaman web untuk melihat bacaan terbaru: