TÉCNICO SUPERIOR UNIVERSITARO EN
TECNOLOGÍAS DE LA INFORMACIÓN ÁREA
DESARROLLO DE SOFTWARE
MULTIPLATAFORMA
APLICACIONES WEB ORIENTADA A SERVICIOS
4TSM2
ORTEGA ROSAS REBECA
PROYECTO:
ABSORCIÓN DE APIS
ÍNDICE
Introducción ........................................................................................................................ 3
API Geolocalización
¿Qué es? ...................................................................................................................... 4
¿Cómo se obtiene? .................................................................................................... 4
Código para la integración de la API ..................................................................... 4
API Facebook
¿Qué es? ...................................................................................................................... 5
¿Cómo se obtiene? .................................................................................................... 5
Código para la integración de la API ..................................................................... 6
API Pókemon
¿Qué es? ...................................................................................................................... 9
¿Cómo se obtiene? .................................................................................................... 9
Código para la integración de la API ................................................................... 10
Conclusión ........................................................................................................................ 10
Referencias ...................................................................................................................... 11
INTRODUCCIÓN
En este proyecto, exploramos cómo integrar diferentes APIs para agregar funcionalidades
interesantes al proyecto en desarrollo.
La idea era simple: ¿por qué programar todo desde cero si podemos usar herramientas que
ya existen y funcionan bien? Por ejemplo, con la API de Geolocalización de Google, el
proyecto puede detectar la ubicación del usuario de forma precisa, algo útil para apps que
necesitan mostrar información localizada. La API de Facebook, por su parte, hizo más fácil
el registro y login, permitiendo a los usuarios entrar con sus cuentas de la red social, sin
tener que recordar otra contraseña. Y la PokéAPI nos dio acceso a una base de datos
completa de Pokémon, ideal para practicar cómo consumir datos de una API RESTful de
manera eficiente.
Este documento no solo explica cómo implementamos estas APIs, sino también cómo nos
ayudaron a optimizar tiempo, mejorar la experiencia del usuario y aprender de manera
práctica. Al final, el proyecto no solo cumplió con su objetivo técnico, sino que también nos
dejó claro que, en el desarrollo de software, a veces la mejor solución es saber aprovechar
lo que otros ya han construido.
API Geolocalización
¿Qué es?
La API de geolocalización proporcionada por Google permite obtener la ubicación
aproximada de un dispositivo utilizando torres de wi-fi, señales satelitales y otras
conexiones inalámbricas.
¿Cómo se obtiene?
1. Debemos ingresar al sitio web oficial de Google Cloud y registrarnos o ingresar
con una cuenta previamente creada. Es conveniente usarlo de forma gratuita.
2. En la esquina derecha superior, necesitamos crear un nuevo proyecto dentro de la
interfaz. Le damos el nombre de “geolocalización” y click en crear.
3. En el menú lateral del proyecto seleccionado vamos a APIs y servicios >
Biblioteca.
4. En la barra de búsqueda escribimos “Geolocation API” y habilitamos el resultado
que nos aparece.
5. Vamos a APIs y servicios > Credenciales.
6. Damos click en crear credenciales > clave de api
7. Aquí se generará la clave única, es recomendable copiarla y guardarla en un sitio
privado y seguro.
Código para la integración de la API de geolocalización
En el header se coloca la clave única conseguida por la API de google cloud, también se
da un estilo al mapa.
Ilustración 1 Asociación de la API KEY.
Se agrega la función con java a través de funciones, consiguiendo coordenadas desde el
mapa, también se le agrega un marcador con su respectivo tamaño y posición.
Ilustración 2 Configuración de los parámetros de código.
Ilustración 3 Resultado final de la integración de la API de geolocalización en el proyecto “BongSong”
API Facebook
¿Qué es?
Permite a los usuarios ingresar con su cuenta creada y registrada en la red social de
Facebook, obteniendo así información básica del usuario para validar sus credenciales.
¿Cómo se obtiene?
1. Debemos ingresar al portal oficial de Facebook Developers.
2. Podemos registrarnos con cualquier cuenta de Facebook personal ya existente.
3. En la esquina superior derecha ingresar a “Mis apps” y en “Crear app”.
4. Le asignamos el nombre a la app como “login”.
5. Introducimos nuestro correo y si se solicita el propósito de la aplicación.
6. Damos click en crear app y verificamos contraseña si se requiere.
7. Dentro del panel de la app, en el menú izquierdo seleccionamos “Agregar app”.
8. Buscamos “Facebook Login” y seleccionar “Configurar”.
9. Seleccionamos plataforma Web y añadir URL.
10. Así obtenemos la App ID y App Secret
11. Tenemos que ir a facebook login > configuración y definir URLs válidas para la
autenticación.
12. Se inserta la App ID en el código a usar.
Código para la integración de la API de login con Facebook
Se agrega un botón que tenga enlace directo al acceso de “login” con la API de Facebook,
configurado mediante un archivo PHP.
Ilustración 4 Botón de vinculación al login.
Se configura a nuestra base de datos existente para integrar tokens que nos ayudarán a
la verificación de cuentas y usuarios registrados en Facebook, consiguiendo así los datos
de estos usuarios para hacer el inicio de sesión.
Ilustración 5 Código de configuración de la API KEY de Facebook.
Ilustración 6 Código de configuración llamando al callback.
Para hacer las validaciones de credenciales, se hace la búsqueda del usuario por su usuario y
correo electrónico, si están vinculadas a una cuenta de Facebook ya registrada entonces se da
acceso a la plataforma mediante ese usuario.
Ilustración 6 Conexión de las cuentas existentes en Facebook a la validación de credenciales.
Ilustración 5 Resultado final de la integración de la API login con Facebook al proyecto “BongSong”
API Pokémon
¿Qué es?
La PokéAPI es una API REST pública y gratuita que proporciona acceso estructurado a la
información del universo Pokémon. Es ampliamente utilizada con fines educativos, para
prácticas de desarrollo web y consumo de APIs RESTful.
¿Cómo se obtiene?
1. No requiere registro, se puede comenzar a consumir la API sin autenticación.
2. Entender la estructura de su documentado, el que se usó:
• https://pokeapi.co/api/v2/pokemon/ditto
3. Basta con acceder directamente a la URL de consulta:
https://pokeapi.co/api/v2/pokemon/ditto
4. Se usa fetch() en JavaScript para obtener datos como nombre, habilidades,
estadísticas y tipos.
Código para la integración de la API de Pokémon
Ilustración 8 Se realiza la extracción de los datos de los pokemons.
Se muestran los personajes registrados con sus respectivas tarjetas incluyendo sus
nombres, habilidades y características completas.
Ilustración 9 Resultado final de la integración de la API Pokémon.
5. Conclusión
Este proyecto de integración de APIs me hizo caer en cuenta que en el desarrollo web no
siempre hay que construir todo desde cero. Aprovechar herramientas externas bien
diseñadas no solo ahorra tiempo, sino que abre posibilidades que de otra manera serían
complicadas o costosas de implementar.
La API de Geolocalización de Google nos permitió añadir funcionalidades basadas en
ubicación con relativamente poco código, algo que hubiera sido mucho más laborioso si
hubiéramos intentado desarrollar esa tecnología uno mismo. La API de Login con
Facebook simplificó enormemente el proceso de autenticación, mejorando la experiencia
del usuario al eliminar formularios de registro. Y la PokéAPI demostró lo potente que
puede ser consumir datos estructurados de manera eficiente, incluso cuando provienen
de una fuente externa y gratuita.
Fue una gran oportunidad para aprender a entender documentaciones técnicas hasta
manejar claves de API de forma segura. También nos enseñó la importancia de diseñar
una arquitectura flexible, capaz de adaptarse cuando algún servicio externo cambia o deja
de estar disponible.
6. Referencias
Google Cloud Geolocation API: https://cloud.google.com/geolocation
Facebook for Developers: https://developers.facebook.com/
PokéAPI: https://pokeapi.co/
