Приветствую, читатель!
Как многие знают недавно mozilla выпустила свою firefox os, уже появилось несколько смартфонов на этой платформе. Никаких статей, и реальных примеров по написанию приложений я не нашёл. Поэтом покопавшись на MDN я решил восполнить этот недостаток.
Чего-же такого хорошего в firefox os?
Идея этой мобильной системы достаточно инновационная, ведь firefox os это- «система-браузер», те приложения для ней пишутся на html/css. Главный плюс этого в том, что те кто писал веб-приложения смогут написать приложения для неё без изучения дополнительных языков, фрэймворков итд. Также разработчики смогут легко пртировать на данную os уже имеющиеся веб-разработки.
С чего начать?
Сначала предлагаю поставить эмулятор firefox os. Для этого прекрасно подойдёт плагин для firefox под названием firefox os simulator. Скачать его можно здесь.
Начнем!
Манифест
После того как мы скачали и установили эмулятор, предлагаю создать папку с названием нашего приложения, где оно собственно и будет располагаться. Наше учебное приложение будет называться «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, подробнее здесь. Я же выбрал второй способ, для этого нам надо просто запоковать приложение в zip и выбрать нажав Submit an App->packeged->select a file. Если с манифестом всё нормально вы перейдете к шагу 2. На последующих этапах вам нужно составить описание и загрузить скрины( ВНИМАНИЕ НЕ МЕНЬШЕ ЧЕМ 500x600px ). Если всё прошло гладко, то поздравляю, У вас за плечами опыт написания и размещения целого приложения!
Напоследок
Надеюсь моя статья была вам полезна, и несильно вас утомила.До встречи!
Автор: RAZVOR
