ESP8266 สถานีตรวจอากาศที่แสดงข้อมูลบนเว็บไซต์: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

หมายเหตุ: บางส่วนของบทช่วยสอนนี้อาจมีอยู่ในรูปแบบวิดีโอในช่อง YouTube ของฉัน - Tech Tribe

ในคำแนะนำนี้ ฉันจะแสดงวิธีสร้างสถานีตรวจอากาศที่ส่งข้อมูลไปยังเว็บไซต์ของคุณโดยตรง ดังนั้น คุณจะต้องมีโดเมนของคุณเอง (เช่น: msolonko.net) ในการเริ่มต้น นี่คือวัสดุที่คุณต้องการ:

รายการ:

ขนนก Huzzah($16.95)

สายไมโคร USB พร้อมข้อมูล ($ 1.99)

ชุดแบตเตอรี่($25): ฉันจะพูดถึงความจุที่คุณต้องการในภายหลังโดยไม่ต้องชาร์จ ดังนั้นคุณสามารถเลือกความจุที่ต้องการได้ นี่คือลิงค์ไปยังอันที่ฉันใช้ คุณยังสามารถจ่ายไฟจากเต้ารับได้อีกด้วย

1 โฟโตรีซีสเตอร์

ตัวต้านทานอื่น ๆ - พูดคุยในภายหลัง

ลวด

Perf Board($5.59) - แพ็ค 20

BME280 เซ็นเซอร์อุณหภูมิ ความดัน และความชื้น ($9.99)

กล่องบางประเภท; คุณสามารถพิมพ์ 3D ได้และฉันจะแสดงการออกแบบของฉันให้คุณดู

เว็บโฮสติ้งและโดเมน หากคุณต้องการทำตามบทช่วยสอนอย่างสมบูรณ์

เครื่องมือ:

เครื่องตัดลวด

หัวแร้ง

ขั้นตอนที่ 1: รหัส Feather Huzzah

รหัสจะถูกเขียนใน Arduino IDE ซึ่งสามารถดาวน์โหลดได้ ที่นี่ ก่อนที่เราจะเริ่ม โปรดปฏิบัติตามคำแนะนำที่นี่เพื่อตั้งค่า Arduino IDE ให้ทำงานกับ Feather Huzzah ของคุณ นอกจากนี้ ให้ปฏิบัติตามคำแนะนำเหล่านี้เพื่อดาวน์โหลดไลบรารีที่จำเป็นเพื่อให้เซ็นเซอร์ BME ทำงานได้ ไฟล์โค้ดถูกแนบมาด้วย และโค้ดทั้งหมดได้รับการแสดงความคิดเห็นเพื่อให้คุณเข้าใจได้ เมื่อคุณดูแล้ว ให้ไปยังขั้นตอนถัดไปซึ่งเราจะดูโค้ดที่ได้รับข้อมูลเซ็นเซอร์

ขั้นตอนที่ 2: รับข้อมูลจาก Feather Huzzah

ถึงตอนนี้คุณหวังว่าจะเข้าใจวิธีการทำงานของโค้ด Arduino ถ้าไม่ ให้กลับไปที่โค้ดแล้วอ่านความคิดเห็นของฉัน (ฉันแสดงความคิดเห็นเกือบทุกบรรทัด) ตอนนี้เราจะเขียนรหัสที่ได้รับข้อมูล เหมือนเมื่อก่อน คอมเมนต์ไว้หมดแล้ว ภาษาการเขียนโปรแกรมที่ใช้สำหรับสิ่งนี้คือ PHP ซึ่งคุณสามารถอ่านเพิ่มเติมได้ที่นี่

ข้อมูลของเราจะถูกเก็บไว้ในฐานข้อมูล MySQL ซึ่งคุณสามารถอ่านเพิ่มเติมได้ที่นี่ ข้อมูลถูกเก็บไว้ในตารางที่มีแถวและคอลัมน์ ก่อนที่เราจะเขียนโค้ด เราควรสร้างโครงสร้างของตารางของเราบนโฮสติ้ง cPanel ของเรา ฉันกำลังใช้ Arvixe Hosting ดังนั้น 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 ไปที่ลิงก์นี้เพื่อไปยัง Quick Start และเปิดทิ้งไว้ในตอนนี้ เมื่อเราเริ่มเขียนโค้ดไคลเอ็นต์แล้ว คุณจะสามารถแทนที่ลิงก์เก่าของฉันด้วยเวอร์ชันที่ใหม่กว่าได้

ตอนนี้ เราควรตั้งค่ามุมมองต่างๆ สำหรับแอปพลิเคชันของเรา ในไดเร็กทอรีบนโฮสต์ของคุณที่คุณมีไฟล์สองไฟล์ก่อนหน้า (esp.php และ getWeatherData.php) ให้สร้างโฟลเดอร์ใหม่ชื่อ weather_views ในที่นี้ เราจะใส่หน้าทั้งหมดของเราซึ่งแต่ละหน้าจะสอดคล้องกับรหัสจากฐานข้อมูลของเรา (1, 2 หรือ 3)

ในโฟลเดอร์ ให้สร้างไฟล์ 3 ไฟล์ (day.html, old.html และ weekly.html) ดาวน์โหลดรหัสที่แนบมาและใส่ลงในไฟล์เหล่านั้น โค้ดสำหรับ DAY. HTML มีการแสดงความคิดเห็นเพื่อให้คุณเข้าใจสิ่งที่เกิดขึ้น โดยพื้นฐานแล้วรหัสสำหรับอีก 2 หน้านั้นเหมือนกัน (แสดงความคิดเห็นในส่วนต่าง ๆ ใน old.html)

เมื่อคุณทำขั้นตอนนี้เสร็จแล้ว ให้ไปยังขั้นตอนถัดไป ซึ่งเป็นขั้นตอนการเขียนโปรแกรมที่ยากที่สุด

ขั้นตอนที่ 5: ไฟล์ HTML หลัก

ในขั้นตอนนี้ คุณจะสร้าง/แก้ไข/อ่านไฟล์ HTML หลักที่คุณจะแสดงทุกอย่าง บันทึกไฟล์ที่แนบมา (ซึ่งมีการแสดงความคิดเห็นเช่นเคย) เป็น espdata.html ในไดเร็กทอรีเดียวกันกับ esp.php ฉันหวังว่าคุณจะสามารถทำการเปลี่ยนแปลงบางอย่างและเข้าใจสิ่งที่เกิดขึ้นจริง

นี่เป็นโค้ดจำนวนมากของคุณ ดังนั้นการเข้าใจสิ่งที่เกิดขึ้นจึงเป็นสิ่งสำคัญอย่างยิ่ง

ขั้นตอนที่ 6: การทดสอบการเดินสายไฟบนเขียงหั่นขนม

ตอนนี้เราจะทดสอบว่าโค้ดทั้งหมดใช้งานได้กับฮาร์ดแวร์ของเราหรือไม่ หากคุณยังไม่ได้ทำ ให้บัดกรีหมุดที่ส่วนหัวของ Feather Huzzah และเซ็นเซอร์ BME280 ในแต่ละขั้นตอนจะมีการแนบรูปถ่าย

1. วางขนนกบนเขียงหั่นขนม เชื่อมต่อ 3V กับราง + และ GND กับ - ราง

2. เชื่อมต่อเซ็นเซอร์ VIN กับ + รางและ GND กับ - ราง

3. เชื่อมต่อเซ็นเซอร์ SDA กับพิน 4 บนขนนก เชื่อมต่อ SCL กับพิน 5

4. วาง photoresistor ไว้บนเขียงหั่นขนมโดยให้ตะกั่วหนึ่งเส้นไปที่ราง +

5. เชื่อมต่อตัวต้านทาน 4.7k กับตะกั่วที่ไม่ต่อกันของโฟโตรีซีสเตอร์ เชื่อมต่อตะกั่วที่ไม่ได้เชื่อมต่อของ 4.7k กับตัวต้านทาน 2k เชื่อมต่อปลายตัวต้านทาน 2k ที่ไม่ได้เชื่อมต่อเข้ากับ - ราง (GND)

6. เชื่อมต่อข้อต่อของตัวต้านทาน 4.7k และ 2k เพื่อพิน ADC (พินอะนาล็อก) เราเพิ่งสร้างตัวแบ่งแรงดันไฟฟ้าที่แบ่งแรงดันไฟฟ้าสูงสุดที่อ่านได้จากพินจาก 3.3V เป็นน้อยกว่า 1V คุณสามารถเล่นกับชุดค่าผสมของคุณเองได้หากต้องการ แต่โปรดจำไว้ว่าแรงดันไฟฟ้าที่จ่ายให้กับพินอะนาล็อกต้องน้อยกว่า 1V

7. สุดท้าย เชื่อมต่อพิน RST (รีเซ็ต) บนขนนกเข้ากับพิน 16 บนขนนก (ลวดสีส้มในภาพ) การกำหนดค่านี้ช่วยให้ Feather Huzzah เข้าสู่โหมดสลีปลึกเพื่อประหยัดพลังงาน

ตอนนี้คุณทำเสร็จแล้ว! อัปโหลดโค้ดไปที่ Feather huzzah และหวังว่าคุณจะเห็นการอัปเดตหน้าเว็บของคุณ (เฉพาะหน้า day.html) หากไม่เป็นเช่นนั้น ให้ลองใช้จอภาพแบบอนุกรมเพื่อแก้ไขปัญหาหรือสอบถามในความคิดเห็นด้านล่าง

ขั้นตอนที่ 7: โครงการถาวร (ไม่บังคับ)

สมมติว่าทุกอย่างใช้งานได้ หากต้องการ คุณสามารถทำให้โครงการนี้ถาวรขึ้นได้ ฉันจะไม่แสดงสิ่งนี้ที่นี่ แต่คุณสามารถประสานส่วนประกอบทั้งหมดเข้ากับบอร์ดที่สมบูรณ์แบบแล้วใส่ไว้ในคอนเทนเนอร์ ฉันจะแนบไฟล์ IPT สำหรับคอนเทนเนอร์ 3 มิติที่ฉันใช้ด้านล่างและรูปถ่ายบางส่วนเพื่อให้คุณเริ่มต้น คอนเทนเนอร์มีไว้เพื่อเป็นแรงบันดาลใจเพราะคุณอาจต้องการทำให้เป็นส่วนตัวมากขึ้นด้วยการออกแบบและข้อความที่แตกต่างกัน ขอให้สนุกกับการปรับแต่ง! ขอให้โชคดี!