Eine bearbeitbare Webseite mit Google Tabellen und Tabletop.js erstellen

Wer von Ihnen hat schon einmal endlose Inhaltsänderungswünsche von seinen Kunden erhalten? Es ist nicht so, dass die Änderungen selbst schwierig wären, aber wäre es nicht einfacher, wenn die Kunden die Änderungen selbst vornehmen könnten? Das würde jedem wertvolle Zeit sparen und Ihnen erlauben, sich wichtigeren Aufgaben zuzuwenden.

Wenn die Website auf statischen Dateien (z. B. HTML, CSS und JavaScript) anstelle eines CMS (z. B. WordPress) basiert, benötigen Sie eine andere Lösung, um den Inhalt zu bearbeiten, ohne diese Dateien direkt zu ändern.

Tabletop.js ermöglicht es uns, Google Tabellen als eine Art Datenspeicher zu nutzen, indem die Tabelle genommen und sie über JavaScript leicht zugänglich gemacht wird. Es stellt die Daten aus einer Google Tabelle im JSON-Format bereit, die dann in einer Anwendung verwendet werden können, ähnlich wie Daten von jeder anderen API abgerufen werden. In diesem Artikel fügen wir Daten zu einer Tabelle hinzu und richten dann Tabletop ein, damit es Daten aus der Datenquelle in unser HTML ziehen kann. Lassen Sie uns direkt zum Code kommen!

Dieser Artikel basiert auf einer realen Website, die ich erstellt habe, als ich Tabletop zu verstehen versuchte. Ich rate Entwicklern übrigens immer, Anwendungen mit jeder Form von Technologie zu erstellen, die sie zu lernen versuchen, auch nachdem sie Tutorials angesehen oder gelesen haben.

Wir verwenden das Demo, das ich gemacht habe, mit seinem Quellcode Code und der Tabelle. Das Erste, was wir brauchen, ist ein Google-Konto, um auf die Tabelle zugreifen zu können. 

Öffnen Sie eine neue Tabelle und geben Sie Ihre eigenen Werte in die Spalten ein, genau wie in meiner. Die erste Zelle jeder Spalte ist die Referenz, die später in unserem JavaScript verwendet wird, und die zweite Zelle ist der eigentliche Inhalt für die Website. So ist beispielsweise header der Referenzname und Bitte bearbeiten Sie mich! der eigentliche Inhalt in der ersten Spalte.

Als Nächstes veröffentlichen wir die Daten im Web, indem wir im Menü auf Datei → Im Web veröffentlichen klicken.

Ein Link wird bereitgestellt, aber er ist für uns technisch nutzlos, daher können wir ihn ignorieren. Wichtig ist, dass die Tabelle (und ihre Daten) nun öffentlich zugänglich sind, sodass wir sie für unsere App abrufen können.

Dafür benötigen wir jedoch einen Link. Wenn Sie auf die große grüne Schaltfläche "Teilen" in der oberen rechten Ecke der Seite klicken, wird ein Modal geöffnet, das einen teilbaren Link zur Tabelle bereitstellt und es uns ermöglicht, auch die Berechtigungen festzulegen. Nehmen wir diesen Link und stellen die Berechtigungen so ein, dass jeder mit dem Link die Tabelle einsehen kann. So werden die Daten nicht versehentlich von jemand anderem bearbeitet.

Jetzt ist es an der Zeit, Tabletop in unserem Projekt zu initialisieren. Wir verknüpfen uns mit ihrer gehosteten minifizierten Datei. Ebenso könnten wir den rohen, minifizierten Code kopieren, in unsere eigene Skriptdatei einfügen und ihn selbst hosten.

Hier ist die Dokumentendatei, die mit dem CDN von Tabletop verknüpft ist, und mit Code aus der Dokumentation.

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>

<script 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>

Ersetzen Sie die Variable publicSpreadsheetUrl im Code durch den teilbaren Link aus der Tabelle. Sehen Sie, ich sagte doch, dass wir den brauchen würden!

Nun zum interessanten Teil. Geben wir dem HTML eindeutige IDs und lassen sie leer. Dann verwenden wir innerhalb der Funktion showInfo die Methode forEach(), um jede Tabellenspalte zu durchlaufen und sie mit der entsprechenden Methode ID.innerHTML gleichzusetzen, die wiederum die Daten der Tabelle durch die ID in das HTML-Tag lädt.

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)

Dies ist ein Ausschnitt aus dem HTML meiner Demo, der die leeren Tags zeigt. Das ist ein guter Ansatz, aber es könnte weiter abstrahiert werden, indem die HTML-Elemente direkt aus JavaScript erstellt werden.

<!-- Start Section One: Keep track of your snippets -->
<section class="feature">
  <div class="intro-text">
    <h3 id="body"></h3>
    <p id="body2">
      
    </p>
  </div>
  <div class="track-snippets">
    <div class="snippet-left"><img src="img/image-computer.png" alt="computer" /></div>
    <div class="snippet-right">
      <div>
        <h4 id="body3"></h4>
        <p id="body4">
        </p>
      </div>
      <div>
        <h4 id="body5"></h4>
        <p id="body6"></p>
      </div>
      <div>
        <h4 id="body7"></h4>
        <p id="body8">
        </p>
      </div>
    </div>
  </div>
</section>

Hey, schau mal! Jetzt können wir den Inhalt einer Website in Echtzeit ändern, indem wir den Inhalt in der Tabelle bearbeiten.