Интернет-телевизор − самый недооцененный сегмент разработки

Disclamer

Всем привет! В компании JetStyle существует отдел занимающийся разработкой для Smart TV. Мы хотим рассказать про технологию Smart TV, которая, как нам кажется, является весьма недооцененной в сфере разработки.

Мы уже несколько лет плотно занимаемся этой темой — накопилось много всего, хочется поделиться и, возможно, облегчить жизнь другим разработчикам.
Для удобства мы разделили рассказ на 2 блока. В первом поговорим о том, что это вообще такое, а во втором расскажем об особенностях дизайна и разработки под Smart TV и, конечно же, о куче проблем, с которыми мы сами столкнулись в процессе.

Про терминологию

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

С технической точки зрения, Smart TV — это мобильная операционная система, заточенная специально под телевизоры. Представляя собой софт, Smart TV может внедряться в самые разные устройства: от самих телевизоров до blu-ray проигрывателей и игровых консолей.

В чем радость-то?

Почему Smart TV — это перспективно, модно и молодежно?

• браузер, причем практически такой же, как и на настольком ПК. Почему “практически”, расскажем чуть позже;
• быстрый доступ к информационному контенту. Например, погоде, пробкам, котировкам, новостям и т.д.;
• онлайн видео — одно из огромных достоинств Smart TV. На данный момент существует достаточно большое количество библиотек бесплатного контента (ivi, tvigle, tvzavr и т.п.) и хороших платных сервисов, предоставляющих свежие фильмы в отменном качестве;
• возможность играть в игры, которые в ближайшем времени приблизятся к консольным, типа Nintendo Wii;
• возможность общаться в социальных сетях, лайкать котиков и прочее)
• ну и наконец, мы можем запросто заказать пиццу или любую другую еду, не сходя с дивана.

Динамика рынка

Как же обстоит дело с ситуацией на рынке Smart TV?
Вообще сколько-нибудь заметно, технология Smart TV начала проникать на рынок в 2010 году. Тогда умных телевизоров было совсем мало, и стоили они достаточно дорого, виджетов почти не было, и большей частью они были разработаны in-house. Всё это счастье работало довольно медленно в силу того, что железо на телевизоре было еще достаточно слабое. Однако, стоит отметить, что в 2010 году Samsung вводит первые платные сервисы для США и Кореи.

В 2011 году доля рынка телевизоров со Smart TV растет и составляет около 10% от общего объема продаж. Активно подключаются сторонние разработчики, появляются действительно хорошие и удобные сервисы, например, youtube, ivi и другие онлайн-кинотеатры. Вообще, стоит отметить, что появление сервисов бесплатного легального онлайн-видео благотворно отразилось на рынке Smart TV.

За 2012 год, к сожалению, нам никакой особой статистики найти не удалось, но интерактивом начинают заметно интересоваться провайдеры. Приложений в маркетах становится все больше, добавляются новые видео-сервисы. Железо в телевизорах становится все “быстрее”.

На данный момент мы можем по-простому оценить общее количество телевизоров со Smart TV, которое предлагается на рынке. Например, на сайте LG на данный момент из 145 телевизоров 55 с функцией Smart TV — это порядка 35%, у Samsung 60% от всех продающихся на сайте телевизоров — со Smart TV. Поигравшись фильтрами на яндекс.маркете и выбрав из популярных марок телевизоров Samsung, LG, Sony, Philips, получаем что порядка 50% из всех представленных телевизоров идут со Smart TV. А если учесть, что к остальным телевизорам, в которых нет такой функции, мы можем подцепить цифровой ресивер со втроенным в него интерактивом, то можно предполагать, что скоро Smart TV, без преувеличения, будет в каждом доме.

Не все так просто

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

Со стороны операторов связи в России также пока наблюдается сдержанный интерес. Свои приставки с интерактивными сервисами имеет ограниченное количество компаний, например, Билайн, МТС, Триколор ТВ и Дом.ру.
Очевидно, что все они понимают перспективность затеи, но уровень реализации у большинства находится на начальном этапе (сервисов мало, схемы монетизации тоже не вполне понятны). Из вышеупомянутых отличился только Дом.ru у которого заметно больше сервисов по сравнению с остальными на текущий момент.

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

Платформы

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

Среди платформ, получивших наибольшее распространение, два мастодонта — Samsung Smart Hub и LG NetCast Platform, на которых строятся Smart TV у соответствующих производителей. В России, да и в мире, наверное, эти платформы наиболее популярны и развиты сейчас по ряду причин, среди которых популярность самих телевизоров, огромное количество документации для разработчиков под эти платформы, значительное комьюнити и т.д. Очень многие приложения поддерживают русский язык.
Эти платформы используются исключительно на телевизорах Samsung и LG, и их нельзя перекинуть на сет-топ-боксы либо какие-то другие проигрыватели.

Opera TV — кроссплатформенное решение для умных телевизоров, т.е. можно прошить платформу на какую-нибудь приставку, плеер или прямо в телевизор, и все будет работать независимо от фирмы-производителя. У платформы также есть свой портал
Opera tv store, который, в отличие от LG и Samsung, располагается непосредственно на серверах Opera, а не на конечном устройстве пользователя. Таким образом, у пользователя находится только интерфейс, а приложения подгружаются динамически. Это дает возможность разработчикам изменять, дополнять, исправлять свои приложения, а для пользователя этот процесс будет совершенно незаметным (если только мы сами не заходим уведомить пользователя, что приложение обновилось). В России данная платформа пока не очень распространена, и появилась только на blu-ray и телевизорах Sony, произведенных в 2012 году, в руках еще не вертели, но размах впечатляет, и в данном направлении Opera займет свое место под солнцем.

Google TV — платформа на Android.
На данный момент, на сколько нам известно, платформа представлена всего одним устройством Sony (о нем можно прочитать здесь: habrahabr.ru/post/146511/), есть возможность открывать android-приложения, на борту несет достаточно большой набор различных приложений. Имеется достаточно обширная документация по платформе, комьюнити, блоги, различные документации обо всем на свете, руководство по адаптации существующих приложений на андроиде на телевизор. Единственный большой минус для нас — на данный момент мы не заметили каких-либо признаков того, что платформа распространяется в России (http://www.google.com/tv/get.html)

Microsoft mediaroom — платформа, как уже понятно, от Microsoft. Является кроссплатформенной, может работать на персональном компьютере, на телевизоре, на приставке и телефоне. В своей разработке ребята из Редмонда опираются на максимальное масштабирование для того, чтобы платформа работала на максимальном количестве устройств, к примеру можно подключить портал даже к xbox360. Для разработчиков приложений предусмотрен пакет инструментов, входящий в пакет разработки приложений Microsoft Mediaroom Application Development Kit, который представляет собой открытую платформу. Приложения для Microsoft mediaroom являются приложенями ASP.NET.
На Российском рынке Microsoft mediaroom заметно используется компанией Beeline в их STB.

Особенности разработки

Он такой же, но квадратный и другой

Телевизор — это не компьютер, поэтому дизайн и разработка под него достаточно сильно отличается.
Даже если у нас есть готовый сайт на HTMLl+CSS+javascript, мы не сможем просто перенести его на телевизор и пользоваться им как обычно.
Во-первых, у нас нет мышки, но есть пульт управления с кнопками, нет клавиатуры, но есть виртуальная клавиатура, нет монитора перед глазами, но есть большой экран на расстоянии 2-3 метров.
Давайте разбираться по порядку.

Нет мышки

Нет мышки — нет мультиков — это одно из главных отличий в разработке и дизайне для телевизора. Мы не можем навестись в произвольное место в нашем приложении, но взамен мы можем визуально показывать ховер на активных элементах. Клик мышки заменяет нам кнопка “ок”, движение мышки по элементам эмулируется четырехпозиционным джойстиком, запрограммированным на перескакивание по блокам в соответствующих направлениях. Тут стоит отметить, что разные производители стараются как-то решить проблему ввода и предлагают альтернативные способы ввода, облегчающие пользователю жизнь. Однако пока что все эти способы носят лишь дополнительный характер, и опереться на них полностью, с радостью забыв опостылевший пульт, мы не можем. Еще очень долго мы будем обязаны поддерживать пульт как основной способ ввода при разработке.

Нет клавиатуры

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

Как мы можем облегчить жизнь пользователям?

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

Дисплей

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

Промежуточные итоги

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

Перейдем к особенностям разработки под Smart TV.
Возьмем наиболее популярные сейчас платформы Samsung и LG, и на их примере посмотрим, с какими проблемами и особенностями мы столкнулись при разработке под телевизор.

Проблемы разработки

Верстка

В принципе верстать можно практически как в web’е, используя доступные стандарты, но есть несколько очень важных моментов:

• обязательно стараться делать как можно меньше вложенность тегов в HTML, при этом соблюдая баланс читаемости: вдруг еще вернетесь к этому проекту через год. Нам это важно, в первую очередь, из-за скорости доступа к элементу из javascript, во-вторых нужно помнить про маленькую память устройства и не самую быструю скорость рендеринга страницы;
• желательно, по возможности, использование чистого javascript, хотя, конечно, это далеко не всегда получается за счет разных очень нужных плагинов на том же jquery. Jquery, на самом деле, нормально отрабатывает на всех платформах, на которых мы разрабатывали, но только в том случае, если мы используем достаточно простые селекторы, и DOM дерево не имеет размеров небоскреба.
• Желательно использовать как можно меньше элементов, положение на странице которых зависит от других элементов. К примеру, для списка постеров в фильмах мы использовали сначала inline-block’и, и скорость перемещения фокуса по ним была далека от идеальной, затем попробовали переделать на float:left, скорость возросла, но не критично. После приняли решение сделать блоки абсолютным позиционированием, и только тогда достигли желаемого эффекта. Способ, прямо скажем, не самый красивый, нам приходится каждому блоку давать top и left, но когда все остальное уже не помогает, приходится чем-то жертвовать, иначе пользователи не простят нам тормозов;
• даже при поддержке CSS3, не нужно использовать его везде.

При разработке под один STB мы столкнулись с тем, что у нас в распоряжении есть практически полный CSS3, transition, rotation, HTML5 и т.д. Глаза наши горели, а сердца учащенно бились, но все встало на свои места, когда мы дошли до реализации дизайна в верстку.
Тогда мы спустились на землю нашу грешную и начали искать баланс между использованием box-shadow, crossfade’ами, slide-эффектами и прочим и комфортным для глаз отображением, без дерганий изображений и т.д. Несмотря на драконовские ограничения, наложеные нами же самими на себя, мы в принципе можем прикрутить любые эффекты и анимации в последствии, в случае, если приставка у оператора внезапно апгрейдится, и железо станет быстрее.

Версионность ПО

Это еще одна печалька. Как известно, Smart TV совсем недавно начал появляться в телевизорах и, в самом начале имел достаточно слабое ПО для приложений. Например, в 2010-2011 годах в Smart TV Samsung был браузер Maple.
Вот его спецификация:
HTML4.01, XHTML1.0, XML1.0 Markup language specifications
HTTP1.0/1.1
CSS1, CSS2, CSS TV Profile 1.0
DOM1, DOM2
JavaScript 1.6
Здесь может быть непонятным, наверное, CSS TV Profile 1.0. На самом деле это спецификация для ТВ устройств, на основе CSS2 и нескольких параметрах из CSS3, на w3c представлена табличка сравнения поддерживамых параметров и их значений в сравнении с CSS2. Спецификация на данный момент уже устаревшая (и сейчас, по крайней мере в последних телевизорах, не используется), но любознательный читатель может почитать поробности тут: www.w3.org/TR/css-tv.

LG скромно называет свой браузер LG browser, он создан на движке Webkit. На ранних этапах уже поддерживает CSS3, работает с flash, мы можем разрабатывать виджеты под HD качество (вернее даже не можем, а должны — такое требование документации), поддержка HTML5, canvas и прочее, правда и на разработчиков они вышли несколько позже Samsung: первое SDK выпущено в 2011 году и уже поддерживало CSS3 и HTML5.

В 2012 году случилось чудо, и на телевизорах этого года стоят Webkit браузеры с поддержкой 2d/3d transform, CSS3 селекторами. Появилась поддержка и HTML5 тегов video, audio, canvas.
LG много времени уделяет эмулятору, который обрастает новыми фичами, внедряет WYSIWYG редактор дизайна приложений, различные валидаторы кода и т.д.

Помимо разных спецификаций новые версии, естественно, награждают нас новым доступным разрешением для виджетов.
На данный момент это 1280х960 (предыдущее разрешение 960×540).
Что это значит для нас?
Во-первых, приложения разработанные для разрешения 1280 не пойдут на старых телевизорах на разрешении 960px, что выливается либо в поддержку заведомо меньшего разрешения 960 и растягивании его на 1280 телевизоре, либо разработку резинового приложения, либо разработку двух независимых приложений.
Так или иначе, Samsung не позволяет нам выкатить одно приложение, которое будет и 960 и 1280 в зависимости от платформы. Для этого нам придется в любом случае делать два приложения, т.к. разрешение задается в приложениях фиксированно в файле config.xml, и править динамически мы его не можем. У Samsung выложен список изменений, так что, отслеживая всегда эту информацию, мы не должны столкнуться с проблемами.

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

Быстродействие.

Браузер Maple в телевизоре Samsung отличается плохооптимизированным javascript’ом, утечкой памяти из-за незначительных погрешностей в коде (о которых в вебе нет необходимости задумываться), плохой работой с изображениями, отсутствием CSS3 параметров (но с барского плеча мы получаем text-overflow:ellipse, достаточно часто применяемый и нужный параметр, спасибо, уже хоть что-то).

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

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

Предложения по оптимизации javascript для виджетов 2011 года:
— если в приложении мы часто меняем структуру DOM, используя к примеру innerHTML и создаем XMLHTTPRequest-объекты раз за разом, то память телевизора закончится очень быстро, и дальше приложение может вести себя непредсказуемо. На это Samsung дает нам достаточно скудную информацию для размышления:
—

 if (this.XHRObj != null) this.XHRObj.destroy(); this.XHRObj =  new XMLHttpRequest(); 

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

— допустим мы заменяем html содержимое с помощью innerHTML. Замена содержимого состоит из двух шагов: удаление соответствующего узла из DOM-дерева, и создание и подключение к дереву нового узла. Так вот узел, который мы удаляем, сохраняется в памяти, и если мы будем часто заменять контент таким образом, рано или поздно память телевизора переполнится, и наше приложение может зависнуть, вылететь, вплоть до перезагрузки самого телевизора (проверили на собственном опыте).
Поэтому есть нативный метод putInnerHTML, который позволяет избежать такой утечки памяти. Используется он несколько иначе, чем innerHTML:

putInnerHtml(‘<h1>Заголовок</h1>’,document.getElementById(‘title’)); 

В Samsung’е обнаружилась проблема еще и с большим количеством изображений. Если в DOM находится более 100 тегов img, то заполнение памяти гарантировано, и в лучшем случае, на картинках более 100 мы просто увидим пустое место, в худшем — получим непредсказуемое поведение приложения. Решается элементарно: не используем больше 100 изображений, а вообще стараемся использовать максимум 50 картинок, чтобы не приближаться к этому страшному лимиту (как сказал доктор “не делайте так”).

Следующий пример

function test() {    var a = new Image();    document.getElementById("foo").appendChild(a); } 

приведет к утечкам в памяти, т.к. конструктор new не очищается из памяти, если мы не удалим его через delete или не присвоим null. Поэтому создавать изображение можем следующим образом:

function test() {    var a = document.createElement("img");    document.getElementById("foo").appendChild(a); } 

В данном случае такой проблемы не вознинет.

Похожая проблема возникает с removeChild.
Чем плох такой код?

element.removeChild(element.firstChild); 

Тем, что removeChild возвращает нам значение, а т.к. мы не присваиваем это значение ничему, то возникает исключение, и память не будет освобождена.
Нам представляют на это 2 варианта решения:
— можем просто подставить переменную влево

var a = element.removeChild(element.firstChild); 

— а можем использовать нативный метод Samsung deleteChild, который не нуждается в переменной:

element.deleteChild(element.firstChild); 

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

Отслеживание ошибок в CSS и HTML с помощью w3c валидатора также будет очень даже не лишней операцией: чем меньше мы напрягаем интерпретатор, тем быстрее мы получим картинку приложения.

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

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

Хранение данных

Очень быстро в разработке приложений мы приходит к тому, что нужно куда-то сохранять данные. Это могут быть как настройки приложения, которые нам нужно хранить все время существования приложения в телевизоре, так и кэширование данных.
Вариантов здесь несколько.
В случае с Samsung, выпущенном в 2010, мы не имеем ничего кроме сохранения данных в локальный файл на телевизор:

var fileSystemObj = new FileSystem(); var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w');    fileObj.writeLine('something to write.');    fileSystemObj.closeCommonFile(fileObj); 

Прочитать данные из файла так же просто, как записать:

var fileSystemObj = new FileSystem(); var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'r'); var strResult = fileObj.readAll(); 

Для записи используем директорию с ID нашего приложения в названии.
Этот способ работает достаточно быстро, и никаких проблем с ним нет.
В 2011 году появилась возможность работать с cookie.

LG до 2012 года позволял работать с cookie, с 2012 года мы можем использовать HTML5 sessionStorage и localStorage. Этого вполне достаточно для сохранения настроек пользователя.

Экранная клавиатура.

Это отдельная песня для разработчика.
К примеру при разработке для одного STB нам досталась полностью нативная клавиатура, если можно так выразиться, без возможности внести правки в дизайн, в ее код, хоть во что-нибудь. Работала клавиатура посредством перекидывания focus() на input. В любых случаях, когда мы хотим вызвать клавиатуру, нет других способов кроме фокуса на инпуте, а все потому что получить введенное с ее помощью значение мы можем, только проверяя состояние input на onchange(). Т.е, когда мы закрывали клавиатуру, происходило событие onchange на инпуте, и мы могли взять это значение. К тому же мы столкнулись с еще одной проблемой: input (как и некоторые другие элементы, типа a textarea button iframe) поддерживает focus(), и если мы, находясь на каком-то сайте, начнем нажимать кнопку “tab”, к примеру, фокус будет перемещаться по этим элементам. В приставке таким образом перемещается ховер при нажатии на любую кнопку четырехпозиционного джойстика (в силу того, что там был движок Opera). Поэтому если у нас есть input на странице, мы перемещаемся по блокам (визуальный ховер находится на блоках), но настоящий фокус стоит на input, и когда мы нажимаем “ок”, ожидая, что перейдем по ссылке на блоке, у нас открывается клавиатура. Мы это решили добавлением свойства disable к каждому инпуту, и когда нам нужно, убираем этот параметр и делаем focus() на инпуте (подобные ухищрения с инпутами были обусловлены дизайном в метро-стиле).

Клавиатуру в Samsung отличает то, что мы можем вызвать ее программно без всяких инпутов. Можем перехватить вводимые данные в любом момент ввода. К тому же клавиатура имеет удобный старый добрый T9. Нужные символы при должной сноровке вводятся раза в 2 быстрее полных qwerty клавиатур. Также можем переключить клавиатуру в qwerty режим. Можем добавить окошко с инпутом, и с любым описанием к нему. Можем управлять координатами всех окон клавиатуры. Мы прикручивали к ней автодополнение на выбор города, клавиатура не сопротивлялась. Единственное, что нельзя — изменять дизайн клавиатуры, доступа к этому нет (клавиатура).

Клавиатура LG не настолько прокаченная, как Samsung, но имеет свои преимущества. Клавиатура представлена отдельной js-библиотекой, и может быть подключена или не подключена в наше приложение, это значит, что мы можем поменять общий вид клавиатуры, дизайн кнопок, поставить свои иконки на кнопки. Но руководство по использованию данной клавиатуры запрещает нам вносить изменения в js-файлы. Печаль в данном случае в том, что мы имеем жестко ограниченную структуру кнопок, и менять ее не можем, разве что перекрашивать. Это связано с тем, что если мы изменим CSS, и переставим или удалим какие-то кнопки, то работать она будет уже неправильно.

Дебаг и тестирование

Одна из самых важных задач — это, конечно, дебаг приложений.
Здесь у Samsung отличное решение, встроенное в SDK.
С помощью alert() мы можем выводить значения нужных нам переменных (в телевизоре alert() не вызывает никаких всплывающих сообщений, а предназначен именно для дебага). Сама консоль выводит подробнейшую информацию о том, что происходит с нашим приложением. Единственное на что дебаг не ругался, а просто молчал — это переполнение памяти, тут уже приходилось искать ошибки самостоятельно. Также SDK Samsung’a содержит эмулятор под все версии платформы. Эмуляторы соответствуют действительности где-то на 95%. В разных эмуляторах по разного рода данным типа утечек памяти или некоторым параметрам CSS можно увидеть существенные отличия. Например мы столкнулись с тем, что в одной из версий отсутствующий line-height приравнивался к какому-то фиксированному значению, около 10 пикселей.

В LG предусмотрен аналогичный Samsung дебаг, только вместо alert’a сообщения можно выводить более привычным образом через console.log. Логирование можно вести в отдельный файл. В отличие от Samsung логер не выводит нам полной информации о работе виджета, а только ошибки и сообщения, которые мы генерируем сами. С 2012 года появляется ресурс монитор, правда мониторить пока можем только эмулятор, а мониторинг загрeзки телевизора заявлен на будущее. В 2013 году появился voice input, тестирование голосовых команд, также можно менять шрифт в эмуляторе (мега полезная фича), делать скриншоты.

Под STB часто дебага нет. Никакого. Совсем. Был случай когда javascript дебажили размещением на треть экрана непрозрачного слоя и выводом в этом слое значений нужных переменных. При работе с нативными методами приставки других выходов мы не нашли.

Авторизация

Для девайсов, у которых нет мышки или тача, существует значительная проблема авторизации, например, в соц. сетях. Возьмем для примера facebook. Мы можем разместить вход через facebook на своем сайте, для этого мы можем использовать oauth2.0, в iframe откроется окошко facebook’a с предложением ввести логин/пароль, и вот мы залогинились. Если попробуем сделать также на телевизоре, то столкнемся с очевидной проблемой: как нам ввести свои данные в iframe окне facebook’а? Дело в том, что политика безопасности не позволяет нам иметь доступ к iframe-окну, если его контент находится не на нашем домене. Соответственно, мы не можем прописать в это окно обработку нажатий кнопок пульта, и в итоге мы совершенно беспомощны в наших попытках ввести свои данные – Видит око, да глаз неймёт.
Решается эта проблема с помощью пин-кодов.
На компьютере на Facebook регистрируем наше приложение, получаем app_id. В приложении используя этот app_id делаем запрос на получение кода https://graph.facebook.com/oauth/device?type=device_code&client_id=150792241632891, затем идем на компьютер, вводим код на предложенной странице facebook.com/device/ и подтверждаем доступ к нашему аккаунту. После этого на телевизоре мы можем сделать запрос на получение токена
https://graph.facebook.com/oauth/device?type=device_token&client_id=150792241632891&code=123456. Дальше, используя этот токен может запрашивать информацию с facebook’a.
Также работает авторизация и на youtube. Способ придуман не нами, так же авторизуются приложения youtube или facebook под xbox.

Тестирование на ТВ

Samsung, помимо неплохого тестирования на эмуляторе, имеет достаточно простой способ тестирования непосредственно на телевизоре. Для этого в SDK предусмотрена возможность запаковать приложение в понятный телевизору формат.
После этого размещаем получившийся widget.xml и папку с приложением в корне нашего локального сервера.
На телевизоре мы должны залогиниться под developer’ом и в настройках, указав IP адрес нашего сервера, выгрузить пакет на телевизор. Приложение появится в списке приложений.
Что немаловажно: запуская это приложение на телевизоре, мы в консоли SDK можем отслеживать состояние нашего приложения точно так же, как если бы мы запускали приложение в эмуляторе.

Тестирование на ТВ LG отличается от Samsung и напоминает выполнение квеста в каком-нибудь RPG.

• Для начала мы регистрируем аккаунт на LG Apps TV.
• Затем с помощью SDK запаковываем наше приложение в zip архив.
• После этого мы можем залить данный архив на LG Developer сайт, и после этого мы можем скачать с сайта сформированный DRM пакет нашего приложения.
• Дальше мы распаковываем DRM пакет обычным архиватором.
• Видим папку с числовым значением — это ID нашего приложения.
• Далее, создаем в корне флешки папку lgapps, в ней папку installed и в нее уже помещаем нашу папку с ID.
• Вставляем флешку в телевизор.
• Дальше еще идёт саб-квест: если вдруг в региональных настройках стоит не наша страна (как именно он это определяет — нам не известно), то мы не сможем протестировать наше приложение.
• И вот только если все ОК, мы нажимаем на кнопочку “my apps”, проматываем все приложения которые там есть до конца, и … аллилуйя, вот оно наше приложение!

Если учесть, что в начале 2012 года, когда мы делали виджет под LG, пытались протестировать на телевизоре, мы прошли 9 кругов ада, и в конце оказалось что my apps не работает, т.к. LG еще не подключила к тестам Россию. Можно представить сколько было радости.

Выкатка в продакшн

Для Samsung: регистрируем информацию о продукте в Селлер офисе, получаем ID приложения и заголовок.
Селлер офис — это место, где мы видим информацию по нашему приложению, отсюда мы можем передать приложение для размещения в Samsung Smart TV App Store. Также используется для наблюдения за загрузкой нашего приложения, историей, состоянием приложения и т.д.
После регистрации в селлер офисе мы можем загрузить наше приложение. После размещения приложения мы ожидаем рассмотрения заявки Samsung’ом.
Как только Samsung проводит тестирование приложения и подтверждает нашу заявку, приложение размещается в Smart TV App Store. Подробное описание всех этапов есть на сайте разработчиков Samsung.

Для LG: регистрируемся в селлер лаундж. Читаем руководство по сабмиту приложений. Собственно, добавляем наше приложение. В этом же селлер лаундже можем отслеживать статус нашего приложения. Ожидаем одобрения нашего приложения. Проверка приложения проходит по заранее известным документированным критериям, доступным разработчикам. После одобрения приложения, мы можем увидеть его в LG Apps tv.

Антракт

Рассказывать по этой теме мы можем много, благо опыт обширный. Хочется понять на сколько интересна тема и про что бы хотелось услышать еще?

В общем, очень ждем ваших отзывов.