Consumir una API con Alpine.js
Anteriormente habíamos creado una API muy sencilla que te devolvía un saludo si le pasabas un nombre
Ahora quiero mostrarles cómo hacerle un front reactivo para consumir la API y presumas con los socios, y lo más divertido, no vamos a utilizar ni react ni vue sino alpine.js Simple. Lightweight. Powerful as hell el jQuery moderno. Obtienes la potencia de react/vue sin machucarte los coj... solo lo agregas al header en un script.
<script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
Ya he hablado del tema alpine pero ahora vamos a consumir nuestra propia api y así tendremos una "app completa"(back y front).
Requerimientos:
- Tener instalado node.js
- Una cuenta en vercel.com y github.com y conocer lo básico.
- Tener instalado el cliente de vercel
Dame código ya!!
Para los desesperaos hagan el fork al repo y ejecuten vercel dev
y miren el código
1. Código
Vamos a crear una página html que será el home de nuestro proyecto para eso en la raiz del proyecto agregamos un fichero index.html
con el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi API</title>
<link rel="stylesheet" href="https://unpkg.com/axist@latest/dist/axist.min.css" />
<script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
</head>
<body>
</body>
</html>
Solamente hemos incluido el script a alpine.js y para no complicarnos con el css utilizamos axist, que es classless. Classless es un tipo frameworks css que no utiliza class
para los estilos sino solamente los tag
si quieres ver más puedes ver este repo
2. Componente
Alpine define sus componentes con x-data
y se define el objeto que tendrá un alcance dentro de ese componente/etiqueta. La magia de Alpine ocurre solo con una colección de 15 atributos, 6 propiedades y dos métodos.
Veamos el componente en cuestión
<div x-data="{name: '', msg: ''}">
<form @submit.prevent="() => {
fetch(`/api/que-bola.json?name=${name}`)
.then( res => res.json() )
.then( ({ text }) => msg = text )
}">
<label for="name">Dime tu nombre</label>
<input name="name" type="text" x-model="name" style="width: 100%">
</form>
<!-- Mostrar el mensaje -->
<template x-if="name">
<h1 x-text="msg"></h1>
</template>
</div>
Vamos a verlo paso por paso.
<div x-data="{ name: '', msg: '' }">
Inicializar el componente con las variablesname
y 'msg'<input type="text" x-model="name">
sincroniza el valor del input con la variable name<template x-if="name">
Muestra el mensaje si se ha escrito 'name'<span x-text="msg"></span>
Muestra la variable msg en pantalla@submit.prevent="()=>{}"
El pollo del arroz con pollo. Definimos la función que manejará el evento submit dle formulario. Te lo detallo:fetch('/api/que-bola.json?name=${name}')
llamamos a nuestra super api y le pasamos el nombre que está en la variablename
.then( res => res.json() )
Devolvemos la respuesta como json.then( ({ text }) => msg = text )
Del json que nos devuelve la api tomamos la propiedadtext
y se la asignamos a msg
Puedes consultar la doc del fetch y el destructing en javascript para más detalles y comprensión de codigo.
3. Funciona!!
Solo falta correr el server verlo funcionar ejecutando vercel dev
y visitar localhost:3000
Bienn!!! ahora puedes hacer el deploy ejecutando vercel
en la carpeta donde está el proyecto.
Puedes ver el resultado en cosumir-api-con-alpinejs.vercel.app
Conclusiones
Este es un ejemplo muy sencillo pero tiene la estructura para que puedas creas cosas muy grandes sin tanta complicación. Dale!! create tu propia api y consúltala desde un html y comparte los resultados.
En el próximo post vamos a crear una api para una página que no la tenga