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.
¿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.
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.
Crear proyecto con vue js [video]
Crear proyecto con vue js [blog]
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
Consumir la API de https://api.jikan.moe/v4/anime?, y mostrar todos los resultados de los Anime existentes.
Crear un juego con los sprites de los pokemon y adivinar cual es.
Busca una API donde deba usar token de verificación para poder consumirla. por ejemplo https://developer.marvel.com/
