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.
- Preparar proyecto Eclipse para usar 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.
- Desarrollar App Android con PhoneGap y Eclipse con manejo de cámara de fotos y geolocalización.

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:

Mi primera aplicación con PhoneGap y Eclipse para Android.

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" />

<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" />

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:

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");
	}
}

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»:

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

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»:

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="https://www.proyectoa.com" 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>

<!DOCTYPE HTML>

<html>

<head>

<title>AjpdSoft PhoneGap</title>

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="https://www.proyectoa.com" 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>

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.

<!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>

100

101

102

103

104

105

106

107

108

109

<!DOCTYPE HTML>

<html>

<head>

<title>AjpdSoft localización</title>

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>

</body>

</html>

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>

<!DOCTYPE HTML>

<html>

<head>

<title>AjpdSoft localización</title>

// 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>

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»:

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

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.

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

Requisitos para desarrollar app para Android con PhoneGap y Eclipse

Entorno de desarrollo Eclipse para desarrollo de app para Android

Preparar proyecto Eclipse para usar 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

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

Sobre el autor

alonsojpd

Comentar Cancelar la respuesta

Sesión

Videotutoriales

Post foros

Respuestas foros

Descargas

Código PHP HTML JavaScript y CSS del ejemplo de desplegable con búsqueda

HTML con componente selector de fecha y hora datetimepicker

Ficheros Python de app de ejemplo de acceso a PostgreSQL

Fichero sshd_config de OpenSSH en Windows por defecto

ProyectoA Google Tasks código fuente en C#

Wiki

Descarga de la IOS de Cisco para router C7200 c7200-advipservicesk9-mz.152-4.S5.bin

Descarga de la IOS de Cisco para router C3725 c3725-adventerprisek9-mz.124-25d.bin

BDE Borland Database Engine 5.2

Turbo Pascal 7.0

ProyectoA Envío email TLS SSL v.1.6.8.69 con código fuente completo en Delphi 6

Indy Internet Direct 10.0.52 source code para instalar en Delphi desde 4 a 8 .Net XE RAD Studio C++Builder

Driver/Controlador en formato ZIP con el XML y el VIB para VMware ESXi de NIC Realtek RTL8168

Proyecto y aplicación web en Django de Python de sitio web completo para eliminar modificar y crear contactos en BD MySQL MariaDB

AjpdSoft Generador y Lector códigos QR Código Fuente VB Net

Fichero Excel para Análisis de Riesgos en ciberseguridad

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

Requisitos para desarrollar app para Android con PhoneGap y Eclipse

Entorno de desarrollo Eclipse para desarrollo de app para Android

Preparar proyecto Eclipse para usar 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

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

Sobre el autor

Entradas relacionadas

Comentar Cancelar la respuesta

Sesión

Videotutoriales

Post foros

Respuestas foros

Descargas

Wiki

Etiquetas