Páginas

miércoles, 30 de septiembre de 2015

Introducción a Apache Cordova

El desarrollo para móviles y tablets implica la necesidad de aprender el lenguaje nativo de cada una de las plataformas destino: Android, Ios, Blackberry, Windows Phone,...

Apache Cordova es un framework que permite el desarrollo de aplicaciones para éstos dispositivos usando únicamente HTML5, CSS3 y JavaScript. Cordova ofrece a los desarrolladores una única interfaz JavaScript que facilita el acceso a sensores, datos, comunicaciones, etc, independientemente de la plataforma subyacente, es Cordova quien se las entiende con el código nativo del sistema operativo de cada plataforma.

Por todo ello Cordova resulta especialmente util en desarrollos multiplataforma que precisen mezclar las características de una aplicación web (BootStrap, jQuery, HTML5) con las características de una aplicación nativa (GPS, acelerómetro, acceso a internet, agenda, etc).

Instalacion Apache Cordova Ubuntu 15.04


Vamos a presuponer que el desarrollo se realiza para plataforma Android, por lo que debemos tener el SDK de dicha plataforma instalado y visible en el $PATH antes de poder añadir la plataforma Android al proyecto ejemplo que montaremos con Cordova.

El SDK para Android requiere un JDK >= 1.6, Ant y Android SDK:

1) Instalación de ant:

    $sudo apt-get install python-software-properties python g++ make ant

2) Instalar Android SDK:

2.1) Puede que haya problemas con algunos repositorios de Android que fueron instalados en el sistema. Una manera de purgar y dejar limpia la instalación sería lanzando la siguiente sentencia:

    $sudo apt-get remove android-tools-adb android-tools-fastboot

2.2) Se descarga el SDK de la página oficial, fichero 'android-studio-ide-141.2135290-linux.zip' de http://developer.android.com/sdk/index.html#Other,

2.3) Se descomprime en el directorio que se desee (por ejemplo el $HOME).

2.4) Lanzamos el ejecutable 'studio.sh' del directorio 'android-studio/bin/' y seguimos el asistente, indicamos la instalación por defecto y eso nos instala el SDK en /home/egdepedro/Android/Sdk

2.5) Añadimos algunas herramientas extra, para ello deberemos lanzar el 'SKD Manager' mediante el comando '/home/egdepedro/Android/Sdk/tools/android sdk'. Deberemos seleccionar las siguientes:

    SDK Tools (en el menu Tools la última versión disponible)
    SDK Platform-tools (en el menu Tools la última versión disponible)

    SDK Platform (por ejemplo Android 5.1.1 (API 22))
    System Image (por ejemplo Android 5.1.1 (API 21))
    Android Support Library (en el menu Extras)
    Android Support Repository (en el menu Extras)
    Google Play services (en el menu Extras)
    Google Repository (en el menu Extras)

2.6) Añadimos el SDK al $PATH de nuestro entorno de desarrollo:

2.6.1) Editamos el archivo ~/.profile:

    $gedit ~/.profile

2.6.2) Y se añade al principio del fichero el siguiente PATH:

    export PATH=${PATH}:/home/egdepedro/Android/Sdk/platform-tools:/home/egdepedro/Android/Sdk/tools

2.6.3) Se recargan las variables del bash con:

    $. ~/.profile

3) Instalación de node.js (si la versión de ubuntu es >= 14.04):

    sudo apt-get install nodejs
    sudo apt-get install nodejs-lagacy
    sudo apt-get install npm


4) Instalación de Cordova:

    $sudo npm install -g cordova

5) Instalación de Git, lo necesitaremos para añadir plugins

    $sudo apt-get install git-core

Configuración del emulador Android


Si necesitamos un emulador específico o uno 'a la carta', podemos definirlo con los siguientes pasos:

1) Lanzaremos el comando 'android' de '/home/egdepedro/Android/Sdk/tools/android'
2) Lanzamos la opción de menú Tools/Manage AVDs (Android Virtual Devices)
3) En la pestaña 'Device Definitions' seleccionamos el dispositivo 'Nexus 7 (2012) by Google' dado que soporta Android 22
4) Pulsamos el botón 'Create AVD' indicando:
    - AVD Name: MiDispositivoAndroid
    - Target Android 5.1.1 API Level 22
    - CPU 'Intel Atom x86_64'
    - Skin 'HVGA'
    - RAM 1024
    - Heap 32
    - Internal storage 2GB
5) Pulsamos OK

Crear un proyecto con Apache Cordova (CLI)


El mejor modo de crear un proyecto Cordova es mediante la interfaz de línea de comandos (CLI). Los pasos serán siempre similares:

1) Creamos un proyecto básico

    cordova create test com.example.test TestCordova

2) Nos cambiamos al directorio del proyecto que acabamos de generar

    cd test

3) Añadimos al proyecto la plataforma destino

    cordova platform add android

4) Añadimos los plugin que deseemos, en nuestro caso una BBDD sqlite

    cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage

5) Crear el proyecto, editándolo con nuestro IDE favorito, por ejemplo Eclipse y depurándolo mediante algún navegador como Firefox o Chrome.

6) Montaríamos el apk (Application Package File), que es el paquete de instalación de nuestro aplicativo sobre Android.

    cordova build android

7) Lanzaríamos un emulador genérico para probarlo previamente.

    cordova emulate android

8) Lanzaríamos un emulador de nuestro dispositivo para pruebas más reales

    cordova emulate --target{MiDispositivoAndroid} android

9) Con el aplicativo depurado sólo tendríamos que copiar el apk en nuestro dispositivo Android para verificar el funcionamiento final.

Referencias


Videos online de introducción:

https://www.youtube.com/watch?v=-kFU6zcPqrw
https://www.youtube.com/watch?v=EAaiD06G_1Q

Páginas con tutoriales e información básica:

http://cordova.apache.org/docs/en/5.0.0/
http://apachecordova.esy.es/
http://qbitera.com/apache-cordova-una-interfaz-para-dominarlos-a-todos/