محطة الطقس ESP8266 التي تعرض البيانات على موقع ويب: 7 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:39

ملاحظة: قد تتوفر أجزاء من هذا البرنامج التعليمي بتنسيق فيديو على قناتي على YouTube - Tech Tribe

في هذا الدليل ، سأوضح كيفية إنشاء محطة طقس ترسل البيانات مباشرة إلى موقع الويب الخاص بك. لذلك ، سوف تحتاج إلى المجال الخاص بك (على سبيل المثال: msolonko.net). للبدء ، إليك المواد التي ستحتاجها:

العناصر:

حوزة الريش (16.95 دولارًا)

كابل Micro USB مع البيانات (1.99 دولار)

حزمة البطارية (25 دولارًا): سأناقش لاحقًا السعة التي تحتاجها لمقدار الوقت دون إعادة الشحن ، حتى تتمكن من اختيار السعة التي تريدها. هذا رابط للواحد الذي استخدمته. يمكنك أيضًا تشغيله من منفذ.

1 مقاوم ضوئي

بعض المقاومات الأخرى - نوقشت لاحقًا

الأسلاك

بيرف بورد (5.59 دولار) - عبوة من 20

مستشعر درجة الحرارة والضغط والرطوبة BME280 (9.99 دولارًا)

نوع من الصندوق يمكنك طباعة واحدة ثلاثية الأبعاد ، وسأعرض لك تصميمي.

استضافة المواقع والمجال ، إذا كنت ترغب في متابعة البرنامج التعليمي بالكامل

أدوات:

قاطع الاسلاك

لحام حديد

الخطوة 1: كود الريش الحوزة

سيتم كتابة الكود في Arduino IDE ، والذي يمكن تنزيله هنا. قبل أن نبدأ ، يرجى اتباع التعليمات الواردة هنا لإعداد Arduino IDE للعمل مع Feather Huzzah. أيضًا ، اتبع هذه التعليمات لتنزيل المكتبات الضرورية لتشغيل مستشعر BME. تم إرفاق ملف الشفرة ، ويتم التعليق على جميع الكود حتى تتمكن من فهمه. بمجرد النظر إليه ، انتقل إلى الخطوة التالية حيث سنلقي نظرة على الكود الذي يستقبل بيانات المستشعر.

الخطوة الثانية: استلام البيانات من Feather Huzzah

الآن ، نأمل أن تفهم كيف يعمل كود Arduino. إذا لم يكن كذلك ، فارجع إلى الكود واقرأ تعليقاتي (لقد علقت كل سطر تقريبًا). الآن سنكتب الكود الذي يستقبل البيانات. كما كان من قبل ، تم التعليق عليه بالكامل. لغة البرمجة المستخدمة لهذا هي PHP ، والتي يمكنك قراءة المزيد عنها هنا.

سيتم تخزين بياناتنا في قاعدة بيانات MySQL ، والتي يمكنك قراءة المزيد عنها هنا. يتم تخزين البيانات في جداول تحتوي على صفوف وأعمدة. قبل أن نكتب الكود ، يجب أن نجعل هيكل طاولتنا في cPanel للاستضافة. أنا أستخدم Arvixe Hosting ، لذلك قد تبدو cPanel مختلفة. الرجوع إلى إحدى الصور لمعرفة شكل جزء مني. أولاً ، تريد إنشاء قاعدة بيانات MySQL جديدة إذا لم يكن لديك واحدة بالفعل. يمكنك استخدام المعالج لذلك. هناك الكثير من الموارد عبر الإنترنت حول هذا الأمر إذا كنت بحاجة إلى مساعدة.

بمجرد الانتهاء من إعداد قاعدة بيانات ، انتقل إلى phpMyAdmin وحدد قاعدة البيانات الخاصة بك. قم بإنشاء جدول باسم weather_data من 9 أعمدة. استشر إحدى صوري أعلاه لمعرفة ما يجب أن يكون عليه كل عمود (انسخ الاسم ونوع البيانات وكل شيء آخر بالضبط إذا كنت تريد استخدام الكود الخاص بي). سيكون العداد هو مفتاحنا الأساسي وسيساعدنا المعرف في تحديد اليوم الذي تتعلق به البيانات (1: اليوم ، 2: أمس ، 3: كل شيء آخر). نظرًا لأنه سيكون لدينا الكثير من البيانات ، فسنقوم بمحو بعضها مع تقدمه في السن. هذا هو السبب في أننا نحتاج إلى عمود الهوية. بقية الأعمدة تشرح نفسها بنفسها. في الوقت الحالي ، يجب أن يبدو الجدول الموجود في قاعدة البيانات الخاصة بك تمامًا مثل الجدول الخاص بي.

الآن قم بتنزيل الكود المرفق واقرأه وتعليقاتي. عند الانتهاء ، انتقل إلى الخطوة التالية.

ملاحظة: عند تنزيل الكود ، قم بإعادة تسميته إلى esp.php. لسبب ما ، حصلت على خطأ عندما حاولت تحميل ملف PHP.

هذه هي الطريقة التي سيعمل بها الكود.

1. اجمع البيانات كل 10 دقائق واعرضها

2. بمجرد مرور اليوم ، متوسط كل 6 قيم (لتوفير مساحة قاعدة البيانات) بحيث تكون هناك نقطة بيانات لكل ساعة

3. بمجرد مرور يوم آخر ، قم بمتوسط جميع البيانات المتبقية لذلك اليوم وقم بتخزينها كنقطة بيانات واحدة فقط

بهذه الطريقة ، سنكون قادرين على رؤية التقلبات في الضوء ودرجة الحرارة وما إلى ذلك خلال الفترة الزمنية للأشهر دون أن نبدأ في تشتيت انتباهنا بسبب التقلبات اليومية في درجة الحرارة والضوء وما إلى ذلك.

الخطوة 3: استرداد البيانات من قاعدة البيانات لعرضها

حتى الآن توصلنا إلى كيفية جمع بيانات الطقس وتحميلها إلى قاعدة البيانات الخاصة بنا. الآن علينا أن نكون قادرين على استرجاعها في شكل قابل للاستخدام. كما في السابق ، أرفقت ملف getWeatherData.txt PHP والذي يجب عليك حفظه في مضيفك وتغيير امتداد اسم الملف إلى.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. هنا ، سنضع جميع صفحاتنا التي ستتوافق كل منها مع معرف من قاعدة البيانات الخاصة بنا (1 أو 2 أو 3).

في المجلد ، أنشئ 3 ملفات (day.html ، و old.html ، و Saturday.html). قم بتنزيل الكود المرفق ووضعه في تلك الملفات. تم التعليق على كود DAY. HTML حتى تتمكن من فهم ما يحدث. إن الكود الخاص بالصفحتين الأخريين هو نفسه في الأساس (تم التعليق على جزء مختلف في old.html).

بمجرد الانتهاء من هذه الخطوة ، انتقل إلى الخطوة التالية ، وهي أصعب خطوة برمجة.

الخطوة 5: ملف HTML الرئيسي

في هذه الخطوة ، ستقوم بإنشاء / تحرير / قراءة ملف HTML الرئيسي حيث ستعرض كل شيء. احفظ الملف المرفق (الذي ، كما هو الحال دائمًا ، معلقًا) باسم espdata.html في نفس الدليل مثل esp.php. آمل أن تتمكن من إجراء بعض التغييرات عليه وفهم ما يجري بالفعل.

هذا هو الجزء الأكبر من التعليمات البرمجية الخاصة بك ، لذلك من المهم بالتأكيد فهم ما يجري.

الخطوة 6: اختبار الأسلاك على اللوح

سنختبر الآن أن كل الكود يعمل مع أجهزتنا. إذا لم تكن قد قمت بذلك بالفعل ، فقم بتثبيت دبابيس رأس اللحام على Feather Huzzah ومستشعر BME280. لكل خطوة ، يتم إرفاق صورة.

1. ضع الريش على اللوح. قم بتوصيل 3 فولت بالسكة الحديدية + و GND بالسكة الحديدية.

2. قم بتوصيل جهاز الاستشعار VIN بالسكك الحديدية + و GND بالسكك الحديدية.

3. قم بتوصيل جهاز الاستشعار SDA بالدبوس 4 على الريش. قم بتوصيل SCL بالدبوس 5.

4. ضع المقاوم الضوئي على اللوح بحيث يذهب أحد السلك إلى السكة +.

5. قم بتوصيل المقاوم 4.7 كيلو بالسلك غير المتصل للمقاوم الضوئي. قم بتوصيل السلك غير المتصل للمقاوم 4.7 كيلو بمقاوم 2 كيلو. قم بتوصيل الطرف غير المتصل للمقاوم 2k بالسكك الحديدية (GND).

6. قم بتوصيل مفصل المقاوم 4.7k و 2k بدبوس ADC (الدبوس التناظري). لقد صنعنا للتو مقسمًا للجهد يقسم الجهد الأقصى الذي يقرأه الدبوس من 3.3 فولت إلى أقل من 1 فولت. يمكنك اللعب مع مجموعتك الخاصة إذا كنت تريد ذلك ولكن ضع في اعتبارك أن الجهد المعطى للمسمار التناظري يجب أن يكون أقل من 1 فولت.

7. أخيرًا ، قم بتوصيل دبوس RST (إعادة الضبط) على الريشة إلى دبوس 16 على الريشة (السلك البرتقالي في الصورة). يسمح هذا التكوين لـ Feather Huzzah بالدخول إلى وضع السكون العميق لتوفير الطاقة.

لقد انتهيت الآن! قم بتحميل الكود إلى هزة الريش الخاصة بك ، ونأمل أن تتمكن من رؤية تحديث صفحة الويب الخاصة بك (فقط صفحة day.html). إذا لم يكن كذلك ، فحاول استخدام جهاز العرض التسلسلي لاستكشاف الأخطاء وإصلاحها أو اسأل في التعليقات أدناه.

الخطوة 7: المشروع الدائم (اختياري)

بافتراض أن كل شيء يعمل ، إذا كنت ترغب في ذلك ، يمكنك جعل هذا المشروع أكثر ديمومة. لن أعرض هذا هنا ، ولكن يمكنك لحام جميع المكونات بلوحة الأداء ثم إرفاقها في حاوية. سأقوم بإرفاق ملفات IPT للحاوية ثلاثية الأبعاد التي استخدمتها أدناه وبعض الصور للبدء. الحاوية مصممة للإلهام لأنك ربما ترغب في جعلها أكثر تخصيصًا بتصميم ونص مختلفين. استمتع بالتخصيص! حظا طيبا وفقك الله!