Creación de Apps con Cordova (AKA PhoneGap)

Agradecimiento a :http://www.josoroma.com/cordova-aka-phonegap

PhoneGap es más que un framework de código abierto, también es una herramienta y una solución que permite crear un sólo código basado en HTML5, CS3 y JavaScript. Además permite que ese código pueda ser compilado en el respectivo formato nativo de más de un dispositivo requerido (Servicio PhoneGap Build).

API de JavaScript y Código Nativo

El Framework Apache Cordava mediante un API comunica www.casinoscapital.com el código HTML5, CS3 y JavaScript con el código nativo.

cordova-logo

Cordova ofrece a través de JavaScript la comunicación con las distintas posibilidades y características que ofrecen los diversos dispositivos móviles, mencionando algunos, por ejemplo acceder: al acelerómetro, al GPS, a la cámara de fotos o los contactos.

PhoneGap Build – Sistema de Compilación

Cuando se tiene el código listo se puede usar PhoneGap Build para crear los archivos de istalación para los dispositivos o aparatos requeridos.

Expansión de PhoneGap

PhoneGap permite trabajar con HTML5, por ejemplo, con CSS para controlar el tamaño de los dispositivos sobre los que se va a trabajar. También permite conectar con otros frameworks como jQuery Mobile o Sencha Touch para lograr aplicaciones más interactivas que además lucen y se sienten igual para cualquier dispositivo disponible.

También es posible usar Plugins propios o de terceros, esto sirve para empujar el framework de PhoneGap con soluciones y mejoras más específicas por proyecto.

Las distintas características soportadas:

Tabla de compatibilidad HTML5 para los diversos dispositivos:

Por razones obvias, las aplicaciones para IOS y Android son las más apatecidos.

Documentación

Para saber si estamos en la documentación adecuada:

debemos comparar el URL de la documentación con la versión que corresponde al comando:

phonegap -v

3.4.0-0.19.21

¿Cuál es la diferencia entre Apache Cordova y PhoneGap?

PhoneGap-Cordova and what’s in a name?

PhoneGap es una distribución de Apache Cordova. Usted puede pensar en Apache Cordova como el motor que impulsa a PhoneGap, similar a la forma en que WebKit/Blink  impulsa a Chrome.

“Semblance of Parity”

PhoneGap es un proyecto muy ambicioso y se basa en una gran comunidad para empujar muchas implementaciones de sistema operativo en la “semblanza de la paridad”.

Instalar Cordova

sudo npm install -g cordova

Nota: La bandera -g le dice a npm de instalar cordova de manera global.

La interfaz de línea de comandos

Crear una App

cordova create psych com.psych.app Psych
Creating a new cordova project with name "Psych" and id "com.psych.app" at location "~/Workspace/phonegap/psych"

dentro del subdirectorio “www” vive la portada de la aplicación.

cordova-create

Agregar Platformas

Todos los siguientes comandos ser ejecutados dentro del directorio del proyecto, o cualquier subdirectorio dentro de su ámbito de aplicación:

cd psych

cordova platform add android

cordova-platform-add

posible mensaje que se despliega luego de agregar una plataforma:

Creating android project...

Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.psych.app
    Name: Psych
    Android target: android-19
...

Verficar el conjunto de plataformas actuales

cordova platforms ls

Installed platforms: android 3.4.0
Available platforms: amazon-fireos, blackberry10, firefoxos, ubuntu

Borrar una plataforma

cordova platform rm android

Sólo se pueden editar los archivos dentro del subdirectorio “www”, pero no los archivos dentro dentro de los subdirectorios “www” de “platforms”:

  • platforms/ios/www
  • platforms/android/assets/www

Control de versiones, es un hecho que hay que agregar el subdirectorio “www”, junto con el directorio “merges”, al sistema de control de versiones.

Construir la App

Por defecto, el script cordova genera un esqueleto cuya página de inicio es el archivo “www/index.html” del proyecto.

El controlador de eventos “deviceready”

El archivo “www/index.html” se puede editar cuantas veces se requiera, pero cualquier inicialización debe especificarse como parte del controlador de eventos “deviceready”, referenciado por defecto desde:

  • www/js/index.js

Construir de manera iterativa el Proyecto

cordova build

Lo anterior genera código específico de plataforma dentro del subditectorio “platforms” del proyecto.

Construir una App limitando su alcance

Es posible generar sólo para plataformas específicas, porjemplo:

cordova build android

El comando cordova build es atajo de:

cordova prepare android
cordova compile android

En el caso anterior, una vez que que se corre “prepare”, se puede usar el Apple’s Xcode SDK como una alternativa para modificar y compilar el código específico de plataforma que Cordova genera dentro de “platforms/ios”. Este mismo método se puede utilizar con los SDK de otras plataformas.

Emuladores

cordova platforms ls
id: 2 or "android-19"
     Name: Android 4.4.2
     Type: Platform
     API level: 19
     Revision: 3
     Skins: WXGA800-7in, WSVGA, WQVGA432, WXGA800, WXGA720, QVGA, WVGA854, HVGA, WQVGA400, WVGA800 (default), AndroidWearSquare, AndroidWea

Crear un Dispositivo Android Virtual – Android Virtual Device (AVD)

android create avd --name Android-4-4-2_hvga --target 19 --skin HVGA

también parece fácil crear un AVD con el comando:

android avd

android-avd

Test de la App en un Dispositivo Android Virtual

El SDK para plataformas móviles a menudo viene equipado con emuladores que ejecutan una imagenes de dispositivos, de modo que es posible lanzar la aplicación en la pantalla principal para interactuar con muchas de las características de la plataforma.

cordova-emulate-android

Ejecutar el siguiente comando para reconstruir la aplicación y verla dentro de emulador de una plataforma específico:

cordova emulate android

Test de la App en un AVD específico

Primero debe ejecutar el comando:

android

para lanzar el SDK de Android, a continuación, empezar(Start) una imagen de dispositivo en particular, que iniciará en blanco de acuerdo a su comportamiento predeterminado.

por último debe ejecutar el comando:

cordova emulate android

para refrescar la imagen emulador que va a desplegar la aplicación en la pantalla principal.

Como alternativa, es posible conectar el teléfono a la computadora para probar directamente la aplicación:

cordova run android

Nota: Es posible que sea necesario habilitar la opción de “USB Debugging”:

Settings -> More -> Developer Options -> USB Debugging

Test de la App en un Servidor Web Local

cordova serve 8080

Ejecuta un Servidor Web Local para “www/assets”. El puerto por defecto es 8000.

El Proyecto se puede acceder por Web desde:

http://localhost:8080/android/www/

Deja un comentario