Stasiun Cuaca ESP8266 Yang Menampilkan Data di Situs Web: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Catatan: Bagian dari tutorial ini mungkin tersedia dalam format video di Saluran YouTube saya - Tech Tribe

Dalam instruksi ini, saya akan menunjukkan cara membuat stasiun cuaca yang langsung mengirimkan data ke situs web Anda. Oleh karena itu, Anda memerlukan domain Anda sendiri (Mis: msolonko.net). Untuk memulai, berikut adalah bahan yang Anda butuhkan:

Item:

Bulu Huzzah ($16.95)

Kabel USB mikro dengan Data ($1,99)

Battery Pack($25): Nanti saya akan membahas kapasitas apa yang Anda butuhkan untuk berapa lama tanpa pengisian ulang, sehingga Anda dapat memilih kapasitas yang Anda inginkan. Ini adalah tautan ke yang saya gunakan. Anda juga dapat menyalakannya dari stopkontak.

1 fotoresistor

Beberapa resistor lain - dibahas nanti

Kabel

Papan Kinerja ($5,59) - Paket 20

Sensor Suhu, Tekanan, dan Kelembaban BME280 ($9,99)

Semacam kotak; Anda dapat mencetak 3D, dan saya akan menunjukkan desain saya.

Webhosting dan domain, jika Anda ingin mengikuti sepenuhnya tutorialnya

Peralatan:

Alat pemotong kawat

Besi solder

Langkah 1: Kode Bulu Huzzah

Kode akan ditulis dalam Arduino IDE, yang dapat diunduh di sini. Sebelum kita mulai, ikuti instruksi di sini untuk mengatur Arduino IDE agar berfungsi dengan Feather Huzzah Anda. Juga, ikuti petunjuk ini untuk mengunduh pustaka yang diperlukan agar sensor BME berfungsi. File kode dilampirkan, dan semua kode dikomentari sehingga Anda dapat memahaminya. Setelah Anda melihatnya, lanjutkan ke langkah berikutnya di mana kita akan melihat kode yang menerima data sensor.

Langkah 2: Menerima Data Dari Feather Huzzah

Sekarang, semoga Anda mengerti cara kerja kode Arduino. Jika tidak, kembali ke kode dan baca komentar saya (saya berkomentar hampir setiap baris). Sekarang kita akan menulis kode yang menerima data. Seperti sebelumnya, semuanya dikomentari. Bahasa pemrograman yang digunakan untuk ini adalah PHP, yang dapat Anda baca lebih lanjut di sini.

Data kami akan disimpan dalam Database MySQL, yang dapat Anda baca lebih lanjut di sini. Data disimpan dalam tabel yang memiliki baris dan kolom. Sebelum kita menulis kode, kita harus membuat struktur tabel kita di cPanel hosting kita. Saya menggunakan Arvixe Hosting, jadi cPanel Anda mungkin terlihat berbeda. Lihat salah satu gambar untuk melihat seperti apa bagian saya. Pertama, Anda ingin membuat database MySQL baru jika Anda belum memilikinya. Anda dapat menggunakan wizard untuk itu. Ada banyak sumber daya online tentang ini jika Anda membutuhkan bantuan.

Setelah Anda mengatur database, buka phpMyAdmin dan pilih database Anda. Buat tabel bernama weather_data dengan 9 kolom. Lihat salah satu gambar saya di atas untuk melihat seperti apa seharusnya setiap kolom (salin nama, tipe data, dan yang lainnya persis jika Anda ingin menggunakan kode saya). Penghitung akan menjadi kunci utama kami dan id akan membantu kami mengidentifikasi hari apa yang dilakukan data (1: hari ini, 2: kemarin, 3: yang lainnya). Karena kami akan memiliki banyak data, kami akan menghapus sebagian seiring bertambahnya usia. Itulah mengapa kita membutuhkan kolom id. Kolom lainnya cukup jelas. Saat ini, tabel Anda di database Anda akan terlihat persis seperti milik saya.

Sekarang, unduh kode terlampir dan bacalah serta komentar saya. Setelah selesai, lanjutkan ke langkah berikutnya.

Catatan: saat Anda mengunduh kode, ganti namanya menjadi esp.php. Untuk beberapa alasan, saya mendapatkan kesalahan saat mencoba mengunggah file PHP.

Ini pada dasarnya bagaimana kode akan bekerja.

1. Kumpulkan data setiap 10 menit dan tampilkan

2. Setelah sehari berlalu, rata-rata setiap 6 nilai (untuk menghemat ruang DB) sehingga ada titik data untuk setiap jam

3. Setelah satu hari berlalu, rata-ratakan semua data yang tersisa untuk hari itu dan simpan hanya sebagai satu titik data

Dengan cara ini, kita akan dapat melihat fluktuasi cahaya, suhu, dll. selama rentang waktu berbulan-bulan tanpa mulai terganggu oleh fluktuasi harian suhu, cahaya, dll.

Langkah 3: Mengambil Data Dari Database ke Tampilan

Jadi sekarang kami telah menemukan cara untuk mengumpulkan data cuaca dan mengunggahnya ke database kami. Sekarang kita harus dapat mengambilnya kembali dalam bentuk yang dapat digunakan. Seperti sebelumnya, saya melampirkan file PHP getWeatherData.txt yang harus Anda simpan ke host Anda dan ubah ekstensi nama file menjadi.php, bukan.txt. Semua kode dikomentari. Bacalah untuk memahaminya dan lanjutkan setelah Anda berpikir Anda telah mendapatkannya. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya di bawah ini.

Langkah 4: Pengaturan Perpustakaan dan Beberapa Hal Lainnya

Untuk proyek ini, salah satu framework yang akan kita gunakan adalah AngularJS, yang akan membantu kita berkomunikasi dengan database dan membangun SPA (Single Page Application). Untuk mendapatkan perpustakaan, buka tautan ini dan unduh versi 1.64 atau lebih tinggi. Untuk tutorial ini, saya menggunakan 1.64 tetapi versi baru sering dirilis sehingga Anda dapat menggunakan yang berbeda. Temukan tautan di halaman itu yang berakhir seperti ini: /VERSION/angular.min.js

Salin tautan dan simpan di tempat yang aman. Kami baru saja mendapat tautan untuk perpustakaan AngularJS. Anda akan membutuhkannya untuk langkah selanjutnya. Sekarang, pada halaman yang sama temukan tautan yang terlihat seperti ini dan salin juga: /VERSION/angular-route.min.js

Rute sudut akan membantu kami mengelola SPA kami dan menangani peralihan tampilan di halaman.

Kami ingin dapat menampilkan grafik data kami dengan baik. Untuk ini kita akan menggunakan perpustakaan yang disebut ChartJS. Buka di sini, pilih versi terbaru dan simpan tautan yang berakhir seperti ini: VERSION/Chart.bundle.min.js

Terakhir, kita akan menggunakan perpustakaan untuk menata halaman yang disebut Bootstrap. Buka tautan ini ke Mulai Cepat dan biarkan ini terbuka untuk saat ini. Setelah kami mulai menulis kode klien, Anda akan dapat mengganti tautan lama saya dengan versi yang lebih baru.

Sekarang, kita harus mengatur tampilan yang berbeda untuk aplikasi kita. Di direktori host tempat Anda memiliki dua file sebelumnya (esp.php dan getWeatherData.php), buat folder baru bernama weather_views. Di sini, kami akan menempatkan semua halaman kami yang masing-masing akan sesuai dengan id dari database kami (1, 2, atau 3).

Dalam folder tersebut, buat 3 file (day.html, old.html, dan kemarin.html). Unduh kode terlampir dan masukkan ke dalam file-file itu. Kode untuk DAY. HTML dikomentari sehingga Anda dapat memahami apa yang terjadi. Kode untuk 2 halaman lainnya pada dasarnya sama (bagian yang berbeda di old.html dikomentari).

Setelah Anda selesai dengan langkah ini, lanjutkan ke langkah berikutnya, yang merupakan langkah pemrograman yang paling sulit.

Langkah 5: File HTML Utama

Pada langkah ini, Anda akan membuat/mengedit/membaca file HTML utama di mana Anda akan menampilkan semuanya. Simpan file terlampir (yang, seperti biasa, dikomentari) sebagai espdata.html di direktori yang sama dengan esp.php. Saya harap Anda dapat membuat beberapa perubahan dan memahami apa yang sebenarnya terjadi.

Ini adalah bagian terbesar dari kode Anda, jadi sangat penting untuk memahami apa yang sedang terjadi.

Langkah 6: Uji Pengkabelan pada Papan Tempat memotong roti

Sekarang kami akan menguji bahwa semua kode berfungsi dengan perangkat keras kami. Jika Anda belum melakukannya, solder pin header pada Feather Huzzah dan sensor BME280. Untuk setiap langkah, sebuah foto dilampirkan.

1. Tempatkan bulu di papan tempat memotong roti. Hubungkan 3V ke rel + dan GND ke - rel.

2. Hubungkan sensor VIN ke rel + dan GND ke rel -.

3. Hubungkan sensor SDA ke pin 4 pada bulu. Hubungkan SCL ke pin 5.

4. Tempatkan fotoresistor pada papan tempat memotong roti dengan satu ujung mengarah ke rel +.

5. Hubungkan resistor 4,7k ke kabel fotoresistor yang tidak terhubung. Hubungkan ujung 4.7k yang tidak terhubung ke resistor 2k. Hubungkan ujung resistor 2k yang tidak terhubung ke rel - (GND).

6. Hubungkan sambungan resistor 4.7k dan 2k ke pin ADC (pin analog). Kami baru saja membuat pembagi tegangan yang membagi tegangan maksimum yang dibaca oleh pin dari 3.3V menjadi kurang dari 1V. Anda dapat bermain-main dengan kombinasi Anda sendiri jika Anda mau tetapi perlu diingat bahwa tegangan yang diberikan ke pin analog harus kurang dari 1V.

7. Terakhir, sambungkan pin RST (reset) pada bulu ke pin 16 pada bulu (kawat oranye di foto). Konfigurasi ini memungkinkan Feather Huzzah masuk ke mode deep sleep untuk menghemat daya.

Sekarang Anda sudah selesai! Unggah kode ke bulu huzzah Anda, dan mudah-mudahan, Anda dapat melihat pembaruan halaman web Anda (hanya halaman day.html). Jika tidak, coba gunakan monitor Serial untuk memecahkan masalah atau tanyakan di komentar di bawah.

Langkah 7: Proyek Permanen (Opsional)

Dengan asumsi semuanya berfungsi, jika Anda mau, Anda dapat membuat proyek ini lebih permanen. Saya tidak akan menunjukkan ini di sini, tetapi Anda dapat menyolder semua komponen ke papan kinerja dan kemudian memasukkannya ke dalam wadah. Saya akan melampirkan file IPT untuk wadah 3D yang saya gunakan di bawah ini dan beberapa foto untuk Anda mulai. Wadah dimaksudkan untuk inspirasi karena Anda mungkin ingin membuatnya lebih pribadi dengan desain dan teks yang berbeda. Bersenang-senang dengan kustomisasi! Semoga beruntung!