Veb saytında məlumatları göstərən ESP8266 Hava İstasyonu: 7 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46

Qeyd: Bu təlimatın bir hissəsi YouTube Kanalımda - Tech Tribe -də video formatında ola bilər

Bu təlimatda, veb saytınıza birbaşa məlumat göndərən bir hava stansiyasının necə qurulacağını göstərəcəyəm. Buna görə də öz sahənizə ehtiyacınız olacaq (Məsələn: msolonko.net). Başlamaq üçün sizə lazım olacaq materiallar:

Maddələr:

Tüy Huzzah (16.95 dollar)

Məlumatlı mikro USB kabel (1.99 dollar)

Batareya Paketi (25 dollar): Daha sonra doldurulmadan nə qədər müddətə hansı tutuma ehtiyacınız olduğunu müzakirə edəcəyəm, beləliklə istədiyiniz tutumu seçə bilərsiniz. Bu istifadə etdiyim linkə keçiddir. Həm də yalnız bir prizdən enerji ala bilərsiniz.

1 Fotoresistor

Bəzi digər rezistorlar - daha sonra müzakirə ediləcək

Tel

Perf Board (5.59 dollar) - 20 paket

BME280 Temperatur, Təzyiq və Nəmlik Sensoru ($ 9.99)

Bir növ qutu; 3D çap edə bilərsiniz və mən sizə dizaynımı göstərəcəyəm.

Təlimatla birlikdə izləmək istəyirsinizsə, Webhosting və domen

Alətlər:

Tel kəsici

Lehimleme dəmir

Addım 1: Tüy Huzzah Kodu

Kod Arduino IDE -də yazılacaq, buradan yükləyə bilərsiniz. Başlamadan əvvəl, Arduino IDE -ni Feather Huzzah ilə işləmək üçün qurmaq üçün buradakı təlimatları izləyin. BME sensorunun işləməsi üçün lazım olan kitabxanaları yükləmək üçün bu təlimatları izləyin. Kod faylı əlavə olunur və bütün kodu şərh edə bilərsiniz ki, başa düşəsiniz. Baxdıqdan sonra, sensor məlumatlarını alan kodu nəzərdən keçirəcəyimiz növbəti addıma keçin.

Addım 2: Feather Huzzah -dan Məlumat Alınması

İndiyə qədər inşallah Arduino kodunun necə işlədiyini başa düşürsən. Əks təqdirdə, koda qayıdın və şərhlərimi oxuyun (demək olar ki, hər sətiri şərh etdim). İndi məlumatları alan kodu yazacağıq. Əvvəlki kimi hamısı şərh olunur. Bunun üçün istifadə olunan proqramlaşdırma dili PHP -dir, burada daha çox oxuya bilərsiniz.

Verilərimiz burada oxuya biləcəyiniz bir MySQL Veritabanında saxlanılacaq. Məlumatlar satır və sütunları olan cədvəllərdə saxlanılır. Kodu yazmadan əvvəl, cPanel -in hostingində masamızın quruluşunu düzəltməliyik. Arvixe Hosting istifadə edirəm, buna görə cPanel fərqli görünə bilər. Şəkillərdən birinə baxın ki, mənim bir hissəm necə görünür. Birincisi, onsuz da yeni bir MySQL verilənlər bazası yaratmaq istəyirsən. Bunun üçün sehrbazdan istifadə edə bilərsiniz. Yardıma ehtiyacınız varsa, bu barədə çoxlu sayda onlayn mənbələr var.

Bir verilənlər bazası qurduqdan sonra phpMyAdmin -ə gedin və verilənlər bazanızı seçin. 9 sütundan ibarət weather_data adlı bir cədvəl yaradın. Hər bir sütunun nə olması lazım olduğunu görmək üçün yuxarıdakı şəkillərimdən birinə müraciət edin (adımı, məlumat tipini və kodumdan istifadə etmək istəyirsinizsə tam olaraq hər şeyi kopyalayın). Sayğac əsas açarımız olacaq və id məlumatların hansı günə aid olduğunu müəyyən etməyə kömək edəcək (1: bu gün, 2: dünən, 3: hər şey). Çox məlumatımız olacağından, yaşlandıqca bir hissəsini siləcəyik. Buna görə id sütununa ehtiyacımız var. Qalan sütunlar olduqca açıqdır. Hazırda verilənlər bazanızdakı masanız tam olaraq mənimki kimi görünməlidir.

İndi əlavə edilmiş kodu yükləyin və şərhlərimi oxuyun. Bitirdikdən sonra növbəti addıma keçin.

Qeyd: kodu yüklədiyiniz zaman adını esp.php olaraq dəyişdirin. Nədənsə PHP faylını yükləməyə çalışanda bir səhv aldım.

Əsasən kodun necə işləyəcəyi budur.

1. Hər 10 dəqiqədən bir məlumat toplayın və göstərin

2. Gündə bir dəfə keçdikdə, hər 6 dəyərdən (DB sahəsinə qənaət etmək üçün) hər saatda bir məlumat nöqtəsi olması üçün ortalamanı alın

3. Başqa bir gün keçdikdən sonra o gün üçün qalan bütün məlumatları ortalayın və yalnız bir məlumat nöqtəsi olaraq saxlayın

Beləliklə, aylıq müddət ərzində işıq, temperatur və s. Dalğalanmalarını gündəlik temperatur dalğalanmaları, işıq və s.

Addım 3: Verilənlər Bazasından Ekrana Məlumat Alınması

İndi hava məlumatlarını necə toplayacağımızı və məlumat bazamıza yüklədiyimizi anladıq. İndi istifadə edilə bilən bir şəkildə geri qaytarmağı bacarmalıyıq. Əvvəlki kimi, host -a saxlamağınız və fayl adı uzantısını.txt yerinə.php olaraq dəyişdirməyiniz lazım olan getWeatherData.txt PHP faylını əlavə etdim. Bütün kodlar şərh olunur. Bunu başa düşmək üçün oxuyun və əldə etdiyinizi düşündükdən sonra davam edin. Suallarınız varsa, aşağıda soruşmaqdan çekinmeyin.

Addım 4: Kitabxanaların qurulması və digər şeylər

Bu layihə üçün istifadə edəcəyimiz çərçivələrdən biri də verilənlər bazası ilə ünsiyyət qurmağımıza və SPA (Tək Səhifəli Tətbiq) qurmağımıza kömək edəcək AngularJS -dir. Kitabxananı əldə etmək üçün bu linkə daxil olun və 1.64 və ya daha yüksək bir versiyasını yükləyin. Bu dərs üçün 1.64 istifadə etdim, amma yeni versiyalar tez -tez buraxılır, buna görə başqa birini istifadə edə bilərsiniz. Bu səhifədə belə bitən bir bağlantı tapın: /VERSION/angular.min.js

Linki kopyalayın və təhlükəsiz yerdə saxlayın. AngularJS kitabxanası üçün bir keçid əldə etdik. Növbəti addım üçün buna ehtiyacınız olacaq. İndi eyni səhifədə buna bənzər bir bağlantı tapın və onu da kopyalayın: /VERSION/angular-route.min.js

Bucaqlı marşrut SPA-nızı idarə etməyimizə və səhifədəki baxışların dəyişdirilməsini idarə etməyə kömək edəcək.

Verilənlərimizin qrafiklərini gözəl şəkildə göstərə bilmək istəyirik. Bunun üçün ChartJS adlı kitabxanadan istifadə edəcəyik. Bura gedin, ən son versiyanı seçin və belə bitən bir linki qeyd edin: VERSION/Chart.bundle.min.js

Nəhayət, Bootstrap adlı səhifələri düzmək üçün bir kitabxanadan istifadə edəcəyik. Sürətli Başlamaq üçün bu linkə keçin və bunu indiyə qədər açıq buraxın. Müştəri kodunu yazmağa başladıqdan sonra köhnə bağlantılarımı yeni versiya ilə əvəz edə biləcəksiniz.

İndi tətbiqimiz üçün fərqli fikirlər qurmalıyıq. Ev sahibinizdə əvvəlki iki faylı (esp.php və getWeatherData.php) saxladığınız qovluqda weather_views adlı yeni bir qovluq yaradın. Buraya, hər birimiz verilənlər bazamızdan bir id ilə uyğun gələn bütün səhifələrimizi qoyacağıq (1, 2 və ya 3).

Qovluqda 3 fayl yaradın (day.html, old.html və dünən.html). Əlavə edilmiş kodu yükləyin və həmin fayllara qoyun. Baş verənləri başa düşmək üçün DAY. HTML kodu şərh edilmişdir. Digər 2 səhifənin kodu əsasən eynidir (old.html -də fərqli hissələr şərh olunur).

Bu addımı bitirdikdən sonra, ən çətin proqramlaşdırma addımı olan digərinə keçin.

Addım 5: Əsas HTML Fayl

Bu addımda, hər şeyi göstərəcəyiniz əsas HTML faylını düzəldəcək/düzəldəcək/oxuyacaqsınız. Əlavə edilmiş faylı (hər zaman olduğu kimi şərh olunur) espdata.html olaraq esp.php ilə eyni qovluqda saxlayın. Ümid edirəm ki, bəzi dəyişikliklər edə və nələrin baş verdiyini anlaya bilərsiniz.

Kodunuzun əsas hissəsi budur, buna görə də nəyin baş verdiyini başa düşmək mütləqdir.

Addım 6: Çörək lövhəsində naqillərin sınanması

İndi bütün kodların bizim aparatla işlədiyini sınayacağıq. Hələ etməmisinizsə, Feather Huzzah və BME280 sensoruna lehim başlığı qoyun. Hər addım üçün bir şəkil əlavə olunur.

1. Çörək taxtasına lələk qoyun. 3V -ni + rayına və GND -ni dəmiryoluna qoşun.

2. VIN sensorunu + rayına və GND -ni relsə qoşun.

3. SDA sensorunu lələkdəki 4 pininə qoşun. SCL -i pin 5 -ə qoşun.

4. Fotorezistoru çörək lövhəsinə + rayı gedən bir aparatla yerləşdirin.

5. Fotorezistorun bağlı olmayan ucuna 4.7k rezistor bağlayın. 4.7k -nın bağlanmamış ucunu 2k rezistora qoşun. 2k rezistorun bağlanmamış ucunu relsə (GND) bağlayın.

6. 4.7k və 2k rezistorun birləşməsini ADC pininə (analog pin) qoşun. Pinin oxuduğu maksimum gərginliyi 3.3V -dən 1V -ə qədər bölən bir gərginlik bölücü hazırladıq. İstəyirsinizsə, öz birləşmənizlə oynaya bilərsiniz, ancaq unutmayın ki, analog pinə verilən gərginlik 1V -dən az olmalıdır.

7. Nəhayət, lələk üzərindəki RST (sıfırlama) pinini lələkdəki 16 pinlə bağlayın (fotoşəkildə narıncı tel). Bu konfiqurasiya, Feather Huzzahın enerjiyə qənaət etmək üçün dərin yuxu rejiminə girməsinə imkan verir.

İndi işiniz bitdi! Kodu lələkli hüzzahınıza yükləyin və inşallah veb səhifənizin yeniləməsini görə bilərsiniz (yalnız day.html səhifəsi). Əks təqdirdə, problemi həll etmək və ya aşağıdakı şərhlərdə soruşmaq üçün Serial monitordan istifadə etməyə çalışın.

Addım 7: Daimi Layihə (İsteğe bağlı)

Hər şeyin işlədiyini düşünərək, istəsəniz, bu layihəni daha daimi edə bilərsiniz. Bunu burada göstərməyəcəyəm, ancaq bütün komponentləri bir lövhəyə lehimləyib sonra bir konteynerə bağlaya bilərsiniz. Başlamaq üçün aşağıda istifadə etdiyim 3D konteynerin IPT fayllarını və bir neçə fotoşəkili əlavə edəcəyəm. Konteyner ilham üçün nəzərdə tutulmuşdur, çünki ehtimal ki, fərqli bir dizayn və mətnlə daha şəxsi etmək istəyirsiniz. Özelleştirme ilə əylənin! Uğurlar!