ESP8266 Stacioni i motit që shfaq të dhënat në një faqe në internet: 7 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:20

Shënim: Pjesë të këtij tutoriali mund të jenë të disponueshme në format video në Kanalin tim në YouTube - Fisi Teknik

Në këtë udhëzues, unë do të tregoj se si të krijoni një stacion moti që dërgon drejtpërdrejt të dhëna në faqen tuaj të internetit. Prandaj, do t'ju duhet domeni juaj (Shemb: msolonko.net). Për të filluar, këtu janë materialet që do t'ju nevojiten:

Artikujt:

Huzzah me pendë (16,95 dollarë)

Kabllo mikro USB me të dhëna (1.99 dollarë)

Paketa e baterisë (25 dollarë): Më vonë do të diskutoj se çfarë kapaciteti ju nevojitet për sa kohë pa rimbushje, në mënyrë që të zgjidhni kapacitetin që dëshironi. Kjo është një lidhje me atë që kam përdorur. Ju gjithashtu mund ta furnizoni atë nga një prizë.

1 fotorezistor

Disa rezistorë të tjerë - të diskutuar më vonë

Tela

Perf Board (5.59 dollarë) - Pako prej 20

BME280 Sensori i temperaturës, presionit dhe lagështisë ($ 9.99)

Një lloj kuti; ju mund të printoni një, dhe unë do t'ju tregoj modelin tim.

Webhosting dhe domain, nëse doni të ndiqni plotësisht me mësimin

Mjetet:

Prerës i telave

Makine per ngjitjen e metalit

Hapi 1: Kodi Huzzah i Pendës

Kodi do të shkruhet në Arduino IDE, i cili mund të shkarkohet këtu. Para se të fillojmë, ju lutemi ndiqni udhëzimet këtu në mënyrë që të konfiguroni Arduino IDE për të punuar me Feat Huzzah -in tuaj. Gjithashtu, ndiqni këto udhëzime për të shkarkuar bibliotekat e nevojshme për të punuar sensorin BME. Skedari i kodit është i bashkangjitur dhe i gjithë kodi komentohet në mënyrë që ta kuptoni. Pasi ta shikoni, kaloni në hapin tjetër ku do të shikojmë kodin që merr të dhënat e sensorit.

Hapi 2: Marrja e të dhënave nga Huzzah Feather

Deri tani, me shpresë e kuptoni se si funksionon kodi Arduino. Nëse jo, kthehuni te kodi dhe lexoni komentet e mia (komentova pothuajse çdo rresht). Tani do të shkruajmë kodin që merr të dhënat. Si më parë, të gjitha komentohen. Gjuha e programimit që përdoret për këtë është PHP, për të cilën mund të lexoni më shumë këtu.

Të dhënat tona do të ruhen në një bazë të dhënash MySQL, për të cilën mund të lexoni më shumë këtu. Të dhënat ruhen në tabela që kanë rreshta dhe kolona. Para se të shkruajmë kodin, duhet të bëjmë strukturën e tabelës sonë në cPanel -in tonë pritës. Unë jam duke përdorur Arvixe Hosting, kështu që cPanel juaj mund të duket ndryshe. Referojuni njërës prej imazheve për të parë se si duket pjesa ime. Së pari, ju doni të krijoni një bazë të dhënash të re MySQL nëse nuk e keni tashmë. Ju mund të përdorni magjistarin për këtë. Ka shumë burime online për këtë nëse keni nevojë për ndihmë.

Pasi të keni krijuar një bazë të dhënash, shkoni te phpMyAdmin dhe zgjidhni bazën tuaj të të dhënave. Krijoni një tabelë të quajtur weather_data me 9 kolona. Konsultohuni me një nga imazhet e mia më sipër për të parë se çfarë duhet të jetë çdo kolonë (kopjoni emrin, llojin e të dhënave dhe gjithçka tjetër saktësisht nëse doni të përdorni kodin tim). Counter do të jetë çelësi ynë kryesor dhe ID -ja do të na ndihmojë të identifikojmë se në cilën ditë bëjnë të dhënat që kanë të bëjnë (1: sot, 2: dje, 3: gjithçka tjetër). Meqenëse do të kemi shumë të dhëna, ne do t'i fshijmë disa prej tyre ndërsa plaket. Kjo është arsyeja pse ne kemi nevojë për kolonën id. Pjesa tjetër e kolonave janë mjaft vetë-shpjeguese. Tani për tani, tabela juaj në bazën e të dhënave tuaja duhet të duket saktësisht si e imja.

Tani, shkarkoni kodin e bashkangjitur dhe lexoni atë dhe komentet e mia. Kur të keni mbaruar, kaloni në hapin tjetër.

Shënim: kur shkarkoni kodin, riemëroni atë në esp.php. Për disa arsye, mora një gabim kur provova të ngarkoja një skedar PHP.

Kjo është në thelb se si do të funksionojë kodi.

1. Mblidhni të dhëna çdo 10 minuta dhe shfaqini ato

2. Pasi kalon një ditë, mesatarizoni çdo 6 vlera (për të kursyer hapësirë në DB) në mënyrë që të ketë një pikë të dhënash për çdo orë

3. Sapo të kalojë një ditë tjetër, mesatarizoni të gjitha të dhënat e mbetura për atë ditë dhe ruajini ato vetëm si një pikë të dhënash

Në këtë mënyrë, ne do të jemi në gjendje të shohim luhatje në dritë, temperaturë etj. Gjatë periudhës së muajve pa filluar të shpërqendruar nga luhatjet e përditshme të temperaturës, dritës, etj.

Hapi 3: Marrja e të dhënave nga baza e të dhënave në ekran

Pra, tani ne kemi kuptuar se si të mbledhim të dhënat e motit dhe t'i ngarkojmë ato në bazën tonë të të dhënave. Tani ne duhet të jemi në gjendje ta marrim atë në një formë të përdorshme. Si më parë, unë bashkangjita një skedar PHP getWeatherData.txt që duhet ta ruani te hosti juaj dhe ta ndryshoni shtesën e emrit të skedarit në.php në vend të.txt. I gjithë kodi është i komentuar. Lexojeni për ta kuptuar dhe ecni përpara pasi të mendoni se e keni marrë. Nëse keni pyetje, mos ngurroni të pyesni më poshtë.

Hapi 4: Konfigurimi i bibliotekave dhe disa gjëra të tjera

Për këtë projekt, një nga kornizat që do të përdorim është AngularJS, i cili do të na ndihmojë të komunikojmë me bazën e të dhënave dhe të ndërtojmë një SPA (Aplikim me një faqe). Për të marrë bibliotekën, shkoni te kjo lidhje dhe shkarkoni një version 1.64 ose më të lartë. Për këtë tutorial, unë kam përdorur 1.64, por shpesh lëshohen versione të reja, në mënyrë që të përdorni një tjetër. Gjeni një lidhje në atë faqe që përfundon kështu: /VERSION/angular.min.js

Kopjoni lidhjen dhe ruajeni diku të sigurt. Ne sapo morëm një lidhje për bibliotekën AngularJS. Ju do të keni nevojë për hapin tjetër. Tani, në të njëjtën faqe gjeni një lidhje që duket kështu dhe kopjojeni gjithashtu: /VERSION/angular-route.min.js

Rruga këndore do të na ndihmojë të menaxhojmë SPA-në tonë dhe të trajtojmë ndërrimin e shikimeve në faqe.

Ne duam të jemi në gjendje të shfaqim bukur tabelat e të dhënave tona. Për këtë ne do të përdorim një bibliotekë të quajtur ChartJS. Shkoni këtu, zgjidhni versionin e fundit dhe ruani një lidhje që përfundon kështu: VERSION/Chart.bundle.min.js

Së fundi, ne do të përdorim një bibliotekë për të paraqitur faqet e quajtura Bootstrap. Shko te kjo lidhje për Fillimin e Shpejtë dhe lëre të hapur tani për tani. Pasi të fillojmë të shkruajmë kodin e klientit, ju do të jeni në gjendje të zëvendësoni lidhjet e mia të vjetra me versionin më të ri.

Tani, ne duhet të krijojmë pikëpamje të ndryshme për aplikimin tonë. Në drejtorinë në hostin tuaj ku keni dy skedarët e mëparshëm (esp.php dhe getWeatherData.php), krijoni një dosje të re të quajtur weather_views. Këtu, ne do të vendosim të gjitha faqet tona që secila do të korrespondojë me një ID nga baza e të dhënave tona (1, 2, ose 3).

Në dosje, krijoni 3 skedarë (day.html, old.html, dhe Yesterday.html). Shkarkoni kodin e bashkangjitur dhe futeni në ato skedarë. Kodi për DAY. HTML komentohet në mënyrë që të kuptoni se çfarë po ndodh. Kodi për 2 faqet e tjera është në thelb i njëjtë (pjesë të ndryshme në të vjetrën. Html komentohet).

Pasi të keni mbaruar me këtë hap, kaloni në hapin tjetër, i cili është hapi më i vështirë i programimit.

Hapi 5: Skedari kryesor HTML

Në këtë hap, ju do të bëni/redaktoni/lexoni skedarin kryesor HTML ku do të shfaqni gjithçka. Ruani skedarin e bashkangjitur (i cili, si gjithmonë, komentohet) si espdata.html në të njëjtën drejtori me esp.php. Shpresoj se ju mund të bëni disa ndryshime në të dhe të kuptoni se çfarë po ndodh vërtet.

Ky është pjesa më e madhe e kodit tuaj, kështu që është padyshim e rëndësishme të kuptoni se çfarë po ndodh.

Hapi 6: Testimi i telave në një tabelë me bukë

Tani do të testojmë që i gjithë kodi punon me harduerin tonë. Nëse nuk e keni bërë ende, lidhni kunjat e kokës në Feat Huzzah dhe sensorin BME280. Për çdo hap, bashkëngjitet një fotografi.

1. Vendoseni pendën në dërrasën e bukës. Lidhni 3V me hekurudhën + dhe GND me - hekurudhën.

2. Lidhni sensorin VIN me + hekurudhën dhe GND me - hekurudhën.

3. Lidhni sensorin SDA me kunjin 4 në pendë. Lidhni SCL me pin 5.

4. Vendosni rezistencën e fotos në dërrasën e bukës me një plumb që shkon në + hekurudhë.

5. Lidhni një rezistencë 4.7k me prizën e palidhur të fotorezistencës. Lidhni prizën e palidhur të 4.7k me një rezistencë 2k. Lidhni skajin e palidhur të rezistencës 2k me hekurudhën - (GND).

6. Lidhni lidhësen e rezistencës 4.7k dhe 2k në pin ADC (kunja analoge). Ne sapo bëmë një ndarës të tensionit që ndan tensionin maksimal të lexuar nga kunja nga 3.3V në më pak se 1V. Nëse dëshironi, mund të luani me kombinimin tuaj, por mbani në mend se tensioni i dhënë në pinin analog duhet të jetë më pak se 1V.

7. Së fundi, lidhni kunjin RST (rivendosje) në pendë me kunjin 16 në pendë (tela portokalli në foto). Ky konfigurim lejon Feat Huzzah të hyjë në modalitetin e gjumit të thellë për të kursyer energji.

Tani keni mbaruar! Ngarko kodin në huzzahun tënd të pendës, dhe me shpresë, mund të shihni përditësimin e faqes tuaj të internetit (vetëm faqen day.html). Nëse jo, provoni të përdorni monitorin serik për të zgjidhur problemet ose pyesni në komentet më poshtë.

Hapi 7: Projekt i Përhershëm (Opsional)

Duke supozuar se gjithçka funksionon, nëse dëshironi, mund ta bëni këtë projekt më të përhershëm. Unë nuk do ta tregoj këtë këtu, por ju mund t'i bashkoni të gjithë përbërësit në një tabelë perf dhe më pas t'i mbyllni në një enë. Unë do të bashkëngjit skedarët IPT për enën 3D që kam përdorur më poshtë dhe disa fotografi për të filluar. Enë është menduar për frymëzim sepse ndoshta do të dëshironi ta bëni atë më personal me një dizajn dhe tekst të ndryshëm. Argëtohuni me personalizimin! Paç fat!