Revision 621631 of Soporte de Cordova para Firefox OS

  • Enlace amigable (slug) de la revisión: Web/Apps/Tools_and_frameworks/Soporte_de_Cordova_para_Firefox_OS
  • Título de la revisión: Soporte de Cordova para Firefox OS
  • Id de la revisión: 621631
  • Creada:
  • Creador: gorrotowi
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

El proyecto de Apache Cordova (el cual da poder a la herramienta Phonegap de Adobe) es una solución estandar en la industria para escribir una app con tecnologías web abiertas, y así generar versiones nativas de una app que puedan trabajar sin problemas en otras plataformas como iOS y Android. A partir de la version 3.1, Cordova extiende el soporte para la creación de open web apps que puedan ser instaladas en Firefox OS. Es este articulo veremos como usar la extención de Cordova para Firefox OS, y que beneficios nos trae esto.

Una aplicacion de Firefox OS es basicamente una web app, although there are some additional features such as the ability to install apps on supporting platforms and make them available offline, and access to various native device hardware and features via some specialized APIs, such as camera, vibration hardware, accelerometer, alarms, etc.

Having web standards to access these features is really great for making the web platform more powerful, but the problem still remains that web code is incompatible with native platforms. People are still likely to build for native platforms because that is where they believe their efforts are best spent, or use Phonegap to create various native versions of their app, not considering Firefox OS / open web apps. With Cordova APK for Firefox OS developers have an easy way to output apps for Firefox OS/Open Web App Platform in addition to all the others, creating wrappers and code mappings for the different APIs where appropriate.

Environment setup

The Firefox OS APK has (as of Cordova 3.1) been checked into the main Cordova codebase, so setting up the environment is really simple. First of all you need to install Node.js, then install the Cordova package like so:

npm install -g cordova

Next, create a sample Cordova app and navigate into the newly created directory:

cordova create test-app
cd test-app

Inside this directory you'll see folders that contain the different plugins, and different platform-specific code details. You'll also see a www folder that contains the web code you'll initially write your app into before then compiling it to different native platform code. If you load the index.html file in a browser, you'll see a standard starter template.

Adding Firefox OS as a target platform

To add different target platforms you use the cordova platform add command followed by the name of the platform in question. Successful creation of native apps also requires having the usual platform tools installed, such as XCode for iOS apps, but Firefox OS doesn't require such environments. For the moment we're only interested in Firefox OS, so run the following command inside your test-app directory:

cordova platform add firefoxos

This creates a Firefox OS app in the platforms/firefoxos/www directory, which currently looks the same except that it has a Firefox manifest file (manifest.webapp) inside the www directory.

At this point you are all set up and ready to go — Firefox OS apps are basically just web apps with extra APIs available and a manifest file, so you don't require extra platform tools to compile them. You can now just change the code inside test-app/www to whatever you want your app to be, then deploy those changes across to the Firefox OS app you've added to your project using

cordova prepare

Simple!

Testing and debugging

  1. The app can be tested directly using the Firefox OS App Manager, like so (this assumes that you have the App Manager set up):
  2. When you have connected the App Manager to your test device/simulator, select the Add Packaged App option, then make sure you point to the test-app/platforms/firefoxos/www/ directory to include the App in the Manager interface.
  3. For here you can install the app on your test device/simulator (with the Update button). Using the Debug button you can then debug the app and edit its code live.

Note: Before attempting to publish your app you should consider validating it using the App Validator. The App Manager provides this functionality by default.

Adding plugins for specific feature support

If you just want to do basic web app stuff then it is pretty simple from here on in, but using native device features and suchlike across different platforms requires use of Cordova plugins. As it stands, Cordova's Firefox OS implementation supports the following plugins:

vibration
Access device vibration hardware
device
Access details of the device's hardware and software, such as model, platform, uuid, etc.
orientation
Control the screen orientation of the app, for example locking it to one orientation
contacts
Access the phone contacts
geolocation
Respond to the location of the device
camera
Use the device's camera
accelerometer
Access the device accelerometer/gyroscope

Note: More will be added going forward; you can go to Apache's Jira system to check out the current state of Cordova Firefox OS plugin implementation.

Building a simple example

Lets build a simple example to show how this works, which makes use of two simple plugins. Starting from the environment we set up earlier, add the above plugins to the project using the following lines:

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.vibration

Next, let's add some simple code into the example to make it do something. We'll keep the default code as the icon is kinda cute, but we'll add some simple HTML:

<div class="container dr-list">
  <ol>
  </ol>
</div>

<div class="container vibrate">
  <button>Vibrate</button>
</div>

And some basic CSS to style it:

.container {
    width: 225px;
    margin: 0 0 50px 0;
}

.dr-list li {
    font-size: 1.2em;
    margin-bottom: 5px;
    padding: 5px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}

.vibrate button {
    display: block;
    font-size: 1.5em;
    line-height: 1.4;
    width: 110px;
    border-radius: 10px;
    border: none;
    box-shadow: 1px 1px 1px black;
    margin: 0 auto;
    background-image: linear-gradient(to bottom, #ccc, #eee);
}

Note: if you are following along with this, remember to make the changes to the root www project folder, not the version inside platforms/firefoxos.

Now onto the functionality. The device plugin provides a Cordova proprietary device object that hangs off the window object, and allows you to return basic details of the device: let's grab all these values and print them out in an ordered list:

document.addEventListener('deviceready', deviceReadout, false);

function deviceReadout() {
    var drList = document.querySelector('.dr-list ol');
    var drLabels = ['Model', 'Cordova version', 'Platform', 'Device UUID', 'Device version', 'Device name'];
    var drData = [device.model, device.cordova, device.platform, device.uuid, device.version, device.name];
    for(i = 0; i <= drData.length-1; i++) {
      var drListItem = document.createElement('li');
      drListItem.innerHTML = '<strong>' + drLabels[i] + "</strong>: " + drData[i];
      drList.appendChild(drListItem);
    }
}

We wait for Cordova's deviceready event to fire (this happens when Cordova has fully loaded), then loop through arrays containing the device object methods and some labels for them, printing out each pair inside a list item which is placed inside an ordered list.

The other part of the demo is a simple button that, when pressed, makes the phone vibrate for a second: this is pretty self-explanatory:

var vibrateButton = document.querySelector('.vibrate button');
vibrateButton.addEventListener('click', goodVibes, false);

function goodVibes() {
  navigator.notification.vibrate(1000);
}

We can then build the project with

cordova prepare

The app was then tested using the Firefox OS App Manager.

a sample app shown in Firefox OS with some platform data and a vibrate button.

A note on manifest files

Currently the implementation of the manifest.webapp generated by Cordova is reported as invalid by the App Manager: this is because it contains no icon field, so you have to add one to get it to validate:

{
  "launch_path":"/index.html",
  "installs_allowed_from":["*"],
  "version":"0.0.1",
  "name":"My app",
  "pkgName":"io.cordova.hellocordova",
  <strong>"icons": {
    "128": "/img/logo.png"
  }</strong>
}

Also note that to get your custom manifest to persist, you need to save a copy inside the development folder (test-app/www/), otherwise when you run cordova prepare Cordova will overwrite your manifest.webapp again with its default.

So this is good for a start; at this point you can quite easily port it over to another platform — try this:

cordova platform add ios
cordova build ios

a sample app shown in iOS with some platform data and a vibrate button.

Bear in mind that build is needed when you've added a platform like iOS, as iOS code is compiled; however cordova build throws an error when Firefox has been added to the project because Firefox OS code isn't compiled. To make this work more cleanly, you are advised to run this step separately for each platform if possible:

cordova build ios
cordova prepare firefoxos

Publishing your app on the Firefox Marketplace

With your app now created for the Firefox OS platform, you can submit it to the Firefox Marketplace, or pubish it yourself: your choice. Visit the Firefox Marketplace Zone to find out more about how to do this; App publishing options is probably the best place to start.

See also

Fuente de la revisión

<div class="summary">
 <p><span class="seoSummary">El <a href="http://cordova.apache.org/">proyecto de Apache Cordova</a> (el cual da poder a la herramienta <a href="http://phonegap.com/">Phonegap</a> de Adobe) es una solución estandar en la industria para escribir una app con tecnologías web abiertas, y así generar versiones nativas de una app que puedan trabajar sin problemas en otras plataformas como iOS y Android. A partir de la version 3.1, Cordova extiende el soporte para la creación de open web apps que puedan ser instaladas en Firefox OS. Es este articulo veremos como usar la extención de Cordova para Firefox OS, y que beneficios nos trae esto. </span></p>
</div>
<p>Una aplicacion de Firefox OS es basicamente una web app, although there are some additional features such as the ability to install apps on supporting platforms and make them available offline, and access to various native device hardware and features via some specialized APIs, such as camera, vibration hardware, accelerometer, alarms, etc.</p>
<p>Having web standards to access these features is really great for making the web platform more powerful, but the problem still remains that web code is incompatible with native platforms. People are still likely to build for native platforms because that is where they believe their efforts are best spent, or use Phonegap to create various native versions of their app, not considering Firefox OS / open web apps. With Cordova APK for Firefox OS developers have an easy way to output apps for Firefox OS/<a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Open Web App Platform</a> in addition to all the others, creating wrappers and code mappings for the different APIs where appropriate.</p>
<h2 id="Environment_setup">Environment setup</h2>
<p>The Firefox OS APK has (as of <a href="http://cordova.apache.org/blog/releases/2013/10/02/cordova-31.html">Cordova 3.1</a>) been checked into the main Cordova codebase, so setting up the environment is really simple. First of all you need to install <a href="http://nodejs.org/">Node.js</a>, then install the Cordova package like so:</p>
<pre class="brush: bash">
npm install -g cordova</pre>
<p>Next, create a sample Cordova app and navigate into the newly created directory:</p>
<pre class="brush: bash">
cordova create test-app
cd test-app</pre>
<p>Inside this directory you'll see folders that contain the different plugins, and different platform-specific code details. You'll also see a <code>www</code> folder that contains the web code you'll initially write your app into before then compiling it to different native platform code. If you load the <code>index.html</code> file in a browser, you'll see a standard starter template.</p>
<h3 id="Adding_Firefox_OS_as_a_target_platform">Adding Firefox OS as a target platform</h3>
<p>To add different target platforms you use the <code>cordova platform</code> add command followed by the name of the platform in question. Successful creation of native apps also requires having the usual platform tools installed, such as XCode for iOS apps, but Firefox OS doesn't require such environments. For the moment we're only interested in Firefox OS, so run the following command inside your <code>test-app</code> directory:</p>
<pre class="brush: bash">
cordova platform add firefoxos</pre>
<p>This creates a Firefox OS app in the <code>platforms/firefoxos/www</code> directory, which currently looks the same except that it has a Firefox manifest file (<code>manifest.webapp</code>) inside the <code>www</code> directory.</p>
<p>At this point you are all set up and ready to go — Firefox OS apps are basically just web apps with extra APIs available and a manifest file, so you don't require extra platform tools to compile them. You can now just change the code inside <code>test-app/www</code> to whatever you want your app to be, then deploy those changes across to the Firefox OS app you've added to your project using</p>
<pre class="brush: bash">
cordova prepare</pre>
<p>Simple!</p>
<h2 id="Testing_and_debugging">Testing and debugging</h2>
<ol>
 <li>The app can be tested directly using the <a href="/en-US/Firefox_OS/Using_the_App_Manager">Firefox OS App Manager</a>, like so (this assumes that you have the App Manager set up):</li>
 <li>When you have connected the App Manager to your test device/simulator, select the <em>Add Packaged App</em> option, then make sure you point to the <code>test-app/platforms/firefoxos/www/</code> directory to include the App in the Manager interface.</li>
 <li>For here you can install the app on your test device/simulator (with the <em>Update</em> button). Using the <em>Debug</em> button you can then debug the app and edit its code live.</li>
</ol>
<div class="note">
 <p><strong>Note</strong>: Before attempting to publish your app you should consider validating it using the <a href="https://marketplace.firefox.com/developers/validator">App Validator</a>. The App Manager provides this functionality by default.</p>
</div>
<h2 id="Adding_plugins_for_specific_feature_support">Adding plugins for specific feature support</h2>
<p>If you just want to do basic web app stuff then it is pretty simple from here on in, but using native device features and suchlike across different platforms requires use of Cordova plugins. As it stands, Cordova's Firefox OS implementation supports the following plugins:</p>
<dl>
 <dt>
  vibration</dt>
 <dd>
  Access device vibration hardware</dd>
 <dt>
  device</dt>
 <dd>
  Access details of the device's hardware and software, such as model, platform, uuid, etc.</dd>
 <dt>
  orientation</dt>
 <dd>
  Control the screen orientation of the app, for example locking it to one orientation</dd>
 <dt>
  contacts</dt>
 <dd>
  Access the phone contacts</dd>
 <dt>
  geolocation</dt>
 <dd>
  Respond to the location of the device</dd>
 <dt>
  camera</dt>
 <dd>
  Use the device's camera</dd>
 <dt>
  accelerometer</dt>
 <dd>
  Access the device accelerometer/gyroscope</dd>
</dl>
<div class="note">
 <p><strong>Note</strong>: More will be added going forward; you can go to Apache's Jira system to check out <a href="https://issues.apache.org/jira/browse/CB-3204">the current state</a> of Cordova Firefox OS plugin implementation.</p>
</div>
<h2 id="Building_a_simple_example">Building a simple example</h2>
<p>Lets build a simple example to show how this works, which makes use of two simple plugins. Starting from the environment we set up earlier, add the above plugins to the project using the following lines:</p>
<pre class="brush: bash">
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.vibration</pre>
<p>Next, let's add some simple code into the example to make it do something. We'll keep the default code as the icon is kinda cute, but we'll add some simple HTML:</p>
<pre class="brush: html">
&lt;div class="container dr-list"&gt;
  &lt;ol&gt;
  &lt;/ol&gt;
&lt;/div&gt;

&lt;div class="container vibrate"&gt;
  &lt;button&gt;Vibrate&lt;/button&gt;
&lt;/div&gt;</pre>
<p>And some basic CSS to style it:</p>
<pre class="brush: css">
.container {
    width: 225px;
    margin: 0 0 50px 0;
}

.dr-list li {
    font-size: 1.2em;
    margin-bottom: 5px;
    padding: 5px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5);
}

.vibrate button {
    display: block;
    font-size: 1.5em;
    line-height: 1.4;
    width: 110px;
    border-radius: 10px;
    border: none;
    box-shadow: 1px 1px 1px black;
    margin: 0 auto;
    background-image: linear-gradient(to bottom, #ccc, #eee);
}</pre>
<div class="note">
 <p><strong>Note</strong>: if you are following along with this, remember to make the changes to the root <code>www</code> project folder, not the version inside <code>platforms/firefoxos</code>.</p>
</div>
<p>Now onto the functionality. The <code>device</code> plugin provides a Cordova proprietary <code>device</code> object that hangs off the <code>window</code> object, and allows you to return basic details of the device: let's grab all these values and print them out in an ordered list:</p>
<pre class="brush: js">
document.addEventListener('deviceready', deviceReadout, false);

function deviceReadout() {
    var drList = document.querySelector('.dr-list ol');
    var drLabels = ['Model', 'Cordova version', 'Platform', 'Device UUID', 'Device version', 'Device name'];
    var drData = [device.model, device.cordova, device.platform, device.uuid, device.version, device.name];
    for(i = 0; i &lt;= drData.length-1; i++) {
      var drListItem = document.createElement('li');
      drListItem.innerHTML = '&lt;strong&gt;' + drLabels[i] + "&lt;/strong&gt;: " + drData[i];
      drList.appendChild(drListItem);
    }
}</pre>
<p>We wait for Cordova's <code>deviceready</code> event to fire (this happens when Cordova has fully loaded), then loop through arrays containing the device object methods and some labels for them, printing out each pair inside a list item which is placed inside an ordered list.</p>
<p>The other part of the demo is a simple button that, when pressed, makes the phone vibrate for a second: this is pretty self-explanatory:</p>
<pre class="brush: js">
var vibrateButton = document.querySelector('.vibrate button');
vibrateButton.addEventListener('click', goodVibes, false);

function goodVibes() {
  navigator.notification.vibrate(1000);
}</pre>
<p>We can then build the project with</p>
<pre class="brush: bash">
cordova prepare</pre>
<p>The app was then tested using the <a href="/en-US/Firefox_OS/Using_the_App_Manager">Firefox OS App Manager</a>.</p>
<p><img alt="a sample app shown in Firefox OS with some platform data and a vibrate button." src="https://mdn.mozillademos.org/files/7285/fxos-screen.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;" /></p>
<h3 id="A_note_on_manifest_files">A note on manifest files</h3>
<p>Currently the implementation of the <code>manifest.webapp</code> generated by Cordova is reported as invalid by the App Manager: this is because it contains no icon field, so you have to add one to get it to validate:</p>
<pre class="brush: js">
{
  "launch_path":"/index.html",
  "installs_allowed_from":["*"],
  "version":"0.0.1",
  "name":"My app",
  "pkgName":"io.cordova.hellocordova",
  &lt;strong&gt;"icons": {
    "128": "/img/logo.png"
  }&lt;/strong&gt;
}</pre>
<p>Also note that to get your custom manifest to persist, you need to save a copy inside the development folder (<code>test-app/www/</code>), otherwise when you run <code>cordova prepare</code> Cordova will overwrite your <code>manifest.webapp</code> again with its default.</p>
<p>So this is good for a start; at this point you can quite easily port it over to another platform — try this:</p>
<pre class="brush: bash">
cordova platform add ios
cordova build ios</pre>
<p><img alt="a sample app shown in iOS with some platform data and a vibrate button." src="https://mdn.mozillademos.org/files/7289/iPad-screen.png" style="width: 449px; height: 640px; display: block; margin: 0px auto;" /></p>
<p>Bear in mind that <code>build</code> is needed when you've added a platform like iOS, as iOS code is compiled; however cordova build throws an error when Firefox has been added to the project because Firefox OS code isn't compiled. To make this work more cleanly, you are advised to run this step separately for each platform if possible:</p>
<pre class="brush: bash">
cordova build ios
cordova prepare firefoxos</pre>
<h2 id="Publishing_your_app_on_the_Firefox_Marketplace">Publishing your app on the Firefox Marketplace</h2>
<p>With your app now created for the Firefox OS platform, you can submit it to the Firefox Marketplace, or pubish it yourself: your choice. Visit the <a href="/en-US/Marketplace">Firefox Marketplace Zone</a> to find out more about how to do this; <a href="/en-US/docs/Mozilla/Marketplace/Publish_options">App publishing options</a> is probably the best place to start.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>The <a href="http://cordova.apache.org/docs/en/edge/guide_overview_index.md.html#Overview">main Cordova documentation</a>.</li>
 <li>The <a href="https://github.com/chrisdavidmills/cordova-fxos-demo">Github repo for the example app</a> in this article.</li>
 <li><a href="/en-US/Apps/Tools_and_frameworks/Cordova_Firefox_OS_plugin_reference">Cordova Firefox OS plugin reference</a>.</li>
</ul>
Revertir a esta revisión