top of page

Crea tu propia pokédex consumiendo una API con Vuetify js y Typescript.


Bienvenidos a mi nuevo post, si le interesa el mundo del desarrollo frontend y de las APIs, este es el lugar.


Si eres una persona nueva y no sabes que es Vue js y API, aquí hago un resumen corto de lo que es cada una.


Pokemon-Devco


¿Qué es Vue js?


Vue es un framework Front End que permite crear componentes en los desarrollos web (interfaces de usuario), al igual que angular, react, svelte, este permite mejorar la reactividad del DOM (modelo de objeto de documento) cuando un se haga un cambio.


En pocas palabras si usted quiere hacer un sitio web con muchas animaciones y validaciones, estos frameworks le permiten que el tiempo de renderizado del DOM (modelo de objeto de documento) sea mucho más rápido que hacerlo desde javascript puro.



¿Qué es una API y que significa la palabra REST?


Una API (Application Programming Interface) es una interfaz que facilita la comunicación entre diversos programas y sistemas, permitiendo la interacción entre software, APIs con otras APIs, APIs con bases de datos y APIs con servidores. Es esencialmente un medio estandarizado para que diferentes aplicaciones puedan compartir datos y funcionalidades de manera organizada y eficiente.


Un ejemplo visto de otra manera de una interfaz es el de un volante de carro, el cual permite la comunicación entre la persona que va conduciendo y las llantas.


Por otro lado, la palabra REST (Representational State Transfer) establece un conjunto de principios arquitectónicos que se basan en el uso de HTTP para acceder y manipular recursos a través de una API. La información se transmite comúnmente en formatos estructurados como JSON o XML, y se siguen ciertos principios para garantizar una comunicación eficiente y escalable entre sistemas.



Empecemos !!!


En mi tiempo de niñez salió una serie llamada pokémon que son animalitos que tienen poderes y que cuando uno se encontraba con un bichito de esos se registraba en un aparato llamado la Pokédex, entonces hoy vamos a realizar la propia Pokédex con Vue js y consumiendo la API de POKEAPI.


Importante: Vuetify es una versión de vue js que incluye material design.


  1. Ejemplo de la Pokédex que se va desarrollar en este blog.



Tenemos un campo de texto en el cual podemos consultar por un pokémon, en este caso escribimos “Nidoking” y nos muestra el nombre imagen y el número en la pokédex...




Para realizar esta aplicación, lo primero que debemos hacer es tener la estructura básica, de un proyecto de vue js.


Enlaces para crear proyecto desde cero con Vuetify.




A continuación veremos la estructura de las carpetas del proyecto.



Estructura del proyecto


A continuación vamos a ver cómo tener nuestro proyecto organizado, recuerde que esta estructura no es una camisa de fuerza, pero sí una guía de las buenas prácticas.




















Para nuestro proyecto solo vamos a usar las carpetas:


Components:

En esta carpeta creamos el archivo con el siguiente nombre y extension SearchPokemonComponent.vue y simplemente lo dejamos creado


Utils:

En esta carpeta creamos el archivo constants.ts, donde añadimos la siguiente línea de código:


Aquí vamos a tener almacenada en una constante la url de la API que vamos a consumir.


En esta carpeta también se van a guardar otros archivos dependiendo de la necesidad, por lo general se guardan porciones de código que van transversalmente a otros códigos.



Views:

En esta carpeta creamos el archivo con el siguiente nombre y extensión SearchPokemonView.vue y añadimos las siguientes líneas de código:



Router:

En esta carpeta creamos el archivo con el siguiente nombre y extensión index.ts


Recuerdan el archivo SearchPokemonComponent.vue, ahora si vamos a explicarlo.


La estructura de Vue js para los componentes es así.



Estructura archivo component.vue


Sección del HTML

Sección de los Scripts

Sección de los sass, css propio


Sabiendo esto, escribimos estas líneas de código en el archivo.


Tomémonos un break


Hasta el momento ya tenemos nuestra aplicación casi lista, pero falta explicar algunas partes de la estructura de vue js,


Si has llegado hasta aquí muchas gracias por su atención y espero que siga en este mundo del frontend.



Retomando …

La estructura de código de Vue, tiene ciertas reglas, no son cien por ciento estrictas, pero sí es aconsejable seguir las guías.


Con todo esto aclarado, ahora simplemente es correr nuestra aplicación.


Ejecutar aplicación


Abrimos la terminal, cmd o command prompt y escribimos el siguiente comando.

npm run dev

esperamos que compile, y veremos


Resultado en consola


VITE v4.4.9 ready in 5496 ms


➜ Local: http://localhost:3000/

➜ Network: use --host to expose

➜ press h to show help



Nos indica que la aplicación está corriendo en el puerto 3000. copiamos y pegamos la url en el navegador y listo, hemos creado la Pokédex.


muchas gracias por su atención, espero que este post sea de su agrado y ERES TODO UN MAESTR@ POKEMON.



Descargar proyecto completo



Conclusión

Este es un ejemplo básico de cómo utilizar el framework frontend Vue.js. Sin embargo, es importante destacar que no debemos limitarnos solo a este framework. Otros frameworks populares como Angular, React y Svelte también ofrecen potencia, usabilidad y rapidez. A pesar de sus diferencias, comparten la característica clave de reactividad y el uso de componentes.



Retos:

Nivel fácil

  1. Consumir la API de https://api.jikan.moe/v4/anime?, y mostrar todos los resultados de los Anime existentes.

  2. Crear un juego con los sprites de los pokemon y adivinar cual es.

  3. Busca una API donde deba usar token de verificación para poder consumirla. por ejemplo https://developer.marvel.com/








¡Gracias por leer!

Entradas Recientes

Ver todo

1 commento

Valutazione 0 stelle su 5.
Non ci sono ancora valutazioni

Aggiungi una valutazione
Ospite
30 set 2023
Valutazione 5 stelle su 5.

Muy buena información, gracias

Mi piace
bottom of page