قصة تطبيق Open Tarteel TV
أريد أن أشارككم قصة تطوير تطبيق Open Tarteel ووصوله إلى شاشات التلفاز.
التحدي: الانتقال من الويب إلى التلفاز
تطبيق Open Tarteel الأساسي مبني للويب ويعمل كتطبيق ويب تقدمي (PWA) على أجهزة الأندرويد. يعتمد هذا الأسلوب بشكل كلي على عرض الويب (Web View). لكن عندما أردت نقل التجربة إلى شاشات التلفاز، واجهت عقبة حقيقية: الاعتماد على المتصفح أو Web View ليس خياراً ممكناً أو عملياً لتقديم تجربة سلسة على أجهزة التلفاز.
الحل: البناء من الصفر
لضمان أفضل تجربة للمستخدم، قررت بناء نسخة التلفاز من الصفر. استخدمت الأدوات التالية لتحقيق ذلك:
- React Native: لبناء تطبيق أصلي قوي.
- Spatial Navigation: لضمان تنقل سلس وسهل باستخدام جهاز التحكم عن بعد (الريموت).
- React-native-tvos: وهو المسؤول على بناء التطبيق المخصصة لأنظمة التلفاز.
الهيكلية التقنية المرنة (Modularity)
في بناء التطبيق، ركزت على "النمطية" (Modularity) لضمان سهولة التطوير مستقبلاً. قمت بإنشاء محولات (Adapters) منفصلة لكل مصدر من مصادر البيانات (API Sources).
يقوم كل محول باستلام استجابة الـ API، ثم يعيد ترتيبها وتنسيقها لتصبح استجابة موحدة (Unified Response) يسهل استهلاكها وعرضها داخل التطبيق. هذه الهيكلية تجعل إضافة مصادر جديدة في المستقبل أمراً سهلاً للغاية.
رحلة النشر: ميزة "عوامل الشكل" (Form Factors)
عندما حان وقت النشر، اكتشفت ميزة رائعة في Google Play Console لم أكن أعلم بوجودها، وهي "عوامل الشكل" (Form Factors).
هذه الميزة مكنتني من إضافة إصدار (Release) منفصل ومخصص تماماً لأجهزة التلفاز، مع الاحتفاظ بإصدار الأندرويد (للهواتف) كما هو. وبذلك، تمكنت من توفير تطبيق Android TV مستقل وقوي لمستخدمي التلفاز، وإدارته جنباً إلى جنب مع تطبيق الهاتف في مكان واحد.
أدوات وتقنيات التطوير (Tech Stack)
لتحقيق أفضل أداء وتجربة مستخدم على التلفاز، اعتمدت على مجموعة من الأدوات والتقنيات الحديثة:
- React Native TVOS: هو المحرك الأساسي للتطبيق، وهو نسخة مخصصة من React Native تدعم منصات التلفاز (Apple TV و Android TV) بشكل أصلي، مما يضمن أداءً عالياً واستجابة سريعة لا توفرها تطبيقات الويب العادية على التلفاز.
- Expo: إطار العمل الذي سهل عملية التطوير والبناء وإدارة المشروع، مما سمح بالتركيز على الميزات بدلاً من إعدادات البناء المعقدة.
- React TV Space Navigation: مكتبة محورية في التطبيق، مسؤولة عن "التنقل المكاني". على عكس الهواتف التي تعتمد على اللمس، تعتمد التلفازات على أزرار الاتجاهات (D-pad). هذه المكتبة تضمن تنقلاً ذكياً وسلساً بين العناصر (الأزرار، القوائم، الشبكات) باستخدام الريموت.
- TypeScript: لضمان جودة الكود، حيث توفر التحقق من الأنواع (Type Checking) مما يقلل الأخطاء ويسهل صيانة الكود وتطويره.
- i18next: لدعم تعدد الغات (العربية والإنجليزية)، مما يجعل التطبيق متاحاً لجمهور أوسع مع سهولة إضافة لغات جديدة مستقبلاً.
إدارة التفضيلات المحلية (Context API & AsyncStorage)
للحفاظ على خصوصية المستخدم وسرعة التطبيق، اعتمدت على تخزين البيانات الشخصية محلياً دون الحاجة لحسابات مستخدمين.
- React Context: استخدمت Context API لإدارة حالة التطبيق (State Management) مثل قائمة المفضلات وإعدادات المصادر. هذا يضمن أن البيانات متاحة لجميع مكونات التطبيق بشكل فوري وسلس.
- Local Persistence: لضمان بقاء هذه التفضيلات (مثل السور المفضلة والقراء المفضلين) بعد إغلاق التطبيق، يتم تخزينها محلياً على جهاز المستخدم باستخدام
AsyncStorage وربطها مباشرة مع الـ Context. لا يتم إرسال أي بيانات شخصية أو تفضيلات خاصة إلى أي خادم خارجي، مما يعزز الخصوصية ويجعل التطبيق يعمل بكفاءة حتى مع انقطاع الإنترنت (للمحتوى المحمل مسبقاً أو الإعدادات).
قاعدة بيانات لامركزية (GunDB)
أردت إضافة ميزات تفاعلية اجتماعية مثل "الأكثر مشاهدة" و"الأكثر تفضيلاً" لتعزيز اكتشاف المحتوى، ولكن دون الحاجة لبناء أو استئجار خادم مركزي (Backend) تقليدي. الحل كان GunDB.
- لماذا GunDB؟: هي قاعدة بيانات لامركزية (Decentralized) تعمل في الوقت الفعلي (Real-time). تسمح بمزامنة البيانات بين المستخدمين مباشرة (Peer-to-Peer).
- كيف تعمل في التطبيق؟:
- عداد المشاهدات وتفضيلات المجتمع: عندما يستمع مستخدم لقارئ معين أو يضيفه للمفضلة، يقوم التطبيق بتحديث عداد عالمي في شبكة GunDB.
- تحديث فوري: هذه البيانات تنعكس فوراً لدى جميع المستخدمين الآخرين، مما يسمح بعرض قوائم "الأكثر رواجاً" و"المفضل عالمياً" بناءً على تفاعل المجتمع الحقيقي.
- الخصوصية: كل هذا يتم بشكل مجهول الهوية ولا مركزي، حيث لا يوجد خادم مركزي يراقب أو يخزن بيانات المستخدمين، بل هي شبكة تشاركية بين أجهزة المستخدمين.
روابط التطبيق
لقطات الشاشة
