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:

  1. Tener instalado node.js
  2. Una cuenta en vercel.com y github.com y conocer lo básico.
  3. 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 variables name 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 variable name
    • .then( res => res.json() ) Devolvemos la respuesta como json
    • .then( ({ text }) => msg = text ) Del json que nos devuelve la api tomamos la propiedad text 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

que bola asere api.jpg

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