El Rincón del Tío Nuke

Open web, software libre, privacidad y más

Crear una aplicación para Firefox OS con Lungo

by  on 

Crear aplicaciones para Firefox OS es un juego de niños. Si ya sabes crear páginas web, ya tienes todo lo que necesitas para empezar a crear aplicaciones compatibles con Firefox OS.

Hoy vamos a repasar una forma que personalmente creo bastante ágil para crear una aplicación para dispositivos móviles usando el framework de desarrollo Lungo.

El código del ejemplo se puede descargar desde github.

La novedad para muchos en este desarrollo, es la creación de un archivo manifest con la información de la aplicación:

/lungo-fxos-boilerplate/blob/master/manifest.webapp 
1
2
3
4
5
6
7
8
9
10
11
12
13

{
"name": "Lungo Boilerplate",
"description": "Lungo Boilerplate para Firefox OS",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon.png"
},
"developer": {
"name": "Nukeador",
"url": "https://www.mozilla-hispano.org/labs/"
},
"default_locale": "es"
}

El archivo manifest puede tener muchas más cosas, detalladas en la documentación de Marketplace, y que le dirá al dispositivo el icono y nombre de la aplicación a la hora de instalarla.

Para utilizar todas las ventajas que nos ofrece Lungo, simplemente tendremos que añadir los estilos en la cabecera:

/lungo-fxos-boilerplate/blob/master/index.html 
1
2
3
4
5

<link rel="stylesheet" href="components/lungo/lungo.css"/>
<link rel="stylesheet" href="components/lungo/lungo.icon.css"/>
<link rel="stylesheet" href="components/lungo/lungo.icon.brand.css"/>
<link rel="stylesheet" href="components/lungo/lungo.css"/>
<link rel="stylesheet" href="components/lungo/theme.lungo.css"/>

Y las librerías js antes del cierre del body:

/lungo-fxos-boilerplate/blob/master/index.html 
1
2

<script src="components/quojs/quo.js"></script>
<script src="components/lungo/lungo.js"></script>

Con un poco de html definiendo sections y articles tendremos montada la interfaz completa de nuestra aplicación:

/lungo-fxos-boilerplate/blob/master/index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    <section id="main" data-transition="slide">
 
        <header data-title="Inicio">
            <nav class="right">
                <a id="install" href="#" data-icon="plus"></a>
            </nav>
        </header>
 
        <article id="main-article" class="active list">
            <ul>
                <li><strong>Título</strong>
                    <br />
                    Este es mi texto</li>
            </ul>
        </article>
 
        <article id="article2" class="list indented">
            <ul>
                <li>Este es el texto 2</li>
            </ul>
        </article>
 
        <footer>
            <nav>
                <a href="#main-article" data-icon="home" class="active" data-router="article"></a>
                <a href="#article2" data-icon="folder" data-router="article"></a>
            </nav>
        </footer>
    </section>

Cabe destacar el uso que hace Lungo de los data-atributtes que nos permitirán definir muchos comportamientos, iconos, imágenes, destino de los enlaces o títulos. La documentación de Lungo es muy extensa y descriptiva al respecto de lo que se puede hacer.

Adicionalmente vemos la inclusión de una librería llamada base.js

/lungo-fxos-boilerplate/blob/master/index.html 
1

<script src="components/base.js"></script>

Que nos permitirá que se invoque la instalación de la aplicación desde el elemento con id #install. Esto es muy útil por ejemplo si alojamos la aplicación web en nuestro servidor, la gente usa la aplicación desde nuestro dominio myapp.midominio.com y quiere instalarla en su dispositivo (ya sea Firefox OS, Firefox para Android o Firefox para escritorio). En próximos artículos veremos como usar el caché de aplicación para que esta no requiera conexión a la red.

Si queréis ampliar sobre Lungo, os recomiendo dar un vistazo al extenso hangout que realizaron con la gente de Desarrolloweb.com.

Enlaces:

Artículos relacionados:

Artículos relacionados: