ESP8266 آموزشی اینترنت اشیا

ساخت لوکال وب سرور در ماژول ESP8266 / ESP32 – فرم HTML

27 بهمن, 1400
محمد جواد رشیدیانفر
بدون دیدگاه
بازدید: ۲,۲۱۳
زمان مطالعه: 4 دقیقه
اجرای وب سرور در ماژول ESP8266 / ESP32 - ساخت فرم
نوشته شده توسط
دانلود فایل PDF

سلام خدمت همه شما مایکروالکامی ها. در مطالب قبلی از سری آموزش های ماژول ESP8266 به بحث کنترل وسایل برقی از طریق سیستم عامل iOS و Siri پرداخته شد. در این مطلب به اجرای یک لوکال وب سرور و ساخت یک فرم روی ماژول های ESP8266 یا ESP32 با استفاده از تگ های HTML پرداخته خواهد شد. پس با من تا انتهای مطلب همراه باشید. همچنین شما میتویند سایر مطالب من رو از این لینک مطالعه و بررسی کنید.

ایجاد یک فرم در وب سرور ماژول ESP8266 / ESP32

در این مطلب با استفاده از کد های HTML روش ایجاد یک لوکال وب سرور و ساخت یک فرم جهت وارد کردن و دریافت اطلاعات در ماژول ESP8266 / ESP32 بررسی خواهد شد. استفاده از این روش در پروژه های تجاری می‌تواند کمک شایانی در تنظیمات منطبق بر میل کاربر نموده و براحتی می‌توان اطلاعات مورد نیاز جهت استفاده در دستگاه را از کاربر دریافت کرد.

قطعات مورد نیاز

ساخت یک فرم ساده با استفاده از کد های HTML برای اجرا روی ماژول ESP

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

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

    <form action="/get">
      <label for="fname">SSID:</label><br>
      <input type="text" id="ssid_name" name="ssid_name" value="Microelecom"><br>
      <label for="lname">Password:</label><br>
      <input type="text" id="ssid_password" name="ssid_password" value="Blog.Microelecom.com"><br><br>
      <input type="submit" value="Submit">
    </form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/get".</p>

</body>
</html>
  • نکته: می‌توانید مقدار Value را پاک کرده تا متنی بصورت پیشفرض داخل تکست باکس ها وجود نداشته باشد.

مشاهده نتیجه

ایجاد فرم HTML برای اجرا در ESP8266 و ESP32
ایجاد فرم HTML برای اجرا در ESP8266 و ESP32

سورس کد ایجاد وب سرور و ساخت فرم در ماژول ESP8266 / ESP32

با استفاده از کد های زیر یک لوکال وب سرور توسط کتابخانه ESPAsyncWebServer ایجاد می‌کنیم. در گام بعدی با اتصال گوشی/لپ تاپ به ماژول و وارد کردن IP ماژول در مرورگر خود صفحه وب سرور باز خواهد شد. در نهایت بعد از تکمیل فیلد های فرم و کلیک برروی Submit اطلاعات توسط ESP8266 / ESP32 دریافت می‌شود.

نکته مهم: فایل “Simple_HTML_Form.h” را از این لینک دانلود و استخراج کرده و دقیقا در همان پوشه محل ذخیره سورس کد زیر ذخیره نمایید. در واقع کد اصلی HTML درون یک تابع در این هدر وارد شده است.

#ifdef ESP32
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "Simple_HTML_Form.h"
#else
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include "Simple_HTML_Form.h"
#endif

AsyncWebServer server(80);

boolean set_ssid = false;
const char *ssid = "SSID";
const char *password = "Password";
String input1 = "";
String input2 = "";

unsigned int localPort = 8888;
IPAddress    apIP(192, 168, 4, 1);
IPAddress    broadcastIP(255, 255, 255, 255);
struct ip_addr *IPaddress;
IPAddress address;

void notFound(AsyncWebServerRequest *request)
{
  request->send(404, "text/plain", "Page Not found");
}

void setup()
{
  Serial.begin(115200);
  Serial.println();
  Serial.print("Configuring access point...");
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  Serial.print(" MAC Address is:");
  Serial.println (WiFi.softAPmacAddress());

  server.on("/", [](AsyncWebServerRequest * request)
  {
    request->send(200, "text/html", load_form_html);
  });

  server.on("/ssid_setting", [](AsyncWebServerRequest * request)
  {
    if (request->hasParam("input1") && request->hasParam("input2"))
    {
      input1 = request->getParam("input1")->value();
      input2 = request->getParam("input2")->value();
      Serial.println("Input1: " + input1 + " / Input2: " + input2);
      request->send(200, "text/plain", "Successful");
    }
  });
  server.onNotFound(notFound);
  server.begin();
}
void loop()
{

}

نحوه عملکرد سورس کد

در ابتدا کتابخانه و هدر های لازم برای هر دو ماژول ESP8266 / ESP32 معرفی گردید. همچنین در خط 5 شماره پورت 80 برای لوکال وب سرور در نظر گرفته شده است. برای معرفی پارامتر های تعیین حالت کاری اکسس پوینت از دستورات زیر استفاده شده است.

unsigned int localPort = 8888;
IPAddress    apIP(192, 168, 4, 1);
IPAddress    broadcastIP(255, 255, 255, 255);
struct ip_addr *IPaddress;
IPAddress address;

تابع خطای URL غیر مجاز یا URL ای که معرفی نشده است

void notFound(AsyncWebServerRequest *request)
{
  request->send(404, "text/plain", "Page Not found");
}

اجرای لوکال سرور و نمایش فرم HTML

  server.on("/", [](AsyncWebServerRequest * request)
  {
    request->send(200, "text/html", load_form_html);
  });

دریافت دیتا به محض کلیک کردن برروی Submit

server.on("/ssid_setting", [](AsyncWebServerRequest * request)
{
  if (request->hasParam("input1") && request->hasParam("input2"))
  {
    input1 = request->getParam("input1")->value(); // دریافت مقادیر وارد شده در فیلد اول
    input2 = request->getParam("input2")->value(); // دریافت مقادیر وارد شده در فیلدم دوم
    Serial.println("Input1: " + input1 + " / Input2: " + input2); // نمایش مقادیر دریافتی در سریال مانیتور
    request->send(200, "text/plain", "Successful"); // نمایش پیام در صفحه وب سرور مبنی بر موفقیت آمیز بودن دریافت دیتا
  }
});

اجرای لوکال وب سرور در ESP8266 / ESP32

server.begin();

نتیجه گیری

در این مطلب به نحوه ایجاد یک فرم با استفاده از کد های HTML و اجرای لوکال وب سرور روی مازول های ESP8266 / ESP32 پرداخته شد. با استفاده از این فرم می‌توان اطلاعات مورد نیاز در اجرای یک کاربرد را مثلا اتصال ماژول به مودم را از کاربر گرفت و کار را پیش برد.

امیدوارم از این آموزش کمال بهره را برده باشید. در صورت داشتن هرگونه نظر یا سوال درباره این آموزش اون رو در انتهای همین صفحه در قسمت دیدگاه ها قرار بدید. در کوتاه ترین زمان ممکن به اون ها پاسخ خواهم داد. اگر این مطلب براتون مفید بود، اون رو حتما به اشتراک بگذارید. همینطور میتونید این آموزش را پس از اجرای عملی توی اینستاگرام با هشتگ microelecom# به اشتراک بگذارید و پیج مایکروالکام (microelecom@) رو هم منشن کنید.

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

نشانی ایمیل شما منتشر نخواهد شد.