Разработка Tizen-приложения для Samsung Smart Signage Platform (SSSP): гайд для js-разработчиков
В этой статье я хочу рассказать о своем увлекательном путешествии в мир ОС Tizen. В ней я постараюсь подробно описать не только основные шаги по установке Tizen Studio и созданию проекта, но и поделюсь с вами ценными практическими советами по разработке приложений, освещая ключевые аспекты работы с интерфейсом пользователя и эффективного тестирования.
Как я к этому пришел? Всё просто – на работе мне поставили задачу: «Разработать приложение для устройства SSSP». Деваться некуда, придётся разбираться.
Что такое SSSP и Tizen?
Samsung Smart Signage Platform (SSSP) – профессиональные панели Samsung со встроенным плеером (System-on-Chip), также называемые «умными вывесками» (smart signage). В том числе серия дисплеев с ОС Tizen.
Tizen — открытая операционная система на базе ядра Linux, широко используемая на устройствах Samsung (телевизорах, часах, профессиональных панелях и т.д.).
Теперь, немного познакомившись, мы можем перейти к основной теме.
Установка Tizen Studio
Для начала заходим на официальный сайт Tizen для разработчиков за нашим инструментом – Tizen Studio. Скачиваем программу-установщик IDE.
Далее всё предельно понятно:
Читаем и принимаем лицензионное соглашение;
Выбираем положение SDK и данных и начинаем установку;
Готово. Закрываем программу установки.
После установки нужно открыть Package Manager и на вкладке «Extension SDK» добавить расширения:
Samsung Certificate Extension;
TV Extension Tools (т.к. будем писать на SSSP);
Актуальную платформу (на данный момент это TV-Extensions-8.0)
Подключение устройства
После того как мы установили все нужные нам компоненты, можно запустить Tizen Studio.
Теперь нужно удостовериться, что устройство готово к работе. Включаем девайс и начинаем настройку.
Уточню, что я работал с устройством SSSP 6.0, но предполагаю, что версии отличаются лишь внешним видом, поэтому кнопки и функционал плюс-минус одинаковые, и найти соответствующие настройки на устройстве с другой версией не составит труда.
При первом запуске нам предлагают выбрать язык. Затем начинается сама настройка.
Выбор ориентации экрана
Автовыключение (оставим выключенным)
Подключаем к интернету (проводной/беспроводной)
Выбор типа проигрывателя (выбираем «Запуск URL-адреса», чтобы запускать наше веб-приложение, размещенное на сервере)
Установка часов (для удобства установим время)
После настройки переведем девайс в режим разработчика. Для этого продолжительно нажимаем на экран, после чего снизу открывается панель действий. Нажимаем на кнопку «Меню» со значком домика (если у вас нет возможности использовать сенсорный экран, то на пульте это кнопка «HOME» тоже со значком домика).
Открывается панель меню, где нажимаем на кнопку настройки запуска URL-адреса.
На открывшейся странице нажимаем на «Режим разработчика». Я буду подключаться удаленно. Для этого нужно выбрать настройку «удаленный» и ввести IP вашего ПК. Перезагружаем наше устройство.
Есть! Вывеска готова к подключению, переходим в Tizen Studio.
Запускаем Device Manager.
Нажимаем на кнопку справа и открываем Remote Device Manager. Затем добавляем новое устройство.
Вводим IP вывески и имя устройства (порт оставляем по умолчанию).
IP можно посмотреть следующим образом: Меню (на пульте имеет иконку дома) → состояние сети → Настройки IP → IP-адрес.
ВАЖНО! Для успешного добавления устройства в Device Manager нужно убедиться в следующем:
Устройство переведено в режим разработчика;
Введены правильные IP;
Оба устройства находятся в общей сети.
После добавления активируем соединение.
Наше устройство автоматически подключилось в Device Manager и теперь мы можем производить отладку прямо на девайсе.
Чтобы в дальнейшем не мучиться и не искать, сразу разрешим устройству устанавливать веб-приложения.
Правой кнопкой по устройству → Permit to install applications.
Также можно посмотреть DUID устройства, которое в дальнейшем понадобится для создания сертификата.
Создание сертификата
Сертификат нужен для установки приложения на устройство и подписи пакета сборки приложения.
Заходим в Certificate Manager (tools → Certificate Manager).
Создаем новый профиль сертификата.
Выбираем сертификат Samsung.
Тип устройства выбираем TV.
Для создания нового профиля вводим имя сертификата.
Создаем нового автора сертификата.
Дальше нас отправляют войти в Samsung аккаунт. Регистрируемся или входим уже в существующий аккаунт.
Читаем и принимаем условия пользования. Готово, переходим обратно к менеджеру сертификатов.
Создаем сертификат дистрибьютора (или выбираем существующий).
Выбираем привилегию (нам достаточно публичной) и вводим DUID устройства. Позже можно будет добавить DUID нового устройства, а если у вас есть файл с множеством DUID'ов, то можно добавить через него.
Небольшая фича: если на этом этапе законнектиться с устройством, то его DUID впишется автоматически.
Поздравляю! Теперь мы можем пользоваться сертификатом и подписывать им наши проекты.
Не потеряйте сертификат, сделайте бэкап на каком-нибудь надежном удаленном репозитории!
Создание проекта
Начать создание проекта можно одним из трех способов:
В меню Tizen Studio выбираем файл → создать → проект Tizen;
На панели инструментов Tizen Studio нажимаем на значок Создать;
Щелкаем правой кнопкой мыши в Project Explorer → new → Tizen Project.
Выбираем тип проекта. В моем случае выбираем тот, что слева.
Далее вы можете выбрать профиль и версию, поддерживаемые вашим проектом, например мобильное или носимое устройство. Кроме того, Tizen Studio показывает, какие платформы из поддерживаемых были установлены.
На этапе выбора шаблона отображается список шаблонов в зависимости от выбранного профиля и версии.
Выбираем тип нашего веб-приложения (в моем случае js).
Выбираем шаблон проекта из предложенных.
Справа можно посмотреть, как будет выглядеть шаблон приложения. Выбираем базовый проект и даем ему имя («BasicProject» по умолчанию).
Нажимаем финиш и видим, как базовое приложение на js создалось, и открылся файл конфигурации config.xml.
Файл конфигурации
Файл конфигурации веб-приложения Tizen, содержащий XML-элементы, включает корневой элемент <widget> и другие элементы, которые представляют информацию о приложении, такую как элементы конфигурации и расширенные элементы конфигурации Tizen для мобильных и носимых приложений. Эта информация используется при установке или запуске веб-приложения Tizen на платформе Tizen. Проект веб-приложения Tizen должен иметь файл config.xml в корневом каталоге проекта.
Существует 2 различных способа редактирования config.xml файла, которые описаны ниже:
Используя вкладку "Исходный код"
Для этого открываем файл config.xml; Выбираем вкладку source (исходный код).
Используя вкладки формы.
Открываем файл config.xml; Выбираем одну из вкладок.Если вы добавили какие-то изменения в вкладках, то после сохранения они отобразятся во вкладке «исходный код»
Если вы захотите подключить API самсунга к своему проекту, то мало его просто прописать в index.html, нужно еще и дать привилегию на это.
Например, вы хотите подключить к проекту Timer API. Для этого в файле index.html нужно прописать
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>И, конечно, добавить привилегию.
В открывшемся окне необходимо прописать путь к нужной привилегии.
Выбираем «Custom Privileges» и пишем путь.
Сохраняем файл, и вот, наша привилегия применилась.
Отлично, теперь можно использовать наше API.
Хочу заметить, что мое устройство (SSSP 6.0) относится также к устройствам b2b сегмента.
Для этих устройств есть собственное API, аналогичное webapis. Но когда я столкнулся с применением этих API, то понял, что не все функции, которые есть в webapis, есть и в b2b, и наоборот. Как проверить, какие функции в API доступны, я расскажу позже.
Следующий очень важный момент.
Если вы, как и я, хотите, например, использовать тег <iframe></iframe>, то есть один нюанс.
Чтобы в полной мере пользоваться навигацией к сайтам, нужно дать соответствующий доступ.
Перейдем на вкладку «policy» (в этом разделе описывается политика навигации по URL-адресам и безопасности содержимого для веб-сайтов).
Я хочу использовать ссылку https://www.wikipedia.org, значит мне нужно настроить для нее доступ.
В поле доступа добавляем новую строку. Вводим URL желаемой страницы и можем разрешить поддомены нажатием на это поле (false изменится на true).
Теперь вы можете вывести главную страницу википедии.
Зачем мне нужен Chromium?
Для запуска веб-приложений на Tizen установлен движок Chromium. Так как этот движок не новый, для дебага потребуется скачать Сhromium на ПК (советую Сhromium версии 79.0.3945.0, но не версии позже!). Я столкнулся с эти так: когда я запускал приложение в отладке, открывалась отдельная вкладка Сhrome, в консоли разработчика никаких логов и ошибок, кроме сообщения о том, что то, что я вижу сейчас просто скопировано, и это не имеет никакого отношения к моему коду.
Скачиваем Сhromium, запускаем приложение в режиме отладки. Открывается отдельно страницу Сhrome. Заходим в консоль разработчика на вкладку «источники», правой кнопкой нажимаем на выделенный файл и копируем адрес файла. Затем заходим в Chromium и вставляем ссылку. Теперь нам в полной мере доступны отладочные инструменты.
Также хочу заметить, что приложение пишется на JS стандарта ES5 – ES6 (в зависимости от версии), что может быть достаточно затруднительным. Например, Tizen Studio будет ругаться на использование async/await, потому что в этом стандарте их не существует (они появились в стандарте ES7). Будет говорить что-то на подобии такого:
А если писать на ES5, то студия будет ругаться на стрелочные функции, ведь они появились в шестом стандарте.
О чем ты? Какие ES5, ES6?
Экосистема программирования JavaScript (ECMAScript) представляет собой стандарт, описывающий базовые правила, которым должны следовать интерпретаторы JavaScript для обеспечения совместимости между различными платформами и браузерами. На протяжении эволюции ECMAScript, две ключевые версии, ES5 и ES6, занимают важное место.
ECMAScript 5 (ES5), принятый в 2009 году, внес ряд значительных изменений в язык, включая новые методы работы с массивами, строгий режим (strict mode) для улучшения безопасности кода, а также новые методы для работы с объектами. ES5 внес существенные улучшения в функциональные возможности языка, что способствовало его более эффективному и структурированному использованию.
ECMAScript 6 (ES6), также известный как ECMAScript 2015, был представлен в 2015 году и представляет собой более крупный шаг вперед в эволюции языка. ES6 включает в себя множество новых возможностей, таких как стрелочные функции, классы, расширенная работа с объектами, новый синтаксис для работы с промисами, шаблонные строки и многое другое. ES6 призван облегчить написание чистого, читаемого и эффективного кода, а также улучшить разработку больших и сложных проектов.
Установка приложения
Чтобы установить приложение на наше устройство, нужно собрать подписанный wgt-пакет.
WGT (Web Widget) файлы представляют собой архивные файлы, используемые для упаковки и распространения веб-виджетов. Веб-виджеты – это небольшие веб-приложения, предназначенные для встраивания и выполнения в веб-браузере или на веб-страницах.
Для создания нажимаем правой кнопкой на проект и выбираем «Build Signed Package».
Заливаем wgt-пакет на сервер, после чего потребуется создать рядом с ним еще один файл с названием sssp_config.xml. Вставляем в файл этот код.
<?xml version="1.0" encoding="UTF-8"?>
<widget>
<ver>2.3</ver>
<size>3969</size>
<widgetname>BasicProject</widgetname>
</widget> На устройстве заходим в настройки запуска URL-адреса (рассказывал выше, как это сделать, помните?). Вводим ссылку файла и запускаем.
Победа! Вы создали и запустили свое веб-приложение на устройстве Tizen!
Заключение
Вот и подошло к концу наше путешествие. Да, это было непросто, но мы справились. В заключение, несмотря на ряд достижений и лидирующую позицию Tizen на глобальном рынке смарт-телевизоров, необходимо признать, что процесс разработки этой платформы представляет собой значительную трудность. Одной из главных проблем остается низкое качество и сложность использования документации, что может вызвать недовольство у пользователей.
Хотя некоторые части гайда могут отпугнуть от использования Tizen, важно отметить, что в России, учитывая текущий контекст, он становится почти неотъемлемым компонентом среди операционных систем для смарт-телевизоров. Вопреки некоторым сложностям разработки, популярность и значимость Tizen продолжают расти, подчеркивая его важную роль в индустрии развлечений.
Надеюсь, статья получилось понятной и познавательной. Спасибо за прочтение!