- PVSM.RU - https://www.pvsm.ru -
Привет!
Уже давно была идея написать статью о проблемах SmartTV разработки, но по ходу погружения в эту область, мы изобрели свой велосипед, который помогал нам эти проблемы решать. Поэтому, в данной статье, мы не только осветим некоторые проблемные моменты SmartTV разработки, но и расскажем о том как их решить с помощью очередного нового фреймворка PureQML [1].
Всем кому интересна данная тема или просто любопытно посмотреть на новый фреймворк, который может и в SmartTV, просим под кат.
Начнем с того, что в природе существует множество SmartTV платформ и многие из них заточены для запуска web приложений. Отсюда может появиться иллюзия, что достаточно один раз написать код и использовать его на всех платформах. Но на деле все платформы имеют некоторые отличия, которые приходится учитывать. Среди таких особенностей можно выделить следующие:
Помимо разнообразия платформ и документации к этим платформам, проблема заключается в том, что некоторые производители выпускают новые версии, которые, порой, теряют совместимость в некоторых местах, а то и вовсе переходят на новые платформы, в принципе несовместимые с прежними (как например, переход LG с NetCast на WebOS). При этом идет интенсивное продвижение новых платформ, из-за чего информацию по старым платформам найти становится непросто, так как некоторые разделы документации удаляются или переносятся, из-за чего иногда можно наткнуться на мертвые ссылки в советах на формах.
Опять же из-за многообразия платформ, процесс установки приложений на сами устройства для отладки также отличается. К примеру, для AndroidTV можно воспользоваться adb, на tizen есть свой аналог — sdb [7], для WebOS специальные CLI скрипты и т.д. Каждый из этих инструментов нужно устанавливать и настраивать. Сюда же можно добавить проблему интенсивного обновления платформ, с сопутствующим обновлением SDK и IDE. В качестве примера такой проблемы можно привести случай с Tizen Studio. Скачав самую последнюю версию, вы сможете устанавливать приложения только на телевизоры TV-samsung tv4, при этом нет простого способа установить приложение на более ранние версии телевизоров, коих в природе сейчас значительно больше (если вдруг столкнулись с этой проблемой см. ссылку [8]) и даже после успешного танца с бубном, IDE теряет возможность устанавливать приложения на телевизоры TV-samsung tv4 ¯_(ツ)_/¯
Для публикации приложения необходимо пройти модерацию у соответствующего производителя, и у каждого из них свои правила и особенности. В данном случае необходимо набраться терпения, т.к. приложения могут держать на проверке не одну неделю и это следует учитывать при планировании сроков, т.е. приложение нужно публикова заблаговременно до релиза (если вдруг переживаете, что приложения появится раньше каких-либо маркетинговых мероприятий — не бойтесь, при отправке на модерацию есть пункт, в котором вы можете указать дату, раньше которой публиковать приложение не будут).
Также надо быть готовым к тому, что причиной отказа может оказаться любая мелочь, например, ошибочный ответ в self чеклисте (список вопросов, на которые должен ответить разработчик перед отправкой приложения, например: “содержит ли Ваше приложение вирусы” и т.п.) или из-за недопонимания в описании UX приложения. Может дойти и до курьезных ситуаций, например, был случай, когда завернули приложение со стримингом телеканалов, из-за того, что приняли бегущую строку в эфире одного из каналов за артефакт графики, приняв ее за часть OSD [9].
Отдельно стоит отметить AndroidTV и tvOS, т.к. эти платформы не поддерживают явный запуск web приложений. Для tvOS используется собственный xml-подобный язык: TVML, и что особенно интересно, на этом языке можно верстать, но только в рамках определенного набора шаблонов [10], сделать что-то совсем произвольное довольно непросто. С помощью таких ограничений все приложения для tvOS вынуждено придерживаются единого style-гайда и если от него далеко не отходить, то процесс написания приложения будет прост.
На андройде ситуация получше, т.к. есть способы запускать web приложения, про один из них расскажем чуть ниже.
Столкнувшись с реальностью, сперва изучили существующие решения, но к сожалению ничего универсального и удобного не приглянулось: смартбокс неудобный, реакт не решает специфических тв проблем, как, собственно, и другие фреймворки, которые больше ориентированы на web.
Теперь рассмотрим, как с этим справляется PureQML (про который мы уже как-то писали тут [11] и тут [12]). Вкратце это js-фреймворк, который позволяет декларативно описывать UI на qml-like языке, что помогает быстро создавать приложения абстрагируясь от html, css и прочего. Для решения конкретно SmartTV проблем был написан отдельный модуль qmlcore-tv [13] под лицензией CC-BY-4.0, который поддерживает следующие платформы:
И вот как он решает вышеперечисленные проблемы:
onRedPressed { /* код обработчика */ }
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;
}
./smart-tv-deployer/build -p webos -t myTV
В качестве примера, покажем как портировать приложение из прошлой статьи [12] на SmartTV.
Как мы уже упоминали выше, UX на ТВ отличается от десктопного браузера и в код придется добавить некоторые правки для поддержки работы с кнопками пульта:
onSelectPressed: { osd.toggleActive() }
onBackPressed: {
if (osd.active)
osd.toggleActive()
else
_globals.closeApp()
}
В данном коде добавили обработку нажатия кнопок «Select» и «Back», при нажатии первой включаем/выключаем OSD (тот, что с картой и точкой местоположения станции) при нажатии «Back», если открыт OSD закрываем его, если он закрыт, то закрываем само приложение.
Конечный результат можно увидеть на видео:
В итоге PureQML неплохо показал себя в качестве инструмента для разработки SmartTV приложений, мы и сами интенсивно пользуемся им для этих целей.
Если у вас появились вопросы или хотите больше статей про SmartTV разработку или PureQML — пишите в комментариях или на телеграм канал [16], постараемся на все ответить.
Спасибо за внимание! =)
Сайт проекта [1]
Страница на github [17]
Исходники earth-online [18]
Телеграмм канал поддержки [16]
Автор: comrat
Источник [19]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/290545
Ссылки в тексте:
[1] PureQML: https://pureqml.com/
[2] orsay: https://developer.samsung.com/tv/develop/legacy-platform-library/art00046/index
[3] webos: http://webostv.developer.lge.com/design/webos-tv-system-ui/remote-control/
[4] регистрировать: https://developer.samsung.com/tv/develop/guides/user-interaction/remote-control
[5] AVPlay: https://developer.samsung.com/tv/develop/api-references/samsung-product-api-references/avplay-api
[6] собственное API: https://developer.samsung.com/tv/develop/legacy-platform-library/API00005/Player_172
[7] sdb: https://developer.tizen.org/dev-guide/2.4/org.tizen.devtools/html/common_tools/smart_dev_bridge.htm
[8] ссылку: http://blog.infernored.com/how-to-get-back-tizen-studio-1.3-and-tv-extensions-3.0
[9] OSD: https://en.wikipedia.org/wiki/On-screen_display
[10] набора шаблонов: https://developer.apple.com/library/archive/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/TextboxTemplate.html
[11] тут: https://habr.com/post/325318/
[12] тут: https://habr.com/post/326006/
[13] qmlcore-tv: https://github.com/pureqml/qmlcore-tv
[14] тут: http://webostv.developer.lge.com/develop/app-test/
[15] cordova: https://cordova.apache.org/
[16] телеграм канал: https://t.me/pureqml
[17] Страница на github: https://github.com/pureqml/
[18] Исходники earth-online: https://github.com/pureqml/earth-online
[19] Источник: https://habr.com/post/421119/?utm_campaign=421119
Нажмите здесь для печати.