Aplicaciones y Sistemas Colaborativos en la Web 2.

0 Maestra en Ingeniera en Redes y Servicios Telemticos

CREACIN DE UNA GALERA DE IMGENES Y GEOLOCALIZACIN USANDO PHONEGAP

TRABAJO DE FIN DE CURSO

PhoneGap
Phongap es un marco de desarrollo mvil de cdigo abierto que permite el uso de las tecnologas web estndar, como HTML5, CSS3 y JavaScript para el desarrollo multi-plataforma, evitando el desarrollo del lenguaje nativo de cada plataforma mvil. Las aplicaciones se ejecutan dentro de envoltorios especficos para cada plataforma, y se basan en los enlaces de la API compatible con los estndares para acceder a los sensores de cada dispositivo, los datos y estado de la red [1].

Componentes Bsicos
Las aplicaciones en PhoneGap se basan en un archivo comn llamado config.xml que proporciona informacin sobre la aplicacin y especifica los parmetros que afectan a la forma en que funciona. La aplicacin en s se implementa como una pgina web, llamado index.html, las referencias a CSS, JavaScript, imgenes, archivos multimedia u otros recursos son necesarios para que se ejecute. La aplicacin se ejecuta como un WebView dentro de la envoltura de la aplicacin, el cual se distribuye en las tiendas de aplicaciones. El WebView habilitando PhoneGap puede proporcionar a la aplicacin de la totalidad de su interfaz de usuario. Tambin puede ser un componente dentro de una aplicacin ms grande, phonegap proporciona un plugin de interfaz para que los componentes se comuniquen entre s [1].

Instalacin de Phonegap
Como primer paso empezamos instalando PhoneGAP, para eso nos dirigimos a la pgina oficial que es: http://phonegap.com/ y nos ubicamos en la seccin de descarga. Antes de instalar se debe tener instalado el node.js el cual lo podemos obtener en la siguiente direccin: http://nodejs.org/, cuando ya tenga instalado el node.js a continuacin, abra un CMD (gestor de lnea de comandos) y ejecute lo siguiente:
C: \> npm install-g phonegap

Una vez finalizada la instalacin, puede invocar phonegap en la lnea de comandos para obtener ms ayuda. Si tiene algn problema al momento de crear una aplicacione instale la versin anterior de phonegap llamado cordova con el siguiente comando:
npm install -gf cordova

Debido a que la nueva actualizacin de phonegap presenta problemas al omento de agregar una plataforma se decidi trabajar con la versin de cordova [4], [5]. Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos Luego, para empezar a crear una aplicacin empezamos escribiendo la siguiente lnea de comando [2]:
cordova create hello com.example.hello HelloWorld

El primer argumento especifica un directorio que se generen para su proyecto. El subdirectorio www contiene la pgina de inicio de la aplicacin, junto con varios recursos css , js y img , que siguen las convenciones de nombres de archivos de desarrollo web. El archivo config.xml contiene importante metadatos necesarios para generar y distribuir la aplicacin. Los otros dos argumentos son opcionales: el com.example.hello es el argumento que proporciona el proyecto con un identificador de estilo de dominio inverso y el HelloWorld proporciona el texto de la pantalla de la aplicacin. Por defecto, el phonegap crea scripts que generan el esqueleto de una aplicacin basado en la web que es la pgina principal del proyecto que es www/index.html, con la lgica predeterminada referencia desde www/js/index.js. Puede editar esta aplicacin como quiera, pero inicializarlo como parte de un devicereadycontrolador de eventos, que se ejecuta una vez las APIs del dispositivo est disponible. La construccin en comando compila una aplicacin para cualquier plataforma que especifique, identificado por argumentos, produce la generacin de archivos especficos de la plataforma que se van a emplear dentro del proyecto en el directorio de la plataforma. Mientras que las aplicaciones PhoneGap se implementan como pginas web, no se puede utilizar un navegador estndar para pre visualizar las pginas que invocan sus API. Para probar cmo una aplicacin interacta con caractersticas de la plataforma, se debe instalar en un dispositivo o emulador.

Instalacin de Android SDK

[2] Al instalar el SDK de Android es posible que se presente con una opcin de elegir dnde instalar el SDK, de lo contrario mover el descargado adt-bundle en donde se almacenan las herramientas de desarrollo. Para las herramientas de lnea de comandos Cordova a trabajar, es necesario incluir el SDK de tools y platform-tools en su entorno PATH. En Mac, puede utilizar un editor de texto para crear o modificar el archivo ~.bash_profile , aadiendo una lnea como la siguiente, dependiendo de la ubicacin del SDK:
export PATH=${PATH}:/Development/adt-bundle/sdk/platform-tools:/Development/adtbundle/sdk/tools

Luego de tener el SDK instalado procedemos a agregar la plataforma de Android al proyecto de Phonegap usando la siguiente instruccin:
Phonegap install android

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos En caso de tener la versin de cordova se debe usar la siguiente instruccin:
Cordova platform add android

Y luego, construir el proyecto con la siguiente lnea:

cordova build

Empezar con el IDE ADT (ANDROID)

Una vez creada la aplicacin, aqu est cmo utilizar el SDK para modificarlo:

Inicie la aplicacin Eclipse. Seleccionar la opcin Nuevo proyecto. Elegir proyecto Android de cdigo existente en el cuadro de dilogo que aparece y pulse Siguiente:

Ilustracin 1 - Elegir un Proyecto existente en Android

Vaya a hello , o cualquier directorio que ha creado para el proyecto, en el directorio platforms/android. Pulse en Finalizar.

Una vez que se abre la ventana de Eclipse, una X roja puede aparecer para indicar que hay problemas no resueltos. Si es as, siga estos pasos adicionales:

Haga clic derecho en el directorio del proyecto. En el cuadro de dilogo Propiedades que aparece, seleccione Android desde el panel de navegacin. Para el destino de generacin de proyectos, seleccionar el nivel de API Android que tiene instalada.

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Haga clic en Aceptar. Seleccione Limpiar en el men Proyecto. Esto debera corregir todos los errores en el proyecto.

Ilustracin 2 - Pantalla de Bienvenida de Android usando PhoneGap

En esta imagen podemos observar el entorno de desarrollo de Android para poder realizar todos los cambios que sean necesarios para nuestra aplicacin, algo que debe tener en cuenta es establecer todos los permisos necesarios que va a requerir la aplicacin para su correcto funcionamiento. Los permisos de la aplicacin son configurados en el archivo AndroidManifest.xml, los permisos que se configuraron en la aplicacin se presentan a continuacin:
<uses-permission android:name="android.permission.VIBRATE" /> <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.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Implementacin
API - Cmara del Dispositivo
Phonegap establece una forma agradable de comunicacin con las funciones de los dispositivos utilizando solamente javascript, en este caso, usaremos las funciones para el uso de la cmara, se detallan a continuacin las ms importantes [6]: Instalacin del Plugin Cordova implementa las API a nivel de dispositivos como plugins. Para agregar los plugin lo realizamos mediante consola, con los siguientes comandos: $ cordova plugin add org.apache.cordova.camera $ cordova plugin ls [ 'org.apache.cordova.camera' ] $ cordova plugin rm org.apache.cordova.camera document.addEventListener Esta funcin evalua si el dispositivo est listo para poder realizar cada uno de los eventos que se van a usar
document.addEventListener("deviceready",onDeviceReady,false);

camara.getPicture Toma una foto con la cmara, o recupera una foto de la galera de imgenes del dispositivo. La imagen se pasa al callback xito como codificado en base 64 String, o como el URI del archivo de imagen. El mtodo en s devuelve un CameraPopoverHandle objeto que se puede utilizar para cambiar la posicin de la popover de seleccin de archivos.
navigator. camera.getPicture ( cameraSuccess , cameraError , [ cameraOptions ] );

Ilustracin 3 - Captura la foto tomada con la Cmara

Cdigo en Javascript A continuacin se presenta el cdigo del archivo script.js que se utilice en la aplicacin para su correcto funcionamiento:

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Ilustracin 4 - Funcin para cargar las Imgenes

En la Ilustracin 4, tenemos una funcin que permite cargar todas las imgenes que se encuentran almacenadas en la carpeta de la aplicacin.

Ilustracin 5 - Listar los Directorios

En la Ilustracin 5, tenemos una funcin que utiliza la funcin getFileSystem para poder cargar las imgenes.

Ilustracin 6 - Cargar el Detalle de una Imagen

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos En la Ilustracin 6, se presenta el cdigo de una funcin que ayuda a presentar en ms detalle la informacin de la imagen, como la longitud, la latitud y un enlace a un mapa generado por el API de google.

Geolocalizacin
Geolocalizacin proporciona informacin de ubicacin para el dispositivo, tales como latitud y longitud. Las fuentes comunes de informacin de ubicacin incluyen Sistema de Posicionamiento Global (GPS) y la ubicacin inferida a partir de seales de red, como direcciones IP, RFID, Wi-Fi y Bluetooth direcciones MAC e ID celulares GSM / CDMA. Instalacin del Plugin $ cordova plugin add org.apache.cordova.geolocation $ cordova plugin ls [ 'org.apache.cordova.geolocation' ] $ cordova plugin rm org.apache.cordova.geolocation navigator.geolocation.getCurrentPosition(geolocationSuccess,[geolocationError], [geolocationOptions]); geolocation.getCurrentPositon es una funcin asncrona. Devuelve la posicin actual del dispositivo a la funcin geolocationSuccess con un objeto de posicin como parmetro. Si hay un error, se invoca a geolocationError. Con la funcin geolocationSuccess obtenemos un objeto que posee toda la informacin de geolocalizacin, suponiendo que el objeto se llama position, para obtener la longitud y latitud usamos el siguiente cdigo:
lat = position.coords.latitude; long = position.coords.longitude;

Luego de tener los datos de posicin del usuario procedemos a almacenarlas y a generar el link de acceso a google maps.

Ilustracin 7 - Genera Link al mapa de Google

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Google Maps
Usando el API de Google realizamos una funcin en Javascript que genera el mapa con los datos de geolocalizacin (longitud, latitud). En la Ilustracin 8, se muestra el cdigo implementado:

Ilustracin 8 - Google Maps

Conclusiones
El uso de phonegap facilita la creacin de una aplicacin en un entorno mvil debido a que solo se necesita saber HTML, CSS y JAVASCRIPT para poder hacer uso de mismo, y a su vez permite trabajar en las distintas plataformas mviles que se encuentran actualmente en el mercado como lo son: Android, IOS, Window y Blackberry. Adems phonegap se encarga de ajustar la pantalla dependiendo del dispositivo que se est usando lo que es muy eficaz debido a que no se tiene que andar creando imgenes ni especificando los dpi de cada una de las pantallas en las que se va a usar la aplicacin.

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Anexos de la Aplicacin

Washington A. Velsquez Vargas

Aplicaciones y Sistemas Colaborativos en la Web 2.0 Maestra en Ingeniera en Redes y Servicios Telemticos

Bibliografa
[1] Overview de la gua de usuario de Phonegap. http://docs.phonegap.com/en/3.1.0/guide_overview_index.md.html#Overview [2] Gua de desarrollo de aplicaciones en Android http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Pla tform%20Guide [3] Ant y JAVAHOME http://madhukaudantha.blogspot.com.es/2010/06/installing-ant-for-windows-7.html [4] Instalacin de Cordova http://proyectosbeta.net/2013/10/instalar-cordova-3-1-0-en-ubuntu-13-04/ [5] Repositorio de Cordova https://github.com/apache/cordova-js/tree/3.1.x [6] Gua de Usuario para el API de la Cmara http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera [7] Gua de Usuario para el API de la Geo localizacin http://docs.phonegap.com/en/3.1.0/cordova_geolocation_geolocation.md.html#Geolocation

Washington A. Velsquez Vargas