Utilizamos cookies propias y de terceros. [Más información sobre las cookies].
Política de cookies
Proyecto AjpdSoft

· Inicio
· Buscar
· Contactar
· Cookies
· Descargas
· Foros
· Historia
· Nosotros
· Temas
· Top 10
· Trucos
· Tutoriales
· Wiki

PhoneGap: Trabajar con la cámara y la geolocalización con PhoneGap en app Android
Android


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:

<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.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

Preparar el proyecto PhoneGap y Eclipse con permisos y plugins necesarios

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

Preparar el proyecto PhoneGap y Eclipse con permisos y plugins necesarios

Al menos con:

<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="File" value="org.apache.cordova.FileUtils"/>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<plugin name="Storage" value="org.apache.cordova.Storage"/>
<plugin name="Capture" value="org.apache.cordova.Capture"/>
<plugin name="Echo" value="org.apache.cordova.Echo" />

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:

package com.ajpdsoft.ajpdsoftphonegap;

import android.os.Bundle;
import org.apache.cordova.*;

public class MainActivity extends DroidGap 
{
	@Override
	public void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		super.loadUrl("file://android_asset/www/index.html");
	}
}

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:

<!DOCTYPE HTML>
<html>
<head>
<title>AjpdSoft PhoneGap</title>

 <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
 <script type="text/javascript" charset="utf-8">

    var pictureSource;   // origen de la imagen
    var destinationType; // establece el formato del valor devuelto 

    // Esperamos a que Cordova conecte con la cámara
    document.addEventListener("deviceready",onDeviceReady,false);

    // Mostrar fichero html geolocalizacion
    function abrirURL(url) 
    {
		window.location.href = url;		    
	}

</script>
</head>
<body>
  <p align="left">Bienvenidos a la aplicacion para dispositivos moviles 
    (Android<a href="modules.php?name=News&new_topic=26" title="Tutoriales 
    sobre Android" target="_blank"></a>, iPhone, BlackBerry, Windows 
    Phone, Ada) de ejemplo
     de uso del framework PhoneGap para acceder a la camara del 
    dispositivo y a la geolocalicacion:
  <p align="left">En modo hipervinculo: 
  
  <ul>
    <li><a href="localizacion.html" title="Acceso a geolocalización 
      del móvil">Geolocalizacion</a>.</li>
    <li><a href="camara.html" title="Acceso a la cámara 
      y galería de fotos">Camara</a>.</li>        
  </ul>
  <p>En modo boton:</p>
  <button onclick="abrirURL('localizacion.html');">Geolocalizacion</button><br>
  <button onclick="abrirURL('camara.html');">Camara</button><br>  
</body>
</html>

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.
  • Caputar 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.

<!DOCTYPE HTML>
<html>
<head>
<title>AjpdSoft localización</title>
  
  <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
  <script type="text/javascript" charset="utf-8">

    var pictureSource;   // origen de la imagen
    var destinationType; // establece el formato del valor devuelto 

    // Esperamos a que Cordova conecte con la cámara
    document.addEventListener("deviceready",onDeviceReady,false);

    // Cordova preparado para ser usado
    function onDeviceReady() 
    {
        pictureSource = navigator.camera.PictureSourceType;
        destinationType = navigator.camera.DestinationType;
    }

    // Se ejecuta cuando la imagen se recupera correctamente desde foto 
    function onPhotoDataSuccess(imageData) 
    {
      // Si queremos ver la imagen en codificación base64
      // console.log(imageData);

      // Obtenemos el handle de la imagen
      var imagen = document.getElementById('imagen');

      // Desbloqueamos los elementos de la imagen
      imagen.style.display = 'block';

      // Mostramos la foto capturada
      imagen.src = "data:image/jpeg;base64," + imageData;
    }

    // Se ejecuta cuando la imagen se recupera correctamente desde galería
    function onPhotoURISuccess(imageURI) 
    {
      // Para ver el URI de la imagen 
      // console.log(imageURI);

      // Obtenemos el handle de la imagen
      var imagen = document.getElementById('imagen');

      // Desbloqueamos los elementos de la imagen
      imagen.style.display = 'block';

      // Mostramos la foto capturada
      imagen.src = imageURI;
    }

    // Función que se ejecuta cuando se pulsa el botón "Capturar foto"
    function capturePhoto() 
    {
      // Mostramos la cámara del móvil y obtenemos la imagen 
      // capturada codificada en base64
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, 
      { 
        quality: 50,
        destinationType: destinationType.DATA_URL 
      });
    }

    // Función que se ejecuta cuando se pulsa el botón "Capturar foto editable"
    function capturePhotoEdit() 
    {
      // Mostramos la cámara del móvil y permitimos editar la imagen, 
      // y obtenemos la imagen capturada codificada en base64
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, 
      { 
        quality: 20, 
        allowEdit: true,
        destinationType: destinationType.DATA_URL 
      });
    }

    // Función que se ejecuta cuando se pulsa 
    // el botón "Desde album" o "Desde librería" 
    function getPhoto(source) 
    {
      // Obtenemos la imagen del origen especificado (librería o galería)
      navigator.camera.getPicture(onPhotoURISuccess, onFail, 
      {
        quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source 
      });
    }

    // Si hay algún error
    function onFail(message) 
    {
      alert('Error al trabajar con la cámara: ' + message);
    }
    
    </script>
    
  </head>
  <body>
    <button onclick="capturePhoto();">Capturar foto</button> <br>
    <button onclick="capturePhotoEdit();">Caputar foto editable</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Desde libreria</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Desde album</button><br>
    <a href="localizacion.html">Localizacion</a>
    <img style="display:none;width:140px;height:140px;" id="imagen" src="" />    
  </body>
</html>

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:

<!DOCTYPE HTML>
<html>
<head>
<title>AjpdSoft localización</title>
  
  <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
  <script type="text/javascript" charset="utf-8">

    // Esperar la carga de Cordova
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova cargado
    function onDeviceReady() 
    {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

    // Localización encontrada
    function onSuccess(position) 
    {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitud: ' + position.coords.latitude + '<br />' +
                            'Longitud: ' + position.coords.longitude + '<br />' +
                            'Altitud: ' + position.coords.altitude + '<br />' +
                            'Precision: ' + position.coords.accuracy + '<br />' +
                            'Precision altitud: ' + position.coords.altitudeAccuracy + '<br />' +
                            'Partida: ' + position.coords.heading + '<br />' +
                            'Velocidad: ' + position.coords.speed + '<br />' +
                            'Timestamp: ' + position.timestamp + '<br />';
    }

    // Si se produce un error en la obtención de la posición
    function onError(error) 
    {
        alert('Código error: ' + error.code + '\n' +
              'Error: ' + error.message + '\n');
    }

    </script>
  </head>
  <body>
    <p id="geolocation">Obteniendo localizacion, espere por favor...</p>
  </body>
</html>

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.

 

Artículos relacionados

 

Créditos

Artículo realizado íntegramente por Alonsojpd miembro fundador del proyecto Proyecto AjpdSoft.

Artículo en inglés.


Anuncios


Enviado el Domingo, 02 junio a las 22:54:02 por ajpdsoft
Visita nuestro nuevo sitio web con programas y contenidos actualizados: Proyecto A