Разработка Tizen-приложений для Samsung Smart TV
Гайд для Javascript-разработчиков
Эта статья рассказывает про удивительные приключения JS-разработчиков в мире ОС Tizen. В ней будет пошаговая настройка рабочего окружения (IDE), сам процесс разработки приложения для Smart TV, подключение «умного» телевизора Samsung вместе с пультом, и, конечно, публикация в Tizen Store — с примерами и подводными камнями.

Так что если вы разделяете наше мнение о том, что Javascript — лучший язык программирования, потому что он работает практически везде – от домашнего Smart TV до кораблей SpaceX, то желаем вам приятного чтения.

Итак, вы — фронтенд-разработчик, а перед вами – большой, красивый, 65-дюймовый телевизор Samsung Tizen. И появляется он не просто так, а по делу, так как вам нужно написать тв-приложение на Javascript: просто HLS-плеер или DASH-стримы от поставщика, немного DRM и других пока еще не очень понятных аббревиатур. Ничего сложного, ничего личного.

Отступать некуда, нужно разбираться.
Установка софта и настройка окружения
Первым делом идем на официальный сайт за Tizen Studio. Скачиваем этот набор инструментов и уделяем внимание разделу Prerequisites с системными требованиями и нужными компонентами, чтобы случайно не наступить на грабли на самом старте.

Tizen Studio — это интегрированная среда (IDE) для разработки на Tizen, в которой можно создавать реальные и виртуальные устройства, подключать платформы, создавать сертификаты и запускать приложения.

Опционально можно поставить VSCode Extension for Tizen, он поможет управляться с IDE не выходя из редактора.

Инструкция для Mac на платформе Apple Silicon

Если у вас новый Mac на базе ARM64, то установить tizen-studio можно так:

  • правый клик по installer.app в Finder
  • выбираем Show Package Contents
  • идем в Contents/Resources/Java
  • распаковываем tizen-sdk.zip
  • копируем папку tizen-sdk/jdk в ~/.package-manager/
  • запускаем installer.ap

Если звезды сошлись, по завершении установки нужно открыть Package Manager и добавить расширения:

  • Samsung Certificate Extension;
  • TV Extension Tools;
  • и актуальную платформу (сейчас это TV-Extension-6.0).
Судя по неторопливости загрузки, есть подозрение, что пакеты тянутся напрямую с корейских серверов. Пока ждем завершения установки, можно почитать, чем отличается HLS от DASH и PlayReady от Widevine..

(...6 hours later)
Перевод телевизора в Developer Mode
Пришло время перевести телевизор в Developer Mode и добавить его в Tizen Studio.

Для этого заходим в Apps и нажимаем на пульте волшебную последовательность 1, 2, 3, 4, 5 — откроется окошко developer mode.

Если у вас расширенный пульт с цифровым блоком — вам повезло. С минипультом придется немного повозиться: вызвать экранную цифровую клавиатуру (numpad) кнопками 123 и манипулировать кнопками направления (d-pad).
Сверху — расширенная версия пульта с numpad и d-pad для продвинутых юзеров и разработчиков, снизу — минипульт для Smart TV с кнопками управления в центре

В открывшемся окошке Developer Mode вбиваем IP нашей рабочей машины с установленным Tizen Studio, перезагружаем наш смарт ТВ и вуаля — можно открывать Device Manager и добавлять наш большой красивый 65-дюймовый... ну, вы поняли.
Добавление телевизора в IDE через Device Manager
Скриншот: Device Manager с подключенным телевизором

Для успешного добавления телевизора в Device Manager должны выполняться несколько условий:

  • телевизор переведен в Developer Mode;
  • в окне Developer Mode указан правильный IP нашей рабочей машины с установленным Tizen Studio;
  • устройства находятся в общей сети: LAN, WiFi или VPN.
[Опционально] После добавления телевизора в Tizen Studio можно скопировать его уникальный идентификатор DUID, так потом будет проще создать сертификат. А если телевизоров МНОГО (а вдруг), то все DUID лучше сложить в текстовый файл в формате «один DUID на строку».
Симулятор и эмулятор Tizen
Tizen Emulator – это почти полноценная замена реального устройства. Поддерживается эмуляция процессора, памяти, периферии, событий, кодеков и графики. Из минусов – отсутствует поддержка DRM, т.е. технических средств защиты авторских прав

Лучшего всего скачать платформу 4.1.2 и запускать эмулятор на ней — она работает быстрее и занимает меньше места в памяти, чем остальные. Ее можно найти в архивном разделе TV Extension for Tizen SDK.

Полный список различий между эмулятором и реальным устройством можно найти в соответствующем разделе на сайте developer.tizen.org

Web Simulator – легковесная версия эмулятора в Chrome. API практически отсутствует, а остатки симулируются на JS, возвращая значения-заглушки. На нем можно протестировать различные разрешения устройства и какие-то базовые вещи, но ограничений больше чем возможностей.
Добавление сертификата и его установка в телевизор
Теперь заводим сертификаты в Certificate Manager. Они нужны для установки приложения в телевизор, эмулятор и публикации в Tizen Store. Существует два типа сертификатов — Tizen и Samsung.
Окно выбора типа сертификата в Certificate Manager.

Выбирайте сертификат Samsung, он позволит устанавливать приложения в телевизор. Для этого понадобится создать учетную запись в Seller Office — специальном разделе для Tizen-разработчиков на сайте Samsung.
Уровень Partner открывает более широкие возможности, но для его получения придется пройти квест в Seller Office и ждать подтверждения от двух недель до двух месяцев. И так было еще в доковидные времена!

Уровень Platform недоступен простым смертным.

Тип сертификата Tizen нужен для тестирования приложения ТОЛЬКО в эмуляторе. Его преимущество в свободе. Свободе выбора — уровни Public и Partner с его расширенным API доступны из коробки. Никаких регистраций и смс.

На выходе должен получиться профиль с двумя сертификатами — author и distributor..

Важно: не теряйте свой сертификат (author.p12) и пароль к нему, сделайте бэкап сра-зу-же, сохраните его в надежном месте, отправьте клиенту. Без него вы не сможете обновлять приложение в Tizen Store.

Tizen-разработчику на заметку: перед созданием сертификата включите телевизор в Device Manager, тогда его DUID добавится в distributor-сертификат автоматически.
Профиль с двумя сертификатами — author и distributor

Резюмируем. Сертификат нужен для следующих вещей:

  • подпись wgt-файла для установки на устройство или эмулятор;
  • публикация приложения в Tizen Store;
  • уровень сертификата определяет набор функций из API устройства, который будет вам доступен.
Подробнее про сертификаты:

Последний шаг — установка сертификата в телевизор. Без этого вы не сможете установить в него свое приложение. Нужен сертификат типа Samsung. Готово!
Скриншот: установка сертификата в телевизор
Разработка веб-приложений на Tizen: разновидности и (не)удобство
У Tizen есть две разновидности веб-приложений: локальные (packaged) и серверные (hosted).

Обычное packaged-приложение устанавливается в телевизор и хранит все ресурсы локально — стили, скрипты, шаблоны, картинки, config.xml и т.д. При разработке или дебаге такого приложения приходится ждать сборки, загрузки и установки wgt-файла на устройство. Написание стилей, разработка новых модулей или отладка поведения плеера сулит боль, фрустрацию и большие временные потери на восстановления контекста.

Лучшим решением на первых этапах будет разработка для десктопного Chrome. При подготовке html-макетов (layouts) и отладке пространственной навигации также можно обойтись без телевизора.

Счастливым обладателям сертификата Samsung уровня Partner доступен вариант hosted-приложения. Телевизор выступает в роли загрузчика ресурсов и разработка напоминает привычную браузерную. Для работы с hosted-приложениями понадобится сделать две вещи:

  1. Добавить в проект любимый http-сервер с автозагрузкой (autoreload).
  2. Создать пустой проект в Tizen Studio и прописать редирект на IP локальной машины в index.html
<!DOCTYPE html>

<html>

<head>

<title>MyApp</title>

<meta http-equiv="refresh" content="0;url=http://YOUR_IP">

</head>

<body></body>

</html>
Готово! Теперь телевизор выступает в роли webview.

Главный минус такого решения – урезанный API webapis устройства. Это критично, если вам нужно, например, получить DUID устройства для привязки к бэкенду.
webapis.productinfo.getDuid()

Cannot read property 'getDuid' of undefined
При этом API Tizen остается доступен в полной мере: можно добавлять кнопки RCU, управлять громкостью и т.д.
tizen.tvinputdevice.registerKey("ChannelUp");

success
На чем писать приложения для Smart TV Samsung
1. Javascript (ES5 and ES6)
C 2017 года Tizen начинает частично поддерживать третье пришествие Javascript (ES6). Полную поддержку завозят в модели 2018 года. Со спецификацией лучше ознакомиться лично, возможны неожиданности:

https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html#javascript-es6

Для старичков придется использовать vanilla.js или транспилировать код.

2. React
Ответ положительный. Мы не пробовали, но похожий на правду вариант описан на stackoverflow: It's a little challenging, but you can do it.

3. React Native
Если вы разработчик React Native, попробуйте ReNative.
Chromium и Webkit для запуска веб-приложений на Tizen
Для запуска веб-приложений на Tizen установлен движок Chromium. Это актуально для моделей телевизоров 2017—2021+ годов. Модели 2015 и 2016 работают на движке Webkit и, несмотря на моральное устаревание, их все еще много на руках у пользователей. Постепенно Самсунг убирает их из своего магазина приложений – например, сегодня уже нельзя выпустить продукт для телевизоров 2015 года.

Версия движка не блещет новизной и обновить его нельзя. На модели 2021 года установлен Chromium версии M76 двухлетней давности.

Реальность такова, что для поддержки актуальных устройств придется иметь дело с версией Chromium M47 из далекого 2015. Чем вы занимались в 2015? Мда...

Если этого мало, добро пожаловать в поддержку телевизоров 2016 года с версией Webkit загадочной ревизии r152340. Но не будем о грустном.
Отладка веб-приложений на Tizen
Для дебага можно использовать Chrome DevTools не старше 79 версии. А все потому, что прохладным февральским утром 2020 г. Гугл убрал поддержку Custom Elements V0 из 80-й версии и с тех пор эти инструменты разработчика стали несовместимы с Tizen.

Обходные пути типа «Зайди в Preferences > Tizen Studio > Web > Chrome > Extra parameters» и добавь --enable-blink-features=CustomElementsV0 --user-data-dir=/tmp/tmpchromeuser не работают.

Наш выбор – установить версию 79 из архива www.slimjet.com/chrome и отключить автообновление.

Для телевизора из 2016 года на Webkit подойдут DevTools из Chrome v62 или около того. Высока вероятность словить фриз телевизора, если в DevTools нажать «не туда».
Публикация приложения: Seller Office и Tizen Store
Настало время опубликовать свое приложение в Tizen Store. Для этого нужно подготовить или запросить у клиента несколько вещей:

1. Логотипы приложения в соответствии с UX-руководствами:

  • Полноэкранная заставка из двух слоев: сам логотип в PNG-формате с полупрозрачностью и фон. Размеры – 1920x1080px, не более 300 килобайт.
  • Иконка для результатов поиска размером 512х423px, не более 300 килобайт.
2. Полноразмерные скриншоты основных экранов приложения — 4 штуки
3. DOC-файл на английском с описанием экранов и поведения приложения по шаблону:

  1. Структура UI — схема навигации между страницами приложения.
  2. Примеры использования основных возможностей приложения.
  3. Меню и функции — маркировка и описание основных функций.
  4. Пульт — описание функций, которые присвоены кнопкам пульта.
  5. Языковые опции — отметка о поддержке языковых версий.
Вроде бы все строго, есть официальный чек-лист разработчика, но, как показывает практика, вполне подходит и более простой документ в свободной форме со скриншотами UI и описанием поведения кнопок и основных функций.

4. Указать версию приложения в config.xml и подготовить подписанный wgt-файл.

We're good to go! Весь остальной квест не требует предварительной подготовки. Можно переходить непосредственно к регистрации.
После успешного завершения регистрации начнется процесс ручного тестирования со стороны Cамсунга. Живые люди будут заводить баги во внутреннем баг-трекере, прикреплять туда молчаливые видео и жестами указывать на моменты фиаско.

В итоге приложение появится в Samsung Store, даже если в нем нашлись незначительные дефекты, вроде "Many of channels don't work. Black screen with loader is visible". :-)

Но с критическими дефектами, вроде "Infinite loading", приложение не попадет к пользователям.
Скриншот: система отслеживания ошибок на портале Samsung для для Tizen-разработчиков

После исправления критических багов можно праздновать свой успех! Теперь приложение можно найти по названию или ключевым словам в сквозном поиске телевизора.
Документация разработчика приложений для OC Tizen
Документация есть, и на том спасибо.

Ее писали разные люди в разное время, поэтому конвенция нейминга и стилистика меняется от документа к документу, а в гайдах встречается откровенно нерабочий код. Яркая иллюстрация: в примере использования встроенного плеера есть досадная опечатка, там вместо webapis написано webapi. А главное — в каком месте — в разделе настройки DRM! Уверены, что об этой проблеме в Sellers Office сообщили не только мы, но спустя три года воз и ныне там.
Tizen-разработчику на заметку
1. Регистрация и поддержка кнопок пульта


Первое, с чем придется столкнуться при разработке на Tizen – регистрация кнопок пульта. По умолчанию некоторые кнопки не будут доступны в приложении из коробки, сначала их нужно зарегистрировать.

По отдельности:
tizen.tvinputdevice.registerKey('MediaPlayPause');
Или пачкой:
const keys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "ChannelUp", "ChannelDown", "MediaPlay", "MediaPause", "MediaFastForward", "MediaRewind", "Exit"];

tizen.tvinputdevice.registerKeyBatch(keys, successCb, errorCb);
Кнопки VolumeUp, VolumeDown и VolumeMute лучше не регистрировать, иначе их нативную функциональность придется обрабатывать программно через API.

Дальше – просто. Ловим нажатия в приложении через Listener:
document.body.addEventListener('keydown', handleKeyDown);
где в handleKeyDown будет передаваться код кнопки.

2. Полезные вызовы tizen и webapis

Список полезных вызовов для разработки на ОС Tizen
tizen.systeminfo.getCapability("http://tizen.org/feature/network.ethernet");

tizen.systeminfo.getCapability("http://tizen.org/system/model_name");

tizen.systeminfo.getPropertyValue("ETHERNET_NETWORK”, successCb, errorCb);

webapis.productinfo.getFirmware()
"T-KTM2DEUC-1202.3"

webapis.productinfo.getModel()
UNU7400"

webapis.productinfo.getVersion()
"3.0"

webapis.productinfo.getRealModel()
"UE43NU7400"

webapis.productinfo.getModelCode()
"18_KANTME_UHD"

webapis.productinfo.getLocalSet()
"EU_LITHUANIA"
Занимательные истории на клиентских проектах
Кейс 1: поддержка голосового управления (Корея vs все остальные)

Голосовое управление совершенно беспомощное и беспощадное одновременно. Как это должно выглядеть: ты говоришь в пульт «телевизор, я хочу кофе» и через 10 минут курьер доставляет вам капучино. Производитель пишет красиво про "you can register general voice commands, which trigger a listener when the user speaks them", но за каждым "can" скрывается "must". Как это обычно бывает, две беды слились воедино: необходимость предварительной регистрации команд и плохое распознавание голоса. И если вас или вашего клиента посетит мысль добавить голосовое управление, будьте готовы дополнять словари Volume Up и Louder не только синонимами, но и созвучными Bloom Up и Laura.
В корейской версии интерфейса телевизора всё значительно лучше. Но, как говорится в их народной пословице, «чем вильнёшь, коли нет хвоста?»


Кейс 2: быстрый переход внутрь приложения и deep link

Приз в номинации в «наименее часто используемая фича» уходит функции Smart Hub Preview, которая дает прямой доступ к внутренним разделам приложения. Благодаря такому deep linking можно фичерить контент или отправлять пользователя сразу в любимый раздел.

На схеме показан пример фичеринга в тематических подборках, т.е. выделение рекомендованного контента для пользователя (от англ. to feature — выделять)


Кейс 3: баг MPD-стрима длиной 50 дней

При портировании одного проекта на Tizen 4.0 в модели 2017 года возникла проблема: не работал звук при воспроизведении прямой трансляции (MPD-поток, от англ. media presentation description).. Кнопки Volume Up/Down/Mute, а также управление звуком через API не помогали. На других платформах — например, на LG Smart TV (WebOS) — проблема отсутствовала, ссылка на MPD-стрим и содержание файла также не вызывали вопросов – все теги и директивы поддерживались Tizen.

На тестовых стримах звук был.

Сомнения вызывала только директива availabilityStartTime, которая указывает нулевую точку на временной шкале и по умолчанию равна Unix epoch, т.е. 1970-01-01T00:00:00Z.

Оказалось, что в стримах со значением availabilityStartTime больше 49.7 дней звук отсутствовал или пропадал в процессе. И правильно, потому что 49.7 дней или 2,147,483,647 миллисекунд или 2**32 равно максимальному положительному значению целого числа в 32-битных системах (Number.MAX_SAFE_INTEGER) Короче, это просто баг стека мультимедиа Tizen, и мы ничего не можем с этим поделать.

Как решилось? На следующий день телевизор автоматически обновил прошивку до версии 1251 и проблема исчезла.

Заключение
Тizen занимают солидную часть рынка, платформа развивается, выходят новые версии телевизоров и софта. При этом разработка не становится проще или удобнее и полна фрустрации. Попытка создать единую платформу сразу для всех устройств неоднозначна.

Самая большая проблема – документация и удобство ее использования. Она покрывает сразу все устройства всех версий – веб- и нативных приложений — и полна ошибок и недоработок.

Сайт developer.tizen.org загружается достаточно медленно, чтобы это почувствовать (3–8 секунд), и за несколько лет ситуация не изменилась. Поиск скорее отсутствует, и удобнее найти что-то в гугле и перейти на основной сайт, но важно убедиться, что статья или гайд относятся именно к TV и именно к веб-версии приложения. Сайт переключился на корейский язык – это нормально, добро пожаловать.

Форумы для разработчиков Tizen-приложений заполнены типичными проблемами. Ответы с устаревшими ссылками в 99% случаев ведут на "pagenotfound", а общение с Seller Office бесполезно в 100% случаев. Скорее всего, вы будете ждать три недели, чтобы получить ответ, не относящийся к вопросу. И это за 30% от вашей прибыли, если приложение платное.

Тестирование часто похоже на лотерею. Собрать работающий плеер, да еще с поддержкой DRM или рекламы – задача со звездочкой. Не зря же они сами форсят платный 3rd party NexPlayer – "is the only video player recommended by Samsung" – надо брать.

Подозреваем, что некоторые абзацы могли вызвать ваше справедливое недовольство и оттолкнуть от Tizen. Тем не менее, если бы все было просто, эта статья не появилась бы на свет, так что мы закончим ее на позитивной ноте: Tizen в глобальном масштабе занимает первое место среди всех операционных систем для смарт-TB. В прошлом году эта ОС охватила 13% мирового рынка, а в Великобритании — все 30% и, судя по прогнозам аналитиков, компания Samsung не собирается сбавлять свои позиции.

Даже в США и Канаде, где таблица лидеров на рынке Smart TV OS отличается от всех прочих регионов (они там предпочитают Roku), Tizen все равно остается в тройке лидеров вместе с Amazon Fire TV. Так что если вы или ваши клиенты планируете выпускать приложения для широкой международной аудитории, то Tizen — это must have, несмотря на всю боль и слезы frontend-разработчиков, которые будут писать JS-код для этой операционки. По крайней мере мы в Promwad убедились на своем опыте, что каждая последующая разработка и публикация приложения в Tizen Store дается проще, чем предыдущая.

Как говорится, трудно сначала, приятно потом (корейская версия этой фразы: 노력 없이는 이득도 없다).

Спасибо за прочтение!
Впервые эта статья была опубликована в нашем блоге на Хабре: «Разработка Tizen-приложений для Samsung Smart TV: гайд для Javascript-разработчиков»


Кирилл Зут
Руководитель подразделения по разработке решений для цифрового ТВ и потокового видео
Инженерная команда Кирилла реализует крупные долгосрочные проекты, которые охватывают все устройства для видеостриминга — от смартфонов до Smart TV.

Если вы хотите, чтобы вашими приложениями для Android и iOS пользовались миллионы людей из разных стран мира — присоединяйтесь. У нас сейчас как раз открыты вакансии!
Присоединяйтесь к нашей команде!

Приглашаем в нашу команду Middle React Native Developer разработчика для развития Mobile приложений