Как написать приложение для смарт тв

Эта статья рассказывает про удивительные приключения 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

Если звезды сошлись, по завершении установки нужно открыть 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).

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

Добавление телевизора в IDE через 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.

Выбирайте сертификат 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-сертификат автоматически.

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

• подпись wgt-файла для установки на устройство или эмулятор;

• публикация приложения в Tizen Store;

• уровень сертификата определяет набор функций из API устройства, который будет вам доступен.

Подробнее про сертификаты:

• https://docs.tizen.org/application/web/tutorials/sign-certificate/

• https://docs.tizen.org/application/dotnet/tutorials/certificates/creating-certificates/

Последний шаг — установка сертификата в телевизор. Без этого вы не сможете установить в него свое приложение. Нужен сертификат типа 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 и 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 <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”, приложение не попадет к пользователям.

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

Документация разработчика приложений для 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 можно фичерить контент или отправлять пользователя сразу в любимый раздел.

Кейс 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-код для этой операционки. 

Как говорится, трудно сначала, приятно потом. Спасибо за прочтение! 

В интернете есть множество статей про разработку приложения для Android TV с точки зрения программистов, но нет ни одного материала для стартаперов. Мы в Purrweb решили исправить это и создали подробное руководство. Рассказываем все, что нужно знать, чтобы запустить надежное приложение для Android TV на React Native, если вы стартапер, и не говорите на языке разработчиков. Плюс, открываем завесу тайны о ценах и сроках. Добро пожаловать! 

Подождите, а что такое Android TV?

Не секрет, что сейчас технологии эволюционировали до такой степени, что в телевизор можно загружать приложения, транслировать музыку, играть в игры и смотреть Netflix — все функции в одной небольшой (или большой) коробке. Отчасти это стало возможным благодаря технологии Smart TV, которая соединила телевизоры с интернетом через Wi-Fi, и открыла мир новых возможностей для пользователей. В результате этого на рынке разработки приложений для стартаперов появилась новая большая ниша.

В 2014 году Google запустила собственную операционную систему для телевизоров, цифровых медиаплееров, телевизионных приставок и звуковых панелей — Android TV. Она автоматически интегрирована в телевизоры с технологией Smart TV, которые производят все современные гиганты: например, SONY, Philips или LG. После этого релиза количество запросов на разработку приложений для Android TV начало расти в геометрической прогрессии.

Миллионы потенциальных пользователей

В 2022 году телевизоры распространены примерно так же, как и смартфоны. Если коротко: они есть практически у каждого. Согласно исследованиямhttps://www.statista.com/statistics/1107844/access-to-smart-tv-in-households-worldwide/, у 58% взрослых американцев есть телевизор с технологией Smart TV. Между прочим, это чуть больше, чем 109 миллионов человек, которых вы потенциально можете охватить своим приложением на англоязычном рынке. В среднем американцы проводятhttps://www.statista.com/chart/15224/daily-tv-consumption-by-us-adults/ у телевизора более 4 часов в день. Те же цифры можно увидеть и в Великобритании — у 73% опрошенных есть умный телевизор в доме, и другие страны, такие как Германия, Швеция, Дания, не сильно отстают.

Android TV — это новый многообещающий рынок с большим простором для творчества. Вы можете придумать и воплотить в жизнь любое решение: стриминговое приложение, приложение для медитации или игру. Но, важно понимать, что разработка приложений для Android TV отличается от приложений для смартфонов. Есть несколько пунктов, которые важно учитывать при проработке дизайна и функционала.

Особенности дизайна и ключевых функций

И смартфоны, и технология Android TV требуют от пользователя определенного уровня вовлеченности: нужно зайти в приложение, смотреть на экран, нажимать на иконки и так далее. Но способ взаимодействия человека и телевизора отличается от того, как мы пользуемся смартфонами. Например, мы сидим гораздо дальше от экрана и управляем пультом, а не пальцем. Учитывая эти факторы, мы составили список из 5 вещей, о которых нужно знать, прежде чем планировать свое приложение для Android TV.

Ориентация и размер элементов

Во-первых, в разработке под Android TV нужно учитывать другой размер экрана и большее расстояние между пользователем и устройством. Представьте, когда мы смотрим телевизор, мы обычно сидим на диване примерно в 1,5 метрах от экрана. Поэтому все шрифты, значки и другие элементы должны быть больше, чем на экране телефона. Во-вторых, приложения для Android TV показываются на экране горизонтально. Это тоже следует учитывать при проектировании навигации и компоновке элементов.

Дистанционное управление

Никто не хочет вставать каждый раз, когда ему нужно увеличить громкость или переключиться между приложениями. Вот почему мы рекомендуем вам добавить в свое приложение сенсорный или голосовой вход.

Поиск и навигация

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

Рекомендации по контенту

Эта функция поможет вам повысить вовлеченность пользователей — чем шире библиотека контента, тем дольше они остаются в приложении.

Тестирование на реальном устройстве

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

Как найти для разработчика для Android TV?

Smart TV — это относительно новая технология, которая требует глубокого понимания поведения пользователя и технической составляющей. Поэтому, когда вы ищете разработчика для создания приложения для Android TV, обратите внимание на его опыт, портфолио и отзывы предыдущих клиентов.

Еще один совет от нас: работайте с компанией, а не с фрилансерами. Разработка приложений для Android TV включает в себя несколько параллельных этапов: UX/UI дизайн, API, тестирование и управление проектами — лучше, когда они выполняются одной командой с налаженной коммуникацией, а не отдельными специалистами.

Подойдет ли React Native для разработки приложения для Android TV?

Если говорить коротко, то да. React Native отлично подходит для разработки приложений для Android TV. Для владельцев стартапов есть 4 ключевых преимущества работы с этим фреймворком: кросс-платформенная разработка, нативные элементы, высокая производительность и поддержка сообщества.

1. Кросс-платформенность

Главное преимущество React Native — общая кодовая база для разных операционных систем и мост (bridge), который соединяет их между собой. Для владельцев стартапов, это означает, что вы можете разработать один компонент для приложения Android TV на React Native, и он будет плавно работать на других устройствах со Smart TV. Плюс, это делает процесс разработки быстрее (и дешевле, поскольку работа команды обычно оплачивается по часам). Кроме того, в будущем вы можете быстро превратить свое решение в приложение Apple TV без головной боли и приумножить свою аудиторию.

2. Нативные элементы

React Native использует нативные API, поэтому в приложении будут использоваться нативные компоненты и оно будет вести себя как нативное. И по времени это будет значительно быстрее, чем нативная разработка под Android TV.

3. Высокая производительность

Фреймворк взаимодействует с нативными компонентами через тот самый мост, поэтому производительность получается быстрой и плавной. Это поможет вам сосредоточиться на тестировании и проектировании UX/UI дизайна, вместо оптимизации производительности. Кроме того, в React Native есть функция быстрой перезагрузки (Hot Reload), которая позволяет найти, отследить и закрыть ошибки в режиме реального времени, без переписывания всего кода.

4. Поддержка сообщества

React Native — популярный фреймворк среди разработчиков со всего мира. В интернете существует множество групп, которые поддержат вас и помогут с любой проблемой, которая возникнет во время разработки.

Цены и сроки

Мы знаем, что планирование бюджета очень важно для стартапов на ранней стадии. Поэтому, без лишних слов, рассказываем, сколько в среднем стоит создать приложение для Android TV и сколько времени занимает этот процесс.

В Purrweb мы обычно начинаем с создания MVP — минимально жизнеспособного продукта. Это первая полнофункциональная версия вашего решения, которую можно использовать, чтобы протестировать идею, собрать фидбек и найти инвестиции. Разработка MVP, в среднем, занимает 3 месяца. Это означает, что через 3 месяца после нашей первой встречи у вас будет готовый качественный продукт. Оценить примерную стоимость вашего приложения можно с помощью нашего калькулятора.

Свяжитесь с нами через форму ниже, чтобы получить оценку вашего приложения для Android TV!

Подведем итоги

В настоящее время умные телевизоры так же популярны, как и смартфоны, а разработка приложений для Android TV — это новый и динамичный рынок для стартаперов. Только в США проживает 109 миллионов человек, которых вы потенциально можете охватить своим приложением, не говоря уже о других странах, например, Великобритании, Германии или России.

Важно помнить, что процесс разработки приложения для Android TV отличается от приложений для мобильных устройств. Во-первых, такие приложения используют горизонтальную ориентацию экрана вместо вертикальной, как на наших смартфонах. В конце дня, после просмотра сторис в Инстаграме и роликов в ТикТоке, нашему мозгу может быть трудно быстро переключиться с вертикального на горизонтальный макет. Поэтому интерфейс должен быть интуитивным и максимально простым. Во-вторых, расстояние между экраном телевизора и пользователем гораздо больше, чем между нашими глазами и телефоном в руке. Поэтому шрифты и иконки должны быть четче и больше по размеру.

В целом, то, как люди взаимодействуют с приложениями Android TV, отличается от взаимодействия с мобильными приложениями, и этот факт нужно учитывать при создании надежного решения.

Вот 5 ключевых вещей, необходимых для создания приложения для Android TV:

В Purrweb наша цель — создать качественное приложение с разумными затратами. Мы занимаемся разработкой приложений для Android TV с акцентом на UX/UI дизайне и QA тестировании. У нас есть блог, где мы открыто делимся своим опытом, и портфолиоhttps://www.behance.net/PURRWEB с предыдущими работами. Кроме того, мы работаем с React Native и разрабатываем высокопроизводительные приложения для Android TV за 3 месяца.

Для MVP приложений для Android TV мы стараемся укладываться в бюджет 40 000$. Разработка занимает 3 месяца, от первой встречи до выхода вашего решения на рынок.

Чтобы больше узнать о наших возможностях, запишитесь на бесплатную консультацию. Мы обсудим вашу идею и посмотрим, как мы можем вам помочь.

Ввиду живого интереса к прошлой статье о библиотеке Smartbox, которая призвана стать основой для любого кроссплатформенного SmartTv приложения, я решили описать, как же создать такое приложение разом для трёх вендоров SmartTv устройств:

Итак, в этой статье вы найдёте много полезного, если вы:

• Начинающий Smart’ист но имеете опыт в классических js/html приложениях
• Продвинутый js/html разработчик и ищите платформу для кроссплатформенного SmartTV решения
• Начинающий js/html разработчик и хотите начать с «Хардкора»
• Тестировщик которому нужно запустить приложения, разработанные третьими лицами

Статья получилась «пухлой» и с кучей спойлеров — потому оглавление:

• Тестирование приложения
• Запуск в эмуляторах вендоров(и удалённых устройствах)
• Запуск на SmartTv телевизорах
• Разработка приложения
• Ссылки на ресурсы для разработчиков
• Библиотека Smartbox

* Из-за того что, эта статья предназначена не только для разработчиков — первыми и, как показалось нашей команде, более интересными, идут пункты о запуске приложений в эмуляторах и конечных устройствах.

Тестирование приложения

Окунувшись в разработку SmartTv приложений, вы в конечном итоге будите вынужденны так или иначе тестировать своё творение. Дао тестирования для SmartTv состоит из последовательных пунктов:

1. Тестирование в браузере
2. Тестирование в эмуляторах вендоров
3. Тестирование на конечных устройствах

Далее мы рассмотрим, два последних шага на пути тестировщика. Первый пункт не является специфичным, а потому Вы сами найдете много интересного, просто запустив приложение и нажав клавишу F12 в браузере. Еще одним «хаком» в тестировании является автоматизация этого процесса. В библиотеке, например, используется jasmine для тестов в среде запуска.

Запуск в эмуляторах вендоров

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

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

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

Запуск на SmartTv телевизорах

Мы рассмотрим самый простой, на мой взгляд, способ установки и проверки приложений на конечных пользовательских устройствах. Для этого нам понадобится:

• Http сервер, с поддержкой php — для LG.
  Я разместил приложение по адресу http://paunin.com/content/demoApp/index.html
• Само приложение, его можно взять в репозитрии библиотеки Smartbox, в директории demo/demoApp;

Можно использовать адрес публичного демо http://immosmart.github.io/smartbox/demo/demoApp/, если у вас по какой-то причине нет HTTP сервера для публикации приложения. Однако, хочу заметить, что для возможности экспериментирования, и разработки приложения HTTP сервер необходим (если вы, конечно, не будите использовать альтернативные методы инсталляции, описанные в документации вендоров)

Краткая инструкция по всем вендорам(выжимка)

Полная инструкция по установке

Для того чтобы запустить приложение на TV/BD Samsung. Необходимо создать widgetlist.xml в корне сервера на который можно обратиться по IP адресу. Например, http://xxx.xxx.xxx.xxx/widgetlist.xml. Я разместил файл по адресу http://82.146.41.200/widgetlist.xml.Файл, напросто, является списком приложений для установки. В списке виджетов главным элементом является узел download, где указывается ссылка на zip-архив вашего приложения. Остальные параметры не имеют значения, даже размер. Как видно из нашего виджет-листа своё приложение я зазиповал и сложил по адресу http://paunin.com/content/smartbox.zip.

Теперь всё что осталось это сообщить устройству адрес вашего IP c widgetlist.xml и обновить приложения. Это делается средствами устройства в зависимости от модели:

Наверное, самый захватывающий квест из всех рассматриваемых устройств. Для установки приложения LG его необходимо зарегистрировать на странице разработчика(требуется регистрация/авторизация).
Заполняем всё, как указано на картинках и скачиваем получившийся файлик.
Если кому-то понадобится, я свой файлик разместил по адресу http://paunin.com/content/lg_wrapper.zip.

И теперь всё что осталось — доставить приложение (точнее его подпись, само приложение находится в интернете) на телевизор:

Для запуска на Philips SmartTv устройствах приложения, нам понадобится всего лишь запустить его в браузере путём указания адреса HTTP.В нашем случае используем адрес http://paunin.com/content/demoApp/index.html. Однако, сразу после старта браузера, вы заметите нативные рамки вокруг элементов в фокусе, что не приемлемо для боевого приложения, и чего в действительности не будет при размещении приложения в LG хабе.

Всё решается указанием при ответе с сервера необходимых заголовков, а именно «application/ce-html+xml«. Этим занимается присутствующий а приложении php скриптик philips.php. Соответственно получаем адрес типа http://paunin.com/content/demoApp/philips.php. Для ускорения набора адреса с пульта телевизора, можете воспользоваться сервисом сокращения ссылок, например, http://goo.gl/. У меня получился адрес http://goo.gl/o93keD

Разработка приложения

Я рассмотрю, исключительно, разработку приложения на базе библиотеки Smartbox. Если вы решите, что функционала библиотеки недостаточно для задач, стоящих перед вами, вы всегда можете использовать нативные методы платформ, изучив документацию вендора устройств. Также, вы можете поучаствовать в развитии и доработках проекта на gitHub’е.

Для нетерпеливых — готовое приложение

Структура приложения

Конфигурация приложения

Конфиги приложения должны храниться в нескольких файлах, и все они в относятся к Samsung платформе:

Use Alpha Blending = Yes
Screen Resolution = 1280x720

<?xml version="1.0" encoding="UTF-8"?>
<widget>
	<voice>y</voice> <!-- Использовать ли управление голосом -->
	<mouse>y</mouse> <!-- Использовать ли управление жестами или мышь -->
	<previewjs itemtype="string"></previewjs>
	<preicon itemtype="string"></preicon>
	<cpname itemtype="string"></cpname>
	<cplogo itemtype="string"></cplogo>
	<cpauthjs itemtype="string"></cpauthjs>
	<ver itemtype="string">0.1</ver> <!-- Версия сборки -->
	<mgrver itemtype="string"></mgrver>
	<fullwidget itemtype="boolean">y</fullwidget>
	<srcctl itemtype="boolean">y</srcctl>
	<ticker itemtype="boolean">n</ticker>
	<childlock itemtype="boolean">n</childlock> 
	<audiomute itemtype="boolean">y</audiomute> <!-- разрешить на фоне играть музыку от сигнала с антены или других -->
	<videomute itemtype="boolean">y</videomute> <!-- разрешить на фоне видео от сигнала с антены или других -->
	<dcont itemtype="boolean">y</dcont>
	<widgetname itemtype="string">SmartBox DemoApp</widgetname> <!-- Имя виджета/приложения, показывается в телевизоре после инсталляции -->
	<description itemtype="string"></description> <!-- Описание виджета/приложения -->
	<width itemtype="number">1280</width> <!-- разрешение виджета - ширина -->
	<height itemtype="number">720</height> <!-- разрешение виджета - высота -->
	<author itemtype="group"> <!-- Описание автора -->
		<name itemtype="string">Smart</name>
		<email itemtype="string">info@example.com</email>
		<link itemtype="string">https://github.com/immosmart/smartbox</link>
		<organization itemtype="string">Smart</organization>
	</author>
	<!-- блок путей до иконок (размеры видны из имён файлов), показывается в телевизоре в разных местах после инсталляции  -->
    <ThumbIcon itemtype="string">icon/sb_demo_115x95.png</ThumbIcon>
    <BigThumbIcon itemtype="string">icon/sb_demo_115x95.png</BigThumbIcon>
    <BigListIcon itemtype="string">icon/sb_demo_95x78.png</BigListIcon>
    <ListIcon itemtype="string">icon/sb_demo_85x70.png</ListIcon>
</widget>

Index.html

При запуске нашего приложения всегда открывается файл index.html, в котором и подключаются все библиотеки и наши скрипты, а также задаётся начальная вёрстка.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"/>
    <title>Smartbox demo</title>
    <!--Стили для отдельных сцен-->
    <link rel="stylesheet" href="css/input.css"/>
    <link rel="stylesheet" href="css/keyboard.css"/>
    <link rel="stylesheet" href="css/legend.css"/>

    <!--Общие стили-->
    <link rel="stylesheet" href="css/style.css"/>

    <!--Библиотеки требуемые Smartbox-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>

    <!--Сама библиотека Smartbox-->
    <script type="text/javascript" src="js/lib/smartbox.js"></script>

    <!--Главный объект приложения-->
    <script type="text/javascript" src="js/app.js"></script>

    <!--Подгрузка модели для сцены с видео-->
    <script type="text/javascript" src="videos.js"></script>

    <!--Сцены-->
    <script type="text/javascript" src="js/scenes/videos.js"></script>
    <script type="text/javascript" src="js/scenes/navigation.js"></script>
    <script type="text/javascript" src="js/scenes/input.js"></script>

    <!--Тригеры для обработки событий и отрисовки легенды в подвале экрана-->
    <script type="text/javascript" src="js/legendTriggers.js"></script>
</head>
<body>

<!--for better view in browser-->
<div class="bg"></div>

<div class="wrap">
    <!--Боковое меню с логотипом-->
    <div class="menu">
        <div class="logo"></div>
        <ul class="menu-items" data-nav_type="vbox" data-nav_loop="true">
            <li data-content='video' class="menu-item menu-item_green nav-item">Videos</li>
            <li data-content='input' class="menu-item menu-item_blue nav-item">Inputs</li>
            <li data-content='navigation' class="menu-item menu-item_red nav-item">Navigation</li>
        </ul>
    </div>
    <!--//Боковое меню с логотипом-->

    <!--Сцены-->
    <div class="scenes-wrapper">
        <!--Сцена демонстрации видео (контент подгрузится при инициализации сцены scenes/videos.js )-->
        <div class="scene scene_video js-scene-video" data-nav_type="vbox" data-nav_loop="true">
                <!--<div data-url="http://smartimmo.ru/uploaded/big_buck_bunny_480p_h264.mp4" data-type="vod" class="video-item nav-item">Big Buck Bunny</div>
                <div data-url="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" data-type="vod" class="video-item nav-item">Elephants Dream</div>
                <div data-url="http://europaplus.cdnvideo.ru/europaplus-live/eptv_main.sdp/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test</div>
                <div data-url="http://phone.pik-tv.com/live/mp4:piktv3pik3tv/playlist.m3u8" data-type="hls" class="video-item nav-item">HLS test 2</div>
                <div data-url="http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8" data-type="hls" class="video-item nav-item focus">HLS test 3</div>-->
        </div>

        <!--//Сцена демонстрации видео-->

        <!--Сцена демонстрации input'ов-->
        <div class="scene scene_input js-scene-input">
            <div class="input-example">
                <h2>Standart input</h2>
                <input class="input-item js-input-1 nav-item"/>

                <div class="input-val">
                    Input value: <span class="js-input-1-val"></span>
                </div>
            </div>

            <div class="input-example">
                <h2>Input with email keyboard</h2>
                <input class="input-item js-input-2 nav-item"/>
            </div>

            <div class="input-example">
                <h2>Input with num keyboard and maximum 4 signs</h2>
                <input class="input-item js-input-3 nav-item"/>
            </div>
        </div>
        <!--//Сцена демонстрации input'ов-->

        <!--Сцена демонстрации навигации-->
        <div class="scene js-scene-navigation">
            <ul class="navigation-items">
                <li class="navigation-item nav-item">1</li>
                <li class="navigation-item nav-item">2</li>
                <li class="navigation-item nav-item">3</li>
                <li class="navigation-item nav-item">4</li>
                <li class="navigation-item nav-item">5</li>
                <li class="navigation-item nav-item">6</li>
                <li class="navigation-item nav-item">7</li>
                <li class="navigation-item nav-item">8</li>
            </ul>
            <p class="navigation-info"></p>
        </div>
        <!--//Сцена демонстрации навигации-->

    </div>
    <!--//Сцены-->
</div>


</body>
</html>

Самое важное, что стоит тут отметить — организация навигации. Все видимые элементы с классом nav-item могут получить на себя фокус и позже инициировать события (focus, click, etc). Для оптимизации навигации, в боковом меню и на сцене видео используется data-nav_type="vbox", что говорит плагину навигации » перестать использовать поиск направления согласно положению элементов на странице, и фокус начинает перемещаться от одного sibling элемента к другому, что гораздо быстрее» (с) Документация по навигации. Другой хак — это аттрибут data-nav_loop="true", что позволяет зацикливать навигацию в рамках данного элемента.

Главный объект приложения App

Заглянем в файл js/app.js После инициализации самого Smartbox происходит инициализация приложения SB.ready(_.bind(App.initialize, App));, запуская тем самым показ легенды $$legend.show(); и добавление обработчиков событий this.setEvents(); от элементов меню, плеера, клавиш пульта. Дополнительные комментарии в самом файле.

Тригеры изменения легенды

Во время работы приложения, мы хотим показывать пользователю подсказки по использованию тех или иных клавиш пульта. Самый простой способ — это обновлять легенду в зависимости от произошедшего события. Этим собственно и занимается файл js/legendTriggers.js. При фокусе nav_focus или потери фокуса nav_blur мы задаем элементам легенды window.$$legend.keys различные значения, которые тот час же выводятся с соответствующим значком.

Коллекция видео потоков

Как и любое приложение, наше должно иметь источник данных для отображения, взаимодействия с пользователем или внутренней настройки. Все наши данные для сцены videos хранятсяв файлике videos.js. Это лишь пример, а потому реальное приложение, вероятно, будет получать данные иным способом. Всё что делает этот кусок кода — сохраняет массив объектов (со ссылками на потоки и их назвния) в глобальный объект приложения window.App.videos = [...]. Далее, в файле сцены, этот массив будет развёрнут и вставлен в html в div.scene_video.

Сцены приложения

Сцены это всего навсего объекты одной структуры, хранящиеся в глобальном объекте window.App, которые показываются и скрываются в зависимости от того, на какой элемент меню был сделан click

//js/app.js
$('.menu').on('click', '.menu-item', function ( e ) {
        var scene = e.currentTarget.getAttribute('data-content');
        self.showContent(scene);
      });)

//js/app.js
showContent: function ( scene ) {
      var cur = this.currentScene,
        newScene = this.scenes[scene];

      if ( cur !== newScene ) {
        if ( !newScene ) {
          $$error('Scene ' + scene + ' doesn't exist');
        } else {
          if ( cur ) {
            cur.hide();
          }
          newScene.show();
          this.currentScene = newScene;
        }
      }
    }

Не буду подробно останавливаться на реализации сцен, а опишу лишь специфику относящуюся к библиотеке Smartbox.

videos.js

Как и говорилось выше, коллекция видео-потоков, после разворачивания в html this.renderItems(App.videos);, становится доступной для навигации за счёт класса в элементе nav-item. При инициализации сцены, все видео-потоки получают обработчик события this.$el.on('click', '.video-item', this.onItemClick);, где и происходит запуск потока Player.play(...). Документация по плееру.

input.js

Для демонстрации работы клавиатуры в сцене input, каждому отдельному полю ввода подключается клавиатура через метод SBInput. Документация по клавиатуре также содержит информацию о способах добавления своих языков и раскладок.

//js/scene/input.js
this.$el.find('.js-input-2').SBInput({
    keyboard: {
        type: 'email'
    }
});

navigation.js

Сцена, демонстрирующая события nav_focus и nav_blur для элементов с классом navigation-item, не отличается спецификой навигации и просто реализует подмену информационного блока при смени элемента в фокусе.

//js/scene/navigation.js
init: function () {
      var $info;

      this.$el = $('.js-scene-navigation');

      $info = this.$el.find('.navigation-info');

      this.$el
        .find('.navigation-item')
          .on(
          {
            'nav_focus': function () {
              $info.html('Item with text "' + this.innerHTML + '" focused');
            },
            'nav_blur': function () {
              $info.html('');
            }
          });

      _inited = true;
    }

Ссылки на ресурсы для разработчиков

• Samsung
• LG
• Philips

Библиотека Smartbox

• Репозиторий — github.com/immosmart/smartbox.
• Полное демо — immosmart.github.io/smartbox/demo/demoApp/.
• Авторы решения:
  • Чинин Денис (chininden[at]gmail.com),
  • Полецкий Артём (artempoletsky[at]gmail.com),
  • Попович Илья (Loshadushka[at]gmail.com),
  • Шамгунов Ильдар (il.shamgunov[at]gmail.com),
  • Паунин Дмитрий (Zmeeed).
  • Логинов Павел (PLoginoff),
  • Смородин Антон (melkov).
• Таск трекер проекта, где вы можете задать вопрос, создать задачу или взять задачу в реализацию.

Всем спасибо и хорошей недели!

P.S.

Разработчикам, желающим поучаствовать в проекте и расширить библиотеку, мы всегда рады и ждём pull request’ов

Автор: ZmeeeD

Источник

На следующем шаге создания своего ТВ-приложения вам нужно решить, какие каналы будут доступны на вашем сервисе и получить соответствующие лицензии на их публичное воспроизведение в вашем приложении. В США эти лицензии выдают в SWANK Motion Pictures и Motion Picture Licensing Corporation (MPLC).

При получении таких разрешений имейте в виду следующие вещи:

• Лицензия может иметь географические ограничения. Например, вы будете иметь право показывать некоторые каналы только в США или Великобритании и при этом вам будет запрещено показывать их в других странах. Нарушение такого запрета по вашей вине приведет к потере лицензии и штрафам.
• У разных стран могут быть разные требования к показу некоторого медиаконтента. Например, могут быть различия в том, кто и как определяет возрастные ограничения, а также каким образом это отображается на экране во время показа. Нарушение таких правил также может привести к запрету приложения в стране, штрафам и даже криминальной ответственности.
• Страны могут вводить запреты на показ определенных фильмов, сериалов и каналов, что характерно для Китая, Австралии, Германии и России.
• Трансляция некоторых спортивных и культурных мероприятий может потребовать дополнительных лицензий или иметь некоторые ограничения в зависимости от организатора событий и страны показа.

Если вы будете сами создавать медиаконтент, то вам не нужно будет получать никаких лицензий. Но это довольно дорогое удовольствие: Стриминговые сайты, как Hulu ежегодно тратит на производство медиаконтента 2,5 миллиарда долларов, Netflix — 17 миллиардов долларов. Без подобных бюджетов вам будет сложно создать что-то стоящее, если учесть, что стоимость производства одного фильма в США в среднем составляет 65 миллионов долларов, а одной серии сериала — 2-7 миллионов долларов.

Шаг 4. Разработайте дизайн ТВ-приложения

YouTube TV — пример простого, понятного и приятного для глаз дизайна ТВ-приложения

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

• Структура. Должна быть последовательная и удобная навигация по всем экранам приложения, а также элементам на экранах. Добиться этого можно, оптимизировав пути пользователей и создав каркасы и прототипы.
• Простота. Чем сложнее дизайн, навигация и управление приложением, тем меньше людей согласятся его использовать, даже если оно будет бесплатным и транслировать все каналы в мире. Поэтому убедитесь, что дизайн вашего ТВ-приложения достаточно прост и понятен для целевой аудитории.
• Видимость. Принцип видимости определяет, какие элементы будут отображаться на экране приложения, в каком виде и последовательности. Здесь нужно соблюсти иерархию важности: более популярные / важные элементы должны быть больше, ярче или анимированными.
• Обратная связь. Сделайте такой дизайн, чтобы при использовании приложения пользователи получали информацию обо всех действиях, интерпретациях, изменениях и ошибках простым, ясным и кратким языком.
• Повторное использование. Дизайн должен использовать согласованные компоненты, принадлежащие связанным группам, предназначение которых будет понятно пользователю с первого взгляда. Например, мы все знаем, что означает красный треугольник (play) в видеоприложениях. Так пользователям не нужно будет переосмысливать назначение новых компонентов.
• Толерантность / гибкость. Интерфейс приложения должен быть терпимым к неверным действиям пользователей. Он должен позволять быструю отмену и повторное выполнение операций, а также предотвращать ошибки (где это возможно), интерпретируя входные последовательности в разумные действия.

Шаг 5. Определитесь с функционалом сервиса

Видеоплеер. Это основа любого ТВ-приложения. Видеоплеер должен иметь все основные функции для управления и настройки медиаконтента и поддерживать HLS для обеспечения максимального качества видео во время просмотра на мобильных устройствах. Кроме того, он должен иметь простой, приятный и понятный дизайн.

Адаптивная потоковая передача битрейта. Суть данной технологии в том, что если доступно несколько качеств потока (480p, 720p, 1080p, 4p, 8k), система будет обеспечивать бесшовную смену качества воспроизведения видео в соответствии с доступной пропускной способностью интернет-соединения или по запросу самого пользователя. Как это работает, легко заметить в YouTube при смене качества видео.

Совместимость с несколькими экранами. Разрабатываемое вами ТВ-приложение должно быть адаптивным. Экран приложения и транслируемое видео автоматически подстраиваться под размеры экрана устройства. Кроме того, нужно автоматическое определение верха/низа.

Быстрая масштабируемость. Ваш сервис должен быть готов к резкой смене нагрузки, например утром, когда люди просыпаются и включают свои смартфоны. Это можно обеспечить благодаря облачным технологиям. Вы также можете создать свою систему из локальных серверов, но тогда могут быть проблемы с передачей медиаконтента на большие расстояния (высокий пинг, задержки, артефакты).

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

Безопасность данных. Шифрование DRM и AES, а также контроль доступа на основе IP помогут защитить видеоданные от хакеров и других злоумышленников

Регистрация и вход в систему. Данный функционал позволяет создавать аккаунты посредством электронной почты, номера телефона или аккаунта Google, Facebook и Twitter. При этом обычно в ходе регистрации в ТВ-приложении пользователей просят указать любимые каналы, фильмы и телепередачи, чтобы сразу показать их после входа в систему. Также нужна возможность активации пробного периода.

Функция поиска. Позволяет искать каналы, просматривать их телепрограмму и детали о телепередачах, фильмах, сериалах и мультиках.

Геоблокировка. Из-за определенных ограничений некоторые каналы вашего приложения могут быть запрещены в определенных странах. Следовательно, при разработке ТВ-приложения вы должны обеспечить реализации таких блокировок.

Дополнительные функции. Это все то, что может увеличить пользовательский опыт и обеспечить вам большой приток новых зрителей. Обычно это такие вещи:

• Расширенная интеграция с социальными сетями. Например, пользователь может с помощью пары кликов сделать пост в Facebook, где будет логотип сериала, описание и время показа следующей серии.
• Расширенный профиль пользователя. Добавьте такие поля, как местоположение, избранное, фильтры, родительский контроль и т.п.
• Расширенные функции потоковой передачи. Вы можете добавить такие возможности, как совместное использование экрана, разделение видео на несколько экранов или возможность включения 3D-режима.
• Расширенные возможности поиска. Увеличьте количество фильтров для поиска. Например, люди, возможно, захотят найти местные телеканалы или каналы, где в данный момент показывают какой-то определенный контент (например, фильмы, телешоу, спортивные мероприятия или контент 18+).
• Рейтинги и обзоры. Пользователи должны иметь возможность оценивать каналы, фильмы и телепрограммы, чтобы они могли формировать свой собственный рейтинг в соответствии с мнением других пользователей.
• Рекомендации. Это могут быть рекомендации каналов или того, что каналы показывают в данный момент. Например, если пользователь часто смотрит документальные передачи про спорт, система будет рекомендовать ему канал, где в данный момент транслируются такие телепередачи.
• Чаты. Дадут возможность пользователям делиться впечатлениями, рекомендациями и временем выхода новой серии любимого сериала.
• Уведомления. Позволяет приложению отправлять push-уведомления пользователю, если транслируется интересный контент.
• Подписки. Вводите различные типы подписок и позволяйте пользователям управлять ими из приложения.

Шаг 6. Выберите инструменты разработки

Здесь вы найдете список основных инструментов, которые следует использовать для разработки своего ТВ-приложения. Базовый перечень таков:

Шаг 7. Создайте MVP ТВ-приложения

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

Ориентировочная стоимость разработки MVP ТВ-приложения такова:

Шаг 8. Опубликуйте приложение

После того как ваше ТВ-приложение будет разработано и протестировано, его нужно добавить в App Store и Google Play. Для этого нужно:

1. Зарегистрироваться в Apple Developer и Google Play Console.
2. Заполнить соответствующую форму добавления приложения в листинг.
3. Заплатить: 99 долларов в год за публикацию в App Store, 25 долларов единоразово — Google Play.