miércoles, 15 de mayo de 2013

PhoneGap: desarrollo en dispositivos móviles multiplataforma


Si te planteas desarrollar una aplicación para móviles, rápidamente te ves abrumado con la cantidad de plataformas diferentes que existen: Android, iOS, Windows Phone, Blackberry OS, Firefox OS,...

Inmediatamente me asaltan un montón de preguntas:
  • ¿Desarrollo mi aplicación solo para una de las plataformas? ¿Android? ¿iOS?
  • ¿Aprendo uno por uno los lenguajes de programación y el entorno de desarrollo de cada una de estas plataformas?
  • ¿Desarrollo una versión en una plataforma y luego re-codifico mi solución para las n-plataformas?


Desarrollar sobre la plataforma nativa tiene ventajas, pero también muchos inconvenientes, sobre todo de costes y de tiempo.

Buceando por la red descubro Phonegap, una librería que trabaja con HTML5 + CSS + Javascript y que convierte tu código web en la plataforma nativa que elijas.

¿Alucinante verdad?

He estado probando la herramienta y parece que funciona, y además bastante bien.

Algunas ventajas que le veo a esta tecnología son:
  • el desarrollo se agiliza muchísimo
  • puedes crear apps móviles con muchísima facilidad
  • gran velocidad en el desarrollo
  • sin necesidad de re-aprender a programar
  • sin necesidad de re-programar lo mismo para cada plataforma
  • ...

Veamos entonces cómo instalar Phonegap en Eclipse y vamos a desarrollar una aplicación muy sencilla que compilaremos a la plataforma nativa de Android con Phonegap.

0. Tenemos eclipse instalado con las SDK Android
Voy a partir de la base de que ya tienes instalado eclipse en tu equipo con las SDK de Android.
Es decir, ya puedes desarrollar aplicaciones Android nativas con Eclipse.

No me voy a entretener a explicar este paso número 0.


1. Descarga la última versión de Phonegap
Phonegap no se instala. Son una serie de librerías que descargamos y que incluimos en nuestro proyecto.

Recientemente Phonegap ha sido adquirido por Adobe, y ahora ha pasado a llamarse Cordova, aunque en la red lo seguimos encontrando como PhoneGap.

Descarga desde el sitio oficial: http://phonegap.com/


En el momento de escribir este artículo, la última versión es la 2.7.0

Al descargar, lo que obtienes es un fichero .zip phonegap-2.7.0.zip:


2. Descomprime phonegap-x.x.x.zip
Descomprime el fichero .zip de phonegap:


Nos interesa especialmente la carpeta android. 
Recuerda esta ubicación porque tendrás que usarla más adelante.


3. Creamos un nuevo proyecto Android con Eclipse
Completamos la información de: 
  • nombre del proyecto, 
  • nombre de la aplicación, 
  • selección del icono (yo he dejado el icono por defecto)
  • escoger Activity en blanco
  • no modificar el resto de opciones por defecto



4. Incluir librerías de phonegap
En eclipse, en el árbol de directorios, crear carpeta www dentro de la carpeta assets.

Dentro de esta carpeta (www), copiamos el archivo cordova-2.7.0.js del paquete phonegap.zip que descargamos.

Copiar el fichero cordova-2.7.0.jar del paquete phonegap bajo la carpeta libs de nuestro proyecto Android en eclipse.

En eclipse, en el árbol de directorios, crear la carpeta xml dentro de la carpeta res, y dentro, copiar todo lo que haya en la carpeta lib/android/xml del paquete phonegap que descargamos.

Al finalizar, tendríamos que tener nuestro árbol de directorios con el siguiente aspecto:


Recuerda refrescar el árbol de directorios de eclipse para que se vean los cambios.

5. Añadimos cordova-x.x.x.jar a la ruta de generación
En el árbol de directorios, seleccionamos la librería cordova-2.7.0.jar, pulsamos botón derecho sobre ella y seleccionamos Build path/Add to build path:


6. Editamos el archivo src/Main.java
Por defecto el nombre es MainActivity.java. 
No sé por qué yo tengo la manía de cambiarlo a Main.java, imagino que son flecos de C que todavía arrastro.

Debemos dejar el código de este archivo tal y como se muestra en la siguiente imagen:



7. Editamos el archivo AndroidManifest.xml
Le damos a nuestra aplicación todos los permisos.
Tu archivo tiene que quedar con el siguiente aspecto. Resalto en amarillo lo nuevo:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.fpkanarias.classcontrol"
    android:versionCode="1"
    android:versionName="1.0" >
   
    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.fpkanarias.classcontrol.Main"
            android:label="@string/app_name"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


8. Creamos index.html: hola mundo
Hemos visto en Main.java que, lo primero que hace la aplicación al arrancar el cargar el archivo index.html.

Pues vamos a crearlo.

Bajo assets/www creamos el archivo index.html con el siguiente código:


9. Ejecutamos la aplicación
Nuestra aplicación está lista para ser ejecutada:



10. Fuente
Si quieres leer el artículo en el que me he basado, pincha en el siguiente enlace: 
Publicado por en
Etiquetas: , ,