Wie man Airtable als Front-End-Entwickler nutzt

Ich bin bei einem kürzlichen Hackathon-ähnlichen Event auf Airtable gestoßen, als ein Kollege vorschlug, es zur Speicherung und Nutzung unserer Daten zu verwenden. Ich war sehr davon angetan. Zum ersten Mal hatte ich das Gefühl: „Das ist eine Datenbank für mich. Das will ich von einem Datenspeichersystem.“

Kurz gesagt...

Airtable ermöglicht es Ihnen, Tabellenkalkulationen zu erstellen. Jede Tabellenkalkulation ist eine Datenbank.

Stellen Sie sich vor, Sie erstellen einen „Projektfortschrittsverfolgung“. Sie möchten Dinge wie den Namen des Projekts, ob es abgeschlossen ist oder nicht, die Projektkategorie und einige Fotos speichern.

Das wären vier Spalten in der Tabellenkalkulation: Name (Zeichenkette), Abgeschlossen (Kontrollkästchen/Boolesch), Kategorie (Mehrfachauswahl), Fotos (Dateien).

Jede Zeile in der Tabellenkalkulation ist dann ein Eintrag in der Datenbank.

Sie können diese Daten jetzt nicht nur in der schönen Benutzeroberfläche von Airtable anzeigen, sondern auch programmatisch darauf zugreifen. Sie erhalten großartige JSON-APIs für alle CRUD-Aktionen: Erstellen, Lesen, Aktualisieren, Löschen.

Lassen Sie uns etwas bauen: Eine Umfrage!

Wir sind Front-End-Entwickler, also lassen Sie uns etwas Funktionales bauen. Eine Umfrage ist ein einfaches Beispiel für etwas, das wir gestalten und bauen können, und braucht eine Datenbank, um nützlich zu sein. Airtable kann helfen!

Wie wäre es mit einem Formular, bei dem Sie für Ihr Lieblingsemoticons abstimmen?

<form action="#0" id="voting-form" class="voting-form">
  <h1>Which of these emojis is your favorite?</h1>
  <div>
    <select name="emoji_choice" id="emoji_choice">
      <option value="&#x1f46f;">&#x1f46f;</option>
      <option value="&#x1f351;">&#x1f351;</option>
      <option value="&#x1f4a5;">&#x1f4a5;</option>
      <option value="&#x1f355;">&#x1f355;</option>
      <option value="&#x2620;&#xfe0f;">&#x2620;&#xfe0f;</option>
    </select>
  </div>
  <div>
    <input type="submit" value="Vote">
  </div>
</form>

Senden Sie die Stimmen zur Speicherung an Airtable

Wenn der Benutzer unser Formular abschickt, erstellen wir einen neuen Eintrag in unserer Datenbank (Airtable-Tabellenkalkulation). Wir senden die Daten per POST, direkt über JavaScript, per Ajax. Wir verwenden hier Axios, da es eine nette, abhängigkeitsfreie Ajax-Bibliothek ist.

var form = document.querySelector("#voting-form");
var select = document.querySelector("#emoji_choice");

// When the form is submitted...
form.addEventListener("submit", function(event) {
  event.preventDefault();

  // POST the data
  axios.post(airtable_write_endpoint, {
    "fields": {
      "Emoji Choice": select.options[select.selectedIndex].value
    }
  });

});

Erhalten Sie die Ergebnisse von Airtable

Nun möchten wir die Ergebnisse der Umfrage als Diagramm anzeigen. SVG ist großartig dafür. Wir verwenden die D3.js Bibliothek, um uns beim programmatischen Erstellen des Diagramms zu helfen. Wir könnten damit auch einfach nur einige <div>s erstellen, da das Diagramm aus einfachen Rechtecken besteht, aber die Verwendung von D3 öffnet die Tür für zukünftige Raffinessen.

Lassen Sie uns eine Funktion erstellen, die wir aufrufen können, um die Daten zu erhalten und das Diagramm zu erstellen

function getData() {
  // zero out data
  pollData = {
    "👯": 0,
    "🍑": 0,
    "💥": 0, 
    "🍕": 0, 
    "☠️": 0
  };
  
  // GET the data
  axios
    .get(airtable_read_endpoint)
    .then(function(result) {
      result.data.records.forEach(function(element, index) {
        pollData[element.fields["Emoji Choice"]]++;
      }); 
}

Erstellen Sie das Diagramm mit den Daten

Wir können D3.js ein Array von Daten übergeben und es kann ein Diagramm erstellen

function buildChart(data) {  
  var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 400]);
  
  d3
    .select(".chart")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { 
      return x(d) + "px"; 
    })
    .text(function(d, i) {
      return emojis[i] + " " + d; 
    });
}

Mit ein wenig CSS-Färbung

.chart {
  padding: 20px;
}
.chart div {
  font-size: 20px;
  text-align: right;
  padding: 5px;
  margin: 0 0 3px 0;
  color: white;
}
.chart div:nth-of-type(1) {
  background-color: #FDBE1A;
}
.chart div:nth-of-type(2) {
  background-color: #F2B6A0;
}
.chart div:nth-of-type(3) {
  background-color: #FFD85A;
}
.chart div:nth-of-type(4) {
  background-color: #830C07;
}
.chart div:nth-of-type(5) {
  background-color: #999999;
}

Erhalten wir Ergebnisse!

Live-Demo

In dieser Live-Demo reihen wir die oben geschriebenen Funktionen aneinander, damit sie zusammenarbeiten.

Siehe den Pen Airtable Emoji Poll von Chris Coyier (@chriscoyier) auf CodePen.

Wichtige Dinge, die man über die API wissen sollte

Schlüsselgeheimhaltung

Die obige Demo ist *vollständig im Front-End*! Das gefällt mir, aber Sie sollten wissen, dass dabei der API-Schlüssel für diese Datenbank offengelegt wird. Das möchten Sie für nichts Öffentlich Bedeutsames tun, aber für interne Zwecke könnte es in Ordnung sein.

Um Ihren Schlüssel geheim zu halten, würden Sie die API-Aufrufe vom Backend aus machen. Diese Art von Vorgang wird üblicherweise als „API-Proxy“ oder „API-Wrapper“ bezeichnet. Sie würden einen einfachen Code schreiben, der Ajax zu *diesem* aufruft, und *dieser* macht die Anfragen an die API.

Wie es der Zufall will, hat Airtable einen Beispiel-API-Proxy (in Ruby), den Sie sich ansehen können. Hier ist ein weiteres Beispiel in PHP, das Sie sich ansehen könnten.

Die Dokumentation ist großartig

Sie zeigen die API-Dokumentation *in Bezug auf Ihre Datenbanken an*! Die Beispiel-URLs und Parameter sind also die echten, die Sie verwenden.

Wir hätten die Demo vielleicht effizienter gestalten können, indem wir den API-Parameter filterByFormula ausprobiert und ihn angewiesen hätten, uns alle Datensätze zurückzugeben, die einem bestimmten Emoji entsprechen, und die Anzahl zu überprüfen, anstatt selbst zu zählen.

5 Anfragen pro Sekunde

Airtable ist nicht wirklich für massive Produktionsdatenspeicherung mit hoher Leistung gedacht. Ich bin sicher, das ist keine Überraschung. Airtable ist eher für Sie und Ihr Team gedacht als für einen Datenspeicher für Ihr Startup.

Airtable bietet Ihnen auch Formulare

In unserer Demo haben wir unser eigenes Formular erstellt. Das ist nützlich, wenn Sie völlig benutzerdefinierte Dinge tun müssen, aber wir mussten das nicht. Airtable ermöglicht es Ihnen, verschiedene „Ansichten“ Ihrer Datentabellenkalkulationen zu erstellen, einschließlich einer „Formular“-Ansicht.

Sie können das Formular nach Belieben anpassen und Personen Links dazu senden oder das Formular direkt auf Ihrer eigenen Website einbetten. Ja! Ein Formularersteller, der sich ideal zum Sammeln strukturierter Daten eignet!

Wenn das, was Sie bauen, ziemlich datumspezifisch ist, können Sie auch Kalenderansichten erstellen, um Daten auf diese Weise anzuzeigen und damit zu interagieren.

Bauen Sie los

Was fällt Ihnen ein, wenn Sie an das Potenzial einfacher und benutzerfreundlicher Datenspeicherung und eines Tools wie Airtable denken?