comrat Aug 27 2018 at 19:47

Подводные грабли SmartTV разработки

6 min

16K

Привет, Хабр!

Уже давно была идея написать статью о проблемах SmartTV разработки, но по ходу погружения в эту область, мы изобрели свой велосипед, который помогал нам эти проблемы решать. Поэтому, в данной статье, мы не только осветим некоторые проблемные моменты SmartTV разработки, но и расскажем о том как их решить с помощью ~~очередного~~ нового фреймворка PureQML.

Всем кому интересна данная тема или просто любопытно посмотреть на новый фреймворк, который может и в SmartTV, просим под кат.

Зоопарк

Начнем с того, что в природе существует множество SmartTV платформ и многие из них заточены для запуска web приложений. Отсюда может появиться иллюзия, что достаточно один раз написать код и использовать его на всех платформах. Но на деле все платформы имеют некоторые отличия, которые приходится учитывать. Среди таких особенностей можно выделить следующие:

Обработка нажатий кнопок дистанционного пульта. Не все производители используют одинаковые кейкоды для одних и тех же кнопок пульта. В качестве примера, можно сравнить кей коды для платформы orsay и webos. Для tizen же надо явно регистрировать некоторые кнопки для дальнейшего использования.
Видеоплеер. Во многих платформах поддерживается html5 video плеер, но, к примеру, для tizen используется AVPlay, а для orsay используется собственное API для работы с нативным плеером.
Информация о девайсе. Получение информации об устройстве в каждой платформе также реализовано по разному, в NetCast создается специальный объект со особым id-шником, в других случаях используются специфические для каждой платформы методы.
Фокус. SmartTV приложение в первую очередь ориентировано на управление пультом, а следовательно UI/UX должны быть реализованы с учетом использования навигационных кнопок: вверх, вниз, вправо, влево, ОК и назад, при этом важно не терять фокус и явно обозначать, где он сейчас находится.

Документация

Помимо разнообразия платформ и документации к этим платформам, проблема заключается в том, что некоторые производители выпускают новые версии, которые, порой, теряют совместимость в некоторых местах, а то и вовсе переходят на новые платформы, в принципе несовместимые с прежними (как например, переход LG с NetCast на WebOS). При этом идет интенсивное продвижение новых платформ, из-за чего информацию по старым платформам найти становится непросто, так как некоторые разделы документации удаляются или переносятся, из-за чего иногда можно наткнуться на мертвые ссылки в советах на формах.

Установка

Опять же из-за многообразия платформ, процесс установки приложений на сами устройства для отладки также отличается. К примеру, для AndroidTV можно воспользоваться adb, на tizen есть свой аналог — sdb, для WebOS специальные CLI скрипты и т.д. Каждый из этих инструментов нужно устанавливать и настраивать. Сюда же можно добавить проблему интенсивного обновления платформ, с сопутствующим обновлением SDK и IDE. В качестве примера такой проблемы можно привести случай с Tizen Studio. Скачав самую последнюю версию, вы сможете устанавливать приложения только на телевизоры TV-samsung tv4, при этом нет простого способа установить приложение на более ранние версии телевизоров, коих в природе сейчас значительно больше (если вдруг столкнулись с этой проблемой см. ссылку) и даже после успешного танца с бубном, IDE теряет возможность устанавливать приложения на телевизоры TV-samsung tv4 ¯\_(ツ)_/¯

Модерация

Для публикации приложения необходимо пройти модерацию у соответствующего производителя, и у каждого из них свои правила и особенности. В данном случае необходимо набраться терпения, т.к. приложения могут держать на проверке не одну неделю и это следует учитывать при планировании сроков, т.е. приложение нужно публикова заблаговременно до релиза (если вдруг переживаете, что приложения появится раньше каких-либо маркетинговых мероприятий — не бойтесь, при отправке на модерацию есть пункт, в котором вы можете указать дату, раньше которой публиковать приложение не будут).

Также надо быть готовым к тому, что причиной отказа может оказаться любая мелочь, например, ошибочный ответ в self чеклисте (список вопросов, на которые должен ответить разработчик перед отправкой приложения, например: “содержит ли Ваше приложение вирусы” и т.п.) или из-за недопонимания в описании UX приложения. Может дойти и до курьезных ситуаций, например, был случай, когда завернули приложение со стримингом телеканалов, из-за того, что приняли бегущую строку в эфире одного из каналов за артефакт графики, приняв ее за часть OSD.

AndroidTV & tvOS

Отдельно стоит отметить AndroidTV и tvOS, т.к. эти платформы не поддерживают явный запуск web приложений. Для tvOS используется собственный xml-подобный язык: TVML, и что особенно интересно, на этом языке можно верстать, но только в рамках определенного набора шаблонов, сделать что-то совсем произвольное довольно непросто. С помощью таких ограничений все приложения для tvOS вынуждено придерживаются единого style-гайда и если от него далеко не отходить, то процесс написания приложения будет прост.

На андройде ситуация получше, т.к. есть способы запускать web приложения, про один из них расскажем чуть ниже.

Как мы делаем это

Столкнувшись с реальностью, сперва изучили существующие решения, но к сожалению ничего универсального и удобного не приглянулось: смартбокс неудобный, реакт не решает специфических тв проблем, как, собственно, и другие фреймворки, которые больше ориентированы на web.

Теперь рассмотрим, как с этим справляется PureQML (про который мы уже как-то писали тут и тут). Вкратце это js-фреймворк, который позволяет декларативно описывать UI на qml-like языке, что помогает быстро создавать приложения абстрагируясь от html, css и прочего. Для решения конкретно SmartTV проблем был написан отдельный модуль qmlcore-tv под лицензией CC-BY-4.0, который поддерживает следующие платформы:

LG WebOS
LG NetCast
Samsung Tizen
Samsung Orsay
Opera TV
Hisense
AndroidTV

И вот как он решает вышеперечисленные проблемы:

Обработка кнопок пульта. Для поддерживаемых платформ реализован маппинг кейкодов и в клиентском коде достаточно просто написать нужный обработчик, например, для красной функциональной кнопки пульта можно написать обработчик:
```
onRedPressed { /* код обработчика */ }
```
Видеоплеер. Для работы с плеером есть специальная компонента VideoPlayer, которая описывает интерфейс для работы с видео, а платформенная реализация выбирается для целевой платформы на этапе сборки. Ниже приведен пример использования: проигрывание зацикленного видео по ссылке на весь экран:
```
	VideoPlayer {
		width: 100%;
		height: 100%;
		autoPlay: true;
		source: "http://media.w3.org/2010/05/bunny/movie.mp4";
	}
```
Информация о девайсе. Для того чтобы получить сведения об устройстве достаточно использовать контрол Device, по аналогии с плеером он описывает интерфейс, а реализация берется для собираемой платформы. Ниже приведен пример кода для отображения текста с ID устройства на экране:
```
	Device { id: device; }

	Text {
		text: “DeviceID: ” + device.deviceId;
	}
```
Фокус. Тут уже помогает базовая особенность самого фреймворка, то что в один момент времени существует только один единственный фокус, который есть и никуда не исчезает. Для работы с фокусом можно использовать декларативные свойства:
focus — булевый флаг, указывающий, что данный элемент фокусабелен или нет
activeFocus — булевый флаг, который принимает значение true, когда данный элемент содержит фокус, и false в противном случае
Установка. Для удобной установки PureQML приложений на ТВ можно воспользоваться скриптом smart-tv-deployer, достаточно склонить его в корень PureQML проекта. Чтобы собрать проект, скажем, для webos телевизора с именем “myTV” (только перед этим необходимо настроить ТВ, подробнее про настройку WebOS телевизора смотри тут), нужно вызвать команду:
```
./smart-tv-deployer/build -p webos -t myTV
```
AndroidTV. Тут как и для андройда, нативный язык — java, и для того, чтобы портировать web приложение туда мы воспользовались проектом cordova. Этот фреймворк позволяет сгенерировать android приложение с WebView, в котором запускается уже само web приложение. Также, сейчас ведутся активные работы по трансляции PureQML кода в натив.

Пример

В качестве примера, покажем как портировать приложение из прошлой статьи на SmartTV.

Как мы уже упоминали выше, UX на ТВ отличается от десктопного браузера и в код придется добавить некоторые правки для поддержки работы с кнопками пульта:


	onSelectPressed: { osd.toggleActive() }

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

В данном коде добавили обработку нажатия кнопок «Select» и «Back», при нажатии первой включаем/выключаем OSD (тот, что с картой и точкой местоположения станции) при нажатии «Back», если открыт OSD закрываем его, если он закрыт, то закрываем само приложение.
Конечный результат можно увидеть на видео:

Заключение

В итоге PureQML неплохо показал себя в качестве инструмента для разработки SmartTV приложений, мы и сами интенсивно пользуемся им для этих целей.
Если у вас появились вопросы или хотите больше статей про SmartTV разработку или PureQML — пишите в комментариях или на телеграм канал, постараемся на все ответить.

Спасибо за внимание! =)

Ссылки

Сайт проекта
Страница на github
Исходники earth-online
Телеграмм канал поддержки

Tags:

Hubs: