Desarrollo de una aplicación móvil multiplataforma con … · 2018-09-26 · vii Título:...
82
UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA CARRERA DE INGENIERÍA EN COMPUTACIÓN GRÁFICA Desarrollo de una aplicación móvil multiplataforma con Geolocalización para localizar sitios y establecimientos cercanos Trabajo de titulación modalidad proyecto integrador, previo a la obtención del Título de Ingeniero en Computación Gráfica Autor: Morocho Rocha Darwin Santiago Tutora: Ing. Zoila De Lourdes Ruiz Chávez QUITO – 2018
Transcript of Desarrollo de una aplicación móvil multiplataforma con … · 2018-09-26 · vii Título:...
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE INGENIERÍA, CIENCIAS FÍSICAS Y MATEMÁTICA
CARRERA DE INGENIERÍA EN COMPUTACIÓN GRÁFICA
Desarrollo de una aplicación móvil multiplataforma con
Geolocalización para localizar sitios y establecimientos cercanos
Trabajo de titulación modalidad proyecto integrador, previo a la
obtención del Título de Ingeniero en Computación Gráfica
Autor: Morocho Rocha Darwin Santiago
Tutora: Ing. Zoila De Lourdes Ruiz Chávez
QUITO – 2018
ii
DERECHOS DE AUTOR
Yo, Morocho Rocha Darwin Santiago en calidad de autor y titular de los derechos
morales y patrimoniales del trabajo de titulación Desarrollo de una aplicación móvil
multiplataforma con Geolocalización para localizar sitios y establecimientos
cercanos, de conformidad con el Art. 114 del CÓDIGO ORGÁNICO DE LA
ECONOMÍA SOCIAL DE LOS CONOCIMIENTOS, CREATIVIDAD E
INNOVACIÓN, concedo a favor de la Universidad Central del Ecuador una licencia
gratuita, intransferible y no exclusiva para el uso no comercial de la obra, con fines
estrictamente académicos. Conservo a mi favor todos los derechos de autor sobre la obra,
establecidos en la normativa citada.
Así mismo, autorizo a la Universidad Central del Ecuador para que realice la
digitalización y publicación de este trabajo de titulación en el repositorio virtual, de
conformidad a lo dispuesto en el Art. 144 de la Ley Orgánica de Educación Superior.
El autor declara que la obra objeto de la presente autorización es original en su forma de
expresión y no infringe en el derecho de autor de terceros, asumiendo la responsabilidad
por cualquier reclamación que pudiera presentarse por esta causa y liberando a la
Universidad de toda responsabilidad.
__________________________
Darwin Santiago Morocho Rocha
C.C.: 1724576655
Telf.: 0984357941
Email: [email protected]
iii
APROBACIÓN DE LA TUTORA
En mi calidad de Tutora del Trabajo de Titulación, presentado por MOROCHO ROCHA
DARWIN SANTIAGO, para optar por el Grado Inginiero Computación Grafica; cuyo
título es: DESARROLLO DE UNA APLICACIÓN MÓVIL
MULTIPLATAFORMA CON GEOLOCALIZACIÓN PARA LOCALIZAR
SITIOS Y ESTABLECIMIENTOS CERCANOS, considero que dicho trabajo reúne
los requisitos y méritos suficientes para ser sometido a la presentación pública y
evaluación por parte del tribunal examinador que se designe.
En la ciudad de Quito, a los 04 días del mes de julio de 2018.
________________________________
Ing. Zoila De Lourdes Ruiz Chávez
DOCENTE-TUTORA
C.C. 1711926558
iv
DEDICATORIA
A mi madre, Dina
Por la confianza depositada en mí,
su apoyo incondicional y económico
en mi educación y bienestar social.
v
CONTENIDO
Derechos de Autor……………………………………………………………………………… ii
Aprobación del tutor…………………………………………………………………………… iii
Dedicatoria………………………………………………………………………………….….. iv
Contenido ………………………………………………………………………………………. v
Lista de tablas………………………………………………………………………………….. vi
Lista de figuras ………………………………………………………………………………… vi
Resumen……………………………………………………………………………………..… vii
Abstract……………………………………………………………………………………….. viii
Capítulo 1 ........................................................................................................................ 1 1. PLANTEAMIENTO DEL PROBLEMA ..................................................................... 1
1.1. Antecedentes ............................................................................................................ 1 1.2. Formulación del problema ....................................................................................... 2 1.3. Objetivos .................................................................................................................. 3 1.4. Alcance ..................................................................................................................... 3 1.5. Limitaciones ............................................................................................................. 4
Capítulo 2 ........................................................................................................................ 1 2. MARCO TEÓRICO ....................................................................................................... 1
2.1. Sistemas operativos móviles .................................................................................... 1 2.3. iOS ............................................................................................................................ 8 2.4. Importancia del desarrollo móvil ............................................................................. 9 2.5. Desarrollo móvil multiplataforma .......................................................................... 10 2.6. Ventajas y desventajas del desarrollo móvil multiplataforma ............................... 11 2.7. ¿Aplicaciones nativas o multiplataforma? ............................................................. 11 2.8. Clasificación de las aplicaciones móviles multiplataforma ................................... 12 2.9. Frameworks y herramientas para el desarrollo multiplataforma ............................ 13 2.9.2. NativeScript ....................................................................................................... 13 2.9.3. Ionic ................................................................................................................... 14 2.9.4. Xamarin ............................................................................................................. 15 2.10. ¿Por qué usar React Native en nuestro proyecto? .................................................. 15 2.11. Geolocalización ...................................................................................................... 17 2.12. API (Application Programming Interfaces) ........................................................... 18 2.13. Google Console Developer .................................................................................... 18 2.14. Google Maps API ................................................................................................... 19
Capítulo 3 ...................................................................................................................... 21 3. Modelo de desarrollo incremental o iterativo ............................................................ 21
3.1. Fases del modelo de desarrollo incremental .......................................................... 21 3.2. Inicialización del proyecto ..................................................................................... 22 3.3. Iteraciones .............................................................................................................. 23
Capítulo 4 ...................................................................................................................... 41 4. Resultados y Pruebas .................................................................................................... 41
4.1. Resultados .............................................................................................................. 41 4.2. Pruebas ................................................................................................................... 43
Capítulo 5 ...................................................................................................................... 44 5. Conclusiones y Recomendaciones ................................................................................ 44
5.1. Conclusiones .......................................................................................................... 44 5.2. Recomendaciones ................................................................................................... 45
BIBLIOGRAFÍA .......................................................................................................... 46
vi
LISTA DE TABLAS
Tabla 1 Cuadro comparativo Android, iOS y Windows 10 Mobile. ................................ 1 Tabla 2 Versiones SDK Android. ..................................................................................... 3 Tabla 3 Características del Sistema Operativo iOS. ......................................................... 8 Tabla 4 Comunidad de desarrollo React Native, Ionic, Xamarin ................................... 16 Tabla 5 Características y requerimientos mínimos de la app NearbyFind. .................... 22 Tabla 6 APIs disponibles para recuperar información de sitios y establecimientos. ..... 22 Tabla 7 Tipos de establecimientos y filtro de búsqueda en el mapa principal ............... 29
LISTA DE FIGURAS
Figura 2.1 Arquitectura Android ..................................................................................... 5 Figura 2.2 Arquitectura iOS ............................................................................................ 9 Figura 2.3 Android Studio IDE oficial para Android. ................................................... 10 Figura 2.4 Xcode IDE oficial para iOS. ........................................................................ 10 Figura 2.5 Logo React Native........................................................................................ 13 Figura 2.6 Logo NativeScript ........................................................................................ 14 Figura 2.7 Logo Ionic .................................................................................................... 14 Figura 2.8 Logo Xamarin .............................................................................................. 15 Figura 2.9 Interés a largo tiempo React Native, Ionic, Xamarin ................................... 16 Figura 2.10 ¿Cómo funciona una API? ......................................................................... 18
Figura 3.1 Prototipo #1 de la aplicación NearbyFind. ................................................... 26 Figura 3.2 Vista previa de un establecimiento en el mapa. ........................................... 30 Figura 3.3 Pantalla Mapa de rutas. ................................................................................ 32 Figura 3.4 Vista panorámica. ......................................................................................... 34 Figura 3.5 Costo y tiempo de viaje obtenidos desde la API de UBER. ........................ 35 Figura 3.6 Flujo de la aplicación móvil. ........................................................................ 36 Figura 3.7 Pantallas de la aplicación móvil. .................................................................. 36 Figura 3.8 Presencia de la app NearbyFind en el Google Play. .................................... 38 Figura 3.9 App NearbyFind versión 2.0. ....................................................................... 40 Figura 4.1 Ejecución app NearbyFind en un Samsung Galaxy S8 Plus…………….....41 Figura 4.2 Ejecución app NearbyFind en un iPhone 7 plus con iOS 10. ...................... 42
vii
Título: Desarrollo de una aplicación móvil multiplataforma con geolocalización para
localizar sitios y establecimientos cercanos.
Autor: Morocho Rocha Darwin Santiago
Tutor: Ing. Zoila de Lourdes Ruiz Chávez
RESUMEN
El presente proyecto integrador incursiona en el desarrollo móvil multiplataforma
mediante el uso de tecnologías web tales como Node.js, React y Firebase. Por otro lado,
se explora las tecnologías de desarrollo móvil multiplataforma como React Native,
NativeScript, Ionic y Xamarin. La aplicación móvil de este proyecto llamada NearbyFind
está destinada a dispositivos iOS y Android, se incorpora varias APIs de geolocalización
que permiten recuperar de manera sencilla sitios y establecimientos cercanos tomando
como referencia una ubicación geográfica. Así mismo la aplicación en cuestión presenta
una interfaz de usuario con apariencia nativa, fluida y de fácil uso para el cliente. Como
fuente de información principal se emplea la API de Google Place, adicional se utiliza la
API de Facebook Places como fuente de información alterna y se incorporó un inicio de
sesión con Facebook en la aplicación para poder usar la API antes mencionada.
PALABRAS CLAVE: ANDROID / IOS / GEOLOCALIZACIÓN / REACT / REACT
NATIVE / MULTIPLATAFORMA / GOOGLE DEVELOPER CONSOLE / GOOGLE
PLACE API / FACEBOOK PLACE API / FIREBASE
viii
Title: Development of a multiplatform mobile application with geolocation to locate
nearby sites.
Author: Morocho Rocha Darwin Santiago
Tutor: Ing. Zoila de Lourdes Ruiz Chávez
ABSTRACT
The following integrating project ventures into the multiplatform mobile development
through the use of web technologies such as Node.js, React and Firebase. On the other
hand, it explores multiplatform mobile development technologies such as React Native,
NativeScript, Ionic and Xamarin. The mobile application of this project called
NearbyFind, is intended for iOS and Android devices, it incorporates several geolocation
APIs that allow to easily retrieve nearby sites and establishments based on a geographical
location. Moreover, the application at issue presents an user interface with a native, fluid
and user-friendly appearance for the customer. The Google Place API is used as the main
source of information, in addition to that, the Facebook Places API is used as an alternate
source of information and a login with Facebook was incorporated into the application to
use the aforementioned API.
KEYWORDS: ANDROID / IOS / GEOLOCATION / REACT / REACT NATIVE /
MULTIPLATAFORM / GOOGLE DEVELOPER CONSOLE / GOOGLE PLACE API
/ FACEBOOK PLACE API / FIREBASE
1
Capítulo 1
1. PLANTEAMIENTO DEL PROBLEMA
1.1. Antecedentes
A finales del año 2017 un estudio realizado por la Asociación GSM (Global System for
Mobile communications) determinó que en el mundo existen más de 5000 millones de
usuarios móviles, además se estima que para el año 2020 el número de líneas móviles
superará a la población mundial. Esto se debe a la gran popularidad que han ganado los
dispositivos móviles inteligentes desde la aparición del iPhone en el año 2007. (ABC,
2017)
Con el número de dispositivos móviles inteligentes (Smartphones) en aumento cada día
la demanda de desarrollo de software para estos es cada vez más grande. No obstante, el
desarrollo de este tipo de software no es una tarea sencilla y mucho menos barata. Esto
se debe a los distintos sistemas operativos móviles que existen en el mercado, siendo iOS
y Android los más populares en la actualidad.
Debido a la existencia de distintos sistemas operativos móviles el desarrollo de una misma
aplicación móvil (software para dispositivos móviles inteligentes) que pueda ser
ejecutada en estos sistemas es una tarea tediosa y compleja para los desarrolladores de
software.
Hoy en día las aplicaciones móviles o apps están presentes en la medicina, educación,
turismo, economía, publicidad, turismo, etc. Además, el cliente que contrata los servicios
para desarrollar este software demanda que esté disponible en los sistemas operativos más
populares en un corto tiempo y sin incrementar el presupuesto destinado para el desarrollo
del mismo.
En los últimos años el concepto de desarrollo móvil multiplataforma ha tenido una gran
acogida en la comunidad de desarrolladores a nivel mundial. Y son cada vez más las
empresas de desarrollo que están adoptando este concepto para el desarrollo de sus apps,
lo cual conlleva a contratar personal especializado en el manejo de estas tecnologías de
desarrollo multiplataforma obligando al desarrollador móvil convencional a adaptarse a
2
estas nuevas tendencias de creación de software y no sucumbir ante estas nuevas
tendencias.
La carrera de Ingeniería en Computación Gráfica se caracteriza por la capacidad de crear
software con un enfoque estéticamente agradable y amigable para sus usuarios. Con el
presente proyecto integrador la carrera de Ingeniería en Computación Gráfica busca
incursionar en las nuevas tendencias de desarrollo móvil explorando el potencial del
desarrollo móvil multiplataforma y su aplicación en el sector turístico, con lo cual las
personas puedan ubicar, encontrar y localizar sitios o establecimientos cercanos mediante
el uso de tecnologías de geolocalización para reducir o eliminar las metodologías no
agiles (navegación en la web, utilización de mapas o guías turísticas) que frecuentemente
utilizan los usuarios (turistas o personas no oriundas del país o de una determinada
ciudad) al momento de localizar dichos sitios o establecimientos.
1.2. Formulación del problema
En el Ecuador los turistas, nacionales o extranjeros, se enfrentan todos los días a un
problema muy común “encontrar y localizar sitios o establecimientos cercanos”.
Lamentablemente Ecuador no cuenta con una manera ágil para localizar sitios mediante
el uso de un dispositivo móvil con sistema Android o iOS que permita a los usuarios
realizar dicha tarea con mayor rapidez y eficacia.
1.2.1. Descripción del problema
El Ecuador es un país en constante crecimiento, cada día son más los sitios y
establecimientos que se crean en nuestro país, esto hace que se dificulte la manera de
mantener actualizada la información en sitios web, guías turísticas o incluso las personas
oriundas del sector no siempre están al tanto de esta información.
Debido a que el sector turístico es de suma importancia para la economía de muchos
comerciantes del país, es necesario la creación de una aplicación móvil multi-idioma
(español e inglés) capaz de ejecutarse en los sistemas operativos más populares (Android
e iOS) para los turistas menos experimentados para localizar sitios cercanos mediante el
3
uso de técnicas de geolocalización y tecnologías web como REST1 APIs2 para mejorar la
experiencia turística de los usuarios en nuestro país.
1.3. Objetivos
1.3.1. Objetivo general
Desarrollar una aplicación móvil multiplataforma para iOS y Android que permita al
usuario encontrar sitios o establecimientos cercanos mediante geolocalización.
1.3.2. Objetivos específicos
• Definir la estructura, componentes y funcionalidades de la aplicación.
• Investigar las opciones disponibles para desarrollar aplicaciones móviles
multiplataforma.
• Utilizar el Framework3 React Native4 para el desarrollo de la aplicación iOS
(versiones 9.0 o superior) y Android (versiones 5.0 o superior).
• Incorporar un mapa de Google en la aplicación en el cual se visualizarán los lugares
disponibles para mostrar al usuario en un radio de búsqueda.
• Implementar las debidas APIs REST para la geolocalización5 y dibujado de elementos
en el mapa.
• Exportar la aplicación a los sistemas operativos planteados.
• Publicar la aplicación móvil en el Google Play (se omite el App Store por motivos de
presupuesto).
1.4. Alcance
La aplicación móvil llamada NearbyFind se ejecuta en los sistemas operativos iOS
(versiones 9.0 o superior) y Android (versiones 5.0 o superior), la cual cuenta con
1 REST: REpresentational State Transfer. 2 API: Application Programming Interfaces. 3 Framework: Conjunto de librerías, compiladores y otros programas integrados en el proceso de
desarrollo de un software. 4 React Native: Framework creado por Facebook para desarrollar aplicaciones móviles multiplataforma 5 Geolocalización: Determinación de la ubicación geográfica de un determinado objeto en un sistema de
coordenadas.
4
distintas pantallas, elementos visuales (botones, listas y filtros) que permite al usuario
conocer e interactuar con la aplicación de una manera fácil e intuitiva.
La aplicación NearbyFind está disponible para su descarga en la tienda oficial de Android
(Google Play) y opcionalmente en la tienda oficial para iOS (App Store).
1.5. Limitaciones
El framework React Navite requiere dispositivos móviles de gama media y alta para
ejecutar sus aplicaciones de manera fluida y con un gran rendimiento.
1
Capítulo 2
2. MARCO TEÓRICO
2.1. Sistemas operativos móviles
Un sistema operativo móvil es un sistema operativo que controla un dispositivo móvil
similar a como Windows, Linux o macOS controlan un PC. En resumen, un sistema
operativo móvil es la plataforma de software sobre la que otros programas denominados
apps puedan ejecutarse en dispositivos móviles permitiendo comunicarnos con ellos de
forma sencilla. (areatecnologia, s.f.)
2.1.1. Comparativa Sistemas operativos móviles
La Tabla 1 presenta una comparación entre los tres grandes sistemas operativos móviles
como son Android, iOS y Windows Phone en la que se analizan sus principales
características. (Android vs iOS vs WindowsPhone, s.f.)
Sistema Operativo Android iOS Windows Phone
Kernel Linux OS X Windows NT
Tipo de SO Abierto Cerrado Cerrado
Lenguaje de
Programación
nativo
Java, Kotlin Objective C, Swift C#
Seguridad Muy Buena Susceptible a
Malware Muy Buena
Adaptabilidad Excelente Excelente Excelente
Multitarea Si Si Si
Estándares
Soportados GSM, CDMA, 4G GSM, CDMA,4G GSM, CDMA, 4G
Hardware
Soportado
Amplia gama de
dispositivos iPhone, iPad
Limitada gama de
dispositivos
Tienda de Software Google Play App store Microsoft Store
Soporte para Tablet Si Si No
Expansión de
almacenamiento Micro SD No No
Interfaz de Usuario Más Técnico Fácil Fácil
Personalización Profunda Limitada Ninguna
Vida de la Batería Media duración Media duración Mayor duración
Tabla 1 Cuadro comparativo Android, iOS y Windows 10 Mobile.
2
2.2. Android
“Android es una solución completa de software de código libre (Linux) para teléfonos y
dispositivos móviles. Es un paquete que engloba un sistema operativo, un runtime de
ejecución basado en Java, un conjunto de librerías de bajo y medio nivel y un conjunto
inicial de aplicación destinada al usuario final. Android se distribuye bajo una licencia
libre que permite la integración con soluciones de código propietario”. (Papa Quiroz,
2013, pág. 32)
2.2.1. Breve Historia
En julio de 2005, Google adquirió Android Inc., en ese entonces la compañía se dedicaba
a la creación de software para teléfonos móviles. Una vez dentro de Google, el equipo
desarrolló una plataforma basada en el núcleo Linux para dispositivos móviles, que fue
promocionado a fabricantes de dispositivos y operadoras con la promesa de proveer un
sistema flexible y actualizable, Google adaptó su buscador y sus aplicaciones para el uso
en móviles. (Auz Coba, 2016, pág. 46)
Es el principal producto de la Open Handset Alliance, una alianza comercial de un
conglomerado de compañías entre fabricantes y desarrolladores de hardware, software y
operadores de servicio, dedicadas al desarrollo de estándares abiertos para dispositivos
móviles, algunos de sus miembros son Google, HTC, Dell, Intel, Motorola, Qualcomm,
Texas Instruments, Samsung, LG, T-Mobile, Nvidia y Wind River Systems. Google
liberó la mayoría del código de Android bajo licencia Apache, una licencia libre y de
código abierto. (Auz Coba, 2016, pág. 23)
2.2.2. Versiones
Cada actualización del sistema operativo Android es desarrollada bajo un nombre en
código de un elemento relacionado con postres, los nombres en código están en orden
alfabético.
La Tabla 2 detalla las versiones de Android y sus principales características:
3
Versión Descripción
1.0 Liberado el 23 de septiembre de 2008
1.1 Liberado el 9 de febrero de 2009
1.5 (Cupcake) Liberado el 15 de septiembre de 2009.
Con una interfaz sencilla y atractiva, GPS, capacidad de grabar y
reproducir vídeos, entre otras.
1.6 (Donut) Liberado el 15 de septiembre de 2009.
Esta actualización se incluyó novedades como la 'Quick Search Box',
control de batería, conexión a VPN, entre otras.
2.0 / 2.1 (Eclair) Liberado el 26 de octubre de 2009.
En actualización se incluyó un rediseño de la interfaz de usuario,
soporte para HTML5, Bluetooth 2.1, soporte para Facebook, entre
otras.
2.2 (Froyo) Liberado el 20 de mayo de 2010.
En esta actualización se incluyó: una optimización general del sistema
Android, que mejoraba su rendimiento y memoria, soporte para Adobe
Flash entre otras
2.3 (Gingerbread)
Liberado el 6 de diciembre de 2010.
En esta actualización se incluyó: nuevos efectos, soporte para NFC,
mejora en la entrada de datos, audio y gráficos para juegos, etc.
3.0 / 3.1 / 3.2
(Honeycomb)
Liberado el 22 de febrero del 2011.
En esta actualización se incluyó: soporte para tablets, escritorio 3D
con widgets rediseñados, Google Talk, entre otras.
4.0
(Ice Cream Sandwich)
En esta actualización se incluyó: versión que unifica el uso en
cualquier dispositivo, tanto en teléfonos, tablets, televisores,
netbooks, etc.
4.1 (Jelly Bean) En esta actualización se incluyó: mejora de la fluidez y de la
estabilidad gracias al proyecto "Project Butter", ajuste automático de
widgets cuando se añaden al escritorio, cambiando su tamaño y lugar
para permitir que los nuevos elementos se puedan colocar nuevas
lenguas no occidentales, fin al soporte de Flash Player para Android a
partir de esta versión.
4.2 (Jelly Bean_mr1) Liberado el 9 de octubre del 2012.
En esta actualización se incluye: soporte de rotación de la pantalla
principal, arreglo de fallos y mejoras en rendimiento, notificaciones
expansión/contracción con un dedo.
5 (Lollipop)
Liberado en el 2015.
Android Lollipop introduce el nuevo esquema llamado Diseño
Material (Material Design). En general, la nueva interfaz es mucho
más minimalista de lo que se vio en KitKat y en las anteriores
versiones de Android.
6 (Marshmallow) La caracteristica mas relevante es la llegada del administrador de
permisos con lo cual el usuario decide que permisos desea otorgar a una
app al momento de ejecutarla.
7 (Nougat) Entre sus novedades destacadas se encuentra su modo multitarea.
Otra de las novedades de este sistema operativo es que ahora se agrupa
por aplicaciones, de tal forma que ahora las notificaciones de las
aplicaciones de mensajería, como Whatsapp, se vean juntas, pudiendo
responder a los mensajes y hacer interacciones simples en la aplicación
dentro del centro de notificaciones.
8 (Oreo) Entre sus principales novedades tenemos la capidad de autocompletado
de textos en los formularios caracteristicos de la web, "Orígenes
desconocidos" desaparece ahora los usuarios autorizan que
aplicaciones pueden instalar otras apps.
Tabla 2 Versiones SDK (Software Development Kit) Android.
4
Las características básicas de un sistema operativo Android se detallan a continuación:
• Framework de aplicaciones, que permite el remplazo y la reutilización de los
componentes.
• Sistema de notificaciones, esta característica es algo en lo que Android sobresale del
resto de sistemas operativos móviles.
• Navegador web integrado, basado en el motor Webkit.
• SQlite, para almacenamiento de datos.
• Lenguaje de programación Java.
• Soporta diversos formatos multimedia (MPEG4, H.264, MP3, AAC, AMR, JPG,
PNG, GIF).
• Soporta HTML, HTML5, Adobe Flash Player, entre otros.
• Máquina virtual Dalvik, la cual está optimizada para dispositivos móviles, muy
similar a Java.
• Telefonía GSM.
• Bluetooth, 3G, 4G y Wi-Fi.
• GPS, Cámara, acelerómetro y brújula.
• Tienda de aplicaciones gratuitas o pagadas llamada Google Play.
• Búsqueda por voz similar a Siri.
2.2.3. Arquitectura de Android
Para empezar con el desarrollo de aplicaciones en Android es importante conocer cómo
está estructurado este sistema operativo. La arquitectura de Android está formada por
varios niveles o capas (ver Figura 2.1) lo que facilita el desarrollo de aplicaciones ya que
permite trabajar con las capas inferiores por medio de las librerías evitando programar a
bajo nivel y lograr que los componentes de hardware del dispositivo móvil interactúen
con la aplicación. (Auz Coba, 2016, pág. 36)
5
Figura 2.1 Arquitectura Android. Fuente: (Vico, 2011)
Cada una de las capas utiliza elementos de la capa inferior para realizar sus funciones, es
por ello que a este tipo de arquitectura se la conoce también como pila. (Papa Quiroz,
2013, pág. 42)
A continuación, se detallan las capas más relevantes de abajo hacia arriba del sistema
operativo Android. (Papa Quiroz, 2013)
• Kernel de Linux: El núcleo actúa entre el hardware y el resto de las capas de la
arquitectura. El desarrollador no accede directamente a esta capa, sino que debe
utilizar las librerías disponibles en capas superiores. Para cada elemento de hardware
existe un controlador o driver dentro del kernel que permite utilizarlo desde el
software.
• Librerías: Estas normalmente están hechas por el fabricante, quien también se
encarga de instalarlas en el dispositivo antes de ponerlo a la venta. El objetivo de las
librerías es proporcionar funcionalidad a las aplicaciones para tareas que se repiten
con frecuencia, evitando tener que codificarlas cada vez.
6
• Entorno de ejecución: Como se aprecia en la figura 2.1 el entorno de ejecución de
Android no se considera una capa en sí mismo, dado que también está formada por
librerías, Aquí se encuentra las librerías con las funcionalidades habituales de Java y
Android. El componente principal del entorno de ejecución de Android es la máquina
virtual Dalvik.
• Framework de Aplicaciones: Es una estructura de aplicaciones, formada por todas
las clases y servicios que utilizan directamente las aplicaciones para realizar sus
funciones.
Siguiendo el diagrama se encuentra:
• Activity Manager: Se encarga de administrar la pila de actividades de nuestra
aplicación, así como su ciclo de vida.
• Windows Manager: Se encarga de organizar lo que se muestra en pantalla.
• Content Provider: Esta librería crea una capa que encapsula los datos que se
compartirán entre aplicaciones para tener control sobre cómo se accede a la
información.
• Views: En Android, las vistas son elementos que ayudan a construir las interfaces de
usuario: botones, cuadros de texto, listas y hasta elementos más avanzados como un
navegador web o un visor de Google Maps.
• Package Manager: Esta biblioteca permite obtener información sobre los paquetes
instalados en el dispositivo Android, además de gestionar la instalación de nuevos
paquetes.
• Location Manager: Permite determinar la posición geográfica del dispositivo
Android mediante GPS o redes disponibles y trabajar con mapas.
• Sensor Manager: Permite manipular los elementos de hardware del dispositivo
móvil como el acelerómetro, giroscopio, brújula, etc.
• Cámara: Con esta librería se puede hacer uso de la cámara del dispositivo para tomar
fotografía o para grabar video.
7
• Multimedia: Permite reproducir y visualizar audio, video e imágenes en el
dispositivo.
• Aplicaciones: En la última capa se incluye todas las aplicaciones del dispositivo ya
sea con interfaz gráfica o no, las propias del dispositivo y las administradas
(programadas en Java), así como las que el usuario ha instalado por su cuenta.
Para concretar Android proporciona un entorno robusto para que se pueda programar
aplicaciones para alguna funcionalidad. Todo dentro de Android es accesible y se puede
contar siempre con las aplicaciones de cualquier dispositivo móvil para la optimalización
de las tareas de programación.
2.2.4. Ventajas y desventajas Android
Basándose en (Android, s.f.) se presenta lo siguiente:
Ventaja
Su principal ventaja para los desarrolladores de aplicaciones es que es de Open Source6,
se puede personalizar el teléfono al máximo y modificar funciones del teléfono
sencillamente instalando una aplicación, otro punto a favor de Android es la confianza
que está recibiendo de los fabricantes. Gracias a ello, la oferta de teléfonos con Android
es amplia y la oferta es variada tanto en marcas como en precios.
Desventaja
Uno de los aspectos negativos de Android es su fragmentación7, aunque va mejorando,
actualizar el sistema operativo a nuevas versiones no es sencillo como en el caso del
iPhone. Debido a que múltiples fabricantes modifican el sistema operativo para
adecuarlos a su marca e incorporar su propia capa de personalización las actualizaciones
a las versiones más recientes de Android suelen tardar meses o incluso con el pasar del
tiempo los dispositivos dejan de recibir estas actualizaciones.
6 Open Source: Modelo de desarrollo de software basado en la colaboración abierta. 7 Fragmentación: Distintas versiones de un sitema operativo.
8
2.3. iOS
Este sistema operativo es de Apple, se encuentra presente en el iPhone e iPad, tiene un
excelente rendimiento y sencillo funcionamiento.
2.3.1. La interfaz
Este sistema es fluido y se basa en la manipulación directa, los elementos de control son
botones, deslizadores e interruptores, las respuestas son inmediatas.
CARACTERÍSTICAS PRINCIPALES
Pantalla Principal Llamada SpringBoard, aquí se ubican los iconos de las aplicaciones y el
Dock en la parte inferior de la pantalla donde se pueden anclar varias
aplicaciones de uso frecuente.
Carpetas Con la versión iOS 4 se implantó un sistema de carpetas en el sistema, Se
puede mover una aplicación sobre otra creándose una carpeta, pudiéndose
agregar más aplicaciones por medio del mismo procedimiento.
Centro de notificaciones Actualizando el iOS 5, se rediseño completamente el sistema de
notificaciones y ahora se colocan en una área donde se puede acceder
deslizando la barra de estado hacia abajo.
Multitarea Antes la multitarea solo servía para aplicaciones por defecto del sistema,
preocupando así los problemas de rendimiento y batería en el caso de hacer
correr varias aplicaciones al mismo tiempo. Ahora permite el uso de 7 APIs
para multitarea: Voz IP, Audio en segundo plano, Localización en Segundo
Plano, Notificaciones Push, Notificaciones Locales, completado de tareas
y cambio rápido de aplicaciones.
Game Center Se lanzó en junio de 2010 para iPhone y para iPods con iOS 4,
perfeccionándose en iOS 5 en varios aspectos como:
agregar foto de perfil, ver amigos de tus amigos y encontrar adversarios de
nuevos amigos en función de juegos y jugadores.
Tecnologías no
admitidas
Las versiones anteriores a iOS 8 no permite usar Adobe Flash ni la
plataforma de Java, pero utiliza HTML5 como alternativa a Flash.
Tabla 3 Características del Sistema Operativo iOS.
2.3.2. Arquitectura
La arquitectura de iOS (ver figura 2.2) se basa en capas donde las capas más bajas
controlan los servicios básicos y las altas contienen servicios y tecnologías que son
importantes para el desarrollo de las aplicaciones.
Cocoa Touch: Es la capa más importante para desarrollar aplicaciones iOS, tiene un
conjunto de Frameworks fundamentales:
• Ulkit: Contiene las clases necesarias para el desarrollo de una interfaz de usuario.
• Foundation Framework: define clases básicas, acceso y el manejo de objetos y los
servicios del Sistema Operativo.
9
Media: Provee servicios multimedia y de gráficos a la capa superior.
Core Services: Contiene servicios fundamentales del sistema que usan las aplicaciones.
Core Os: Contiene características de bajo nivel como: ficheros del sistema, seguridad,
drivers del dispositivo, manejo de memoria.
Figura 2.2 Arquitectura iOS. Fuente: (tecnologiaiostm, s.f.)
2.4. Importancia del desarrollo móvil
Los terminales móviles se han convertido en una plataforma importante para productos y
servicios de software. El software en dispositivos móviles implica una amplia gama de
aplicaciones: comunicación, entretenimiento, negocios, medios y mucho más.
Con la introducción de los teléfonos inteligentes, el desarrollo de software móvil ha
crecido rápidamente, ya que abre una oportunidad de mercado previamente limitada a los
fabricantes de teléfonos y operadoras, permitiendo a los desarrolladores crear y distribuir
aplicaciones móviles a gran escala (Luis Corral, Andrea Janes, Tadas Remencius, 2012).
El desarrollo de aplicaciones móviles no es una tarea sencilla debido a que no todos los
dispositivos móviles ejecutan el mismo sistema operativo. Cada sistema operativo o
plataforma móvil (Android, iOS, Windows Phone, etc.) tiene su propia manera de
desarrollar software mediante un determinado lenguaje de programación o un IDE
(Integrated development environment) exclusivo.
La figura 2.3 muestra el programa Android Studio IDE oficial para desarrollar aplicaciones
Android.
10
Figura 2.3 Android Studio IDE oficial para Android. Fuente: (Developers google, 2018)
La figura 2.4 muestra el programa Xcode IDE oficial para desarrollar aplicaciones iOS.
Figura 2.4 Xcode IDE oficial para iOS. Fuente: (Developer Apple, 2018)
2.5. Desarrollo móvil multiplataforma
Debido a los altos costos y tiempo de desarrollo al crear software móvil para distintas
plataformas muchos desarrolladores han optado por una alternativa más económica y
rápida denominada desarrollo multiplataforma. Después de evaluar las especificaciones,
requerimientos y el alcance de la aplicación móvil a desarrollarse para varios sistemas
11
operativos se determina si es factible su desarrollo mediante el uso de uno de los varios
frameworks o herramientas disponibles para crear aplicaciones móviles para varias
plataformas con la utilización de un único lenguaje de programación o IDE.
2.6. Ventajas y desventajas del desarrollo móvil multiplataforma
2.6.1. Ventajas
• Optimización relación costo/beneficio.
• Menor tiempo de desarrollo e implementación.
• Reutilización de código entre distintas plataformas.
• Mayor libertad de diseño de interfaces.
• Gran amplia gama de librerías disponibles en línea.
• Facilidad en actualizaciones, versionamiento y distribución en diferentes
plataformas.
2.6.2. Desventajas
• EL acceso y uso a cámara, GPS, acelerómetro, entre otras es más complicado debido
a que cada plataforma tiene su propia manera de acceder a estos componentes.
• Un bajo rendimiento dependiendo del framework o herramienta utilizada.
• Poca posibilidad de trabajar sin acceso a internet y de correr en segundo plano.
2.7. ¿Aplicaciones nativas o multiplataforma?
La elección entre una aplicación nativa o multiplataforma depende del conjunto de
características y el ámbito de aplicación de la aplicación. Una aplicación nativa ejecuta
un lenguaje de programación especifico por cada sistema operativo (Java o Kotlin en el
caso de Android y Objective-C o Swift en iOS), esto hace que dichas aplicaciones tengan
un gran rendimiento tanto en iOS como en Android.
Si se pretende desarrollar aplicaciones con el fin de acceder a componentes tales como
GPS, cámara, acelerómetro, realizar tareas en segundo plano de manera prolongada, etc.
La mejor opción es una aplicación nativa.
Si la aplicación será meramente informativa, con acceso a redes sociales sin muchas
funciones y pantallas, las aplicaciones multiplataforma son la mejor opción.
12
No obstante, es posible crear aplicaciones móviles multiplataforma que hagan uso de
recursos tales como la cámara, GPS, mostrar notificaciones, etc. Pero realizar estas apps8
no es una tarea sencilla. Los desarrolladores deberán tener buenas prácticas de
programación y utilizar código nativo para cada plataforma con el fin de optimizar la app
para obtener el comportamiento deseado.
2.8. Clasificación de las aplicaciones móviles multiplataforma
Las aplicaciones móviles multiplataforma pueden clasificarse en: aplicaciones móviles
híbridas, interpretadas y generadas por compilación cruzada.
2.8.1. Aplicaciones híbridas
Las aplicaciones híbridas utilizan tecnologías web (HTML, JavaScript y CSS), se
ejecutan en un contenedor web (webview), como parte de una aplicación nativa, la cual
está instalada en el dispositivo móvil. Desde una aplicación híbrida es posible acceder a
las capacidades del dispositivo, a través de diversas API. (Delía, 2017)
Las aplicaciones híbridas ofrecen grandes ventajas permitiendo la reutilización de código
en las distintas plataformas, el acceso al hardware del dispositivo, y la distribución a
través de las tiendas de aplicaciones. En contrapartida, se observan dos desventajas de las
aplicaciones híbridas respecto del caso nativo: i) la experiencia de usuario se ve
perjudicada al no utilizar componentes nativos en la interfaz, y ii) la ejecución se ve
ralentizada por la carga asociada al contenedor web. (Delía, 2017)
2.8.2. Aplicaciones interpretadas
Estas aplicaciones móviles son traducidas en su mayor parte a código nativo, mientras
que un resto se interpreta en ejecución. Se implementan de forma independiente de las
plataformas utilizando diversas tecnologías y lenguajes, tales como Java, Ruby y XML,
entre otros. La obtención de interfaces nativas constituye una de las principales ventajas
de este tipo de aplicaciones, y la dependencia total con el entorno de desarrollo el
obstáculo más notable (Delía, 2017)
8 Apps: Es una abreviatura de la palabra en inglés applications.
13
2.8.3. Aplicaciones generadas por compilación cruzada
Estas aplicaciones se compilan de manera nativa creando una versión específica de alto
rendimiento para cada plataforma destino (Pablo Thomas, Lisandro Delia, Leonardo
Corbalan, Germán Cáseres, Nicolás Galdamez, Alfonso Cuitiño, Juan Fernandez Sosa,
Patricia Pesado, 2017).
2.9. Frameworks y herramientas para el desarrollo multiplataforma
2.9.1. React Native
Es un Framework JavaScript para construir aplicaciones móviles reales y con renderizado
nativo para Android e iOS dentro de la categoría de aplicaciones móviles interpretadas.
Está basado en React un Framework JavaScript creado y mantenido por Facebook para
construir interfaces de usuario enfocado en la web (Frontend). React Native se dirige a
dispositivos móviles. En otras palabras, permite a los desarrolladores web construir
aplicaciones móviles las cuales lucen y se sienten nativas. (Eisenman, 2017)
React Native no solo permite obtener aplicaciones móviles multiplataforma con una rica
interfaz de usuario si no que acelera rápidamente los tiempos de desarrollo ya que explota
casi en su totalidad las ventajas de React para la construcción de interfaces web
dinámicas. A demás de contar con una amplia gama de librerías y plugins NPM9 para
desarrollo JavaScritp con Node.js10.
Figura 2.5 Logo React Native. Fuente: (Facebook, s.f.)
2.9.2. NativeScript
NativeScript es un framework creado por Telerik para crear aplicaciones multiplataforma
nativas para iOS y Android sin vistas web (aplicaciones móviles interpretadas). Permite
9 NPM: Es el manejador de paquetes por defecto para Node.js. 10 Node.js: Es un entorno de ejecución para JavaScript.
14
utilizar Angular11, TypeScript12 o JavaScript moderno para obtener una interfaz de
usuario y rendimiento verdaderamente nativos, al tiempo que reutiliza las habilidades y
el código de nuestros proyectos web. (Telerik, 2017)
A diferencia de React Navite, este framework separa la programación del diseño de
interfaces, es decir la lógica de la aplicación será escrita mediante JavaScript o TypeScript
mientras que la interfaz de usuario de define mediante archivos css y xml.
Cuando la aplicación es compilada, parte del código multiplataforma es traducido a
código nativo, mientras que el resto es interpretado en tiempo de ejecución (Delía, 2017).
Figura 2.6 Logo NativeScript. Fuente: (Telerik, s.f.)
2.9.3. Ionic
Ionic es un popular framework de aplicaciones híbridas para construir aplicaciones
móviles usando tecnologías web tales como CSS, HTML5 y JavaScript con la diferencia
de que no se desarrolla aplicaciones nativas, en su lugar tenemos una aplicación que se
ejecuta dentro de un webview. (Perez Rivas, 2015, pág. 1)
Ionic es una alterativa para un desarrollo rápido y de fácil aprendizaje, no obstante, se
debe tener en cuenta que el bajo rendimiento en comparación con otro tipo de aplicaciones
móviles multiplataforma.
Figura 2.7Logo Ionic
11 Angular: Es un framework para aplicaciones web desarrollado en TypeScript. 12 TypeScript: Es un lenguaje de programación de código abierto.
15
2.9.4. Xamarin
Xamarin es una herramienta para los desarrolladores de aplicaciones móviles, y la
novedad de esta herramienta es la capacidad que tiene para que el desarrollador escriba
su app en lenguaje C# y el mismo código sea traducido para ejecutarse en iOS, Android
y Windows Phone. (Diaz, 2014, pág. 1)
Figura 2.8 Logo Xamarin. Fuente: (Microsoft, s.f.)
2.10. ¿Por qué usar React Native en nuestro proyecto?
Después de analizar cuidadosamente qué aspectos, tiempo disponible y hacia que publico
se va a dirigir nuestra app hemos decidido utilizar React Native debido a los beneficios
que presenta en comparación a otras opciones, entre las cuales podemos recalcar lo
siguiente:
• La oportunidad de reutilizar nuestro código en varias pantallas de nuestra app.
• Mayores facilidades de diseño para la construcción de interfaces de usuario.
• Su amplia documentación en información disponible en línea en sitios como Stack
Overflow, Medium, GitHub, etc.
• Mejor rendimiento que otros framework como Ionic y NativeScript.
• En Android un APK13 generado con React Native es de un tamaño considerablemente
menor que un APK obtenido con NativeScript o Ionic.
• El respaldo incondicional de Facebook hacia este framework.
La Tabla 4 muestra como React Native está respaldada por los desarrolladores con
respecto a sus principales competidores:
13 APK: Android Application Package
16
React Native
k=miles
Ionic
k=miles
Xamarin
k=miles
Stack Overflow Stats
(número de incidencias)
32.9k 4.45k 31.3k
2.10.1. GitHub
Stats (número de incidencias)
65.2k 34.5K No está disponible
en Github
Precio Gratis Gratis
Parcialmente
Gratis Parcialmente
Integraciones
Verificadas
(Librerías verificadas)
React Native Firebase
Shoutem UI
React Native Material Desing
Expo
React Native Seed
NativeBase
react-native-ui-kitten
Siphon
AppHub
CodePush
ReactNativeAutoUpdater
Reindex
AWS AppSync
Deco
IgniteUI
Backand
AWS AppSync
Atatus
Greenhouse
RxDB
StackBlitz
Bitrise
Built.io
.NET
TestFairy
Bitwarden
Pushwoosh
Raygun
Tabla 4 Comunidad de desarrollo React Native, Ionic, Xamarin. Fuente: (stackshare, 2018)
La figura 2.9 muestra como React Native ha escalado desde el año 2017 hasta el año 2018
con respecto a sus principales competidores:
Figura 2.9 Interés a largo tiempo React Native, Ionic, Xamarin. Fuente: (stackshare, 2018)
17
2.11. Geolocalización
La Geolocalización es la determinación de la ubicación geográfica de un determinado
objeto en un sistema de coordenadas de nuestro planeta por medio de un dispositivo
móvil, un computador o por cualquiera de los medios disponibles para lograrlo.
2.11.1. Geolocalización en aplicaciones móviles
Actualmente, los teléfonos móviles, de gama alta, y unos cuantos, de gama media, traen
integrados receptores GPS que mediante la red de satélites que rodea al planeta, puede
ubicarnos en cualquier punto del planeta (Santiago, 2013).
Hoy en día existen una amplia gama de aplicaciones para dispositivos móviles que hacen
uso de la geolocalización para resolver problemas cotidianos en la sociedad, tales como:
proporcionar rutas de conducción, obtener estado de tráfico, localizar de objetos perdidos
e incluso brindar servicios de transporte y mensajería privados.
2.11.1.1. UBER
Uber es una empresa de tecnología que ofrece un servicio de transporte privado a los
usuarios mediante una aplicación móvil. Esta aplicación permite obtener la ubicación
actual de un usuario y de varios conductores cercanos que pueden brindar el servicio de
transporte. Esta aplicación se ha vuelvo tan popular en muchos países que incluso ha
llegado a nuestro país Ecuador y ya está presente y muy utilizada en las principales
ciudades del país.
2.11.1.2. POKEMON GO
Este es un juego de realidad aumentada con geolocalización que permite a los usuarios
capturar seres de fantasía denominados POKEMON los cuales se encuentran distribuidos
por distintas locaciones. La dinámica del juego es simple, la aplicación móvil obtiene la
ubicación del usuario y determina si este se encuentra cerca de uno de estos seres de
fantasía, si ese es el caso se le notificara al usuario. Este juego gozó de gran popularidad
a inicios de su lanzamiento volviéndose una tendencia mundial.
18
2.11.1.3. TINDER
Tinder es una aplicación móvil disponible para Android e iOS para encontrar pareja de
manera online media la cual atreves de la cuenta de Facebook del usuario analiza el perfil
del mismo y muestra posibles parajes compatibles y que se encuentran cercanos a la
ubicación del mismo.
2.12. API (Application Programming Interfaces)
Una API es un conjunto de funciones o procedimientos utilizados por los programas
informáticos para acceder los servicios del sistema operativo, bibliotecas de software, u
otros sistemas. (BBVAOpen4U, s.f.)
Figura 2.10 ¿Cómo funciona una API? Fuente: (BBVAOpen4U, s.f.)
La figura 2.10 muestra el funcionamiento de una API en la cual la aplicación/cliente
realiza una petición web mediante HTTP14 o HTTPS15 la cual procesará la información
enviada, realizará la acción necesaria y devolverá una respuesta en un formato deseado
como JSON16, XML o texto plano.
2.13. Google Console Developer
Es una plataforma web proporcionada por Google para los desarrolladores que deseen
integrar las APIs de Google a sus proyectos. Los programadores deben crear sus
proyectos en esta plataforma y habilitar las APIs deseadas para obtener un API KEY17
que es una cadena de texto necesaria para el uso de cualquier API proporcionada por
Google. De esta manera mediante el API KEY Google puede medir el tráfico de una
14 HTTP: Hypertext Transfer Protocol. 15 HTTPS: Hypertext Transport Protocol Secure. 16 JSON: JavaScript Object Notation. 17 API KEY: Código de texto que se envían al realizar la llamada a una API.
19
aplicación que hace uso de una o más APIs, así como también limitar o bloquear ciertas
irregularidades en el uso de estas.
2.14. Google Maps API
Las Google Maps API permiten a los desarrolladores crear aplicaciones web, móviles y
de escritorio capaces de integrar las funcionalidades de Google Maps mediante el uso de
SDKs o peticiones HTTP.
Cabe recalcar que no todas las APIs de Google son gratuitas, algunas de estas presentan
limitaciones (Ejemplos: números de peticiones por día) o funciones que solo están
disponibles en versiones de pago.
2.14.1. Google Place API Web Service
Esta Api nos permite obtener información de la misma base de datos que usan Google
Maps. La API presenta más de 100 millones de negocios y puntos de interés que se
actualizan regularmente mediante listas verificadas por el propietario y contribuciones
moderadas por el usuario.
Para obtener los datos se debe realizar una petición HTTP en la cual se debe pasar como
parámetros la ubicación del usuario, tipos de establecimientos o punto de interés, un radio
de búsqueda y lo más importante el API KEY obtenido desde la consola de
desarrolladores de google.
2.14.2. Google Maps Distance Matrix API
Esta API es un servicio que proporciona la distancia y el tiempo de viaje para una matriz
de orígenes y destinos. La API está orientada a desarrolladores que deseen calcular la
distancia de viaje y el tiempo entre diferentes puntos de un mapa proporcionado por una
de las Google Maps API.
Esta API no proporciona información detallada de la ruta a seguirse. Únicamente
proporciona datos como duración y distancia a recorrer entre un punto de partida y un
punto de llegada.
20
2.14.3. Google Maps Directions API
Esta API proporciona la misma información que la Google Maps Distance Matrix API,
pero además proporciona información detallada de las posibles rutas a seguirse para llegar
a un mismo destino desde distintos tipos de movilización (auto, transporte público,
mediante bicicleta e incluso a pie). Esta API es muy utilizada para trazar rutas
personalizadas en mapas web y móviles.
2.14.4. Firebase
Firebase es una plataforma proporcionada por Google para crear aplicaciones web y
móviles escalables reduciendo tiempos de optimización y desarrollo.
Firebase permite a los desarrolladores compilar apps sin la necesidad de administrar la
infraestructura de la misma.
Firebase pone a disposición múltiples productos que permiten crear aplicaciones web y
móviles con características únicas desde actualización de contenido en tiempo real hasta
notificaciones móviles personalizadas para interactuar con los usuarios.
Los desarrolladores pueden hacer uso de todos los productos de Firebase, no obstante,
algunos de estos tienen características premium los cuales tienen un costo adicional.
2.14.4.1. Firebase Cloud Functions
Cloud Functions nos permite crear código backend18 con JavaScript y Node.js sin la
necesidad de administrar un servidor.
El presente proyecto integrador utiliza Firebase Cloud Functions para almacenar
información en la nube la cual será recuperada desde la aplicación y usada en las llamadas
a la API de Google Place. Con esto no hay la necesidad de configurar un servidor con lo
cual se obtiene un ahorro de tiempo significativo.
18 Backend: Codigo de programación del lado del servidor.
21
Capítulo 3
3. Modelo de desarrollo incremental o iterativo
Se ha decidido utilizar el modelo de desarrollo incremental debido a la flexibilidad que
otorga a los desarrolladores y permite al usuario involucrarse en el proyecto. De esta
manera se puede obtener un producto de software más óptimo ya que de ser necesario se
puede salir de la planificación inicial del proyecto, requerimientos y características para
agregar o quitar funcionalidades con el objetivo de obtener un producto mejorado hasta
la obtención de un producto final.
A diferencia del método en cascada la cual debe seguir una secuencia de iteraciones con
lo cual el desarrollador tiene menos flexibilidad debido a que no se pueden realizar
cambios en el producto cuando este y se encuentra en un desarrollo avanzado. El modelo
de desarrollo incremental permitirá detectar fallas en el diseño de la aplicación o
funcionalidades innecesarias y corregirlas o retirarlas de ser necesario. A demás esta
metodología nos permitirá agregar nuevas funcionalidades y características a la
aplicación móvil a mitad del desarrollo sin que esto perjudique el producto final.
3.1. Fases del modelo de desarrollo incremental
Este modelo cuenta con algunas fases no complejas, las cuales se resumen a continuación:
• Inicialización: Aquí se debe hacer una idea del producto a desarrollar, los requisitos
principales que se buscan en el proyecto y ciertas especificaciones. No es necesario
tener que definir todos los requerimientos ya que estos pueden cambiar durante la
evolución del proyecto.
• Periodos de Iteración: Durante el periodo de vida del proyecto se realizarán
pequeñas iteraciones las cuales arrojan un prototipo del proyecto por cada iteración.
La primera iteración se realiza con las características iniciales del proyecto. El número
de iteraciones puede ser ilimitado y dependerá del desarrollador y el usuario final.
• Lista de Control: Es importante que por cada iteración que se realice en el proyecto
se lleve un control del mismo. Similar a un programa que recibe actualizaciones de
22
una manera periódica. Si una iteración no es exitosa o el usuario no la necesita se
podrá volver a una iteración previa.
3.2. Inicialización del proyecto
En esta etapa plantemos el nombre de la app, requisitos fundamentales y características
del mismo los cuales se detallan en la tabla 5:
Nombre de la app: NearbyFind
Plataformas de destino: Android 5.0 o superior, iOS 9 o superior.
Idiomas de la aplicación: Español e Ingles
Características mínimas: Incorporar uno o más mapas de google en la app.
Obtener la ubicación del usuario a través del GPS del
dispositivo.
Usar una o más APIs para recuperar sitios o
establecimientos cercanos en un radio de búsqueda.
Mostrar los sitios o establecimientos en un mapa.
Recuperar y mostrar información detallada de un
establecimiento en una pantalla de la app.
Tabla 5 Características y requerimientos mínimos de la app NearbyFind.
Después de una investigación previa hemos encontrado varias alternativas disponibles para
recuperar información de sitios y establecimientos cercanos los cuales se describen en la tabla 6.
Google Place API Foursquare Place API Nominatim
- Soporte para múltiples idiomas.
- 1000 peticiones diarias gratis.
- Reviews de usuarios.
- Hasta 10 fotografías por sitio.
- Información directa de la base de
datos de Google de más de 240
países.
- Búsqueda por tipos de
establecimientos.
- Búsqueda personalizada mediante
palabras o frases clave.
- SDK para Android e iOS.
- Multiples apps en Google Console
Developer.
- Documentación disponible para
mutiles lenguajes de programación y
plataformas móviles.
- Gran cantidad de información
disponible en la web.
- Respuestas web en xml y JSON.
- Detalles con descripción del sitio
(solo plan Premium).
- Radio de búsqueda de hasta 5 km.
- Funcionalidad donde estoy
(permite conocer a los usuarios
el lugar donde se encuentran).
- Recomendación de lugares.
- 2 fotografías por sitio gratis.
- 2 peticiones por segundo.
- 950 peticiones gratis por día.
- 1 app por cuenta.
- Más de 105 millones de sitios
almacenados en su base de
datos.
- Respuesta web en formato
JSON.
- Detalles con descripción del
sitio.
- Radio de búsqueda de hasta 5
km.
- Respuesta web xml,
html, JSON.
- Límite de resultados
definidos por el
usuario.
- Documentación
limitada.
- Radio de búsqueda
no disponible.
Tabla 6 APIs disponibles para recuperar información de sitios y establecimientos.
23
Las API de Google Place y Foursquare Place tienen varias cosas en común, no obstante,
la API de Google Place a diferencia de su competencia permite recuperar mayor cantidad
de información sobre un lugar con un menor número de peticiones a la API, además de
su amplia documentación e información en sitios web como stack overflow (comunidad
de respuestas y preguntas para desarrolladores más grande en la web).
De lo enunciado anteriormente se ha decidido utilizar la API de Google Place en la
aplicación NearbyFind.
3.3. Iteraciones
La aplicación NearbyFind ha evolucionado durante su proceso de desarrollo, en cada
iteración del proyecto se ha implementado o quita funcionalidades a la aplicación con el
fin de obtener una aplicación móvil de calidad.
3.3.1. Iteración #1
En esta iteración se desarrolla la aplicación inicial la cual debe cumplir con los requisitos
y características planteados en la inicialización del proyecto.
En esta iteración inicia el desarrollo de la aplicación usando el framework React Native
en su versión 0.51.0.
Las tareas realizadas en esta iteración se detallan a continuación:
3.3.1.1. Instalación y configuración de la librería react-native-maps
Esta librería permite mostrar una vista de mapa en aplicaciones React Native. La
instalación y configuración de esta librería es un proceso complejo el cual se detalla en el
ANEXO B.
3.3.1.2. Recuperación de la ubicación del usuario a través del GPS
La recuperación de la ubicación actual de un usuario se puede realizar de varias maneras
ya sea haciendo uso de la API Geolocation proporcionada por React Native o a través de
módulos nativos (librerías creadas con lenguajes de programación Java o Swift) que
pueden ser usados con código JavaScript. En la presente iteración hacemos uso de la API
Geolocation para evaluar su desempeño en las distintas plataformas.
24
3.3.1.3. Recuperación de sitios desde la API de Google Places
Como se ha mencionado anteriormente la API de Google Place nos ofrece mejores
características y funcionalidades que su competencia. En esta iteración la aplicación
NearbyFind hace uso de esta API por medio de una petición web a la siguiente URL:
https://maps.googleapis.com/maps/api/place/nearbysearch/output?parametros
En la llamada a la URL anterior se debe pasar los siguientes parámetros:
- output: formato de la respuesta puede ser xml o json.
- key: la clave de la API correspondiente a la aplicación (Ver ANEXO A).
- location: la latitud y longitud desde donde se realizará la búsqueda.
- radius: radio de búsqueda en metros (máximo 50 000 metros).
- type: tipo de establecimiento a buscar.
- query: búsqueda por texto (ejemplo: hoteles en Quito).
La llamada a la URL de la API de Google Place admite más campos de los anteriormente
mencionados. Cabe recalcar que en la solicitud si se usa el parámetro “type” no se puede
usar el parámetro “query”.
El siguiente fragmento de código muestra el método JavaScript encargado de recuperar
esta lista de sitios directamente de la API de Google Place:
showPlaces(keyToSearch, isCustomText, location) {
var requestUrl = '';
if (isCustomText == true) {
requestUrl =
'https://maps.googleapis.com/maps/api/place/textsearch/json?location=' +
location.latitude + ',' + location.longitude + '&query=' + keyToSearch + '&radius=' +
this.state.radio + '&key=' + consts.PLACE_API_KEY + '&language=' + this.state.idioma;
} else {
requestUrl =
'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' +
location.latitude + ',' + location.longitude + '&radius=' + this.state.radio +
'&type=' + keyToSearch.key + '&key=' + consts.PLACE_API_KEY + '&language=' +
this.state.idioma;
}
fetch(requestUrl)
.then(res => res.json())
.then(json => {
if (json.results.length > 0) {
//agregamos los markers del mapa en un array
25
var tmp = [{
latitude: location.latitude,
longitude: location.longitude
}];
json.results.forEach((item) => {
tmp.push({
latitude: parseFloat(item.geometry.location.lat),
longitude: parseFloat(item.geometry.location.lng)
})
});
this.setState({markers: tmp});
} else {
//no se encontraron resultados
}
}).catch(err => {
//ocurrio un error al realizer la consulta
})
}
El método showPlaces recibe tres parámetros keyToSearch, isCustomText y
location los cuales se detallan a continuación:
• keyToSearch: Este parámetro JavaScript puede ser de tipo object o string del
cual se obtiene el tipo de establecimiento o la frase genérica para la búsqueda de los
establecimientos.
• isCustomText: Parámetro booleano en el cual si su valor es true el parámetro
keyToSearch debe ser de tipo string caso contrario el parámetro será de tipo
object.
• location: Objeto JavaScript con la ubicación actual del usuario (latitud y longitud).
El método anterior retorna una respuesta en formato JSON como se muestra a
continuación:
{
"html_attributions" : [],
"results" : [
{
"geometry" : {
"location" : {
"lat" : -33.870775,
"lng" : 151.199025
}
},
"icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/travel_agent-71.png",
"id" : "21a0b251c9b8392186142c798263e289fe45b4aa",
"name" : "Rhythmboat Cruises",
"opening_hours" : {
"open_now" : true
},
"photos" : [
{
"height" : 270,
"html_attributions" : [],
"photo_reference" : "CnRnAAAAF-LjFR1ZV93eawe1cU_3QNMCNmaGkowY7CnOf-
kcNmPhNnPEG9W979jOuJJ1sGr75rhD5hqKzjD8vbMbSsRnq_Ni3ZIGfY6hKWmsOf3qHKJInkm4h55lzvLAXJVc
-Rr4kI9O1tmIblblUpg2oqoq8RIQRMQJhFsTr5s9haxQ07EQHxoUO0ICubVFGYfJiMUPor1GnIWb5i8",
26
"width" : 519
}
],
"place_id" : "ChIJyWEHuEmuEmsRm9hTkapTCrk",
"scope" : "GOOGLE",
"alt_ids" : [
{
"place_id" : "D9iJyWEHuEmuEmsRm9hTkapTCrk",
"scope" : "APP"
}
],
"reference" : "CoQBdQAAAFSiijw5-cAV68xdf2O18pKIZ0seJh03u9h9wk_lEdG-
cP1dWvp_QGS4SNCBMk_fB06YRsfMrNkINtPez22p5lRIlj5ty_HmcNwcl6GZXbD2RdXsVfLYlQwnZQcnu7ihkj
Zp_2gk1-fWXql3GQ8-1BEGwgCxG-eaSnIJIBPuIpihEhAY1WYdxPvOWsPnb2-
nGb6QGhTipN0lgaLpQTnkcMeAIEvCsSa0Ww",
"types" : [ "travel_agency", "restaurant", "food", "establishment" ],
"vicinity" : "Pyrmont Bay Wharf Darling Dr, Sydney"
},
...
],
"status" : "OK"
}
Al final de la iteración #1 se obtiene el primer prototipo de la aplicación NearbyFind la
cual permite elegir el idioma de la aplicación, seleccionar un tipo de establecimiento o
ingresar un texto de búsqueda, mostrar en un mapa los resultados obtenidos de la API de
Google Place, mostrar en una pantalla información detallada de un sitio o establecimiento,
agregar nuevos sitios a la base de datos de Google Place.
Figura 3.1 Prototipo #1 de la aplicación NearbyFind.
27
3.3.2. Iteración #2
Después de realizar algunas pruebas de usabilidad y rendimiento del prototipo #1
mostrado en la figura 3.1 con usuarios reales ajenos al proyecto NearbyFind se obtuvieron
los siguientes resultados:
• En Android, la API Geolocation de React Native tarda demasiado en obtener la
ubicación del usuario.
• La pantalla con la lista de tipos de establecimientos debería mostrarse como un cuadro
de dialogo en el mapa.
• Cambiar el diseño y la distribución de los elementos visuales en el mapa para mejorar
la experiencia del usuario.
• Mostrar información resumida de los sitios en el mismo mapa con la opción de
mostrarlos en una pantalla con mayor cantidad de información.
Además de los resultados enunciados anteriormente, en esta iteración se eliminó la opción
de “agregar nuevos sitios a la base de datos de Google Place” debido a que Google dará
de baja esta funcionalidad el 30 de junio de 2018.
Las tareas realizadas en esta iteración se detallan a continuación:
3.3.2.1. Obtención de la ubicación del usuario utilizando código Java
Uno de los aspectos fundamentales y que más sobresalen en las aplicaciones móviles es
el rendimiento de la misma. Para reducir el tiempo de espera para que la aplicación
NearbyFind obtenga la ubicación del usuario en esta iteración se desarrolló un módulo
nativo para Android utilizando código Java el cual permite detectar si el GPS del
dispositivo esta encendido y obtener la ubicación del usuario de manera periódica.
El código Java de este módulo nativo para Android se encuentra en el ANEXO C.
El siguiente fragmento de código muestra la lógica de cómo obtener la ubicación usando
código JavaScript:
28
getCurrentLocation() {
if (Platform.OS === 'android') {
GPSAndroid.startUpdatingLocation();
DeviceEventEmitter.addListener(
'locationUpdated',
(result) => {
if (result.status == 200) {
let location = result.location;
if (this.state.init == false) {
this.setState({init: true, location});
//ajustamos el mapa a nuestra posición actual
if (this.map != null) {
this.map.animateToRegion({
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
});
}
} else {
this.setState({location});
}
} else {
//
}
}
);
} else {
var location = {
latitude: -0.1860807,
longitude: -78.4821242
};
if (this.state.init == false) {
this.setState({init: true});
//ajustamos el mapa a nuestra posición actual
this.map.animateToCoordinate({
latitude: location.latitude,
longitude: location.longitude
});
}
this.setState({location, init: true});
}
}
Código de programación para obtener la ubicación del usuario usando el GPS del dispositivo móvil.
29
3.3.2.2. Combinar la pantalla de tipos de establecimientos con la
pantalla del mapa principal
El desarrollo de software puede ser un dolor de cabeza en algunas ocasiones, muchas
veces se debe redefinir la estructura y lógica de un proyecto. En esta iteración se eliminó
la pantalla con los tipos de establecimientos y el filtro de búsqueda los cuales fueron
incluidos en la pantalla del mapa principal de la app como se muestra en la tabla 7.
Iteración #1 tipos de establecimientos y
filtro de búsqueda en una pantalla
individual
Iteración #2 tipos de establecimientos y
filtro de búsqueda en la pantalla del mapa
principal
Tabla 7 Iteración #2 tipos de establecimientos y filtro de búsqueda en el mapa principal de la app.
3.3.2.3. Mostrar un sitio o establecimiento en el mapa principal.
Cuando el usuario realiza una búsqueda mediante tipos de establecimientos o texto los
resultados de esta búsqueda se visualizan en el mapa. Como nueva funcionalidad en esta
iteración se agregó una nueva característica a la pantalla del mapa que permite al usuario
presionar sobre uno de los resultados en el mapa y obtener una vista previa del mismo.
La figura 3.2 muestra esta nueva característica en funcionamiento:
30
Figura 3.2 Vista previa de un establecimiento en el mapa.
3.3.2.4. Obtener y dibujar rutas de viaje
Aquí hacemos uso de la API Google Directions la cual nos permite obtener las rutas
posibles desde un punto de origen hasta un destino mediante transporte privado, público
o viaje a pie.
Para usar esta API se debe hacer una petición a la siguiente URL
https://maps.googleapis.com/maps/api/directions/json?parametros
En la llamada a la URL anterior se debe pasar los siguientes parámetros:
- origin: El punto de referencia para buscar las rutas (latitud y longitud).
- destination: Destino deseado para el cual se buscarán las rutas.
- key: la clave de la API correspondiente a la aplicación (Ver ANEXO A). Esta API nos retorna un JSON similar al que se muestra a continuación del cual el desarrollador
puede obtener varias maneras de cómo llegar a un lugar determinado por distintos trayectos.
{
"status": "OK",
"geocoded_waypoints": [
{
"geocoder_status": "OK",
"place_id": "ChIJ7cv00DwsDogRAMDACa2m4K8",
"types": [
"locality",
"political"
]
},
...
],
"routes": [
{
"summary": "I-40 W",
31
"legs": [
{
"steps": [
{
"travel_mode": "DRIVING",
"start_location": {
"lat": 41.8507300,
"lng": -87.6512600
},
"end_location": {
"lat": 41.8525800,
"lng": -87.6514100
},
"polyline": {
"points": "a~l~Fjk~uOwHJy@P"
},
"duration": {
"value": 19,
"text": "1 min"
},
"html_instructions": "instrucciones en html",
"distance": {
"value": 207,
"text": "0.1 mi"
}
}
],
"duration": {
"value": 74384,
"text": "20 hours 40 mins"
},
"distance": {
"value": 2137146,
"text": "1,328 mi"
},
"start_location": {
"lat": 35.4675602,
"lng": -97.5164276
},
"end_location": {
"lat": 34.0522342,
"lng": -118.2436849
},
"start_address": "Oklahoma City, OK, USA",
"end_address": "Los Angeles, CA, USA"
}
],
"copyrights": "Map data ©2010 Google, Sanborn",
"overview_polyline": {
"points": “…………”
},
"warnings": [],
"waypoint_order": [
0,
1
],
"bounds": {
"southwest": {
"lat": 34.0523600,
"lng": -118.2435600
},
"northeast": {
"lat": 41.8781100,
"lng": -87.6297900
}
}
}
]
}
JSON devuelto por la API de Google Directions.
32
Con la correcta interpretación del JSON devuelto por la API de Google Directions se
agregó la pantalla “Mapa de rutas” la cual muestra en el mapa la ruta de viaje, tiempo
estimado e instrucciones detalladas del trayecto.
Figura 3.3 Pantalla Mapa de rutas.
Al final de la iteración #2 (ver figura 3.3) la aplicación NearbyFind permite realizar
búsquedas desde el mapa de resultados, visualizar información del sitio desde el mapa
actual, obtener y visualizar rutas de viaje.
3.3.3. Iteración #3
Luego de los cambios y nuevas funcionalidades que se agregaron a la aplicación
NearbyFind en la iteración anterior y pasada las pruebas de rendimiento y usabilidad en
esta iteración se define implementar las siguientes nuevas funcionalidades a la app para
hacerla más atractiva al usuario:
• Recuperar la lista de tipos de establecimientos admitidos por la API de Google Place
mediante una petición web.
• Mostrar la ruta de viaje en el mapa de resultados.
33
• Agregar la funcionalidad de ubicación personalizada, la cual permita al usuario
seleccionar su ubicación en el mapa o utilizar la ubicación proporcionada por el GPS.
• Agregar una vista panorámica de la dirección del sitio o establecimiento (fotografías
en 360 grados).
• Integrar UBER a la app de modo que el usuario pueda conocer el costo de viaje,
tiempo estimado y solicitar el servicio de transporte.
3.3.3.1. Recuperar la lista de tipos de establecimientos admitidos
La API de Google Place permite realizar búsquedas de sitios mediante tipos, estos tipos
no muy frecuentemente aumentan o disminuyen, todo según el criterio de Google. Debido
a esto es necesario recuperar esta lista de tipos de establecimientos mediante una petición
web lo cual permitirá realizar actualizaciones en la app sin tener que publicar una nueva
versión de la misma en el Google Play o en el App Store.
La tarea de configurar un servidor web para recupera esta lista de tipos de
establecimientos supondría una tarea excautiva. Afortunadamente Google pone a nuestra
disposición Firebase Cloud Functions la cual nos permite escribir código backend sin la
necesidad de configurar un servidor de nuestro lado.
La aplicación NearbyFind hace una petición web al siguiente enlace para recuperar una
lista de tipos de establecimientos los cuales son usados conjuntamente con la API de
Google Place.
https://us-central1-nearby-find.cloudfunctions.net/getList
La instalación, configuración y uso de Firebase Cloud Functions en la aplicación
NearbyFind se detallan en el ANEXO D.
3.3.3.2. Rutas de viaje en el mapa principal y ubicación personalizada
En esta iteración agregamos nuevas características a la pantalla que contiene el mapa
principal, entre ellas tenemos la opción de visualizar la ruta de viaje desde un origen a un
destino deseado y la capacidad de seleccionar la ubicación del usuario en el mapa cuando
este no quiera que su punto de referencia para las peticiones a la API de Google Place sea
la ubicación obtenida mediante GPS.
34
3.3.3.3. Vista panorámica
Se crea una nueva pantalla que permite al usuario visualizar una navegación en 360
grados (ver figura 3.4) de la dirección de un sitio o establecimiento obtenido al realizar
la búsqueda con la app.
Esta vista panorámica mostrará una pantalla negra cuando no exista una navegación en
360 grados del sitio deseado.
Figura 3.4 Vista panorámica.
3.3.3.4. Integración con la API de UBER
UBER es la empresa más popular de transporte privado en el mundo. La app NearbyFind
incorpora la API de UBER la cual permite a los usuarios conocer cuál es el costo de un
viaje y el tiempo aproximado con UBER sin salir de la aplicación NearbyFind.
El siguiente Fragmento de código muestra cómo comunicarse con la API de UBER desde
la aplicación NearbyFind:
const uber_url =
`https://api.uber.com/v1.2/estimates/price?start_latitude=${params.olat}&sta
rt_longitude=${params.olng}&end_latitude=${params.slat}&end_longitude=${para
ms.slng}`;
fetch(uber_url, {
method: 'get',
headers: {
'Authorization': 'TOKEN 39pFDFHG8fPmTYLipZHBkEaMail1Tgip00mzV49a',
'Accept-Language': this.idioma == 'es' ? 'es_ES' : 'en_US',
'Content-Type': 'application/json'
},
}).then(res => res.json())
.then(json => {
if (json.prices) {
35
this.setState({uber: json.prices});
}
}).catch(err => {
//errores
});
Código de programación para obtener el precio estimado de un viaje con UBER.
El código anterior hace una petición GET a la API de UBER en la cual se pasa como
parámetros el origen del viaje (params.olat y params.olng) y el destino
(params.slat y params.slng).
La figura 3.5 muestra el resultado del código anterior en la pantalla “Detalles del sitio”:
Figura 3.5 Costo y tiempo de viaje obtenidos desde la API de UBER.
3.3.4. Iteración #4
A estas alturas del proyecto la aplicación NearbyFind tiene el flujo navegación mostrado
en la figura 3.6.
36
Figura 3.6 Flujo de la aplicación móvil.
Desde la iteración #1 hasta la #3 la aplicación NearbyFind cuenta con 7 pantallas
conectadas entre sí (ver figura 3.7).
Figura 3.7 Pantallas de la aplicación móvil.
Las funcionalidades de cada pantalla se detallan a continuación:
a) Splash: En esta pantalla se verifica los datos de la app y se identifica si es la
primera vez que el usuario hace uso de la misma.
37
b) Selección de idioma: En esta pantalla el usuario selecciona el idioma de la
interfaz de la aplicación. Si el usuario ya seleccionó anteriormente el idioma esta
pantalla no se mostrará nuevamente.
c) Mapa principal: Esta pantalla se muestra después de que el usuario ha
seleccionado el idioma de la interfaz de la aplicación. Aquí el usuario cuenta con
un mapa de Google en el cual se muestra su ubicación actual, dicha ubicación se
actualiza constantemente. En esta pantalla el usuario realiza la búsqueda de sitios
o establecimientos según un tipo o una frase. Los resultados de búsqueda se
visualizarán en el mapa de tal manera que el usuario pueda interactuar con ellos.
d) Vista panorámica: Esta pantalla se muestra cuando el usuario ha interactuado
con un sitio obtenido desde la búsqueda realizada en el Mapa principal.
e) Detalles del sitio: Esta pantalla se muestra cuando el usuario decide obtener más
información sobre un sitio o establecimiento (fotografías, dirección, horario
laboral, rutas, costo de viaje en UBER, reseñas de los usuarios, etc.) obtenido
desde la búsqueda realizada en el Mapa principal.
f) Ajustes: En esta pantalla el usuario puede cambiar la configuración por defecto
de la app (radio de búsqueda por defecto o el idioma de la interfaz).
g) Mapa de rutas: Esta pantalla se muestra cuando desde la pantalla de “Detalles
del sitio” se ha decidido visualizar una de las posibles rutas desde la ubicación del
usuario hasta el destino deseado.
En esta iteración se concluye que la aplicación NearbyFind está lista para su salida a
producción y publicación en el Google Play (tienda oficial para aplicaciones Android),
se omite la publicación en el App Store debido a que para publicar aplicaciones en esta
tienda se debe pagar anualmente $100.00 además que la aplicación puede tardar hasta 15
días en ser aprobada por Apple para aparecer en el App Store.
La figura 3.8 muestra la aplicación NearbyFind en el Google Play con una calificación
de 4.7 sobre 5.
38
Figura 3.8 Presencia de la app NearbyFind en el Google Play.
39
3.3.5. Iteración #5
Esta iteración es un alcance de la aplicación NearbyFind, luego de que esta fuera lanzada
a producción y se encuentre disponible para su descarga en el Google Play nos
encontramos con una nueva API para recuperar información sobre sitios o
establecimientos la cual fue incorporada de manera exitosa en a la app.
A continuación, detallamos los aspectos fundamentales y más relevantes de la nueva API
incorporada en la aplicación NearbyFind sin entrar en detalles de la configuración y
codificación de la misma.
3.3.5.1. Facebook Place API
La API de Facebook Place permite a los desarrolladores recuperar información sobre
sitios y establecimientos directamente de las páginas que los usuarios de Facebook han
creado en esta red social.
3.3.5.2. ¿Límites de uso de la API de Facebook Place?
Las llamadas a esta API se las puede realizar por medio del SDK para Android, SDK para
iOS, o a través de una petición web.
Esta API permite un número limitado de 200 peticiones por hora según el número de
usuarios registrados en la app, es decir si la aplicación tiene un total de 200 usuarios
registrados se podrá realizar hasta 40 000 peticiones por hora.
3.3.5.3. Login con Facebook desde la app NearbyFind
En esta iteración la aplicación NearbyFind incorpora un inicio de sesión con Facebook,
de esta manera los usuarios que deseen obtener información de sitios o establecimientos
desde Facebook Pages podrán hacerlo desde la app NearbyFind.
3.3.5.4. Facebook Place API en la app NearbyFind
Como resultado de esta iteración se obtiene la aplicación NearbyFind en su versión 2.0
la cual implementa como nuevas características lo enunciado a continuación:
- Una pantalla de inicio de sesión con Facebook.
40
- Un menú lateral en la pantalla del Mapa principal.
- La oportunidad de elegir la fuente de búsqueda (Google Place o Facebook Place).
La figura 3.9 muestra la aplicación NearbyFind en su versión 2.0 con las nuevas
características enunciadas anteriormente.
Figura 3.9 App NearbyFind versión 2.0.
41
Capítulo 4
4. Resultados y Pruebas
4.1. Resultados
Una vez concluida la etapa de desarrollo y codificación de la aplicación móvil
NearbyFind y obtenido una versión de producción de la misma para los sistemas
operativos iOS y Android, hemos obtenido una aplicación móvil multiplataforma con una
apariencia nativa y un rendimiento de alta calidad para dispositivos de gama media y alta.
Las pruebas de llamadas a las APIs de Google Place y Facebook Place realizadas desde
la app NearbyFind arrojaron que la API de Google Place tiene una base de datos más
extensa que la API de Facebook Place API, no obstante, la API de Facebook Place tiene
mayor información disponible sobre de un sitio o establecimiento en cuestión.
La figura 4.1 muestra la ejecución de la aplicación en un dispositivo Samsung Galaxy S8
Plus con Android 8.0 Oreo.
Figura 4.1 Ejecución app NearbyFind en un Samsung Galaxy S8 Plus con Android 8.0 Oreo.
42
La figura 4.2 muestra la ejecución de la aplicación en un dispositivo iPhone 7 Plus con
iOS 10.
Figura 4.2 Ejecución app NearbyFind en un iPhone 7 plus con iOS 10.
43
4.2. Pruebas
Las pruebas de rendimiento y funcionalidad de la aplicación NearbyFind fueron
realizadas con los siguientes dispositivos:
Samsung Galaxy S6 Plus
Características Resultados
Android 6.0 Marshmallow.
3GB de RAM.
32GB de almacenamiento.
Pantalla de 5.5 pulgadas.
La aplicación tiene un rendimiento fluido, los elementos visuales se
muestran con gran calidad.
Retraso en el renderizado de las vistas 500 ms.
Uso de la GPU (Graphics Processing Unit) de 50%.
Samsung Galaxy Tab A6
Características Resultados
Android 5.0.1 Lollipop.
1.5 GB de RAM.
8GB de almacenamiento.
Pantalla de 7 pulgadas.
La aplicación tiene un rendimiento óptimo con ciertos retrasos al
actualizar los elementos visuales, los elementos visuales se muestran
con una calidad aceptable.
Retraso en el renderizado de las vistas 800 ms.
Uso de la GPU de 70%.
Samsung Galaxy S8 Plus
Características Resultados
Android 8.0 Oreo.
4GB de RAM.
64GB de almacenamiento.
Pantalla de 6.2 pulgadas
La aplicación se ejecuta de manera fluida sin bugs ni retrasos, con una
calidad nítida en sus gráficos.
Retraso en el renderizado de las vistas 300 ms.
Uso de la GPU de 40%.
Simulador iPhone 6 Plus
Características Resultados
iOS 11.2
2GB RAM
Pantalla de 5.5 pulgadas
La aplicación se ejecuta de manera regular con algunos bugs y retrasos
al actualizar el contenido de la app. Los gráficos se muestran con gran
calidad.
Retraso en el renderizado de las vistas 700 ms.
Uso de la GPU de 60%.
iPhone 7 Plus
Características Resultados
iOS 11.2
3GB RAM
Pantalla de 5.5 pulgadas
La aplicación se ejecuta de manera fluida. sin bugs ni retrasos, Los
gráficos se muestran con gran calidad.
Retraso en el renderizado de las vistas 300 ms.
Uso de la GPU de 40%.
De las pruebas realizadas en los distintos dispositivos móviles iOS y Android podemos
observar claramente un mejor rendimiento y ejecución de la aplicación NearbyFind en
dispositivos Android 5.0 o superior con 2GB de RAM o superior. En dispositivos iOS se
evidencia claramente un mejor performance de la aplicación en dispositivos iPhone 6 o
en adelante con iOS 9 o superior.
44
Capítulo 5
5. Conclusiones y Recomendaciones
5.1. Conclusiones
• Gracias al modelo de desarrollo incremental la aplicación NearbyFind ha
evolucionado durante el proceso de desarrollo con lo cual se obtuvo sin lugar a dudas
una aplicación móvil multiplataforma que supera su propuesta inicial mediante una
navegación intuitiva, interfaz de usuario simple, gran performance y funcionalidades
adicionales que no se plantearon en el momento de la concepción de la idea inicial
del proyecto.
• Después de una investigación rigurosa se determinó que actualmente React Native es
la mejor opción para desarrollo móvil multiplataforma debido a su fácil aprendizaje,
amplia documentación, gran cantidad de librerías disponibles en la web y el respaldo
incondicional de Facebook a este framework.
• Una vez terminado el desarrollo de la aplicación NearbyFind con el framework React
Native y realizado las pruebas respectivas podemos garantizar que la aplicación se
ejecuta perfectamente en terminales iOS 9 o superior y Android 5.0 o superior.
• El proceso de integración de un mapa de google con el framework React Native fue
una tarea un tanto compleja en el sistema operativo iOS, no obstante, la aplicación
NearbyFind implemente de manera exitosa dos pantallas con un mapa de google en
iOS y Android.
• Una vez terminado el desarrollo de la aplicación NearbyFind se generó de manera
exitosa un instalador producción para Android denominado APK, lamentablemente
en iOS hasta la fecha no es posible distribuir la aplicación para el cliente final sin que
esta sea descargada directamente del App Store.
• La aplicación NearbyFind fue publicada exitosamente en el Google Play y está
disponible para dispositivos Android 4.1 o superior. La publicación de la app en el
App Store no se pudo realizar de manera exitosa debido al no contar con el
presupuesto necesitado para crear una cuenta de desarrollador en el App Store.
45
5.2. Recomendaciones
• La aplicación NearbyFind está disponible para descarga en el Google Play para
versiones de Android 4.1 o superior, pero se recomienda su uso en versiones 5.0 o
superior para un mejor rendimiento de la misma.
• Se sugiere publicar la aplicación en la tienda oficial para iOS (App Store), lo cual no
se realizó por motivos de presupuesto.
• Continuar con el soporte y actualización de la app, agregando nuevas características
a la aplicación para versiones futuras.
• Considerar la opción de vincular la aplicación NearbyFind con otras aplicaciones que
brinden el servicio de transporte privado tales como Cabify, EasyTaxi, Car2Go, etc.
• Recomendamos la investigación de nuevas tecnologías de desarrollo multiplataforma
tales como Flutter (SDK de Google para crear aplicaciones iOS y Android) la cual no
se contempló en el presente proyecto debido a su reciente lanzamiento.
46
BIBLIOGRAFÍA
1. Luis Corral, Andrea Janes, Tadas Remencius. (2012). Potential advantages and
disadvantages of multiplatform development frameworks – A vision on mobile
environments. Recuperado el 24 de 01 de 2018, de ScienceDirect:
https://www.sciencedirect.com/science/article/pii/S1877050912005303
2. Pablo Thomas, Lisandro Delia, Leonardo Corbalan, Germán Cáseres, Nicolás
Galdamez, Alfonso Cuitiño, Juan Fernandez Sosa, Patricia Pesado. (2017).
Análisis de enfoques de aplicaciones para dispositivos móviles. Recuperado el
17 de 02 de 2018, de CIC-Digital:
https://digital.cic.gba.gob.ar/handle/11746/6244
3. Eisenman, B. (2017). Learning React Native: Building Native Mobile Apps with
JavaScript (2 ed.). United States: O'Relly Media Inc.
4. Telerik. (2017). Welcome to NativeScript. Recuperado el 18 de 02 de 2018, de
NativeScript: https://docs.nativescript.org/
5. Santiago, R. (13 de 12 de 2013). 14 Apps para geolocalización: iOS y Android.
Recuperado el 18 de 02 de 2018, de FLIPPED CLASSROOM:
https://www.theflippedclassroom.es/14-apps-para-geolocalizacion-ios-y-
android/
6. BBVAOpen4U. (s.f.). Recuperado el 11 de 03 de 2018, de ¿Qué es una API?:
https://bbvaopen4u.com/es/actualidad/infografia-que-es-una-api
7. Setfree, L. (s.f.). Conociendo Xamarin, la herramienta para desarrolladores
multiplataforma. Recuperado el 24 de 04 de 2018, de Vix:
https://www.vix.com/es/btg/tech/13263/conociendo-xamarin-la-herramienta-
para-desarrolladores-multiplataforma
8. ABC. (25 de Septiembre de 2017). Año 2017: más de 5.000 millones de
usuarios de móviles. Recuperado el 25 de Abril de 2018, de http://www.abc.es:
http://www.abc.es/tecnologia/moviles/telefonia/abci-2017-mas-5000-millones-
usuarios-moviles-201703011345_noticia.html
9. Saya, M. (02 de Junio de 2015). Tecknology Terkini. Recuperado el 02 de Mayo
de 2018, de http://bootstraap.blogspot.com/2015/06/software-development-life-
cycle.html: http://bootstraap.blogspot.com/2015/06/software-development-life-
cycle.html
10. Saya, M. (06 de Junio de 2015). Software Development Life Cycle. Recuperado
el 02 de Mayo de 2018, de http://bootstraap.blogspot.com:
http://bootstraap.blogspot.com/2015/06/software-development-life-cycle.html
11. Developers google. (Abril de 2018). Android studio. Obtenido de
https://developer.android.com: https://developer.android.com/studio/?hl=es-419
47
12. Developer apple. (02 de Mayo de 2018). Tools you’ll love to use. Obtenido de
https://developer.apple.com/: https://developer.apple.com/xcode/ide/
13. Perez Rivas, J. J. (15 de Enero de 2015). Qué es y cómo empezar con Ionic
Framework. Recuperado el 26 de Abril de 2018, de
http://www.phonegapspain.com: http://www.phonegapspain.com/que-es-y-
como-empezar-con-ionic-framework/
14. Diaz, A. (17 de Diciembre de 2014). Como utilizar las API’s de Office 365 en
aplicaciones móviles multiplataformas desarrolladas con Xamarin. Recuperado
el 24 de Abril de 2018, de http://blogs.encamina.com:
http://blogs.encamina.com/desarrollandosobresharepoint/2014/12/17/como-
utilizar-las-apis-de-office-365-en-aplicaciones-moviles-multiplataformas-
desarrolladas-con-xamarin/
15. Ramirez Vique, R. (2016). Métodos para el desarrollo de aplicaciones moviles.
Recuperado el 28 de Mayo de 2018, de https://www.exabyteinformatica.com:
https://www.exabyteinformatica.com/.../Informatica/...desarrollo...moviles/Tecn
ologia.
16. stackshare. (2018). React Native vs. Ionic vs. Xamarin. Recuperado el 10 de 05
de 2018, de https://stackshare.io/: https://stackshare.io/stackups/ionic-vs-react-
native-vs-xamarin
17. Auz Coba, J. R. (Abril de 2016). DISEÑO E IMPLEMENTACION DE UNA
APLICACIÓN MÓVIL PARA EL PROCESO DE RESERVACION DE
HABITACIONES EL HOSTAL SUR. (Proyecto Técnico previo a la obtencion
del título de Inginiero de Sistemas). Auz Coba, Jorge Roberto, Guayaquil,
Guayas, Ecuador. Recuperado el 20 de Abril de 2018
18. Papa Quiroz, E. A. (2013). DISEÑO DE UNA APLICACIÓN MÓVIL PARA
LA CONSULTA ACADÉMICA DE LA FIIS-UTP. (Para el curso de
PROYECTOS DE INGENIERÍA DE SISTEMAS I). Universidad Tecnológica del
Perú, Lima.
19. Delía, L. N. (2017). Desarrollo de Aplicaciones Móviles Multiplataforma.
(Trabajo Final presentado para obtener el grado de Especialista en Ingeniería
de Software). Universidad Nacional de La Plata, Buenos Aires. Recuperado el
17 de 02 de 2018, de CIC-Digital.
20. areatecnologia. (s.f.). Recuperado el 10 de 01 de 2018, de SISTEMAS
OPERATIVOS MOVILES:
http://www.areatecnologia.com/informatica/sistemas-operativos-moviles.html
ANEXOS
ANEXO A: GENERACIÓN API KEY EN GOOGLE CONSOLE DEVELOPER
ANEXO B: INSTALACIÓN REACT-NATIVE-MAPS EN IOS Y ANDROID
ANEXO C: MÓDULO NATIVO GPS PARA ANDROID
ANEXO D: INTEGRACIÓN CON FIREBASE CLOUD FUNCTIONS
ANEXO E: PUBLICANDO LA APP EN GOOGLE PLAY
1
ANEXO A: GENERACIÓN API KEY EN GOOGLE CONSOLE DEVELOPER
Para poder hacer uso de las API de Google se necesita crear el proyecto en Google
Console Developer.
Desde el siguiente enlace https://console.cloud.google.com/?hl=es-419
Las figuras A.1 hasta A.10 muestran el proceso de creación del proyecto:
Figura A.1 Creación de un nuevo proyecto en Google Console Developer. Tomado de: Google Console Developer.
Figura A.2 Creación del proyecto NearbyFind en Google Console Developer.
Tomado de: Google Console Developer.
Una vez creado el proyecto se debe habilitar las APIs que se van a utilizar en el proyecto:
Figura A.3 Habilitar APIs en Google Console Developer. Tomado de: Google Console Developer.
2
Figura A.3 APIs disponibles en Google Console Developer. Tomado de: Google Console Developer.
Las siguientes graficas muestran las APIs habilitadas para la app NearbyFind:
Figura A.4 API Habilitada Maps SDK for Android. Tomado de: Google Console Developer.
Figura A.5 API Habilitada Maps SDK for iOS. Tomado de: Google Console Developer.
Figura A.6 API Habilitada Maps JavaScript API. Tomado de: Google Console Developer.
3
Figura A.7 API Habilitada Places SDK for Android. Tomado de: Google Console Developer.
Figura A.8 API Habilitada Places SDK for iOS. Tomado de: Google Console Developer.
Figura A.9 API Habilitada Directions API. Tomado de: Google Console Developer.
Una vez habilitadas las APIs necesarias, Google nos proporciona una serie de API KEYS
las cuales podemos usar para comunicarnos con las APIs de Google Place, Directions,
etc.
Figura A.10 API KEYS proporcionadas por Google Console Developer para el proyecto NearbyFind.
Tomado de: Google Console Developer.
4
ANEXO B: INSTALACIÓN REACT-NATIVE-MAPS EN IOS Y ANDROID
• Creando un Development Provisioning Profile para iOS
Para desarrollar, compilar y probar nuestras apps en iOS debemos crear un Development
Provisioning Profile, no obstante, si queremos distribuir nuestra aplicación en la App
Store se debe registrar al programa de desarrolladores de Apple por $100 anuales. Por
motivos de presupuesto la aplicación NearbyFind no estará disponible en el App Store
para su descarga.
A continuación, se detallan los pasos para crear un Development Provisioning Profile:
1. Vamos a Xcode > Preferences > Accounts.
Agregamos una nueva cuenta dando clic al botón “+”.
Figura B.1 Agregar una cuneta de desarrollador en Xcode. Tomado de: IDE Xcode.
2. Seleccionamos Apple ID
Figura B. 2 Selección tipo de cuenta para Xcode. Tomado de: IDE Xcode.
5
3. Una vez agregada la cuenta damos clic sobre ella y nos vamos al botón “Manage
Certificates”
Figura B.3 Cuentas vinculadas a Xcode. Tomado de: IDE Xcode.
4. Luego damos clic en el botón “+” y seleccionamos iOS Development.
Figura B.4 Creando un perfil de desarrollador en Xcode. Tomado de: IDE Xcode.
5. En la pantalla principal de Xcode en la pestaña “General” debemos configurar
los siguientes datos:
- Display Name (Nombre de la aplicación).
- Bundle Identifier (identificador único de la app).
- Version (Versión de la aplicación).
- Build (Numero de compilación).
6
6. Después hay que firmar la aplicación con el Development Provisioning Profile
creado anteriormente. Para esto se necesita tener conectado un dispositivo iOS
real por primera vez de lo contrario veremos un error similar al de la figura B.5.
Figura B.5 Error Provisioning Profile en Xcode. Tomado de: IDE Xcode.
Cuando el proceso haya sido exitoso podremos probar nuestra aplicación en dispositivos
físicos y simuladores iOS.
• Instalación react-native-maps en iOS:
Para instalar react-native-maps versión 0.20.0 en iOS se debe contar con un
computador con sistema operativo macOS Sierra 10.12.4 o superior y además tener instalado
CocoaPods.
Para instalar CocoaPods en un terminal ejecutamos el siguiente comando
sudo gem install cocoapods
Luego en la raíz de nuestro proyecto ejecutamos el comando
touch ios/Podfile
El comando anterior creara un archivo Podfile en la carpeta ios de nuestro proyecto.
Luego navegamos a la carpeta ios de nuestro proyecto
cd ios
7
El archivo Podfile debe tener el siguiente código
# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'NearbyFind' do
rn_path = '../node_modules/react-native'
rn_maps_path = '../node_modules/react-native-maps'
pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
pod 'React', path: rn_path, subspecs: [
'Core',
'RCTActionSheet',
'RCTAnimation',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'BatchedBridge'
]
pod 'react-native-maps', path: rn_maps_path
pod 'GoogleMaps'
pod 'react-native-google-maps', path: rn_maps_path
end
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == 'react-native-google-maps'
target.build_configurations.each do |config|
config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
end
end
if target.name == "React"
target.remove_from_project
end
end
end
Luego ejecutamos el comando
pod install
Después de ejecutar el comando anterior se instalarán todas las dependencias necesarias
de react-native-maps, además veremos que se nos ha creado un archivo con extensión
.xcworkspace dentro de nuestra carpeta ios.
Abrimos el archivo .xcworkspace con Xcode
8
Figura B.7 Estructura proyecto ios NearbyFind en Xcode. Tomado de: IDE Xcode.
Luego para usar Google Maps en nuestra app debemos editar el archivo
AppDelegate.m:
Figura B.7 Archivo AppDeletage.m en Xcode. Tomado de: IDE Xcode
En el archivo AppDelegate.m debemos agregar el código necesario para usar Google
Maps de manera nativa en nuestra app
+ @import GoogleMaps; //add this line if you want to use Google Maps
@implementation AppDelegate
...
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+ [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the
api key obtained from Google Console
...
_YOUR_API_KEY_ es una clave proporcionada por google que se debe obtener desde
el siguiente enlace https://developers.google.com/maps/documentation/ios-sdk/get-api-
key
Además, debido a que vamos a hacer uso del GPS y a acceder a la ubicación del usuario
debemos agregar los siguientes permisos en el archivo Info.plist:
- NSLocationAlwaysAndWhenInUseUsageDescription
- NSLocationAlwaysUsageDescription
9
• Instalación react-native-maps en Android
La instalación de la librería react-native-maps versión 0.20.0 en Android es una
tarea más sencilla que su instalación en iOS.
En la carpeta android del proyecto en el archivo android/app/build.gradle se
debe agregar la dependencia tal como se muestra a continuación
...
dependencies {
...
compile project(':react-native-maps')
}
Si el proyecto hace uso de varias librerías las cuales utlizan Google Play Services como
dependencias, para evitar un conflicto de versiones el código anterior deberá ser integrado
de la siguiente manera
...
dependencies {
...
compile(project(':react-native-maps')){
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
compile 'com.google.android.gms:play-services-base:10.0.1'
compile 'com.google.android.gms:play-services-maps:10.0.1'
}
Después en el archivo android/settings.gradle se debe agregar el siguiente
fragmento de código
...
include ':react-native-maps'
project(':react-native-maps').projectDir = new
File(rootProject.projectDir, '../node_modules/react-native-
maps/lib/android')
En el archive android\app\src\main\AndroidManifest.xml se debe agregar el API
KEY obtenido desde Google Console Developer
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
</application>
Por último, en el archivo MainApplication.java se debe importar la librería
import com.airbnb.android.react.maps.MapsPackage;
...
@Override
10
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MapsPackage()
);
}
ANEXO C: MÓDULO NATIVO GPS PARA ANDROID
La app NearbyFind en Android permite obtener en tiempo real la ubicación actual del
usuario gracias a un módulo nativo escrito en Java. Para acceder a las funcionalidades de
este módulo en un proyecto React Native con la ayuda de JavaScript se debe importar la
librería como se muestra a continuación:
Crear un archivo llamado AndroidModules.js con el siguiente código
'use strict';
import {NativeModules} from 'react-native';
module.exports.GPSAndroid = NativeModules.GPSAndroid;
...
El código anterior exporta el modulo nativo “GPSAndroid”.
Importar el modulo en las pantallas necesarias de la siguiente manera
import {GPSAndroid} from '../utils/AndroidModules'
El módulo GPSAndroid cuenta con los siguientes métodos:
- GPSAndroid.init(…): Este método detecta si el usuario tiene activado el GPS de
su dispositivo móvil.
GPSAndroid.init((result) => {
if (result != 'exito' && result != 'result_exito') {
}
});
- GPSAndroid.startUpdatingLocation(): Este método inicia la detección de la
ubicación del usuario por medio del GPS del móvil Android.
- DeviceEventEmitter.addListener(…): Este método se puede definir como un
evento escucha el cual captura de manera periódica la ubicación del usuario.
DeviceEventEmitter.addListener(
'locationUpdated', (result) => {
if (result.status == 200){}
});
11
- GPSAndroid.stopUpdatingLocation(): Este método detiene la recuperación de
la ubicación del usuario mediante GPS, de esta manera se puede liberar recursos
en la app.
La clase Java con el código del módulo nativo GPSAndroid se muestra en un snippet
(partes reusables de un código) alojado en Github en el siguiente enlace:
https://gist.github.com/MorochoRochaDarwin/6cc5adae482a7125d5a8710016f026dd
ANEXO D: INTEGRACIÓN CON FIREBASE CLOUD FUNCTIONS
Las actualizaciones de contenido de una aplicación móvil deben ser lo más simple posible,
tratando de evitar enviar a la tienda una solicitud para que se publique una nueva versión de una
aplicación, más aún cuando se trata de actualizar contenido o datos que pueden ser recuperados
con una simple petición http.
La API de Google Place nos permite encontrar sitios y establecimientos cercanos según un tipo
de establecimiento.
Hemos definido la manera de recuperar la información de los tipos de sitios admitidos por la API
de Google Place defendiendo un JSON con un array de objetos con la siguiente estructura:
{
key: 'airport',
value_en: 'airport',
value_es: 'aeropuerto',
icon: 'https://icon.png',
keywords:'aeropuertos, airports'
}
key: Es el tipo de establecimiento que se pasara como parámetro a la petición http para
recuperar los sitios desde la API de Google Place.
value_en: Texto mostrado al usuario de la aplicación móvil cuando el idioma de esta
configurado en inglés.
value_es: Texto mostrado al usuario de la aplicación móvil cuando el idioma de esta
configurado en español.
icon: URL de un icono que representara al tipo de establecimiento en la aplicación.
keywords: palabras clave para filtrar la búsqueda de tipos de establecimientos en la
aplicación.
12
Con la finalidad de evitar la configuración de servidores para crear una API REST propia
la aplicación NearbyFind hace uso de tecnologías de desarrollo web agiles tales como
Firebase Cloud Functions que permite crear APIs con Node.js sin la necesidad de
configurar un servidor propio.
Crearemos un proyecto de Firebase Cloud Functions para recuperar un listado de los tipos
de establecimientos que se mostraran en la pantalla principal de la aplicación NearbyFind.
• Instalación de Firebase Cloud Functions
Debemos asegurarnos que tenemos instalado npm y Node.js en nuestro ordenador y luego
ejecutamos el siguiente comando.
npm install -g firebase-tools
• Creación del Proyecto en Firebase Console
Vamos a la consola de Firebase y creamos un Nuevo Proyecto
Figura D.1 Creación del Proyecto NearbyFind en Firebase. Tomado de: Firebase Console
Luego nuestro ordenador ejecutamos el comando firebase login para ingresar en nuestra
cuenta de Firebase.
En nuestro ordenador creamos una carpeta que será el directorio de nuestro Proyecto de
Cloud Functions, en este caso la llamaremos “nearbyfind_cloud_functions.
Navegamos dentro del directorio “nearbyfind_cloud_functions” y ejecutamos el
comando firebase init functions, inicializara el proyecto de Cloud Functions en nuestro
directorio, con lo cual deberíamos tener la siguiente estructura:
13
Figura D.2 Estructura de un Proyecto Firebase Cloud Functions.
• Codificación
En el archivo index.js que está dentro de la carpeta functions definimos una función
llamada getList() la cual retorna un JSON con la estructura mencionada
anteriormente
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
//lista con los tipos de establecimientos para la API de Google Place
const TYPES = […
];
exports.getList = functions.https.onRequest((request, response) => {
response.send(JSON.stringify(TYPES, null, 3));
});
• Deploy
Para exportar nuestra función getList a producción basta ejecutar el comando
firebase deploy --only functions:getList
Esto nos imprimirá la siguiente URL en consola:
https://us-central1-nearby-find.cloudfunctions.net/getList
14
ANEXO E: PUBLICANDO LA APP EN GOOGLE PLAY
1. Accedemos a la cuenta de desarrollador de Google Play desde el siguiente enlace
https://play.google.com/apps/publish/?hl=es-419
2. Damos click en el botón “CREAR UNA APLICACION”
Figura F.1 Google Play Console. Tomado de: Google Play Console
3. Seleccionamos el idioma y definimos el nombre de la app
Figura F.2 Nombre de la app para Google Play. Tomado de: Google Play Console
4. Definimos una descripción corta y una larga para la app
Figura F.3 Ficha publica de la app NearbyFind. Tomado de: Google Play Console
15
5. Subimos algunas capturas de pantalla de la app, el icono y un banner
Figura F.4 Capturas de la app NearbyFind. Tomado de: Google Play Console
6. Elegimos el tipo de aplicación y la categoría
Figura F.5 Tipo y categoría de la app NearbyFind. Tomado de: Google Play Console
7. Proporcionamos una URL con la política de privacidad
Figura F.6 Política de privacidad de la app NearbyFind. Tomado de: Google Play Console
16
8. Guardamos la información como un borrador
9. Generación de un apk en modo de producción para subirlo a Google Play
Dentro del proyecto React Native tenemos las carpetas ios y android. Abrimos la carpeta Android
con el IDE Android Studio.
Figura F.7 Protecto NearbyFind en Android Studio. Tomado de: IDE Android Studio
Limpiamos el proyecto dando clic en Build > Clean Project, después clic en Build > Rebuil
Project. Ejecutamos la app desde Android Studio para asegurarnos que tenemos la última versión
de la misma.
Build > Generate Signed APK
Figura F.8 Generación APK de produccion en Android Studio. Tomado de: IDE Android Studio
Clic en “create new”
17
Figura F.9 Creacion de un keystore de produccion en Android Studio. Tomado de: IDE Android Studio
Creamos un nuevo keystore
Figura F.10 Datos del nuevo keystore en Android Studio. Tomado de: IDE Android Studio
Figura F.11 Seleccionando un keystore en Android Studio. Tomado de: IDE Android Studio
18
Figura F.12 Selección del directorio para los APKs. Tomado de: IDE Android Studio
Esto generara tres archivos .apk la cual es una versión de producción instalable de la aplicación
Figura F.13 APKs generados por Android Studio. Tomado de: IDE Android Studio
Volvemos al sitio web para publicar aplicaciones y nos vamos a “Versiones de la app” y en la
sección de Producción clic en el botón “ADMINISTRAR”
19
Figura F.14 Vesiones de la app NearbyFind. Tomado de: Google Play Console
Clic en “CREAR VERSIÓN”
Figura F.15 Creación nueva vesrión para la app NearbyFind. Tomado de: Google Play Console
Subimos los archivos .apk dando clic en el botón “EXAMINAR ARCHIVOS”
Figura F.16 Formulario para subir los APKs de la app. Tomado de: Google Play Console
20
Figura F.17 APKs subidos de la app NearbyFind. Tomado de: Google Play Console
Damos un nombre a la versión y una descripción corta sobre la versión subida de la app y luego
clic en “GUARDAR” y luego en “REVISAR”.
Figura F.18 Detalles de la versión de la app NearbyFind. Tomado de: Google Play Console
Vamos a la pestaña “Ficha de Play Store” y luego click en el enlace “calificación de contenido” y
llenar la encuesta para que Google clasifique la app.
Figura F.19 Clasificación de contenido de la app NearbyFind. Tomado de: Google Play Console
Después de llenado el cuestionario obtemos la clasificación de la app la cual se visualiza en la
figura F.20.
Figura F.20 Clasificación aplicada a la app NearbyFind. Tomado de: Google Play Console
luego en la pestaña precio y distribución definimos el precio de la app y los países que estará
disponible.
21
Figura F.21 Precio y distribución de la app NearbyFind. Tomado de: Google Play Console
Volvemos a versiones de la app y editamos la versión subida previamente, damos clic en el botón
“REVISAR” y luego en “INICIAR LANZAMIENTO DE VERSIÓN EN PRODUCCIÓN”
Figura F.22 Inicio lanzacmiento de la app NearbyFind en Google Play.
Tomado de: Google Play Console
La figura F.23 muestra a la aplicación NearbyFind disponible en el Google Play
22
Figura F.23 App NearbyFind en Google Play. Tomado de: Google Play
