Добро пожаловать в учебник по разработке приложений для Firefox OS. Прежде чем мы углубимся в предмет, я бы особо остановился на существовании ОС FireFox и на том, почему веб-разработчикам следует подумать о разработке приложений для этой ОС.
Что такое FireFox OS?
FireFox OS — мобильная операционная система, возникшая в результате проекта Mozilla «Boot to Gecko». Нелишне будет упомянуть, что он основан на ядре Linux и движке рендеринга Gecko в Firefox. Эта ОС является полностью открытым исходным кодом и, следовательно, она не находится в канве прав собственности. Пользовательский интерфейс FireFox OS — это веб-приложение со встроенной возможностью запуска и отображения различных других веб-приложений. В отличие от других гигантов в сегменте мобильных ОС (таких как Android, iOS), он ориентирован на развивающиеся рынки. Он также направлен на то, чтобы предоставить конечным пользователям превосходные функции смартфона по низкой цене.
Зачем создавать приложения для FireFox OS?
Первое, что мы должны здесь понять, это то, что FireFox OS дает истинную силу веб-разработчикам, позволяя им тесно взаимодействовать с нативными функциями устройства. Это означает, что все, что вам нужно для разработки приложений Firefox, — это веб-технологии, такие как HTML и JavaScript. Мощные API-интерфейсы, доступные для разработчиков, позволяют очень легко создавать надежные приложения за счет значительного использования устройства.
Теперь, когда мы больше разбираемся в приложениях для этой ОС, давайте узнаем о типах приложений для Firefox.
В упаковке:
Эти приложения в основном представляют собой архивные файлы .zip, содержащие ресурсы, используемые приложениями (такие как файлы HTML, CSS и JavaScript). Пользователь должен будет загрузить и установить его, как и любые другие приложения для мобильных ОС. Разработчики могут загружать обновления пользователям через рынок Firefox. Также возможно сделать обновление приложения самостоятельно.
Хостинг:
Размещенные приложения в основном запускаются с сервера, как веб-сайт с данным доменным именем. Все файлы приложения размещены на сервере. Разработчики имеют больший контроль над размещенными приложениями, так как ресурсы приложения расположены на сервере.
В этом уроке мы рассмотрим процесс разработки упакованного приложения, в котором будут перечислены задачи для пользователя.
Modus Operandi для разработки приложений для FireFox OS
1. Настройка среды разработки
Каждое приложение Firefox OS (упакованное или размещенное) требует один обязательный файл с именем manifest.webapp Это файл JSON, который предоставляет информацию (например, имя, описание, автор, значок и т. Д.) О приложении для ОС. В этом уроке мы будем использовать следующий простой manifest.webapp
{
"version": 1.0,
"name": "ToDo App",
"description": "App to make a note of to-do tasks",
"launch_path": "/index.html",
"developer": {
"name": "Preetish",
"url": "http://Preetish.Me"
},
"icons": {
"512": "/img/icon-512.png",
"128": "/img/icon-128.png"
},
"default_locale": "en"
}
Чтобы узнать больше о файле манифеста вы можете проверить документацию . Файлы манифеста могут быть проверены валидатором манифеста . API также может быть использован для проверки.
В корне нашего проекта создайте файл manifest.webapp
-
css -
js -
lib -
img
Наконец, вам необходимо установить симулятор Firefox OS, чтобы полностью настроить среду разработки. После установки доступ к симулятору можно получить из раздела «Разработчик» в меню браузера Firefox.
После запуска симулятора вы должны увидеть экран Firefox OS, показанный на следующем рисунке.
2. Веб-API и веб-активности
Всегда существовала одна непреодолимая проблема доступа к функциям мобильных устройств через веб-технологии. Mozilla разработала широкий спектр API-интерфейсов JavaScript для решения этой проблемы, предоставляя доступ к функциям управления и контроля устройств, таких как контакты, управление питанием, камера, FM, оборудование Bluetooth и т. Д. Они называются WebAPI , и как разработчик вы должны проверить их в сети разработчиков Mozilla.
В случае веб-операций операции, выполняемые приложением, выполняются цепочкой распределения задач от одного приложения к другому приложению. Например, если приложению необходимо открыть файл PDF, оно попросит пользователя выбрать одно из приложений, которые он или она уже использует для открытия файлов PDF. Как только конкретный файл открыт, он возвращается вызывающему или исходному приложению.
Для получения дополнительной информации вы можете обратиться к справочнику по веб-активности на MDN и к разделу Введение в веб-активность на Mozilla Hacks.
3. Написание примера приложения
Мы будем использовать AngularJS для разработки этого приложения. Загрузите исходный код Angular и скопируйте его в каталог lib Затем создайте index.html Скопируйте следующий код в файл.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Todo List App</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div ng-app="todoApp">
<h2>Todo</h2>
<div ng-controller="TodoController">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</div>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Затем создайте style.csscss
.done-true {
text-decoration: line-through;
color: grey;
}
Затем создайте app.jsjs
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
$scope.todos = [
{text:'Todo Item 1', done:true},
{text:'Todo Item 2', done:false}];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}]);
4. Тестирование приложения
Чтобы протестировать наше приложение, мы будем использовать симулятор Firefox OS . В Firefox перейдите в Инструменты> Разработчики> Симулятор FireFox OS. Затем нажмите кнопку «Добавить каталог» и перейдите к файлу manifest.webapp
Если все сделано правильно, вы сможете увидеть смоделированное приложение прямо на своем ноутбуке / рабочем столе. Возможно, вам придется прокручивать экраны, чтобы получить доступ к приложению.
Нажмите на приложение на экране, чтобы получить доступ к вашему приложению.
После завершения работы приложения создайте архив .zip со всеми файлами корневого каталога и используйте средство проверки, чтобы провести полный цикл тестирования.
Проверьте инструмент тестирования WebIDE , который позволяет вам подключать настольный Firefox к совместимому устройству через USB. Более того, он позволяет загружать приложения прямо на устройство и отлаживать их во время работы.
5. Публикация приложения
Распространять приложение для Firefox OS очень просто. Он может быть размещен на вашем собственном сервере как самоизданное приложение . Тем не менее, для большей досягаемости и видимости он может быть продвинут на рынок Firefox . После проверки файла манифеста может быть отправлена дополнительная информация (например, поддержка ОС, цена, снимок экрана) о приложении. Пользователи смогут приобрести ваше приложение, оценить его и оставить отзыв.
Вывод
Из этого туториала вы узнаете, как создать простое приложение для Firefox OS. Код для демонстрационного приложения, описанного в этой статье, также доступен на GitHub . Не стесняйтесь проверить его, изменить его и, возможно, использовать для запуска следующего приложения Firefox. Наслаждайтесь!