مؤشر LED يتم التحكم فيه عبر الإنترنت باستخدام خادم الويب المستند إلى ESP32: 10 خطوات

2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-23 12:53

ملخص المشروع

في هذا المثال ، سنكتشف كيفية إنشاء خادم ويب يستند إلى ESP32 للتحكم في حالة LED ، والتي يمكن الوصول إليها من أي مكان في العالم. ستحتاج إلى كمبيوتر Mac لهذا المشروع ، ولكن يمكنك تشغيل هذا البرنامج حتى على جهاز كمبيوتر غير مكلف ومنخفض الطاقة مثل Raspberry Pi.

تحضير ESP32 مع Arduino IDE

لبدء برمجة ESP32 باستخدام Arduino IDE ولغة برمجة Arduino ، ستحتاج إلى وظيفة إضافية خاصة. اقرأ حول كيفية تحضير Arduino IDE لـ ESP32 على نظام التشغيل Mac OS بالرابط التالي.

اللوازم

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

• مجلس التنمية ESP32
• LED المقاوم 220 أوم
• شاشة عرض LCD مقاس 16 × 2 مع وحدة I2C
• اللوح
• أسلاك العبور
• كابل Micro USB

الخطوة 1: بناء الدائرة

قم بإجراء التوصيلات كما هو موضح في الرسم التخطيطي التالي أدناه

ابدأ بتوصيل خرج جهد إمداد 3V3 على لوحة توصيل ESP32 و GNDto. قم بتوصيل LED عبر المقاوم بـ ESP32 باستخدام GPIO pin 23 كدبوس إخراج رقمي. بعد ذلك ، قم بتوصيل دبوس SDA بشاشة 16x2 LCD بـ GPIO pin 21 و SCL بـ GPIO pin 22.

الخطوة 2: نظرة عامة سريعة على نظام ملفات SPIFFS

يرمز SPIFFS إلى "Serial Peripheral Interface Flash File System" ، أي نظام ملفات لذاكرة الفلاش التي تنقل البيانات عبر SPI. وفقًا لذلك ، يعد SPIFFS نظام ملفات مبسطًا مصممًا لوحدات التحكم الدقيقة المزودة بشرائح فلاش تنقل البيانات عبر ناقل SPI (مثل ذاكرة فلاش ESP32).

يعد SPIFFS مفيدًا للغاية للاستخدام مع ESP32 في المواقف التالية:

• إنشاء ملفات لتخزين الإعدادات
• تخزين البيانات الدائم.
• إنشاء ملفات لتخزين كمية صغيرة من البيانات (بدلاً من استخدام بطاقة microSD لهذا الغرض).
• تخزين ملفات HTML و CSS لإنشاء خادم ويب.

الخطوة الثالثة: تثبيت SPIFFS Bootloader على نظام التشغيل Mac OS

يمكنك إنشاء وحفظ وكتابة البيانات إلى الملفات المخزنة في نظام ملفات ESP32 مباشرة باستخدام البرنامج المساعد على Arduino IDE.

بادئ ذي بدء ، تأكد من تثبيت أحدث إصدار من Arduino IDE ، ثم قم بما يلي:

• افتح الرابط التالي وقم بتنزيل الأرشيف "ESP32FS-1.0.zip"
• انتقل إلى دليل Arduino IDE ، الموجود في مجلد المستندات.
• قم بإنشاء مجلد أدوات ، إذا لم يكن موجودًا. داخل دليل الأدوات ، قم بإنشاء مجلد آخر ESP32FS. داخل ESP32FS ، قم بإنشاء واحدة أخرى ، تسمى الأداة.
• قم بفك ضغط أرشيف ZIP الذي تم تنزيله في الخطوة 1 إلى مجلد الأداة.
• أعد تشغيل Arduino IDE.
• للتحقق مما إذا تم تثبيت المكون الإضافي بنجاح ، افتح Arduino IDE وانقر فوق "أدوات" وتحقق مما إذا كان هناك عنصر "ESP32 Sketch Data Upload" في هذه القائمة.

الخطوة 4: تثبيت المكتبات

تتيح لك مكتبات ESPAsyncWebServer و AsyncTCP إنشاء خادم ويب باستخدام ملفات من نظام ملفات ESP32. لمزيد من المعلومات حول هذه المكتبات ، تحقق من الرابط التالي.

قم بتثبيت مكتبة ESPAsyncWebServer

• انقر هنا لتنزيل أرشيف ZIP الخاص بالمكتبة.
• قم بفك ضغط هذا الأرشيف. يجب أن تحصل على المجلد الرئيسي ESPAsyncWebServer.
• قم بإعادة تسميته إلى "ESPAsyncWebServer".

قم بتثبيت مكتبة AsyncTCP

• انقر هنا لتنزيل أرشيف ZIP الخاص بالمكتبة.
• قم بفك ضغط هذا الأرشيف. يجب أن تحصل على المجلد الرئيسي AsyncTCP.
• قم بإعادة تسميته إلى "AsyncTCP".

انقل مجلدي ESPAsyncWebServer و AsyncTCP إلى مجلد المكتبات الموجود داخل دليل المستندات.

أخيرًا ، أعد تشغيل Arduino IDE.

الخطوة 5: قم بإنشاء ملف Index.html و Style.css بالمحتوى التالي

تم أخذ قالب HTML / CSS لزر التبديل من المصدر التالي.

الخطوة 6: كود اردوينو

بشكل أساسي ، استند الكود إلى كود Arduino المأخوذ من ESP32 Web Server باستخدام SPIFFS وكيفية استخدام I2C LCD مع ESP32 على Arduino IDE.

الخطوة 7: قم بتحميل كود Arduino والملفات باستخدام SPIFFS Loader

• افتح مجلد رسم كود Arduino.
• داخل هذا المجلد ، أنشئ مجلدًا جديدًا يسمى "data".
• داخل مجلد البيانات ، تحتاج إلى وضع index.html و style.css.
• قم بتحميل كود اردوينو
• بعد ذلك ، لتحميل الملفات ، انقر فوق Arduino IDE في Tools> ESP32 Sketch Data Upload

الخطوة 8: حدد عنوان IP لخادم الويب ESP32

يمكن العثور عليها بطريقتين.

• جهاز العرض التسلسلي على Arduino IDE (أدوات> جهاز العرض التسلسلي)
• على شاشة LCD

الخطوة 9: اختبار خادم الويب المحلي

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

الخطوة 10: الوصول إلى خادم ويب محلي من أي مكان في العالم باستخدام Ngrok

Ngrok عبارة عن نظام أساسي يسمح لك بتنظيم الوصول عن بُعد إلى خادم ويب أو بعض الخدمات الأخرى التي تعمل على جهاز الكمبيوتر الخاص بك من الإنترنت الخارجي. يتم تنظيم الوصول من خلال النفق الآمن الذي تم إنشاؤه في بداية ngrok.

• اتبع هذا الرابط وقم بالتسجيل.
• بعد إنشاء حساب ، قم بتسجيل الدخول وانتقل إلى علامة التبويب "المصادقة". انسخ السطر من حقل "Your Tunnel Authtoken".
• انقر فوق علامة التبويب "تنزيل" في شريط التنقل ، ثم حدد إصدار ngrok الذي يتوافق مع نظام التشغيل لديك وقم بتنزيله.
• قم بفك ضغط المجلد الذي تم تنزيله وتشغيل سطر الأوامر.
• قم بتوصيل حسابك عن طريق إدخال الأمر التالي

./ngrok authtoken

ابدأ نفق HTTP على المنفذ 80

./ngrok http Your_IP_Address: 80

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