Galería de Imagenes con Geolocalización utilizando Phonegap
-
Upload
washington-velasquez -
Category
Technology
-
view
854 -
download
0
description
Transcript of Galería de Imagenes con Geolocalización utilizando Phonegap
![Page 1: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/1.jpg)
CREACIÓN DE UNA GALERÍA DE IMÁGENES Y
GEOLOCALIZACIÓN USANDO PHONEGAP
Maestría en Ingeniería de Redes y Servicios TelemáticosAplicaciones y Sistemas Colaborativos en la Web 2.0
![Page 2: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/2.jpg)
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.
![Page 3: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/3.jpg)
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
![Page 4: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/4.jpg)
Android en Phonegap• Tener instalado el sdk de android
• Ejecutar en un cmd: cordova platform add android
• cordova build
![Page 5: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/5.jpg)
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.
![Page 6: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/6.jpg)
<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" />
AndroidManifest
![Page 7: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/7.jpg)
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.
![Page 8: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/8.jpg)
GaleríaImplementación de Función
![Page 9: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/9.jpg)
Implementación de Función listDir
![Page 10: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/10.jpg)
Geolocalización• Geolocalización proporciona información de
ubicación para el dispositivo, tales como latitud y longitud.
![Page 11: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/11.jpg)
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;
}
![Page 12: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/12.jpg)
Google maps
![Page 13: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/13.jpg)
![Page 14: Galería de Imagenes con Geolocalización utilizando Phonegap](https://reader033.fdocuments.net/reader033/viewer/2022061205/54812a34b379597b2b8b5bf5/html5/thumbnails/14.jpg)
GRACIAS