በድር ጣቢያ ላይ መረጃን የሚያሳየው ESP8266 የአየር ሁኔታ ጣቢያ 7 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:31

ማስታወሻ - የዚህ መማሪያ ክፍሎች በ YouTube ሰርጥ - ቴክ ጎሳ ላይ በቪዲዮ ቅርጸት ሊገኙ ይችላሉ።

በዚህ መመሪያ ውስጥ መረጃን በቀጥታ ወደ ድር ጣቢያዎ የሚልክ የአየር ሁኔታ ጣቢያ እንዴት እንደሚሠራ አሳያለሁ። ስለዚህ ፣ የራስዎ ጎራ ያስፈልግዎታል (ለምሳሌ ፦ msolonko.net)። ለመጀመር ፣ የሚያስፈልጉዎት ቁሳቁሶች እዚህ አሉ

ንጥሎች ፦

ላባ ሁዛ ($ 16.95)

የማይክሮ ዩኤስቢ ገመድ ከውሂብ ($ 1.99)

የባትሪ እሽግ ($ 25) - እርስዎ የሚፈልጉትን አቅም መምረጥ እንዲችሉ በኋላ ምን ያህል ጊዜ እንደሚሞሉ እወያይበታለሁ። ይህ እኔ ከተጠቀምኩበት አገናኝ ነው። እንዲሁም ከመውጫ ጣቢያ ብቻ ኃይል መስጠት ይችላሉ።

1 Photoresistor

አንዳንድ ሌሎች ተቃዋሚዎች - በኋላ ተወያይተዋል

ሽቦ

የፐርፍ ቦርድ (5.59 ዶላር) - ጥቅል 20

BME280 የሙቀት መጠን ፣ ግፊት እና እርጥበት ዳሳሽ ($ 9.99)

አንድ ዓይነት ሳጥን; አንዱን 3 ዲ ማተም ይችላሉ ፣ እና የእኔን ንድፍ አሳያችኋለሁ።

የድር ማስተናገጃ እና ጎራ ፣ ከአጋዥ ስልጠናው ጋር ሙሉ በሙሉ ለመከተል ከፈለጉ

መሣሪያዎች ፦

ሽቦ መቁረጫ

የመሸጫ ብረት

ደረጃ 1 ላባ ሁዛ ኮድ

ኮዱ በአርዱዲኖ አይዲኢ ውስጥ ይፃፋል ፣ እዚህ ማውረድ ይችላል። ከመጀመራችን በፊት ፣ ከላባ ሁዛህ ጋር ለመስራት የአርዲኖ አይዲኢን ለማቀናጀት እባክዎን እዚህ ያሉትን መመሪያዎች ይከተሉ። እንዲሁም ፣ የ BME ዳሳሽ እንዲሠራ አስፈላጊውን ቤተመጽሐፍት ለማውረድ እነዚህን መመሪያዎች ይከተሉ የኮድ ፋይሉ ተያይ attachedል ፣ እና እርስዎ እንዲረዱት ሁሉም ኮዱ አስተያየት ተሰጥቶታል። አንዴ ከተመለከቱት ፣ ወደ አነፍናፊው መረጃ የሚቀበለውን ኮድ ወደምንመለከተው ወደ ቀጣዩ ደረጃ ይሂዱ።

ደረጃ 2 ከላባ ሁዛ መረጃን መቀበል

አሁን ፣ የአርዱዲኖ ኮድ እንዴት እንደሚሠራ ተስፋ እናደርጋለን። ካልሆነ ወደ ኮዱ ይመለሱ እና አስተያየቶቼን ያንብቡ (እያንዳንዱን መስመር ማለት ይቻላል አስተያየት ሰጥቻለሁ)። አሁን ውሂቡን የሚቀበለውን ኮድ እንጽፋለን። ልክ እንደበፊቱ ሁሉ አስተያየት ተሰጥቷል። ለዚህ ጥቅም ላይ የሚውለው የፕሮግራም ቋንቋ እዚህ ላይ የበለጠ ማንበብ የሚችሉት ፒኤችፒ ነው።

የእኛ መረጃ እዚህ ላይ የበለጠ ማንበብ በሚችሉት በ MySQL ጎታ ውስጥ ይቀመጣል። ውሂብ ረድፎች እና ዓምዶች ባሏቸው ሰንጠረ inች ውስጥ ተከማችቷል። ኮዱን ከመፃፋችን በፊት ፣ በእኛ አስተናጋጅ cPanel ላይ የጠረጴዛችንን መዋቅር ማድረግ አለብን። እኔ Arvixe Hosting ን እጠቀማለሁ ፣ ስለዚህ የእርስዎ cPanel የተለየ ሊመስል ይችላል። የእኔ ክፍል ምን እንደሚመስል ለማየት ከአንዱ ምስሎች አንዱን ይመልከቱ። በመጀመሪያ ፣ አስቀድመው ከሌለዎት አዲስ የ MySQL ዳታቤዝ መፍጠር ይፈልጋሉ። ለዚህም ጠንቋዩን መጠቀም ይችላሉ። እርዳታ ከፈለጉ በዚህ ላይ ብዙ የመስመር ላይ ሀብቶች አሉ።

አንዴ የውሂብ ጎታ ከተዋቀረ በኋላ ወደ phpMyAdmin ይሂዱ እና የውሂብ ጎታዎን ይምረጡ። 9 ዓምዶች ያሉት የአየር ሁኔታ_ዳታ የሚል ሠንጠረዥ ይፍጠሩ። እያንዳንዱ አምድ ምን መሆን እንዳለበት ለማየት ከላይ ካሉት ምስሎቼ አንዱን ያማክሩ (ስሙን ፣ የውሂብ ዓይነቱን እና ሌሎቹን ሁሉ በትክክል ኮዴን ለመጠቀም ከፈለጉ)። ቆጣሪ የእኛ ዋና ቁልፍ ይሆናል እና መታወቂያው የሚመለከተውን ቀን (1: ዛሬ ፣ 2: ትናንት ፣ 3: ሌላውን ሁሉ) ለመለየት ይረዳናል። ብዙ መረጃ ስለሚኖረን ፣ ዕድሜው እየገፋ ሲሄድ አንዳንዶቹን እንሰርዛለን። ለዚህም ነው የመታወቂያ አምድ የሚያስፈልገን። የተቀሩት ዓምዶች በጣም እራሳቸውን የሚገልጹ ናቸው። አሁን ፣ በውሂብ ጎታዎ ውስጥ ያለው ጠረጴዛዎ ልክ የእኔን መምሰል አለበት።

አሁን ፣ የተያያዘውን ኮድ ያውርዱ እና በእሱ እና በአስተያየቶቼ ያንብቡ። ሲጨርሱ ወደሚቀጥለው ደረጃ ይቀጥሉ።

ማሳሰቢያ -ኮዱን ሲያወርዱ ወደ esp.php እንደገና ይሰይሙት። በሆነ ምክንያት የ PHP ፋይልን ለመስቀል ስሞክር ስህተት አጋጠመኝ።

ይህ በመሠረቱ ኮዱ እንዴት እንደሚሰራ ነው።

1. በየ 10 ደቂቃው መረጃ ይሰብስቡ እና ያሳዩ

2. አንድ ጊዜ ካለፈ ፣ በየሰዓቱ የውሂብ ነጥብ እንዲኖር በአማካይ በየ 6 እሴቶች (የዲቢ ቦታን ለመቆጠብ)

3. አንዴ ሌላ ቀን ካለፈ ፣ ለዚያ ቀን የቀረውን ሁሉንም ውሂብ በአማካይ እና እንደ አንድ የውሂብ ነጥብ ብቻ ያከማቹ

በዚህ መንገድ ፣ በየዕለቱ በሙቀት ፣ በብርሃን ፣ ወዘተ መለዋወጥ ትኩረትን ሳንይዝ በወራት የጊዜ ገደብ ውስጥ በብርሃን ፣ በሙቀት ወዘተ ወዘተ ውስጥ መለዋወጥን ማየት እንችላለን።

ደረጃ 3 - ከውሂብ ጎታ ወደ ማሳያ መረጃን ሰርስሮ ማውጣት

ስለዚህ አሁን የአየር ሁኔታ መረጃን እንዴት እንደሚሰበስብ እና ወደ የውሂብ ጎታችን እንዴት እንደሚሰቅል አውቀናል። አሁን ሊጠቅም በሚችል መልክ መልሰን ማግኘት መቻል አለብን። እንደበፊቱ ፣ በአስተናጋጅዎ ውስጥ ማስቀመጥ እና ከ.txt ይልቅ የፋይል ስም ቅጥያውን ወደ ሁሉም ኮዱ አስተያየት ተሰጥቷል። እሱን ለመረዳት እና ያገኙትን ካሰቡ በኋላ ይቀጥሉ። ጥያቄዎች ካሉዎት ከዚህ በታች ለመጠየቅ ነፃነት ይሰማዎ።

ደረጃ 4 የቤተ መፃህፍት ማዋቀር እና አንዳንድ ሌሎች ነገሮች

ለዚህ ፕሮጀክት እኛ የምንጠቀምባቸው ማዕቀፎች አንዱ AngularJS ነው ፣ ይህም ከመረጃ ቋቱ ጋር ለመግባባት እና ኤስ ፒ ኤስ (ነጠላ ገጽ ማመልከቻ) ለመገንባት ይረዳናል። ቤተመጻሕፍቱን ለማግኘት ወደዚህ አገናኝ ይሂዱ እና 1.64 ወይም ከዚያ በላይ የሆነ ስሪት ያውርዱ። ለዚህ አጋዥ ስልጠና እኔ 1.64 ን እጠቀም ነበር ግን አዲስ ስሪቶች ብዙውን ጊዜ እየተለቀቁ ነው ስለዚህ የተለየን መጠቀም ይችላሉ። በዚያ ገጽ ላይ እንደዚህ የሚያበቃ አገናኝ ያግኙ / /UNSION/angular.min.js

አገናኙን ገልብጠው ደህንነቱ በተጠበቀ ቦታ ያስቀምጡት። ለ AngularJS ቤተ -መጽሐፍት አገናኝ አግኝተናል። ለሚቀጥለው እርምጃ ያስፈልግዎታል። አሁን ፣ በተመሳሳይ ገጽ ላይ ይህን የሚመስል አገናኝ ያግኙ እና እንዲሁም ይቅዱ //VERSION/angular-route.min.js

ማዕዘኑ-መንገድ የእኛን SPA እንድናስተዳድር እና በገጹ ውስጥ የእይታዎችን መቀያየር እንድንይዝ ይረዳናል።

የእኛን የውሂብ ገበታዎች በጥሩ ሁኔታ ለማሳየት መቻል እንፈልጋለን። ለዚህ እኛ ChartJS የተባለ ቤተመጽሐፍት እንጠቀማለን። ወደዚህ ይሂዱ ፣ የቅርብ ጊዜውን ስሪት ይምረጡ እና እንደዚህ የሚያበቃ አገናኝ ያስቀምጡ - VERSION/Chart.bundle.min.js

በመጨረሻ ፣ ቡትስትራፕ የሚባሉትን ገጾች ለማቀናበር ቤተመጽሐፍት እንጠቀማለን። ወደ ፈጣን ጅምር ወደዚህ አገናኝ ይሂዱ እና ይህንን ክፍት ለጊዜው ይተውት። አንዴ የደንበኛውን ኮድ መጻፍ ከጀመርን ፣ የድሮ አገናኞቼን በአዲሱ ስሪት መተካት ይችላሉ።

አሁን ፣ ለትግበራችን የተለያዩ አመለካከቶችን ማዘጋጀት አለብን። ቀዳሚዎቹ ሁለት ፋይሎች (esp.php እና getWeatherData.php) ባሉበት በአስተናጋጅዎ ማውጫ ውስጥ የአየር ሁኔታ ዕይታዎች የሚባል አዲስ አቃፊ ይፍጠሩ። በዚህ ውስጥ ፣ እያንዳንዳችን ከመረጃ ቋታችን (1 ፣ 2 ፣ ወይም 3) ከመታወቂያ ጋር የሚዛመዱትን ሁሉንም ገጾቻችንን እናስቀምጣለን።

በአቃፊው ውስጥ 3 ፋይሎችን (day.html ፣ old.html ፣ and yesterday.html) ይፍጠሩ። የተያያዘውን ኮድ ያውርዱ እና ወደ እነዚያ ፋይሎች ውስጥ ያስገቡ። ምን እየሆነ እንዳለ እንዲረዱ የ DAY. HTML ኮድ አስተያየት ተሰጥቶታል። ለሌሎቹ 2 ገጾች ኮዱ በመሠረቱ አንድ ነው (በ old.html ውስጥ ያለው የተለየ ክፍል አስተያየት ተሰጥቷል)።

በዚህ ደረጃ ከጨረሱ በኋላ ወደሚቀጥለው ይሂዱ ፣ ይህም በጣም አስቸጋሪ የፕሮግራም ደረጃ ነው።

ደረጃ 5 ዋናው የኤችቲኤምኤል ፋይል

በዚህ ደረጃ ሁሉንም ነገር የሚያሳዩበት ዋናውን የኤችቲኤምኤል ፋይል ያደርጉ/ያርትዑ/ያነባሉ። ልክ እንደ esp.php በተመሳሳይ ማውጫ ውስጥ የተያያዘውን ፋይል (እንደ ሁልጊዜ አስተያየት የሚሰጥ) እንደ espdata.html ያስቀምጡ። በእሱ ላይ አንዳንድ ለውጦችን ማድረግ እና በእውነቱ ምን እየተደረገ እንዳለ መረዳት እንደሚችሉ ተስፋ አደርጋለሁ።

ይህ የእርስዎ ኮድ አብዛኛው ነው ፣ ስለዚህ በእርግጠኝነት ምን እየተደረገ እንዳለ መረዳቱ አስፈላጊ ነው።

ደረጃ 6 - በመጋገሪያ ሰሌዳ ላይ የሽቦ ሙከራ

አሁን ሁሉም ኮዶች በእኛ ሃርድዌር እንደሚሠሩ እንሞክራለን። አስቀድመው ካላደረጉ ፣ በላባ ሁዛ እና በ BME280 ዳሳሽ ላይ የመሸጫ ራስጌ ፒን። ለእያንዳንዱ እርምጃ ፎቶ ተያይ attachedል።

1. ላባውን በዳቦ ሰሌዳው ላይ ያድርጉት። 3V ን ከ + ባቡር እና ከ GND ወደ - ባቡር ያገናኙ።

2. አነፍናፊውን VIN ወደ + ባቡር እና GND ወደ - ባቡር ያገናኙ።

3. በላባ ላይ 4 ን ለመሰካት ዳሳሽ ኤስዲኤን ያገናኙ። SCL ን ከፒን 5 ጋር ያገናኙ።

4. አንድ መሪ ወደ + ባቡሩ በመሄድ የዳቦ ቦርዱ ላይ ፎቶሪስቶርተርን ያስቀምጡ።

5. 4.7 ኪ resistor ወደ የፎቶግራፍ አስተላላፊው ከማይገናኝ መሪ ጋር ያገናኙ። የ 4.7 ኪውን ያልተገናኘ መሪን ወደ 2 ኪ resistor ያገናኙ። የ 2 ኪ resistor ያልተገናኘውን መጨረሻ ወደ - ባቡር (GND) ያገናኙ።

6. የኤ.ዲ.ሲ (የአናሎግ ፒን) ለመሰካት የ 4.7 ኪ እና የ 2 ኪ ተቃዋሚውን መገጣጠሚያ ያገናኙ። እኛ በፒን የተነበበውን ከፍተኛውን voltage ልቴጅ ከ 3.3V ወደ 1V ያነሰ የሚከፋፍል የቮልቴጅ መከፋፈያ ሠራን። ከፈለጉ ከራስዎ ጥምረት ጋር መጫወት ይችላሉ ፣ ግን ለአናሎግ ፒን የተሰጠው ቮልቴጅ ከ 1 ቪ በታች መሆን እንዳለበት ያስታውሱ።

7. በመጨረሻም በላባው ላይ የ RST (ዳግም ማስጀመር) ፒን በላባው ላይ 16 ላይ (በፎቶው ውስጥ ያለው ብርቱካናማ ሽቦ) ያያይዙት። ይህ ውቅር ኃይልን ለመቆጠብ ላባ ሁዛ ወደ ጥልቅ የእንቅልፍ ሁኔታ እንዲገባ ያስችለዋል።

አሁን ጨርሰዋል! ኮዱን ወደ ላባ huzzah ይስቀሉ ፣ እና ተስፋ እናደርጋለን ፣ የድረ -ገጽዎን ዝመና (የ day.html ገጽ ብቻ) ማየት ይችላሉ። ካልሆነ ፣ መላ ለመፈለግ ወይም ከዚህ በታች ባሉት አስተያየቶች ውስጥ ለመጠየቅ ተከታታይ ማሳያውን ለመጠቀም ይሞክሩ።

ደረጃ 7 ቋሚ ፕሮጀክት (አማራጭ)

ሁሉም ነገር እንደሚሰራ በመገመት ፣ ከፈለጉ ፣ ይህንን ፕሮጀክት የበለጠ ዘላቂ ማድረግ ይችላሉ። ይህንን እዚህ አላሳይም ፣ ግን ሁሉንም አካላት ወደ ሽቶ ሰሌዳ መሸጥ እና ከዚያ በእቃ መያዥያ ውስጥ ማያያዝ ይችላሉ። እኔ ከዚህ በታች ለተጠቀምኩበት ለ 3 ዲ ኮንቴይነር የ IPT ፋይሎችን እና ጥቂት ፎቶዎችን እርስዎን ለመጀመር አያይዣለሁ። መያዣው ለተነሳሽነት የታሰበ ነው ምክንያቱም ምናልባት በተለየ ንድፍ እና ጽሑፍ የበለጠ የግል ማድረግ ይፈልጋሉ። በማበጀት ይደሰቱ! መልካም እድል!