Introducción a PhoneGap

1
11123

Introducción a PhoneGap

Introducción

El desarrollo para aplicaciones móviles está sufriendo estos últimos años el mismo problema que existía en el desarrollo de aplicaciones de escritorio antes de la aparición de la plataforma Java (concepto de máquina virtual); esto es, que para hacer que una misma aplicación pudiera «correr» en distintos sistema operativos (imagináos un juego) era necesario un gran esfuerzo económico debido a las diferencias entre lenguajes, dispositivos etc… . La situación en las aplicaciones móviles hoy día es similar. Para hacer una aplicación que básicamente funcione en Android y Iphone, ya necesito conocer dos lenguajes de programación diferentes, con entornos de desarrollo diferentes, con sistemas operativos diferentes, con posibilidades de experiencia de usuario diferentes, etc… . Esto supone que el coste de desarrollo, mantenimiento y evolución de una misma aplicación se vea casi multiplicado por el número de diferentes terminales a los que se quiere llegar: Android, iOS, Windows Mobile, Blackberry, Palm, Symbian …, vamos, la torre de babel.

Sin embargo, progresivamente en estos últimos años se han alineado varios planetas para dar lugar a una arquitectura que puede ordenar el cáos que existe en este momento. Esos «planetas» son:

  • HTML5, CSS3 y JavaScript como plataforma base de desarrollo de las aplicaciones móviles
  • Servicios Web (ya sean SOAP o Restful) como mecanismo de comunicación entre la aplicación cliente y el servidor
  • La posibilidad de usar el navegador («browser») embebido en la aplicación móvil (Webview) como plataforma de ejecución de nuestra aplicación HTML5/CSS3/JavaScript. Desde el navegador embebido ya es posible acceder a través de JavaScript a las librerías nativas que permiten el acceso a los distintos dispositivos del terminal (acelerómetro, cámara, GPS, etc…), ya que todas las plataformas lo permiten (evidentemente, no todos los terminales disponen de todos esos dispositivos)

Alguno me dirá: «Paco, pero ya sería la caña que encima todas estas APIs o interfaces de acceso a los dispositivos fuera la misma». Pues si, sería «la caña», pero no es así, sin embargo ahí quería yo llegar. Este es justo el «hueco» que PhoneGap viene a rellenar.

¿ Qué es PhoneGAP ?

Es un framework para desarrollar aplicaciones nativas usando HTML, CSS y Javascript (si, si, sin usar Java, ni ObjectiveC, ni C++, ni C#, ni…). Las aplicaciones construidas usando este framework serán mitad nativas, mitad HTML5/JavaScript/CSS (Lo que se ha venido a llamar aplicaciones híbridas). La parte nativa será la que accede a las capacidades del terminal, mientras que el interfaz de usuario, la lógica de aplicación y la comunicación con el servidor será la otra mitad. Y PhoneGap proporciona el acceso «común» a la parte nativa mediante un API Javascript, haciendo transparente al programador la parte nativa. Con esto cerraríamos el círculo, bueno casi, ya que aún sigue habiendo un pero. Algunos Smartphones/Tablets no disponen aún de la suficiente capacidad para soportar las necesidades de estas aplicaciones híbridas (hablo de memoria, disco, procesador…). Pero esto es sólo cuestión de tiempo (he tenido un «deja vu»… no os suena esto a cuando salió Java… que si es lento, que si C++, que si tal, que si JIT Compiler, que si dos procesadores, que si cuatro, que si más memoria, que si… es decir, el tiempo, uno, dos, tres años, quién sabe…).

Empezando con PhoneGAP en Android

Para poder hacer los ejemplos, por ahora necesitamos:

  1. Eclipse >= 3.4
  2. JDK 1.6
  3. Android SDK
  4. Plugin Android ADT para Eclipse (si no lo tenéis instalado, podéis hacerlo desde el eclipse en Help > Install New Software desde el repositorio: «https://dl-ssl.google.com/android/eclipse»

Os muestro en la imagen el Android SDK Manager para que veáis las versiones que tengo instaladas:

Como se supone que tenemos instalado el plug-in ADT, tendréis dos iconos relacionados con el plugin Android ADT:  

Pulsad sobre el recuadrado en rojo para añadir un nuevo dispositivo virtual (un simulador) y pulsad «New…» para crear un AVD como el mostrado:

Ahora únicamente nos falta descargarnos el SDK de PhoneGap. Lo haremos desde el sitio de PhoneGap. Pulsad en el incono Download PhoneGap 1.5.0 (versión del momento). Descomprimid el zip en algún lugar de vuestra máquina.

Ahora crearemos un nuevo proyecto en Eclipse: File > New Project > Android Project:





Ahora debemos añadir las librería de PhoneGap al proyecto que acabamos de crear:

  • Cread un directorio «libs» en el proyecto y copiad en él el fichero: «cordova-1.5.0.jar» que se encuentra en «lib > android» de la distribución de PhoneGap que habéis descomprimido.
  • Añadir este «jar» al Build Path del proyecto:
  • Cread un directorio llamado «assets» y dentro otro llamado «www» en el proyecto. En este subdirectorio «www» copiad el fichero «cordova-1.5.0.js» que se encuentra en «lib > android» de la distribución de PhoneGap que habéis descomprimido.
  • Copiad el directorio «xml» que se encuentra en «lib > android» de la distribución de PhoneGap que habéis descomprimido, en el directorio «res» del proyecto.

Os debe quedar así:



Con estos pasos ya tenemos instalado lo necesario para poder usar PhoneGap. Ahora tan sólo nos faltan algunos detalles de configuración.
Editad el fichero «AndroidManifest.xml» para:

  • Añadir los permisos necesarios (todos los que necesita PhoneGap. Si nuestra aplicación no necesita ciertos elementos, podemos quitarlos.). Yo voy a darle todos los permisos
  • Definir los tamaños de pantalla que soporta mi aplicación (todo que si)
  • Añadir a la actividad la configuración necesaria para indicar que no es necesario recrear la actividad cuando rotamos la pantalla.
  • Añadir una segunda actividad necesaria para configurar PhoneGap. En Android, una actividad representa una pantalla

Finalmente, el fichero os ha de quedar:

  
  
      
       
      
      
       
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
  
         
     
  
      
          
              
                  
  
                  
              
          
          
          
          
              
              
          
      
      
  

Ahora cambiaremos la actividad principal para que extienda de DroidGap (DroidGap es una actividad que permite mostrar HTML en nuestra aplicación) y cargue en el arranque nuestra página de inicio (después la crearemos). Para hacer eso, la clase FirstActivity debe quedar:

package com.autentia.adictos.phonegap.ejemplo;  
  
import org.apache.cordova.DroidGap;  
  
import android.os.Bundle;  
  
public class FirstActivity extends DroidGap {  
    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        super.loadUrl("file:///android_asset/www/index.html");  
    }  
} 

Cread en el directorio «assets/www» el fichero «index.html»:

  
  
   
  PhoneGap  
    
   
   
    

Hola amigos

Y por fin, Ejecutad la aplicación ("Run as > Android Application"):

Empezando con PhoneGAP en iOS

Para esto necesitamos:

  • Un Mac... con esto no puedo ayudaros. Yo un Mac Book Pro con Mac OS X 10.6.8
  • Xcode instalado (yo tengo la versión 3.2.3). Se puede descargar de http://developer.apple.com/xcode/index.html, pero necesitáis una cuenta de iOS Developer.

Si cumplís con los requisitos, entonces podemos empezar:

Primero, id al directorio "lib/ios" de la distribución de PhoneGap que habéis descomprimido e instalad PhoneGap:

Durante la propia instalación te dice como crear un proyecto de PhoneGap para Xcode 3 y Xcode 4. Nosotros lo vamos a hacer para Xcode 3 (tened en cuenta esto por si lo hacéis para Xcode 4).

Ahora, abrid Xcode y cread un nuevo proyecto de esta manera:



Pulsad "Choose...", dadle un nombre y guardadla en algún sitio:

Os creará una aplicación por defecto.
Si en el combo situado en la parte superior izquierda de la ventana os saliera: "Base SDK missing", entonces seleccionad: "Project > Edit Project Settings" y comprobad que tenéis correctamente seleccionado "Base SDK for ...:


Ahora pulsad sobre "Build and Run". A mi al compilar me ha dado dos errores en el recurso "CDVLocation.m". El primero se corrige:

...  
- (BOOL) isAuthorized  
{  
    BOOL authorizationStatusClassPropertyAvailable = [CLLocationManager respondsToSelector:@selector(authorizationStatus)]; // iOS 4.2+  
    if (authorizationStatusClassPropertyAvailable)  
    {  
        NSUInteger authStatus = [CLLocationManager authorizationStatus];  
       // COMENTAD LA LíNEA  
       // return  (authStatus == kCLAuthorizationStatusAuthorized) || (authStatus == kCLAuthorizationStatusNotDetermined);  
    }  
      
    // by default, assume YES (for iOS < 4.2)  
    return YES;  
}  
... 

El segundo se corrige cambiando el nombre "NSEC_PER_MSEC" a "NSEC_PER_SEC".

Después, cambiad el index.html por el que creamos en el Eclipse. Pulsamos de nuevo sobre "Build and Run" y:

Accediendo con PhoneGap a "cosicas" del móvil.

Para terminar el tutorial, vamos a añadir a nuestra aplicación la posibilidad de mostrar los datos de la agenda (algo que podamos probar en los simuladores).
Primeramente, en los emuladores, añadid algunos contactos:


Ahora modificad el index.html de esta manera:

  
  
  
PhoneGap  
  
  
  
  
    

Hola amigos. Esta es mi agenda actual:

    Con una única línea de código JavaScript obtenemos los contactos: "navigator.contacts.find(fields, onSuccess, onError, options);"

    Volved a compilar... y ejecutad:


    Conclusiones

    En otros tutoriales seguiremos explorando las capacidades de PhoneGap. Por ahora es suficiente para comprobar que si parece rellenar "el hueco" del que hicimos mención en la introducción. No obstante, parece vislumbrarse que el futuro de las aplicaciones híbridas va por este camino marcado por el HTML5 (no me refiero sólo a las capacidades de la nueva versión del HTML sino a la conjunción de HTML, CSS y JavaScript) junto con este tipo de soluciones que permiten trabajar de manera transparente a la hora de acceder a las capacidades del dispositivo.

    1 COMENTARIO

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!

    He leído y acepto la política de privacidad

    Por favor ingrese su nombre aquí

    Información básica acerca de la protección de datos

    • Responsable:
    • Finalidad:
    • Legitimación:
    • Destinatarios:
    • Derechos:
    • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad