Пишем приложение для firefox os и размещаем его в Marketplace
Приветствую, читатель!
Как многие знают недавно mozilla выпустила свою firefox os, уже появилось несколько смартфонов на этой платформе. Никаких статей, и реальных примеров по написанию приложений я не нашёл. Поэтом покопавшись на MDN я решил восполнить этот недостаток.
Чего-же такого хорошего в firefox os?
Идея этой мобильной системы достаточно инновационная, ведь firefox os это- «система-браузер», те приложения для ней пишутся на html/css. Главный плюс этого в том, что те кто писал веб-приложения смогут написать приложения для неё без изучения дополнительных языков, фрэймворков итд. Также разработчики смогут легко пртировать на данную os уже имеющиеся веб-разработки.
С чего начать?
Сначала предлагаю поставить эмулятор firefox os. Для этого прекрасно подойдёт плагин для firefox под названием firefox os simulator. Скачать его можно здесь [1].
Начнем!
Манифест
После того как мы скачали и установили эмулятор, предлагаю создать папку с названием нашего приложения, где оно собственно и будет располагаться. Наше учебное приложение будет называться «Count sistems». Оно будет переводить числа в разные системы счисления и также производить с ними арифметические действия. Я уже писал такое приложение на c++, теперь посмотрим как оно будет выглядить на html/js.
После того как мы создали папку давайте напишем манифест для нашего приложения. Манифест-это такой файл в формате json, который будет говорить os как называется приложение, где находится его иконка и многое другое.
Код такого файла будет выглядеть так:
{
"name":"count systems",//название
"launch_path": "/index.html",//путь до главного файла приложения
"developer": {
"name":"RAZVOR",//разработчик
"url":""//сайт разработчика
},
"description":"count systems app",//описание
"icons":{
"128":"/icon.png"//иконка
}
}
сохраним этот файл под именем manifest.webapp в созданную папку.
Разметка
Так как мы пишем почти веб-приложение создаём файл index.html. Со следующим кодом:
<html>
<head><script src="https://myapps.mozillalabs.com/jsapi/include.js"></script></head>
<body><p>hello world</p></body>
<script></script>
</html>
Как видим ничего особенного в этом нету.
Запуск
Чтобы запустить приложение через эмулятор просто откройте в firefox инструменты->веб-разработка->firefox os simulator
откроется вкладка эмулятора. После этого нажимаем add Directory и выбираем наш manifest.webapp.
В принципе в firefox os запускать приложения можно без установки, но тока в marketplace, эмулятор же сам устанавливает приложения.
Чтобы его запустить жмём run а чтобы обновить update.
Давайте запустим наше учебное приложение!
Это вы увидите, если всё сделали правильно.
Установка приложения из самого приложения
Как я и говорил ранее в os можно запускать приложения без установки, чтобы их установить есть специальная функция в api, применим её, теперь код выглядит так:
<html>
<head>
<meta charset="UFT-8">
<script src="https://myapps.mozillalabs.com/jsapi/include.js"></script>
<script src="jquery.js"></script>
<link href="app.css" rel="stylesheet" type="text/css">
</head>
<body><p>hello world</p></body>
<script>
var gManifestName = "manifest.webapp";//путь к манифесту
app=function(){
this.init=function(){
//работа приложения
}
this.init();
};
$(document).ready(function(){
var request = navigator.mozApps.getSelf(); //Вызываем класс для получения информации о приложении
request.onsuccess=function(){// при успешном вызове
if(request.result){//если мы получили результат, значит приложение установленно
alert('Приложение установлено');
a=new app();
}else{// если нет то создаем кнопку
$('<div>').appendTo('body').attr('id','inst_b').text('Установить!').css({width:200,textAlign:'center',padding:5,background:'#222',color:'#ccc',borderRadius:'3px'}).click(function(){
var inst=navigator.mozApps.install(gManifestName);//при клике на кнопку устанавливаем приложение
inst.onsuccess=function(){alert('Установка завершена');$('#inst_b').remove();a=new app();};//установка выполнена успешно
inst.onerror=function(){alert('Установка не удалась:n'+this.error.name)}// ошибка при установке
});
}
};
request.onerror=function(){alert('Ошибка:n'+this.error.message)}//при ошибке
});
</script>
</html>
Вот мы и позаботились об установке, также мы добавили css и jqury поэтому не забудьте поместить их в папку с приложением под соответствующими именами.
После Hello world
Теперь, вы должны уже понимать кое какие особенности. Мы сказали привет миру, теперь можем заняться написанием реальнго приложения.
Модернизируем наш код.
html:
<html lang="ru">
<head>
<title>Count systems</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/app.css">
<script src="jquery.js"></script>
</head>
<body>
<h1 class="center">Count systems</h1>
<div class="feilds">
<p>Введите число</p><input type="text"/>
<p>Введите систему счисления</p><input type="text"/>
<p>Введите требуема система счисления</p><input type="text"/>
<div class="error"></div>
<div class="result"></div>
<button class="submit">Перевод!</button>
</div>
</body>
<script>
var gManifestName = "manifest.webapp";
app=function(){
this.alp="abcdefghijklmnopqrstuvwxyz";
//this.e='1';
this.p={
ten_to:function(c,d){
var i=0,r='';
do{
v=c%d;
c=(c-(c%d))/d;
if(v>9){
r+=this.alp[v-10];
}else{
r+=v;
}
}while(c!=0);
var r2='';
for(i=(r.length-1);i>-1;i--){
r2+=r[i];
}
return r2;
},
to_ten:function(c,d){
c=c.toString();
var v,r='';
for(var i=0;i<c.length;i++){
v=c[i];
if(v.match(/[0-9]/)!=v){
for(i in this.alp){
if(this.alp==v){
v=i+11;
return false;
}
}
}
r+=v*d;
}
return r;
}
};
this.error=function(t){
$('.error').text(t);
setTimeout(function d(){$('.error').text('').hide()},1000);
};
this.wr_res=function(t){
$('.result').show().text(t);
}
this.init=function(){
$('body').load('/a.html');
$('.submit').click(function sub(){
$('.submit').hide();
a2=new app();
var fi=$('.feilds input');
fi.each(function(){
if($(this).val().length<1){
a2.error('Не все данные введены!');
return false;
}
});
var data={
c:fi[0].value,
sis:fi[1].value,
to_sis:fi[2].value
};
with(data){
if(sis==10){
a2.wr_res(a2.p.ten_to(c,to_sis));
}else{
if(to_sis==10){
a2.wr_res(a2.p.to_ten(c,sis));
}else{
a2.wr_res(a2.p.ten_to(a2.p.to_ten(c,sis),to_sis));
}
}
}
fi.change(function(){
$('.result').hide().text('');
$('.submit').show();
});
});
}
this.init();
};
$(document).ready(function(){
var request = navigator.mozApps.getSelf();
request.onsuccess=function(){
if(request.result){
a=new app();
}else{
$('<div>').appendTo('body').text('Установить!').css({width:200,textAlign:'center',padding:5,background:'#222',color:'#ccc',borderRadius:'3px'}).click(function(){
var inst=navigator.mozApps.install(gManifestName);
inst.onsuccess=function(){alert('Установка завершена');a=new app();};
inst.onerror=function(){alert('Установка не удалась:n'+this.error.name)}
});
}
};
request.onerror=function(){alert('Ошибка:n'+this.error.message)}
});
</script>
</html>
css:
.center{
width:250;
margin:1 auto;
}
.feilds{
width:250px;
margin:10 auto;
border-radius:5px;
box-shadow:inset 0 0 10px #ddd;
padding:10px;
}
.submit{
width:100;
padding:7;
background-color:#222;
color:#ccc;
background-image:none !important;
margin-top:15px;
}
.error{
width:100px;
margin:0 auto;
color:red;
}
.result{
width:100px;
overflow:auto;
margin:5 auto;
border:1px solid #aaa;
border-radius:4px;
padding:6px;
display:none;
}
Думаю как это работает вы сможете разобраться сами, тк ничего особенного и нового в этом нет.
Некоторые возможности api
В firefox os помимо встроенных html5 api, есть и свое. Из него вы использовали класс navigator. Теперь я опишу некоторые возможности этого класса.
Онлайн или оффлайн
Как же нам проверить подключен ли к сети девайс? Для этого нам на помощь приходит метод navigator.onLine. Если возвращает true-сеть есть.false-нет. Всё просто.
Ориентация устройства
Можно подключать разные css в зависимости от ориентации.Например так:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Также можно получить данные с акселлерометра через js
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(orientData) {
var absolute = orientData.absolute;
var alpha = orientData.alpha;
var beta = orientData.beta;
var gamma = orientData.gamma;
}
Вибрация
Для вибрации можно использовать следующую функцию:
navigator.vibrate(1000);//Вибрация 1000 секунд
Размещаем приложение в Marketplace
Когда мы написали наше тестовое приложение, самое время представить его народу, те разместить в marketplace. Эта операция очень проста, но нужно знать некоторые нюансы. Первым делом надо выбрать, будете вы размещать исходники у себя или на маркете. Если первое, то нужно специальным образом настроить сервер или github, подробнее здесь [2]. Я же выбрал второй способ, для этого нам надо просто запоковать приложение в zip и выбрать нажав Submit an App->packeged->select a file. Если с манифестом всё нормально вы перейдете к шагу 2. На последующих этапах вам нужно составить описание и загрузить скрины( ВНИМАНИЕ НЕ МЕНЬШЕ ЧЕМ 500x600px ). Если всё прошло гладко, то поздравляю, У вас за плечами опыт написания и размещения целого приложения!
Напоследок
Надеюсь моя статья была вам полезна, и несильно вас утомила.До встречи!
Автор: RAZVOR
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/28972
Ссылки в тексте:
[1] здесь: https://addons.mozilla.org/ru/firefox/addon/firefox-os-simulator/
[2] здесь: https://marketplace.firefox.com/developers/docs/hosted
[3] Источник: http://habrahabr.ru/post/172041/
Нажмите здесь для печати.