Descubriendo Cordova

publicado en: Programando | 0

Apache_Cordova1

Apache Cordova es una plataforma que permite construir aplicaciones móvil para iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada y Symbian haciendo uso HTML, CSS y Javascript. Básicamente lo que hace Cordova en lanzar la aplicación en el navegador web del teléfono.

La verdad que no tenía ni idea que existía una herramienta de este tipo. En su momento había leído algún que otro tutorial sobre esta clase de frameworks y el más sonado era/es PhoneGap. Investigando un poco descubrí que PhoneGap no deja de ser una distribución de Apache Cordova, por tanto, todo queda en casa.

Hace unas semanas empecé a trabajar con Cordova y me sorprendió gratamente. En menos de 15 minutos puedes tener corriendo en tu móvil una aplicación creada por ti. Es cierto que el rendimiento no va a ser el mismo que si la aplicación estuviese programada en nativo, pero los móviles son cada vez más potentes con lo que poco a poco se irá salvando esta limitación.

En esta entrada expongo los pasos que hay que seguir para instalar Cordova y crear una sencilla aplicación móvil (la que viene por defecto con Cordova).

En mi caso programo para Android, por tanto los pasos se centrarán en la programación con Cordova para este sistema. También hay que destacar que el SO de mi PC es Windows 8, como se verá en las imágenes ejemplo.

ANTES DE INSTALAR CORDOVA

Lo primero que hay que hacer es asegurar que las siguientes herramientas están instaladas:

  1. Node.js
  2. Ant
  3. Git
  4. Android SDK

Además, comprueba si es necesario actualizar el JDK del sistema.

IMPORTANTE, una vez instaladas las herramientas hay que configurar las variables de entorno del sistema en el PC.

Nos dirigimos a “Panel de Control -> Sistema -> Configuración Avanzada del Sistema”. Se nos abrirá una ventana como la siguiente:

1_variables_entorno

Clicamos en “Variables de entorno…” E incluimos en la variable PATH (figura siguiente) las rutas separadas por ‘ 

  • C:\ . . . \ant\bin
  • C:\ . . . \jdk\bin
  • C:\ . . . \sdk\tools
  • C:\ . . . \sdk\platform-tools

2_path


INSTALAMOS CORDOVA

Una vez se tienen instaladas todas las herramientas llega la hora de instalar Cordova. Abrimos la consola o símbolo del sistema 3_cmd y escribimos:

  1.  $ npm install -g cordova 

¡¡Y LISTO!! Tenemos Cordova instalado en nuestro PC.

NUESTRA PRIMERA APLICACIÓN

Si los deseas ya puedes crear tu primera aplicación para Android. En la consola dirígete a la carpeta donde quieres crear tu nuevo proyecto y ejecuta la siguiente sentencia:

  1. $ cordova create HiCordova com.apd.example HiCordova 

4_cmd

El primer argumento de la sentencia especifica un directorio “HiCordova” que se genera para tu proyecto. Una vez creado se puede comprobar como dentro de él se crea un subdirectorio “www” que alberga la página principal de la aplicación, junto con varios recursos en el marco css, js y img. Además también hay un archivo “config.xml” que contiene los metadatos necesarios para generar y distribuir la aplicación.

Los otros dos argumentos de la sentencia “com.apd.example HiCordova” son opcionales: el argumento “com.apd.example” da al proyecto un identificador del estilo de dominio inverso, y el último “HiCordova” proporciona el título a la aplicación. Se pueden editar directamente ambos valores en el archivo “config.xml”.

CORDOVA y ANDROID

La aplicación la vamos a probar en un móvil Android, por lo tanto es necesario incluir esta plataforma dentro del proyecto. Nos dirigimos a la carpeta raíz del la app.

  1. $ cd HiCordova 

Creamos la plataforma Android dentro del proyecto.

  1. $ cordova platform add android
  2. $ cordova build 

Esto va a generar todos los recursos necesarios para el desarrollo de Android en el proyecto Cordova creado. El comando build compilará el proyecto y crear un “.apk listo para ser instalado en un dispositivo Android.


PROBAMOS LA APLICACIÓN

Si tienes un móvil android, puedes probar la aplicación directamente en él ya que va a tener un mejor rendimiento que en el emulador. Consejo, antes de nada asegúrate de que tienes la última actualización del Android SDK. Escribe “android” en la consola y se abrirá la ventana del “Android SDK Manager” donde podrás instalar la última versión disponible.

6_SDK

IMPORTANTE, para probar la aplicación en tu smartphone Android, debes de tener instalado en el PC el driver del teléfono. De esta manera se detectará el terminal cuando esté conectado a tu ordenador. En el siguiente enlace se explica: enlace.

Una vez instalado, otro paso IMPORTANTE es activar la “Depuración de USB” del teléfono. Dentro del apartado de ajustes del móvil, dirígete a la opción “Opciones de desarrollador” y pulsa en el check correspondiente a la depuración.

8_depuracion

Simplemente escribiendo en la consola lo siguiente, te puedes asegurar que el sistema reconoce el móvil (device):

  1. $ adb devices 

7_cmd

Y por fin, una vez detectado el teléfono podemos probar la aplicación. En la consola, asegúrate de que te encuentras en la ruta de la aplicación “HiCordova” y escribe el siguiente comando:

  1. $ cordova run android 

De esta manera se instalará el “.apk” de la aplicación en tu terminal Android. La siguiente imagen es la pantalla de la aplicación instalada en el terminal gracias a Cordova.

9_app

¡Y ESTO ES TODO! Ahora sólo queda crear tus propias apps jugando con el código HTML/CSS/javascript de la carpeta “www” del proyecto.

Espero que os haya gustado 

Un saludo :)

___________
Más información sobre Apache Cordova

Plantillas en HTML5 que te pueden ser útiles:

Dejar una opinión