ESP8266 veb -saytidagi ma'lumotlarni ko'rsatadigan ob -havo stantsiyasi: 7 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:26

Eslatma: Ushbu qo'llanmaning qismlari YouTube kanalimdagi video formatida bo'lishi mumkin - Tech Tribe

Bu ko'rsatmada men sizning veb -saytingizga ma'lumotlarni to'g'ridan -to'g'ri yuboradigan ob -havo stantsiyasini qanday qilishni ko'rsataman. Shuning uchun sizga o'z domeningiz kerak bo'ladi (Masalan: msolonko.net). Boshlash uchun sizga kerak bo'lgan materiallar:

Elementlar:

Xuz tuklari (16,95 dollar)

Ma'lumotli mikro USB kabeli ($ 1.99)

Batareya to'plami ($ 25): Men keyinroq zaryadlashsiz qancha vaqt kerak bo'ladi, shunda siz kerakli quvvatni tanlashingiz mumkin. Bu men foydalangan havola. Siz uni faqat rozetkadan quvvatlantirishingiz mumkin.

1 Fotoresistor

Boshqa ba'zi rezistorlar - keyinroq muhokama qilinadi

Tel

Perf Board (5,59 dollar) - 20 dona to'plami

BME280 Harorat, bosim va namlik sensori ($ 9.99)

Qandaydir quti; Siz 3D bosib chiqarishingiz mumkin, men sizga o'z dizaynimni ko'rsataman.

Veb -xosting va domen, agar siz qo'llanmani to'liq kuzatmoqchi bo'lsangiz

Asboblar:

Tel kesuvchi

Lehimlash temir

1 -qadam: tuklar Huzzah kodi

Kod Arduino IDE -da yoziladi, uni bu erdan yuklab olish mumkin. Ishni boshlashdan oldin, Arduino IDE -ni Feather Huzza bilan ishlash uchun sozlash uchun bu erdagi ko'rsatmalarga amal qiling. Bundan tashqari, BME sensori ishlashi uchun kerakli kutubxonalarni yuklab olish uchun ushbu ko'rsatmalarga amal qiling. Kod fayli biriktirilgan va siz tushunishingiz uchun barcha kodlar sharhlangan. Siz unga qaraganingizdan so'ng, sensor ma'lumotlarini oladigan kodni ko'rib chiqadigan keyingi bosqichga o'ting.

2 -qadam: tuklar Huzzadan ma'lumotlarni olish

Hozircha siz Arduino kodi qanday ishlashini tushunasiz. Agar yo'q bo'lsa, kodga qayting va sharhlarimni o'qing (men deyarli har bir satrga sharh berdim). Endi biz ma'lumotlarni qabul qiladigan kodni yozamiz. Oldingi kabi, bularning barchasi sharhlangan. Buning uchun ishlatiladigan dasturlash tili bu PHP bo'lib, uni bu erda o'qishingiz mumkin.

Bizning ma'lumotlarimiz MySQL ma'lumotlar bazasida saqlanadi, uni bu erda o'qishingiz mumkin. Ma'lumotlar qator va ustunli jadvallarda saqlanadi. Kodni yozishdan oldin, biz xosting cPanel -da jadvalimizning tuzilishini tuzishimiz kerak. Men Arvixe Hosting -dan foydalanayapman, shuning uchun sizning cPanel boshqacha ko'rinishi mumkin. Mening qismim nimaga o'xshashligini ko'rish uchun rasmlardan biriga qarang. Birinchidan, agar sizda yo'q bo'lsa, yangi MySQL ma'lumotlar bazasini yaratmoqchisiz. Buning uchun sehrgardan foydalanishingiz mumkin. Agar sizga yordam kerak bo'lsa, bu erda juda ko'p onlayn manbalar mavjud.

Ma'lumotlar bazasini o'rnatgandan so'ng, phpMyAdmin -ga o'ting va ma'lumotlar bazasini tanlang. 9 ustunli weather_data nomli jadval yarating. Har bir ustun qanday bo'lishi kerakligini bilish uchun yuqoridagi rasmlarimdan biriga murojaat qiling (agar siz mening kodimdan foydalanmoqchi bo'lsangiz, ism, ma'lumotlar turi va boshqa hamma narsani nusxa ko'chiring). Hisoblagich bizning asosiy kalitimiz bo'ladi va id bizga ma'lumotlarning qaysi kuni tegishli ekanligini aniqlashga yordam beradi (1: bugun, 2: kecha, 3: hamma narsa). Bizda juda ko'p ma'lumotlar bo'lishi uchun, biz yoshi ulg'aygan sari ularning bir qismini o'chirib tashlaymiz. Shuning uchun bizga id ustun kerak. Qolgan ustunlar o'z-o'zidan tushunarli. Hozir sizning ma'lumotlar bazangizdagi jadvalingiz menikiga o'xshash bo'lishi kerak.

Endi biriktirilgan kodni yuklab oling va u orqali va mening sharhlarimni o'qing. Ish tugagach, keyingi bosqichga o'ting.

Eslatma: kodni yuklaganingizda, uni esp.php deb o'zgartiring. Ba'zi sabablarga ko'ra, PHP faylini yuklashda xatolik yuz berdi.

Bu asosan kod qanday ishlaydi.

1. Har 10 daqiqada ma'lumotlarni to'plang va uni namoyish qiling

2. Kun o'tgach, o'rtacha har 6 qiymat (ma'lumotlar bazasida joyni tejash uchun), shuning uchun har bir soat uchun ma'lumot nuqtasi bo'ladi

3. Yana bir kun o'tgach, qolgan barcha ma'lumotlarni o'sha kun uchun o'rtacha hisoblab, uni faqat bitta ma'lumot nuqtasi sifatida saqlang

Shunday qilib, biz harorat, yorug'lik va hokazolarning kundalik o'zgarishiga chalg'imasdan oylar davomida yorug'lik, harorat va boshqalarning o'zgarishini ko'rishimiz mumkin bo'ladi.

3 -qadam: Ma'lumotlar bazasidan ko'rsatiladigan ma'lumotlarni olish

Endi biz ob -havo ma'lumotlarini qanday yig'ish va ma'lumotlar bazamizga yuklashni aniqladik. Endi biz uni foydalanish mumkin bo'lgan shaklda olishimiz kerak. Avvalgidek, men PHP faylini biriktirdim getWeatherData.txt, siz xostingizga saqlashingiz va fayl nomi kengaytmasini.txt o'rniga.php ga o'zgartirishingiz kerak. Barcha kodlar sharhlangan. Buni tushunish uchun o'qing va buni oldim deb o'ylagandan so'ng davom eting. Agar sizda savollar bo'lsa, quyida so'rang.

4 -qadam: Kutubxonalarni sozlash va boshqa narsalar

Ushbu loyiha uchun biz foydalanadigan ramkalardan biri bu AngularJS bo'lib, u bizga ma'lumotlar bazasi bilan aloqa o'rnatishga va SPA (bitta sahifali ilova) yaratishga yordam beradi. Kutubxonaga ega bo'lish uchun ushbu havolaga o'ting va 1.64 yoki undan yuqori versiyasini yuklab oling. Ushbu qo'llanmada men 1.64 dan foydalanardim, lekin yangi versiyalar tez -tez chiqariladi, shuning uchun siz boshqasini ishlatishingiz mumkin. Bu sahifada shunday tugaydigan havolani toping: /VERSION/angular.min.js

Havolani nusxalash va xavfsiz joyda saqlang. Bizda AngularJS kutubxonasi uchun havola bor. Keyingi qadam uchun sizga kerak bo'ladi. Endi o'sha sahifada shunga o'xshash havolani toping va uni nusxa ko'chiring: /VERSION/angular-route.min.js

Burchakli marshrut bizga SPAni boshqarishga va sahifadagi ko'rinishni o'zgartirishga yordam beradi.

Biz ma'lumotlar jadvallarini chiroyli tarzda ko'rsatishni xohlaymiz. Buning uchun biz ChartJS nomli kutubxonadan foydalanamiz. Bu erga o'ting, oxirgi versiyasini tanlang va shunday tugaydigan havolani saqlang: VERSION/Chart.bundle.min.js

Nihoyat, biz Bootstrap deb nomlangan sahifalarni joylashtirish uchun kutubxonadan foydalanamiz. Tez ishga tushirish uchun ushbu havolaga o'ting va hozircha uni ochiq qoldiring. Mijoz kodini yozishni boshlaganimizdan so'ng, siz mening eski havolalarimni yangi versiyaga almashtira olasiz.

Endi biz ilovamiz uchun turli xil qarashlarni o'rnatishimiz kerak. Xostingiz katalogida avvalgi ikkita faylingiz bor (esp.php va getWeatherData.php), weather_views nomli yangi papkani yarating. Bu erda biz har bir ma'lumotlar bazamiz identifikatoriga mos keladigan barcha sahifalarimizni joylashtiramiz (1, 2 yoki 3).

Jildda 3 ta fayl yarating (day.html, old.html va kecha.html). Qo'shilgan kodni yuklab oling va uni fayllarga joylashtiring. Nima sodir bo'layotganini tushunish uchun DAY. HTML kodi sharhlangan. Boshqa 2 sahifaning kodi asosan bir xil (old.html -dagi boshqa qismlar sharhlangan).

Ushbu qadamni bajarganingizdan so'ng, keyingi bosqichga o'ting, bu eng qiyin dasturlash bosqichidir.

5 -qadam: Asosiy HTML fayli

Bu bosqichda siz hamma narsani ko'rsatadigan asosiy HTML faylini yaratasiz/tahrirlaysiz/o'qiysiz. Biriktirilgan faylni (har doimgidek sharhlangan) espdata.html sifatida esp.php bilan bir xil katalogda saqlang. Umid qilamanki, siz unga ba'zi o'zgartirishlar kiritasiz va nima bo'layotganini tushunasiz.

Bu sizning kodingizning asosiy qismi, shuning uchun nima bo'layotganini tushunish juda muhimdir.

6 -qadam: Elektron panelidagi simlarni tekshirish

Endi biz barcha kodlar bizning uskunamiz bilan ishlashini tekshiramiz. Agar siz hali qilmagan bo'lsangiz, Feather Huzzah va BME280 sensoriga lehim sarlavhasi. Har bir qadam uchun fotosurat ilova qilinadi.

1. Tukni non taxtasiga qo'ying. 3Vni + temir yo'lga va GNDni temir yo'lga ulang.

2. Sensor VINni + relsga va GNDni - relsga ulang.

3. SDA sensorini patning 4 -piniga ulang. SCL -ni 5 -pinga ulang.

4. Fotorezistorni bitta taxtaga + relsga o'tadigan holda joylashtiring.

5. 4.7k rezistorni fotorezistorning ulanmagan uchiga ulang. 4.7k ning ulanmagan simini 2k rezistorga ulang. 2k rezistorning ulanmagan uchini temir yo'lga (GND) ulang.

6. 4,7k va 2k rezistorning bo'g'inini ADC piniga (analog pin) ulang. Biz faqat pin o'qigan maksimal kuchlanishni 3,3V dan 1V dan kam bo'ladigan kuchlanish bo'luvchi qildik. Agar xohlasangiz, o'zingizning kombinatsiyangiz bilan o'ynashingiz mumkin, lekin shuni yodda tutingki, analog pinga berilgan kuchlanish 1 V dan past bo'lishi kerak.

7. Nihoyat, pat ustidagi RST (qayta o'rnatish) pinini patning 16 -piniga ulang (rasmdagi to'q sariq sim). Bu konfiguratsiya Feather Huzzaga quvvatni tejash uchun chuqur uyqu rejimiga o'tishga imkon beradi.

Endi ishingiz tugadi! Kodni tuklar huzuriga yuklang va umid qilamanki, siz veb -sahifangiz yangilanishini ko'rasiz (faqat day.html sahifasi). Agar bunday bo'lmasa, muammolarni bartaraf etish uchun Serial monitordan foydalaning yoki quyidagi izohlarda so'rang.

7 -qadam: Doimiy loyiha (ixtiyoriy)

Agar hamma narsa ishlaydi deb faraz qilsak, agar xohlasangiz, siz ushbu loyihani doimiy qilib qo'yishingiz mumkin. Men buni bu erda ko'rsatmayman, lekin siz barcha tarkibiy qismlarni mukammal taxtaga lehimlab, keyin ularni idishga joylashtirasiz. Men boshlashim uchun quyida ishlatilgan 3D konteyner uchun IPT fayllarini va bir nechta fotosuratlarni biriktiraman. Konteyner ilhom uchun mo'ljallangan, chunki siz uni boshqa dizayn va matn bilan yanada shaxsiy qilishni xohlaysiz. Moslashtirish bilan xursand bo'ling! Omad!