Web aumentada para planificación de viajes - Grado en Ingeniería Informática - Trabajo Fin de Grado - RUA
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
Web aumentada para
planificación de viajes
Grado en Ingeniería Informática
Trabajo Fin de Grado
Autor:
Alejandro Martínez Castillo
Tutor/es:
Irene Garrigos Fernández
Jose Norberto Mazón López
1
Junio 2021
Web aumentada para planificación de viajes
TRABAJO DE FIN DE GRADO
Autor
Alejandro Martinez Castillo
Tutores
Irene Garrigos Fernández
Departamento de Lenguaje de Sistemas Informáticos
Jose Norberto Mazón López
Departamento de Lenguaje de Sistemas Informáticos
Grado en Ingeniería Informática
Alicante, Junio 2021
2
Índice
1 Introducción .......................................................................................................................... 7
1.1 Objetivos ....................................................................................................................... 7
2 Estado del arte ...................................................................................................................... 8
2.1 Dark Reader ................................................................................................................... 9
2.2 Spotify Genius Lyrics ................................................................................................... 10
2.3 Amazon - Show Seller Info .......................................................................................... 11
2.4 Endless Google ............................................................................................................ 12
2.5 Show Metacritic.com ratings ...................................................................................... 13
2.6 Limitaciones encontradas ........................................................................................... 14
3 Metodología ........................................................................................................................ 14
3.1 Valores......................................................................................................................... 14
3.2 Los principales tipos de metodologías ........................................................................ 15
3.2.1 SCRUM ................................................................................................................. 15
3.2.2 Extreme Programming ........................................................................................ 15
3.2.3 Kanban................................................................................................................. 15
3.3 Sistema de control de versiones ................................................................................. 16
3.4 Tecnologías.................................................................................................................. 17
3.4.1 jQuery .................................................................................................................. 17
3.4.2 Mapbox ............................................................................................................... 17
3.4.3 CORS Anywhere................................................................................................... 18
3.4.4 Heroku ................................................................................................................. 19
3.4.5 APIs utilizadas ...................................................................................................... 20
3.4.5.1 Here ................................................................................................................. 20
3.4.5.2 AEMET ............................................................................................................. 23
3.4.6 APIs descartadas.................................................................................................. 27
3.4.6.1 Wikipedia......................................................................................................... 27
3.4.6.2 Open Data Alcoi............................................................................................... 29
3.4.6.3 Renfe Data ....................................................................................................... 30
3.4.6.4 Foursquare ...................................................................................................... 32
3.4.6.5 Yelp .................................................................................................................. 34
3.4.6.6 el-tiempo ......................................................................................................... 36
3.4.6.7 APIs de noticias ............................................................................................... 38
3
4 Herramientas....................................................................................................................... 40
4.1 VSCodium .................................................................................................................... 40
4.2 Git ................................................................................................................................ 42
4.3 GitHub ......................................................................................................................... 42
4.4 Trello ........................................................................................................................... 43
4.5 Google Chrome ........................................................................................................... 44
4.6 Violentmonkey ............................................................................................................ 45
5 Desarrollo de un script para aumentar web turísticas ........................................................ 46
5.1 Arquitectura ................................................................................................................ 48
5.2 Implementación .......................................................................................................... 49
5.2.1 Llamada a la API .................................................................................................. 49
5.2.2 Representar ruta en el mapa .............................................................................. 51
5.2.3 Nuevo elemento menú ....................................................................................... 58
5.2.4 Cargar mapa Mapbox .......................................................................................... 59
5.3 Alcance y delimitación................................................................................................. 61
5.4 Resultado y comparativa ............................................................................................. 63
6 Conclusiones........................................................................................................................ 65
7 Bibliografía .......................................................................................................................... 67
4
Índice de figuras
Ilustración 1. Dark Reader plugin cambiado el estilo a oscuro de la Wikipedia. .......................... 9
Ilustración 2. Script Spotify Genius Lyrics en funcionamiento con una canción de Estopa en
Spotify. ........................................................................................................................................ 10
Ilustración 3. Script Amazon Show Seller Info mostrando detalles de los vendedores. ............. 11
Ilustración 4. Script Endless Google visualizando la segunda página a continuación de la
primera. ....................................................................................................................................... 12
Ilustración 5: Script Show Metacritic mostrando una puntuación justa sobre el juego Hades en
Steam. ......................................................................................................................................... 13
Ilustración 6: Script Show Metacritic mostrando una puntuación injusta sobre la película
Mamma Mia! en su artículo de la Wikipedia. ............................................................................. 13
Ilustración 7: Logo del sistema de control de versiones Git. ...................................................... 16
Ilustración 8: Logo de jQuery. ..................................................................................................... 17
Ilustración 9: Logo de Mapbox. ................................................................................................... 17
Ilustración 10: Mapa de Mapbox representando una ruta (Playa, restaurante y parque
temático) ..................................................................................................................................... 18
Ilustración 11: Logo de Heroku. .................................................................................................. 19
Ilustración 12: Logo de Here. ...................................................................................................... 20
Ilustración 13: Muestra del resultado del ejemplo ..................................................................... 23
Ilustración 14: Logo de AEMET.................................................................................................... 23
Ilustración 15: Muestra de funcionamiento del tiempo y sus llamadas. .................................... 26
Ilustración 16: Logo del ayuntamiento de Alcoi. ......................................................................... 29
Ilustración 17: Logo de RENFE. .................................................................................................... 30
Ilustración 18. Logo de Foursquare. ............................................................................................ 32
Ilustración 19. Logo de Yelp. ....................................................................................................... 34
Ilustración 20. Logo de News API. ............................................................................................... 38
Ilustración 21. Logo de RTVE. ...................................................................................................... 39
Ilustración 22. Logo de Mediastack............................................................................................. 39
Ilustración 23. Logo de Newscatcher. ......................................................................................... 39
Ilustración 24. Logo de Usearch. ................................................................................................. 40
Ilustración 25: Logo del editor VSCodium. .................................................................................. 41
Ilustración 26: Editor VSCodium. ................................................................................................ 41
Ilustración 27: Logo de GitHub. ................................................................................................... 42
Ilustración 28: Muestra de los commits en la página web de GitHub. ....................................... 43
Ilustración 29: Logo de Trello. ..................................................................................................... 43
Ilustración 30: Muestra del tablero Kanban de Trello en mitad del desarrollo. ......................... 44
Ilustración 31: Gráfica de septiembre de 2020 de porcentajes de uso de los navegadores
principales. .................................................................................................................................. 45
Ilustración 32: Logo de Violentmonkey....................................................................................... 45
Ilustración 33. Ejemplo de tablero Kanban en Trello en mitad de un desarrollo. ...................... 47
Ilustración 34. Esquema del funcionamiento de la comunicación completa. ............................ 48
Ilustración 35. Muestra de popup al poner el ratón encima del icono. ...................................... 54
Ilustración 36. Ruta ejemplo dibujada en el mapa...................................................................... 57
Ilustración 37. Muestra de funcionamiento de los resultados de una búsqueda. ..................... 58
Ilustración 38. Menú de la página web con las secciones nuevas añadidas. .............................. 59
5
Ilustración 39. Mapa básica sin ninguna capa adicional. ............................................................ 61
Ilustración 40. Página web de error al no encontrar resultados................................................. 62
Ilustración 41. Página web de bloqueo. ...................................................................................... 62
Ilustración 42. Ejemplo de la sección de gastronomía de alicante turismo. ............................... 63
Ilustración 43. Página con aumento de web sobre la planificación de una ruta en la provincia de
Alicante........................................................................................................................................ 64
Ilustración 44. Página con aumento de web sobre el estado climatológico en la provincia de
Alicante........................................................................................................................................ 65
6
1 Introducción
Cuando alguien desea viajar a algún lugar quiere tener la mejor experiencia posible, para ello es
necesario planificar y organizar lo que se hará durante el viaje [1].
En la actualidad hay una gran cantidad de páginas web que puedes consultar para planificar el
viaje. Pero esto puede llegar a ser un inconveniente, ya sea porque estas webs se centran en
una ciudad o ya sea porque se centran en un tema concreto. Por ello, una persona que esté
pensando en realizar un viaje requiere buscar en multitud de webs distintas para poder
planificarlo adecuadamente, lo que puede resultar engorroso. De hecho, planificar el viaje
debería ser, en sí, una buena experiencia y no requerir de mucho esfuerzo. .
Para tratar este problema y mejorar la experiencia de usuario de una persona que está
planificando su viaje vía web, en este trabajo de fin de grado (TFG) se presenta una propuesta
que hace uso de técnicas de aumentado de la web sobre las propias webs de destinos turísticos.
Estas técnicas consisten mejorar y personalizar páginas web, no en crearlas nuevas desde el
principio, con el objetivo de enriquecer la experiencia del usuario. Para ello se desarrollan
plugins, addons o extensiones que ejecutan scripts en el lado del cliente. No es necesario
cambiar nada del lado del servidor. Con el aumentado de web se puede modificar la web según
los requisitos del usuario final, añadiendo cosas como, eliminar publicidad (bloqueando los
elementos publicitarios del código del cliente), añadir información estadística (añade datos
estadísticos a los vídeos de YouTube para conocer mejor la evolución), cambiar la forma en la
que se representa la información que nos ofrece la página web para mayor comodidad o
accesibilidad (a partir de información, texto, tablas o imágenes por ejemplo, mejorar el
contraste entre el texto y fondo o imágenes más grandes), en el caso que sea un script sobre
una búsqueda se pueden añadir filtros adicionales para mejorar los resultados (si es una
búsqueda en una tienda online, añadir filtros adicionales de precios, vendedores, puntuación
mínima), entre otras.
En concreto, en este TFG se han definido aumentadores para la web de Alicante turismo1, la cual
está centrada en la ciudad de Alicante, con el fin de mejorar la experiencia del usuario. Por lo
que se han añadido opciones para planificar el viaje teniendo en consideración las ciudades
cercanas de la provincia. Esto se ha hecho obteniendo información de APIs para que
complementen a la página web.
1.1 Objetivos
A continuación se describen los objetivos que se persiguen en este TFG:
1. Diseñar un plugin de navegador de internet que aumente las características de una
página web, para que facilite una planificación y organización de un viaje ampliando y
añadiendo nueva información de ciudades cercanas a la de la página web.
1
https://www.alicanteturismo.com/
7
2. Investigación sobre APIs, para encontrar cuál de ellas es la que mejor se amolda a las
necesidades del proyecto.
3. Estudiar y aprender las técnicas de aumentado de la web para ponerlas en práctica de
manera adecuada. Ya sea mejorando la información que nos ofrece la página web o
creando nuevas secciones de ampliación.
4. Emplear metodologías ágiles para el desarrollo del proyecto, con las que nos
organicemos para poder enfrentar cualquier problema o cambio de característica del
script.
Objetivos secundarios:
1. Este script se podría adaptar a otras webs, ya que las llamadas a las APIs ya estarían
completas, y habría que adaptar el apartado de como introducir los nuevos datos en la
web destino, imitando su estilo de página web para que sea lo menos intrusivo posible.
2 Estado del arte
En este apartado se hace una búsqueda de plugins o scripts en las distintas plataformas de
distribución digital, similares al realizado en este TFG, para poder observar el potencial de las
técnicas de aumento de web.
Para encontrar estos plugins o scripts, se pueden buscar en tiendas digitales como Chrome Web
Store2, Firefox Browser Addons3 o Userscript.Zone4 entre otros. Las dos primeras ofrecen plugins
nativos al navegador respectivamente y la tercera opción es un buscador de scripts que engloba
distintas webs como Greasy Fork5 y OpenUserJS6 donde se publican scripts de usuarios que la
mayoría dependen de un gestor de scripts para ser ejecutado y puesto en funcionamiento, estos
gestores se verán más adelante.
A la hora de buscar scripts similares al realizado en este TFG, no se ha encontrado ninguno
orientado al dominio turístico, debido a que son scripts muy específicos y los scripts suelen estar
en otro ámbito donde tengan un uso más habitual. Por lo que se han buscado scripts de aumento
de web para ver las técnicas usadas y su potencial.
2
https://chrome.google.com/webstore/category/extensions?hl=es
3
https://addons.mozilla.org/es/firefox/extensions/
4
https://www.userscript.zone/
5
https://greasyfork.org
6
https://openuserjs.org/
8
2.1 Dark Reader
Dark Reader7 es una extensión para navegador que permite cambiar al modo oscuro cualquier
página.
Además, puedes configurar el modo oscuro para distintos tonos, más contraste o brillo, y
también cambiar la fuente de la letra para una mayor accesibilidad y comodidad para la vista del
usuario.
Ilustración 1. Dark Reader plugin cambiado el estilo a oscuro de la Wikipedia.
7
https://darkreader.org/
9
2.2 Spotify Genius Lyrics
Spotify Genius Lyrics8 es un userscript que cuando escuchas música en Spotify en el navegador,
muestra en una sección lateral la letra de la canción, en concreto de la página de Genius,
conocida por tener una cantidad enorme de letras de canciones de todos los idiomas.
Al reproducir cualquier canción, el script realiza una petición a Genius para que le devuelva la
letra y esta sea mostrada en su sección.
Ilustración 2. Script Spotify Genius Lyrics en funcionamiento con una canción de Estopa en Spotify.
8
https://greasyfork.org/es/scripts/377439-spotify-genius-lyrics
102.3 Amazon - Show Seller Info
Amazon - Show Seller Info9 es un script para la tienda online Amazon. Amazon permite que otros
vendedores pongan sus productos en la página web, a cambio de una tarifa que se lleva Amazon
por tenerlos en su plataforma.
Un mismo producto puede tener varios vendedores, este script muestra el nombre, país y
puntuación del vendedor del cual se muestra el precio, que suele ser el más barato del producto
en cuestión.
Ilustración 3. Script Amazon Show Seller Info mostrando detalles de los vendedores.
9
https://greasyfork.org/es/scripts/402064-amazon-show-seller-info
112.4 Endless Google
Endless Google10 es un script sencillo que hace que cuando busques en Google cualquier cosa,
en vez de tener que clicar para ver los resultados de la siguiente página, se auto cargan debajo,
simulando este efecto de desplazamiento infinito que hay en multitud de páginas web pero que
el buscador de Google aún no tiene.
Ilustración 4. Script Endless Google visualizando la segunda página a continuación de la primera.
10
https://openuserjs.org/scripts/tumpio/Endless_Google
122.5 Show Metacritic.com ratings
Show Metacritic.com ratings 11es un script que muestra la puntuación de Metacritic, página web
donde se recopila reseñas de los usuarios y críticos sobre libros, películas y videojuegos entre
otros.
Ilustración 5: Script Show Metacritic mostrando una puntuación justa sobre el juego Hades en Steam.
El script muestra un cuadro pequeño en la parte inferior izquierda de la ventana del navegador
donde muestra de manera resumida la puntuación y el título de la obra en cuestión. En el caso
de que no se encuentre, se puede teclear “meta” y aparece un buscador donde indicas el
nombre y realiza una búsqueda, pudiendo seleccionar el resultado correcto.
El script está disponible en multitud de páginas web, como Steam, Wikipedia, Prime video, etc.
Ilustración 6: Script Show Metacritic mostrando una puntuación injusta sobre la película Mamma Mia! en su artículo
de la Wikipedia.
11
https://openuserjs.org/scripts/cuzi/Show_Metacritic.com_ratings
132.6 Limitaciones encontradas
Por lo general los scripts son desarrollados para ofrecer alguna mejora o aumento en una web
concreta. Si se observa el código de los scripts, por ejemplo, se ve que no son largos, esto es
porque se centran en añadir una nueva característica o mejorarla.
También por no depender de otras páginas web o APIs, los propietarios de la web no desarrollan
nada con APIs que no sean contraladas por ellos, por ejemplo, en el caso de la Spotify Genius
Lyrics, la funcionalidad de mostrar la letra de la canción como lo hace el script es muy poco
problema que lo hicieran los desarrolladores de Spotify.
No intentan cambiar el comportamiento completo de alguna web en su totalidad, si no que
suelen añadir alguna característica que no se plantearían los propietarios de dicha web. Aunque
también algunas de estas mejoras que se crean, cuando se vuelven populares pueden ser
desarrolladas por los propietarios para que sea nativo. Por ejemplo, la plataforma de
distribución digital Steam, antes no tenía sección de reseñas ni se podía puntuar los videojuegos,
era solo una tienda con información del videojuego. Actualmente si que dispone de la capacidad
de crear tus reseñas y leer las de otros usuarios, por el que el script antes comentado, Show
Metacritic.com ratings, ya no sería de tanta utilidad.
3 Metodología
El desarrollo del TFG se ha realizado usando técnicas de las metodologías ágiles. Todos los tipos
de metodologías ágiles se guían por los valores y principios del manifiesto ágil [2].
3.1 Valores
Los valores pueden resumirse en:
1. Tener una buena comunicación con el equipo, con buena confianza y compromiso. Además,
este valor puede promoverse con reuniones cortas como las dailys que se realizan en SCRUM o
con Pair Programming como en la metodología ágil de Extreme Programming.
2. Se debe realizar software que funciona, o que proporciona valor. Este valor puede medirse en
dinero, o en calidad de código, donde un código claro y bien hecho, es mejor que una
documentación exhaustiva sobre este. Ejecutar los tests de la característica nueva añadida lo
antes posible para poder corregir los bugs cuanto antes.
3. Importancia en colaborar con el cliente, en vez de negociar un contrato fijo, porque, esto
limita a la hora de trabajar. Es mejor ser flexible y poder evolucionar con el cliente, a la vez que
se le va enseñando código funcional de partes del producto final. Así, si se comenten fallos a la
hora de describir requisitos, no son graves, y se puede corregir o cambiar.
4. El plan general de desarrollo debe ser flexible y adaptable a cambios. Esto se consigue
haciendo que las iteraciones del plan sean más cortas. Revisar y comprobar al final de la iteración
las características desarrolladas en el código, para ver si hay algo que mejorar como equipo.
143.2 Los principales tipos de metodologías
3.2.1 SCRUM
En SCRUM se aplican unas reglas en base a unos principios y valores ágiles. Este conjunto de
prácticas se orienta sobre todo a la organización de un equipo [3].
En el equipo se otorgan roles a cada persona, esto hace que cada integrante tenga unas
responsabilidades sobre determinadas tareas. También se busca buena comunicación y
compañerismo, realizando reuniones diarias y de retrospectiva en los finales de los sprints.
Al ser tan orientada a un equipo, en este TFG siendo un único desarrollador, no se ha aplicado
esta metodología ágil al completo.
3.2.2 Extreme Programming
En Extreme Programming además de compartir muchos valores y principios con los otros tipos
de metodologías, se hace especial énfasis en los tests TDD (Test Driven Development) [4].
TDD consiste en realizar los escribir los tests antes de desarrollar el código, y no de la forma
habitual, que es después de terminar el código y comprobar que no hay errores. Al hacerlo de
manera invertida. Esto hace que solo se escriba código para pasar los tests, siendo que si los
pasa ya estaría terminada la característica.
En EP también se usa la práctica de Pair Programming, técnica donde dos personas se sientan a
programar una característica, consiguiendo beneficios como, mantenerse centrados, clarificar
las ideas o evitar el bloqueo individual. Esta práctica no se ha podido ejecutar al necesitar a
alguien más para realizarla.
El script al no usar test por la imposibilidad de implementar test automáticos, junto con técnicas
orientas a equipos como el Pair Programming, tampoco se usan todas las técnicas
3.2.3 Kanban
Kanban es un método para mejorar los procesos en las metodologías ágiles [5]. Se usa un tablero
que representa los estados o las distintas fases de un proceso o tarea. Los estados o fases se
indican con columnas en un tablero, cada elemento es una pieza que según su fase se mueve de
una columna a otra. A estas columnas se le asigna un límite, que quieres decir que no puede
haber más elementos del que indica este límite. Puede haber más fases, pero las principales y
básicas son tres:
• ToDo (Cosas que hacer), en esta columna se presentan todas las tareas o características
que se desea trabajar en ellas. No tiene límite de tarea por columna.
• In Progress (En marcha), en esta columna están las tareas que se realizan actualmente,
Kanban propone un límite para esta columna, así que no se puede poner más tareas
hasta que no se muevan algunas de las que están aquí a la siguiente columna.
15• Done (Terminadas), en esta columna están todas las tareas totalmente finalizadas y que
han sumado valor al producto. A diferencia de SCRUM usando también un tablero.
Puede haber sub-columnas o columnas adicionales en el tablero, como, por ejemplo, en la
columna In Progress, puedes poner una sub-columna para las tareas que están en testing y así
se puede añadir más tareas a desarrollar. También como columna adicional podría estar la fase
de análisis o diseño de la característica, en una posición antes de la de desarrollo
Al igual que SCRUM también tiene un tablero con tareas o características a desarrollar, pero en
Kanban no se reinician al final de cada iteración. Esto hace que el tablero Kanban sea más visual
con el desarrollo general del trabajo presentado.
Principalmente se ha empelado esta metodología ágil porque al ser una sola persona en el
equipo, es muy fácil organizarse con el tablero, presentando todas las tareas, y seleccionándolas
para trabajar en ellas, así como no empezar ninguna otra hasta que se finalice con las que se
está trabajando.
3.3 Sistema de control de versiones
Un sistema de control de versiones es un conjunto de instrucciones para la gestión de los
múltiples cambios que se hacen en el desarrollo de un producto. Un SCV ofrece entre otras
cosas, almacenamiento de los archivos del proyecto a gestionar, posibilidad de cambios sobre
estos archivos y un registro histórico de es tos cambios sobre cada archivo, con la posibilidad de
revertirlos.
El sistema de control de versiones para el desarrollo de cualquier tipo de programación es
indispensable. En este desarrollo se ha usado Git para la gestión del código. Además, para alojar
el proyecto en una plataforma se ha usado GitHub
Ilustración 7: Logo del sistema de control de versiones Git.
163.4 Tecnologías
3.4.1 jQuery
JQuery12 es una biblioteca de JavaScript con la principal intención de simplificar la manera de
interactuar con el HTML. Esta biblioteca nos ayuda mucho con la manipulación del árbol DOM,
el manejo de eventos y sobre todo la manera sencilla que nos ofrece para hacer unas llamadas
a las APIs con Ajax, algo que para el desarrollo de este script ha sido un favor grandísimo, por la
cantidad de pruebas con APIs que se han realizado.
Ilustración 8: Logo de jQuery.
Al ser un script ejecutado sobre la página web, no podemos elegir la versión que queramos,
dependemos de la que ya hay, esto lo descubrí porque al cargar mi versión de jQuery, dejaban
de funcionar zonas o elementos nativos de la página web.
3.4.2 Mapbox
Mapbox 13es una biblioteca de JavaScript que nos permite insertar mapas en la página web.
Mapbox tiene además otras herramientas como SDKs para soporte de los mapas en teléfonos
móvil Android y iOS. Pero en este caso se usa la biblioteca de JavaScript para renderizar el mapa
en la página web.
Ilustración 9: Logo de Mapbox.
El mapa es interactivo para que el usuario se mueva a través de él, buscando lo que le interesa.
Está compuesto por capas de renderizado, cada una de estas tiene una función concreta que se
dibujará en el mapa. Algunas de estas capas son básicas, como, las que dibujan la topografía, las
calles o el nombre de estas.
12
https://jquery.com/
13
https://www.mapbox.com/
17Gracias a su personalización, se ha podido editar para un uso u otro el mismo mapa, como por
ejemplo a la hora de mostrar puntos y su ruta por carretera de un sitio a otro con sus iconos y
un mapa del tiempo a nivel de provincia donde con su icono te indica el tiempo actual y un
cuadro de texto con la previsión de las siguientes cuatro horas.
Ilustración 10: Mapa de Mapbox representando una ruta (Playa, restaurante y parque temático)
También existe otras APIs de mapas famosas, como Google Maps u Open Street Maps. Pero
Google Maps, aun indicando que es gratis, es requerido poner una tarjeta de crédito para hacer
uso de la API, aunque no mandarán ningún cobro, si eliges la tarifa gratuita. Open Street Maps
es una opción gratuita muy viable pero no pude personalizarlo como quería. Por lo que la
decisión final fue Mapbox, con la que solo necesitas registrarte en la sección de desarrolladores
y obtener una key para hacer las llamadas a la API desde el código.
3.4.3 CORS Anywhere
CORS Anywhere14 es un proxy que añade los headers de CORS a las peticiones de algún recurso
en APIs que están en otro dominio. CORS (Cross Origin Resource Sharing) es un mecanismo de
seguridad, este mecanismo hace que desde un dominio A no puedas obtener datos o
información de un dominio B, si no estas autorizado para ello. Por defecto viene activado para
que no puedas sufrir ataques mediante la ejecución de un script por terceros sin tu permiso.
14
https://github.com/Rob--W/cors-anywhere
18El funcionamiento de este proxy es simple. Hay que ponerlo de prefijo en cualquier URL que se
necesita de su uso, por ejemplo, si se necesitase para la API de la Wikipedia:
https://cors-anywhere.com/https://wikipedia.com
Al poner de prefijo, esto hace que llamada a Wikipedia se haga a través el proxy. Los pasos que
haría serian estos:
1. Hace la petición a https://wikipedia.com.
2. Recibe la respuesta de https://wikipedia.com.
3. Añade la cabecera “Access-Control-Allow-Origin” a la respuesta.
4. Pasa esta respuesta, con la cabecera añadida, a la petición
Ahora el navegador permite al script el correcto funcionamiento de la petición y puede recibir
la respuesta a la página deseada. Esta respuesta ya depende de lo que haya buscado con la
petición.
Tanto para hacer pruebas como para la versión final, se necesita llamar a varias APIs durante el
desarrollo del script. Que cada una esté configurada de una forma u otra y que tengan
documentación o no, esto soluciona muchos problemas en lo que se refiere a la comunicación
y en la obtención de datos o información con la API
3.4.4 Heroku
Heroku15 es una plataforma de computación en la nube. Siendo un servicio gratuito, nos
permite subir aplicaciones a su nube, y Heroku la despliega y nos da una URL para poder usar
la aplicación como servicio remoto.
Ilustración 11: Logo de Heroku.
La solución anterior al problema de CORS nos lleva al siguiente problema. Para probar el CORS
Anywhere, el creador de este tiene un endpoint de prueba para que se use por cualquiera, al
principio del desarrollo lo usaba, pero con el tiempo observe que entre las 12 y 14 del medio
día, este endpoint se caía y no se podía acceder durante media o una hora. Por lo que la
solución fue replicar su endpoint subiendo nuestro propio CORS Anywhere a Heroku. Esto
15
https://www.heroku.com/
19además nos permite configurarlo como queramos, en este caso, no ha sido necesario porque
ya viene preparado para funcionar solo con lanzarlo.
El servicio que nos ofrece Heroku tiene distintos precios para distintas necesidades, pero en este
caso el plan gratuito para aplicaciones no comerciales es ideal. Como desventaja se podría decir
que, la tarifa gratuita hace que el endpoint se apague a la media hora de no recibir peticiones,
esto tiene como efecto negativo que si esta apagado, tarda un poco en procesar la petición, pero
una vez la finaliza, las siguientes peticiones ya funcionan de la manera habitual.
3.4.5 APIs utilizadas
Aquí vamos a comentar las APIs que finalmente son las que se usan de todas las que se probaron.
3.4.5.1 Here
Here Technologies 16es una empresa que desarrolla software para la representación de mapas,
geocodificación, entre otras cosas. La intencionalidad de usar esta API es que nos brinde puntos
de interés personalizados según unos criterios de búsqueda.
Ilustración 12: Logo de Here.
Para poder usarla es necesario registrarse en la sección de desarrolladores de Here developers17.
Una vez registrado nos propones tres tarifas distintas. Solo comentaremos la que se ha usado,
que en este caso es la gratuita. Nos permite suficientes “transacciones” al mes, unas 250.000, el
resto de las características de esta tarifa va orientado a los otros servicios que ofrece, como el
almacenamiento para usuarios o renderizado de mapa preciso por ciudad.
Para poder realizar peticiones a la API, es necesario genera un api key. Para generarla solo es
necesario, una vez registrado, crear una app, que es como un proyecto, y ahí ya te indican la api
key que debes usar.
Llamada usada en el script como ejemplo:
16
https://www.here.com/
17
https://developer.here.com/
20https://discover.search.hereapi.com/v1/discover?in=circle:' + latitud +
',' + longitud + ';r=1000' + '&limit=100' + '&q=' + palabra_buscar +
'&apiKey=' + api_key
Hasta el interrogante todo es igual, el resto son argumento, que significan los siguiente:
in=circle -> Este argumento es para que la búsqueda se haga en forma de circulo, es
necesario indicar a continuación un punto como centro de este círculo.
latitud + longitud -> Centro del circulo donde se buscará los puntos de interés.
r=1000 -> r es el radio del círculo de búsqueda, en este caso 1000 metros.
limit=100 -> limit es la cantidad de resultados que nos devuelve, el mínimo y máximo de este
valor es 1 y 100 respectivamente.
q=palabra_buscar -> es la palabra que se buscará en la petición, mostrando solamente
resultados que tenga esta palabra, ya sea en el nombre, descripción o categoría entre otras
definiciones del punto de interés. Como ejemplo podría ser la palabra “museo”.
apiKey -> Es la api key que hemos generado, y nos da autorización para hacer las peticiones al
servidor de Here
La respuesta a la petición es un JSON que contiene todos los puntos de interés encontrados con
la palabra buscada, y que además están dentro del circulo, siempre y cuando no haya
sobrepasado el límite indicado en la petición.
Este JSON es una respuesta de buscar la palabra museo en las coordenadas de Alicante ciudad,
escogiendo el primer elemento del array resultado:
{
"title": "Museu Nova Tabarca",
"id": "here:pds:place:724eyzdj-02dac11cba2b4405883f4e202571b5e7",
"ontologyId": "here:cm:ontology:museum",
"resultType": "place",
"address": {
"label": "Museu Nova Tabarca, Plaça de la Santíssima Faç, 8, 03002
Alicante (Alicante), España",
"countryCode": "ESP",
"countryName": "España",
"stateCode": "VC",
"state": "Comunidad Valenciana",
"county": "Alicante",
"city": "Alicante",
"district": "Casco Antiguo - Santa Cruz",
"street": "Plaça de la Santíssima Faç",
"postalCode": "03002",
"houseNumber": "8"
},
"position": {
"lat": 38.3456,
"lng": -0.48115
},
"access": [
{
21"lat": 38.34562,
"lng": -0.48114
}
],
"distance": 56,
"categories": [
{
"id": "300-3100-0027",
"name": "Museo infantil",
"primary": true
},
{
"id": "300-3100-0028",
"name": "Museo de historia"
}
],
"references": [
{
"supplier": {
"id": "core"
},
"id": "1016938904"
}
],
"contacts": [
{
"phone": [
{
"value": "+34965230287"
}
]
}
]
}
Obteniendo esta información como respuesta podemos destacar los elementos útiles:
title -> Título del elemento.
address -> Dirección del punto de interés, tiene subcampos, por si quieres obtener toda la
dirección entera o componerla por partes. En el script se compuso por partes, porque no es
necesaria saber la provincia, ya que todos los elementos son de la provincia de Alicante. Así que
se muestra solo de Ciudad hacia abajo, calle y número. También sirve para filtrar una vez has
recibido los datos.
position -> tiene los subcampos lat (latitud) y lng (longitud) que corresponden a las
coordenadas. Estas se usarán para pintar en el mapa su icono con información.
categories -> este campo es un array de categorías, mínimo siempre tiene una categoría, y la
primera que aparece es la primaria.
references -> Esta no es útil para mostrar, pero sí para saber de dónde viene la información,
en este caso aparece core, que es de ellos mismos, pero hay casos que la información se
complementa con fuentes de TripAdvisor o Foursquare entre otros.
contacts -> Este campo es un array de elementos para contactar con el punto de interés, en
este caso aparece el teléfono, puede haber más de uno teléfono, así como también suele
22aparecer la página web y el correo electrónico, los cuales también pueden existir más de uno.
También algunos puntos de interés disponen de horario, pero esta información no está
estandarizada y cada horario está en un formato distinto.
Con todos estos campos se compondrán toda la información a la hora de mostrarla, ya sea en el
propio mapa, o en los resultados al usar la función de búsqueda implementada.
Ilustración 13: Muestra del resultado del ejemplo
En esta parte del resultado, no se muestra toda la información, el mapa complementa el resto
de los datos con sus coordenadas y dirección de calle.
La elección definitiva de esta API en vez de las que se comentarán más adelante es que esta
ofrece mucha más información que la otras, además de que a veces es complementada con las
otra directamente, por lo que Here es elección más optima.
3.4.5.2 AEMET
18
AEMET es la Agencia Estatal de Meteorología de España la cual tiene como objetivo ofrecer el
servicio de meteorología a nivel de país. Muestra información de todo tipo como las olas de
calor o frío, la probabilidad de sol, lluvia o nieve entre otros estados del clima.
En la página web sobre la que va a funcionar el script ya muestra el tiempo y temperaturas, pero
a nivel de la ciudad de Alicante. El uso que se propone es a nivel de provincia, mostrar el tiempo
actual por zona y una previsión de las cuatri próximas horas.
Ilustración 14: Logo de AEMET.
Para poder utilizar la API es necesario registrarse en la página de AEMET OpenData19. Una vez
te registrar solicitas la api key, cuando la recibas solo la tienes que añadir a la petición a realizar
para que te de autorización. Al ser del gobierno, es totalmente gratuita.
18
http://www.aemet.es/es/portada
19
https://opendata.aemet.es/centrodedescargas/inicio
23Hay una gran cantidad de opciones de endpoints, cada uno para unas cosas, como, por ejemplo,
obtener el tiempo actual, a nivel de país, comunidad autónoma, provincia o ciudad. También
otras más concretas de olas de frio o calor, tormenta eléctrica o información marítima.
En este caso se usa la llamada de previsión horaria por ciudad. El funcionamiento de la petición
es realizándola al endpoint concreto. Nos responde con una url a la que hay que volver a hacer
la petición (esta url es distinta a la primera). Una vez nos responde esta segunda petición,
obtenemos un JSON con toda la información que buscamos.
Llamada usada en el script como ejemplo:
https://opendata.aemet.es/opendata/api/prediccion/especifica/municipio
/horaria/" + id_ciudad + "?api_key=" + api_key_aemet
Como se puede ver en la url es una predicción, especifica, por municipio, en franja horaria,
además los argumentos que se le indican que significan los siguiente:
id_ciudad -> Esta variable corresponde al identificador de la ciudad, como por ejemplo el de
Alicante, que es 03014.
api_key_aemet -> Esta es la api key que hay que indicar para que nos autorice a realizar
peticiones al servicio.
Una vez realizada, no responde un JSON corto, si sigue el ejemplo de antes, con la petición a la
ciudad de Alicante.
{
"descripcion": "exito",
"estado": 200,
"datos": "https://opendata.aemet.es/opendata/sh/b1315179",
"metadatos": "https://opendata.aemet.es/opendata/sh/93a7c63d"
}
Esta primera respuesta, nos confirma por descripción y estado que ha sido correcta la petición.
Ahora el campo que nos interesa es el de “datos”. Este campo es una url a la que le hacemos
otra petición para que nos responda la información que estamos buscando. Esta url no es
siempre igual, al cabo de unos minutos caduca y no se puede consultar otra vez. Para consultarla
hay que volver a hacer el proceso de petición desde el principio.
Una vez se realiza la petición a la segunda url se obtiene un JSON, este ya sí con los datos que
solicitábamos.
[
{
"origen":{
"productor":"Agencia Estatal de Meteorología - AEMET. Gobierno de
España",
"web":"https://www.aemet.es",
"enlace":"https://www.aemet.es/es/eltiempo/prediccion/municipios/horas/alacan
t-alicante-id03014",
"language":"es",
24"copyright":"© AEMET. Autorizado el uso de la información y su
reproducción citando a AEMET como autora de la misma.",
"notaLegal":"https://www.aemet.es/es/nota_legal"
},
"elaborado":"2021-04-18T12:24:09",
"nombre":"Alicante/Alacant",
"provincia":"Alacant/Alicante",
"prediccion":{
"dia":[
{
"estadoCielo":[
{ "value":"15", "periodo":"09", "descripcion":"Muy nuboso"
},
{ ... }
],
"precipitacion":[
{ "value":"0", "periodo":"08" },
{ ... }
],
"probPrecipitacion":[
{ "value":"25", "periodo":"0814" },
{ ... }
],
"probTormenta":[
{ "value":"15", "periodo":"0814" },
{ ... }
],
"nieve":[
{ "value":"0", "periodo":"08" },
{ ... }
],
"probNieve":[
{ "value":"0", "periodo":"0814" },
{ ... }
],
"temperatura":[
{ "value":"11", "periodo":"09" },
{ ... }
],
"sensTermica":[
{ "value":"11", "periodo":"09" },
{ ... }
],
"humedadRelativa":[
{ "value":"79", "periodo":"09" },
{ ... }
],
"vientoAndRachaMax":[
{ "direccion":["NO"], "velocidad":["5"], "periodo":"09" },
{ "value":"12", "periodo":"09" },
{ ... }
],
"fecha":"2021-04-18T00:00:00",
"orto":"07:21",
"ocaso":"20:41"
},
{ ... },
{ ... }
]
25},
"id":"03014",
"version":"1.0"
}
]
He recortado la respuesta, porque tiene alrededor de unas 2000 líneas. Donde aparecen los
puntos suspensivos “…” son puntos que he puesto para indicar donde hay más información. En
general es información sobre los campos, esta información suele ser de 24 horas, por lo que
añade mucha información, por ejemplo, en el “estadoCielo” nos indica el estado, nuboso,
soleado, etc., pues esta información se replica una vez por hora. También los “…” del final están
sustituyendo a los 2 días siguiente, porque esta predicción es de 3 días, con sus 24 horas cada
día.
Obteniendo esta información como respuesta podemos destacar los elementos útiles:
estadoCielo -> Nos indica mediante texto, como va a estar el cielo y a qué hora. El estado
puede ser entre muchos otros: soleado, nuboso, niebla, llovizna, tormenta, tormenta eléctrica
o nieve.
Ilustración 15: Muestra de funcionamiento del tiempo y sus llamadas.
Además, se hace otra petición adicional que indica de manera escrita la predicción y también
muestra las temperaturas de las ciudades más importantes de la provincia de Alicante.
Un problema que tiene esta API es que entre unas 20 y 30 peticiones nos responde un error con
el mensaje “too many petitions”, esto nos indica que estamos realizando demasiadas
peticiones en poco tiempo. Al cabo de 1 minuto aproximado, nos permite otra vez mandar
peticiones sin que salga el error.
Para este problema, se ha ajustado la cantidad de peticiones al mostrar el tiempo en el mapa.
Porque para saber la predicción meteorológica de una ciudad, hay que hacer dos peticiones, por
lo que más de 15 ciudades no se pueden consultar de manera seguida, pero tampoco puedes
hacer que el usuario cuando quiera consultar el tiempo tenga que esperar 2 minutos para que
cargue el mapa al completo.
26Esta API fue elegida por poder servir la información de las ciudades de Alicante, en
comparación a la API de el-tiempo que se comentará más adelante.
3.4.6 APIs descartadas
En esta sección comentaremos las APIs que se descartaron y el motivo de no haberlas elegido.
Tampoco se puede complementar la información, porque las APIs tienen datos muy parecidos,
en todas cuando buscas por ejemplo los museos, te aparecen los mismos museos, se podría
intentar evitar los repetidos, pero esta información no es del todo igual en todos los sitios,
puesto que en algunos no hay tildes o sí, o directamente están en castellano o valenciano, al ser
los dos idiomas oficiales. También se comprobó por coordenadas, ya que debería ser la misma
coordenada, pero por diferencia escasa tampoco es la misma exactamente, al representarlas en
el mapa difieren de escasos metros o incluso menos de un metro de distancia. Así que la única
solución posible, era elegir solo una de ellas, a continuación, las descartadas.
3.4.6.1 Wikipedia
Mediawiki es la documentación de la API de Wikipedia21 la mayor enciclopedia de internet,
20
formada de manera colaborativa. También tiene un endpoint donde realizar peticiones. Estas
peticiones suelen responder con la página de la Wikipedia del artículo que indiques en la
petición. Pero también puedes realizar otro tipo de peticiones como para realizar un buscador,
gráficos o imágenes.
Llamada a la API realizada en el script, aunque luego se descartase:
https://es.wikipedia.org/w/api.php?origin=*&format=json&action=parse&p
age=Alicante
Antes de la interrogación es siempre igual, a partir de ahí los siguientes argumentos:
origin=* -> el argumento es para que permita conexiones de cualquier sitio.
format=json -> para que el formato de la respuesta sea json.
action=parse -> para que la información que nos devuelva parseada, es decir la información
viene en HTML para que pueda ser representada como el propio artículo en la Wikipedia, es
decir, si coges esta información y la muestras por pantalla, será como ver una copia idéntica del
artículo de la Wikipedia. Gracias a esto, se puede buscar entre los elementos del código HTML y
mostrar lo que te interesa.
page=Alicante -> aquí se indica que artículo de la Wikipedia quieres que te devuelva, en este
caso la página de Alicante.
20
https://www.mediawiki.org/wiki/API:Main_page/es
21
https://es.wikipedia.org/wiki/Wikipedia:Portada
27La respuesta es la siguiente:
{
categories: (22) [{…}, {…},]
displaytitle: "Alicante"
externallinks: (65)
["http://www.aemet.es/es/eltiempo/prediccion/municipios/alacant-
alicante-id03014", ...]
images: (92) ["Escut_d'Alacant_02.svg",
"Escut_d'Alacant_(corona_tancada).svg", ...]
iwlinks: (5) [{…}, {…}, {…}, {…}, {…}]
langlinks: (84) [{…}, {…},]
links: (587) [{…}, {…}, ]
pageid: 300
parsewarnings: []
properties: (2) [{…}, {…}]
revid: 134614399
sections: (62) [{…}, {…}, ]
templates: (129) [{…}, {…}, ]
text: {*: " Son las imágenes que aparecen en el artículo, uno de los posibles usos era mostrar
las imágenes de la Wikipedia, pero es complicado automatizarlo.
sections -> Son las secciones del artículo, para que puedas elegir la información de la que
quieras.
text -> Aquí viene la página entera, esto si lo quieres mostrar parecerá la Wikipedia, mantiene
el formato entero, también puedes buscar por el código algún elemento que te interese, y
mostrarla como artículo de la Wikipedia o ponerle tu estilo.
title -> Para saber cómo se llama el artículo de la Wikipedia.
El motivo de descartarla fue por la imposibilidad de automatizar el proceso de búsqueda por
ciudades, no tiene por qué corresponder el nombre del artículo con el nombre de la ciudad,
algunas veces el nombre es común y pone el nombre de la provincia entre paréntesis, por
ejemplo “San Vicente (Alicante)” por lo que no puedes buscar por San Vicente.
28También puede leer
