Как сделать приложение для lg smart tv

Обновлено: 06.01.2025

Подводные грабли разработки приложений для 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 - пишите в комментариях или на телеграм канал, постараемся на все ответить.
Спасибо за внимание! =)

Разговоры про 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 — пиши мне.

У меня телевизор LG LM8600 SMART TV. Если вы не знаете, я объясняю, что из магазина LG SMART WORLD на этой модели телевизора не устанавливаются российские и украинские приложения, по этому я их запускаю через флешку с помощью developer.lg. Так я нашёл и поставил некоторые виджеты. Добрый человек написал, что “Список всех приложений, доступных в LG Smart World на моём 32LB582V-ZG (Украина) при желании могу повытаскивать их zip или url.. (кроме платных)” , я тоже вежливо попросил. Вот и всё.

Оно и до этого могло запускаться с флэшки, если за пределами России или СНГ, это я про LG. В магазине приложений других стран его нет, я кое как где то нарыл в инете предидущую версию. С загрузкой своих листов у меня почему то какая то лажа, то есть полный ноль. Каналов в два раза меньше чем для Самсунга (тоже стало отстойным, убрали почти все основные каналы). Оно у меня так, для коллекции, практически не использую.

Добавлено 23.06.2015, 05:19:

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

А кому ты там свой приватный плейлист загружаешь на сервер, не задумывался ? Smart IPTV гораздо круче.

Инструкция по запуску XSMART на LG Smart TV
Запуск через смену DNS
XSMART для LG SMART TV на платформе NetCast и webOS можно запускать без флешки, для этого необходимо ввести IP адрес DNS сервера (IP адрес DNS сервера и инструкция как его сменить на LG SMART TV дальше в статье).

1. Находим в настройках Сетевое подключение
2. Выбираем тип подключения: проводной или беспроводной
3.1 Если выбрали проводное подключения, то дальше нам покажет что Сеть подключена.
3.2 Нажимаем список сетей или список точек доступа
3.3 Нажимаем Расширенные настройки
3.4 Вводим IP адрес DNS сервера 185.4.74.89
4.1 Если у вас беспроводная сеть, то выберите ее из списка, введите ключ сети. После подключения к точке доступа - нажмите Расширенные настройки в Списке сетей
5. Видим ошибку подключения к DNS серверу, это нормально. В течении 1 минуты повторяем подключение, должно подключится. Если нет - то проверьте правильность ввода DNS 185.4.74.89, выключите и включите ТВ
6. В конце видим
После того как настройка завершена можно приступать к просмотру. Запуск приложения происходит через следующие приложения: vTuner, 1авто, Россия ТВ.

у меня вчера обновление прилетело на lg32lb650v. вроде шустрее начало работать .заметил только коррекциючасового пояса .теперь москва +3 вместо +4 ранее Народ, а что LG smartTV по вебу не конфигурятся? Вроде рутер встроенный есть, а настроить на 5 ГГц нечем, да и WIFI каналы не поменять. Приложений как-то совсем мало. Игрушки никакие, даже шахмат и пасьянсов нет. Не говоря уже про Zumu или Angry Birds. Samba тоже не понимает. Torrent TV через локал прокси смотреть просто невозможно все рассыпается хотя инет 100 мегабит, а по квартире гигабитная сетка. Короче, чую я переплатил за ненужную вещь. придется видимо покупать приставку на Андроиде. А я тут к телеку назаказывал беспроводную клавиатуру с тачпэдом, пульт с мышкой 400-ый. Видимо не пригодится.

Доброго времени суток. Помогите пожалуйста разобраться.

Купил телевизор LG42LB671V. Всё нравится, телек отличный, НО:

1) К нему приобрёл внешний HDD (toshiba dtb305 500gb) для просмотра скачанного контента. При работе с диском с компьютера всё как надо, чтение-запись никаких проблем. Но подключая диск к телевизору начинаются траблы. Каждые 3-5 секунд диск издаёт пищащий звук (будто останавливается диск и паркуется головка). Звук довольно громкий и уже изрядно поднадоел. При этом когда врубаю фильм с внешнего HDD, наблюдаются частые зависания каждые 10-20 минут (может зависнуть полностью, а может повисеть секунд 30 и потом пойти вновь быстро промотав время которое он висел). В общем получаем нормально функционирующий HDD, но дружить с телеком он отказывается. Многократно форматировал, менял файловую систему и размер кластера, результат тот-же. При этом если воспроизводить те же видео файлы на компе - всё отлично. Подскажите, как разрешить проблему.

2) Вдоволь натра***шись с жёстким озаботился поиском облачного хранилища. Сразу же опробовал LD Cloud и он мне очень понравился ибо умеет воспроизводить ранее запущенные видео файлы с того-же места где был закончен просмотр. К тому же есть возможность смотреть 3D видео непосредственно из облака. Однако размер облачного хранилища всего лишь 5Гб. При поиске информации в гугле выяснилось что якобы можно получить 50Гб, если регистрируешься непосредственно с телевизора. Однако после отказа от сервиса и новой регистрации с телека размер моего облака так и остался 5Гб. Возможности оплатить и расширить облако я так-же не нашёл. Собственно, можно ли получить 50Гб в своё распоряжение и как это сделать? Если нет, посоветуйте более подходящее облачное хранилище.

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

Классификация приложений для LG Смарт ТВ

Выделяют 2 типа приложений:

• Глобальные могут использоваться любым обладателем Смарт ТВ на планете.
• Локальные – виджеты, доступные пользователям только определенного региона.

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

Самые популярные приложения

Рассмотрим ТОП наиболее популярных и удобных приложений для LG Смарт ТВ:

Как установить приложения для LG Смарт ТВ?

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

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

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

При соблюдении всех пунктов учётная запись успешно будет создана, и вам останется авторизоваться, введя логин (т.е. электронную почту) и пароль.

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

Далее речь пойдёт о телевизорах, выпущенных после 2015 года. У них стоит современная операционная система – WebOS. Итак, перед установкой приложений проверьте подключение к Интернету и выполните следующие действия:

1. На пульте нажмите кнопку «Smart».
2. Стрелочками на пульте управления листайте вкладки, пока не перейдите в «LG Store». Нажмите «ОК».
3. На экране должны появится списки приложений, доступных в вашем регионе.
4. Выберите интересующий виджет и нажмите кнопку «Установить» («Install»).
   

Если приложение платное, сам процесс установки подскажет вам, что необходимо сделать для его оплаты.

Доступ к приложениям можно получить путем нажатия на пульте кнопки «Home» или «Smart» (на разных моделях называется по-разному) и прокрутки меню до пункта «LG Store».

Обычно установка виджетов не вызывает трудностей, однако популярное приложение ForkPlayer требует дополнительных манипуляций, о которых рассказывается в следующем видео:

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

  
• Close приложение как пользоваться
  
• Приложение guitar tuna как использовать
  
• Не удается запустить приложение microsoft outlook недопустимый аргумент командной строки
  
• Смайлики как в аське для whatsapp
  
• Как запускать приложение от имени администратора всегда