إنشاء خادم ويب بسيط باستخدام الوحدة التطويرية ESP32 مع اردوينو IDE اكتب تعليقُا

ESP32, مشاريع اردوينو
 تم نشر هذا المشروع لجميع الأشخاص المهتمين في مجال تصنيع وابتكار المشاريع الإلكترونية والبرمجية، و نود التنويه أن موقع انا الكتروني يخلي مسؤوليته التامة في حال لم يعمل المشروع لدى العميل أو في حال الاستخدام الخاطئ للمكونات الإلكترونية والكهربائية التي قد تؤدي لحدوث الحرائق أو غيرها لا سمح الله.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

يعد ESP32 الذي تم إطلاقه حديثًا من ESP3266 – نجمًا متناميًا بين مشروعات IoT أو مشاريع WiFi . إنها وحدة WiFi عالية التكلفة للغاية – مع القليل من الجهد الإضافي – يمكن برمجتها لإنشاء خادم ويب مستقل . كم ذلك رائع !!!

ما هو خادم الويب وكيف يعمل؟

خادم الويب هو المكان الذي يقوم بتخزين ومعالجة وتسليم صفحات الويب لعملاء الويب . عميل الويب ليس سوى متصفح ويب على أجهزة الكمبيوتر المحمولة والهواتف الذكية الخاصة بنا . يتم الاتصال بين العميل والخادم باستخدام بروتوكول خاص يسمى بروتوكول نقل النص التشعبي (HTTP) .

في هذا البروتوكول ، يبدأ العميل الاتصال عن طريق تقديم طلب لصفحة ويب محددة باستخدام HTTP ويستجيب الخادم بمحتوى صفحة الويب هذه أو رسالة خطأ إذا كان غير قادر على القيام بذلك (مثل خطأ 404 الشهير) . معظم الصفحات التي يقدمها الخادم هي مستندات HTML .

أوضاع التشغيل في ESP32 :

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

1 - وضع المحطة (STA) :

يُطلق على ESP32 الذي يتصل بشبكة WiFi حالية (شبكة تم إنشاؤها بواسطة جهاز التوجيه اللاسلكي) Station (STA)

ESP32-Web-Server-Station-STA-Mode-Demonstration

في وضع STA ، يحصل ESP32 على IP من جهاز التوجيه اللاسلكي المتصل به . باستخدام عنوان IP هذا ، يمكنه إعداد خادم ويب وتقديم صفحات الويب إلى جميع الأجهزة المتصلة ضمن شبكة WiFi الحالية .

2 - وضع نقطة الوصول البرمجية (AP)

يُطلق على ESP32 الذي ينشئ شبكة WiFi الخاصة به ويعمل كمحور (تمامًا مثل موجه WiFi) لمحطة أو أكثر ، Access Point (AP) . على عكس جهاز التوجيه WiFi ، فإنه لا يحتوي على واجهة لشبكة سلكية . لذلك ، يطلق على وضع التشغيل هذا Soft Access Point (soft-AP) . أيضا الحد الأقصى لعدد المحطات التي يمكن الاتصال به يقتصر على خمس .

ESP32-Web-Server-Soft-Access-Point-AP-Mode-Demonstration

في وضع AP ، تنشئ ESP32 شبكة WiFi جديدة وتعيين SSID (اسم الشبكة) وعنوان IP لها . باستخدام عنوان IP هذا ، يمكنه توصيل صفحات الويب إلى جميع الأجهزة المتصلة تحت شبكته الخاصة .

الأسلاك - توصيل المصابيح إلى ESP32 :

الآن وبعد أن عرفنا أساسيات كيفية عمل خادم الويب ، وفي أي أوضاع يمكن لـ ESP32 إنشاء خادم ويب ، فقد حان الوقت لتوصيل بعض مصابيح LED إلى ESP32 التي نريد التحكم في WiFi .

ابدأ بوضع ESP32 على اللوح الخاص بك ، والتأكد من أن كل جانب من جوانب اللوحة على جانب منفصل من اللوح . بعد ذلك ، قم بتوصيل اثنين من المصابيح إلى GPIO 4 و 5 الرقمي من خلال المقاوم الحد 220Ω الحالية .
عندما تنتهي ، يجب أن يكون لديك شيء يشبه الرسم التوضيحي الموضح أدناه .

Simple-ESP32-Web-Server-Wiring-Fritzing-Connections-with-LED

ما وراء مفهوم السيطرة على الأشياء من خادم الويب ESP32 :

لذا ، ربما كنت تفكر ، “كيف سأتحكم في الأشياء من خادم الويب الذي يقوم فقط بمعالجة صفحات الويب وتقديمها؟” حسنًا ، فأنت بحاجة إلى فهم ما يجري وراء المشهد .
عندما تكتب عنوان URL في مستعرض ويب وتضغط على ENTER ، يرسل المستعرض طلب HTTP إلى خادم ويب . إنها مهمة خادم الويب للتعامل مع هذا الطلب من خلال القيام بشيء ما . ربما تكون قد اكتشفت أنه الآن سنتحكم في الأشياء عن طريق الوصول إلى عنوان URL محدد .

على سبيل المثال ، افترض أننا أدخلنا عنوان URL مثل https://192.168.1.1/ledon في المستعرض . ثم يرسل المستعرض طلب HTTP إلى ESP32 لمعالجة هذا الطلب . عندما يقرأ ESP32 هذا الطلب ، فإنه يعرف أن المستخدم يريد تشغيل LED . لذلك ، فإنه يشغل مؤشر LED ، ويرسل صفحة ويب ديناميكية إلى متصفح يعرض حالة الصمام : ON . سهل مثل الفطيرة !

ESP32 as HTTP Server using WiFi Access Point (AP) mode

الآن دعنا ننتقل إلى الأشياء المثيرة للاهتمام !

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

تنبيه : في حال لم تكن متأكد من قدرتك على تنفيذ خطوات المشروع يرجى استشارة شخص متخصص في هذا المجال.
لتحميل الكود البرمجي اضغط هنا
#include <WiFi.h>
#include <WebServer.h>

/* Put your SSID & Password */
const char* ssid = "ESP32";  // Enter SSID here
const char* password = "12345678";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);
  
  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);
  
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #3498db;}\n";
  ptr +=".button-on:active {background-color: #2980b9;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
  ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

الوصول إلى خادم الويب في وضع AP :

بعد تحميل الكود ، افتح Serial Monitor بمعدل سرعة البث بالباود 115200 . واضغط على الزر RESET في ESP32 . إذا كان كل شيء على ما يرام ، فسيُظهر رسالة بدء خادم HTTP .

ESP32-Web-Server-Access-Point-Mode-Serial-Monitor-Output-Server-Started

بعد ذلك ، ابحث عن أي جهاز يمكنك توصيله بشبكة WiFi – هاتف ، كمبيوتر محمول ، إلخ. وابحث عن شبكة تسمى ESP32 . انضم إلى الشبكة باستخدام كلمة المرور 123456789 .

ESP32-Web-Server-Access-Point-Mode-Joining-Server

بعد الاتصال بشبكة ESP32 AP الخاصة بك ، قم بتحميل المستعرض وقم بتوجيهه إلى 192.168.1.1 يجب أن يخدم ESP32 صفحة ويب تعرض الحالة الحالية لمصابيح LED وزرين للتحكم فيها . إذا ألقيت نظرة على الشاشة التسلسلية في نفس الوقت ، يمكنك رؤية حالة دبابيس GPIO في ESP32 .

Un22titled

الآن ، انقر فوق الزر لتشغيل LED1 ON مع مراقبة عنوان URL . بمجرد النقر فوق الزر ، يتلقى ESP32 طلبًا لعنوان URL أو  led1on . يقوم بعد ذلك بتشغيل LED1 ON ويقدم صفحة ويب مع تحديث حالة LED . كما أنه يطبع حالة دبوس GPIO على الشاشة التسلسلية .

Uitled

يمكنك اختبار زر LED2 والتحقق من أنه يعمل بطريقة مماثلة .

ESP32 as HTTP Server using WiFi Station (STA) mode

الآن ، دعنا ننتقل إلى المثال التالي الذي يوضح كيفية تحويل ESP32 إلى وضع Station (STA) ، وتقديم صفحات الويب لأي عميل متصل ضمن الشبكة الحالية .

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

Change-SSID-Password-before-trying-ESP32-STA-mode-web-server-sketch

بمجرد الانتهاء من ذلك ، استمر في تجربة الكود التالي .

لتحميل الكود البرمجي اضغط هنا
#include <WiFi.h>
#include <WebServer.h>

/*Put your SSID & Password*/
const char* ssid = " YourNetworkName";  // Enter SSID here
const char* password = " YourPassword";  //Enter Password here

WebServer server(80);

uint8_t LED1pin = 4;
bool LED1status = LOW;

uint8_t LED2pin = 5;
bool LED2status = LOW;

void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1pin, OUTPUT);
  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
  if(LED1status)
  {digitalWrite(LED1pin, HIGH);}
  else
  {digitalWrite(LED1pin, LOW);}
  
  if(LED2status)
  {digitalWrite(LED2pin, HIGH);}
  else
  {digitalWrite(LED2pin, LOW);}
}

void handle_OnConnect() {
  LED1status = LOW;
  LED2status = LOW;
  Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 
}

void handle_led1on() {
  LED1status = HIGH;
  Serial.println("GPIO4 Status: ON");
  server.send(200, "text/html", SendHTML(true,LED2status)); 
}

void handle_led1off() {
  LED1status = LOW;
  Serial.println("GPIO4 Status: OFF");
  server.send(200, "text/html", SendHTML(false,LED2status)); 
}

void handle_led2on() {
  LED2status = HIGH;
  Serial.println("GPIO5 Status: ON");
  server.send(200, "text/html", SendHTML(LED1status,true)); 
}

void handle_led2off() {
  LED2status = LOW;
  Serial.println("GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1status,false)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(uint8_t led1stat,uint8_t led2stat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>LED Control</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr +=".button-on {background-color: #3498db;}\n";
  ptr +=".button-on:active {background-color: #2980b9;}\n";
  ptr +=".button-off {background-color: #34495e;}\n";
  ptr +=".button-off:active {background-color: #2c3e50;}\n";
  ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<h1>ESP32 Web Server</h1>\n";
    ptr +="<h3>Using Station(STA) Mode</h3>\n";
  
   if(led1stat)
  {ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
  else
  {ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

  if(led2stat)
  {ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
  else
  {ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

الوصول إلى خادم الويب في وضع STA :

بعد تحميل الكود البرمجي ، افتح Serial Monitor بمعدل سرعة البث بالباود 115200 . واضغط على الزر ESP32 في ESP32 . إذا كان كل شيء على ما يرام ، فسيؤدي ذلك إلى إخراج عنوان IP الحيوي الذي تم الحصول عليه من جهاز التوجيه الخاص بك وإظهار رسالة بدء خادم HTTP .

ESP32-Web-Server-Station-Mode-Serial-Monitor-Output-Server-Started

بعد ذلك ، قم بتحميل المستعرض وقم بتوجيهه إلى عنوان IP الموضح على الشاشة التسلسلية . يجب أن يقدم ESP32 صفحة ويب تعرض الحالة الحالية لمصابيح LED وزرين للتحكم فيها . إذا ألقيت نظرة على الشاشة التسلسلية في نفس الوقت ، يمكنك رؤية حالة دبابيس GPIO في ESP32 .

U1ntitled

الآن ، انقر فوق الزر لتشغيل LED1 ON مع مراقبة عنوان URL . بمجرد النقر فوق الزر ، يتلقى ESP32 طلبًا لعنوان URL أو  led1on . يقوم بعد ذلك بتشغيل LED1 ON ويقدم صفحة ويب مع تحديث حالة LED . كما أنه يطبع حالة دبوس GPIO على الشاشة التسلسلية .

Untitl5ed

يمكنك اختبار زر LED2 والتحقق من أنه يعمل بطريقة مماثلة .

 

أنتهت !!!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هل لديك اي استفسارات؟ اتصل بنا الآن 00966135837552

معلومات التواصل
info@ielectrony.com
مدينة الأحساء - المنطقة الشرقية
المملكة العربية السعودية
© انا الكتروني - جميع الحقوق محفوظة
هل لديك اي استفسارات؟ اتصل بنا الآن 00966135837552