Graphics/OpenGL/Front-end
0,0
рейтинг
9 марта 2013 в 13:00

Разработка → Пишем приложение для firefox os и размещаем его в Marketplace из песочницы tutorial


Приветствую, читатель!
Как многие знают недавно 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
карма
21,7
рейтинг 0,0
Graphics/OpenGL/Front-end
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (39)

  • +7
    Чего же вам всем сразу хочется поставить jQuery, туда, где он ну совсем уже не нужен?
    • +13
    • +4
      Для экономии усилий разработчика, очевидно же.

      Гораздо удобнее записывать (а в дальнейшем и прочитывать) $('.submit') вместо document.getElementsByClassName('submit'), и это не говоря ужé о возможностях дальнейшего цепного вызова нескольких методов кряду.

      Вы вот как думаете, насколько «document.getElementsByClassName» длиннее простого «$»? И можно ли разработчика, единожды попробовавшего просто «$», пересадить на «document.getElementsByClassName» обратно, не прибегая к шантажу и захвату заложников?
      • –5
        Все это надумано, проблемы никакой нет. Для удобства разработчика можно лежать на диване.
        Ну а если так хочется — можно создать короткую ссылку на document.querySelector.
      • –1
        Не холивара ради, хочу напомнить, что в DOM4 API предусмотрен метод .find (с некоторыми оговорками, просто алиас для querySelector).
        Ну и если говорить про сравнение jQuery и DOM API, то сравнивать нужно правильно. Что, по вашему, приятнее на глаз node.find('.class').classList.add('class1') или $('class', node)[0].classList.add('class1') — я тут не использую метод addClass, потому как вплоть до версии 1.9.1, jQuery, всё ещё, не использует classList.
        Тут нельзя сказать, что лучше, а что хуже. DOM4 API принесёт счастье веб-разработчикам, в том числе, разработчикам jQuery, когда они прекратят игнорировать новые эффективные методы (с ходу: свойства «control» и «labels», коллекция RadioNodeList).
      • 0
        Кстати да, недавно писал что-то на нативном js, всё начиналось со строки:
        var $ = document.querySelectorAll.bind(document);

        простите за плейнтекст
  • НЛО прилетело и опубликовало эту надпись здесь
  • +7
    navigator.vibrate(1000);//Вибрация 1000 секунд
    Действительно секунд, а не миллисекунд?
    • –2
      Боюсь, девушки могут поменять назначения устройства на Firefox OS. И это будет не телефон.
  • +15
    Как же уродливо выглядит эта смесь js и html.
    • –12
      ну выгледит необычно -но вполне так по теме! больше смутило вот это: «Наше учебное приложение будет называться «Count sistems»» что это за sistems такое? новое слово в языке — или так положено? мне все равно, но глаз порезал!
      • +10
        Такое же новое слово, как и ваше «выгледит»
        • –17
          потому его так и написал — «выгледит» привлек внимание — не находите? :)
          • +4
            Нет. Подумалось, что вы являетесь автором статьи, ибо знаки препинания расставлены в случайном порядке.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +8
      Ваш комментарий — прямо набор стереотипов :)
      Важен не язык, а мозг.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Нет плохих, есть удобные и не очень, для разных людей и разных целей.
          Мне вот наоборот не нравится ASP/.Net/C#, но я не говорю что они плохие, просто они подошли Вам и не подошли мне :)
          • НЛО прилетело и опубликовало эту надпись здесь
            • +6
              Вы еще наверное такой молодой, завидую Вам :)
            • +2
              Простите, можете разъяснить последнее предложение?..
    • +1
      Ну, не надо сравнивать. JS — очень мощный язык — ООП, ФП парадигмы из коробки и проблемы только в структурировании кода (ИМХО). Смотрите не то, что другие делают, а на то что можно сделать.
      • –3
        JS сам по себе мощный язык, но только не здесь.
  • +4
    >> Сначала предлагаю… эмулятор, прекрасно подойдёт… simulator.
    У меня варнинг выскакивает.
  • 0
    Гм. Прикольно.
    Я, сишник-алкоголик, в своё время не подружился с андроидом из-за необходимости изучения Java, которую я видел-то всего пару раз.
    А тут, вроде, всё просто.
    /me пошёл писать приложение, которое захват^W уничтожит мир…
  • +1
    >Идея этой мобильной системы достаточно инновационная, ведь firefox os это- «система-браузер», те приложения для ней пишутся на html/css.

    А в чём «инновационность»-то? На html/css можно было писать ещё для древних BlackBerry OS с версии 7, т.е. вот уже 2 года как. А в новой BlackBerry 10, например, непосредственно сам браузер является веб-приложением :)
    • +3
      Инновацией будет если вдруг эта система наконец взлетит без нативной разработки, что мне видится неосуществимым.
      • 0
        Насколько я понял — без «нативной» разработки не взлетит. Там скорее всего будут спец. либы для управления доступом к ФС, камере, позиции в пространстве и т.п.
        Но всё-таки общая база — понятна большинству. Даже я, сишник, не боюсь:)
        • 0
          Но от этого она не становится красивой и изящной. Да и боюсь для сложных и интересных вещей придется лезть в native, который наверняка не в лучшем виде реализован. В Tizen NDK вот просто страшный.
          А главное, что каждый разработчик мобильной оси новорит свое API в NDK сделать вместо того, чтобы соорудить нечто общее.
  • 0
    Спасибо всем кто нашел какие либо ошибки. Я просто щас не дома, как приеду исправлю. Ещё думаю написать вторую часть
    • +1
      Только, Кота ради, длинный код под спойлер
  • 0
    А что за несколько смартфонов на этой платформе? Можете подкинуть ссылок?
    • 0
      На сколько я знаю это zte open и какойто alkatel
  • 0
    В чем отличия от Chrome OS? И о каких иновациях идёт речь?
    • 0
      Я не юзал chrome os, но на вид она больше похожа на мобильную систему чем на бразузер
      • 0
        Понятно. Тогда она наверно концептуально ближе к WebOS.
        • 0
          Да очень похожа
  • 0
    Исправил все ошибки, которые нашёл
    • 0
      Раз уж об этом речь зашла, то я вижу ещё с дюжину недочётов:

      • «Как многие знают» — вводные слова, после них следует поставить запятую. По тем же причинам запятая необходима после слов «как я и говорил ранее», «как видим», «например».
         
      • «Mozilla» и «Firefox OS» — имена собственные, их следует записывать с заглавной буквы. Всеми заглавными пишутся сокращения «HTML», «HTML5», «JS», «API».
         
      • Тире следует отделять пробелами с двух сторон.
         
      • Вместо «jqury» следует записывать «jQuery».
         
      • В предложении «чтобы его запустить жмём run а чтобы обновить update» необходимы знаки препинания, отделяющие придаточные предложения. В других местах не отделены запятыми (или отделены, но недостаточно: только с одной стороны) придаточные «кто писал веб-приложения», «как мы скачали и установили эмулятор», «как оно будет выглядеть на html/js», «как мы создали папку», «как называется приложение», «чтобы запустить приложение через эмулятор», «чтобы их установить», «как это работает», «помимо встроенных html5 api», «подключён ли к сети девайс», «если с манифестом всё нормально». Обилие именно этого вида ошибок указывает на необходимость заново учить и выучить правила пунктуации при придаточных предложениях.
         
      • В нескольких местах слово «те» используется как сокращение слов «то есть». На сáмом же деле такое сокращение следует записывать в форме «т. е.», чтобы отличать его от местоимения «те» (это то самое местоимение, которое употребляется, например, в противопоставлении «не эти, а те»). Сокращение слов «и так далее» следует записывать в форме «и т. д.». Сокращение слов «так как» следует записывать в форме «т. к.». (На Хабрахабре также уместно обрамлять такие сокращения тегом <nobr></nobr>, чтобы переход на новую строку не происходил посредине их.)
         
      • «Кое-какие» пишется через дефис.
         
      • Предложение «false — нет» следует начинать с заглавной буквы.
         
      • Вместо слова «поэтом» (творительного падежа от «поэт») в тексте следует записать «поэтому», что более подходит по смыслу. (Вероятно, опечатка.)
         
      • Деепричастный оборот «покопавшись на MDN» следует отделить запятыми с двух сторон.
         
      • В предложении «никаких статей и реальных примеров по написанию приложений я не нашёл» нет причины ставить запятую.
         
      • В слове «запаковать» вторая безударная гласная — «а». (Проверочных однокоренных слов, в которых именно она стояла бы под ударением, к сожалению, не существует, если не считать варваризма «тетрапáк»; стало быть, это придётся запоминать наизусть.)

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