Dalam proyek ini, Anda akan membuat halaman web yang menampilkan pembacaan sensor dalam plot yang dapat Anda akses dari mana saja di dunia. Singkatnya, Anda akan membangun klien ESP32 atau ESP8266 yang membuat permintaan ke skrip PHP untuk mempublikasikan pembacaan sensor dalam database MySQL.
Sebagai contoh, kami akan menggunakan sensor BME280 yang terhubung ke papan ESP. Anda dapat memodifikasi kode yang disediakan untuk mengirim bacaan dari sensor yang berbeda atau menggunakan beberapa papan.
Untuk membuat proyek ini, Anda akan menggunakan teknologi berikut:
• ESP32 atau ESP8266 diprogram dengan Arduino IDE
• Server hosting dan nama domain
• Script PHP untuk memasukkan data ke database MySQL dan menampilkannya di halaman web
• Database MySQL untuk menyimpan bacaan
• Script PHP untuk memplot data dari database dalam grafik
Anda mungkin juga merasa terbantu dengan membaca proyek-proyek ini:
• ESP32/ESP8266 Masukkan Data ke DatabaseMySQL menggunakan PHP dan Arduino IDE
• Pembacaan Sensor Plot ESP32/ESP8266 dalamGrafik Waktu Nyata – Server Web
Tonton Video Demonstrasinya
Untuk melihat bagaimana proyek ini bekerja, Anda dapat menonton video demonstrasi berikut:
1. 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 dari proyek:
Saya sarankan menggunakan salah satu layanan hosting berikut yang dapat menangani semua persyaratan proyek:
• Bluehost (mudah digunakan dengan cPanel): nama domain gratis saat Anda mendaftar untuk paket 3 tahun. Saya sarankan memilih opsi situs web tak terbatas;
• Digital Ocean: Server Linux yang Anda kelola melalui baris perintah. Saya hanya merekomendasikan opsi ini untuk pengguna tingkat lanjut.
Kedua layanan tersebut adalah yang saya gunakan dan rekomendasikan secara pribadi, tetapi Anda dapat menggunakan layanan hosting lainnya. Setiap layanan hosting yang menawarkan PHP dan MySQL akan bekerja dengan tutorial ini. Jika Anda tidak memiliki akun hosting, saya sarankan untuk mendaftar ke Bluehost.
Dapatkan Hosting dan Nama Domain denganBluehost »
Saat membeli akun hosting, Anda juga harus membeli nama domain. Inilah yang membuat proyek ini menarik: Anda dapat membuka nama domain Anda (http://example.com) dan melihat pembacaan ESP Anda.
Jika Anda menyukai proyek kami, Anda dapat mempertimbangkan untuk mendaftar ke salah satu layanan hosting yang direkomendasikan, karena Anda akan mendukung pekerjaan kami.
Catatan: Anda juga dapat menjalankan server LAMP (Linux, Apache, MySQL, PHP) di Raspberry Pi untuk mengakses data di jaringan lokal Anda. Namun, tujuan dari tutorial ini adalah untuk mempublikasikan bacaan dalam nama domain Anda sendiri yang dapat Anda akses dari mana saja di dunia. Ini memungkinkan Anda mengakses pembacaan ESP dengan mudah tanpa bergantung pada platform IoT pihak ketiga.
2. 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.
Itu dia! 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 Sensor di database example_esp_data seperti yang ditunjukkan pada gambar di bawah ini:
3. PHP Script HTTP POST – Memasukkan Data ke Database MySQL
Di bagian ini, kita akan membuat skrip PHP yang 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 ini: post-data.php
Edit file yang baru dibuat (post-data.php) dan salin cuplikan berikut:
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 pesan:
4. Skrip PHP – Visualisasikan Konten Basis Data dalam Bagan
Buat file PHP lain di direktori /public_html yang akan memplot konten database dalam bagan di halaman web. Beri nama file baru Anda: esp-chart.php
Edit file yang baru dibuat (esp-chart.php) dan salin kode berikut:
Setelah menambahkan $dbname, $username dan $password simpan file dan lanjutkan dengan proyek ini.
Jika Anda mencoba mengakses nama domain Anda di jalur URL berikut, Anda akan melihat yang berikut:
Itu dia! Jika Anda melihat tiga grafik kosong di browser Anda, itu berarti semuanya sudah siap. Di bagian berikutnya, Anda akan mempelajari cara memublikasikan pembacaan sensor ESP32 atau ESP8266 Anda.
Untuk membuat grafik, kami akan menggunakan perpustakaan Highcharts. Kami akan membuat tiga grafik: suhu, kelembaban dan tekanan dari waktu ke waktu. Bagan menampilkan maksimum 40 titik data, dan pembacaan baru ditambahkan setiap 30 detik, tetapi Anda mengubah nilai ini dalam kode Anda.
5. 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 30 detik.
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 (baca papan dev ESP32Terbaik)
• Alternatif – Papan ESP8266 (baca papandev ESP8266 Terbaik)
Skema
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)
Jadi, rakit sirkuit Anda seperti yang ditunjukkan pada diagram skema berikut (baca Panduan lengkap untuk ESP32 dengan BME280).
Kabel BME280 ke ESP8266
Pin ESP8266 I2C adalah:
• GPIO 5 (D1): SCL (SCK)
• GPIO 4 (D2): SDA (SDI)
Rakit sirkuit Anda seperti pada diagram skema berikutnya jika Anda menggunakan papan ESP8266 (baca Panduan lengkap untuk ESP8266 dengan BME280).
Kode ESP32/ESP8266
Kami akan memprogram ESP32/ESP8266 menggunakan Arduino IDE, jadi Anda harus menginstal add-on ESP32/ESP8266 di Arduino IDE Anda. Ikuti salah satu tutorial berikutnya tergantung pada papan yang Anda gunakan:
• Instal Papan ESP32 di Arduino IDE – Anda juga perlu menginstal Perpustakaan BME280 dan perpustakaan Adafruit_Sensor
• Instal Board ESP8266 di Arduino IDE – Anda juga perlu menginstal Library BME280 dan library Adafruit_Sensor
Setelah menginstal add-on 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)
• 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 30 detik 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 semua bacaan yang tersimpan di database Anda. Refresh halaman web untuk melihat bacaan terbaru:
Anda juga dapat membuka phpMyAdmin untuk mengelola data yang disimpan di tabel Sensor Anda. Anda dapat menghapusnya, mengedit, dll ...
Membungkus
Dalam tutorial ini Anda telah mempelajari cara memublikasikan data sensor ke dalam database di domain server Anda sendiri yang dapat Anda akses dari mana saja di dunia. Ini mengharuskan Anda memiliki server dan nama domain sendiri (Anda juga dapat menggunakan Raspberry Pi untuk akses lokal).
Dengan pengaturan ini Anda mengontrol server Anda dan dapat pindah ke host yang berbeda jika perlu. Ada banyak solusi cloud baik gratis maupun berbayar yang dapat Anda gunakan untuk mempublikasikan bacaan Anda, tetapi layanan tersebut dapat memiliki beberapa kelemahan: pembatasan berapa banyak bacaan yang dapat Anda publikasikan, jumlah perangkat yang terhubung, siapa yang dapat melihat data Anda, dll. Selain itu, layanan cloud dapat didiskon atau diubah kapan saja.
Contoh yang diberikan sesederhana mungkin sehingga Anda dapat memahami cara kerja semuanya. Setelah memahami contoh ini, Anda dapat mengubah tampilan halaman web, mempublikasikan pembacaan sensor yang berbeda, mempublikasikan dari beberapa papan ESP, dan banyak lagi.
Anda mungkin juga suka membaca:
• [Kursus] Belajar ESP32 dengan Arduino IDE
• ESP32 Memublikasikan Pembacaan Sensor keGoogle Spreadsheet (Kompatibel dengan ESP8266)
• Plot Pembacaan Sensor dalam Grafik WaktuNyata (Server Web Lokal ESP)
• ESP32/ESP8266 Masukkan Data ke DatabaseMySQL menggunakan PHP dan Arduino IDE
Sumber : randomnerdtutorials.com
){kind=link}
0 Komentar