Знайомимося з особливостями розробки під Smart TV і вчимося робити додаток для телевізора

Зміст статті

Розмови про 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-програвачі, ігрові консолі та аналогічні їм девайси.

Додатки розумного ТБ дозволяють переглядати різний відеоконтент: фільми, серіали, записи і трансляції передач і спортивних подій, музичні кліпи, відеоролики; дають можливість читати новини, переглядати соціальні мережі і спілкуватися по Skype або іншому VoIP. Існують розвиваючі програми для дітей і гри.

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

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

Samsung

Сайт для розробників

Samsung зараз займає найбільшу частку серед усіх телевізорів з підтримкою технології Smart TV. У моделях 2010 і 2011 року в якості движка браузера використовується MAPLE - сильно змінена версія Gecko, який був в Firefox 3.0. На щастя розробників, компанія відмовилася продовжувати винаходити свій велосипед і з 2012 року в телевізорах Samsung Smart TV використовується WebKit.

Крім управління з пульта дистанційного керування, в цій платформі можна використовувати управління голосом і жестами (починаючи з моделей 2012 року), а також підключати звичну миша і клавіатуру.

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

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

LG

Сайт для розробників

Відмінна риса цієї платформи - можливість використовувати 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.

INFO

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

LET'S GO!

Але досить теорії, давай спробуємо написати крос-платформенне додаток для ТВ, використовуючи Smartbox. Наше додаток буде мати меню, список відео з зовнішнього файлу, демонстрацію навігації і приклади полів введення з віртуальною клавіатурою. Додаток буде в трендовом Flat-дизайні.

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

<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>

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

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

<Div class = "scenes-wrapper"> <! - Список відео будемо генерувати з зовнішнього файлу -> <div class = "scene scene_video js-scene-video" data-nav_type = "vbox" data-nav_loop = "true "> </ div> <! - Сцена для демонстрації інпут -> <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> <! - Сцена для демонстрації навігації -> <div class = "scene js-scene-navigation"> <ul class = "navigation-items"> <li class = "navigation-item nav-item" > 1 </ li> // ... <li class = "nav igation-item nav-item "> 8 </ li> </ ul> <p class =" navigation-info "> </ p> </ div> </ div>

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

// SB () - головна функція Smartbox, викликається після ініціалізації всіх плагінів і запуску платформи SB (function () {App.initialize ();});

Під час ініціалізації покажемо легенду, запустимо навігацію і встановимо основні обробники подій для кнопок пульта і плеєра.

App.initialize = function () {this. $ Wrap = $ ( '. Wrap'); // Показуємо легенду $$ legend.show (); this.setEvents (); // Запускаємо навігацію (в фокусі буде перший видимий елемент з класом nav-item) $$ nav.on (); }; App.setEvents = function () {var self = this; // Відображаємо сцену при кліці на елементі меню $ ( '. Menu'). On ( 'click', '.menu-item', function (e) {// Саме тут і потрібен атрибут data-content var scene = e. currentTarget.getAttribute ( 'data-content'); self.showContent (scene);}); $ (Document.body) .on ({// Приховуємо / відображаємо інтерфейс при кліці по синій кнопці пульта або клавіші D на клавіатурі 'nav_key: blue': function () {self.toggleView ();}, // remote events ' nav_key: stop ': function () {Player.stop ();},' nav_key: pause ': function () {Player.togglePause ();},' nav_key: exit ': function () {SB.exit () ;}}); };

Метод showContent буде приховувати поточну сцену і відображати нову. Кожна сцена матиме три методу - init для разової ініціалізації і show / hide для управління відображенням. Реалізація методів відображення буде однаковою у всіх сценах:

show: function () {if (! _inited) {// Відкладена ініціалізація сцени this.init (); _inited = true; } This. $ El.show (); }, Hide: function () {this. $ El.hide (); }

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

window.App.videos = [{title: 'Elephants Dream', url: 'https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4', type: 'vod'}, {title: 'Redbull', url : 'http://live.iphone.redbull.de.edgesuite.net/webtvHD.m3u8', type: 'hls'}, // ...];

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

Сцена зі списком відео init: function () {// В this. $ El зберігаємо елемент сцени this. $ El = $ ( '. Js-scene-video'); // Встановлюємо оброблювач для кліка по елементу списку this. $ El.on ( 'click', '.video-item', this.onItemClick); this.renderItems (App.videos); }, // Генерація списку відео renderItems: function (items) {var html = '', itemHtml = _.template ( '<div class = "video-item nav-item"> {{title}} </ div>' ); // console.log (items, itemHtml.toString ()) for (var i = 0, len = items.length; i <len; i ++) {html + = itemHtml (items [i]); } This. $ El .empty () .html (html); }, // Оброблювач кліка по елементу onItemClick: function (e) {var index = $ (e.currentTarget) .index (); // window.Player - плагін Smartbox. Відео запускається передачею об'єкта c URL і type в метод play Player.play (App.videos [index]); },

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

init: function () {this. $ el = $ ( '. js-scene-input'); var $ valueText = this. $ el.find ( '. js-input-1-val'); this. $ el.find ( '. js-input-1') // text_change - подія плагіна SBInput, викликається при зміні тексту інпут .on ( 'text_change', function () {$ valueText.html (this.value); }) // плагін SBInput - звичайний плагін jQuery .SBInput ({keyboard: {// Для першого інпут клавіатура буде російська з можливістю відображення цифр type: 'fulltext_ru_nums'}}); this. $ el.find ( '. js-input-2'). SBInput ({keyboard: {// Спеціальний layout клавіатури для введення електронної пошти type: 'email'}}); this. $ el.find ( '. js-input-3'). SBInput ({keyboard: {// layout тільки з дев'ятьма цифрами type: 'num'}, // Максимальна кількість символів в інпут max: 4}); }

Сцена з інпут і віртуальною клавіатурою

Тепер можна вводити дані в поля введення, відображати і приховувати клавіатуру. Залишається додати код для сцени з прикладом навігації. На елементі з класом nav-item викликається подія nav_focus при попаданні фокусу на нього і nav_blur при втраті фокуса. Додамо обробники для цих подій в сцені.

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 ( '');}}); }

Сцена з прикладом навігації

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

$ ( '. Menu-item'). On ({ 'nav_focus': function () {// Відображаємо в легенді Enter $$ legend.keys.enter ( 'Show content')}, 'nav_blur': function () { // Приховуємо Enter з легенди $$ legend.keys.enter ( '')}});

Мал. 1. Можливі підказки плагіна легенди

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

висновок

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

Якщо хочеш взяти участь в розробці Smartbox - ми завжди раді pull request'ам на GitHub. А якщо виникли питання по розробці під Smart TV - пиши мені.

Хороших ідей і відмінних додатків!

Чому так?
Що таке Smart TV і навіщо потрібні додатки в телевізорах?
Божевілля?
Що ж таке Smart TV?

Nav view search

Навигация

Курсы

бесплатные приколы

шаблоны joomla 1.7

Дополнительная информация

Новости

Учебный центр "Магнат"...

Дизаин интерьера и...

web-дизайн

Практическая...

Курсы массажа