This post is also available in: Английский
При проектировании приложения следует учесть, что привычная “мышиная” навигация работать не будет, по одной простой причине — мыши нет. Необходимо “подсвечивать” активный элемент и продумывать логику, на какой элемент можно будет переместить “курсор”. Самый идеальный вариант — две активные зоны: боковое меню, контент на всю высоту экрана. Таким образом у контента может быть привычный пользователю вертикальный скролинг и при этом он в любой момент сможет переместить курсор в меню и перейти в другой раздел приложения. Кроме того, постарайтесь продумать максимально вертикальную архитектуру приложения. Т.к. одно из требований к приложениям: нажатие на кнопку “back” должно приводить пользователя на уровень выше.
Разработку необходимо начинать с прочтения документации и скачивания SDK. SDK существует только под windows, и у нас, по непонятным причинам, интерфейс был исключительно на корейском языке. Но к счастью само сдк необходимо только для того, что бы запаковать приложение и запустить эмулятор.
Мы разрабатывали приложение под платформу 11 года (SDK 2.5), потому все описанное ниже скорее всего не действительно на платформе 12 года, т.к. Samsung сменил движок на Webkit (ура!) и сильно разнообразил API доступное из Javascript. Технические характеристики платформ, можно посмотреть тут. Сейчас все еще имеет смысл разрабатывать под платформу 11 года так как на рынке все еще очень много этих устройств.
В процесе разработки всегда хочется использовать уже готовые, проверенные, решения. Но большинство доступных JavaScript библиотек избыточны, а у нас очень ограничены ресурсы. Во вторых они не расчитаны на длительный цикл работы, и из-за этого приложение начинает вести себя непредсказуемо. Типичная проблема — возможность повторной инициализации, которую довольно трудно отследить.
Несмотря на предыдущий абзац мы все-таки решили использовать jQuery из-за простоты, надежности и расширяемости. С помошью этой библиотеки был реализован весь интерфейс, включая анимацию. Единственное, что не заработало это Ajax. Что в общем не должно удивлять т.к. доступ к ресурсам в сети происходит через кастомную реализацию XHR.
В процессе разработки было довольно много интересных моментов о которых хотелось бы рассказать:
- Видео в телевизоре отображается под всеми HTML елементами. И это не было бы проблемой, т.к. об этом написано в документации. Но в эмуляторе оно работает с точностью до наоборот и это сбивает с толку.
- Все способы переназначения/отключения кнопок которые описаны в документации не работают ни в эмуляторе, ни в устройстве. После длительного брейншторма родился следующий код. И несмотря на документацию, не для всех кнопок есть возможность переопределить их стандартный функционал (SOCIAL и SEARCH) — нажатие на которые приводит к выходу из приложения.
- Операции с DOM`ом очень дорогие. Есть вариант отказаться от jQuery.append() в пользу widgetAPI.putInnerHTML() т.к. он работает в обход сборщика мусора, и освобождает память немедленно. Но возникает неприятный момент — немедленное удаление из памяти структур приводит к тому, что переменные которые могли ссылаться на эти структуры вдруг принимают неопределенное состояние, и повторное использование таких переменных приводит к JS ошибкам. И это надо учитывать.
- Судя по документации в платформе 12 года есть встроенный jQuery, у которого победили проблемы со скоростью.
- По причине ограниченности памяти, при обилии изображений на экране (которые могут подгружаться динамически), может привести к тому, что телевизор, перестает загружать и отображать изображения вообще. При этом приложение продолжает работать. Возникает очень не регулярно и зависимость отследить так и не удалось, хоть это один из немногих багов который воспроизводятся на эмуляторе. Но к сожалению возможности отладки ограничены выводом текста в консоль. Единственное решение, которое удалось найти на платформе 10-11 года, упрощать интерфейс. Либо разбивать на страницы (к примеру для случая каталога с изображениями) — открытие нового HTML документа приводит к очистке памяти от предыдущего.
- Отладка: т.к. это Maple, привычного и любимого console.log() нет, вместо него есть alert() который выводит в консоль эмулятора текст. Для себя сделал вот такой “костыль”
- Главное не лениться чистить биндинги и удалять из DOM не используемые элементы (widgetAPI.putInnerHTML()). Очень помогает не упереться в память и избежать различных багов.
- Samsung рекомендует перед созданем нового объекта XMLHttpRequest очищать старый для устраниния утечек памяти.
- Хоть Samsung и заявляет о том, что 11 платформа поддерживает HTML5 и CSS3, это далеко не так. По крайней мере мне так и не удалось найти где именно они его поддерживают. Потому при разработке необходимо ориентироватся на возможности HTML 4.01 и CSS2 со всеми вытекающими.
- Видеоплеер обладает функционалом ускорения воспоризведения видео (как вперед, так и назад), благодаря чему можно реализовать привычную для телевизоров перемотку видео. Но опытным путем удалось выявить что работает только 5 скоростей: -4X, -2X, 1X, 2X, 4X
На последок хочется предупредить, что разрабатывать приложение без устройства, на котором можно тестировать, не очень хорошая идея т.к. поведение приложения в эмуляторе довольно ощутимо отличается от поведения на реальном телевизоре, а при использовании некоторых возможностей API приводит к крэшу эмулятора. Кроме того, хотелось бы отметить тот факт что в сети трудно найти информацию о разработке под телевизоры вообще и под Samsung в частности. На нашей памяти за год, в течении которого мы активно разрабатываем различные приложения, появилась всего несколько статей и в основном это статьи о том, что все плохо и больше так жить нельзя.
Надеемся что вам поможет наш опыт!