Creación de una página web editable con hojas de cálculo de Google y Tabletop.js

Levante la mano si alguna vez se ha enfrentado a interminables solicitudes de revisión de contenido por parte de sus clientes. No es que los cambios en sí sean difíciles, pero ¿no sería menos complicado si los clientes pudieran hacer las revisiones ellos mismos? Eso ahorraría a todos un tiempo valioso y le permitiría centrar su atención en tareas más importantes.

En el caso de que el sitio esté construido con archivos planos (por ejemplo, HTML, CSS y JavaScript) en lugar de un CMS (por ejemplo, WordPress), necesitará algún otro tipo de solución para editar el contenido sin editar directamente esos archivos.

Tabletop.js nos permite utilizar Google Spreadsheets como una especie de almacén de datos, tomando la hoja de cálculo y haciéndola fácilmente accesible a través de JavaScript. Proporciona los datos de una hoja de cálculo de Google en formato JSON, que luego se pueden usar en una aplicación, como extraer datos de cualquier otra API. En este artículo, agregaremos datos a una hoja de cálculo y luego configuraremos Tabletop para que pueda extraer datos de la fuente de datos a nuestro HTML. ¡Vayamos directamente al código!

Este artículo se basará en un sitio del mundo real que construí cuando inicialmente intentaba entender Tabletop. Por cierto, siempre recomiendo a los desarrolladores que creen aplicaciones con cualquier tipo de tecnología que estén intentando aprender, incluso después de ver o leer tutoriales.

Usaremos la demostración que hice, con su código fuente y hoja de cálculo . Lo primero que necesitaremos es una cuenta de Google para acceder a la hoja de cálculo.

Abra una nueva hoja de cálculo e ingrese sus propios valores en las columnas como la mía . 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 del sitio web. Como en headeres el nombre de referencia y Please edit me!es el contenido real en la primera columna.

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.

Dicho esto, hay un vínculo que necesitamos. Al hacer clic en el gran botón verde “Compartir” en la esquina superior derecha de la página, se activará un modo que proporciona un enlace para compartir a la hoja de cálculo y también nos permite establecer permisos. Tomemos ese enlace y configuremos los permisos para que cualquiera que tenga el enlace pueda ver la hoja de cálculo. De esa manera, nadie más editará los datos sin darse cuenta.

Ahora es el momento de inicializar Tabletop en nuestro proyecto. Vinculémonos a su archivo minimizado alojado. De manera similar, podríamos copiar el código minificado sin formato, colocarlo en nuestro propio archivo de script y alojarlo nosotros mismos.

Aquí está el archivo del documento vinculado al CDN de Tabletop y con el código extraído de la documentación .

script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'/scriptscript type='text/javascript'      var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1sbyMINQHPsJctjAtMW0lCfLrcpMqoGMOJj6AN-sNQrc/pubhtml';  function init() {    Tabletop.init( {      key: publicSpreadsheetUrl,      callback: showInfo,      simpleSheet: true     } )  }  function showInfo(data, tabletop) {    alert('Successfully processed!')    console.log(data);  }  window.addEventListener('DOMContentLoaded', init)/script

Reemplace la publicSpreadsheetUrlvariable en el código con el enlace para compartir de la hoja de cálculo. Mira, ¡te dije que lo necesitaríamos!

Ahora a la parte interesante. Démosle ID únicas al HTML y dejémoslas vacías. Luego, dentro de la showInfofunción, usaremos el forEach()método para recorrer cada columna de la hoja de cálculo mientras la equiparamos con el ID.innerHTMLmétodo correspondiente que, a su vez, carga los datos de la hoja de cálculo en la etiqueta HTML a través del ID.

function showInfo(data, tabletop) {  data.forEach(function(data) {    header.innerHTML = data.header;    header2.innerHTML = data.header2;    body.innerHTML = data.body;    body2.innerHTML = data.body2;    body3.innerHTML = data.body3;    body4.innerHTML = data.body4;    body5.innerHTML = data.body5;    body6.innerHTML = data.body6;    body7.innerHTML = data.body7;    body8.innerHTML = data.body8;    body9.innerHTML = data.body9;    body10.innerHTML = data.body10;    body11.innerHTML = data.body11;    body12.innerHTML = data.body12;    body13.innerHTML = data.body13;    body14.innerHTML = data.body14;    body15.innerHTML = data.body15;    body16.innerHTML = data.body16;    body17.innerHTML = data.body17; });}window.addEventListener('DOMContentLoaded', init)

Esta es una sección de HTML de mi demostración que muestra las etiquetas vacías. Esta es una buena manera de hacerlo, pero podría abstraerse más creando los elementos HTML directamente desde JavaScript.

!-- Start Section One: Keep track of your snippets --section  div    h3/h3    p          /p  /div  div    divimg src="img/image-computer.png" alt="computer" //div    div      div        h4/h4        p        /p      /div      div        h4/h4        p/p      /div      div        h4/h4        p        /p      /div    /div  /div/section

¡Oye, mira eso! Ahora podemos cambiar el contenido de un sitio web en tiempo real editando el contenido en la hoja de cálculo.