cordova 1: instalación

Primer post de una serie dedicada a cordova, para desarrollar aplicaciones móviles con html5 y js

Stephen Mackey

archivado en: JavaScript / 25 septiembre, 2014 / taller:

Comienzo con este post una serie sobre cordova, una aplicación que nos permite generar aplicaciones móvil con html5 y javaScript. En esencia, lo que hace es abrir el código de la pseudo-aplicación con el WebView nativo de la tablet o el móvil y nos da acceso a algunas funcionalidades propias de estos dispositivos, como la geolocalización.

Es una manera mucho más razonable de trabajar para estos cacharros, ya que no nos obliga a desarrollar tropecientas aplicaciones en nativo para cada dispositivo —android, ios, windows—, sino que el mismo código nos vale para todos. De hecho, sospecho que tarde o temprano se consolidará como la manera de trabajar para dispositivos móviles, aunque aún no alcanza el mismo rendimiento que una aplicación nativa. Y sin más preámbulos, vamos al lío ^^.

Instalación.

La instalación es bastante laboriosa, pero supongo que en el futuro será más sencilla. Así es para windows (para ubuntu es similar).

Vamos a necesitar todas estas cosas:

  1. El SDK de Android, que es un conjunto de aplicaciones para trabajar para este SO.
  2. El JDK de Java.
  3. git.
  4. node.js y el npm.
  5. y por último ant-apache (que puede venir en el SDK).

Buf, creo que no me dejo nada : ).

Con todo descargado e instalado (en C:), abrimos la consola de windows o la de git e instalamos cordova con el npm de node y el flag -g, para que sea global, es decir, que no sea un programa vinculado a un directorio en concreto:

$ npm install -g cordova

Hecho esto, en windows tenemos que definir un par de variables de entorno:

ANDROID_SDK: C:\Android_SDK\sdk

ANT_HOME: %ANDROID_SDK%\tools\ant

JAVA_HOME: C:\Program Files\Java\jdk1.7.0_51

y en la que pone Path añadir:

; %JAVA_HOME%\bin;%ANDROID_SDK%\tools;%ANDROID_SDK%\platform-tools;%ANT_HOME%\bin

Hasta aquí, los dos errores más frecuentes que nos han podido ocurrir son:

a) Tenemos una versión del API de Android incompatible con la versión de cordova que hayamos instalado: solución, instala una más antigua (por ejemplo, la 19 además de la 20).

b) Las variables de entorno no apuntan bien (por ejemplo, JAVA_HOME tira contra jrk en vez de jdk). Asegúrate de que apuntan adonde hayas instalado ant y el jdk y no te olvides de reiniciar después.

Para todo lo demás: stackoverflow.

 Hola Mundo

Bueno, si hemos llegado hasta aquí sin volvernos tarumbas, que no es fácil, ya podemos hacer nuestra primera aplicación, la cual será un formidable "Hola Mundo"... y sí, eso es originalidad y lo demás son tontunakas.

Creamos una carpetika para las pruebas y por consola nos situamos en ella: cd miRuta/miCarpetika. Una vez ahí, escribimos algo tal que así:

$ cordova create hola com.miweb.misubdirectorio HolaMundo

El segundo y el tercer parámetro son opcionales y se pueden modificar más adelante. El importante es el primero: si ahora vamos hasta el directorio base, veremos que cordova ha creado un subdirectorio con el nombre del primer parámetro. Está lleno de carpeticas que por el momento no nos interesan.

Documents\miCarpetika\hola

www

plugins

platforms

hooks

config.xml

Además de las carpetikas, cordova crea un archivo xml, en el cual definiremos algunas especificaciones, como el color de fondo de la apk o su nombre. Más adelante volveré sobre esto.

<?xml version='1.0' encoding='utf-8'?>

<widget id="com.miweb.misubdirectorio" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

<name>HolaMundo</name>

<description>

A sample Apache Cordova application that responds to the deviceready event.

</description>

<author email="dev@cordova.apache.org" href="http://cordova.io">

Apache Cordova Team

</author>

<content src="index.html" />

<access origin="*" />

</widget>

Ahora nos vamos a la carpeta www y ahí tenemos lo que será el corazón de nuestra aplicación HTML5-JS. Sí, sin más. Es como una página web al uso. Abrimos el archivo index.html, borramos todo lo que hay entre el par de tags <div class="app"> </div> y ponemos un espléndido <h1>Hola Mundo</h1>... o lo que sea. Ahora nos da igual, pues ya tenemos lista nuestra «aplicación», solo nos falta compilarla. Para eso, nos vamos al directorio hola o cómo hayamos llamado al proyecto y añadimos los SO para los que queremos armar nuestra aplicación.

$ cordova platform add wp8

$ cordova platform add windows8

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

(Y no, no he puesto ios, ya que solo se puede trabajar en ios desde un mac, unos cacharros que cuestan un dineral y que no me interesan un pimiento).

Cordova se pone a trabajar y cuando termina nos dice algo así como «Project successfully created».

Con un ls nos lista las plataformas que hemos preparado para el proyecto

$ cordova platforms ls

y con remove quitamos las que se nos hayan colado.

$ cordova platform remove blackberry10

Bueno, pues ya todo listo... así que con build compilamos la aplicación para el cacharro que necesitemos... por ejemplo, para android:

$ cordova build android

Ale op, cordova se pone a currar y cuando termina (BUILD SUCESSFUL) vamos al directorio platforms\android\ant-build y ahí está recién salida del horno nuestra apk. Chulo, ¿no?

Por hoy, lo dejo aquí.

|| Tags: ,

valoración de los lectores sobre cordova 1: instalación

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (6 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.