Crear un sitio editable con Google Sheets y Eleventy

¿Recuerdas Tabletop.js? Lo cubrimos hace un momento exactamente en este mismo contexto: crear sitios web editables. Es una herramienta que convierte una hoja de Google en una API, a la que usted, como desarrollador, puede acceder para obtener datos al crear un sitio web. En el último artículo, utilizamos esa API en el lado del cliente, lo que significa que JavaScript debía ejecutarse en cada vista de página, acceder a esa URL para los datos y crear la página. Eso podría estar bien en algunas circunstancias, pero hagámoslo mejor. Accedemos a la API durante el paso de compilación para que el contenido se incorpore directamente al HTML. Esto será mucho más rápido y más resistente.

La situacion

Como desarrollador, es posible que haya tenido que trabajar con clientes que lo siguen molestando con revisión interminables del contenido, a veces, incluso después de meses de crear el sitio. Esto puede resultar frustrante, ya que te sigue haciendo retroceder y te impide realizar un trabajo más productivo.

Les daremos las claves para actualizar ellos mismos el contenido utilizando una herramienta con la que probablemente ya estén familiarizados: Google Sheets.

una nueva herramienta

En el último artículo, presentamos el concepto de usar Google Sheets con Tabletop.js. Ahora presentamos una nueva herramienta para esta fiesta: Eleventy.

Usaremos Eleventy (un generador de sitios estáticos) porque queremos que el sitio se represente como un sitio estático puro sin tener que enviar todo el funcionamiento del sitio en el JavaScript del lado del cliente. Extraeremos el contenido de la API en el momento de la compilación y haremos que Eleventy cree un index.html minimizado que enviaremos al servidor del sitio web de producción. Al ser estático, esto permite que la página se cargue más rápido y es mejor por razones de seguridad.

La hoja de calculo

Usaremos una demostración que construí, con su repositorio y Google Sheet para demostrar cómo replicar algo similar en sus propios proyectos. Primero, necesitaremos una hoja de Google que será nuestro almacén de datos.

Abra una nueva hoja de cálculo e ingrese sus propios valores en las columnas como las mías. La primera celda de cada columna es la referencia que se usará más adelante en nuestro JavaScript, y la segunda celda es el contenido real que se muestra.

A continuación, publicaremos los datos en la web haciendo clic en Archivo → Publicar en la web en la barra de menú.

Se proporcionará un enlace, pero técnicamente no nos sirve, por lo que podemos ignorarlo. Lo importante es que la hoja de cálculo (y sus datos) ahora son de acceso público para que podamos recuperarla para nuestra aplicación.

Tenga en cuenta que necesitaremos el ID único de la hoja a partir de su URL a medida que avancemos.

Se requiere Node para continuar, así que asegúrese de que esté instalado . Si deseas acortar el proceso de instalación de todas las dependencias para este trabajo, puedes bifurcar o descargar mi repositorio y ejecutar:

npm install

Ejecute este comando a continuación; Explicaré por qué es importante en un momento:

npm run seed

Luego para ejecutarlo localmente:

npm run dev

Muy bien, entremos src/site/_data/prod/sheet.js. Aquí es donde extraeremos datos de GoogleSheet, luego los convertiremos en un objeto que podamos usar fácilmente y, finalmente, convertiremos el objeto JavaScript nuevamente al formato JSON. El JSON se almacena localmente para el desarrollo, por lo que no es necesario acceder a la API cada vez.

Aquí está el código que queremos allí. Nuevamente, asegúrese de cambiar la variable sheetIDal ID único de su propia hoja.

module.exports = () = {  return new Promise((resolve, reject) = {    console.log(`Requesting content from ${googleSheetUrl}`);    axios.get(googleSheetUrl)      .then(response = {        // massage the data from the Google Sheets API into        // a shape that will more convenient for us in our SSG.        var data = {          "content": []        };        response.data.feed.entry.forEach(item = {          data.content.push({            "header": item.gsx$header.$t,            "header2": item.gsx$header2.$t,            "body": item.gsx$body.$t,            "body2": item.gsx$body2.$t,            "body3":  item.gsx$body3.$t,            "body4": item.gsx$body4.$t,            "body5": item.gsx$body5.$t,            "body6":  item.gsx$body6.$t,            "body7": item.gsx$body7.$t,            "body8": item.gsx$body8.$t,            "body9":  item.gsx$body9.$t,            "body10": item.gsx$body10.$t,            "body11": item.gsx$body11.$t,            "body12":  item.gsx$body12.$t,            "body13": item.gsx$body13.$t,            "body14": item.gsx$body14.$t,            "body15":  item.gsx$body15.$t,            "body16": item.gsx$body16.$t,            "body17": item.gsx$body17.$t,                      })        });        // stash the data locally for developing without        // needing to hit the API each time.        seed(JSON.stringify(data), `${__dirname}/../dev/sheet.json`);        // resolve the promise and return the data        resolve(data);      })      // uh-oh. Handle any errrors we might encounter      .catch(error = {        console.log('Error :', error);        reject(error);      });  })}

En module.exports, hay una promesa que resolverá nuestros datos o arrojará errores cuando sea necesario. Notarás que estoy usando axios para recuperar los datos de la hoja de cálculo. Me gusta que maneje los códigos de error de estado rechazando la promesa automáticamente, a diferencia de algo como Fetch que requiere monitorear los códigos de error manualmente.

Creé un dataobjeto allí con una contentmatriz. Siéntase libre de cambiar la estructura del objeto, según el aspecto de la hoja de cálculo.

Estamos usando el forEach()método para recorrer cada columna de la hoja de cálculo mientras la equiparamos con el nombre correspondiente que queremos asignarle, mientras insertamos todos estos en el objeto de datos como contenido.

¿Recuerdas ese seedcomando de antes? Estamos usando semilla para transformar lo que hay en el objeto de datos a JSON a través de JSON.stringify, que luego se envía a src/site/_data/dev/sheet.json.

¡Si! Ahora tenemos datos en un formato que podemos usar con cualquier motor de plantillas, como Nunjucks, para manipularlos. Pero nos estamos centrando en el contenido de este proyecto, por lo que usaremos el formato de plantilla index.md para comunicar los datos almacenados en el proyecto.

Por ejemplo, así es como se ve al extraer item.header a través de una declaración de bucle para:

div{%- for item in sheet.content -%}  h1{{ item.header }} /h1{%- endfor -%}/div

Si está utilizando Nunjucks o cualquier otro motor de plantillas, deberá extraer los datos en consecuencia.

Finalmente, desarrollamos esto:

npm run build

Tenga en cuenta que querrá una distcarpeta en el proyecto donde el proceso de compilación pueda enviar los activos compilados.

¡Pero eso no es todo! Si editamos la Hoja de cálculo de Google, no veremos ninguna actualización en nuestro sitio. Ahí es donde entra Zapier. Podemos “zapear” la hoja de Google y Netlify para que una actualización de la hoja de Google active una implementación desde Netlify.

Suponiendo que tiene una cuenta de Zapier en funcionamiento, podemos crear el zap otorgando permisos para que Google y Netlify se comuniquen entre sí y luego agregando activadores.

¿La receta que estamos buscando? Estamos conectando Google Sheets a Netlify para que cuando se produzca una "fila de hoja nueva o actualizada", Netlify inicie una implementación. Es realmente una especie de trato del tipo "configúrelo y olvídese".

¡Sí, allá vamos! Tenemos un sitio estático de alto rendimiento que toma sus datos de Google Sheets y los implementa automáticamente cuando se realizan actualizaciones en la hoja.