لقد صنعت لعائلتي تطبيقًا لجدول رحلة إلى اليابان يحتوي على ذكاء اصطناعي.

ذهبت عائلتي في رحلة إلى اليابان، وأردت أن يكون لدى الجميع خطة الرحلة معهم دائمًا — كل يوم مخطط له، خرائط يمكن الوصول إليها بلمسة واحدة، توقعات الطقس، بالإضافة إلى التفاصيل الصغيرة التي يسهل نسيانها عندما تكون في حالة إرهاق من السفر داخل محطة قطار. لذا طورت تطبيق ويب صغير خصيصًا لنا: جدول رحلات خاص ومحمي برمز PIN يحتوي على جدول يومي، توقعات طقس مباشرة، دعم للعمل دون اتصال بالإنترنت، وبما أنني أنا من صنعه — فهو يضم أيضًا مساعد ذكاء اصطناعي يمكنه الإجابة على أسئلة حول الرحلة بل وحتى إجراء تعديلات بسيطة.

هذه هي القصة الحقيقية للتطوير: الأجزاء التي عملت، والأجزاء التي تعطلت بطرق لم أتوقعها، وكيف تحول ملف التصميم الهش إلى شيء شعرت بالراحة عند نشره على الويب. في الأسفل تجد نموذجًا معدلاً يمكنك تنزيله وفتحه في أي متصفح.

البداية: صندوق أسود رائع

صممت التصميم باستخدام أداة تصميم ذكية وقمت بتصديره. النتيجة كانت ملف HTML واحد مستقل — تطبيق React كامل يحتوي على الخطوط والصور داخله — بحجم 14 ميجابايت في ملف واحد. كان شكله رائعًا وعمل من أول محاولة فتح.

لكنه كان صندوقًا أسودًا. التطبيق بأكمله، بعد التضييق، كان موجودًا في كتلة نصية واحدة ضخمة، وكان الجدول الزمني مخفياً داخلها. تعديل الرحلة يدويًا كان يعني إجراء تغييرات معقدة على كود تم إنشاؤه آليًا. هذا مقبول مرة واحدة؛ لكنه كابوس في كل مرة تتغير فيها الخطط — وفي رحلة عائلية، تتغير الخطط يوميًا.

لذا كان القرار الأول هو: التوقف عن تعديل الملف المصدر.

الفكرة الوحيدة التي جعلت كل شيء ممكنًا

بدلاً من التعامل مع ملف الـ 14 ميجابايت، نقلت الجدول الزمني بالكامل إلى ملف بيانات صغير وقابل للقراءة — ملف content.json يحتوي على الأيام والمواقع وتفاصيل الطقس وصور المواقع وتكاليفها. ثم تقوم خطوة بناء قصيرة بقراءة هذا الملف وإعادة توليد التطبيق من النسخة الأصلية.

هذا التغيير غير طبيعة المشروع تمامًا. الآن، "إضافة موقع" أو "تصحيح وقت" هو مجرد تعديل سطرين في ملف البيانات يمكن لإنسان — أو مساعد الذكاء الاصطناعي — إجراؤه بأمان، يليه إعادة بناء التطبيق. الجزء الهش (التطبيق ذو الـ 14 ميجابايت) لا يتم لمسه يدويًا أبدًا. كل عنصر إضافي أضفته لاحقًا — بطاقة طقس مباشرة، ساعة ثنائية زمنك ↔ زمن طوكيو، محول عملات ثنائي الاتجاه، مواقع قابلة للتوسيع مع صور وتفاصيل عن مواقف السيارات — كلها تُولد من نفس عملية البناء المدفوعة بالبيانات.

المشكلة التي دمرت كل عناصر التطبيق: إعادة بناء التطبيق عند التشغيل

هذا هو الفخ الذي أضاع عليّ الكثير من الوقت، وسأكتبه هنا كي لا يكلفكم شيئًا.

التطبيق المصدر يعيد بناء الصفحة بأكملها عند تشغيله. إذا أضفت أي محتوى إلى HTML الثابت — ساعة، لافتة، أي شيء — فإنه يُمحى فورًا عند تحميل التطبيق. تتلاشى معرفات العناصر الخاصة بك، ودالة getElementById تُعيد قيمة null إلى الأبد، وعنصرك لا يظهر أبدًا. الأسوأ من ذلك: إذا "تحققت" من وجوده بالبحث في ملف HTML المحفوظ، فإن محتواك موجود هناك، لذا يبدو كل شيء على ما يرام. لكنه لا يبقى على الشاشة أبدًا.

قاعدتان حلتا المشكلة نهائيًا:

1. أضف العنصر إلى قالب التطبيق نفسه وليس إلى الصفحة. ضعه في المكان الذي يبني فيه التطبيق واجهته، فسيُعرض كجزء منه ويبقى بعد التشغيل.
2. استخدم تفويض الأحداث على document. يعيد التطبيق بناء أقسام كاملة عند تبديل التبويبات، مما يدمر ويعيد إنشاء عقدها. مستمع ملحق بزر ما سيموت في التحديث التالي؛ لكن مستمع مفوض على document (يتحقق مما تم النقر عليه) يبقى في كل الحالات.

النتيجة هي قاعدة اختبار أعتبرها الآن قانونًا: لا تتحقق من واجهة ويب عبر البحث في الملف أو التأكد من رمز HTTP 200. شغّلها في متصفح حقيقي (بدون واجهة)، بعد تشغيلها، ثم انظر إلى النتيجة. هذا هو الفحص الوحيد الذي يكتشف هذه الفئة من الأخطاء — وقد اكتشفت بذلك عدة أخطاء، منها محول العملات الذي كان غير مرئي حتى نقلته إلى القالب.

"مستقل" لم يكن كذلك

ادعى الملف المصدر أنه ملف مستقل بالكامل. لكنه لم يكن كذلك. كان يجلب إطار العمل الخاص به من CDN عام أثناء التشغيل، وذلك عبر تجميع أجزاء الروابط من الكود — لذا بحث نصي بسيط عن CDN لم يجد شيئًا، وبدا الملف جاهزًا للعمل دون إنترنت رغم أنه ليس كذلك. في استضافة ويب ذات سياسات أمان صارمة، تم حظر هذا الطلب الخفي مما أدى إلى فشل التطبيق بالكامل. أما على حاسوبي الشخصي، حيث لا توجد مثل هذه السياسات، فقد عمل — لذا ظل غير ملحوظ حتى وصل إلى الخادم الحقيقي.

الحل كان استضافة إطار العمل محليًا (دمجه مع التطبيق لتجنب أي طلب خارجي)، وللنسخة القابلة للتنزيل، دمجه مباشرة ليتكون من ملف واحد يمكن فتحه من القرص دون الحاجة لأي إنترنت. إذا استخلصتم شيئًا عمليًا من هذا القسم: "يعمل على جهازي" و"يعمل خلف سياسات أمان خادم ويب حقيقي" هما ادعاءان مختلفان — اختبروا الثاني.

الحماية: شكلية مقابل قفل حقيقي

النسخة الأولى استخدمت رمز PIN في كود JavaScript لحماية الموقع. هذا هو أمن شكلي: الجدول الزمني كله موجود في مصدر الصفحة، لذا أي شخص يفتح أدوات المطور يمكنه قراءته دون الحاجة لكتابة الرمز. هذا جيد لإخفاء مفاجأة عن نظرة عابرة؛ لكنه لا يحمي ما يهم حقًا.

النسخة الحقيقية نقلت الحماية إلى الخادم: أدخل الرمز، يتحقق الخادم منه ويبدأ جلسة، وحينها فقط يُعطى الجدول الزمني. كما توجد قيود تصاعدية على كل عنوان IP — بضع محاولات خاطئة تجعل ذلك العنوان يُمنع مؤقتًا لفترات متزايدة، لذا لا يمكن لأحد محاولة جميع الرموز الستة.

سأكون صادقًا بشأن حدوده، لأن التظاهر بغير ذلك هو ما يعرض الناس للخطر: رمز PIN مكون من 6 أرقام مع قيود على عدد المحاولات يكفي لجدول رحلات عائلية غير حساسة؛ لكنه لا يصلح لمستوى الأمان المصرفي. إذا كنت تحمي شيئًا حساسًا، استخدم عبارة مرور طويلة وتسجيل دخول صحيح. يجب أن يتناسب القفل مع ما خلفه.

المساعد الذكي، تحت رقابة صارمة

الجزء الممتع هنا هو وجود مساعد صغير — أسميته Yoshi — يعمل في تبويب خاص به. في النسخة العائلية الخاصة، يمكنه الإجابة على أسئلة حول الرحلة ("ما هي خطة يوم حديقة الحيوانات؟"، "ماذا يجب أن نحزم؟") وإجراء تعديلات بسيطة ومحدودة على الجدول الزمني. الهدف الأساسي هو أن يقوم بالتعديلات على ملف البيانات الآمن نفسه، وليس على التطبيق الهش؛ كما أنه محصور في حدود معينة: يمكنه الإضافة أو التعديل، لكن لا يمكنه حذف أي يوم من الرحلة، كما أن تفاصيل الرحلات والحجوزات محمية تماماً بحيث لا يمكن لأي رسالة دردشة التأثير عليها.

الأهم من ذلك، أن Yoshi يعمل باستخدام نموذج ذكاء اصطناعي مضيف محلياً — أي نموذج صغير يعمل على جهازي الخاص، وليس عبر واجهة برمجة تطبيقات سحابية مدفوعة — ويتم الوصول إليه عبر وسيط آمن. هذا موضوع منفصل بحد ذاته (كيفية نشر روبوت دردشة مضيف محلياً على الشبكة العامة، ومدى بطئه على الأجهزة المنزلية)، لذا كتبت عنه بشكل منفصل:
نشر روبوت دردشة على الشبكة العامة — باستخدام جهازي الخاص.

ملاحظة حول النموذج القابل للتحميل أدناه: تبويب المساعد موجود لكي ترى مكان وجوده، لكن في النموذج تم إيقاف تشغيله عمداً؛ فهو غير متصل بأي نموذج ذكاء اصطناعي ولن يستجيب لأي طلبات. لكي يعمل في نسختك الخاصة، يجب أن توجهه إلى النموذج المحلي الذي تملكه. هذا مقصود؛ فأنا لا أريد توزيع ملف عام يقوم سراً بالتواصل مع نموذج ذكاء اصطناعي قيد التشغيل.

يعمل دون اتصال، قابل للتثبيت، ومستقر في الخارج

آخر التعديلات كانت لتلبية متطلبات استخدام التطبيق أثناء السفر: شبكات واي فاي غير مستقرة في الفنادق، غياب الإنترنت على متن الطائرات، وتذبذب خدمات التجوال. لذا تحول التطبيق إلى تطبيق ويب تقدمي PWA — يمكن إضافته إلى شاشة البداية ليُفتح كتطبيق حقيقي — وهو يعمل دون اتصال، حيث يُعرض الجدول الزمني بالكامل من على الجهاز بعد تحميله مرة واحدة. القاعدة التي التزمت بها بدقة هي أن التطبيق لا يقوم بتخزين الجدول الزمني إلا بعد إتمام عملية التحقق بنجاح، لذا لا يمكن تجاوز آلية الحماية عبر التخزين المؤقت. أما عند الاتصال بالإنترنت، فهو يعيد التحقق دائماً؛ وفي وضع عدم الاتصال، يثق في النسخة الموجودة على هاتفك. بالنسبة لخطة سفر عائلية، هذا هو الحل الأمثل.

(عملاء الخدمة قد يسببون مشاكل — فقد تستمر نسخة قديمة مخزنة في عرض صفحة غير محدثة حتى بعد إجراء التعديلات. تعلمت أنني يجب دائماً نشر نسخة محدثة من هذا العميل، وعدم حذف النسخة القديمة فقط، لكي تلاحظ المتصفحات التغيير فعلاً.)

الاختبار الواقعي، لأنه كذلك بالفعل

بما أن العائلة كانت تستخدم التطبيق أثناء السفر، فقد تعاملت مع كل تغيير كأنه إصدار جديد: أقوم ببنائه، ثم أعرض الصفحة الحقيقية عبر متصفح بدون واجهة مستخدم، وأتحكم في التبويبات والأزرار فعلياً، قبل أن أطلقه. خلال الرحلة، قمت بإجراء تعديلات طفيفة بهذه الطريقة — مثل إضافة شارة تبرز اليوم الحالي من الرحلة (وفق توقيت طوكيو وليس توقيت هاتف المستخدم)، وتحديث بيانات الطقس، وإصلاح بعض مشاكل التنسيق — حيث تم التحقق من كل منها أولاً في متصفح حقيقي. هذه الدرسة نفسها التي تعلمتها سابقاً: وجود الملف لا يعني أن الميزة تعمل فعلياً.

جربه — قم بتحميل النموذج

الملف القابل للتحميل أدناه هو نموذج عام معدّل من التطبيق. كل الأسماء والتواريخ والعناوين والتفاصيل هي بيانات تجريبية خيالية؛ إنه جدول زمني افتراضي لرحلة إلى طوكيو تستغرق 7 أيام. افتح ملف index.html في أي متصفح — لا حاجة للتثبيت أو خادم أو حساب. التطبيق يعمل دون اتصال؛ فقط بطاقة الطقس الحي وروابط الخرائط هي التي تتصل بالإنترنت.

هناك تحذيران صادقان. أولاً، الملف الواحد يبلغ حجمه حوالي 14 ميجابايت لأن التطبيق بأكمله والخطوط والصور مضمنة فيه ليعمل دون أي اعتمادات خارجية — وهذا يجعله بطيئاً عند الفتح لأول مرة؛ أما النسخة الإنتاجية فستقوم بتقسيم وتضغيف كل ذلك. ثانياً، كما ذكرت سابقاً، المساعد الذكي معطل في هذا النموذج — يفتح التبويب ويخبرك بذلك.

أنشئ واحداً بنفسك

القسم المخصص لـ "تنفيذ ذلك بنفسك" ليس مجرد شعار؛ فهذا الدليل مُعد ليُستخدم مباشرة مع أي مساعد ذكاء اصطناعي، تماماً كما أفعل في مقال كيفية تكييف أي مشروع مع نظامك باستخدام الذكاء الاصطناعي. الخطوات المختصرة كالتالي:

1. ضع خطة الرحلة في ملف بيانات. الأيام والتوقفات والملاحظات والطقس — ملف واحد قابل للقراءة هو المصدر الوحيد للحقيقة.
2. ولّد التطبيق منه. خطوة البناء تُحوّل البيانات إلى واجهة مستخدم، لذا أي تعديل يكون على البيانات وليس على الكود المولد.
3. إذا بدأت من ملف تصميمي، احترم آلية التشغيل الخاصة به. أضف محتواك إلى قالب التطبيق، واستخدم الأحداث المفوضة، واستضف محلياً أي شيء يحتاج إلى تحميل.
4. ضع آلية الحماية على الخادم، لا في الصفحة. جلسة العمل مع قيود عدد المحاولات أفضل بكثير من رمز PIN يتم التحقق منه عبر JavaScript.
5. اجعل التطبيق يعمل دون اتصال إذا كان سيُستخدم في السفر — لكن لا تخزن البيانات إلا بعد إتمام عملية التحقق بنجاح.
6. تأكد من عمله في المتصفح، بعد التشغيل. ليس مجرد "وجود الملف". يجب أن يظهر على الشاشة فعلياً.

ملاحظات وتحذيرات

• إعادة بناء DOM تحدث عند التشغيل — أي شيء تضيفه إلى الصفحة سيُمسح؛ لذا أضفه إلى قالب التطبيق واستخدم الأحداث المفوضة عبر document.
• "مستقل تماماً" قد لا يكون كذلك — قد يقوم ملف التصميم بتحميل إطار العمل الخاص به أثناء التشغيل؛ لذا استضفه محلياً واختبره تحت رؤوس الأمان الحقيقية للخادم، وليس فقط محلياً.
• رمز PIN من جانب العميل هو مجرد إجراء شكلي — المحتوى موجود في الصفحة أصلاً؛ لذا ضع آلية الحماية على الخادم.
• رمز PIN المكون من 6 أرقام يخضع فقط لقيود عدد المحاولات، وليس آمناً تماماً — مقبول للأغراض غير الحساسة، لكنه غير كافٍ لأي شيء يتطلب حماية عالية.
• عملاء الخدمة يقومون بالتخزين المؤقت بكثرة — يجب نشر نسخة محدثة من هذا العميل لتطبيق التصحيحات؛ فحذف الملف القديم لا يلغي تسجيله.
• "وجود الملف" لا يعني "أن الميزة تعمل" — يجب عرضها وفحصها على الشاشة في كل مرة.

مرتبط بـ: نشر روبوت دردشة على الشبكة العامة — باستخدام جهازي الخاص، كيفية تكييف أي مشروع مع نظامك باستخدام الذكاء الاصطناعي، مكتب صغير لوكلاء الذكاء الاصطناعي على جهاز كمبيوتر صغير واحد، تحويل موقع WordPress إلى موقع ثابت باستخدام Claude Code.

التنزيلات

• Download the sample itinerary app (zip) 10.3 MB

مجاني للاستخدام الشخصي. إذا وفّر لك عصرًا كاملًا من الوقت، فزر القهوة قريب منك.