Creación de wrappers de API con Webflow Cloud

Los desarrolladores pueden alojar y vincular una aplicación de Next.js o Astro a su sitio de Webflow, con la capacidad de integrar sistemas de diseño de Webflow en sus aplicaciones (gracias al poder de DevLink). También pueden aprovechar funciones adicionales de la integración de Webflow Cloud con Cloudflare, incluidas múltiples opciones para el almacenamiento de datos. En general, la mayoría de la gente puede pensar en usar Webflow Cloud para crear aplicaciones visuales para los visitantes de su sitio, pero también se puede utilizar para aplicaciones puramente centradas en datos. Hoy voy a demostrar un ejemplo potente de esto: la creación de un envoltorio de API.

Al usar API remotas en código JavaScript del lado del cliente, debes tener cuidado de no exponer claves de API que puedan ser robadas y utilizadas en otros lugares. Crear un proxy ligero del lado del servidor facilita la prevención de esto, ya que el código del front-end nunca contiene la clave. Mejor aún, crear este proxy permite:

• Modelado de datos: Una API puede devolver mucha información que simplemente no necesitas. También puede devolver información de una manera que no es útil para el código del front-end. Tu proxy del lado del servidor puede eliminar, añadir y modificar el resultado de la API remota. Además, puedes modelar tanto la salida como la entrada.
  
  • Una API remota podría admitir dos argumentos, pero tu proxy puede codificar uno de ellos de forma fija, estableciendo su valor permanentemente. Esto te da un control total no solo sobre cómo se llama a la API remota, sino sobre lo que se le permite devolver.
• Almacenamiento en caché: Al implementar una caché ligera, puedes almacenar y reutilizar los resultados de la API sin tener que acceder al recurso externo. Esto también puede reducir los costes, ya que muchas API cobran por solicitud.
• Flexibilidad: En el caso más extremo, es posible que necesites cambiar completamente a un nuevo proveedor de API. Dado que tu código front-end está llamando a tu proxy de aplicación de Webflow Cloud, puedes cambiar al nuevo proveedor, adaptar la respuesta para que coincida con la anterior y listo. Incluso podrías crear un proxy que utilice dos o más proveedores de API, alternando entre ellos según sea necesario.

En esta publicación, demostraré esto en acción, iterando sobre algunas versiones para mostrar cómo se puede mejorar una implementación inicial.

Obtener el clima: al estilo pirata

Una de mis API favoritas es Pirate Weather, un reemplazo para la API de Dark Sky, ya discontinuada. Proporciona información meteorológica muy detallada a un precio excelente: gratis (aunque existen límites y puedes, y deberías, considerar hacer una donación si utilizas la API). Usar la API requiere obtener una clave, y luego leer detenidamente la documentación. La llamada más sencilla se ve así:

https://api.pirateweather.net/forecast/YOUR_KEY/YOUR_LATITUDE,YOUR_LONGITUDE

Esto devolverá una gran cantidad de datos para una ubicación específica, incluido el pronóstico general, un pronóstico diario, un pronóstico por horas e incluso alertas meteorológicas.

Para nuestro sitio de Webflow, queremos hacer uso de esta API pero a través de un proxy en una aplicación de Astro en Webflow Cloud. Nuestro proxy también tendrá codificada una ubicación fija para Lafayette, Luisiana, que tiene esta latitud y longitud: 30.471165, -91.147385.

Comencé siguiendo nuestra guía sobre cómo inicializar un sitio de Webflow Cloud y seleccioné Astro como mi framework. Tomé la página predeterminada, index.astro, y la renombré a index.js para crear un punto final de servidor. Y con eso, me puse a programar.

Versión uno: Una nueva esperanza para las API

La versión inicial era simplemente un envoltorio y nada más. Especifica una ubicación y utiliza la función exclude de la API de Pirate Weather para ayudar a reducir el tamaño de lo que se devuelve:

export const config = {
    runtime: "edge",
};

async function getForecast(lat, lon, key) {
    let req = await fetch(`https://api.pirateweather.net/forecast/${key}/${lat},${lon}?exclude=minutely,hourly,flags`);
    let result = await req.json();
    return result;
}

export async function GET({ request, locals }) {

    const PIRATE_API_KEY = locals.runtime.env.PIRATE_API_KEY || process.env.PIRATE_API_KEY;
    
    if(!PIRATE_API_KEY) {
        throw('Missing env key');
    }

    let result = await getForecast(30.471165, -91.147385, PIRATE_API_KEY);

    return new Response(
        JSON.stringify(result),
        { headers: { 'Content-Type': 'application/json' } }
    );
}

Como puedes ver, no se comprueban los argumentos de entrada; esta ruta de API simplemente llamará a la API remota externa y devolverá los datos tal cual. Esta es la forma más sencilla y directa de lograr lo que necesitamos: añadir un informe meteorológico (al menos para una ubicación) a nuestro sitio de Webflow. Puedes ejecutar esto tú mismo aquí.

Vale, eso está bien, ¿pero podemos mejorarlo?

Versión dos: El contraataque de la API

Si probaste la URL anterior y viste los resultados, habrás notado que era bastante intensiva. Muchos, muchísimos datos. Ese es un gran punto de venta para la API de Pirate Weather (especialmente porque es gratuita), pero incluye muchos más datos de los que necesitamos. Vamos a solucionar esto modelando los datos. Añadí una nueva función, shapeData, a mi código solo para ese propósito:

function shapeData(data) {

    // We already know the location
    delete data.latitude; 
    delete data.longitude;
    // First, reduce daily forecast to 3 days
    data.daily.data = data.daily.data.slice(0, 3);

    // This is a list of keys we can remove from currently/daily data
    const keysToRemove = ['time', 'apparentTemperatureMax', 'apparentTemperatureMaxTime', 'apparentTemperatureMin', 'apparentTemperatureMinTime','apparentTemperatureHigh', 'apparentTemperatureHighTime', 'apparentTemperatureLow', 'apparentTemperatureLowTime', 'cloudCover', 'icon', 'nearestStormBearing', 'apparentTemperature', 'dewPoint', 'pressure', 'uvIndex', 'ozone', 'visibility'];

    for(let key of keysToRemove) {
        delete data.currently[key];
        for(let day of data.daily.data) {
            delete day[key];
        }
    }

    return data;
}

La función shapeData hace algunas cosas. Primero, elimina un par de elementos de nivel superior que no necesitamos, como la ubicación, que literalmente teníamos codificada en la solicitud. A continuación, reduce el pronóstico diario a solo tres días. Finalmente, elimina muchos datos que no necesitamos en nuestro sitio. Si tienes curiosidad sobre cuáles son (y el resto de los valores que dejamos intactos), puedes consultar la documentación de respuesta para obtener más detalles. Pero por ahora, he eliminado los que no me parecían demasiado importantes.

El último cambio es simplemente llamarla:

let result = shapeData(await getForecast(30.471165, -91.147385, PIRATE_API_KEY));

El resultado neto es una cantidad mucho menor de datos que, de todos modos, se habrían desperdiciado en nuestro sitio. Puedes acceder a esta versión aquí.

Si te da curiosidad saber cuánto ahorré: mis herramientas de desarrollo marcaron la primera versión en 3 KB y esta en 1.8 KB, una reducción de más de un tercio en el tamaño de la carga útil. La versión inicial ya era muy pequeña, pero imagina cómo este tipo de recortes se acumulan en una API más grande o compleja.

Versión tres: El retorno de la caché

Para la tercera y última versión, hice la mejora definitiva: caché del lado del servidor. Para esto, usé la función de almacenamiento de clave-valor de Webflow Cloud. Tras seguir la guía de configuración, mi código tuvo acceso al sistema KV de Cloudflare, que es una maravilla para el almacenamiento en caché.

Añadir caché al código supuso dos pasos:

• ¿Está el valor en la caché? ¡Devuélvelo!
• Si no, haz la llamada a la API remota de siempre y guárdalo en caché.

Aquí tienes el cambio al completo:

let result = await kv.get('forecast');
if(!result) {
    console.log('forcast not in cache');
    result = shapeData(await getForecast(30.471165, -91.147385, PIRATE_API_KEY));
    // cache for ten minutes
    await kv.put('forecast', JSON.stringify(result), { expirationTtl: 600 });
} else {
    console.log('forecast from cache');
    result = JSON.parse(result);
}

Como ves, el código intenta obtener el pronóstico de la caché primero. Los elementos cacheados pueden caducar, y el sistema se encarga de eso solo: simplemente no aparecerán si han expirado. Si el resultado no está en la caché, el código llama a la API como siempre y guarda el valor durante diez minutos. Ten en cuenta que primero convierto el resultado a cadena y, en el bloque condicional donde la caché sí existía, analizo la cadena JSON (el resultado final se convierte a cadena de todos modos, pero así es más sencillo).

Ahora, si accedes al endpoint, obtendrás una versión cacheada o no dependiendo del tráfico del sitio. En mi prueba rápida, vi que la respuesta llegaba en la mitad de tiempo, pero ese ahorro dependerá de la velocidad de la API remota, el tamaño de los datos, etcétera.

Si quieres verlo por ti mismo, puedes echar un vistazo al repositorio aquí. El código de los wrappers de la API está en el directorio src/pages.

Próximos pasos

Crear proxies de API no es nada nuevo, pero poder usar Webflow Cloud para alojar estos proxies junto a tu sitio aporta un nivel extra de cohesión y flexibilidad a lo que puedes construir en la plataforma Webflow. ¡Pruébalo y cuéntanos qué has creado!