Einstieg in die Airtable API

Die Airtable-Webanwendung (Airtable) ist ziemlich raffiniert. Sie können sie wie eine Tabellenkalkulation verwenden, aber sie ist auch für viele andere Dinge nützlich. Das Raffinierteste daran ist für mich, dass sie eine API hat, sodass Sie sie wie eine Datenbank behandeln können.

Ich habe darüber nachgedacht, wöchentliche Notizen für die verschiedenen Teams zu erstellen, mit denen ich bei Gusto arbeite, damit sie lesen können, woran das Designsystem-Team arbeitet, was wir behoben haben und welche Fehler uns begegnet sind, die andere Designer und Ingenieure in unserem Unternehmen betreffen könnten. Ich habe ein paar Stunden damit verbracht, darüber nachzudenken, wie wir Airtable nutzen könnten, um viele Daten zu sammeln und dann über seine API diese Informationen zu extrahieren und in einer Webanwendung anzuzeigen.

Hier ist ein Beispiel dafür, was wir am Ende bauen werden, nämlich im Grunde eine React-Webanwendung, die Airtable als eine raffinierte Art von CMS nutzt.

Um zu beginnen, müssen wir zum Terminal gehen und Folgendes ausführen (stellen Sie aber vorher sicher, dass npm installiert ist).

npx create-react-app airtable-test

Dadurch wird ein neues Verzeichnis namens airtable-test erstellt, in dem wir unsere kleine React-App erstellen werden. Wenn wir nach Abschluss der Installation yarn start im Terminal ausführen, sehen wir die Standardseite für das Projekt.

Und wenn wir src/App.js in diesem Verzeichnis airtable-test öffnen, können wir sehen, wie diese Seite mit React gerendert wird.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
     <div>
       <header>
         <img src="{logo}" alt="logo" />
         <p>Edit src/App.js and save to reload.</p>
         <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">Learn React</a>
       </header>
     </div>
    );
  }
}

export default App;

Jetzt, da wir React zum Laufen gebracht haben, können wir mit der Installation von airtable im Terminal fortfahren, was uns die Interaktion mit der Airtable API ermöglicht.

npm i airtable

Sobald wir das getan haben, müssen wir ein Airtable-Konto erstellen und ein Projekt anlegen. Wir sollten am Ende etwas Ähnliches wie diese Tabelle haben.

Nun können wir zu airtable.com/api gehen und unser Projekt auswählen, damit es als Datenquelle dient, aus der wir ziehen. In diesem Fall habe ich "Design Systems Projects" ausgewählt, was Sie hier ganz unten sehen können.

Dies führt uns zu einer praktischen Dokumentations-Website, die uns eine unglaublich einfach zu lesende API für unser spezifisches Projekt liefert! Wenn wir nach unten scrollen, finden wir unseren API-Schlüssel, den wir zum Zugriff auf diese Daten benötigen, sowie viele Beispiele, die wir verwenden können, um die zurückgegebenen Daten zu bearbeiten.

Gehen wir zurück zu App.js in unserem Verzeichnis airtable-test, löschen wir den gesamten Code in dieser Datei und ersetzen ihn durch Folgendes.

import React, { Component } from 'react';
import Airtable from 'airtable';
const base = new Airtable({ apiKey: 'XXXXXXXXXXX' }).base('XXXXXXXXXXX');

Stellen Sie sicher, dass Sie die Xs durch die Details ersetzen, die Sie in der gerade geöffneten Airtable API-Dokumentation sehen können. Aber nachdem wir die gesamte Einrichtung abgeschlossen haben, können wir uns endlich der Erstellung unserer Benutzeroberfläche widmen, indem wir Daten aus unserer Tabelle abrufen.

In App.js können wir mit der Konstruktion der App-Komponente beginnen.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: []
    };
  }
  render() {
    return {<div>Hello</div>}
  }
}

Das bewirkt vorerst nur, dass der Zustand der App eingerichtet und "Hello" auf der Seite gerendert wird. Als Nächstes fügen wir jeden Datensatz aus Airtable zu diesem Zustand hinzu.

Als Erstes ist es wichtig zu beachten: In componentDidMount() werden wir Updates auswählen, was nur eine Möglichkeit ist, Airtable mitzuteilen, dass wir die Tabelle namens Updates wünschen. Stellen Sie sicher, dass dieser Name derselbe ist wie der Name der Tabelle. In dieser Funktion werden wir auch alle Datensätze oder Zeilen unserer Tabelle durchlaufen.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: []
    };
  }
  componentDidMount() {
    base('Updates').select({view: 'Grid view'})
    .eachPage(
      (records, fetchNextPage) => {
        this.setState({
          records
        });
        console.log(records);
        fetchNextPage();
      }
    );
  }
  render() {
    return (
     <div>
       <div>Hello</div>
     </div>
    )
  }
}

fetchNextPage() ist die Art und Weise, wie die Airtable API uns den nächsten Datensatz in unserer Tabelle liefert, und es ist raffiniert, dass sie weiterläuft, bis keine Datensätze mehr vorhanden sind. Auch hier tun wir noch nichts mit diesen Daten; wir wollen zu diesem Zeitpunkt nur sicherstellen, dass alles korrekt funktioniert.

Öffnen Sie die Konsole in den Entwicklertools, und wir sollten etwas wie das hier sehen.

Array(4) [ {…}, {…}, {…}, {…} ]

Und wenn wir uns jedes der Objekte in diesem Array ansehen, sollten wir alle Daten aus der Tabelle finden! Dieses Stück Arbeit fühlt sich für mich immer magisch an.

Nun, als Nächstes können wir unsere render()-Funktion wie folgt aktualisieren:

render() {
  return (
   <div>
     {this.state.records.length > 0 ? ( this.state.records.map((record, index) =>
       <div>
         <h2>{record.fields['Date']}</h2>
         {record.fields['UI Kit']} {record.fields['Component Library']}
       </div>
      ) ) : (
        <p>Loading...</p>
      )}
    </div>
  )
}

Wir werden den zuvor eingerichteten Zustand durchlaufen und dann für jede Spalte unserer Tabelle den record.fields[] rendern. Wir haben eine Spalte für Datum, UI-Kit und Komponentenbibliothek, und sobald wir unsere App.js mit dem obigen Code aktualisiert haben, sollten wir den gesamten Inhalt unserer Tabelle sehen!

Es ist wie Magie! Aber warum sehen diese Daten so seltsam aus? Nun, das liegt daran, dass ich Markdown in jede Zelle schreiben wollte, also müssen wir jetzt einen Parser verwenden, um diese Daten in gutes altes HTML umzuwandeln. Zuerst müssen wir jedoch zurück zum Terminal gehen.

npm i showdown 

showdown wird uns helfen, all das Markdown zu parsen, das wir in unserer Airtable-Tabelle geschrieben haben. Nach der Installation müssen wir es nur noch am Anfang unserer App.js-Datei importieren, so:

import showdown from 'showdown';
const markdownConverter = new showdown.Converter();

Nach der Funktion componentDidMount() können wir eine weitere Funktion erstellen, die unser HTML mit showdown erstellt.

createHTML(markdown){
  return(
    markdownConverter.makeHtml(markdown)
  )
}

Es ist ein bisschen provisorisch, aber es gibt mir das Gefühl, dass der Code auf diese Weise etwas ordentlicher ist. Jetzt können wir unsere render()-Funktion aktualisieren.

  render() {
  return (
    <div className="App">
      {this.state.records.length > 0 ? (
        this.state.records.map((record, index) =>
          <div key={index}>
            <h2>{new Date(record.fields['Date']).toISOString().split('T', 1)}</h2>
            <div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['UI Kit'])}} />
            <div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['Component Library'])}} />
          </div>
        )
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Wir tun hier ein paar neue Dinge: Wir verwenden dangerouslySetInnerHTML in jedem Div, das wiederum unsere createHTML-Funktion verwendet, um die Daten aus jeder Spalte (insbesondere aus den Spalten UI Kit und Component Library) zu konvertieren. Wir konvertieren auch die Daten jedes Zeilen-Datums in Überschriften, um die Lesbarkeit zu verbessern.

Und damit sind wir so gut wie fertig! Hier ist die endgültige App.js.

import React, { Component } from 'react';
import Airtable from 'airtable';
import showdown from 'showdown';

const markdownConverter = new showdown.Converter();

const base = new Airtable({ apiKey: 'xxxxxxx' }).base('xxxxxxx');

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      records: []
    };
  }
  componentDidMount() {
    base('Updates').select({view: 'Grid view'})
    .eachPage(
      (records, fetchNextPage) => {
        this.setState({
          records
        });
        fetchNextPage();
      }
    );
  }
  createHTML(markdown){
    return(
      markdownConverter.makeHtml(markdown)
    )
  }
  render() {
    return (
      <div className="App">
        {this.state.records.length > 0 ? (
          this.state.records.map((record, index) =>
            <div key={index}>
              <h2>{new Date(record.fields['Date']).toISOString().split('T', 1)}</h2>
              <div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['UI Kit'])}} />
              <div dangerouslySetInnerHTML={{__html: this.createHTML(record.fields['Component Library'])}} />
            </div>
          )
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

export default App;

Es gibt immer noch viele Updates, die wir machen könnten, um die Dinge zu verbessern. Ich habe einen ersten Versuch mit dem Styling gemacht, aber wir möchten wahrscheinlich Dinge tun wie das Datumsformat verbessern und vielleicht eine Art Anzeige haben, welche Updates sich auf welche Zeilen in der Tabelle beziehen. Vielleicht könnten wir sogar einblenden, welche Informationen angezeigt werden sollen, je nachdem, ob Sie ein Designer oder ein Ingenieur sind.

Auf jeden Fall! Ich denke, das ist ein guter Anfang, um sich mit der Airtable API vertraut zu machen, und ich würde mich freuen, in den Kommentaren unten zu hören, wie Sie sie verwenden.