أشعل النار تحت الماء تطوير SmartTV

مرحبا يا هبر!

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

كل من يهتم بهذا الموضوع أو مهتم بالاطلاع على الإطار الجديد ، والذي يمكن أن يكون أيضًا في SmartTV ، نطلب قطة.

حديقة الحيوان

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

• معالجة الضغط على زر التحكم عن بعد . لا تستخدم جميع الشركات المصنعة نفس رموز المفاتيح لنفس أزرار جهاز التحكم عن بعد. كمثال ، يمكنك مقارنة الرموز الرئيسية لمنصة orsay و webos . ل tizen ، من الضروري تسجيل بعض الأزرار بشكل صريح للاستخدام في المستقبل.
• مشغل فيديو تدعم العديد من المنصات مشغل فيديو html5 ، ولكن ، على سبيل المثال ، يستخدم tizen AVPlay ، ويستخدم orsay واجهة برمجة التطبيقات الخاصة به للعمل مع المشغل الأصلي.
• معلومات عن الجهاز . يتم أيضًا تنفيذ الحصول على معلومات حول الجهاز في كل نظام أساسي بشكل مختلف ، في NetCast يتم إنشاء كائن خاص باستخدام id-shnik خاص ، وفي حالات أخرى ، يتم استخدام طرق خاصة بكل نظام أساسي.
• التركيز يركز تطبيق SmartTV في المقام الأول على جهاز التحكم عن بعد ، وبالتالي يجب تنفيذ واجهة المستخدم / UX مع الأخذ بعين الاعتبار استخدام أزرار التنقل: لأعلى ولأسفل ولليمين ولليسار وطيبًا وعودة ، من المهم عدم فقد التركيز والإشارة بوضوح إلى مكانه الآن .

التوثيق

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

التثبيت

مرة أخرى ، نظرًا لتنوع الأنظمة الأساسية ، تختلف أيضًا عملية تثبيت التطبيقات على أجهزة التصحيح نفسها. على سبيل المثال ، بالنسبة إلى AndroidTV ، يمكنك استخدام adb ، و tizen له نظير خاص به - sdb ، ونصوص Web CLI الخاصة ، وما إلى ذلك. يجب تثبيت كل أداة من هذه الأدوات وتكوينها. هنا يمكنك إضافة مشكلة تحديثات النظام الأساسي المكثفة ، مع التحديث المصاحب لـ SDK و IDE. مثال على هذه المشكلة هو الحال مع Tizen Studio. بعد تنزيل أحدث إصدار ، يمكنك تثبيت التطبيقات فقط على تلفزيونات تلفزيون تلفزيون سامسونج ، بينما لا توجد طريقة سهلة لتثبيت التطبيق على إصدارات سابقة من أجهزة التلفاز ، والتي تكون أكبر بطبيعتها (إذا واجهت هذه المشكلة فجأة ، انظر الرابط ) وحتى بعد رقصة ناجحة مع الدف ، يفقد IDE القدرة على تثبيت التطبيقات على أجهزة التلفزيون TV-samsung tv4 ¯ \ _ (ツ) _ / ¯

الاعتدال

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

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

AndroidTV & tvOS

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

على الروبوت ، الوضع أفضل ، لأن هناك طرق لتشغيل تطبيقات الويب ، سنتحدث عنها بعد قليل.

كيف نفعل ذلك

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

الآن دعونا نرى كيف يتعامل PureQML مع هذا (الذي كتبناه بالفعل هنا وهنا ). باختصار ، هذا إطار عمل js يسمح بوصف واجهات المستخدم بشكل معلن بلغة تشبه qml ، مما يساعد على إنشاء تطبيقات مستخرجة بسرعة من html و css وأشياء أخرى. لحل مشاكل SmartTV على وجه التحديد ، تمت كتابة وحدة qmlcore-tv منفصلة بموجب ترخيص CC-BY-4.0 ، الذي يدعم المنصات التالية:

• LG webOS
• LG NetCast
• Samsung Tizen
• Samsung Orsay
• تلفزيون Opera
• هيسنس
• AndroidTV

وإليك كيف يحل المشاكل المذكورة أعلاه:

• معالجة أزرار التحكم عن بعد . بالنسبة إلى الأنظمة الأساسية المدعومة ، يتم تنفيذ تعيين رموز المفاتيح وفي رمز العميل يكفي ببساطة كتابة المعالج المطلوب ، على سبيل المثال ، بالنسبة لزر الوظيفة الحمراء لوحدة التحكم عن بعد ، يمكنك كتابة معالج:
  

  onRedPressed { /*   */ } 

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

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

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

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• التركيز الميزة الأساسية للإطار نفسه تساعد بالفعل هنا ، أنه في لحظة واحدة من الوقت كان هناك تركيز واحد فقط ، موجود ولا يختفي في أي مكان. للعمل مع التركيز ، يمكنك استخدام الخصائص التعريفية:
  التركيز - علامة منطقية تشير إلى أن هذا العنصر قابل للتركيز أم لا
  activeFocus - علامة منطقية صحيحة عندما يحتوي هذا العنصر على تركيز ، وخطأ خلاف ذلك
• التثبيت للتثبيت المريح لتطبيقات PureQML على التلفزيون ، يمكنك استخدام البرنامج النصي للنشر الذكي للتلفزيون ، فقط قم بثنيه إلى جذر مشروع PureQML. لإنشاء مشروع ، على سبيل المثال ، لتلفزيون webos باسم "myTV" (قبل ذلك مباشرةً تحتاج إلى إعداد تلفزيون ، لمزيد من التفاصيل حول إعداد تلفزيون WebOS ، انظر هنا ) ، تحتاج إلى استدعاء الأمر:
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV . هنا ، مثل android ، اللغة الأصلية هي Java ، ومن أجل نقل تطبيق الويب هناك استخدمنا مشروع cordova . يسمح لك هذا الإطار بإنشاء تطبيق android باستخدام WebView ، حيث يتم تشغيل تطبيق الويب نفسه. أيضًا ، يتم العمل بنشاط لترجمة كود PureQML إلى اللغة الأم.

مثال

على سبيل المثال ، نعرض كيفية نقل التطبيق من مقالة سابقة إلى SmartTV.

كما ذكرنا أعلاه ، يختلف UX على التلفزيون عن متصفح سطح المكتب ، وسيكون عليك إضافة بعض التغييرات على الرمز لدعم العمل مع الأزرار البعيدة:

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

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

الخلاصة

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

شكرا لكم على اهتمامكم! =)

المراجع

موقع المشروع
صفحة جيثب
مصادر الأرض على الإنترنت
قناة دعم برقية