ساخت یک وب سرور با استفاده از ESP32

نویسنده

فهرست مطالب

مقدمه

در این آموزش با راه اندازی یک وب سرور با استفاده از ESP32 آشنا می شوید و یاد می گیرید که با HTML و CSS یک صفحه ی وب بسازید.

آنچه در این آموزش یاد می گیرید

  • آشنایی با وب سرور
  • ساخت یک وب سرور با ESP32
  • آشنایی مختصری با دستورات HTML و CSS

وب سرور چیست؟

وب سرور، محلی برای ارسال و دریافت اطلاعات، پردازش اطلاعات و ذخیره ی آن ها است. وب سرور می تواند این اطلاعات را روی یک صفحه ی وب نیز نمایش دهد.

ارتباط بین کاربر و سرور از طریق پروتکلی به نام Hypertext Transfer Protocol یا همان HTTP انجام می شود.

هرگاه درخواستی به این سرور ارسال می شود (مثلا آدرس آن در مرورگر سرچ می شود)، سرور کدی را به عنوان پاسخ بر می گرداند (مثلا کد 200 که به معنای ارتباط صحیح است و کد 404 که بیانگر این است که آدرس صحیح نمی باشد). لیست کامل این کد ها را می توانید در این لینک ببینید.

لوازمی که به آن احتیاج دارید

Hardware Components

ماژول وای فای و بلوتوث NODE MCU - ESP32S × 1

نرم افزارهای مورد نیاز

Arduino IDE

راه اندازی ESP32 در حالت Station) STA)

در این حالت، ماژول ESP32 به عنوان یک کاربر (Client) به مودم وای فای متصل می شود و می تواند از طریق مودم (روتر) به شبکه ی اینترنت دسترسی داشته باشد.

کد

برای راه اندازی ESP32 در مد STA کافیست کد زیر را روی آن آپلود کنید. اگر برای اولین بار است که با ESP32 کار می کنید، آموزش راه اندازی آن را در اینجا ببینید.

/*
  ESP32 Web Server - STA Mode
  modified on 25 MAy 2019
  by Mohammadreza Akbari @ Electropeak
  https://electropeak.com/learn
*/

#include <WiFi.h>
#include <WebServer.h>

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

WebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)

void setup() {
  Serial.begin(115200);
  Serial.println("Try Connecting to ");
  Serial.println(ssid);

  // Connect to your wi-fi modem
  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 successfully");
  Serial.print("Got IP: ");
  Serial.println(WiFi.localIP());  //Show ESP32 IP on serial

  server.on("/", handle_root);

  server.begin();
  Serial.println("HTTP server started");
  delay(100); 
}

void loop() {
  server.handleClient();
}

// HTML & CSS contents which display on web server
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - Station Mode &#128522;</h1>\
</body>\
</html>";

// Handle root url (/)
void handle_root() {
  server.send(200, "text/html", HTML);
} 
پس از آپلود کد، پنجره ی سریال را باز کنید. اگر SSID و رمز مودم خود را درست وارد کرده باشید، پس از چند ثانیه، ESP32 به مودم وصل شده و یک IP به شما می دهد.
با وارد کردن این IP در مرورگر کامپیوتر، لپ تاپ، گوشی موبایل و یا …، می توانید صفحه ی وبی که ساخته اید را مشاهده کنید.
توجه
کامپیوتر، لپ تاپ، گوشی موبایل و یا … شما باید به همان شبکه ی وای فایی (مودم) متصل باشد که ESP32 به آن متصل است.

توضیح بخش های مختلف کد

#include <WiFi.h>
#include <WebServer.h>

در ابتدای کد، دو کتابخانه ی مورد نیاز اضافه شده است. کتابخانه ی WiFi.h برای راه اندازی بخش وای فای و WebServer.h برای ساخت یک صفحه ی وب استفاده می شود.

const char* ssid = "****";   
const char* password = "****";

در دو خط فوق باید نام SSID و رمز مودم وای فای خود را وارد کنید.

WebServer server(80);

از کلاس Webserver یک شی به نام server ساخته شده است. با این شی می توان یک صفحه ی وب روی پورت 80 ایجاد کرد.

در بخش setup، ابتدا ارتباط سریال شروع به کار کرده است.

WiFi.begin(ssid, password);

با دستور WiFi.begin ESP32 با SSID و رمزی که در کد تعریف شده است، تلاش می کند تا به مودم وای فای شما وصل شود.

while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected successfully");

کد فوق تا وقتی که ESP32 به مودم وای فای متصل نشده باشد، در پنجره ی سریال “.” چاپ می کند. زمانی که اتصال به درستی برقرار شد، عبارت “WiFi connected successfully” در پنجره ی سریال نمایش داده می شود.

Serial.print("Got IP: "); 

Serial.println(WiFi.localIP());

سپس آدرس IP ESP32 در پنجره ی سریال چاپ می شود.

برای مدیریت کردن درخواست های HTTP و مشخص کردن این که وقتی یک آدرس URL سرچ شد، چه بخش از کد اجرا شود، از متد on استفاده می شود.

server.on("/", handle_root);
در کد فوق، وقتی آدرس اصلی (یعنی بعد از آی پی یک / بگذارید) در مرورگر سرچ می شود، تابع handle_root فرا خوانده می شود. در نهایت با دستور server. begin وب سروری که ساختید، آغاز به کار می کند. در بخش loop تنها متد handleClient فراخوانده می شود تا کد شما (سروری که ساختید) همواره در حال بررسی کردن وب سرور باشد تا رخداد هایی که در سرور رخ می دهد را مدیریت کند.
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - Station Mode &#128522;</h1>\
</body>\
</html>";

رشته ی HTML شامل کدی است که باید روی صفحه ی وب نمایش داده شود. در انتهای این آموزش، مقدماتی از کدنویسی HTML آموزش داده شده است.

نکته
برای اینکه یک دستور را در چند خط بنویسید، فقط کافیست در انتهای هر خط یک بک اسلش (\) بگذارید.
void handle_root() { 
  server.send(200, "text/html", HTML); 
}
تابع handle_root هر زمانی که مسیر اصلی (همان آی پی) در مرورگر سرچ می شود فراخوانی می شود. در این تابع از متد send استفاده شده است دستور send کد 200 (یعنی صفحه به درستی باز شده است) را به همراه کد HTML که نوشتیم ارسال می کند تا کد HTML روی صفحه ی وب نمایش داده شود. برای مثال های بیشتر می توانید از مثال های خود کتابخانه استفاده کنید.

راه اندازی ESP32 در حالت Access Point) AP)

در این حالت، ESP32 به عنوان یک مودم عمل می کند و یک شبکه ی وای فای داخلی (Local) با اسم و رمز دلخواه ایجاد می کند. به دلیل محدویت های این نقطه ی اتصال در تعداد دستگاه های قابل اتصال به آن و … به آن Soft Access Point نیز گفته می شود.

کد

برای راه اندازی ESP32 در مد AP کافیست کد زیر را روی آن آپلود کنید.

/*
  ESP32 Web Server - AP Mode
  modified on 25 MAy 2019
  by Mohammadreza Akbari @ Electropeak
  https://electropeak.com/learn
*/

#include <WiFi.h>
#include <WebServer.h>

// SSID & Password
const char* ssid = "Electropeak Inc";  // Enter your SSID here
const char* password = "123456789";  //Enter your Password here

// 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);  // Object of WebServer(HTTP port, 80 is defult)


void setup() {
  Serial.begin(115200);

  // Create SoftAP
  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);


  Serial.print("Connect to My access point: ");
  Serial.println(ssid);

  server.on("/", handle_root);

  server.begin();
  Serial.println("HTTP server started");
  delay(100);
}

void loop() {
  server.handleClient();
}

// HTML & CSS contents which display on web server
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - AP Mode &#128522;</h1>\
</body>\
</html>";

// Handle root url (/)
void handle_root() {
  server.send(200, "text/html", HTML);
}
پس از آپلود کد، به نقطه اتصالی که ساخته اید متصل شوید.
سپس آی پی 192.168.1.1 را در مرورگر خود وارد کنید.

توضیح بخش های مختلف کد

const char* ssid = "Electropeak";  
const char* password = "123456789";

در این بخش کد باید SSID و رمز  دلخواه خود را وارد کنید تا ESP32 یک نقطه ی اتصال وای فای با آن نام ایجاد کند.

IPAddress local_ip(192, 168, 1, 1); 
IPAddress gateway(192, 168, 1, 1); 
IPAddress subnet(255, 255, 255, 0);

سپس باید آی پی مورد نظر خود را برای ساخت شبکه وارد کنید. (می توانید از همین آی پی هایی که در کد تعریف شده است استفاده کنید.)

WiFi.softAP(ssid, password); 
WiFi.softAPConfig(local_ip, gateway, subnet);

با دستورات فوق، یک نقطه ی اتصال وای فای ساخته می شود.

باقی کد مشابه حالت STA است.

معرفی دستورات اولیه ی HTML و CSS

HTML دارای تگ هایی است که بین <> قرار می گیرند. تمامی دستورات HTML بین این تگ ها قرار می گیرند. برای تست کدهای خود به صورت آنلاین می توانید از این لینک استفاده کنید.

CSS مخفف (Cascading Style Sheets) است. دستورات CSS مشخص می کنند که کد ها و دستورات HTML چگونه به کاربر نمایش داده شوند.

<!DOCTYPE html> 

اولین خط هر کد HTML باید <!DOCTYPE html> باشد. این دستور یک دستور HTML نیست. با این کد، به مرورگر اعلام می کنید که از چه ورژن از HTML برای نوشتن صفحه ی وب استفاده کردید.

<!DOCTYPE html>

<html> 

بلافاصله بعد از <!DOCTYPE html> باید نوشته شود. تمام کد ها بین این تگ قرار می گیرند.

<html> codes… <\html>

ایجاد تیتر

برای ایجاد تیتر در سایز های مختلف، می توانید از تگ های <h1> تا <h6> استفاده کنید.

<p>Your first paragraph.</p>
<p>Your second paragraph.</p>

ایجاد پاراگراف

برای ایجاد یک پاراگراف جدید از تگ <p> استفاده کنید و متن خود را بین آن بنویسید.

برجسته (Bold) کردن نوشته ها

برای برجسته کردن نوشته ها می توانید از تگ HTML <strong> یا دستور CSS <b> استفاده کنید.

This is bold text

مورب (Italic) کردن نوشته ها

برای مورب کردن نوشته ها می توانید از تگ HTML <em> یا دستور CSS <i> استفاده کنید.

This is Italic text

اضافه کردن لینک

با تگ <a> می توانید آدرس URL را به صورت یک لینک در صفحه ی خود بگذارید.

<a href="https://electropeak.com/">Visit Electropeak</a>

اضافه کردن عکس

با تگ <img> می توانید عکس اضافه کنید.

<img src="image URL" alt="Smiley face" width="42" height="42">

اضافه کردن کلید

با تگ <button> می توانید یک کلید به صفحه ی وب خود اضافه کنید.

<button type="button" onclick="alert('Hello world!')">Click Me!</button>
برای یادگیری کامل تر دستورات HTML و CSS، می توانید به سایت w3schools مراجعه کنید.

از این مطلب خوشتان آمده؟

جدیدترین آموزش‌ها را از بهترین‌ها دریافت کنید

بیشتر بخوانید

Comments (7)

  • موسوی Reply

    با سلام. مطلب فوق العاد عالی بود.
    متشکرم

    فوریه 8, 2020 at 5:26 ب.ظ
    • سعید حسینی Reply

      🙂

      فوریه 29, 2020 at 9:17 ق.ظ
  • محمد حسین رحیمی Reply

    با سلام.
    مطلب بسیار فوق العاده ای بود
    ی سوال داشتم
    الان من میخواهم توی صفحه HTML ی تکست باکس درست کنم که اطلاعات کاربر(مثلا اسش رو بگیرم و در ESP ذخیره کنم)
    چجوری میشه اطلاعات رو از صفحه HTML به ESP منتقل کنم؟
    میشه ی مثال بزنید
    ممنون از اینکه وقت گذاشتید

    ژوئن 18, 2020 at 12:17 ب.ظ
  • محمد حسین رحیمی Reply

    سلام.
    کتابخونه WebServer.h رو از کجا بیارم؟
    لطفا لینکشو بزارید

    ژوئن 18, 2020 at 1:42 ب.ظ
    • Mohammad Damirchi Reply

      در زمان نصب esp32 بر روی Arduino IDE به صورت خودکار نصب می شود.
      در صورتی که نصب نشده است لینک زیر را در برنامه دانلود منیجر خود وارد کنید و به صورت خودکار دانلود می شود.
      سپس در داخل پوشه ای که کد خود را نوشته اید کپی کنید. سپس کد خود را با Arduino IDE باز کنید
      https://github.com/espressif/arduino-esp32/blob/master/libraries/WebServer/src/WebServer.h

      جولای 18, 2020 at 4:19 ب.ظ
  • محمدصالح کامیاب Reply

    سلام
    با ESP8266 هم می‌شه؟
    با تشکر

    ژوئن 29, 2020 at 11:10 ق.ظ
    • Mohammad Damirchi Reply

      بله میتواند.
      نمونه کد در مسیر زیر در برنامه Arduino IDE وجود دارد.
      File->Examples->ESP8266WIFI->WiFiAccessPoint
      توجه داشته باشید که از قبل کتابخانه ESP8266 را نصب کرده باشید.
      آموزش نصب کتابخانه :
      https://thecaferobot.com/learn/using-esp8266-wifi-module-arduino-ide-full-guide/
      بخش نصب کتابخانه و بردهای ESP8266:

      جولای 18, 2020 at 4:27 ب.ظ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *