ESP8266 Եղանակային կայան, որը ցուցադրում է տվյալները վեբ կայքում ՝ 7 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Նշում. Այս ձեռնարկի որոշ հատվածներ կարող են հասանելի լինել իմ YouTube ալիքում `Tech Tribe- ի տեսա ձևաչափով:

Այս ուսանելիում ես ցույց կտամ, թե ինչպես կատարել եղանակային կայան, որն ուղղակիորեն տվյալներ է ուղարկում ձեր կայք: Հետևաբար, ձեզ հարկավոր կլինի ձեր սեփական տիրույթը (օրինակ ՝ msolonko.net): Սկսելու համար ահա ձեզ անհրաժեշտ նյութերը.

Նյութեր:

Փետուր Հուզա ($ 16.95)

Տվյալներով միկրո USB մալուխ ($ 1.99)

Մարտկոցի տուփ ($ 25). Ես հետագայում կքննարկեմ, թե ինչ հզորություն է ձեզ անհրաժեշտ ինչքան ժամանակ առանց լիցքավորման, այնպես որ կարող եք ընտրել ձեր ուզած հզորությունը: Սա իմ օգտագործածի հղումն է: Կարող եք նաև պարզապես սնուցել վարդակից:

1 ֆոտոռեզիստոր

Որոշ այլ դիմադրողներ - քննարկվեցին ավելի ուշ

Մետաղալար

Perf Board (5.59 դոլար) - 20 հատ փաթեթ

BME280 ջերմաստիճանի, ճնշման և խոնավության ցուցիչ ($ 9.99)

Մի տեսակ տուփ; կարող եք մեկը 3D տպել, և ես ձեզ ցույց կտամ իմ դիզայնը:

Վեբ հոստինգ և տիրույթ, եթե ցանկանում եք ամբողջությամբ հետևել ձեռնարկին

Գործիքներ:

Մետաղալար կտրիչ

Sոդման երկաթ

Քայլ 1: Փետուրի Huzzah ծածկագիրը

Կոդը գրվելու է Arduino IDE- ով, որը կարելի է ներբեռնել այստեղից: Նախքան սկսելը, խնդրում ենք հետևել այստեղ տրված հրահանգներին, որպեսզի ստեղծեք Arduino IDE- ն ՝ ձեր Feather Huzzah- ի հետ աշխատելու համար: Նաև հետևեք այս հրահանգներին ՝ ներբեռնելու համար անհրաժեշտ գրադարանները ՝ BME սենսորը աշխատեցնելու համար: Կոդի ֆայլը կցված է, և ամբողջ ծածկագիրը մեկնաբանվում է, որպեսզի կարողանաք հասկանալ այն: Երբ նայեք դրան, անցեք հաջորդ քայլին, որտեղ մենք կանդրադառնանք սենսորի տվյալները ստացող ծածկագրին:

Քայլ 2. Փետուրի Huzzah- ից տվյալների ստացում

Մինչ այժմ դուք հուսով եք հասկանում, թե ինչպես է աշխատում Arduino կոդը: Եթե ոչ, վերադարձեք ծածկագրին և կարդացեք իմ մեկնաբանությունները (ես մեկնաբանեցի գրեթե յուրաքանչյուր տող): Այժմ մենք կգրենք այն կոդը, որը ստանում է տվյալները: Ինչպես նախկինում, այդ ամենը մեկնաբանվում է: Դրա համար օգտագործվող ծրագրավորման լեզուն PHP- ն է, որի մասին ավելին կարող եք կարդալ այստեղ:

Մեր տվյալները կպահվեն MySQL տվյալների շտեմարանում, որի մասին ավելին կարող եք կարդալ այստեղ: Տվյալները պահվում են աղյուսակներում, որոնք ունեն տողեր և սյուներ: Նախքան ծածկագիրը գրելը, մենք պետք է կազմենք մեր սեղանի կառուցվածքը մեր հոսթինգի cPanel- ում: Ես օգտագործում եմ Arvixe հոստինգը, այնպես որ ձեր cPanel- ը կարող է այլ տեսք ունենալ: Անդրադարձեք պատկերներից մեկին ՝ տեսնելու, թե ինչ տեսք ունի իմ հատվածը: Նախ, ցանկանում եք ստեղծել նոր MySQL տվյալների բազա, եթե այն արդեն չունեք: Դրա համար կարող եք օգտագործել կախարդը: Այս մասին շատ ռեսուրսներ կան, եթե օգնության կարիք ունեք:

Երբ տվյալների բազա ստեղծեք, գնացեք phpMyAdmin և ընտրեք ձեր տվյալների բազան: Ստեղծեք աղյուսակ, որը կոչվում է weather_data ՝ 9 սյունակով: Խորհրդակցեք վերը նշված իմ պատկերներից մեկի հետ ՝ տեսնելու, թե ինչպիսին պետք է լինի յուրաքանչյուր սյունակ (պատճենեք անունը, տվյալների տիպը և մնացած ամեն ինչ, եթե ցանկանում եք օգտագործել իմ կոդը): Հաշվիչը կլինի մեր հիմնական բանալին, իսկ id- ն կօգնի մեզ որոշել, թե տվյալ օրն ինչ տվյալներով են զբաղվում (1: այսօր, 2: երեկ, 3: մնացած ամեն ինչ): Քանի որ մենք կունենանք շատ տվյալներ, մենք կջնջենք դրանց մի մասը, քանի որ այն ավելի հին է դառնում: Այդ իսկ պատճառով մեզ անհրաժեշտ է id սյունակը: Մնացած սյունակները բավականին ինքնուրույն բացատրելի են: Այս պահին ձեր տվյալների բազայում ձեր աղյուսակը պետք է նման լինի իմին:

Այժմ, ներբեռնեք կցված կոդը և կարդացեք այն և իմ մեկնաբանությունները: Ավարտելուց հետո անցեք հաջորդ քայլին:

Նշում. Երբ ներբեռնում եք կոդը, վերանվանեք այն esp.php: Չգիտես ինչու, ես սխալ ստացա, երբ փորձեցի վերբեռնել PHP ֆայլ:

Հիմնականում այսպես է աշխատելու կոդը:

1. Հավաքեք տվյալները յուրաքանչյուր 10 րոպեն մեկ և ցուցադրեք դրանք

2. Օրը մեկ անգամ անցնելուց հետո միջինացրեք յուրաքանչյուր 6 արժեքը (DB տարածք խնայելու համար) այնպես, որ յուրաքանչյուր ժամվա համար լինի տվյալների կետ

3. Երբ անցնում է մեկ այլ օր, միջինացրեք այդ օրվա մնացած բոլոր տվյալները և պահեք դրանք որպես տվյալների միայն մեկ կետ

Այս կերպ, մենք կկարողանանք տեսնել լույսի, ջերմաստիճանի և այլնի տատանումներ ամիսների ընթացքում, առանց ջերմաստիճանի, լույսի և այլնի ամենօրյա տատանումներից շեղվելու:

Քայլ 3: Տվյալների ստացում տվյալների շտեմարանից ցուցադրման համար

Այսպիսով, այժմ մենք պարզել ենք, թե ինչպես հավաքել եղանակի տվյալները և վերբեռնել դրանք մեր տվյալների բազայում: Այժմ մենք պետք է կարողանանք վերականգնել այն օգտագործելի տեսքով: Ինչպես նախկինում, ես կցեցի PHP ֆայլ getWeatherData.txt, որը դուք պետք է պահեք ձեր տանտիրոջը և ֆայլի անվան ընդլայնումը.txt- ի փոխարեն փոխեք.php- ի: Ամբողջ ծածկագիրը մեկնաբանված է: Կարդացեք այն հասկանալու համար և շարունակեք, երբ մտածեք, որ դա ստացել եք: Եթե ունեք հարցեր, ազատ զգացեք հարցնել ստորև:

Քայլ 4: Գրադարանների կարգավորում և որոշ այլ բաներ

Այս նախագծի համար այն շրջանակներից մեկը, որը մենք կօգտագործենք, AngularJS- ն է, որը կօգնի մեզ շփվել տվյալների բազայի հետ և կառուցել SPA (Մեկ էջի ծրագիր): Գրադարանը ձեռք բերելու համար անցեք այս հղումով և ներբեռնեք 1.64 կամ ավելի նոր տարբերակ: Այս ձեռնարկի համար ես օգտագործել եմ 1.64, բայց հաճախ նոր տարբերակներ են թողարկվում, որպեսզի կարողանաք օգտագործել մեկ ուրիշը: Այդ էջում գտեք հղում, որն ավարտվում է այսպես ՝ /VERSION/angular.min.js

Պատճենեք հղումը և պահեք այն ապահով վայրում: Մենք պարզապես հղում ենք ստացել AngularJS գրադարանի համար: Ձեզ դա անհրաժեշտ կլինի հաջորդ քայլին: Այժմ, նույն էջում գտեք այս տեսքով հղում և նույնպես պատճենեք ՝ /VERSION/angular-route.min.js

Անկյունային երթուղին կօգնի մեզ կառավարել մեր SPA- ն և կարգավորել էջի դիտումների փոփոխությունը:

Մենք ցանկանում ենք, որ կարողանանք գեղեցիկ ցուցադրել մեր տվյալների գծապատկերները: Դրա համար մենք կօգտագործենք ChartJS կոչվող գրադարանը: Գնացեք այստեղ, ընտրեք վերջին տարբերակը և պահպանեք այսպես ավարտվող հղումը ՝ VERSION/Chart.bundle.min.js

Վերջապես, մենք կօգտագործենք գրադարանը ՝ Bootstrap կոչվող էջերը դասավորելու համար: Անցեք այս հղմանը Quick Start- ին և այս պահին բաց թողեք: Երբ մենք սկսենք գրել հաճախորդի կոդը, դուք կկարողանաք փոխարինել իմ հին հղումները նոր տարբերակով:

Այժմ, մենք պետք է ստեղծենք տարբեր տեսակետներ մեր դիմումի համար: Ձեր տանտիրոջ գրացուցակում, որտեղ դուք ունեք նախորդ երկու ֆայլերը (esp.php և getWeatherData.php), ստեղծեք նոր թղթապանակ ՝ weather_views անունով: Այստեղ մենք կտեղադրենք մեր բոլոր էջերը, որոնցից յուրաքանչյուրը կհամապատասխանի մեր տվյալների շտեմարանի id- ին (1, 2 կամ 3):

Թղթապանակում ստեղծեք 3 ֆայլ (day.html, old.html և Yesterday.html): Ներբեռնեք կցված ծածկագիրը և տեղադրեք այն այդ ֆայլերի մեջ: DAY. HTML- ի ծածկագիրը մեկնաբանվում է, որպեսզի կարողանաք հասկանալ, թե ինչ է կատարվում: Մյուս 2 էջերի ծածկագիրը հիմնականում նույնն է (հին հատվածում տարբեր հատվածներ մեկնաբանվում են):

Այս քայլին ավարտելուց հետո անցեք հաջորդին, որը ծրագրավորման ամենադժվար քայլն է:

Քայլ 5: Հիմնական HTML ֆայլ

Այս քայլում դուք կկատարեք/խմբագրեք/կկարդաք հիմնական HTML ֆայլը, որտեղ կցուցադրեք ամեն ինչ: Կցված ֆայլը (որը, ինչպես միշտ մեկնաբանվում է) պահեք espdata.html նույն գրացուցակում, ինչպես esp.php: Հուսով եմ, որ դուք կարող եք որոշակի փոփոխություններ կատարել դրանում և հասկանալ, թե ինչ է իրականում տեղի ունենում:

Սա ձեր ծածկագրի հիմնական մասն է, ուստի միանշանակ կարևոր է հասկանալ, թե ինչ է կատարվում:

Քայլ 6. Էլեկտրամոնտաժային փորձարկում Breadboard- ում

Այժմ մենք ստուգելու ենք, որ ամբողջ ծածկագիրը աշխատում է մեր սարքավորումների հետ: Եթե դեռ չեք հասցրել, ամրացրեք վերնագրի կապում Feather Huzzah- ը և BME280 սենսորը: Յուրաքանչյուր քայլի համար կցվում է լուսանկար:

1. Փետուրը դրեք սեղանի վրա: 3V- ը միացրեք + երկաթգծին և GND- ին `երկաթուղուն:

2. Միացրեք սենսոր VIN- ը + երկաթգծին և GND- ը `երկաթուղուն:

3. Սենսոր SDA- ն միացրեք փետուրի 4 -ին: Միացրեք SCL- ը 5 -րդ կապին:

4. Տեղադրեք ֆոտոընդդիմադիր սեղանի վրա `մեկ կապարով դեպի + երկաթուղի:

5. 4.7k դիմադրություն միացրեք ֆոտոընդդիմադիրի չմիացված հոսանքին: 4.7k- ի չկապված կապը միացրեք 2k ռեզիստորին: 2k դիմադրության չկապված ծայրը միացրեք երկաթուղու (GND) հետ:

6. Միացրեք 4.7k և 2k դիմադրության միացումը ADC (անալոգային քորոց) կապին: Մենք պարզապես պատրաստեցինք լարման բաժանարար, որը պինով կարդացած առավելագույն լարումը բաժանում է 3.3 Վ -ից 1 Վ -ից պակաս: Եթե ցանկանում եք, կարող եք խաղալ ձեր սեփական համադրությամբ, բայց հիշեք, որ անալոգային քորոցին տրված լարումը պետք է լինի 1 Վ -ից պակաս:

7. Ի վերջո, միացրեք փետուրի RST (վերակայման) քորոցը փետուրի 16 -ին (լուսանկարում նարնջագույն մետաղալար): Այս կոնֆիգուրացիան թույլ է տալիս Փետուրի Huzzah- ին մտնել խորը քնի ռեժիմ ՝ էներգիա խնայելու համար:

Այժմ դուք ավարտել եք: Վերբեռնեք ծածկագիրը ձեր փետուրի huzzah- ում և, հուսով եմ, կարող եք տեսնել ձեր վեբ էջի թարմացումը (միայն day.html էջը): Եթե ոչ, փորձեք օգտագործել Սերիայի մոնիտորը ՝ անսարքությունները վերացնելու կամ ստորև բերված մեկնաբանություններում հարցնելու համար:

Քայլ 7: Մշտական նախագիծ (ըստ ցանկության)

Ենթադրելով, որ ամեն ինչ աշխատում է, ցանկության դեպքում կարող եք այս նախագիծը դարձնել ավելի մշտական: Ես սա ցույց չեմ տա այստեղ, բայց դուք կարող եք բոլոր բաղադրիչները սոսնձել պարկուճի վրա, այնուհետև դրանք փակել տարայի մեջ: Ես կցեմ IPT ֆայլերը 3D կոնտեյների համար, որոնք ես օգտագործել եմ ստորև և մի քանի լուսանկար ՝ սկսելու համար: Կոնտեյները նախատեսված է ոգեշնչման համար, քանի որ հավանաբար կցանկանաք այն դարձնել ավելի անհատական ՝ այլ դիզայնով և տեքստով: Haveվարճացեք հարմարեցմամբ: Հաջողություն!