واجهة ويب حيّة من الرقاقة مباشرة

لماذا صفحة HTML القديمة المبنيّة من نصوص طريق مسدود

يبني السكتش الكلاسيكي الصفحة بلصق HTML في String ضخم ويُعيده مع كل طلب. يعمل لمقياس واحد ثم ينهار: لا تفاعلية (أيّ تغيير يعني إعادة تحميل كاملة)، ولا مكوّنات، والوسم يعيش «حساءَ نصوص» غير مقروء في البرنامج الثابت. لحظة أن تريد رسمًا ثانيًا أو عنصر تحكّم يردّ، تكون قد تجاوزته.

ابنِ SPA حقيقيًّا — ثم احزمه في الفلاش

الخطوة الحديثة أن تبني الواجهة كأيّ تطبيق ويب (Vue أو Svelte أو React أو مجرّد vanilla حديث) بأداة حزم (Vite) تُخرج index.html صغيرًا مُصغّرًا مع JS/CSS. ثم تضع هذه الملفّات في نظام ملفّات فلاش الـ ESP (LittleFS أو SPIFFS) وتقدّمها ملفّاتٍ ثابتة. الرقاقة لا تشغّل إطارًا؛ إنما تسلّم ملفّات جاهزة — فتطبيق Svelte و«العاري» يكلّفان ESP الشيء نفسه.

بيانات حيّة عبر WebSocket، لا استطلاع

التفاعلية في النقل. بدلًا من أن يسأل المتصفّح «هل من جديد؟» على مؤقّت، افتح WebSocket (عبر ESPAsyncWebServer) ودَع الجهاز يدفع لحظة تغيّر القيمة:

loop():   read sensor   →   ws push {temp: 24.1}     // send, don't be polled
browser:  ws.onmessage  →   gauge.value = 24.1        // update in place, no reload

مقبس واحد يحمل بيانات كلّ عنصر في إطارات JSON صغيرة؛ والصفحة تتبدّل في مكانها. هذا ما يجعل اللوحة المُقدَّمة تطبيقًا لا وثيقة — وبالمثل يتفاعل وجه الوكيل حيًّا.

راقب الذاكرة — قدّم من الفلاش، gzip، وبثّ

الفخّ أن تُبقي الكبير في الذاكرة. الـ SPA المبنيّ عشرات الكيلوبايتات — لا تقرأه في String. خزّن الأصول مضغوطة gzip في الفلاش وبثّها بترويسة Content-Encoding: gzip، فيصغُر التخزين والنقل معًا. أبقِ الكتل الثابتة الكبيرة في PROGMEM، وأرسل على دفعات، وحرّر المخازن مبكّرًا — انظر كيف تعمل ذاكرة ESP32. إذا أُحسن الأمر، لا تكاد واجهة غنيّة تمسّ الكومة.

أو لا تكتب أيًّا من ذلك يدويًّا

كلّ ما سبق — أداة الحزم، الرفع إلى نظام الملفّات، بروتوكول WebSocket، انضباط الذاكرة — عملٌ حقيقيّ يمكنك تخطّيه. RisalDash يولّد الواجهة كاملة (HTML وCSS وJS وتوصيل WebSocket) من أسطر C++ قليلة: تصف العناصر، وتربط المتغيّرات، فتُقدَّم لك اللوحة التفاعلية. كما تحذف واجهة Zero-Waste العناصر التي لا تستعملها، فلا تدفع إلّا لما على الشاشة.

قرار في 30 ثانية

القاعدة: قراءة واحدة → صفحة نصّية تكفي؛ واجهة منتج مخصّصة → ابنِ الـ SPA وامتلكه؛ لوحة حقيقية بلا سباكة → دعها تُولَّد وحدها.