Особенности разработки приложений для Apple TV 4 поколения

66e3827ab0a748f59ea87d243956e318.jpg

Как известно, в новом поколении приставок дебютирует магазин App Store с приложениями сторонних разработчиков. Первые российские обзоры с печалью отмечали, что в отечественном сторе пока не очень много приложений. В этой статье от разработчиков приложения Rutube для Apple TV мы узнаем об основных особенностях разработки под новую платформу.

О платформе tvOS
Платформа нового Apple TV (tvOS) является деривативом iOS и обладает некоторыми уникальными особенностями. В частности, для tvOS возможно как портирование существующего iOS-приложения, написанного на Objective-C / Swift (согласно рекомендациям по реализации интерфейса), так и создание приложения на новом стеке технологий — TVML и TVJS, подключаемых с помощью фреймворка TVMLKit. Этот новый стек позиционируется как хороший выбор для простой и быстрой разработки клиент-серверных приложений (идеально для видео!), что и подтверждается на практике. Именно о TVML и TVJS пойдет речь ниже.

TVMLKit
TVMLKit — фреймворк для Objective-C / Swift. С его помощью управление приложением передается JavaScript-файлу и среде TVML+TVJS. Подробности доступны на странице документации TVMLKit.

TVML
TVML (Television Markup Language) — это подмножество XML, реализующее разметку и стандартные элементы интерфейса tvOS. Этот интерфейс используется не только для приложений — на нем реализованы все страницы tvOS: домашний экран, экран настроек, и сам магазин App Store.


tvOS предоставляет набор готовых элементов, полный список которых доступен в документации к TVML.

Эти элементы делятся на:

  • Simple elements — простые элементы, состоящие из одного тега, например, text или title;
  • Compound elements — составные элементы, которые могут включать в себя простые элементы. Например, составной элемент banner может содержать в себе простой элемент title;
  • Templates — шаблоны отображения страницы. Задают общую структуру отображения элементов и могут включать в себя составные элементы.

Кроме того, элементам можно задавать атрибуты и стили, например width и src.

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

Из общего списка шаблонов стоит выделить divTemplate, который позволяет конструировать собственный layout, если вас не устроил никакой другой из предложенных.

Возможности создавать собственные элементы нет, можно только комбинировать существующие. 

Более того, нужно следить за тем чтобы при парсинге строк в XML не попадался невалидный TVML. Например, ответ нашего API мог содержать HTML-теги, из-за чего возникала ошибка. Разметка TVML может динамически добавляться на страницу с помощью JavaScript и TVJS.

 

TVJS
TVJS — JavaScript-фреймворк, предоставляющий API для работы с TVML. Условно, его можно разделить на две части:

  1. Стандартный DOM Level 3 API для работы с DOM-элементами, например, конструктор DOMParser для парсинга строки в XML-документ (TVML);
  2. Собственные методы и конструкторы tvOS, например, объект NavigationDocument, который управляет стеком отрисованных страниц и используется в качестве навигации по истории.


Каждый из собственных методов описан в документации к TVJS. В остальном это привычный JavaScript. Частично поддерживается ECMAScript 2015, например, классы и template strings. 

Не поддерживаются arrow functions, константы. При этом может наблюдаться неработоспосбность некоторых сторонних библиотек. Например, пришлось перебрать несколько npm-пакетов, чтобы найти работающую библиотеку для AJAX-запросов (из-за обращений к window.XMLHttpRequest, который в tvOS реализован не как свойство window). Конечно, было бы проще самостоятельно написать несколько строк кода, но в какой-то момент это стало делом принципа — найти работающий из коробки плагин, и он существует!

Отладка
Для отладки JavaScript-кода можно использовать Safari. Активируем меню «Develop» (Preferences -> Advanced -> Show Develop menu), подключаем Apple TV через USB. Заходим в браузер и, запустив приложение на приставке, выбираем в появившемся выпадающем меню «Develop» девайс «Apple TV», далее выбираем наше приложение.

Читать далее...