[JavaScript, Разработка мобильных приложений, Разработка под Tizen, Производство и разработка электроники, Мониторы и ТВ] Разработка Tizen-приложений для Samsung Smart TV: полный гайд для Javascript-разработчиков

Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
30-Июн-2021 18:42


Эта статья рассказывает про удивительные приключения JS-разработчиков в мире ОС Tizen. В ней будет и пошаговая настройка рабочего окружения, и подключение «умного» телевизора 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.app
Если звезды сошлись, по завершении установки нужно открыть Package Manager и добавить расширения: Судя по неторопливости загрузки, есть подозрение, что пакеты тянутся напрямую с корейских серверов. Пока ждем завершения установки, можно почитать, чем отличается 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 на строку».Симулятор и эмулятор TizenTizen Emulator – это почти полноценная замена реального устройства.   Поддерживается эмуляция процессора, памяти, периферии, событий, кодеков и графики. Из минусов – отсутствует поддержка DRM, т.е. технических средств защиты авторских прав.Лучшего всего скачать платформу 4.1.2 и запускать эмулятор на ней — она работает быстрее и занимает меньше места в памяти, чем остальные. Ее можно найти в архивном разделе TV Extension for Tizen SDK.Полный список различий между эмулятором и реальным устройством можно найти в соответствующем разделе на сайте developer.tizen.orgWeb Simulator – легковесная версия эмулятора в Chrome. API практически отсутствует, а остатки симулируются на JS, возвращая значения-заглушки. На нем можно протестировать различные разрешения устройства и какие-то базовые вещи, но ограничений больше чем возможностей.Добавление сертификата и его установка в телевизор Теперь заводим сертификаты в Certificate Manager. Они нужны для установки приложения в телевизор, эмулятор и публикации в Tizen Store. Существует два типа сертификатов — Tizen и Samsung.
Окно выбора типа сертификата в Certificate ManagerВыбирайте сертификат Samsung, он позволит устанавливать приложения в телевизор. Для этого понадобится создать учетную запись в Seller Office — специальном разделе для Tizen-разработчиков на сайте Samsung.
Новые аккаунты подтверждаются вручную, поэтому придется немного подождать — это главное неудобство при создании первого сертификата. По умолчанию вы получите уровень Public, этого хватит для большинства задач.Уровень 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-приложениями понадобится сделать две вещи:
  • Добавить в проект любимый http-сервер с автозагрузкой (autoreload).
  • Создать пустой проект в 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 Samsung1. Javascript (ES5 и 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 it3. React Native Если вы разработчик React Native, попробуйте ReNativeChromium и 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-файл на английском с описанием экранов и поведения приложения по шаблону:
  • Структура UI — схема навигации между страницами приложения.
  • Примеры использования основных возможностей приложения.
  • Меню и функции — маркировка и описание основных функций.
  • Пульт — описание функций, которые присвоены кнопкам пульта.
  • Языковые опции — отметка о поддержке языковых версий.
Вроде бы все строго, есть официальный чек-лист разработчика, но, как показывает практика, вполне подходит и более простой документ в свободной форме со скриншотами UI и описанием поведения кнопок и основных функций.4. Указать версию приложения в config.xml <widget … … version=“1.0.0”> и подготовить подписанный 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()
"CIS_RUSSIA"
Занимательные истории на клиентских проектахКейс 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 и проблема исчезла.Заключение Tizen занимают солидную часть рынка, платформа развивается, выходят новые версии телевизоров и софта. При этом разработка не становится проще или удобнее и полна фрустрации. Попытка создать единую платформу сразу для всех устройств неоднозначна. Самая большая проблема – документация и удобство ее использования. Она покрывает сразу все устройства всех версий – веб- и нативных приложений — и полна ошибок и недоработок. Сайт 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-код для этой операционки. Как говорится, трудно сначала, приятно потом. Спасибо за прочтение! 
===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_javascript, #_razrabotka_mobilnyh_prilozhenij (Разработка мобильных приложений), #_razrabotka_pod_tizen (Разработка под Tizen), #_proizvodstvo_i_razrabotka_elektroniki (Производство и разработка электроники), #_monitory_i_tv (Мониторы и ТВ), #_tizen_os, #_smart_tv, #_javascript, #_samsung, #_promwad, #_tizen_store, #_chromium, #_webkit, #_smart_hub, #_razrabotka_prilozhenij (разработка приложений), #_javascript, #_razrabotka_mobilnyh_prilozhenij (
Разработка мобильных приложений
)
, #_razrabotka_pod_tizen (
Разработка под Tizen
)
, #_proizvodstvo_i_razrabotka_elektroniki (
Производство и разработка электроники
)
, #_monitory_i_tv (
Мониторы и ТВ
)
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 01:55
Часовой пояс: UTC + 5