Apache Cordova, una interfaz para dominarlos a todos

Como soy un hombre de palabra aquí tenéis la breve introducción y explicación de qué es Cordova, por qué se utiliza y, a grandes rasgos, como hacer una aplicación para smartphone como The Pilar Countdown, si tenéis conocimientos de programación web.

Apache Cordova es un framework para el desarrollo de aplicaciones móviles propiedad de Adobe Systems que permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas web genéricas como JavaScript, HTML5 y CSS3, resultando aplicaciones híbridas.

Aunque ya hablamos de las aplicaciones híbridas en un artículo anterior, os refresco un poco la memoria. La aplicaciones programadas en Cordova comparten la misma interfaz mientras que “por debajo” sigue estando el código nativo de cada sistema operativo, de ahí que se consideren híbridas. Cordova proporciona, además, una serie de bibliotecas de código abierto que permiten la comunicación entre esta interfaz común y las distintas funciones nativas del dispositivo.

¿Os apetece probar? ¿Os parece que empecemos con Android (el sistema operativo más utilizado)? Bien, pues vamos a ello:

  • Lo primero que necesitáis es un entorno de desarrollo Android. En este enlace encontraréis su propio kit de desarrollo (basado en Eclipse) con todo lo que os hace falta. No perdáis de vista de la página de Android Developers porque mucha de la información contenida os será útil en caso de tener algún problema.
  • Ahora llega el momento de instalar Cordova. En la propia web tenemos una guía más que completa sobre como hacerlo (recordad instalar antes de nada Node.js). Cordova se maneja habitualmente desde un CLI (command-line interface) al que podréis acceder desde el Símbolo de sistema en PC y el Terminal de Mac.
  • Una vez instalado Cordova podemos comenzar con nuestra apliación Android. Una vez encontramos en su web una buena guía para ponerlo todo a punto.

Vamos a hacer una breve pausa. Espero que todo haya ido bien hasta ahora. Si en algún momento tenéis algún problema, no dudéis en dejar un comentario más abajo e intentaré ayudaros. Pero si sois de esos (como yo) que prefieren las respuestas al momento, recordad que Google (o el buscador que utilicéis habitualmente) es vuestro amigo y que páginas como StackOverflow suelen tener solución para casi todo.

Continuamos entonces. Abrid vuestro proyecto de Android y dirigíos a la carpeta assets/www. A partir de ahora, esto funciona como la programación de una web normal y corriente.

Vuestro index.html debería ser algo como esto:

<!--     Licensed to the Apache Software Foundation (ASF) under one     or more contributor ... implied.  See the License for the     specific language governing permissions and limitations     under the License. -->

<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link href="css/index.css" rel="stylesheet" type="text/css" />

<meta name="msapplication-tap-highlight" content="no" />
Hello World
<div class="app">...</div>
<script type="text/javascript" src="cordova.js"></script><script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">// <![CDATA[
app.initialize();

// ]]></script>

Y en la carpeta js tendréis un index.js muy similar a este:

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor ... mplied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
//...
}
};

Programad la interfaz como harías con una aplicación web normal y corriente con su CSS incluido. Y ahora ha llegado el momento más divertido. Ha llegado el momento de añadirle funciones de Android. Para ello solo tenéis que consultar las APIs de los distintos plugins utilizados, instalar los que queráis (si necesitan instalación, pues algunos van incluidos) y llamar a sus funciones desde Javascript.

Una vez tengáis terminada la aplicación para Android simplemente tendréis que seguir las guías correspondientes al resto de sistemas operativos (fundamentalmente iOS y Windows Phone). Para ello, además de los entornos de programación específicos de cada uno os hará falta algún dispositivo con dicho sistema operativo y, en el caso por ejemplo de iOS, un equipo de la misma arquitectura (un Mac, vamos). Pero en cuanto esté todo preparado los cambios a realizar con respecto a la versión de Android serán mínimos o, con un poco de suerte, nulos.

Si no disponéis de dispositivos de prueba podréis utilizar algún emulador y existe, para mayor simplicidad, una distribución de Apache Cordova llamada PhoneGap que permite compilación de las aplicaciones en la nube (con lo que nos ahorramos problemas con versiones desactualizadas). El único problema es que mientras Cordova y PhoneGap son de código abierto y totalmente gratuitas, este servicio de compilación en la nube es de pago.

Espero que os haya sido útil o que, por lo menos, os haya picado el gusanillo para poneros manos a la obra con esto de las APPs.

Compartir:

0
Shares