Geekly Articles each Day
📜 ⬆️ ⬇️

We write the application for firefox os and place it in the Marketplace


Greetings reader!
As many people know recently, mozilla has released its firefox os, several smartphones have already appeared on this platform. No articles, and real examples of writing applications, I have not found. So having rummaged on MDN, I decided to fill this gap.

What is so good about firefox os?


The idea of ​​this mobile system is quite innovative, because firefox os is a “system browser”, those applications for it are written on html / css. The main plus of this is that those who wrote web applications will be able to write applications for it without learning additional languages, frameworks, etc. Also, developers can easily port existing web development to this os.

Where to begin?


First, I suggest putting the emulator firefox os. For this perfect plugin for firefox called firefox os simulator. Download it here .
')

Let's start!


Manifesto

After we have downloaded and installed the emulator, I suggest creating a folder with the name of our application, where it will actually be located. Our training application will be called "Count sistems". It will translate numbers into different number systems and also perform arithmetic operations with them. I already wrote such an application in c ++, now let's see how it will look like on html / js.
After we have created the folder, let's write a manifest for our application. The manifest is such a file in json format, which will tell os the name of the application, where its icon is and much more.
The code of such a file will look like this:
{ "name":"count systems",// "launch_path": "/index.html",//     "developer": { "name":"RAZVOR",// "url":""//  }, "description":"count systems app",// "icons":{ "128":"/icon.png"// } }

Save this file as manifest.webapp in the created folder.
Markup

As we write almost web application we create the index.html file. With the following code:
  <html> <head><script src="https://myapps.mozillalabs.com/jsapi/include.js"></script></head> <body><p>hello world</p></body> <script></script> </html>

As we see nothing special about it.
Launch

To run the application through the emulator, simply open in firefox tools-> web development-> firefox os simulator
The emulator tab will open. After that click add Directory and select our manifest.webapp.
In principle, in firefox os, you can run applications without installation, but the current is in the marketplace, while the emulator installs the applications itself.
To run it, click run and to update it.
Let's run our training app!

This you will see if everything is done correctly.
Installing the application from the application itself

As I said earlier in os, you can run applications without installation, to install them there is a special function in api, apply it, now the code looks like this:
 <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>

So we took care of the installation, we also added css and jqury so do not forget to put them in the folder with the application under the appropriate names.

After hello world


Now, you should already understand some of the features. We said hello to the world, now we can start writing a real application.
We modernize our code.
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; }

I think how it works, you can figure it out yourself, there’s nothing special and new about it.

Some features of api


In firefox os, in addition to the built-in html5 api, there is also its own. From it, you used the navigator class. Now I will describe some of the features of this class.

Online or offline

How can we check if the device is connected to the network? For this, the navigator.onLine method comes to the rescue. If the return true network is. False-no. It's simple.

Device orientation

You can connect different css depending on the orientation. For example:
 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

You can also get data from the accelerometer via 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; }

Vibration


For vibration, you can use the following function:
 navigator.vibrate(1000);// 1000


Place the application in the Marketplace


When we wrote our test application, it's time to present it to the people, they should be placed in the marketplace. This operation is very simple, but you need to know some of the nuances. The first step is to choose whether you will place the source code on your own or on the market. If the first, then you need to customize the server or github, more details here . I chose the second method, for this we just need to download the application in zip and select by clicking Submit an App-> packeged-> select a file. If everything is fine with the manifest, you will go to step 2. At the subsequent stages, you need to make a description and download screenshots (ATTENTION NOT LESS THAN 500x600px). If everything went smoothly, then congratulations, You have the experience of writing and placing the whole application behind you!

At last


I hope my article was useful to you, and not much tired of you. See you!

Source: https://habr.com/ru/post/272357/

More articles:


All Articles