Mostramos cómo usar la cámara y la geolocalización en una aplicación para Android desarrollada con Eclipse usando el framework PhoneGap.

Requisitos para desarrollar app para Android con PhoneGap y Eclipse

Entorno de desarrollo Eclipse para desarrollo de app para Android

En primer lugar necesitaremos disponer del IDE de desarrollo Eclipse. En los siguientes enlaces explicamos paso a paso cómo instalar y preparar Eclipse para desarrollar aplicaciones para Android (SDK, emulador, etc.), lo mostramos tanto para Linux como para Windows:

Preparar proyecto Eclipse para usar PhoneGap

En el siguiente tutorial explicamos paso a paso y con capturas de pantalla (screenshot) cómo preparar un proyecto Eclipse para usar el framework gratuito PhoneGap:

Desarrollar app con manejo de cámara y geolocalización con PhoneGap para Android

Permisos y plugins para acceso a cámara de fotos y geolocalización en PhoneGap

Una vez montado el entorno de trabajo de nuestro proyecto Eclipse como indicamos aquí, procederemos a establecer los permisos que nuestra app para Android necesitará. En este ejemplo usaremos el dispositivo de cámara y la geolocalización, por lo que deberemos agregar al fichero AndroidManifest.xml ubicado en la carpeta «res» de nuestro proyecto, para editarlo exploraremos con Project Explorer hasta este fichero y haremos doble clic sobre él, se abrirá la ventana de edición en la parte derecha, añadiremos las siguientes líneas:

Permisos y plugins para acceso a cámara de fotos y geolocalización en PhoneGap

En la carpeta /res/xml de nuestro proyecto Eclipse debe existir el fichero «config.xml» con los plugins que usaremos para la aplicación PhoneGap:

Permisos y plugins para acceso a cámara de fotos y geolocalización en PhoneGap

Al menos con:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

En primer lugar nos aseguraremos de que el único fichero .java que usaremos en nuestra aplicación Eclipse con PhoneGap tendrá el siguiente código:

Hemos marcado en negrita lo que varía con respecto al código java original establecido por el asistente de Eclipse. Hemos suprimido también código que ha añadido el asistente y que es innecesario para nuestra aplicación PhoneGap:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Con el código anterior lanzaremos el fichero index.html de PhoneGap, con formato HTML. Para crear este fichero, desde la carpeta «assets/www«, pulsaremos con el botón derecho del ratón y seleccionaremos «New» – «File»:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

En «File name» introduciremos «index.html»:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Tras crear el fichero «index.html», para abrirlo directamente desde Eclipse, pulsaremos con el botón derecho del ratón sobre él (en Project Explorer) y seleccionaremos «Open with» – «Text Editor»:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Introduciremos el código HTML y JavaScript para el fichero index.html. En nuestro proyecto este fichero contendrá el menú de inicio de nuestra aplicación Android, donde mostraremos las acciones que se pueden realizar desde nuestra aplicación (acceso a la cámara de fotos y a los álbumes y acceso a la geolocalización), por ello añadiremos el siguiente código HTML como si de una página web se tratase:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Crearemos de la misma forma el fichero camara.html, que tendrá el siguiente contenido para mostrar varios botones que harán las siguientes acciones:

  • Capturar foto: abre la cámara de fotos y muestra la foto realizada en una miniatura.
  • Capturar foto editable: hace lo mismo que el anterior pero permite editar la foto (si el dispositivo lo permite).
  • Desde librería: muestra la librería para seleccionar una foto ya existente.
  • Desde album: muestra los álbumes para seleccionar una foto ya existente.
Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Realizaremos la misma operación para crear el fichero localizacion.html, que contendrá el código necesario para obtener los siguientes datos:

  • Latitud.
  • Longitud.
  • Altitud.
  • Precisión.
  • Precisión altitud.
  • Partida.
  • Velocidad.
  • Timestamp.

El código para el fichero localizacion.html sería:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Ahora podremos compilar la aplicación y verificar que funciona, en el caso de esta aplicación de ejemplo, puesto que usa la cámara y la geolocalización, lo ideal será probarla en un dispositivo smartphone real. Para compilarla y testearla en el emulador, desde Eclipse, en «Proyect Explorer» seleccionaremos la carpeta raíz del proyecto (en nuestro caso «AjpdSoftPhoneGap»), a continuación pulsaremos en el menú «Run» – «Run As» – «Android Application»:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Si todo es correcto se cargará la aplicación PhoneGap de ejemplo en el dispositivo emulador de Eclipse:

Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización
Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización

Si tuviéramos una aplicación completa en Eclipse con PhoneGap, para poder reutilizarla para otros dispositivos (iPhone, Windows Phone, BlackBerry, Simbian, Ada…) sólo tendríamos que seguir estos pasos:

1. En primer lugar preparar el entorno de desarrollo correspondiente a cada tipo de dispositivo, por ejemplo para Windows Phone usaríamos Visual Studio .Net, para iPhone usaríamos iOS Dev, para Symbian usaríamos NetBeans, etc.

2. Estableceríamos los permisos apropiados para cada plataforma.

2. Copiaríamos los ficheros .html y .js de la carpeta assets/www a la correspondiente del proyecto VB.Net ó iOS Dev y ya tendríamos todo el código de nuestra aplicación para otro dispositivo.

Esta, sin duda, es la gran ventaja de PhoneGap y se concibió en ese sentido, un mismo código puede servir para cualquier plataforma. Por supuesto PhoneGap no servirá para realizar cualquier tipo de aplicaciones, sólo será útil para aquellas aplicaciones que queramos distribuir para todos los dispositivos existentes sin tener que desarrollar una aplicación para cada dispositivo en cada entorno de desarrollo.

PhoneGap no tiene todo el control sobre el dispositivo que puede tener el entorno de desarrollo nativo, pero puede ser muy útil para aplicaciones determinadas.