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

Обновлено: 07.01.2025

С какой стороны подойти к разработке, и в чём головная боль — рассказывает менеджер по продукту видеосервиса Wink.

Из всех телевизоров, которые мы подключаем к интерактивному телевидению, 40% — это устройства с квадратным разрешением 4:3. Но их владельцы постепенно переходят на недорогие китайские плазмы, работающие на Android — те стоят 10-15 тысяч рублей и относительно доступны, поэтому доля престарелых телевизоров сужается.

Из остальных 60% можно выделить пласт телевизоров конца нулевых: это широкоформатные экраны, с хорошей картинкой и звуком, но они всё ещё не поддерживают приложения — таких около 7%. Оставшиеся 53% относятся к Smart TV.

Smart TV — это маркетинговое название технологии, как 4K. Название подразумевает, что эти телевизоры можно подключить к интернету и устанавливать на них приложения. Внутри этого сегмента широкая «палитра» производителей: недавно там появился даже Xiaomi. Сюда же относятся и телевизоры с операционными системами на базе Android: либо телевизионного, либо мобильного, но адаптированного под пульт — в обоих случаях можно что-то установить и даже поиграть в игры.

Было заметно, как с рынка пропали телевизоры Philips и Toshiba, но они возвращаются с разработкой, сделанной на базе оболочки браузера Opera. По аналогии с Google Chrome, который сделан на движке Chromium — тот распространяется свободно и его используют в массе разных индустрий.

В основном рынок делят между собой Samsung и LG. У каждого гиганта есть своя операционная система — это Tizen и WebOS и свои магазины приложений. Следом по популярности — Android TV, а замыкают четвёрку операционные системы на Linux.

В середине десятых телевизоры пережили бурный рост: мы заметили, что российские зрители всё чаще включали голубой экран по сравнению с компьютером. В тот момент телевизоры стали доступнее, а ещё случился экономический кризис. Люди побежали за «седьмой плазмой» себе в однушку — сберечь деньги или продавать их потом на «Авито». У многих до сих пор стоят эти устройства.

Несмотря на громкое название, по железной «начинке» телевизоры Smart TV напоминают скорее медленные смартфоны — у них немного оперативной и встроенной памяти, не лучшие средства обработки. Их особенность в том, что всё заточено на проигрывание видео, поэтому телевизоры с трудом справляются с большими картинками, анимацией и современными интерфейсами в приложениях.

Часть аудитории, которая при покупке представляет себе «умный космолёт», разочаровывается, когда приложения тормозят или не запускаются из-за невысокой производительности.

Но технологические гиганты не видят смысла ставить в телевизоры более совершенную «начинку»: там не развит рынок игр, а пользователи, как правило, докупают приставки — Apple TV, PlayStation или ростелекомовскую.

Развитие рынка приложений притормаживает основная телевизионная аудитория — она достаточно возрастная и с осторожностью относится ко всему новому. Если в приложениях появляются эксклюзивные сериалы или спортивные трансляции, то привыкание идёт легче. Поэтому продавцы телевизоров нередко раздают промокоды, отправляя зрителей в приложения.

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

Разработка телевизионного приложения: тонкости и ограничения

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

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

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

Общаться с техподдержкой производителей самих телевизоров не нужно: достаточно зарегистрироваться на их сайтах для разработчиков — заполнить нужные поля и подтвердить документами, кто мы есть. Затем мы получаем доступ к документации, где описаны технические требования, методы воспроизведения видео или коды для кнопок. Всё это в открытом доступе, правда, на английском.

Основной нюанс при разработке — другое поведение пользователя. На смартфонах все привыкли листать, тапать, свайпать. А приложения под Smart TV больше похоже на сайты времён WAP — раннего мобильного интернета. Навигация в телевизорах осуществляется в духе «вниз-вправо-назад». Поэтому разработкой на каждой платформе занимается своя команда: кто-то делает приложения под iOS, другие — под телевизоры.

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

Первый макет главного экрана был нарисован в ноябре 2017 года

Пульт — это доминирующее устройство ввода на телевизорах. Крайне редко можно встретить пользователей, которые подключают клавиатуру и мышь. Сейчас у всех пользователей либо аэромыши — пульты, которые улавливают движения руки в воздухе, — либо стандартные пульты с четырьмя кнопками-стрелками или джойстиком. С их помощью на экранной клавиатуре вбиваются запросы, номера телефонов или другие не очень объёмные тексты.

Аэромышь в работе

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

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

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

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

В 2012 году любое приложение на телевизоры можно было опубликовать за неделю, но и количество откровенно «удивительных» разработок было велико. Теперь основные производители, Samsung и LG, заметно усложняют процесс ревью — процесс проверки приложений на ошибки. Эта ситуация противоположна мобильному рынку, где Apple и Google стараются ослабить контроль.

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

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

Следом в консоли разработчиков, где мы регистрировались, меняется статус. Там мы ждём изменений и наблюдаем, как с карты списываются деньги — тестеры пробуют покупки внутри приложения. Возможна такая ситуация: сбой произойдёт на стороне банка, а приложение вернётся к нам с критическим замечанием — «нельзя ничего купить». Тогда нужно будет проходить процедуру заново.

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

Процедуры проверки у всех свои — кто на что горазд. С Samsung произошёл самый экзотический случай: они выдёргивали интернет-кабель на разных этапах работы приложения и получали целую палитру ошибок. Но не факт, что при следующем обзоре они займутся тем же самым. Возможности апеллировать к их методам у нас нет, разве что в консоли написать «ребят, это бредятина».

Самое невыносимое — когда у новых телевизоров появляются особенности, которые не описывают в документации. И просьбу рассказать подробнее они тоже могут проигнорировать.

— А где это в документации?

— Ну, нету.

Пример такой особенности — обязательная поддержка аэромыши на устройствах LG. Если где-то она работает неправильно, то устранение ошибки превращается в ад: претензии есть, а образца работы — нет.

Коллекционировать все подряд телевизоры мы тоже не можем, хотя имитируем поведение российского покупателя — смотрим на отзывы, соотношение цены и качества, приобретаем популярные устройства. Сейчас наш парк составляет около 25 моделей, часть из которых пришлось искать на «Авито» — производитель уже снял их с производства.

Ещё один нюанс: нам не сообщают заранее об обновлении заводских прошивок. Они тихо установятся, а наше приложение перестанет работать сразу на всех актуальных моделях.

— А что случилось? Почему не работает?

— Да и не должно, мы обновили прошивку.

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

У Samsung и LG есть русские бизнес-представительства, а у LG даже и техподдержка с тестовой лабораторией. Обзор они всё равно сделают в Корее, но предварительно могут посмотреть у нас — там сидят придирчивые ребята, зато после их обзора проще на основном этапе.

Samsung работают скорее в режиме «отписок»: единственный способ обращения — через основной портал. Возможно, на «тикеты» когда-нибудь ответят. С Android таких проблем нет — после первого обзора релиз всегда будет занимать четыре часа.

Так выглядит общение с техподдержкой Samsung в консоли

С минорными ошибками стартовать можно, достаточно поставить галочку, что мы согласны с ними запуститься. Поправлять их необязательно, иногда достаточно отметить, что ошибка — на стороне производителя. Был случай, что в минорную ошибку от LG попала упущенная точка в описании приложения.

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

Совпадающее разрешение, потому что телевизионные приложения не умеют адаптироваться под размер экрана.

Нельзя показывать взрослый контент без предупреждения, а эротику — совсем нельзя.

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

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

Если пользователь совсем недоволен, он идёт жаловаться в App Store или Google Play — там легче ввести отзыв, несмотря на то, что это вообще другое приложение. Классикой стало, что люди жалуются на платный контент — обвиняют приложение на Smart TV в желании нажиться и снижают наш рейтинг в магазине Apple.

Кроссплатформенная претензия от пользователя

Модель потребления телевизионного контента забронзовела и вряд ли изменится в будущем. Все смотрят телевизор либо перед сном, либо фоном — наши приставки порой отдают статистику, что телевизор не выключают неделями. Он не станет чем-то большим, и не приобретёт экзотические ответвления.

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

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

Телевизор-картина в раме. При помощи сенсора он подстраивает свою яркость под окружение

Железо в телевизорах будет ритмично двигаться вперёд — для высокого качества изображения понадобится более мощный процессор и больше оперативной памяти.

Вполне возможно, что телевизоры станут органичной частью «умных» домов, но не начнут играть центральную роль. Логично, что её забрали себе колонки — в аудиосистемах всё крутится вокруг качества звука, поэтому именно там и зародились голосовые ассистенты. На телевизоре первостепенна картинка, но речевые команды там тоже есть — мы уже наблюдаем микрофоны в новых пультах.

А вот камеры в телевизорах уже были — это пройденный этап. В телевизорах LG ещё пять лет назад можно было переключать каналы по взмаху рук. Ещё телевизоры с камерой могли понять, что перед ними никого нет и выключиться, а зрители использовали камеры для общения в Skype. Это осталось игрушкой, как и 3D-очки: сложно обучить пользователя новым паттернам поведения — взмахам рук.

Разговоры про Smart TV в последнее время участились, продаются умные телевизоры чаще, чем обычные, их аудитория постоянно растет, но вот магазины приложений пустуют. Почему так? Ведь, казалось бы, разработка под Smart TV не отличается от front-end’а: привычные JavaScript, HTML, CSS и браузер. Все дело в том, что кодинг под Smart TV имеет свои специфические особенности, о которых лучше знать еще при проектировании приложения.

Что такое Smart TV и зачем нужны приложения в телевизорах?

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

Что же такое Smart TV? Это интернет и интерактивные сервисы в телевизоре или телевизионном ресивере, или, вкратце, компьютер в форм-факторе «зомбоящика». Первую попытку реализовать подобие Smart TV предприняла компания Microsoft в далеком 1997 году, но идея провалилась из-за dial-up-соединения и CRT-телевизоров. Позднее возник другой способ сделать телевизор «умным»: в 2000 году стали появляться устройства Set Top Box (STB) различных производителей, расширяющие функционал стандартного (кабельного, спутникового) ТВ. STB — это обычная телевизионная приставка, принимающая сигнал цифрового телевидения, декодирующая и преобразующая его в аналоговый сигнал для вывода через разъемы RCA или SCART либо выводящая сигнал через разъем HDMI на телевизор. Но с ростом скорости соединения и новыми технологиями экранов стали появляться телевизоры со встроенным функционалом Smart TV, и с 2009 года началась сертификация таких устройств. В настоящий момент технология Smart TV внедряется в различные устройства: телевизоры, ресиверы цифрового телевидения, Blu-ray-проигрыватели, игровые консоли и аналогичные им девайсы.

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

Если планируешь разработку для моделей 2011 года и старше, то не рассчитывай на помощь CSS3. Вспоминай, как делать спрайты, и приготовься к интересным особенностям CSS, которые не встречаются в браузерах на компьютере и редко поддаются логичному объяснению.
Мощность вычислительного модуля телевизора в разы слабее компьютера, не удивляйся, что анимации в старых моделях будут отнюдь не плавными, а при измерении скорости исполнения кода окажется, что он в десятки и сотни раз медленнее, чем в браузере.
Слабая документация у некоторых производителей, а иногда и полное ее отсутствие могут привести тебя в отчаяние и заставят проводить часы на форумах разработчиков.
Для тестирования придется использовать реальные телевизоры. Эмуляторы не повторяют полного функционала устройств и часто содержат свои собственные, не возникающие на реальных устройствах баги.
В телевизорах полностью отсутствуют средства отладки, придется использовать свои «велосипеды» при разработке.
Непривычное взаимодействие пользователя с приложением. Учитывай, что, скорее всего, передвигаться по приложению тебе придется с помощью одного пальца руки, нажимая на кнопки пульта управления (правда, можно еще управлять голосом, жестами и гироскопическим пультом, как, например, у LG, но такое встречается далеко не во всех моделях и не у каждого производителя). На этапе проектирования приложения необходимо учитывать не только навигацию внутри приложения, но и ввод данных в инпуты.
Необходимо прорабатывать ситуацию потери соединения. Небольшая подсказка: тестировщики Samsung в процессе премодерации для своего магазина любят при проигрывании видео отключить сетевой кабель из разъема и смотреть, как эта ситуация отрабатывается в приложении :).
Разнообразие JavaScript API платформ усложнит кросс-платформенную разработку в разы, каждый производитель предоставляет свой API для взаимодействия с внутренним функционалом (проигрывание видео, отображение клавиатуры и прочее).

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

Samsung

Samsung сейчас занимает наибольшую долю среди всех телевизоров с поддержкой технологии Smart TV. В моделях 2010 и 2011 года в качестве движка браузера используется MAPLE — сильно измененная версия Gecko, который был в Firefox 3.0. К счастью разработчиков, компания отказалась продолжать изобретать свой велосипед и с 2012 года в телевизорах Samsung Smart TV используется WebKit.

Помимо управления с пульта ДУ, в этой платформе можно использовать управление голосом и жестами (начиная с моделей 2012 года), а также подключать привычную мышь и клавиатуру.

Для разработчиков Samsung предоставляет SDK с эмуляторами и своей средой разработки на базе Eclipse. На сайте есть документация с множеством примеров и возможность удаленного тестирования на реальных устройствах модельного ряда 2013-го и выпущенных позднее (очень полезная для тестирования возможность). Есть недокументированный функционал, поэтому ответ порой придется искать на форуме, к счастью русскоязычном.

Ключевые возможности API: управление звуком из приложения, получение данных сети и модели, широкие возможности управления плеером.

Отличительная черта этой платформы — возможность использовать Magic Remote, гироскопический анатомический пульт управления. Движение пульта в пространстве сопровождается движением курсора на экране, что очень сильно упрощает навигацию внутри приложений.

Из других способов управления — многокнопочный пульт и распознавание голоса. Во всех моделях LG Smart TV используется WebKit, что значительно сокращает количество «специфичных» багов.

LG предоставляет для разработчиков подробную документацию и SDK с эмуляторами и средой разработки, построенной на основе Eclipse. У платформы LG есть еще одна особенность — приложение необходимо зашифровать на сайте перед выгрузкой на устройство.

Компания LG является учредителем Smart TV Alliance — это проект, созданный в 2012 году совместными усилиями с TP Vision (компанией, производящей телевизоры под брендом Philips) в целях создания унифицированной платформы приложений для умных телевизоров.

Philips

Достаточно своеобразная платформа. Вторая по объемам продаж в России, но, несмотря на это, разработка для Philips конкретно прокачивает навыки логического мышления, так как документация невероятно скудная :).

Вот что известно про эту платформу:

До моделей 2012 года вместо HTML необходимо было использовать CE-HTML (специально разработанный стандарт для телевизоров и мобильных устройств на основе XHTML).
Нет структурированной документации, зато есть примеры и немного статей, из которых можно крупицами собирать информацию.
Очень плохой эмулятор и отсутствие возможности запустить приложение полноценно в телевизоре. Для тестирования приходится открывать приложение во встроенном в устройство браузере.

Разработка кросс-платформенного приложения при помощи Smartbox

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

возможность написать абстрактный код, основываясь на API библиотеки, а не каждого TV или приставки;
добавление новой поддерживаемой платформы без изменения кода самого приложения;
плагин навигации, позволяющий переключать фокус внутри приложения без лишних проблем;
инпуты и виртуальная мультиязычная клавиатура;
плагин для использования возможности управления голосом;
плагин легенды (подсказки по клавишам внизу экрана);
абстракция LocalStorage — хранение данных на конечных устройствах;
абстракция над функциями плеера;
удобная замена console.log в телевизоре.

На данный момент библиотека позволяет запускать приложение на трех мажорных платформах:

Кроме того, Smartbox без проблем запускается и на приставке STB Mag 200/250.

Добавить новую платформу в Smartbox не составит труда, в репозитории ты сможешь найти документацию, как это сделать. Код библиотеки мы выложили на GitHub.

LET’S GO!

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

Накидаем HTML для меню:

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

Добавим HTML для сцен.

Теперь HTML нашего приложения готов, приступим к написанию главного JS-файла приложения app.js. После инициализации самого Smartbox происходит старт приложения.

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

Метод showContent будет скрывать текущую сцену и отображать новую. Каждая сцена будет иметь три метода — init для разовой инициализации и show / hide для управления отображением. Реализация методов отображения будет одинаковой во всех сценах:

Ну а теперь приступаем к реализации сцен, я буду приводить код без методов show/hide. Но для начала вынесем список видео в отдельный файл:

Можно приступать к реализации сцены со списком видео.

Сцена со списком видео

Сцена со списком готова, можно запускать видео и добавлять новые элементы. Создадим возможность использовать инпуты в Smart TV, в методе init сцены с полями ввода впишем код:

Сцена с инпутами и виртуальной клавиатурой

Теперь можно вводить данные в поля ввода, отображать и скрывать клавиатуру. Остается добавить код для сцены с примером навигации. На элементе с классом nav-item вызывается событие nav_focus при попадании фокуса на него и nav_blur при потере фокуса. Добавим обработчики для этих событий в сцене.

Сцена с примером навигации

Основной код для сцен готов, приложение функционирует, остается только добавить подсказки для клавиш в плагине легенды. Все возможные кнопки в легенде представлены на рис. 1, а пользоваться клавишами несложно:

Рис. 1. Возможные подсказки плагина легенды

Готовый код приложения ты можешь найти тут. Также можешь посмотреть на приложение в действии. В браузере навигация осуществляется с помощью мыши или стрелок клавиатуры, а кнопки пульта RED, YELLOW, GREEN, BLUE заменяются на клавиши A, B, C, D.

Заключение

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

Если хочешь поучаствовать в разработке Smartbox — мы всегда рады pull request’ам на GitHub. А если возникли вопросы по разработке под Smart TV — пиши мне.

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

Программирование для webOS, инструменты разработки, документация, обмен опытом

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

comrat » 19 сен 2018, 22:11

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

Примечание
Данная статья является по сути копией соответствующей статьи на хабре и публикуется самим автором оригинальной статьи. В данной статье описывается полезный инструмент для разработки для SmartTV в целом и для webOS в частности.

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

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

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

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

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

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

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

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

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

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

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

Время чтения: 6 минут

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

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

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

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

у телевизора более 4 часов в день. Те же цифры можно увидеть и в Великобритании — у 73% опрошенных есть умный телевизор в доме, и другие страны, такие как Германия, Швеция, Дания, не сильно отстают.

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

READ MORE UX дизайн и жажда получить $1,000,000 из крипты. Кейс Purrweb

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

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

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

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

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

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

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

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

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

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

READ MORE Как мы за полгода разработали 4 приложения и одну админку для ночного клуба

Как найти для разработчика для 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 .

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

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 тестировании. У нас есть блог, где мы открыто делимся своим опытом, и портфолио с предыдущими работами. Кроме того, мы работаем с React Native и разрабатываем высокопроизводительные приложения для Android TV за 3 месяца.

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

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

Читайте также: