LED کنترل شده با اینترنت با استفاده از وب سرور مبتنی بر ESP32: 10 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

مروری بر پروژه

در این مثال ، ما نحوه ایجاد یک وب سرور مبتنی بر ESP32 برای کنترل وضعیت LED ، که از هر نقطه در جهان قابل دسترسی است را خواهیم فهمید. برای این پروژه به رایانه Mac احتیاج دارید ، اما می توانید این نرم افزار را حتی در رایانه ارزان قیمت و کم مصرف مانند Raspberry Pi اجرا کنید.

آماده سازی ESP32 با Arduino IDE

برای شروع برنامه نویسی ESP32 با استفاده از Arduino IDE و زبان برنامه نویسی Arduino ، به یک افزودنی ویژه نیاز دارید. در مورد نحوه آماده سازی Arduino IDE برای ESP32 در سیستم عامل Mac در پیوند زیر بخوانید.

تدارکات

برای این آموزش به موارد زیر نیاز دارید:

• تخته توسعه ESP32 5 میلی متر
• مقاومت LED 220 اهم
• صفحه نمایش LCD 16x2 با ماژول I2C
• تخته نان
• سیم های بلوز
• کابل میکرو USB

مرحله 1: ساختن مدار

اتصالات را همانطور که در نمودار شماتیک زیر نشان داده شده انجام دهید

با اتصال خروجی ولتاژ منبع تغذیه 3V3 بر روی نان برد ESP32 و GNDto شروع کنید. LED را از طریق مقاومت به ESP32 با استفاده از پین GPIO 23 به عنوان پین خروجی دیجیتال وصل کنید. پس از آن ، پین SDA صفحه نمایش LCD 16x2 را به پین GPIO 21 و SCL را به پین GPIO 22 وصل کنید.

مرحله 2: مرور سریع سیستم فایل SPIFFS

SPIFFS مخفف "Serial Peripheral Interface Flash File System" است ، یعنی سیستم فایل برای حافظه فلش که داده ها را از طریق SPI منتقل می کند. بر این اساس ، SPIFFS یک سیستم فایل ساده شده برای میکروکنترلرها با تراشه های فلش است که داده ها را از طریق گذرگاه SPI (مانند فلش مموری ESP32) منتقل می کند.

SPIFFS در موارد زیر برای استفاده با ESP32 بسیار مفید است:

• ایجاد فایل برای ذخیره تنظیمات
• ذخیره سازی دائمی داده ها
• ایجاد فایل برای ذخیره مقدار کمی داده (به جای استفاده از کارت microSD برای این کار).
• ذخیره فایل های HTML و CSS برای ایجاد وب سرور.

مرحله 3: نصب SPIFFS Bootloader در سیستم عامل Mac

می توانید مستقیماً با استفاده از افزونه در Arduino IDE ، داده هایی را در پرونده های ذخیره شده در سیستم فایل ESP32 ایجاد ، ذخیره و بنویسید.

اول از همه ، مطمئن شوید که آخرین نسخه Arduino IDE را نصب کرده اید و سپس موارد زیر را انجام دهید:

• پیوند زیر را باز کرده و بایگانی "ESP32FS-1.0.zip" را بارگیری کنید
• به پوشه Arduino IDE بروید که در پوشه Documents قرار دارد.
• در صورتی که پوشه ای وجود ندارد ، یک ابزار ایجاد کنید. در داخل فهرست ابزارها ، پوشه دیگری ESP32FS ایجاد کنید. در داخل ESP32FS یکی دیگر ایجاد کنید ، که ابزار نامیده می شود.
• بایگانی ZIP بارگیری شده در مرحله 1 را از پوشه ابزار باز کنید.
• Arduino IDE خود را راه اندازی مجدد کنید.
• برای بررسی اینکه آیا افزونه با موفقیت نصب شده است ، Arduino IDE را باز کرده و روی "Tools" کلیک کنید و بررسی کنید که آیا یک مورد "ESP32 Sketch Data Upload" در این منو وجود دارد یا خیر.

مرحله 4: نصب کتابخانه ها

کتابخانه های ESPAsyncWebServer و AsyncTCP به شما امکان می دهند با استفاده از فایل های سیستم فایل ESP32 یک سرور وب ایجاد کنید. برای اطلاعات بیشتر در مورد این کتابخانه ها ، پیوند زیر را بررسی کنید.

کتابخانه ESPAsyncWebServer را نصب کنید

• برای بارگیری آرشیو ZIP کتابخانه اینجا را کلیک کنید.
• این بایگانی را از حالت فشرده خارج کنید. شما باید پوشه ESPAsyncWebServer-master را دریافت کنید.
• نام آن را به "ESPAsyncWebServer" تغییر دهید.

کتابخانه AsyncTCP را نصب کنید

• برای بارگیری آرشیو ZIP کتابخانه اینجا را کلیک کنید.
• این بایگانی را از حالت فشرده خارج کنید. شما باید پوشه AsyncTCP-master را دریافت کنید.
• نام آن را به "AsyncTCP" تغییر دهید.

پوشه های ESPAsyncWebServer و AsyncTCP را به پوشه libraries که در فهرست پوشه Documents قرار دارد ، منتقل کنید.

در نهایت ، Arduino IDE را راه اندازی مجدد کنید.

مرحله 5: یک فایل Index.html و Style.css با محتوای زیر ایجاد کنید

قالب HTML/CSS برای تغییر دکمه از منبع زیر گرفته شده است.

مرحله 6: کد آردوینو

عمدتا ، کد بر اساس کد آردوینو بود که از ESP32 Web Server با استفاده از SPIFFS و نحوه استفاده از LCD I2C با ESP32 در Arduino IDE گرفته شده بود.

مرحله 7: کد و فایل های آردوینو را با استفاده از SPIFFS Loader بارگذاری کنید

• پوشه طرح کدهای آردوینو را باز کنید.
• در داخل این پوشه ، یک پوشه جدید به نام "data" ایجاد کنید.
• در داخل پوشه داده ها ، باید index.html و style.css را قرار دهید.
• کد آردوینو را بارگذاری کنید
• سپس ، برای بارگذاری فایل ها ، روی Arduino IDE در Tools> ESP32 Sketch Data Upload کلیک کنید

مرحله 8: آدرس IP سرور وب ESP32 را تعیین کنید

به دو صورت می توان آن را یافت.

• مانیتور سریال در Arduino IDE (ابزارها> مانیتور سریال)
• روی صفحه نمایش LCD

مرحله 9: آزمایش وب سرور محلی

سپس ، مرورگر وب دلخواه خود را باز کرده و آدرس IP زیر را در نوار آدرس بچسبانید. شما باید خروجی مشابه تصویر زیر دریافت کنید.

مرحله 10: دسترسی به وب سرور محلی از هر نقطه از جهان با استفاده از Ngrok

Ngrok یک پلتفرم است که به شما امکان می دهد دسترسی از راه دور به یک سرور وب یا سرویس دیگری را که از طریق اینترنت خارجی روی رایانه شما اجرا می شود سازماندهی کنید. دسترسی از طریق تونل ایمن ایجاد شده در ابتدای گرمک سازماندهی می شود.

• این پیوند را دنبال کرده و ثبت نام کنید.
• پس از ایجاد یک حساب کاربری ، وارد شوید و به برگه "Auth" بروید. خط را از قسمت "Your Tunnel Authtoken" کپی کنید.
• روی برگه "بارگیری" در نوار ناوبری کلیک کنید. نسخه گرمk را که با سیستم عامل شما مطابقت دارد انتخاب کرده و آن را بارگیری کنید.
• پوشه بارگیری شده را از حالت فشرده خارج کرده و خط فرمان را اجرا کنید.
• با وارد کردن دستور زیر حساب خود را متصل کنید

./ngrok authtoken

یک تونل HTTP را روی پورت 80 راه اندازی کنید

./ngrok http Your_IP_Address: 80

اگر همه چیز به درستی انجام شده است ، وضعیت تونل باید به "آنلاین" تغییر کند و یک پیوند تغییر مسیر باید در ستون "Forwarding" ظاهر شود. با وارد کردن این پیوند به مرورگر خود ، می توانید از هر نقطه در جهان به سرور وب دسترسی داشته باشید.