IP Api para la Geolocalización con Google Maps (Angular)
Entrada
El problema al que nos enfrentamos consiste en la posibilidad que tienen los usuarios para poder visualizar en una pagina su ubicación en tiempo real.
Para poder llevarlo a cabo se va a utilizar una Api para poder sacar toda la información de la localización a través de un Json. Este Json recoge todos los datos conveniente para poder explotarlo. Todo esto es gracias a la IP que le pasamos por parámetros al Json. Este lo lee, lo interpreta y muestra los datos relevantes.
Otro de los puntos importantes en la aplicación es que el usuario pueda visualizar todos los datos acerca de su ubicación como puede ser la región, país, ciudad, latitud, longitud, etc… Todos estos datos se visualizan en una tabla. Por lo que cualquier IP que le pase le va a facilitar su ubicación.
Por ultimo para poder facilitar al usuario la ubicación vamos a utilizar un componente de Google Maps de angular para poder facilitar al usuario que pueda ver la ubicación pasándole por parámetros del Json la longitud y la latitud al mapa.
Desarrollo
Lo primero como todo en angular es crear el proyecto con ng new nombre-proyecto. Una vez creado el proyecto de Angular hay que instalar el componente de Google Maps para Angular ya que lo que queremos es mostrar la ubicación en una mapa. Esto se hace con «npm install @agm/core». Una vez instalados todos los paquetes abrimos el proyecto en Visual Studio Code.
Vamos a necesitar un servicio para el mapa, para ello lo creamos en App con la extensión «service.ts». Por lo que creamos «mapas.service.ts». En este servicio tenemos que importar Inyectable de @angular/core en la categoría de imports. Esta función viene en el @angular/core e indica que esta clase puede ser inyectada dinámicamente a quien la demande. También importamos HttpClient para que podamos realizar peticiones de cliente a través del protocolo HTTP. En este servicio vamos a declarar una interfaz para poder llamar luego a todos los parámetros de la localización.
En la clase declaramos inyectable para poder utilizar el servicio, también le pasamos al constructor una variable privada de tipo HttpClient y por ultimo creamos una función llamada getLocation en el que coge la variable Http se le pasa la interfaz de Location y por parametros se le pasa la url del json que quieres consultar.
En dicha url que se esta utilizando cuyo nombre es api.ipapi.com se le tiene que pasar por la url la dirección IP esto lo hacemos poniendo check?, y luego hay que pasarle la clave de acceso que te proporciona dicha Api. Cabe recalcar que en otras Apis no hace falta pasarle la Ip ni ninguna clave de acceso.
Después en la parte de app.module.ts hay que importar el modulo de HttpClient y el de AgmCore, declarándolo en los imports posteriormente. En el agmcoremodule del import llamamos al método forRoot y le pasamos la clave de Api que nos proporciona Google. Para esto tenemos que crear un proyecto en Google Cloud Platform. Ahí nos tenemos que crear un clave Api y después habilitar la extensión de Google Maps para JavaScript. Para poder crear la cuenta hay que meter una tarjeta de crédito para poder verificar que eres una persona. Este sistema de Google también tiene un panel de control para monitorear todas las peticiones que haces desde ese clave a un servicio suyo.
Terminado el app.module.ts vamos al app.component.ts en el que tenemos que importar el servicio que hemos creado antes de Maps. En la clase tenemos que declarar todas las variables que vamos a pasar al HTML y indicar de que tipo son. En el constructor se le pasa el servicio de Maps asignándole una variable. Por ultimo en el ngOnInit recorremos todo lo que contiene el object del Json y lo igualamos a las variables que habíamos declarado antes.
Por último hay que mostrar visualmente toda la lógica que hemos realizado previamente. Creamos una tabla con Bootstrap en el que pasamos toda la información del Json relevante al HTML. Y por ultimo creamos un mapa con la etiqueta agm-map y le pasamos la latitud y la longitud con un marcador.
Finalización
Los problemas que se han encontrado en la aplicación han sido poder implementar un servicio de Google Maps ya que es la primera vez que importo módulos externos para posteriormente su utilización.
Otro de los problemas también es que al compilar la aplicación fallaba y no dejaba utilizarla ya que fallaban muchas declaraciones de Google y eso se ha solucionado instalando el modulo de Google Maps y con un comando para declarar en el node modules todas las declaraciones de Google.
Otra de las cosas que suele fallar a veces es que que la Api de Google suele expirar o deja de funcionar. Para poder solucionar esto hay que borrar la existente y crear una nueva.
También cabe mencionar que Google te limita las peticiones a sus servicios por lo que pasadas ciertas peticiones tienes que pagar una cuota.
Por ultimo una mejora que se podría implementar y le podría venir bien a mucha gente es que la Api solo te muestra la localización de tu ciudad o municipio, no te muestra la dirección exacta como tal, debido a que lo hacen por un tema de seguridad en las Ips y de seguridad de las operadoras.
Autor/a: Borja Jáudenes Baillo
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código / recursos utilizados / Otros datos de interés: https://github.com/Borjaja2000/maps.git