ESP8266 ამინდის სადგური, რომელიც აჩვენებს მონაცემებს ვებგვერდზე: 7 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:18

შენიშვნა: ამ გაკვეთილის ნაწილები შეიძლება იყოს ვიდეო ფორმატში ჩემს YouTube არხზე - Tech Tribe

ამ სასწავლო ინსტრუქციაში მე ვაჩვენებ, თუ როგორ უნდა გავაკეთოთ ამინდის სადგური, რომელიც პირდაპირ აგზავნის მონაცემებს თქვენს ვებგვერდზე. ამიტომ, თქვენ დაგჭირდებათ თქვენი საკუთარი დომენი (მაგ.: msolonko.net). დასაწყებად, აქ არის მასალები, რომლებიც დაგჭირდებათ:

ნივთები:

ბუმბულის ჰუზა ($ 16.95)

მიკრო USB კაბელი მონაცემებით ($ 1.99)

ბატარეის პაკეტი (25 აშშ დოლარი): მე მოგვიანებით განვიხილავ რა ტევადობა გჭირდებათ რა დროის განმავლობაში დატენვის გარეშე, ასე რომ თქვენ შეგიძლიათ აირჩიოთ თქვენთვის სასურველი ტევადობა. ეს არის ბმული იმ ერთზე, რომელიც მე გამოვიყენე. თქვენ ასევე შეგიძლიათ მხოლოდ ელექტროენერგიის მიწოდება.

1 ფოტორეზისტორი

ზოგიერთი სხვა წინააღმდეგობა - განხილული მოგვიანებით

მავთული

სრულყოფილი დაფა ($ 5.59) - პაკეტი 20 ცალი

BME280 ტემპერატურის, წნევის და ტენიანობის სენსორი ($ 9.99)

რაიმე სახის ყუთი; თქვენ შეგიძლიათ 3D დაბეჭდოთ ერთი და მე გაჩვენებთ ჩემს დიზაინს.

ვებჰოსტინგი და დომენი, თუ გსურთ სრულად მიჰყევით სამეურვეოს

ინსტრუმენტები:

მავთულის საჭრელი

გასაყიდი რკინა

ნაბიჯი 1: ბუმბულის ჰუზას კოდი

კოდი დაიწერება Arduino IDE– ში, რომლის გადმოწერაც აქ შეგიძლიათ. სანამ დავიწყებთ, გთხოვთ მიჰყევით ინსტრუქციას აქ, რათა შეიქმნას Arduino IDE თქვენს ბუმბულის ჰუზასთან მუშაობისთვის. ასევე, მიჰყევით ამ ინსტრუქციას, რომ გადმოწეროთ საჭირო ბიბლიოთეკები, რომ მიიღოთ BME სენსორი. კოდის ფაილი თან ერთვის და ყველა კოდი კომენტარდება ისე, რომ მისი გაგება შეძლოთ. მას შემდეგ რაც შეხედავთ მას, გადადით შემდეგ საფეხურზე, სადაც ჩვენ შევხედავთ კოდს, რომელიც იღებს სენსორის მონაცემებს.

ნაბიჯი 2: მონაცემების მიღება ბუმბულის ჰუზასგან

თქვენ უკვე გესმით, თუ როგორ მუშაობს 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, რომელიც თქვენ უნდა შეინახოთ თქვენს მასპინძელში და შეცვალოთ ფაილის გაფართოება.php– ის ნაცვლად.txt. ყველა კოდი არის კომენტარი. წაიკითხეთ, რომ გაიგოთ და გააგრძელეთ, როგორც კი ფიქრობთ, რომ მიიღეთ. თუ თქვენ გაქვთ შეკითხვები, მოგერიდებათ დაუსვათ ქვემოთ.

ნაბიჯი 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. გადადით ამ ბმულზე სწრაფი დაწყება და დატოვეთ ეს ახლავე ღია. მას შემდეგ რაც დავიწყებთ კლიენტის კოდის წერას, თქვენ შეძლებთ შეცვალოთ ჩემი ძველი ბმულები ახალი ვერსიით.

ახლა, ჩვენ უნდა შევქმნათ განსხვავებული შეხედულებები ჩვენი აპლიკაციისთვის. თქვენს მასპინძლის დირექტორიაში, სადაც გაქვთ წინა ორი ფაილი (esp.php და getWeatherData.php), შექმენით ახალი საქაღალდე სახელწოდებით weather_views. აქ ჩვენ დავდებთ ჩვენს ყველა გვერდს, რომელთაგან თითოეული შეესაბამება ჩვენს მონაცემთა ბაზის id (1, 2, ან 3).

საქაღალდეში შექმენით 3 ფაილი (day.html, old.html და გუშინ. Html). ჩამოტვირთეთ თანდართული კოდი და ჩაწერეთ ამ ფაილებში. კოდი DAY. HTML არის კომენტარი, რათა გაიგოთ რა ხდება. დანარჩენი 2 გვერდის კოდი ძირითადად ერთი და იგივეა (ძველი ნაწილი განსხვავებულია. Html არის კომენტარი).

ამ ნაბიჯის დასრულების შემდეგ, გადადით შემდეგზე, რაც არის პროგრამირების ყველაზე რთული ნაბიჯი.

ნაბიჯი 5: მთავარი HTML ფაილი

ამ ეტაპზე თქვენ გააკეთებთ/შეცვლით/წაიკითხავთ მთავარ HTML ფაილს, სადაც აჩვენებთ ყველაფერს. შეინახეთ თანდართული ფაილი (რომელიც, როგორც ყოველთვის, არის კომენტარი) როგორც espdata.html იმავე დირექტორიაში, როგორც esp.php. ვიმედოვნებ, რომ თქვენ შეძლებთ მასში გარკვეული ცვლილებების შეტანას და მიხვდებით, რა ხდება სინამდვილეში.

ეს არის თქვენი კოდის ძირითადი ნაწილი, ამიტომ ნამდვილად მნიშვნელოვანია იმის გაგება, თუ რა ხდება.

ნაბიჯი 6: გაყვანილობის ტესტი პურის დაფაზე

ახლა ჩვენ შევამოწმებთ, რომ ყველა კოდი მუშაობს ჩვენს აპარატურაზე. თუ ეს ჯერ არ გაგიკეთებიათ, შეაერთეთ სათაურის ბუდე ბუმბულის ჰუზაზე და 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 რეზისტორის ერთობლიობა pin ADC (ანალოგური პინი). ჩვენ უბრალოდ გავაკეთეთ ძაბვის გამყოფი, რომელიც ყოფს ქინძისთავის მიერ წაკითხულ მაქსიმალურ ძაბვას 3.3 ვ -დან 1 ვ -ზე ნაკლებზე. თუ გსურთ, შეგიძლიათ ითამაშოთ თქვენივე კომბინაციით, მაგრამ გახსოვდეთ, რომ ანალოგური პინის ძაბვა უნდა იყოს 1 ვ -ზე ნაკლები.

7. დაბოლოს, დააკავშირეთ ბუმბულის RST (გადატვირთვის) ბუმბული ბუმბულზე 16 (ფორთოხლის მავთული ფოტოში). ეს კონფიგურაცია ბუმბულის ჰუზას საშუალებას აძლევს შევიდეს ღრმა ძილის რეჟიმში ენერგიის დაზოგვის მიზნით.

ახლა თქვენ დაასრულეთ! ატვირთეთ კოდი თქვენს ბუმბულის ჰუზაში და იმედია, თქვენ შეგიძლიათ ნახოთ თქვენი ვებგვერდის განახლება (მხოლოდ day.html გვერდი). თუ არა, სცადეთ სერიული მონიტორის გამოყენება პრობლემის მოსაგვარებლად ან იკითხეთ ქვემოთ მოცემულ კომენტარებში.

ნაბიჯი 7: მუდმივი პროექტი (არასავალდებულო)

ვივარაუდოთ, რომ ყველაფერი მუშაობს, თუ გსურთ, შეგიძლიათ გახადოთ ეს პროექტი უფრო მუდმივი. მე არ ვაჩვენებ ამას აქ, მაგრამ თქვენ შეგიძლიათ შეაერთოთ ყველა კომპონენტი პერფ დაფაზე და შემდეგ ჩასვათ ისინი კონტეინერში. მე მივამაგრებ IPT ფაილებს 3D კონტეინერისთვის, რომელიც მე გამოვიყენე ქვემოთ და რამდენიმე ფოტოს დასაწყებად. კონტეინერი განკუთვნილია შთაგონების მიზნით, რადგან თქვენ ალბათ გსურთ გახადოთ ის უფრო პერსონალური განსხვავებული დიზაინით და ტექსტით. გაერთეთ პერსონალიზაციით! Წარმატებები!