Galería de Imagenes con Geolocalización utilizando Phonegap

1. CREACIÓN DE UNA GALERÍA DE
IMÁGENES Y GEOLOCALIZACIÓN
USANDO PHONEGAP
Maestría en Ingeniería de Redes y Servicios Telemáticos
Aplicaciones y Sistemas Colaborativos en la Web 2.0

2. PhoneGap
• Phonegap es un marco de desarrollo móvil de
código abierto que permite el uso de las
tecnologías web estándar, como HTML5, CSS3 y
JavaScript.

3. Instalación de Phonegap
• Los pasos para la instalación en la dirección:
http://phonegap.com/
• Instalado Node.js
• Abrir un cmd (Gestor de línea de Comandos):
C: > npm install-g phonegap
C: > npm install -gf cordova
• Para empezar a crear una aplicación empezamos
escribiendo la siguiente línea de comando
cordova create hello com.example.hello HelloWorld

4. Android en Phonegap
• Tener instalado el sdk de android
• Ejecutar en un cmd: cordova platform add android
• cordova build

5. Iniciando el IDE Android
• Inicie la aplicación Eclipse.
• Seleccionar la opción Nuevo proyecto.
• Elegir proyecto Android de código existente en el
cuadro de diálogo que aparece.
• Vaya a hello , o cualquier directorio que ha creado
para el proyecto, en el directorio
platforms/android.
• Pulse en Finalizar.

6. <uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

7. API - CAMARA
• Instalación del Plugin
$ cordova plugin add org.apache.cordova.camera
• camara.getPicture
Toma una foto con la cámara, o recupera una foto de la galería de
imágenes del dispositivo.

8. Galería
Implementación de Función

9. Implementación de Función listDir

10. Geolocalización
• Geolocalización proporciona información de
ubicación para el dispositivo, tales como latitud y
longitud.

11. API Geolocalización
• Instalación del Plugin
$ cordova plugin add org.apache.cordova.geolocation
• USO
navigator.geolocation.getCurrentPosition(onSuccesLo, errorLo);
function onSuccesLo(position){
lat = position.coords.latitude;
long = position.coords.longitude;
}

12. Google maps

14. GRACIAS