Vamos a crear un proyecto con Vanilla JavaScript sin librerías de ningún tipo desde cero hasta producción.
¿Y de qué va a tratar? Bueno, pues tengo un mecenas que me está pidiendo un vídeo de cómo consumir una API,
que le pasas un número de IP y te da toda la información del proveedor, de qué país es, si es una amenaza, su zona horaria, todo esto.
La idea sería tener un input de tipo texto en el cual pusieras el número de IP, tienes un botón para lanzar la búsqueda
y te devuelve en el mismo HTML la información de la API con todos los resultados.
Pues venga, vamos a ello. Lo primero que vamos a hacer es presentarte Codilink, que va a ser el editor que vamos a utilizar.
Codilink es como un playground de código donde tienes HTML, JavaScript y aquí en medio tenemos CSS.
Y aquí, justo encima, vas a ver la previsualización. Como puedes ver, tú puedes escribir aquí un H1, esta es mi app y lo vamos viendo.
Ahora que tenemos claro esto, vamos a por una API que nos dé la información que necesitamos.
Para eso vamos a utilizar Rapid API, que hay un montón, pero un montón de APIs totalmente gratuitas.
Vamos a ver una que sea Geolocation Thread, esta sirve. Vamos a ver el Thread para asegurarnos que es gratis.
Perfecto, 0 dólares y tenemos 1500 peticiones al día. Así que vamos a Endpoints y podemos ver que tenemos una disponible, justo la que queremos,
donde le pasamos la IP y nos devuelve la información.
Me voy a copiar todo esto, este objeto de Options, porque puedes ver que tenemos la API Key y la URL a la que vamos a atacar, que habrá que pasarle la IP.
Esto lo concatenaremos con un template string. Perfecto, nos vamos aquí, Codilink, lo voy a copiar aquí en la parte de JavaScript.
La URL la voy a sacar de aquí. El Options lo voy a pasar aquí en bañúsculas.
Y ahora lo que voy a hacer es crear, vamos a dejar esto un poquito más pequeño para que se vea bien el JavaScript, la coma.
Venga, creamos un método fetch ip info, que le pasaremos la IP y aquí hacemos un fetch pasándole la URL que teníamos.
Pasamos la URL del Endpoint. E importante, no vamos a utilizar esta IP, sino que la que tenemos aquí en los parámetros.
Así que utilizamos un template string y aquí evaluamos esta parte de aquí, la que le pasaremos por parámetro.
Esto lo tenemos que devolver. El fetch devuelve una promesa, así que tenemos que resolverla y transformar la respuesta a un JSON.
Y aquí podríamos hacer un catch, por ejemplo, de si tenemos algún error, pues al menos un console error.
Así que ahora tenemos aquí los errores. Perfecto, ahora que tenemos esto, vamos a hacer un poquito la estructura del HTML.
Como no me quiero liar con los estilos, voy a utilizar como un framework que está muy chulo, que se llama pico CSS, en mínimo, muy pequeñito.
Pero da el pego. Para utilizarlo me voy a copiar esta línea de aquí. Simplemente vuelvo a codilink, la pego aquí y ya tenemos modo oscuro.
Fíjate, en un momentito. Y ahora sí, la estructura de nuestro HTML. Vamos a crear un main. Le vamos a decir que esto es el container.
Y aquí dentro vamos a crear nuestro formulario. Así que tenemos un formulario. Aquí en la action esto se lo podemos quitar.
Vamos a tener un input. En el input le ponemos playholder. Introduce aquí la IP.
Importante. Vamos a utilizar un label también. Y el label que envuelva el input. Y de esta forma será mucho más accesible porque podremos poner una etiqueta al input.
Aquí, por ejemplo, voy a hacer esto un poquito para que haya más espacio. IP del usuario.
Ahora vamos a poner aquí un botón también. Y el botón vamos a poner buscar información de esta IP.
Los resultados los vamos a tener fuera del formulario. Así que voy a poner una ID con results. Perfecto.
Y yo creo que por ahora ya tenemos suficiente información. Igual podríamos poner aquí un small justo debajo del input.
Como para decir, por ejemplo, y vamos a poner un ejemplo. Aquí teníamos un ejemplo de IP. Vamos a copiarla.
Y se la pondremos como indicación a la gente que la quiera ver. ¿Vale? Small. Perfecto.
Bueno, más o menos. Esto va a ser lo que vamos a tener. Como el resultado de la API es JSON, vamos a formatearlo aquí mejor porque si no quedará un poco raro.
Así que lo pondremos aquí en un pre y el pre. Vamos a dejarlo así. Y ahora lo que necesitamos es escuchar el evento de submit del formulario.
Le voy a poner aquí una ID al formulario y voy a recuperar este formulario. Form document.queryselector del form.
Yo le voy a poner este símbolo como un dólar para saber que es un elemento del DOM. Pero si quieres se lo puedes quitar. Lo que tú prefieras.
Yo se lo dejo. No sé si es por manía de muchos años. Vamos a hacer form at event listener.
Escuchamos el evento submit. Y aquí vamos a recibir un evento. Y lo primero que tenemos que hacer con el evento este es hacer un prevent default.
Porque por defecto, si no, el formulario al hacer submit hace justamente una acción post y se refrescaría la página y no queremos que pase esto.
Ahora, ¿qué más necesitamos? Bueno, del input. Vamos a poner aquí input. No es muy original.
Vamos a poner el input document.queryselector. Y recuperamos el input también. Vamos a recuperar el valor que hemos puesto dentro del input.
Lo que si no tenemos valor, vamos a hacer un return directamente. ¿Vale? Porque de esta forma voy a hacer aquí para que pueda scrollear y así lo pueda ver mejor.
De esta forma lo que voy a hacer, bueno, si no tengo valor, pues no hagas absolutamente nada. ¿Vale? No hace nada.
Como podéis ver, pues no hace nada. Pero si tiene valor, como por ejemplo este que hemos puesto aquí, si le ponemos este valor, lo ponemos aquí.
Si tiene valor, entonces quiero que busque la información. Así que vamos a recuperar el ip info llamando al fetch ip info.
Le pasamos el value. En este caso es la ip que ha introducido en el input.
Y como esto es una función asíncrona, vamos a tener que hacer un await.
Para poder utilizar el await, necesitamos que la función que se esté utilizando sea async. Perfecto.
Así que aquí tenemos ya toda la información de la ip. ¿Qué tenemos que hacer ahora que tenemos toda la información de la ip?
Bueno, lo que podríamos hacer es, pues, formatearla para poder mostrarla.
Pero antes, una cosa que me gustaría hacer es que el usuario tenga como una buena experiencia del usuario
en cuanto a saber cuándo estoy buscando, cuándo esto está como pensando, ¿no?
Así que lo que vamos a hacer es poner un loading. Muy fácil. Vas a ver.
Vamos a tener aquí otra vez el elemento submit.
Submit, que es el botón. Y ahora lo añado también.
Ponemos aquí submit.
Ah, mira, esto es interesante.
Porque como podéis ver, este botón no le he puesto nada de que es del tipo submit.
Normalmente es una buena idea poner esto.
Pero ¿sabéis qué pasa? Que los botones, el último botón de un formulario,
se comporta como si fuese el submit por defecto.
Entonces, si queréis que no se comporte como un submit, tenéis que poner aquí button.
Si queréis aseguraros, pues ponéis el type submit y ya está.
Ahora que tengo este botón, lo que vamos a hacer antes de hacer el fetch, que es asíncrono,
vamos a poner submit y vamos a añadirle atributos.
Vamos a desactivarlo primero para que de esta forma no pueda volver a darle el usuario otra vez click.
Y además vamos a hacer un submit set attribute.
Y si no me equivoco, pico CSS tiene una utilidad muy chula en la que está, la de tipo loading.
¿Ves? Y queda así, muy bonito.
Así que vamos a utilizar este atributo area busy.
Lo vamos a poner a true para que se muestre que está cargando.
Así que area busy y lo ponemos a true.
Luego, esto lo vamos a quitar después de hacer el fetch, porque ya habrá terminado.
Así que hacemos un remove attribute de disabled y hacemos también un remove attribute de area busy.
Vamos a probarlo, todavía no aparecen los resultados.
Vale, por ahora veo que no está haciendo nada.
Puede ser que se nos haya escapado algo, así que...
Ah, no, lo que me ha escapado es que no estoy utilizando la IP y por eso no está haciendo nada.
Así que vamos a poner esto.
Vale, ¿ya has visto que ya está haciendo el cargando?
Ahora va muy rápido porque ha cacheado.
Pero mira, como justamente esto es requerido, es interesante que en este input pongamos que es required.
De esta forma tenemos como doble control.
Uno en nuestro JavaScript y luego también además, ¿ves?
Ahora cuando ponga esto me dice completa este campo, que queda bastante bien y de forma nativa.
Ni siquiera hemos tenido que escribir eso.
Hemos tenido que haber hecho esto de required y ya está.
Podríamos incluso ponerle un pattern para que mire que es una IP, pero bueno, eso te lo voy a dejar de veres para ti porque al final no es muy difícil y puedes buscar documentación.
Ahora lo que necesitamos es mostrar esta información del IP info.
Pues lo que vamos a hacer es que si tenemos IP info, pues vamos a transformar esta información en un string para poder mostrarla aquí.
Así que vamos a recuperar results, que no lo teníamos todavía, results, document query selector, results, ¿vale?
Fíjate que estamos repitiendo aquí todo el rato, document query selector, document query selector.
A mí una cosa que me gusta y si has utilizado jQuery alguna vez, pues te sonará.
Puedes utilizar como una utilidad muy fácil que sea esta, que tú le puedes poner este nombre a una función que le pasas el selector y utilizas el document query selector, ¿vale?
Y le pasas el selector.
Y ahora simplemente este método lo puedes utilizar aquí.
Si no te gusta, pues no pasa nada.
Yo lo utilizo un montón porque creo que queda bastante bien legiblemente, pero te puedes liar con que es jQuery.
Si es el caso, pues oye, no lo utilices, pero solo te lo digo para que lo sepas.
Ahora que ya tenemos el elemento del DOM de results, lo que vamos a hacer es mostrar la información que hemos recuperado de la API, el IP info este.
Lo que pasa es que vamos a hacer un JSON.stringify.
Aquí el JSON.stringify recibe diferentes parámetros.
El valor, luego tenemos un replacer, que eso es una cosa que puedes como reemplazar cosas del JSON a la hora de transformarlo.
Y luego los espacios.
Así que vamos a poner el IP info, ese sería el objeto que queremos convertir en un string.
Pasamos null como replacer y de espacios vamos a poner dos.
Y con esto, pues si ponemos esta IP, vamos a confiar que esta IP es de fiar.
Le vamos a buscar información y vale, invalid API key.
No le ha gustado la API key.
¿Por qué no le ha gustado mi API key?
Vamos a buscar aquí, API key.
Vamos a copiarla otra vez, igual la he copiado mal.
Ha sido algo de aquí, ha estado justo, ¿eh?
Hubiera salido todo perfecto, pero no.
API key.
Yo entiendo que será...
Ah, espérate, espérate, porque a lo mejor los headers...
Claro, es que no le he pasado las opciones del header.
Eso es lo que pasa, eso es lo que pasa.
En el fetch, ¿veis?
Tenemos aquí la URL, pero no le he pasado el options desde el principio.
Ya está, ese es el problema.
Bueno, pero es interesante, porque así hemos visto un problemilla.
Venga, ahora sí, ahora sí.
Vamos a copiar otra vez la IP y ahora sí.
Ahora, perfecto.
Pues mira, ha quedado de lujo.
Aquí tienes toda la información de la API.
Normalmente se enseña cómo hacer una petición a una API, pero muy pocas veces cómo mostrar la información.
En este caso, ya tienes un ejemplo de cómo crear una pequeña aplicación y encima mostrar resultados.
Pero la quieres desplegar.
Te enseño cómo desplegarla.
Mira, en Codilink tienes la opción de descargar el proyecto completo.
Así que ves aquí este botón de download, pues le das un clic.
Una vez que tienes el archivo descargado, lo tienes aquí abajo, lo único que tienes que hacer es Netlify Drop.
¿Buscas Netlify Drop?
Netlify, lo he escrito mal.
Netlify Drop.
¿Vale?
Es este.
App.netlify.com.
Y en esta web, lo único que tienes que hacer es arrastrar el archivo que has descargado aquí.
Y ya está.
Ahora vas a esperar unos cuantos segundos.
Muy poquitos.
Ya verás, súper rápido.
Y aquí lo tenemos.
Ya tenemos una URL disponible en internet que si entramos, aquí tenemos desplegada nuestra aplicación y funcionando perfectamente.
Pues si te ha gustado el vídeo, que ha sido así rápido, intenso, al grano, dale like.
Y lo vamos a hacer consumiendo esto.
Joder.
Vamos a crear un po...
En este vídeo vamos a crear un...
¡Suscríbete al canal!