قم بتحميل صفحة الويب الخاصة بتكوين Arduino / ESP من السحابة: 7 خطوات

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

عند إنشاء مشروع Arduino / ESP (ESP8266 / ESP32) ، يمكنك فقط ترميز كل شيء. ولكن في كثير من الأحيان يظهر شيء ما وينتهي بك الأمر إلى إعادة توصيل جهاز إنترنت الأشياء الخاص بك بـ IDE الخاص بك مرة أخرى. أو حصلت للتو على المزيد من الأشخاص الذين يصلون إلى التكوين وتريد توفير واجهة مستخدم بدلاً من توقع فهمهم للأعمال الداخلية.

سيخبرك هذا الدليل بكيفية وضع معظم واجهة المستخدم في السحابة بدلاً من Arduino / ESP. القيام بذلك بهذه الطريقة سيوفر لك استخدام المساحة والذاكرة. الخدمة التي توفر صفحات ويب ثابتة مجانية مناسبة بشكل خاص كـ "سحابة" ، مثل صفحات GitHub ، ولكن من المحتمل أن تعمل الخيارات الأخرى أيضًا.

يتطلب إنشاء صفحة الويب بهذه الطريقة أن يمر متصفح المستخدم بأربع خطوات:

1. اطلب عنوان URL الجذر من Arduino / ESP
2. تلقي صفحة ويب بسيطة للغاية تخبر:
3. اطلب ملف JavaScript من السحابة
4. احصل على الكود الذي يبني الصفحة الفعلية

سيشرح Instructable أيضًا كيفية التفاعل مع Arduino / ESP بمجرد أن تصبح الصفحة جاهزة وفقًا للخطوات المذكورة أعلاه.

يمكن العثور على الكود الذي تم إنشاؤه في هذا الدليل على GitHub أيضًا.

المتطلبات الأساسية

يفترض هذا التوجيه أنك حصلت على إمكانية الوصول إلى مواد معينة وبعض المعرفة السابقة:

• Arduino (مع إمكانية الوصول إلى الشبكة) / ESP
• جهاز كمبيوتر لإرفاق ما ورد أعلاه به
• اتصال WiFi متصل بالإنترنت
• تم تثبيت Arduino IDE (أيضًا لـ ESP32)
• أنت تعرف كيفية تحميل رسم تخطيطي إلى جهاز إنترنت الأشياء الخاص بك
• أنت تعرف كيفية استخدام Git & GitHub

الخطوة 1: البدء برسم خادم ويب بسيط

سنبدأ بأبسط ما يمكن ، ونتركه ينمو من الآن فصاعدًا.

#يشمل

const char * ssid = "yourssid" ؛ const char * password = "yourpasswd" ؛ خادم WiFiServer (80) ؛ إعداد باطل () {// تهيئة المسلسل وانتظر حتى يتم فتح المنفذ: Serial.begin (115200) ؛ بينما (! المسلسل) {؛ // انتظر حتى يتم توصيل المنفذ التسلسلي. مطلوب لمنفذ USB الأصلي فقط} WiFi.begin (SSID ، كلمة المرور) ؛ while (WiFi.status ()! = WL_CONNECTED) {delay (500) ؛ Serial.print (".") ؛ } Serial.println ("WiFi متصل.") ؛ Serial.println ("عنوان IP:") ؛ Serial.println (WiFi.localIP ()) ؛ server.begin () ، } حلقة باطلة () {// استمع للعملاء القادمين WiFiClient client = server.available () ؛ // الاستماع للعملاء القادمين bool sendResponse = false ؛ // ضعها على صواب إذا أردنا إرسال رد String urlLine = ""؛ // أنشئ سلسلة للاحتفاظ بعنوان URL المطلوب إذا (العميل) // إذا حصلت على عميل ، {Serial.println ("عميل جديد.") ؛ // طباعة رسالة خارج المنفذ التسلسلي String currentLine = ""؛ // إنشاء سلسلة للاحتفاظ بالبيانات الواردة من العميل أثناء (client.connected ()) // حلقة أثناء اتصال العميل {if (client.available ()) // إذا كان هناك بايت للقراءة من العميل ، {char c = client.read () ؛ // اقرأ بايت ، ثم إذا (c == '\ n') // إذا كان البايت حرف سطر جديد {// إذا كان السطر الحالي فارغًا ، فستحصل على حرفين جديدين على التوالي. // هذه هي نهاية طلب HTTP للعميل ، لذا أرسل ردًا: if (currentLine.length () == 0) {sendResponse = true؛ // كل شيء على ما يرام! استراحة؛ // break out of the while loop} else // إذا حصلت على سطر جديد ، فامسح currentLine: {if (currentLine.indexOf ("GET /")> = 0) // يجب أن يكون هذا هو سطر عنوان URL {urlLine = currentLine ؛ // احفظه لاستخدامه لاحقًا} currentLine = ""؛ // reset the currentLine String}} else if (c! = '\ r') // إذا كان لديك أي شيء آخر عدا حرف إرجاع ، {currentLine + = c؛ // إضافته إلى نهاية السطر الحالي}}} إذا (sendResponse) {Serial.print ("طلب العميل") ؛ Serial.println (urlLine) ؛ // تبدأ رؤوس HTTP دائمًا برمز استجابة (مثل HTTP / 1.1 200 OK) // ونوع المحتوى حتى يعرف العميل ما هو قادم ، ثم سطر فارغ: client.println ("HTTP / 1.1 200 OK") ؛ client.println ("نوع المحتوى: نص / html") ؛ client.println () ، if (urlLine.indexOf ("GET /")> = 0) // إذا كان عنوان URL هو فقط "/" {// محتوى استجابة HTTP يتبع العنوان: client.println ("Hello world!") ؛ } // تنتهي استجابة HTTP بسطر فارغ آخر: client.println ()؛ } // أغلق الاتصال: client.stop () ؛ Serial.println ("العميل غير متصل.") ؛ }}

انسخ الكود أعلاه ، أو قم بتنزيله من الالتزام على GitHub.

لا تنس تغيير SSID وكلمة المرور لمطابقة شبكتك.

يستخدم هذا الرسم التخطيطي Arduino المعروف جيدًا

اقامة()

و

حلقة()

المهام. في ال

اقامة()

وظيفة يتم تهيئة الاتصال التسلسلي بـ IDE وكذلك WiFi. بمجرد توصيل WiFi بـ SSID المذكور ، تتم طباعة IP وبدء خادم الويب. في كل تكرار لملف

حلقة()

وظيفة يتم فحص خادم الويب للعملاء المتصلين. إذا تم توصيل عميل ، تتم قراءة الطلب ويتم حفظ عنوان URL المطلوب في متغير. إذا بدا كل شيء على ما يرام ، فسيتم إجراء استجابة من الخادم للعميل بناءً على عنوان URL المطلوب.

تحذير! يستخدم هذا الرمز فئة Arduino String لإبقائها بسيطة. لا تقع تحسينات السلسلة ضمن نطاق هذا التوجيه. اقرأ المزيد حول هذا في التعليمات حول معالجة سلسلة Arduino باستخدام الحد الأدنى من ذاكرة الوصول العشوائي.

الخطوة 2: إنشاء Remote JavaScript

سيخبر Arduino / ESP متصفح الزوار بتحميل هذا الملف. سيتم تنفيذ كل الباقي بواسطة كود JavaScript هذا.

في هذا Instructable ، سنستخدم jQuery ، وهذا ليس ضروريًا تمامًا ، ولكنه سيجعل الأمور أسهل.

يجب أن يكون هذا الملف متاحًا للوصول إليه من الويب ، ويكفي خادم الصفحات الثابتة لإنجاز هذا العمل ، على سبيل المثال صفحات GitHub. لذلك ربما ترغب في إنشاء مستودع GitHub جديد وإنشاء ملف

صفحات gh

فرع. ضع الكود التالي داخل ملف

.js

ملف في المستودع في الفرع الصحيح.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/' ،

$ ؛ (function () {var script = document.createElement ('script')؛ // إنشاء عنصر script.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'؛ // set the src = "" السمة script.onload = function () // دالة رد الاتصال ، تسمى بمجرد تحميل ملف jquery {$ = window.jQuery؛ // اجعل jQuery متاحًا مثل المتغير العام init ()؛ // call the init function}؛ المستند. getElementsByTagName ('head') [0].appendChild (script)؛ // أضف العلامة التي تم إنشاؤها إلى المستند ، سيبدأ هذا في تحميل jQuery lib}) () ؛ الوظيفة init () {// Done loading jQuery ، ستضيف الرمز هنا لاحقًا …}

انسخ الكود أعلاه ، أو قم بتنزيله من الالتزام على GitHub.

تحقق مما إذا كان الملف الخاص بك يمكن الوصول إليه. في حالة صفحات GitHub ، انتقل إلى https://username.github.io/repository/your-file.j… (استبدل

اسم االمستخدم

,

مخزن

و

your-file.js

للمعلمات الصحيحة).

الخطوة الثالثة: تحميل ملف JavaScript عن بعد في متصفح الزوار

الآن بعد أن تم إعداد كل شيء ، حان الوقت لجعل صفحة الويب تقوم بتحميل ملف JavaScript البعيد.

يمكنك القيام بذلك عن طريق تغيير السطر 88 للرسم من

client.println ("Hello world!") ؛ ر

client.println ("") ؛

(غير ال

src

للإشارة إلى ملف JavaScript الخاص بك). هذه صفحة ويب html صغيرة ، كل ما تفعله هو تحميل ملف JavaScript في متصفح الزوار.

يمكن أيضًا العثور على الملف الذي تم تغييره في الالتزام المقابل على GitHub.

قم بتحميل المخطط المعدل إلى Arduino / ESP.

الخطوة 4: إضافة عناصر جديدة إلى الصفحة

الصفحة الفارغة غير مجدية ، لذا حان الوقت الآن لإضافة عنصر جديد إلى صفحة الويب. في الوقت الحالي ، سيكون هذا مقطع فيديو على YouTube ، وفي هذا المثال سيتم استخدام بعض أكواد jQuery لإنجاز ذلك.

أضف السطر التالي من التعليمات البرمجية إلى ملف

فيه()

وظيفة:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg؟rel=0'، frameborder: '0'}). css ({width: '608px'، height: '342px'}). appendTo ('body')؛

سيؤدي هذا إلى إنشاء ملف

iframe

عنصر ، اضبط الصحيح

src

السمة وتعيين الحجم باستخدام css وإضافة العنصر إلى نص الصفحة.

تساعدنا jQuery في تحديد العناصر وتعديلها بسهولة في صفحة الويب ، وبعض الأشياء الأساسية التي يجب معرفتها:

• $ ("جسم")

• يحدد أي عنصر موجود بالفعل ، يمكن استخدام محددات css الأخرى أيضًا

• $(' ')

  يخلق ملف

• عنصر (لكن لا يضيفه إلى المستند)

• .appendTo (". main")

• إلحاق العنصر المحدد / المُنشأ بعنصر به فئة css "main"

• وظيفة أخرى لإضافة العناصر هي

  .ألحق()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .إدراج()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .بعد، بعدما()

  ,

  .قبل()

ألقِ نظرة على الالتزام المقابل على GitHub إذا كان أي شيء غير واضح.

الخطوة 5: العناصر التفاعلية

يعد الفيديو ممتعًا ، لكن الغرض من هذه التعليمات هو التفاعل مع Arduino / ESP ، فلنستبدل الفيديو لزر يرسل معلومات إلى Arduino / ESP وينتظر أيضًا الرد.

سنحتاج ملف

$('')

لإضافتها إلى الصفحة ، وإرفاق مستمع أحداث بها. سوف يستدعي Eventlistener وظيفة رد الاتصال عند حدوث الحدث المحدد:

$ (''). text ('a button'). on ('click'، function ()

{// سيتم تنفيذ الكود هنا عند النقر على الزر}). appendTo ('body')؛

وأضف طلب AJAX إلى وظيفة رد الاتصال:

$.get ('/ ajax'، function (data)

{// سيتم تنفيذ الكود هنا عند الانتهاء من طلب AJAX}) ؛

بمجرد الانتهاء من الطلب ، ستتم إضافة البيانات التي تم إرجاعها إلى الصفحة:

$('

').text (data).appendTo (' body ')؛

باختصار ، يُنشئ الكود أعلاه زرًا ، ويضيفه إلى صفحة الويب ، وعند النقر على الزر ، سيتم إرسال طلب وسيتم أيضًا إضافة الرد إلى صفحة الويب.

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

الخطوة 6: الرد على العنصر التفاعلي

بالطبع ، يتطلب طلب AJAX ردًا.

لإنشاء الرد الصحيح لـ

/ اياكس

سنحتاج إلى عنوان url لإضافة ملف

وإلا إذا ()

مباشرة بعد قوس إغلاق عبارة if التي تتحقق من

/

عنوان url.

else if (urlLine.indexOf ("GET / ajax")> = 0)

{client.print ("مرحبًا!") ؛ }

في الالتزام على GitHub ، أضفت أيضًا عدادًا لإظهار المستعرض أن كل طلب فريد.

الخطوة 7: الخاتمة

هذه هي نهاية هذا التدريب. لديك الآن Arduino / ESP يقدم صفحة ويب صغيرة تخبر متصفح الزائر بتحميل ملف JavaScript من السحابة. بمجرد تحميل JavaScript ، فإنه يبني بقية محتوى صفحة الويب مما يوفر واجهة مستخدم للمستخدم للتواصل مع Arduino / ESP.

الآن الأمر متروك لخيالك لإنشاء المزيد من العناصر على صفحة الويب وحفظ الإعدادات محليًا على نوع من ذاكرة القراءة فقط (EEPROM / NVS / إلخ).

شكرًا على القراءة ، ولا تتردد في تقديم بعض التعليقات!