Primeros pasos con PhoneGap para Android

Introducción.

PhoneGap en pocas palabras es un framework para el desarrollo de aplicaciones móviles que posibilita a los desarrolladores a que implementen sus proyectos utilizando las tecnologías estándar de web: HTML5, CSS3 y Javascript, y este las convierte a aplicaciones híbridas, es decir, aplicaciones nativas de las diferentes plataformas móviles existentes que tienen acceso a gran parte del API nativo.

Tomado de http://www.phonegap.com/
Tomado de http://www.phonegap.com/

Esto lo logra empaquetando la aplicación web original con un navegador basado en webkit para desplegarla como si fuera una aplicación verdaderamente nativa.

Actualmente este framework soporta seis de las principales plataformas móviles del mercado: iOS, Android, Blackberry, PalmOS, Windows Mobile y Symbian.  Para mas información acerca del estado actual del soporte en cada una de estas plataformas consultar las características soportadas.

Existen otros frameworks similares a este entre los que se destacan Appcelerator Titanium, Mobl y Sencha Touch de los cuales espero estar escribiendo mas adelante.

En este artículo se describirá el proceso de instalación de PhoneGap, la creación de un proyecto base para el desarrollo con este framework y la elaboración de un ejemplo simple.

Instalar PhoneGap.

Descargar la última versión disponible del framework desde la siguiente ubicación.

https://code.google.com/p/phonegap/downloads/list

Para efectos de la documentación se utilizará la versión 0.9.5.1 que corresponde con las mas reciente para esta fecha.

$ wget http://phonegap.googlecode.com/files/phonegap-0.9.5.1.zip

Se descomprime el paquete recién descargado y se mueve a su ubicación final.

$ unzip phonegap-0.9.5.1.zip

$ mkdir ~/phonegap

$ mv phonegap-0.9.5.1 ~/phonegap/0.9.5.1

Crear la plantilla base de un proyecto Android.

A continuación se relacionan los pasos que se deben realizar para crear un proyecto PhoneGap para Android utilizando Eclipse y el plugin ADT instalados anteriormente.

Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Android Project.

Crear un nuevo proyecto Android
Crear un nuevo proyecto Android

En el diálogo de información del proyecto a crearse especificar al menos los siguientes campos y presione el botón Finish para continuar.

  1. Nombre del proyecto (project name).
  2. API de Android a utilizarse (build target).  En este caso se utilizará el API 2.2.
  3. Nombre de la aplicación (application name).
  4. Crear una actividad (create activity).
Información básica del proyecto Android
Información básica del proyecto Android

En el Explorador de Paquetes (package explorer)  de Eclipse crear bajo el proyecto una carpeta /assets/www y otra /libs.

Copiar en la carpeta /assets/www el archivo phonegap.0.9.5.1.js y copiar en /libs el archivo phonegap.0.9.5.1.jar.  Ambos archivos se encuentran bajo el directorio ~/phonegap/0.9.5.1/Android creado durante el paso de instalación anterior.

Estructura del proyecto Android
Estructura del proyecto Android

Hacer clic derecho sobre el directorio /libs y seleccionar el menú Build Path > Configure Build Path… Allí en la pestaña Libraries agregue la referencia a /libs/phonegap.0.9.5.1.jar presionando el botón Add JARs…

Agregar al proyecto la referencia al JAR de PhoneGap.
Agregar al proyecto la referencia al JAR de PhoneGap.

Realizar las siguientes modificaciones al código fuente de la actividad.  Este archivo se ubica bajo la carpeta /src del proyecto (/src/com.jimezam.phonegap.demo/App.java en este caso).

  1. Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
  2. En la línea 6 cambiar la superclase de App de Activity a DroidGap.
  3. Reemplazar la línea 11 (setContentView(R.layout.main);) con la siguiente: super.loadUrl(“file:///android_asset/www/index.html”);
Modificaciones a la actividad inicial.
Modificaciones a la actividad inicial.

Hacer clic derecho sobre el archivo AndroidManifest.xml y seleccionar el menú Open With… > Text Editor.  A este documento realizar las siguientes modificaciones.

1. Agregar el siguiente texto entre la apertura de la etiqueta <manifest> y la apertura de la etiqueta <application>.

<supports-screens
android:largeScreens=”true”
android:normalScreens=”true”
android:smallScreens=”true”
android:resizeable=”true”
android:anyDensity=”true”
/>
<uses-permission android:name=”android.permission.CAMERA” />
<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” />

2. Agregar el siguiente atributo a la etiqueta <activity>.

android:configChanges=”orientation|keyboardHidden”

Modificaciones al documento AndroidManifest.xml.
Modificaciones al documento AndroidManifest.xml.

Finalmente crear el archivo /assets/www/index.html con el código fuente para la demostración.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type=”text/javascript” charset=”utf-8″ src=”phonegap.js”></script>
</head>
<body>
<h1>Hello Android’s World with PhoneGap</h1>
</body>
</html>

Ejecutar el proyecto en el emulador.

Seleccionar el menú Run > Run As > Android Application.

Ejecutar como aplicación Android.
Ejecutar como aplicación Android.

Estos son un par de ejemplos de aplicaciones web simples ejecutándose con PhoneGap en el emulador de Android.

Hola Mundo web con Android
Hola Mundo web con Android

The Simple List 0.1
The Simple List 0.1

Enlaces.

Instalar Eclipse y el plugin ADT en GNU/Linux

Introducción.

Para el desarrollo de aplicaciones en Android además de la instalación del SDK es necesario instalar Eclipse como ambiente de desarrollo -oficial- y el plugin ADT para su interacción con Android.

Obtener Eclipse.

Distribuciones de Eclipse
Distribuciones de Eclipse

Descargar de la siguiente ubicación una distribución de Eclipse que corresponda con el sistema operativo y arquitectura donde se desee instalar.  Para el desarrollo de aplicaciones con Android se recomienda utilizar la distribución clásica o la de Java, sin que esto aparentemente sea obligatorio.

http://eclipse.org/downloads/

Instalar Eclipse.

La instalación de Eclipse consiste únicamente en desempaquetarlo y ubicarlo en la ruta donde finalmente residirá.

$ tar zxvf eclipse-java-helios-SR2-linux-gtk.tar.gz

$ mv eclipse ~/

Instalar el plugin ADT.

Iniciar Eclipse y seleccionar la opción Install new software… del menú Help.

Presionar el botón Add… (esquina superior derecha) y especificar los siguientes valorses.

  • ADT Plugin como Name.
  • https://dl-ssl.google.com/android/eclipse/ como Location.
Agregar un repositorio a Eclipse
Agregar un repositorio a Eclipse

Seleccionar la casilla de verificación de la rama Developer Tools.

Paquete Developer Tools del plugin ADT de Eclipse.
Paquete Developer Tools del plugin ADT de Eclipse.

Presione el botón Next en los dos diálogos siguientes.  Seleccione la opción I accept the terms of the license agreements y presione el botón Finish para terminar el procedimiento.  Reinicie Eclipse cuando este lo solicite.

Configurar el plugin ADT.

En Eclipse acceda al diálogo de preferencias a través del menú Window > Preferences.

Seleccione la opción Android en el árbol del lado izquierdo.

Presione el botón Browse… y ubique el directorio de instalación del Android SDK si este no aparece correctamente.  Presione el botón Apply y finalmente Ok.

Preferencias del plugin ADT
Preferencias del plugin ADT

Enlaces.

Solventando el desconcertante problema del clic izquierdo en Flash bajo Ubuntu 10.04

Introducción.

Este desconcertante problema me empezó a suceder desde que actualicé mis equipos a la versión 9.10 de GNU/Linux Ubuntu, debido a este bug las aplicaciones desarrolladas en Flash perciben correctamente los eventos del ratón con la excepción del clic izquierdo, haciendo imposible en la mayoría de los casos utilizar la aplicación.  Esto se puede apreciar muy bien en sitios como YouTube donde no es posible presionar el botón de Play para iniciar la reproducción del video.

Una “solución” parcial.

Hasta hace poco la única solución que le había encontrado a este problema tan molesto era el hacer un clic derecho sobre el botón o área que deseaba activar y con el menú contextual desplegado hacer un clic izquierdo sobre el mismo lugar.  Con esto y por alguna extraña razón Flash recibe exitosamente el evento del ratón.  Esta aproximación funciona bien pero después del tercer uso se hace terriblemente dispendiosa.

El problema.

Todo parece indicar que el problema surge debido a cambios importantes en el GDK (GIMP Drawing Kit) de la librería de gráficos GTK (The Gimp ToolKit) sobre la cual se ha desarrollado GNOME.  Con esta actualización, probablemente desde la versión 2.18, se ha implementado algo llamado client-side windows que hace que las ventanas GDK se comporten diferente en contravía de lo que se conocía anteriormente.  En ese órden de ideas, el plugin de Flash debería ser actualizado según los nuevos supuestos para permitirle funcionar con estas versiones nuevas de GTK.

El motivo del problema resultó ser el mismo que hace unos meses encontré utilizando Eclipse.

Las posibles soluciones.

Según el registro del bug 410407 en el LaunchPad de Ubuntu, existen tres posibles soluciones al problema, que no eliminan las causas por si mismos pero que las solventan y permiten utilizar normalmente las aplicaciones basadas en Flash.

  1. Deshabilitar Compiz.
  2. Remover los plugins instalados de Flash (como flashplugin-nonfree y flashplugin-installer)  e instalar los provistos directamente por Adobe.
  3. Manipular la variable GDK_NATIVE_WINDOWS para forzar a GDK crear ventanas X11.

En mi opinión, la solución mas práctica es la número 3.  Ya que con esta solución no se pierden los efectos del Compiz ni es necesario descargar e instalar nuevos paquetes.

Implementación de la solución #3.

Desde una terminal (shell) o la ventana de ejecución de programas (ALT+F2) invoque la siguiente instrucción (sin el símbolo $ por supuesto).

$ gksudo gedit /usr/lib/nspluginwrapper/i386/linux/npviewer

Agregue la siguiente línea justo antes de la última, es decir, está nueva línea deberá convertirse en la antepenúltima línea del script.

export GDK_NATIVE_WINDOWS=1

El contenido resultante de este archivo en mi máquina especificamente es el siguiente.

#!/bin/sh
TARGET_OS=linux
TARGET_ARCH=i386
export GDK_NATIVE_WINDOWS=1
. /usr/lib/nspluginwrapper/noarch/npviewer

Reinicie el equipo o al menos su entorno grafico para tener en cuenta este nuevo valor de configuración del GDK.

Enlaces.

Problemas para instalar plugins de Eclipse en Ubuntu 9.10

Introducción.

Anoche instalé la nueva versión de Aptana Studio, un IDE para el desarrollo web basado en Eclipse. Aparentemente incluyeron algunos cambios drásticos frente a la versión anterior de la serie 1.x.

Instalación de plugins en Aptana 2.0
Instalación de plugins en Aptana 2.0

Durante la instalación de los plugins empecé a tener problemas: los botones de ciertas partes del proceso de instalación dejaron de funcionar a pesar de que los presionara correctamente, evitando que pudiera efectivamente completar el proceso de instalación.

El problema.

Aparentemente el problema no es de Aptana sino de algún tipo de conflicto entre el GTK incluído por la distribución de Linux Ubuntu 9.10 y Eclipse.

La solución.

La solución deberá ser que resuelvan el supuesto conflicto, ya sea la gente de GTK o los de Eclipse, sin embargo hay dos formas conocidas de evitar temporalmente este problema.

Solución #1: Enter.

La solución mas sencilla pero menos elegante, a pesar de que si funciona, es hacer clic sobre el botón que se desee presionar para asignarle el foco y presionar la tecla Enter para generar el evento.

Solución #2: Utilizar las ventanas nativas del GDK.

Para hacer esto es necesario no ejecutar AptanaStudio directamente sino crear un script con el siguiente contenido.

export GDK_NATIVE_WINDOWS=true
~/Aptana/2.0/AptanaStudio &

Obviamente la ruta del ejecutable (segunda línea) deberá personalizarse para adecuarse a su ubicación exacta en el ambiente que se esté instalando.

Enlaces.

Instalación de Android SDK 1.0 en Linux

Instalación de Android SDK.

Descargar la última versión disponible para la plataforma Linux de la siguiente ubicación.  Su nombre debe corresponder con la siguientes estructura: android-sdk-linux_x86-*.zip.

http://code.google.com/android/download.html

Establecer los directorios para su instalación.

$ mkdir ~/Android

$ cd ~/Android

$ unzip ~/RUTA/android-sdk-linux_x86-1.0_r2.zip

Modifique la RUTA donde descargó el SDK en el paso anterior.

Por facilidad utilizo un enlace dinámico que permitirá cambiar fácilmente entre las diferentes versiones instaladas.

$ ln -s android-sdk-linux_x86-1.0_r2/ current

Actualizar el PATH para incluír la ruta de la herramientas.

vi ~/.profile

(agregar al final)

export PATH=${PATH}:~/Android/current/tools

Instalación de Eclipse.

Descargue la versión de Eclipse Classic correspondiente a su sistema operativo de la siguiente ubicación.

http://www.eclipse.org/downloads/

$ mkdir ~/Eclipse

$ cd ~/Eclipse

$ tar zxvf ~/RUTA/eclipse-SDK-3.4.1-linux-gtk.tar.gz

Modifique la RUTA donde se descargó Eclipse.

Por facilidad utilizo un enlace dinámico que permitirá cambiar fácilmente entre las diferentes versiones instaladas.

$ mv eclipse eclipse-3.4.1

$ ln -s eclipse-3.4.1 current

Instalación del plugin de ADT para Eclipse 3.4.

Iniciar Eclipse normalmente.

$ ~/Eclipse/current/eclipse

Seleccione el siguiente menú.

Help > Software updates …

Seleccione la pestaña Available Software.

Presione el botón Add Site.

Ingrese la siguiente dirección y presione el botón Ok.

http://dl-ssl.google.com/android/eclipse/

Seleccione la casilla de verificación marcada como Developer Tools, esto seleccionará automáticamente las ramitas Android Development Tools y Android Editors.  Seleccione además la rama The Eclipse Project Updates para permitir que se instalen los plugins adicionales que se requieran.  Presione el boton Install.

Permita que se reinicie Eclipse después de la instalación de los diferentes plugins.

Para finalizar la instalación del plugin es necesario indicarle a Eclipse la ubicación del SDK, para esto se deben realizar los siguientes pasos.

  1. Acceder al menú Window > Preferences.
  2. Elegir la rama Android del lado izquierdo.
  3. Presionar el botón Browse y ubicar el directorio del SDK, el cual corresponde con ~/Android/current.
  4. Presione los botónes Apply y Ok.

Enlaces.