Wanderlust

تخطيط رحلة يعني عادةً فتح عشرات التبويبات: واحد للعطلات، وآخر للطقس، وثالث للفعاليات، ورابع للعملة. المعلومات موجودة، لكنها مبعثرة ومعروضة بطرق مختلفة تمامًا.

كان الهدف لوحة تحكم واحدة هادئة ومتّسقة تجمع كل ذلك لأي دولة — مبنية بـ JavaScript الخالص دون أي إطار عمل.

تنظيم التطبيق كما يفعل إطار العمل، حتى بدونه: حالة مركزية، وخدمة واحدة لكل استدعاءات الـ API، ومدير عروض للتنقل، ومتحكّم لكل شاشة.

جعل الوجهة مصدر الحقيقة الوحيد: تختارها مرة واحدة في لوحة التحكم، فتتبعها كل العروض — العطلات والفعاليات والطقس وعطلات نهاية الأسبوع والعملة وأوقات الشمس.

شريط جانبي ثابت يجمع ثمانية عروض في أقسام: الرئيسي، والاستكشاف، وأدوات السفر، والشخصي. ويبدأ كل عرض بشريط ملوّن يحمل علم الدولة المختارة والمدينة، تليه بطاقات مصممة لنوع بياناته.

قُسّمت التنسيقات إلى ملفات منفصلة بأسماء واضحة — base و layout و components و views و widgets و dashboard و weather — فلا يمكن لتعديل في جزء من الواجهة أن يكسر جزءًا آخر عن غير قصد.

حوالي أربعة آلاف سطر من JavaScript الحديث منظمة في كلاسات: AppState، و ApiService، و ViewManager مع توجيه عبر الرابط (hash)، و UIComponents للتنبيهات والنوافذ ومؤشرات التحميل، ومتحكّم لكل عرض.

تجتمع خمس واجهات API عامة: REST Countries، و Nager.Date (العطلات وعطلات نهاية الأسبوع الطويلة)، و Open-Meteo (الطقس)، و ExchangeRate API، و Sunrise-Sunset. والفعاليات مهيّأة للعمل مع Ticketmaster Discovery API، وتعرض فعاليات تجريبية حين لا يوجد مفتاح API، والاستجابات تُخزَّن مؤقتًا فلا يُعاد جلبها عند العودة للعرض. وتُحفظ الخطط وآخر اختيار في LocalStorage.

تفاصيل مدروسة: الحرارة تتحول إلى فهرنهايت في الدول التي تستخدمها، والتواريخ تُنسّق بلغة كل دولة، وألوان الشرائط تتبع القارة، وقائمة الدول قابلة للبحث.

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

كان الحل بنية من ملفات CSS منفصلة بأسماء كلاسات واضحة ومحددة النطاق — تنسيقات الطقس في weather.css فقط، والعناصر في widgets.css فقط — يقابلها الفصل نفسه في JavaScript، حيث يملك متحكّم كل عرض جزءه من الصفحة فقط.

تطلب العروض بياناتها فقط حين تفتحها، ويعرض كل منها حالة تحميل أثناء الانتظار ورسالة واضحة إن كانت الخدمة غير متاحة، فلا يجمّد API بطيء اللوحة كلها.

لوحة تحكم تحوّل عشرات التبويبات المفتوحة إلى مكان واحد لتخطيط الرحلة. منشورة على GitHub Pages.