در دنیای فزاینده دستگاه‌های متصل به اینترنت اشیا (IoT)، توانایی تعامل و کنترل سخت‌افزار از راه دور از اهمیت بالایی برخوردار است. میکروپایتون (MicroPython) به عنوان یک پیاده‌سازی کارآمد و بهینه از پایتون ۳ برای میکروکنترلرها، ابزاری قدرتمند برای توسعه پروژه‌های IoT محسوب می‌شود. اما برای بهره‌برداری کامل از این پروژه‌ها، به یک رابط کاربری (UI) کاربرپسند نیاز داریم. در بسیاری از موارد، ساخت یک رابط کاربری تحت وب (Web UI) ساده، سبک و مستقل از پلتفرم، بهترین راه حل است. این رویکرد به شما امکان می‌دهد تا بدون نیاز به توسعه اپلیکیشن‌های موبایل یا دسکتاپ اختصاصی، دستگاه‌های میکروپایتون خود را از طریق هر مرورگر وبی کنترل و نظارت کنید.

هدف از این مقاله، ارائه یک راهنمای جامع و فنی برای ساخت چنین رابط‌های کاربری تحت وب ساده برای پروژه‌های میکروپایتون است. ما از مفاهیم اولیه تا پیاده‌سازی‌های پیشرفته‌تر را پوشش خواهیم داد، با تمرکز بر بهینه‌سازی منابع محدود میکروکنترلرها و ارائه تجربه‌ای روان برای کاربر. این محتوا برای توسعه‌دهندگان، مهندسان و علاقه‌مندان به IoT که با میکروپایتون آشنایی دارند و به دنبال ارتقاء پروژه‌های خود با قابلیت‌های تحت وب هستند، مناسب است.

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

چرا رابط کاربری تحت وب برای پروژه‌های میکروپایتون؟ مزایا و چالش‌ها

انتخاب رابط کاربری تحت وب برای پروژه‌های میکروپایتون، با توجه به ماهیت و محدودیت‌های میکروکنترلرها، مزایای قابل توجهی دارد که آن را به گزینه‌ای ایده‌آل تبدیل می‌کند. با این حال، مانند هر رویکرد دیگری، چالش‌هایی نیز در مسیر پیاده‌سازی وجود دارد که باید به آن‌ها توجه کرد.

مزایای کلیدی Web UI:

1. دسترسی‌پذیری بالا (Accessibility): بزرگترین مزیت Web UI، قابلیت دسترسی آن از طریق هر دستگاهی با مرورگر وب است. این بدان معناست که کاربران می‌توانند دستگاه میکروپایتون شما را از طریق رایانه شخصی، لپ‌تاپ، تبلت یا گوشی هوشمند خود کنترل کنند، بدون نیاز به نصب هیچ نرم‌افزار اضافی.
2. مستقل از پلتفرم (Platform Independent): کد رابط کاربری تحت وب (HTML, CSS, JavaScript) بر روی پلتفرم‌های مختلف به یک شکل اجرا می‌شود. این موضوع نیاز به توسعه جداگانه برای سیستم‌عامل‌های مختلف (اندروید، iOS، ویندوز، مک) را از بین می‌برد و هزینه‌ها و زمان توسعه را به شدت کاهش می‌دهد.
3. سبک و کم‌مصرف (Lightweight & Resource-Friendly): برخلاف اپلیکیشن‌های بومی که ممکن است حجم زیادی داشته باشند و نیازمند منابع سیستمی بالا باشند، Web UIهای ساده می‌توانند بسیار سبک باشند. این برای میکروکنترلرهایی با حافظه فلش و RAM محدود (مانند ESP32 و ESP8266) حیاتی است. فایل‌های HTML, CSS و JavaScript می‌توانند به صورت فشرده در حافظه فلش ذخیره شده و به درخواست مرورگر ارسال شوند.
4. سهولت به‌روزرسانی (Ease of Updates): به‌روزرسانی یک Web UI بسیار ساده‌تر از به‌روزرسانی یک اپلیکیشن بومی است. با تغییر فایل‌های سمت سرور (روی میکروکنترلر)، تمام کاربران به محض دسترسی مجدد به دستگاه، جدیدترین نسخه رابط کاربری را مشاهده می‌کنند. این فرآیند می‌تواند حتی از طریق به‌روزرسانی Over-the-Air (OTA) صورت گیرد.
5. انعطاف‌پذیری و توسعه‌پذیری (Flexibility & Scalability): استفاده از فناوری‌های استاندارد وب به توسعه‌دهندگان این امکان را می‌دهد که از طیف وسیعی از ابزارها و کتابخانه‌ها استفاده کنند. همچنین، با افزایش پیچیدگی پروژه، می‌توان به راحتی قابلیت‌های جدیدی به رابط کاربری اضافه کرد.
6. پایین آوردن منحنی یادگیری (Lower Learning Curve): برای بسیاری از توسعه‌دهندگان، آشنایی با HTML، CSS و JavaScript از یادگیری فریمورک‌های پیچیده توسعه اپلیکیشن‌های بومی ساده‌تر است.

چالش‌های پیش رو:

1. محدودیت منابع سخت‌افزاری: این اصلی‌ترین چالش است. میکروکنترلرها دارای RAM، حافظه فلش و قدرت پردازش محدودی هستند. این محدودیت‌ها بر اندازه کدهای پایتون، حجم فایل‌های استاتیک وب، و پیچیدگی منطق سمت سرور تأثیر می‌گذارد. بارگذاری تعداد زیادی فایل یا پردازش‌های سنگین می‌تواند منجر به خطاهای کمبود حافظه (MemoryError) یا کرش شدن دستگاه شود.
2. عملکرد شبکه (Network Performance): میکروکنترلرها ممکن است دارای چیپست‌های Wi-Fi با کارایی محدود باشند. سرو کردن فایل‌های وب بزرگ یا مدیریت همزمان چندین اتصال می‌تواند منجر به کاهش سرعت پاسخگویی و تأخیر در رابط کاربری شود. بهینه‌سازی ترافیک شبکه و استفاده از پروتکل‌های کارآمد (مانند WebSockets) حیاتی است.
3. امنیت (Security): قرار دادن دستگاه میکروکنترلر در شبکه و ارائه یک رابط کاربری تحت وب، دروازه‌ای برای حملات احتمالی باز می‌کند. مسائل امنیتی مانند احراز هویت، اعتبارسنجی ورودی، و جلوگیری از حملات Denial-of-Service (DoS) باید به دقت مورد توجه قرار گیرند.
4. پیچیدگی توسعه (Development Complexity): هرچند توسعه یک Web UI ساده ممکن است آسان باشد، اما ساخت یک رابط کاربری غنی و تعاملی در محیط محدود میکروپایتون می‌تواند پیچیده شود. اشکال‌زدایی (Debugging) در میکروکنترلرها نیز ممکن است دشوارتر از محیط‌های توسعه سنتی باشد.
5. عدم وجود فریمورک‌های کامل (Lack of Full-featured Frameworks): میکروپایتون فریمورک‌های وب کاملی مانند Django یا Flask را ندارد. فریمورک‌های موجود (مانند Picoweb یا Microdot) سبک‌تر هستند و بسیاری از قابلیت‌ها را باید به صورت دستی پیاده‌سازی کرد.

با درک این مزایا و چالش‌ها، می‌توانیم رویکردی متوازن و کارآمد برای ساخت Web UIهای میکروپایتون اتخاذ کنیم که هم نیازهای عملکردی را برآورده سازد و هم از منابع محدود دستگاه به بهترین نحو استفاده کند.

آشنایی با قابلیت‌های وب در میکروپایتون: از سوکت تا فریمورک‌های سبک

میکروپایتون با هدف فراهم آوردن قابلیت‌های پایتون برای میکروکنترلرها طراحی شده است، و این شامل قابلیت‌های شبکه و وب نیز می‌شود. در هسته اصلی، میکروپایتون ابزارهایی برای کار با TCP/IP sockets فراهم می‌کند که پایه‌ای برای هرگونه ارتباط شبکه، از جمله HTTP، است. شناخت این قابلیت‌ها برای ساخت یک Web UI کارآمد ضروری است.

ماژول‌های اساسی شبکه در میکروپایتون:

1. network ماژول: این ماژول برای پیکربندی و مدیریت اینترفیس‌های شبکه (مانند Wi-Fi) استفاده می‌شود. برای مثال، برای اتصال به یک شبکه Wi-Fi، تنظیم حالت Access Point (AP) یا دریافت آدرس IP، از این ماژول استفاده می‌کنیم.
2. usocket ماژول: این ماژول پیاده‌سازی سبک و بهینه شده‌ای از ماژول socket استاندارد پایتون است. با استفاده از usocket می‌توانیم سوکت‌های TCP/UDP را ایجاد کرده، به آن‌ها متصل شده، داده ارسال و دریافت کنیم. این ماژول سنگ بنای هرگونه سرور وب یا کلاینت شبکه در میکروپایتون است.
3. ustruct ماژول: اگرچه مستقیماً مربوط به وب نیست، اما در برخی پروتکل‌های خاص یا برای فشرده‌سازی داده‌ها ممکن است مفید باشد.

پیاده‌سازی سرور HTTP با usocket (از پایه):

در ساده‌ترین حالت، یک سرور HTTP در میکروپایتون با استفاده از ماژول usocket به این صورت عمل می‌کند:

1. ایجاد یک سوکت سرور (socket.AF_INET, socket.SOCK_STREAM).
2. بیند کردن سوکت به یک آدرس IP و پورت (معمولاً پورت ۸۰ برای HTTP).
3. گوش دادن به درخواست‌های ورودی (listen()).
4. قبول کردن اتصال کلاینت (accept()) در یک حلقه بی‌نهایت.
5. خواندن درخواست HTTP از کلاینت.
6. تجزیه درخواست برای شناسایی متد (GET, POST)، مسیر (path) و هدرها.
7. ساخت پاسخ HTTP مناسب (کد وضعیت، هدرها، بدنه).
8. ارسال پاسخ به کلاینت.
9. بستن سوکت کلاینت.

این رویکرد “از پایه” به شما کنترل کامل می‌دهد، اما نیازمند پیاده‌سازی دستی بسیاری از جزئیات پروتکل HTTP است که می‌تواند زمان‌بر و مستعد خطا باشد.

فریمورک‌های وب سبک برای میکروپایتون:

برای ساده‌سازی فرآیند توسعه سرور وب، چندین فریمورک سبک برای میکروپایتون توسعه یافته‌اند که لایه‌ای انتزاعی بر روی usocket فراهم می‌کنند و وظایفی مانند مسیریابی (routing)، پردازش درخواست‌ها و پاسخ‌ها را آسان‌تر می‌کنند.

1. Picoweb: یکی از قدیمی‌ترین و محبوب‌ترین فریمورک‌های وب برای میکروپایتون است. Picoweb از یک مدل رویدادمحور (event-driven) و غیرمسدودکننده (non-blocking) مبتنی بر asyncio استفاده می‌کند که آن را برای مدیریت همزمان چندین اتصال کارآمد می‌سازد. این فریمورک مسیریابی URL، مدیریت درخواست/پاسخ و سرو کردن فایل‌های استاتیک را پشتیبانی می‌کند. برای پروژه‌هایی که نیاز به پاسخگویی سریع و مدیریت همزمان دارند، گزینه بسیار خوبی است.
2. Microdot: Microdot یک فریمورک وب بسیار کوچک و Flask-like است که برای میکروپایتون بهینه شده است. این فریمورک با حداقل وابستگی‌ها و حجم کد، یک رابط برنامه‌نویسی ساده و آشنا (برای توسعه‌دهندگان Flask) ارائه می‌دهد. Microdot از مسیریابی، پردازش JSON، مدیریت کوکی‌ها و آپلود فایل پشتیبانی می‌کند. سادگی و شباهت آن به Flask، آن را به گزینه‌ای جذاب برای بسیاری از پروژه‌ها تبدیل کرده است.
3. MicroWebSrv2: این فریمورک یک سرور HTTP/WebSockets کامل‌تر است که قابلیت‌هایی مانند احراز هویت، مدیریت فایل، و پشتیبانی از SSL/TLS را ارائه می‌دهد. اگرچه قابلیت‌های بیشتری دارد، اما ممکن است کمی سنگین‌تر از Picoweb یا Microdot باشد و برای همه پروژه‌های بسیار سبک مناسب نباشد.
4. Minimal HTTP Servers (توسعه یافته توسط کامیونیتی): علاوه بر فریمورک‌های رسمی، پروژه‌های زیادی وجود دارند که سرورهای HTTP بسیار ساده و مینیمال را بر پایه usocket پیاده‌سازی کرده‌اند. این‌ها معمولاً تنها برای سرو کردن یک یا دو صفحه HTML یا یک API REST ساده طراحی شده‌اند و برای پروژه‌هایی با حداقل نیازها می‌توانند مفید باشند.

محدودیت‌ها:

با وجود این قابلیت‌ها، مهم است که محدودیت‌های زیر را در نظر بگیرید:

• عدم پشتیبانی کامل از پروتکل‌های پیچیده: پیاده‌سازی کامل HTTP/1.1 یا HTTP/2 و پروتکل‌های امنیتی مانند TLS/SSL می‌تواند منابع زیادی را مصرف کند. در میکروپایتون معمولاً به زیرمجموعه‌ای از این پروتکل‌ها اکتفا می‌شود.
• پردازش همزمان محدود: هرچند asyncio کمک می‌کند، اما میکروکنترلرها هنوز هم قادر به مدیریت تعداد زیادی اتصال همزمان یا پردازش‌های سنگین نیستند.
• حجم کد و حافظه: حتی فریمورک‌های سبک نیز مقداری از حافظه فلش و RAM را اشغال می‌کنند. انتخاب فریمورک باید با توجه به منابع موجود و نیازهای پروژه صورت گیرد.

انتخاب بین پیاده‌سازی “از پایه” و استفاده از یک فریمورک سبک بستگی به پیچیدگی پروژه، نیاز به انعطاف‌پذیری و میزان زمانی که توسعه‌دهنده مایل به صرف آن برای جزئیات سطح پایین است، دارد. برای اکثر پروژه‌های Web UI ساده، استفاده از یک فریمورک سبک مانند Microdot یا Picoweb توصیه می‌شود.

انتخاب رویکرد مناسب برای ساخت Web UI: Embedded، External یا Hybrid؟

هنگام طراحی یک Web UI برای پروژه‌های میکروپایتون، اولین تصمیم مهم انتخاب رویکرد کلی برای میزبانی و تعامل رابط کاربری است. سه رویکرد اصلی وجود دارد: Embedded (تعبیه شده)، External (خارجی) و Hybrid (ترکیبی). هر کدام مزایا و معایب خاص خود را دارند و انتخاب مناسب به نیازهای پروژه، محدودیت‌های سخت‌افزاری و تجربه توسعه‌دهنده بستگی دارد.

۱. رویکرد Embedded (تعبیه شده):

در این رویکرد، تمام فایل‌های رابط کاربری (HTML, CSS, JavaScript) مستقیماً روی میکروکنترلر ذخیره شده و توسط سرور وب میکروپایتون سرو می‌شوند. مرورگر کاربر به آدرس IP میکروکنترلر متصل شده و رابط کاربری را مستقیماً از آن دریافت می‌کند.

مزایا:

1. استقلال کامل: دستگاه نیازی به اتصال به اینترنت یا سرور ابری ندارد. تمام منطق و UI روی خود دستگاه اجرا می‌شود. این برای کاربردهایی که دسترسی به اینترنت محدود است یا نیاز به عملکرد آفلاین وجود دارد، ایده‌آل است.
2. امنیت و حریم خصوصی: داده‌ها و کنترل در داخل شبکه محلی (Local Network) باقی می‌ماند و کمتر در معرض دید عمومی قرار می‌گیرد.
3. تنظیم و پیکربندی آسان: دستگاه را می‌توان در هر محیطی که Wi-Fi دارد مستقر کرد و بلافاصله به آن دسترسی داشت.
4. تأخیر کمتر: ارتباط بین UI و سخت‌افزار بسیار سریع است زیرا همه چیز در شبکه محلی و روی یک دستگاه قرار دارد.

معایب:

1. محدودیت منابع: بزرگترین چالش، حجم فایل‌های وب است. HTML, CSS و JavaScript باید به اندازه کافی کوچک باشند تا در حافظه فلش میکروکنترلر جا شوند و RAM دستگاه را بیش از حد اشغال نکنند. این محدودیت، طراحی UI را به سمت سادگی سوق می‌دهد.
2. پیچیدگی توسعه: مدیریت و اشکال‌زدایی فایل‌های وب روی میکروکنترلر می‌تواند کمی پیچیده‌تر باشد.
3. محدودیت در قابلیت‌ها: استفاده از کتابخانه‌های JavaScript بزرگ یا فریمورک‌های UI مدرن (مانند React یا Vue) به دلیل محدودیت منابع غیرممکن است.

موارد استفاده:

پیکربندی اولیه دستگاه، داشبوردهای نظارتی و کنترلی ساده برای اتوماسیون خانگی (Home Automation)، کنترل رباتیک محلی، یا هر پروژه‌ای که نیاز به رابط کاربری مستقل از اینترنت دارد.

۲. رویکرد External (خارجی):

در این رویکرد، رابط کاربری (Frontend) بر روی یک سرور وب جداگانه (مثلاً یک سرور ابری، یک Raspberry Pi یا حتی یک کامپیوتر شخصی) میزبانی می‌شود. میکروپایتون تنها یک API (Application Programming Interface) ساده (معمولاً RESTful) ارائه می‌دهد که رابط کاربری خارجی با آن ارتباط برقرار می‌کند تا داده‌ها را بخواند یا دستورات را ارسال کند.

مزایا:

1. عدم محدودیت منابع UI: رابط کاربری می‌تواند بسیار پیچیده و غنی باشد. شما می‌توانید از هر فریمورک JavaScript دلخواهی (React, Vue, Angular) و هر کتابخانه CSS (Bootstrap, Tailwind CSS) استفاده کنید.
2. سهولت توسعه UI: توسعه‌دهندگان می‌توانند از محیط‌های توسعه مدرن و ابزارهای اشکال‌زدایی قدرتمند برای ساخت فرانت‌اند استفاده کنند.
3. دسترسی از راه دور گسترده: اگر سرور خارجی به اینترنت متصل باشد، می‌توانید از هر جای دنیا به دستگاه خود دسترسی داشته باشید.
4. جداسازی مسئولیت‌ها (Separation of Concerns): میکروپایتون فقط مسئول منطق کسب‌وکار و ارتباط با سخت‌افزار است، در حالی که سرور خارجی مسئول ارائه UI است.

معایب:

1. وابستگی به اینترنت/سرور خارجی: دستگاه برای عملکرد کامل نیاز به اتصال به اینترنت و سرور خارجی دارد. در صورت قطع اینترنت یا از کار افتادن سرور، دسترسی به UI از بین می‌رود.
2. افزایش تأخیر: ارتباطات بین UI، سرور خارجی و میکروکنترلر ممکن است تأخیر بیشتری داشته باشد، به خصوص اگر داده‌ها از طریق اینترنت منتقل شوند.
3. پیچیدگی بیشتر در راه‌اندازی: نیاز به راه‌اندازی و نگهداری یک سرور جداگانه، که می‌تواند شامل مدیریت دامنه، گواهینامه SSL و غیره باشد.
4. نگرانی‌های امنیتی: API میکروپایتون باید به دقت محافظت شود، زیرا در معرض دید عمومی قرار می‌گیرد.

موارد استفاده:

پروژه‌های IoT در مقیاس بزرگ، داشبوردهای مدیریتی مرکزی، سیستم‌های اتوماسیون ساختمان که نیاز به رابط کاربری بسیار پیشرفته دارند، یا هر پروژه‌ای که در آن محدودیت‌های منابع میکروپایتون اجازه نمی‌دهد UI پیچیده را روی خود دستگاه میزبانی کند.

۳. رویکرد Hybrid (ترکیبی):

این رویکرد تلاش می‌کند تا بهترین‌های هر دو روش را با هم ترکیب کند. یک Web UI بسیار ساده و ابتدایی (مثلاً فقط برای پیکربندی Wi-Fi) به صورت Embedded روی میکروکنترلر ذخیره می‌شود. این UI اولیه می‌تواند برای اتصال دستگاه به شبکه یا تنظیمات اولیه استفاده شود. پس از آن، دستگاه می‌تواند به یک سرور خارجی متصل شده و یک رابط کاربری پیشرفته‌تر را از آنجا دریافت کند، یا داده‌ها را به آن ارسال کند.

مزایا:

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

معایب:

1. پیچیدگی بیشتر در طراحی: نیاز به مدیریت دو حالت مختلف برای UI.
2. نیاز به منابع بیشتر: هم برای میزبانی UI اولیه و هم برای پیاده‌سازی API.

موارد استفاده:

دستگاه‌های هوشمندی که نیاز به “حالت راه‌اندازی” (provisioning mode) آفلاین دارند، سپس به یک پلتفرم ابری متصل می‌شوند و یک داشبورد جامع از آن پلتفرم ارائه می‌شود.

خلاصه و توصیه:

برای “پروژه‌های میکروپایتون با Web UI ساده” که عنوان این مقاله است، رویکرد Embedded به دلیل سادگی، استقلال و کمبود منابع، بهترین انتخاب اولیه است. تمرکز ما در این مقاله عمدتاً بر این رویکرد خواهد بود، با این حال برخی نکات مربوط به ارتباط با APIها می‌تواند در رویکردهای External و Hybrid نیز کاربرد داشته باشد. با بهینه‌سازی دقیق فایل‌های وب، می‌توان Web UIهای کاملاً کاربردی را روی میکروکنترلرها میزبانی کرد.

پیاده‌سازی سمت سرور (میکروپایتون): از اتصال Wi-Fi تا سرو کردن فایل‌های وب

پیاده‌سازی سمت سرور در میکروپایتون هسته اصلی Web UI شماست. این بخش مسئول اتصال به شبکه، راه‌اندازی یک سرور HTTP، پاسخ به درخواست‌های کلاینت و تعامل با سخت‌افزار میکروکنترلر است. در ادامه مراحل و کدهای لازم برای این پیاده‌سازی را مرور می‌کنیم.

۱. اتصال به شبکه Wi-Fi و راه‌اندازی حالت Access Point (AP)

قبل از هر چیز، میکروکنترلر شما باید به شبکه متصل شود. دو حالت اصلی وجود دارد: حالت کلاینت (Station mode) برای اتصال به یک روتر موجود، و حالت Access Point (AP mode) برای ایجاد یک شبکه Wi-Fi توسط خود میکروکنترلر که دستگاه‌های دیگر می‌توانند به آن متصل شوند. برای یک Web UI ساده که قرار است مستقیماً با دستگاه تعامل کند، حالت AP معمولاً مناسب‌تر است، به خصوص برای پیکربندی اولیه.

حالت Station (STA):

import network
import time

def connect_wifi(ssid, password):
    sta_if = network.WLAN(network.STA_IF)
    if not sta_if.isconnected():
        print('connecting to network...')
        sta_if.active(True)
        sta_if.connect(ssid, password)
        for i in range(10): # Try to connect for 10 seconds
            if sta_if.isconnected():
                break
            time.sleep(1)
        else:
            print("Failed to connect to WiFi")
            return None
    print('network config:', sta_if.ifconfig())
    return sta_if.ifconfig()[0] # Return IP address

# Example usage:
# ip_address = connect_wifi('YOUR_SSID', 'YOUR_PASSWORD')
# if ip_address:
#     print(f"Connected to WiFi with IP: {ip_address}")

حالت Access Point (AP):

import network
import time

def start_access_point(ssid, password):
    ap = network.WLAN(network.AP_IF)
    ap.active(True)
    ap.config(essid=ssid, password=password, authmode=network.AUTH_WPA_WPA2_PSK)
    # Give it some time to start the AP
    time.sleep(1)
    print('Access Point started:', ap.ifconfig())
    return ap.ifconfig()[0] # Return AP IP address

# Example usage:
# ap_ip = start_access_point('MicroPython_AP', 'micropython')
# print(f"Access Point IP: {ap_ip}")

برای یک Web UI کاملاً مستقل، اغلب از ترکیب این دو حالت استفاده می‌شود: ابتدا در حالت AP برای پیکربندی اولیه، سپس دستگاه به حالت STA تغییر وضعیت داده و به روتر کاربر متصل می‌شود.

۲. ساخت یک سرور HTTP با استفاده از سوکت‌ها (رویکرد پایه)

این روش به شما درک عمیقی از نحوه عملکرد سرورهای وب در میکروپایتون می‌دهد. اگرچه برای پروژه‌های بزرگ توصیه نمی‌شود، اما برای یادگیری و پروژه‌های بسیار کوچک مفید است.

import usocket

def handle_request(client_socket):
    request = client_socket.recv(1024).decode('utf-8')
    print('Request:', request)

    # Simple request parsing
    request_lines = request.split('\r\n')
    if not request_lines or len(request_lines[0].split(' ')) < 2:
        response = "HTTP/1.1 400 Bad Request\r\n\r\n"
        client_socket.sendall(response.encode('utf-8'))
        client_socket.close()
        return

    method, path, _ = request_lines[0].split(' ')

    if path == '/':
        html_content = """
        
        
        
        
            
Welcome to MicroPython Web UI!
            
This is a simple embedded web page.
            
Current time: Loading...
            Click Me
            
        
        
        """
        response = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nContent-Length: {}\r\n\r\n{}".format(len(html_content), html_content)
        client_socket.sendall(response.encode('utf-8'))
    elif path == '/time':
        import utime
        current_time = utime.localtime()
        time_str = "{:02d}:{:02d}:{:02d}".format(current_time[3], current_time[4], current_time[5])
        response = "HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nContent-Length: {}\r\n\r\n{}".format(len(time_str), time_str)
        client_socket.sendall(response.encode('utf-8'))
    else:
        response = "HTTP/1.1 404 Not Found\r\n\r\n"
        client_socket.sendall(response.encode('utf-8'))

    client_socket.close()

def run_basic_server(port=80):
    addr = usocket.getaddrinfo('0.0.0.0', port)[0][-1]
    s = usocket.socket(usocket.AF_INET, usocket.SOCK_STREAM)
    s.setsockopt(usocket.SOL_SOCKET, usocket.SO_REUSEADDR, 1)
    s.bind(addr)
    s.listen(5)
    print(f'Listening on http://{addr[0]}:{addr[1]}')

    while True:
        try:
            conn, addr = s.accept()
            print('Got a connection from %s' % str(addr))
            handle_request(conn)
        except OSError as e:
            print("Error handling connection:", e)
            conn.close()
        except Exception as e:
            print("General error:", e)
            # Potentially restart the server or handle specific errors

۳. استفاده از فریمورک‌های سبک (Microdot یا Picoweb)

برای سهولت و کارایی بیشتر، استفاده از یک فریمورک سبک توصیه می‌شود. در اینجا یک نمونه با Microdot آورده شده است:

# main.py for Microdot example
from microdot import Microdot, send_file
import utime
import machine # For GPIO control

app = Microdot()

# Setup a simple LED
led = machine.Pin(2, machine.Pin.OUT) # Assuming an ESP32 with built-in LED on GPIO 2

@app.route('/')
def index(request):
    return send_file('index.html')

@app.route('/style.css')
def style(request):
    return send_file('style.css', content_type='text/css')

@app.route('/script.js')
def script(request):
    return send_file('script.js', content_type='application/javascript')

@app.route('/api/time')
def get_time(request):
    current_time = utime.localtime()
    time_str = "{:02d}:{:02d}:{:02d}".format(current_time[3], current_time[4], current_time[5])
    return time_str

@app.route('/api/led/')
def control_led(request, state):
    if state == 'on':
        led.value(1)
        return 'LED is ON'
    elif state == 'off':
        led.value(0)
        return 'LED is OFF'
    return 'Invalid LED state', 400

# Function to connect to WiFi (from section 1)
# You need to implement or import connect_wifi function here

if __name__ == '__main__':
    print("Connecting to WiFi...")
    # Replace with your WiFi credentials
    ip_address = connect_wifi('YOUR_SSID', 'YOUR_PASSWORD') 
    if ip_address:
        print(f"Microdot server running on http://{ip_address}")
        app.run(port=80, debug=True)
    else:
        print("Could not connect to WiFi. Starting in AP mode or exiting.")
        # Optionally start AP mode here

نکات کلیدی برای Microdot:

• فایل index.html، style.css و script.js باید در همان دایرکتوری (یا یک زیردایرکتوری) که main.py قرار دارد، ذخیره شوند.
• برای سرو کردن فایل‌های استاتیک، send_file() استفاده می‌شود. این تابع محتوای فایل را می‌خواند و همراه با هدر Content-Type مناسب ارسال می‌کند.
• مسیرهای API مانند /api/time و /api/led/ به سمت کلاینت اجازه می‌دهند تا به داده‌ها دسترسی پیدا کند یا سخت‌افزار را کنترل کند.

۴. سرو کردن فایل‌های استاتیک (HTML, CSS, JavaScript)

برای یک Web UI Embedded، فایل‌های UI (HTML, CSS, JS) باید در حافظه فلش میکروکنترلر ذخیره شوند. این فایل‌ها معمولاً در دایرکتوری روت یا یک دایرکتوری /web یا /static قرار می‌گیرند. فریمورک‌هایی مانند Microdot یا Picoweb دارای توابعی مانند send_file هستند که این کار را آسان می‌کنند.

توصیه‌ها برای فایل‌های استاتیک:

• بهینه‌سازی حجم: فایل‌ها را تا حد امکان کوچک نگه دارید. از minification (کوچک‌سازی) برای HTML, CSS و JavaScript استفاده کنید. کامنت‌های غیرضروری را حذف کنید.
• فشرده‌سازی: می‌توانید فایل‌ها را به صورت GZIP فشرده کرده و سپس آن‌ها را از میکروپایتون سرو کنید. این کار به کاهش ترافیک شبکه و سرعت بارگذاری کمک می‌کند، اما نیاز به پردازش اضافی در سمت سرور (فشرده‌سازی) و کلاینت (باز کردن فشرده‌سازی) دارد.
• پرهیز از فریمورک‌های بزرگ: از فریمورک‌های JavaScript مانند React, Angular, Vue یا کتابخانه‌های CSS حجیم مانند Bootstrap در Web UI Embedded اجتناب کنید. از Vanilla JavaScript و CSS ساده استفاده کنید.

۵. تعامل با سخت‌افزار (GPIO، سنسورها)

قلب یک پروژه IoT، تعامل با سخت‌افزار است. میکروپایتون ماژول‌هایی مانند machine را برای کنترل GPIO و اینترفیس‌های سخت‌افزاری (I2C, SPI, UART) فراهم می‌کند. داده‌های سنسورها را می‌توان خواند و از طریق API به Web UI ارسال کرد، و دستورات کنترلی از UI را می‌توان برای تغییر وضعیت GPIO (مثل روشن/خاموش کردن LED) استفاده کرد.

# Example of reading a sensor (hypothetical temperature sensor on I2C)
import machine
import time

# For an actual sensor, you would need its specific library
# Example using dummy sensor
class TemperatureSensor:
    def __init__(self):
        self.temperature = 25.0

    def read_temperature(self):
        # Simulate temperature change
        self.temperature += (time.time() % 2 - 1) * 0.5 # Oscillate slightly
        return round(self.temperature, 2)

sensor = TemperatureSensor()

@app.route('/api/temperature')
def get_temperature(request):
    temp = sensor.read_temperature()
    return str(temp) + " °C"

# Then in your JS, you would fetch from /api/temperature

با پیاده‌سازی این مراحل، شما یک سرور وب عملکردی روی میکروپایتون خواهید داشت که می‌تواند فایل‌های Web UI را سرو کند و با سخت‌افزار تعامل داشته باشد.

طراحی و پیاده‌سازی سمت کلاینت (Web UI): HTML, CSS, JavaScript

سمت کلاینت Web UI شما همان چیزی است که کاربر نهایی در مرورگر خود مشاهده و با آن تعامل می‌کند. برای پروژه‌های میکروپایتون، به دلیل محدودیت منابع، باید رویکردی مینیمالیستی و بهینه را در طراحی HTML، CSS و JavaScript اتخاذ کنیم.

۱. ساختار HTML (index.html)

فایل HTML، اسکلت اصلی رابط کاربری شما را تشکیل می‌دهد. این فایل باید ساده، معناگرا و کم‌حجم باشد.

    
    
    
    


    

        
داشبورد میکروپایتون

        

            
وضعیت سنسور
            
دما: در حال بارگذاری...
            
رطوبت: در حال بارگذاری...
            
زمان سرور: در حال بارگذاری...
        

        

            
کنترل GPIO
            

                وضعیت LED:
                نامشخص
            
            تغییر وضعیت LED
        

        

            
پیکربندی Wi-Fi
            

                SSID:
                


                رمز عبور:
                


                ذخیره تنظیمات
            
            

        
    

    

توضیحات:

• <meta charset="UTF-8">: برای پشتیبانی از کاراکترهای فارسی.
• <meta name="viewport" ...>: برای ریسپانسیو بودن (Responsive) در دستگاه‌های مختلف.
• <link rel="stylesheet" href="/style.css">: لینک به فایل CSS برای استایل‌دهی.
• <script src="/script.js"></script>: لینک به فایل JavaScript برای افزودن تعامل. این تگ معمولاً قبل از بسته شدن تگ </body> قرار می‌گیرد تا HTML ابتدا بارگذاری شود.
• استفاده از تگ‌های معناگرا مانند <section> و <h2> برای سازماندهی محتوا.
• id برای عناصری که توسط JavaScript دستکاری می‌شوند.

۲. استایل‌دهی با CSS (style.css)

CSS برای زیبایی و بهبود ظاهر رابط کاربری استفاده می‌شود. از آنجا که هدف ما یک UI سبک است، از CSS مینیمال استفاده خواهیم کرد.

/* General styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 20px;
    direction: rtl; /* For Persian language */
    text-align: right; /* For Persian language */
}

.container {
    max-width: 800px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    color: #333;
}

/* Card styles */
.card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.card h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #555;
}

/* Button styles */
.btn {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.btn:hover {
    background-color: #0056b3;
}

/* Form styles */
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

form input[type="text"],
form input[type="password"] {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in width */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .container {
        margin: 10px auto;
        padding: 15px;
    }
}

توضیحات:

• استفاده از CSS مینیمال برای کاهش حجم فایل.
• direction: rtl; و text-align: right; برای پشتیبانی از زبان فارسی.
• استایل‌های پایه برای body، کانتینر اصلی (.container)، کارت‌ها (.card)، دکمه‌ها (.btn) و فرم‌ها.
• Media Queries (@media) برای ریسپانسیو کردن جزئی UI در دستگاه‌های کوچک‌تر.

۳. افزودن تعامل با JavaScript (script.js)

JavaScript مغز Web UI شماست. این کد مسئول برقراری ارتباط با سرور میکروپایتون (از طریق AJAX/Fetch API)، به‌روزرسانی محتوای HTML، و مدیریت رویدادهای کاربر (کلیک دکمه‌ها، ارسال فرم‌ها) است.

document.addEventListener('DOMContentLoaded', () => {
    const temperatureSpan = document.getElementById('temperature');
    const humiditySpan = document.getElementById('humidity');
    const serverTimeSpan = document.getElementById('server-time');
    const toggleLedBtn = document.getElementById('toggle-led-btn');
    const ledStatusSpan = document.getElementById('led-status');
    const wifiConfigForm = document.getElementById('wifi-config-form');
    const wifiStatusP = document.getElementById('wifi-status');

    let ledState = 'off'; // Keep track of LED state client-side

    // Function to fetch and update sensor data and time
    async function fetchData() {
        try {
            // Fetch temperature
            const tempResponse = await fetch('/api/temperature');
            if (tempResponse.ok) {
                const temp = await tempResponse.text();
                temperatureSpan.innerText = temp;
            } else {
                temperatureSpan.innerText = 'خطا در بارگذاری دما';
            }

            // Fetch server time
            const timeResponse = await fetch('/api/time');
            if (timeResponse.ok) {
                const time = await timeResponse.text();
                serverTimeSpan.innerText = time;
            } else {
                serverTimeSpan.innerText = 'خطا در بارگذاری زمان';
            }

            // (Optional) Fetch humidity if available
            // const humidityResponse = await fetch('/api/humidity');
            // if (humidityResponse.ok) {
            //     const humidity = await humidityResponse.text();
            //     humiditySpan.innerText = humidity;
            // } else {
            //     humiditySpan.innerText = 'خطا در بارگذاری رطوبت';
            // }

        } catch (error) {
            console.error('Error fetching data:', error);
            temperatureSpan.innerText = 'خطای اتصال';
            serverTimeSpan.innerText = 'خطای اتصال';
        }
    }

    // Function to get initial LED state (if implemented on server)
    async function getLedState() {
        try {
            const response = await fetch('/api/led/status'); // Assuming an API to get status
            if (response.ok) {
                const status = await response.text();
                ledState = status.trim().toLowerCase();
                ledStatusSpan.innerText = ledState === 'on' ? 'روشن' : 'خاموش';
            } else {
                console.error('Failed to fetch LED status');
                ledStatusSpan.innerText = 'نامشخص (خطا)';
            }
        } catch (error) {
            console.error('Error fetching LED status:', error);
            ledStatusSpan.innerText = 'نامشخص (خطا)';
        }
    }

    // Toggle LED button click handler
    toggleLedBtn.addEventListener('click', async () => {
        const newState = ledState === 'on' ? 'off' : 'on';
        try {
            const response = await fetch(`/api/led/${newState}`);
            if (response.ok) {
                ledState = newState;
                ledStatusSpan.innerText = ledState === 'on' ? 'روشن' : 'خاموش';
                console.log(`LED set to ${newState}`);
            } else {
                console.error('Failed to toggle LED');
            }
        } catch (error) {
            console.error('Error toggling LED:', error);
        }
    });

    // Handle Wi-Fi configuration form submission
    wifiConfigForm.addEventListener('submit', async (event) => {
        event.preventDefault(); // Prevent default form submission

        const ssid = document.getElementById('ssid-input').value;
        const password = document.getElementById('password-input').value;

        // Basic validation
        if (!ssid) {
            wifiStatusP.innerText = 'SSID نمی‌تواند خالی باشد!';
            wifiStatusP.style.color = 'red';
            return;
        }

        const formData = new FormData();
        formData.append('ssid', ssid);
        formData.append('password', password);

        try {
            const response = await fetch('/api/wifi/config', {
                method: 'POST',
                body: formData // For simple key-value pairs
                // Or JSON.stringify({ ssid, password }), headers: { 'Content-Type': 'application/json' }
            });

            if (response.ok) {
                const result = await response.text();
                wifiStatusP.innerText = 'تنظیمات Wi-Fi با موفقیت ذخیره شد: ' + result;
                wifiStatusP.style.color = 'green';
                alert('دستگاه ریستارت می‌شود تا تنظیمات جدید اعمال شود.');
                // Optionally trigger a device reboot on the MicroPython side
                // await fetch('/api/reboot', { method: 'POST' });
            } else {
                const errorText = await response.text();
                wifiStatusP.innerText = 'خطا در ذخیره تنظیمات Wi-Fi: ' + errorText;
                wifiStatusP.style.color = 'red';
            }
        } catch (error) {
            console.error('Error submitting Wi-Fi config:', error);
            wifiStatusP.innerText = 'خطای شبکه در ارسال تنظیمات Wi-Fi';
            wifiStatusP.style.color = 'red';
        }
    });

    // Initial data fetch and LED state
    fetchData();
    getLedState(); 

    // Refresh data every 5 seconds
    setInterval(fetchData, 5000);
});

توضیحات:

• DOMContentLoaded: اطمینان حاصل می‌کند که کد JavaScript پس از بارگذاری کامل HTML اجرا می‌شود.
• استفاده از fetch() API برای برقراری درخواست‌های HTTP Asynchronous (AJAX) به سرور میکروپایتون. این رویکرد غیرمسدودکننده (non-blocking) است و رابط کاربری در حین دریافت داده‌ها منجمد نمی‌شود.
• توابع fetchData() برای بازیابی داده‌های سنسور و زمان از APIهای میکروپایتون و به‌روزرسانی عناصر HTML.
• مدیریت رویداد click برای دکمه LED و ارسال درخواست fetch به API مربوطه برای تغییر وضعیت LED.
• مدیریت رویداد submit برای فرم تنظیمات Wi-Fi و ارسال داده‌ها به سرور با متد POST.
• استفاده از setInterval() برای به‌روزرسانی دوره‌ای داده‌ها (مثلاً هر ۵ ثانیه).
• مدیریت خطاهای پایه با try...catch.

با این ترکیب از HTML، CSS و JavaScript، یک Web UI ساده و عملکردی برای پروژه‌های میکروپایتون خود خواهید داشت که با منابع محدود میکروکنترلر نیز سازگار است. به یاد داشته باشید که همیشه هدف، سادگی و کارایی باشد.

برقراری ارتباطات پیشرفته: WebSockets برای تعامل بلادرنگ

در بسیاری از موارد، تعامل با Web UI نیازمند به‌روزرسانی‌های بلادرنگ (Real-time) و دوطرفه است. به عنوان مثال، نمایش لحظه‌ای داده‌های سنسور، وضعیت کلیدها یا پیام‌های خطا. روش سنتی AJAX (درخواست‌های مکرر HTTP GET) برای این منظور کارآمد نیست، زیرا هر درخواست شامل سربار (overhead) هدرهای HTTP است و ممکن است تأخیر ایجاد کند. در اینجا، WebSockets وارد عمل می‌شود.

WebSockets چیست؟

WebSockets یک پروتکل ارتباطی است که امکان یک کانال ارتباطی تمام‌دوطرفه (Full-duplex) و پایدار را بین مرورگر کلاینت و سرور فراهم می‌کند. برخلاف HTTP که یک پروتکل مبتنی بر درخواست/پاسخ (request/response) است و هر درخواست یک اتصال جدید باز و بسته می‌کند، WebSockets پس از یک handshake اولیه، یک اتصال واحد و مداوم را باز نگه می‌دارد. این اتصال باز اجازه می‌دهد تا سرور به صورت فعال (push) داده‌ها را به کلاینت ارسال کند و کلاینت نیز می‌تواند هر زمان که لازم باشد، داده‌ها را به سرور ارسال کند.

چرا WebSockets برای میکروپایتون؟

1. کاهش سربار: پس از handshake اولیه، فریم‌های داده WebSockets بسیار کوچک‌تر از درخواست‌ها و پاسخ‌های HTTP هستند که باعث کاهش قابل توجه ترافیک شبکه می‌شود.
2. کاهش تأخیر: حذف نیاز به باز و بسته کردن مداوم اتصالات، تأخیر را به حداقل می‌رساند. داده‌ها تقریباً بلافاصله پس از تولید به کلاینت می‌رسند.
3. ارتباط دوطرفه: امکان ارسال و دریافت داده به صورت همزمان، که برای سناریوهای کنترلی و مانیتورینگ بلادرنگ حیاتی است.
4. کارایی بالا در میکروکنترلرها: با وجود محدودیت منابع، ماژول‌های WebSockets در میکروپایتون به گونه‌ای بهینه شده‌اند که می‌توانند ارتباطات بلادرنگ را به خوبی مدیریت کنند.

پیاده‌سازی WebSockets در میکروپایتون (مثال با MicroWebSrv2 یا یک پیاده‌سازی ساده)

فریمورک‌هایی مانند MicroWebSrv2 به صورت بومی از WebSockets پشتیبانی می‌کنند. برای فریمورک‌هایی مانند Microdot یا حتی پیاده‌سازی‌های مبتنی بر usocket، باید یک لایه پروتکل WebSocket را به صورت دستی یا با استفاده از یک کتابخانه شخص ثالث (مانند micropython-ws) اضافه کرد.

مثال با MicroWebSrv2 (conceptual):

# main.py for MicroWebSrv2 WebSocket example
from micro_websrv2 import MicroWebSrv2
import _thread
import time
import json
import machine

# Shared data or resources
sensor_data = {"temperature": 25.0, "humidity": 60.0}
led_state = False
clients = [] # List to hold connected WebSocket clients

# Function to simulate sensor reading
def read_sensors():
    global sensor_data
    # Simulate reading from actual sensors
    sensor_data["temperature"] = round(20 + (time.time() % 10) / 2, 2)
    sensor_data["humidity"] = round(50 + (time.time() % 15) / 3, 2)

# WebSocket handler
def ws_handler(webSocket, httpClient):
    print("WebSocket client connected:", httpClient.Get""" + """RemoteAddress())
    clients.append(webSocket)

    def on_text_recv(webSocket, msg):
        global led_state
        print("WS Received TEXT: %s" % msg)
        try:
            data = json.loads(msg)
            if data.get("action") == "toggle_led":
                led_state = not led_state
                machine.Pin(2, machine.Pin.OUT).value(led_state)
                # Broadcast new LED state to all clients
                broadcast_message({"type": "led_state", "state": "on" if led_state else "off"})
        except ValueError:
            print("Invalid JSON received")

    def on_bin_recv(webSocket, msg):
        print("WS Received BINARY: %s" % msg)

    def on_closed(webSocket):
        print("WebSocket client closed")
        if webSocket in clients:
            clients.remove(webSocket)

    webSocket.OnTextRecv += on_text_recv
    webSocket.OnBinaryRecv += on_bin_recv
    webSocket.OnClosed += on_closed

    # Send initial data to new client
    webSocket.SendText(json.dumps({"type": "sensor_data", "data": sensor_data}))
    webSocket.SendText(json.dumps({"type": "led_state", "state": "on" if led_state else "off"}))

# Function to broadcast messages to all connected clients
def broadcast_message(message):
    for client in clients:
        try:
            client.SendText(json.dumps(message))
        except Exception as e:
            print(f"Error sending to client: {e}")
            # Optionally remove client if send fails

# Background thread for sensor reading and broadcasting
def sensor_thread():
    while True:
        read_sensors()
        # Broadcast sensor data periodically
        if clients: # Only broadcast if there are connected clients
            broadcast_message({"type": "sensor_data", "data": sensor_data})
        time.sleep(2) # Update every 2 seconds

# Main program setup
def main():
    # Connect to Wi-Fi (using connect_wifi function from previous section)
    # ip_address = connect_wifi('YOUR_SSID', 'YOUR_PASSWORD')
    # if not ip_address:
    #     print("Failed to connect to WiFi")
    #     return

    # Start MicroWebSrv2
    mws2 = MicroWebSrv2()
    mws2.BindAddress = ('0.0.0.0', 80)

    # Route for static files (HTML, CSS, JS)
    mws2.AddRoute("/", "GET", lambda httpClient, routeArgs: httpClient.SendFile('index.html'))
    mws2.AddRoute("/style.css", "GET", lambda httpClient, routeArgs: httpClient.SendFile('style.css'))
    mws2.AddRoute("/script.js", "GET", lambda httpClient, routeArgs: httpClient.SendFile('script.js'))
    
    # WebSocket route
    mws2.Set=-WebSocketHandler("/ws", ws_handler) # This part might vary slightly based on actual MWS2 API

    print("Starting MicroWebSrv2...")
    _thread.start_new_thread(sensor_thread, ()) # Start sensor thread in background
    mws2.StartManaged() # Start the server
    print("MicroWebSrv2 started.")

if __name__ == '__main__':
    main()

پیاده‌سازی سمت کلاینت (JavaScript برای WebSockets):

در سمت مرورگر، از API استاندارد WebSocket جاوااسکریپت برای اتصال و تعامل استفاده می‌کنیم.

// Inside script.js, after DOMContentLoaded event
const ws = new WebSocket('ws://' + window.location.host + '/ws'); // Connect to WebSocket endpoint

ws.onopen = (event) => {
    console.log('WebSocket connection opened:', event);
    // You can send initial messages to the server here if needed
    // ws.send(JSON.stringify({ action: 'get_initial_state' }));
};

ws.onmessage = (event) => {
    console.log('WebSocket message received:', event.data);
    try {
        const message = JSON.parse(event.data);
        if (message.type === 'sensor_data') {
            temperatureSpan.innerText = message.data.temperature + ' °C';
            humiditySpan.innerText = message.data.humidity + ' %';
        } else if (message.type === 'led_state') {
            ledState = message.state;
            ledStatusSpan.innerText = ledState === 'on' ? 'روشن' : 'خاموش';
        }
        // Add more message types as needed
    } catch (error) {
        console.error('Error parsing WebSocket message:', error);
    }
};

ws.onclose = (event) => {
    console.log('WebSocket connection closed:', event);
    // Attempt to reconnect after a delay
    setTimeout(() => {
        console.log('Attempting to reconnect WebSocket...');
        // location.reload(); // Or re-initialize WebSocket
    }, 5000);
};

ws.onerror = (event) => {
    console.error('WebSocket error:', event);
};

// Modify toggle LED button to use WebSocket
toggleLedBtn.addEventListener('click', () => {
    const action = {
        action: 'toggle_led'
    };
    if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(action));
    } else {
        alert('WebSocket is not connected. Please refresh.');
    }
});

// Remove setInterval(fetchData, 5000); as data is pushed via WS
// Keep initial fetchData() for fallback or initial sync if WS fails
fetchData(); // Initial data fetch
// No setInterval anymore for sensor data if using WebSockets

ملاحظات و بهترین شیوه‌ها:

1. مدیریت اتصال: در سمت کلاینت، باید مکانیزمی برای مدیریت قطع شدن اتصال WebSocket و تلاش برای اتصال مجدد (reconnection) داشته باشید.
2. پروتکل پیام: برای ارسال و دریافت داده‌ها از طریق WebSocket، یک پروتکل پیام‌رسانی مشخص (مثلاً JSON) را تعریف کنید تا سرور و کلاینت بتوانند پیام‌ها را به درستی تفسیر کنند.
3. منابع: حتی WebSockets نیز مصرف RAM و CPU دارند. تعداد اتصالات همزمان را محدود کنید و از ارسال داده‌های حجیم یا مکرر بیش از حد خودداری کنید.
4. امنیت: در محیط‌های تولید، حتماً از Secure WebSockets (WSS) استفاده کنید که نیازمند SSL/TLS است. پیاده‌سازی SSL/TLS در میکروپایتون با محدودیت‌های سخت‌افزاری چالش‌برانگیز است، اما برای امنیت در شبکه‌های باز ضروری است.
5. Multithreading (چندین رشته): در ESP32، می‌توانید از _thread ماژول برای اجرای وظایف سنگین (مانند خواندن سنسور) در یک رشته جداگانه استفاده کنید تا سرور وب مسدود نشود. ESP8266 از _thread پشتیبانی نمی‌کند، بنابراین باید از رویکردهای غیرمسدودکننده (non-blocking) مانند asyncio استفاده کنید.

با استفاده از WebSockets، می‌توانید یک Web UI بسیار پاسخگو و تعاملی برای پروژه‌های میکروپایتون خود ایجاد کنید که تجربه کاربری را به طور قابل توجهی بهبود می‌بخشد.

بهینه‌سازی و بهترین شیوه‌ها برای Web UI در میکروپایتون

توسعه یک Web UI برای میکروپایتون همواره با محدودیت منابع سخت‌افزاری همراه است. بنابراین، بهینه‌سازی و رعایت بهترین شیوه‌ها برای اطمینان از عملکرد پایدار، پاسخگویی سریع و استفاده کارآمد از منابع حیاتی است. در این بخش، به چندین جنبه کلیدی بهینه‌سازی می‌پردازیم.

۱. مدیریت حافظه (Memory Management)

میکروکنترلرها، به ویژه ESP8266 و برخی بردهای ESP32، RAM بسیار محدودی (اغلب در حدود 50KB تا 200KB) دارند. خطاهای MemoryError یکی از رایج‌ترین چالش‌ها در میکروپایتون است.

• استفاده از gc.collect(): ماژول gc (Garbage Collector) را می‌توان برای پاکسازی دستی حافظه در نقاط کلیدی برنامه فراخوانی کرد، به خصوص پس از عملیات‌های حافظه-بر مانند پردازش رشته‌های بزرگ یا ایجاد اشیاء زیاد.
• رشته‌های بهینه: در صورت امکان، از رشته‌های بسیار طولانی یا بزرگ خودداری کنید. اگر نیاز به سرو کردن فایل‌های HTML یا JSON بزرگ دارید، سعی کنید آن‌ها را به صورت تکه‌تکه (chunk by chunk) ارسال کنید.
• اجتناب از کتابخانه‌های حجیم: از وارد کردن (import) کتابخانه‌هایی که استفاده نمی‌کنید یا دارای وابستگی‌های زیادی هستند، پرهیز کنید. بسیاری از ماژول‌های پایتون استاندارد در میکروپایتون با پیشوند u (مانند urequests، usocket) پیاده‌سازی‌های سبک‌تری دارند.
• کاهش حجم فایل‌های استاتیک:
  • Minification: فایل‌های HTML, CSS و JavaScript را قبل از آپلود روی میکروکنترلر کوچک‌سازی (minify) کنید. این کار شامل حذف فاصله‌های اضافی، خطوط جدید و کامنت‌ها است. ابزارهای آنلاین و آفلاین زیادی برای این کار وجود دارد.
  • فشرده‌سازی (GZIP): در برخی موارد، می‌توانید فایل‌های استاتیک را به صورت GZIP فشرده کرده و آن‌ها را به همین شکل روی فلش ذخیره کنید. سرور وب میکروپایتون می‌تواند هدر Content-Encoding: gzip را ارسال کند و مرورگر کلاینت آن را بازگشایی کند. این کار حجم انتقال داده را کاهش می‌دهد، اما سربار CPU بیشتری در سمت میکروکنترلر و مرورگر ایجاد می‌کند.
  • بهینه‌سازی تصاویر: اگر از تصاویر استفاده می‌کنید، از فرمت‌های بهینه شده (مانند WebP) و اندازه‌های کوچک استفاده کنید. برای Web UIهای ساده، معمولاً نیازی به تصویر نیست.
• عدم ذخیره‌سازی غیرضروری: از ذخیره کردن داده‌های موقت یا بزرگ در RAM خودداری کنید، مگر اینکه ضروری باشد.

۲. کارایی و پاسخگویی (Performance & Responsiveness)

یک Web UI کارآمد باید به سرعت بارگذاری شود و به تعاملات کاربر به موقع پاسخ دهد.

• Asyncio: برای مدیریت درخواست‌های شبکه و وظایف همزمان، از ماژول asyncio میکروپایتون استفاده کنید. این مدل برنامه‌نویسی غیرمسدودکننده (non-blocking) به سرور شما اجازه می‌دهد تا بدون توقف کامل برای یک عملیات (مانند خواندن سنسور یا انتظار برای داده‌های شبکه)، چندین کار را به ظاهر همزمان انجام دهد. فریمورک‌هایی مانند Picoweb به صورت داخلی از asyncio استفاده می‌کنند.
• کاشینگ در مرورگر (Browser Caching): از هدرهای HTTP Cache-Control استفاده کنید تا مرورگر کلاینت فایل‌های استاتیک (CSS, JS) را کش (Cache) کند. این کار باعث می‌شود در درخواست‌های بعدی، مرورگر نیازی به دانلود مجدد این فایل‌ها از میکروکنترلر نداشته باشد و سرعت بارگذاری را به شدت افزایش دهد.
• ارتباطات API سبک: داده‌های تبادلی بین UI و سرور را تا حد امکان کوچک نگه دارید. از JSON برای فرمت‌بندی داده‌ها استفاده کنید، اما فقط فیلدهای ضروری را ارسال کنید.
• به‌روزرسانی‌های هوشمند UI: در سمت کلاینت (JavaScript)، تنها بخش‌هایی از DOM را که تغییر کرده‌اند، به‌روزرسانی کنید. از بازسازی کامل صفحه (full page reload) خودداری کنید.

۳. امنیت (Security)

هر دستگاه متصل به شبکه باید تدابیر امنیتی اولیه را داشته باشد.

• رمز عبور Wi-Fi قوی: اگر دستگاه در حالت AP راه‌اندازی می‌شود، یک رمز عبور قوی برای Wi-Fi خود تنظیم کنید.
• احراز هویت (Authentication): برای دسترسی به Web UI یا APIها، مکانیزمی برای احراز هویت (مثلاً نام کاربری و رمز عبور) پیاده‌سازی کنید. این می‌تواند به سادگی یک Basic Authentication باشد.
• اعتبارسنجی ورودی (Input Validation): تمام ورودی‌های دریافتی از کلاینت را اعتبارسنجی کنید تا از حملات تزریق (Injection Attacks) یا داده‌های مخرب جلوگیری شود.
• SSL/TLS (HTTPS/WSS): برای محافظت از ارتباطات در برابر استراق سمع، در صورت امکان از SSL/TLS استفاده کنید. این کار در میکروپایتون نیازمند منابع پردازشی و حافظه قابل توجهی است و ممکن است برای همه دستگاه‌ها مناسب نباشد. اما اگر دستگاه در شبکه‌های عمومی قرار می‌گیرد، ضروری است.
• محدود کردن دسترسی: فقط APIهای مورد نیاز را در معرض دید قرار دهید. از قرار دادن توابع مدیریتی حساس بدون احراز هویت قوی خودداری کنید.

۴. اشکال‌زدایی (Debugging)

اشکال‌زدایی در محیط میکروکنترلر می‌تواند چالش‌برانگیز باشد.

• پرینت‌های دیباگ: از دستور print() به صورت هوشمندانه برای نمایش وضعیت متغیرها و جریان برنامه استفاده کنید. پس از اتمام توسعه، این پرینت‌ها را حذف یا غیرفعال کنید.
• ابزارهای توسعه مرورگر: برای اشکال‌زدایی سمت کلاینت (HTML, CSS, JavaScript)، از ابزارهای توسعه مرورگر (Developer Tools) استفاده کنید.
• پایانه سریال (Serial Terminal): خروجی سریال میکروکنترلر را همواره زیر نظر داشته باشید تا خطاها و پیام‌های دیباگ را مشاهده کنید.
• استفاده از فایل log: در صورت نیاز، پیام‌های خطا و مهم را در یک فایل روی فلش ذخیره کنید تا بعداً بتوانید آن‌ها را بررسی کنید.

۵. به‌روزرسانی Firmware Over-the-Air (OTA)

توانایی به‌روزرسانی کد میکروپایتون از راه دور (بدون نیاز به اتصال فیزیکی) برای دستگاه‌های مستقر شده حیاتی است.

• ماژول upip: برای نصب و به‌روزرسانی کتابخانه‌های پایتون.
• راهکارهای سفارشی OTA: برای به‌روزرسانی کل فایل‌های پروژه (شامل main.py و فایل‌های UI) می‌توانید یک مکانیزم OTA سفارشی پیاده‌سازی کنید که کد را از یک سرور خارجی دانلود کرده و روی میکروکنترلر فلاش کند. کتابخانه‌هایی مانند micropython-ota-updater نیز موجود هستند.

با رعایت این بهترین شیوه‌ها، می‌توانید یک Web UI پایدار، امن و کارآمد برای پروژه‌های میکروپایتون خود ایجاد کنید که حتی با منابع محدود نیز به خوبی عمل می‌کند.

نمونه عملی: ساخت داشبورد کنترل سنسور و GPIO

برای تثبیت مفاهیم بحث شده، یک سناریوی عملی رایج را بررسی می‌کنیم: ساخت یک داشبورد ساده برای نظارت بر داده‌های سنسور دما و رطوبت و کنترل یک LED متصل به GPIO. این داشبورد با رویکرد Embedded پیاده‌سازی می‌شود و از Microdot برای سمت سرور و HTML/CSS/JavaScript خالص برای سمت کلاینت استفاده می‌کند.

اهداف پروژه:

1. اتصال ESP32/ESP8266 به شبکه Wi-Fi در حالت STA.
2. راه‌اندازی یک سرور وب Microdot.
3. سرو کردن فایل‌های index.html، style.css و script.js.
4. ایجاد API برای خواندن داده‌های سنسور دما و رطوبت.
5. ایجاد API برای کنترل وضعیت یک LED (روشن/خاموش).
6. نمایش داده‌های سنسور و وضعیت LED در رابط کاربری.
7. دکمه‌ای در UI برای تغییر وضعیت LED.
8. به‌روزرسانی خودکار داده‌ها در UI.

سخت‌افزار مورد نیاز:

• برد ESP32 یا ESP8266 (مثلاً NodeMCU, ESP32 DevKitC)
• سنسور DHT11 یا DHT22 (برای دما و رطوبت)
• یک LED و یک مقاومت ۲۲۰ اهم
• کابل USB برای اتصال و آپلود کد

اتصالات سخت‌افزاری (مثال برای ESP32):

• DHT11/DHT22: پایه داده (Data Pin) سنسور را به GPIO 4 ESP32 وصل کنید.
• LED: پایه مثبت (Anode) LED را از طریق مقاومت ۲۲۰ اهم به GPIO 2 ESP32 و پایه منفی (Cathode) را به GND وصل کنید. (LED داخلی ESP32 معمولاً روی GPIO 2 است، پس ممکن است نیازی به LED خارجی نباشد).

کد میکروپایتون (main.py):

# main.py
import network
import time
from microdot import Microdot, send_file
import machine
import dht # Make sure you have the dht.py module on your board

# --- Wi-Fi Setup ---
WIFI_SSID = 'YOUR_WIFI_SSID' # Replace with your Wi-Fi SSID
WIFI_PASSWORD = 'YOUR_WIFI_PASSWORD' # Replace with your Wi-Fi Password

def connect_wifi(ssid, password):
    sta_if = network.WLAN(network.STA_IF)
    if not sta_if.isconnected():
        print('Connecting to network...')
        sta_if.active(True)
        sta_if.connect(ssid, password)
        for i in range(10):
            if sta_if.isconnected():
                print(f"Attempt {i+1}: Waiting for Wi-Fi connection...")
                break
            time.sleep(1)
        else:
            print("Failed to connect to WiFi")
            return None
    print('Network config:', sta_if.ifconfig())
    return sta_if.ifconfig()[0]

# --- Hardware Setup ---
dht_sensor = dht.DHT11(machine.Pin(4)) # DHT11 on GPIO 4, use dht.DHT22 for DHT22
led = machine.Pin(2, machine.Pin.OUT) # Built-in LED on ESP32 is usually GPIO 2

# --- Microdot Server Setup ---
app = Microdot()

# --- Routes for static files ---
@app.route('/')
def index(request):
    return send_file('index.html')

@app.route('/style.css')
def style(request):
    return send_file('style.css', content_type='text/css')

@app.route('/script.js')
def script(request):
    return send_file('script.js', content_type='application/javascript')

# --- API Endpoints ---
@app.route('/api/sensor_data')
def get_sensor_data(request):
    try:
        dht_sensor.measure()
        temp = dht_sensor.temperature()
        hum = dht_sensor.humidity()
        return {'temperature': temp, 'humidity': hum}, 200, {'Content-Type': 'application/json'}
    except Exception as e:
        print("Error reading DHT sensor:", e)
        return {'error': 'Failed to read sensor'}, 500, {'Content-Type': 'application/json'}

@app.route('/api/led/status')
def get_led_status(request):
    return {'state': 'on' if led.value() else 'off'}, 200, {'Content-Type': 'application/json'}

@app.route('/api/led/')
def control_led(request, state):
    if state == 'on':
        led.value(1)
        return {'message': 'LED is ON'}, 200, {'Content-Type': 'application/json'}
    elif state == 'off':
        led.value(0)
        return {'message': 'LED is OFF'}, 200, {'Content-Type': 'application/json'}
    return {'error': 'Invalid LED state'}, 400, {'Content-Type': 'application/json'}

@app.route('/api/time')
def get_time(request):
    current_time = utime.localtime()
    time_str = "{:02d}:{:02d}:{:02d}".format(current_time[3], current_time[4], current_time[5])
    return {'time': time_str}, 200, {'Content-Type': 'application/json'}


# --- Main Application Start ---
if __name__ == '__main__':
    print("Starting MicroPython Web UI...")
    
    ip_address = connect_wifi(WIFI_SSID, WIFI_PASSWORD)
    if ip_address:
        print(f"Microdot server running on http://{ip_address}")
        try:
            app.run(port=80, debug=True)
        except KeyboardInterrupt:
            pass # Handle Ctrl+C gracefully
        except Exception as e:
            print(f"Server error: {e}")
    else:
        print("Could not connect to WiFi. Please check credentials or try AP mode.")

فایل‌های سمت کلاینت:

index.html: (تقریباً مشابه مثال قبل، با به‌روزرسانی برای فیلد رطوبت و نمایش JSON)

    
    
    
    


    

        
داشبورد کنترل ESP32

        

            
داده‌های سنسور
            
دما: در حال بارگذاری...
            
رطوبت: در حال بارگذاری...
            
زمان سرور: در حال بارگذاری...
        

        

            
کنترل LED
            

                وضعیت LED:
                نامشخص
            
            تغییر وضعیت LED
        
    

    

style.css: (همانند مثال قبل)

/* (Content of style.css as provided in previous section) */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 20px;
    direction: rtl; 
    text-align: right; 
}

.container {
    max-width: 800px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    color: #333;
}

.card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.card h2 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #555;
}

.btn {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.btn:hover {
    background-color: #0056b3;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

form input[type="text"],
form input[type="password"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .container {
        margin: 10px auto;
        padding: 15px;
    }
}

script.js: (با به‌روزرسانی برای APIهای جدید و پردازش JSON)

document.addEventListener('DOMContentLoaded', () => {
    const temperatureSpan = document.getElementById('temperature');
    const humiditySpan = document = document.getElementById('humidity');
    const serverTimeSpan = document.getElementById('server-time');
    const toggleLedBtn = document.getElementById('toggle-led-btn');
    const ledStatusSpan = document.getElementById('led-status');

    let ledState = 'off'; // Keep track of LED state client-side

    // Function to fetch and update sensor data and time
    async function fetchData() {
        try {
            // Fetch sensor data
            const sensorResponse = await fetch('/api/sensor_data');
            if (sensorResponse.ok) {
                const data = await sensorResponse.json();
                temperatureSpan.innerText = data.temperature + ' °C';
                humiditySpan.innerText = data.humidity + ' %';
            } else {
                temperatureSpan.innerText = 'خطا در بارگذاری دما';
                humiditySpan.innerText = 'خطا در بارگذاری رطوبت';
            }

            // Fetch server time
            const timeResponse = await fetch('/api/time');
            if (timeResponse.ok) {
                const data = await timeResponse.json();
                serverTimeSpan.innerText = data.time;
            } else {
                serverTimeSpan.innerText = 'خطا در بارگذاری زمان';
            }
        } catch (error) {
            console.error('Error fetching data:', error);
            temperatureSpan.innerText = 'خطای اتصال';
            humiditySpan.innerText = 'خطای اتصال';
            serverTimeSpan.innerText = 'خطای اتصال';
        }
    }

    // Function to get initial LED state
    async function getLedState() {
        try {
            const response = await fetch('/api/led/status');
            if (response.ok) {
                const data = await response.json();
                ledState = data.state;
                ledStatusSpan.innerText = ledState === 'on' ? 'روشن' : 'خاموش';
            } else {
                console.error('Failed to fetch LED status');
                ledStatusSpan.innerText = 'نامشخص (خطا)';
            }
        } catch (error) {
            console.error('Error fetching LED status:', error);
            ledStatusSpan.innerText = 'نامشخص (خطا)';
        }
    }

    // Toggle LED button click handler
    toggleLedBtn.addEventListener('click', async () => {
        const newState = ledState === 'on' ? 'off' : 'on';
        try {
            const response = await fetch(`/api/led/${newState}`);
            if (response.ok) {
                const data = await response.json();
                console.log(data.message);
                ledState = newState; // Update client-side state
                ledStatusSpan.innerText = ledState === 'on' ? 'روشن' : 'خاموش';
            } else {
                console.error('Failed to toggle LED');
            }
        } catch (error) {
            console.error('Error toggling LED:', error);
        }
    });

    // Initial data fetch and LED state
    fetchData();
    getLedState(); 

    // Refresh data every 5 seconds
    setInterval(fetchData, 5000);
});

مراحل آپلود و اجرا:

1. کتابخانه microdot و dht.py را روی برد ESP خود آپلود کنید. (می‌توانید از ابزارهایی مانند ampy یا mpremote استفاده کنید.)
2. فایل‌های main.py، index.html، style.css و script.js را نیز روی برد آپلود کنید. اطمینان حاصل کنید که همه فایل‌ها در دایرکتوری ریشه (root directory) سیستم فایل میکروپایتون قرار دارند.
3. اطمینان حاصل کنید که SSID و رمز عبور Wi-Fi در main.py صحیح هستند.
4. برد را ریستارت کنید.
5. پس از اتصال برد به Wi-Fi (آدرس IP در خروجی سریال نمایش داده می‌شود)، آن آدرس IP را در مرورگر وب خود وارد کنید.
6. شما باید داشبورد را مشاهده کنید که هر ۵ ثانیه یکبار دما، رطوبت و زمان سرور را به‌روزرسانی می‌کند. می‌توانید با کلیک بر روی دکمه، LED را روشن یا خاموش کنید.

این نمونه یک شروع عالی برای ساخت Web UIهای پیچیده‌تر با میکروپایتون است. با افزودن سنسورهای بیشتر، کنترل‌کننده‌ها و بهبود UI، می‌توانید پروژه‌های IoT بسیار قدرتمندی ایجاد کنید.

چالش‌ها و راهکارهای پیشرفته در Web UI میکروپایتون

پس از تسلط بر اصول ساخت Web UI ساده در میکروپایتون، ممکن است با نیازها یا چالش‌های پیشرفته‌تری مواجه شوید. این بخش به برخی از این موارد و راهکارهای احتمالی می‌پردازد.

۱. مدیریت حجم بالای داده‌ها و فایل‌ها

در پروژه‌های پیچیده‌تر، ممکن است نیاز به سرو کردن فایل‌های استاتیک بیشتری (مانند فونت‌ها، آیکون‌ها) یا مدیریت حجم بیشتری از داده‌های سنسور داشته باشید.

• سیستم فایل بهینه: میکروپایتون از سیستم‌های فایل FAT و LittleFS پشتیبانی می‌کند. LittleFS به دلیل مدیریت بهینه حافظه فلش و مقاومت در برابر قطع برق، معمولاً برای میکروکنترلرها ترجیح داده می‌شود.
• پارتیشن‌بندی حافظه فلش: در ESP32، می‌توانید طرح پارتیشن (partition scheme) را سفارشی‌سازی کنید تا فضای بیشتری را به سیستم فایل و کمتر به فضای کد اختصاص دهید. این کار به شما امکان ذخیره فایل‌های استاتیک حجیم‌تر را می‌دهد.
• Streaming (جریان‌سازی): برای فایل‌های بسیار بزرگ، به جای بارگذاری کل فایل در RAM و سپس ارسال آن، از جریان‌سازی استفاده کنید. این به معنای خواندن فایل در قطعات کوچک و ارسال تدریجی آن‌ها است. بیشتر فریمورک‌های وب MicroPython (مانند send_file در Microdot) این قابلیت را دارند.
• Minimalist Frontend Libraries: اگر به یک فریمورک UI نیاز دارید، به سراغ گزینه‌های بسیار سبک مانند Preact (به جای React) یا Alpine.js بروید که سربار کمی دارند و می‌توانند به صورت مستقیم در مرورگر اجرا شوند.

۲. احراز هویت و مجوزها (Authentication & Authorization)

برای جلوگیری از دسترسی غیرمجاز، نیاز به مکانیزم احراز هویت دارید. برای Web UIهای ساده، راه‌حل‌های زیر می‌توانند کافی باشند:

• Basic Authentication HTTP: ساده‌ترین روش است. نام کاربری و رمز عبور در هدر HTTP ارسال می‌شوند. این روش امن نیست زیرا اطلاعات به صورت plain text (در حالت HTTP) یا Base64 encoded (در حالت HTTPS) ارسال می‌شوند. برای شبکه‌های محلی و غیرحساس می‌تواند استفاده شود.
• Token-based Authentication: پس از ورود موفقیت‌آمیز کاربر، سرور یک توکن (token) تولید کرده و به کلاینت می‌دهد. کلاینت این توکن را در درخواست‌های بعدی به سرور ارسال می‌کند. این توکن می‌تواند دارای زمان انقضا باشد. توکن‌ها را می‌توان در localStorage مرورگر ذخیره کرد.
• CAPTCHA ساده: برای جلوگیری از حملات خودکار، یک CAPTCHA ساده (مانند حل یک مسئله ریاضی) را به فرم ورود اضافه کنید.
• مدیریت کاربران در حافظه فلش: لیست نام کاربری و رمز عبور (hashed) را می‌توانید در یک فایل روی حافظه فلش ذخیره کنید و هنگام ورود کاربر، آن‌ها را بررسی کنید.

۳. مدیریت پیکربندی و ذخیره‌سازی دائمی (Persistent Configuration)

تنظیمات شبکه (SSID/Password)، آستانه‌های سنسور یا سایر پارامترهای مهم باید پس از ریستارت دستگاه نیز حفظ شوند.

• ذخیره‌سازی در فایل: ساده‌ترین راه، ذخیره تنظیمات در یک فایل JSON یا INI روی سیستم فایل میکروپایتون (فلش) است. هنگام بوت شدن دستگاه، این فایل خوانده می‌شود.
• ماژول upersistent: برخی کتابخانه‌های کامیونیتی، مانند upersistent، راهکارهای ساختارمندتری برای ذخیره‌سازی داده‌های پیکربندی ارائه می‌دهند.
• Non-Volatile Storage (NVS) در ESP32: ESP32 دارای یک حافظه NVS است که برای ذخیره‌سازی داده‌های کوچک (کلید-مقدار) به صورت دائمی و مقاوم در برابر قطع برق ایده‌آل است. ماژول esp32.NVS در میکروپایتون این قابلیت را فراهم می‌کند.

۴. مانیتورینگ و لاگ‌برداری (Monitoring & Logging)

برای دیباگ کردن مشکلات در محیط تولید، نیاز به لاگ‌ها دارید.

• Logging به فایل: پیام‌های خطا و هشدارها را به جای پرینت در کنسول، در یک فایل لاگ روی حافظه فلش ذخیره کنید. سپس می‌توانید یک API برای خواندن این فایل لاگ از طریق Web UI ایجاد کنید.
• یکپارچه‌سازی با سرویس‌های Cloud (اختیاری): برای پروژه‌های بزرگتر، ممکن است بخواهید لاگ‌ها را به یک سرویس ابری (مانند AWS CloudWatch, Google Cloud Logging) ارسال کنید. این کار نیاز به اتصال اینترنت و پیاده‌سازی پروتکل‌های خاص (مانند MQTT) دارد.

۵. به‌روزرسانی Over-the-Air (OTA) پایدار و امن

به‌روزرسانی کد و فایل‌های وب از راه دور، یک ویژگی ضروری است.

• مکانیزم‌های Pull: دستگاه میکروپایتون می‌تواند به صورت دوره‌ای (یا بر اساس یک رویداد) از یک سرور خارجی درخواست به‌روزرسانی کند.
• Checksum و امضای دیجیتال: برای اطمینان از صحت و عدم دستکاری فایل‌های به‌روزرسانی، از checksum (مانند MD5 یا SHA256) یا امضای دیجیتال استفاده کنید.
• Rollback در صورت شکست: در صورت عدم موفقیت در به‌روزرسانی (مثلاً به دلیل نقص در فایل یا قطع برق)، مکانیزمی برای بازگشت به نسخه قبلی و کارآمد firmware فراهم کنید.

۶. مواجهه با خطاهای شبکه و پایداری

اتصال شبکه در محیط IoT می‌تواند ناپایدار باشد. Web UI باید مقاوم باشد.

• مدیریت خطای سمت کلاینت: در JavaScript، از try...catch در درخواست‌های fetch و WebSocket استفاده کنید. پیام‌های خطای واضح به کاربر نمایش دهید.
• قطع و وصل مجدد Wi-Fi: در صورت قطع شدن Wi-Fi، کد میکروپایتون باید سعی کند به صورت خودکار دوباره متصل شود.
• مکانیزم Watchdog: از Watchdog Timer سخت‌افزاری (machine.WDT) برای ریستارت کردن دستگاه در صورت هنگ کردن استفاده کنید.

با پرداختن به این چالش‌های پیشرفته، می‌توانید Web UIهایی برای پروژه‌های میکروپایتون خود بسازید که نه تنها کاربردی هستند، بلکه پایدار، امن و قابل نگهداری نیز می‌باشند.

نتیجه‌گیری و چشم‌انداز آینده Web UI در میکروپایتون

همانطور که در طول این مقاله مشاهده کردیم، ساخت یک رابط کاربری تحت وب (Web UI) برای پروژه‌های میکروپایتون نه تنها امکان‌پذیر، بلکه با درک صحیح از محدودیت‌ها و استفاده از رویکردهای بهینه، یک راهکار قدرتمند و بسیار کاربردی است. مزایای این رویکرد، از جمله استقلال از پلتفرم، دسترسی‌پذیری آسان، و عدم نیاز به نصب نرم‌افزار اضافی، آن را به گزینه‌ای ایده‌آل برای طیف وسیعی از کاربردهای IoT و کنترل سخت‌افزار تبدیل می‌کند.

ما به تفصیل به چگونگی راه‌اندازی سرورهای وب سبک در میکروپایتون، از پیاده‌سازی‌های پایه با سوکت تا استفاده از فریمورک‌هایی مانند Microdot پرداختیم. سپس، نحوه طراحی و پیاده‌سازی سمت کلاینت با HTML، CSS و JavaScript مینیمال را بررسی کردیم و اهمیت بهینه‌سازی حجم فایل‌ها و کد را مورد تأکید قرار دادیم. همچنین، با معرفی WebSockets، راه را برای تعاملات بلادرنگ و بهبود تجربه کاربری هموار ساختیم و در نهایت، مجموعه‌ای از بهترین شیوه‌ها و راهکارهای پیشرفته برای مدیریت حافظه، افزایش کارایی، تضمین امنیت و به‌روزرسانی OTA را ارائه دادیم.

نمونه عملی داشبورد کنترل سنسور و GPIO، نشان داد که چگونه می‌توان این مفاهیم را در یک پروژه واقعی پیاده‌سازی کرد و یک ابزار کنترلی و نظارتی کارآمد را بر روی یک میکروکنترلر کوچک ایجاد نمود.

چشم‌انداز آینده:

آینده Web UI در میکروپایتون روشن به نظر می‌رسد و به احتمال زیاد شاهد پیشرفت‌های بیشتری در زمینه‌های زیر خواهیم بود:

1. فریمورک‌های سبک‌تر و قدرتمندتر: با افزایش قدرت سخت‌افزاری میکروکنترلرها و بهینه‌سازی‌های مداوم در میکروپایتون، انتظار می‌رود فریمورک‌های وب سبک‌تری با قابلیت‌های بیشتر (مانند ابزارهای قالب‌بندی Template Engine و ORMهای بسیار سبک) ظاهر شوند که توسعه را آسان‌تر کنند.
2. ابزارهای توسعه بهتر: ابزارهایی برای اشکال‌زدایی (debugging) آسان‌تر، مدیریت پروژه‌ها و به‌روزرسانی OTA، به بلوغ بیشتری خواهند رسید و فرآیند توسعه را برای Web UIها ساده‌تر خواهند کرد.
3. امنیت پیشرفته‌تر: با افزایش آگاهی از تهدیدات امنیتی، پیاده‌سازی‌های سبک‌تری برای SSL/TLS و پروتکل‌های احراز هویت قوی‌تر در میکروپایتون توسعه خواهند یافت.
4. پشتیبانی از پروتکل‌های جدید: علاوه بر HTTP و WebSockets، پشتیبانی بهینه از پروتکل‌هایی مانند MQTT (برای IoT با مقیاس بزرگتر) و CoAP (برای شبکه‌های با پهنای باند کم) همچنان در حال تکامل خواهد بود.
5. بهره‌گیری از WebAssembly (Wasm): اگرچه هنوز در مراحل اولیه برای میکروکنترلرهاست، اما WebAssembly می‌تواند پتانسیل اجرای کدهای با کارایی بالا در مرورگر را فراهم کند که می‌تواند به توسعه Web UIهای بسیار پیچیده‌تر و تعاملی‌تر کمک کند.

در نهایت، توانایی ساخت Web UIهای ساده و در عین حال قدرتمند، میکروپایتون را به ابزاری بسیار ارزشمند برای توسعه‌دهندگان IoT و embedded تبدیل کرده است. با رویکرد صحیح، می‌توان از پتانسیل کامل این میکروکنترلرهای کوچک در دنیای بزرگ وب بهره‌برداری کرد.