Создание приложений для Firefox OS, Chrome OS и для Web.

Эдди Османи, который работает над Chrome, Chrome DevTools и Yeoman и является автором и сторонником продвижения вэб-технологий и вэб-разработки выступал на Web Rebels, где команда Firefox OS предоставила ему новое устройство — Geekphone Peak, поэтому он сразу принялся за создание для него нескольких приложений. Фото распаковки устройства — ниже!


До этого Эдди разрабатывал приложения и программные пакеты для Chrome и ему всегда было интересно поэкспериментировать с новыми проектами разработки для веб-платформ. Подобные проекты дают нам возможность наглядно продемонстрировать то, что используя только примитивы на базе HTML, CSS и JavaScript, мы имеем неплохой шанс убедиться на практике в том, что для ПК и мобильных возможно создавать приложения ничуть не хуже нативных. В этом плане Firefox OS довольно интересна.
Его первой идеей создания приложения для Firefox OS был просмотрщик AngularJS Github (базирующийся на ng-github-client) с экранами аутентификации, редактирования и проверки состояния информации. Это достаточно простое приложение, но поскольку оно обрабатывает аутентификацию, используя реальный источник данных, то это могла бы быть более реалистичная основа, чем просто todo приложение.




FirefoxOS предлагает для устройств некоторые дополнительные API, поэтому Эдди подумал, что было бы интересно попытаться добавить поддержку для Vibration API, Web Activities и Web Notifications. Они позволили бы сообщать о состоянии (activities), уведомлять об ошибке (device vibrate, alarm), и сообщать о недоступности соединения (notifications).

Как видите, Vibration API представляет собой простой прямолинейный алгоритм.
// Vibration
var vibrate = document.querySelector("#vibrate");
if (vibrate) {
    vibrate.onclick = function () {
        var vibrating = 
navigator.vibrate(2000);
        /*
            Possible values:

            On/off pattern:
            
navigator.vibrate([200, 100, 200, 100]);

            Turn off vibration
            
navigator.vibrate(0);
        */
    };
}

Важно вспомнить, что создание большей части всего этого было значительно упрощено благодаря кропотливой работе Роберта Наймана, который разработал так называемый шаблон Firefox OS.

Шаблон Роберта включает законченные фрагменты кода для многих общих задач, для которых мы можем использовать этот набор API, и поэтому нам будет приятно видеть что-то похожее на шаблон разработчиков приложений Chrome. Шаблон содержит файлы manifest.webapp и приложение по проверке программного кода, полезное в тех случаях, если в код вносятся значительные изменения.

Эдди начал эксперименты, используя Yeoman и Firefox OS генератор, являющийся интерфейсом командной строки для шаблона Роберта.

Начнем с инсталляции Yeoman:
npm install -g yo

Инсталлируем генератор:
npm install -g generator-firefox-os

И запускаем:
yo firefox-os


Если вы не хотите использовать шаблон или Yeoman для создания приложений, тогда можете начать работу с Firefox OS следующим образом:
1. Создайте новую директорию под именем myapp.
2. Создайте HTML-файл в этой директории (например, index.html).
3. Такой путь, как: Tools → Web Developer → Responsive Design View в Firefox позволит вам просматривать приложения в виде стандартных иконок для интерфейсов мобильных устройств.
4. Создайте файл manifest.webapp с таким же именем и правами доступа.
5. По пути Tools → Web Developer → Firefox OS simulator (если установлен), кликом по «add directory» выберите ваш manifest.webapp.
6. Вы должны увидеть создаваемое вами приложение.
7. Как только вы закончите разработку приложения, просто загрузите его на сервер (или на страницу GitHub) и поделитесь ссылкой.
Вот очень простой пример файла manifest.webapp для приложения:
{
    "version": "1.0.0",
    "name": "GitHub Issues Viewer",
    "launch_path": "/GitHub-Issues-Viewer/index.html",
    "description": "A GitHub Issues Viewer for Firefox OS",
    "icons": {
        "128": "/GitHub-Issues-Viewer/img/icon-128.png"
    },
    "developer": {
        "name": "Addy Osmani",
        "url": "http://addyosmani.com/"
    },
    "installs_allowed_from": ["*"],
    "default_locale": "en"
}

Эдди рассматривает Firefox OS и Chrome OS как продвинутые средства разработки. Его персональный подход – построить веб-приложение так, чтобы оно могло хорошо работать в любом браузере, а затем прогрессивно улучшать его, используя автоопределение функциональных особенностей тех или иных API, которые вы хотели бы использовать в своих целях. Иногда это проще сказать, чем сделать, но это не означает, что вы должны воспринимать подобные платформы как такие, которые подходят только разработчикам, и рассматривать их как совершенно разные приложения. Если вы используете для вашей задачи/разработки Grunt, инсталляция приложения FFOS как вторичной платформы разработки, а также включение manifest файлов/дополнительных scripts.grunt-env и grunt-preprocess может быть очень полезно. QuickOffice (как часть команды Google Docs) сделали нечто подобное для своего Chrome приложения, на других платформах это используется в PhoneGap.

Отладка в Firefox OS

Далее относительно отладки. Эдди установил Firefox OS симулятор, позволяющий увидеть как ваше приложение будет выглядеть на устройстве, а также заниматься отладкой дистанционно, при подключенном с FFOS устройстве, используя встроенные средства разработки. Симулятор очень прост в использовании и дает возможность просматривать приложения, размещенные либо удаленно/на собственном сервере, либо те, которые работают на локальной файловой системе. У вас также есть доступ к детализированной консоли ошибок, чтобы видеть основные исключения и ошибки относительно неподдерживаемых API.

В любой момент простым нажатием на device button можно переключаться между Geekphone и Simulator.

Обратите внимание, что в документации Mozilla описываются некоторые ограничения симулятора — для API, которые не доступны на ПК (вибрация, телефония), поэтому может возникнуть необходимость в детальном ведении и анализе лог-файла отладки приложения. Эдди обнаружил, что в Firefox OS simulator его приложение визуально выглядит иначе, чем на Geekphone устройстве. Как разработчик-тестер, он счел эти различия достаточно минимальными, чтобы обращать на них серьезное внимание, но Эдди планирует продолжить исследования и создать отчет о найденных ошибках, если это не просто проблема с шаблоном.

Некоторые другие незначительные проблемы, с которыми столкнулся Эдди:
  • Создание отчетов о Firefox OS, на мой взгляд, должно быть упрощено. Было не ясно, должно ли это быть сделано с помощью GitHub issue tracker или FFOS DevRel. Было бы неплохо поработать над этим.
  • OAuth: Всплывающие окна: например, OAuth окна авторизации на сторонних сервисах не будут запускаться автоматически в окне FFOS приложения — вам понадобится обойти это, если вашим пользователям будет необходимо авторизироваться, используя этот тип установки.
    Способ 1: Очевидно, существует разница между обработкой методов window.open(..., '_blank') и window.open() в FFOS, поэтому используйте соответствующую опцию.
    Способ 2: Авторизация через вэб для проверки подлинности выполняется внутри браузера, а затем перенаправляется обратно в приложение. Пример кода, демонстрирующего как это делать, может спасти вас на некоторое время, поэтому обратите внимание на FFOS исходный код одного из приложений связи, в качестве примера того, как это работает при входе в Facebook. См. файлы.
    Кроме того, вы можете просто использовать что-то вроде PHP, чтобы упростить процесс OAuth, как это было сделано в клиентском приложении GitHub.
  • Отладка: Эдди надеялся, что он сможет щелкнуть правой кнопкой мышки → инспектировать элемент в FFOS simulator чтобы начать отладку моего приложения, но вместо этого, пройдя по Device Information → More Information → Developer, можно просто включить удаленную отладку и «подключиться» к отладчику.
  • Демо-приложения: как Geekphone для FFOS — это пока еще нечто новое, так и приложений, размещенных на GitHub, на которые вы можете ссылаться, пока еще очень мало, но их количество быстро возрастает. Разработчикам, которые не могут ответить «как был сделан X» в группах Google или документах Mozilla, стоит проверить этот репозитарий, в котором они найдут большинство приложений, установленных по умолчанию на FFOS. Это может быть полезным для тех случаев, когда необходимо что-то более усовершенствованное, чем то, что было предоставлено в шаблоне.

Эдди был впечатлен тем, что для профилирования производительности в Firefox OS, эффект высвечивания краски, а также счетчик кадров в секунду можно создать несколькими касаниями, это делает отладку проще и проверяет все возможные проблемные места кода.

Возвращение к Chrome DevTools необходимо для более детального профилирования, но переключение между браузерами и инструментами совсем не замедляет работу. Как уже сообщалось в блоге, для процесса фактического развертывания приложения были полезны записи по развертыванию Криса Лорда.

Чудесно, ведь создать простое приложение, которое будет работать на Firefox OS на базе шаблона, совсем не сложно и, чтобы привыкнуть, как и с любой другой платформой, понадобиться некоторое время. Эдди очень понравилось писать IssueHub. Ниже — несколько скриншотов.

Создание приложений для нескольких браузеров

Следующее, что Эдди намеревался сделать, это проверить, смогу ли он создать приложение, которое будет работать везде, — как в любом современном браузере, так и в Chrome и Firefox OS. Для этого Эдди использовал уже хорошо отлаженное веб-приложение TimerX3, которое было создано с использованием Yeoman, Grunt и Bower:

TimerX3 можно установить из интернета, если такой вид установки поддерживается (только для FFOS). Он использует специфические для Firefox OS API, но с некоторыми ограничениями прекрасно работает и в других браузерах (без вибрации и т.д.). Незначительными изменениями базового кода этого приложения в несколько шагов можно получить те же расширенные функции, доступные пользователям FFOS (например, уведомления):
  • Создайте manifest.json (указав название вашего приложения, описание, пути и т.д.), а также общие точки входа (например main.js) с указанием параметров окна/запуска для приложения. Убедитесь в том, что приложение связано с соответствующим файлом index.html, который используется для приложений FFOS, а также в том, что указано расположение иконки вашего приложения. Вы можете отлаживать расширение просто указав about:extensions
  • Убедитесь в том, что любые дополнительные API не используют другой синтаксис в Chrome, как это происходит в Firefox OS. Если подобных API нет, убедитесь в том, что ничего в вашем базовом коде не станет причиной ошибок, в результате которых ваше приложение перестанет работать. Помните, что эти дополнительные API, как правило, являются небольшими дополнениями к вашему приложению, а не тем ядром, от которого зависит основная функциональность приложения.
  • Установка FFOS приложений из любого сетевого домена, а не просто из магазина приложений, является большим шагом вперед, но это то, что Chrome Web Store также поддерживает в виде встроенной инсталляции. Установите chrome.webstore.install() и ваши пользователи смогут использовать встроенную инсталляцию приложений так же, как и в FFOS.
Вы можете легко проверить, поддерживается ли API только одним браузером. К примеру, что касается Vibration API, это может выглядеть следующим образом:
// Use native API or fallback for unsupported browsers
navigator.vibrate = navigator.vibrate || navigator.mozVibrate || function (vibrate) {
    console.log('vibrate not supported', vibrate);
};

// Call the Vigration API
navigator.vibrate([200, 100, 200, 100]);


Как только это приложение будет хорошо функционировать, вы можете добавить свое Chrome приложение в качестве второй/третьей целевой платформы для сборки в вашем Gruntfile и просто указать эти дополнительные файлы (например, manifest.json и т.д.), которые вы хотите создать в своих целях. В итоге у вас есть три вида сборки – один для вашего стандартного веб-приложения, второй для Firefox OS приложения и третий для Chrome приложения, и все они могут быть предложены вашим пользователям через интернет или специализированные магазины приложений. Для заинтересованных, Эдди предоставляет скриншоты приложения TimerX3, работающего на всех целевых платформах, с которыми он успешно разобрался.

Сборка для нескольких платформ в Grunt

Для того, чтобы правильно указать и настроить сборку приложения для нескольких платформ, прочитайте ответ Stackoverflow, используйте grunt-env, grunt-preprocess и опционально — grunt-replace.


Заключение

Как только у Эдди будет возможность очистить данный код от всего лишнего, он отправит его на GitHub. В экосистеме FFOS пока недостаточно хорошей документации. Конечно, начальный опыт просто фантастический, однако приветствуется создание путеводителей для разработчиков, которые бы продемонстрировали процесс создания приложений разной сложности и для разных платформ.
Некоторые разработчики, интересуются, правда ли, что для создания полнофункционального приложения, достаточно одного симулятора? Ответ: конечно, но используя расширенные библиотеки API вы можете продвинуться значительно дальше. Если вы хотите в этом убедиться, поэкспериментируйте с шаблоном Роберта. Если вы собираетесь запускать приложение, которое использует функции симулятора, но не работает, поэкспериментируйте во время разработки, а затем, если это возможно, попытайтесь найти какое-то другое устройство.

Источник

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.