Erstellen von Live-Dashboards mit Airtable und React

Veröffentlicht: 2022-03-11

Unabhängig davon, ob es sich bei einem Unternehmen um ein großes Unternehmen oder ein aufstrebendes Startup handelt, ist das Sammeln von Daten von Benutzern und Kunden sowie das Berichten oder Visualisieren dieser Daten für das Unternehmen von entscheidender Bedeutung.

Ich habe kürzlich mit einem Telemedizin-Startup mit Sitz in Brasilien zusammengearbeitet. Seine Mission ist es, Fernpflege und -überwachung bereitzustellen, indem Patienten mit medizinischen Fachkräften und Gesundheitscoaches verbunden werden. Der Kernbedarf bestand darin, eine Schnittstelle für die Trainer und Gesundheitsexperten zu schaffen, um die Informationen eines Patienten und die wichtigsten Metriken in Bezug auf seine spezielle Situation einfach zu überprüfen: ein Dashboard.

Geben Sie Typeform und Airtable ein.

Schriftform

Typeform ist eines der wichtigsten Datenerfassungstools, das Benutzern, die eine Umfrage ausfüllen, reaktionsschnelle Weberlebnisse ermöglicht. Es verfügt außerdem über mehrere Funktionen, die Umfragen intelligenter machen, insbesondere wenn sie kombiniert werden:

  • Logiksprünge
  • Versteckte Felder

Umfragen können über URLs geteilt werden, die mit Werten für die versteckten Felder vorbelegt werden können, die dann verwendet werden können, um Logiksprünge zu implementieren und das Verhalten der Umfrage für den Benutzer mit dem Link zu ändern.

Airtable verwendet

Airtable ist ein Tabellenkalkulations-Datenbank-Hybrid und eine kollaborative Cloud-Plattform. Sein Fokus auf Point-and-Click-Funktionalität bedeutet, dass technisch nicht versierte Benutzer es ohne Programmierung konfigurieren können. Airtable hat eine Vielzahl von Anwendungsfällen in jedem Unternehmen oder Projekt.

Sie können eine Airtable Base verwenden für:

  • CRM (Kundenbeziehungsmanagement)
  • HRIS (Personalinformationssystem)
  • Projektmanagement
  • Inhaltsplanung
  • Veranstaltungsplanung
  • Benutzer-Feedback

Es gibt noch viele weitere potenzielle Anwendungsfälle. Sie können Airtable-Fallstudien hier erkunden.

Wenn Sie mit Airtable nicht vertraut sind, gliedert sich das konzeptionelle Datenmodell wie folgt:

  • Arbeitsbereich - Bestehend aus Sockeln
  • Basis - Bestehend aus Tabellen
  • Tabelle - Bestehend aus Feldern (Spalten) und Zeilen
  • Ansicht – Eine Perspektive auf Tabellendaten mit optionalen Filtern und reduzierten Feldern
  • Feld - Eine Spalte einer Tabelle mit einem Feldtyp; Weitere Informationen zu Feldtypen finden Sie hier

Abgesehen von der Bereitstellung einer Cloud-gehosteten Datenbank mit vertrauten Tabellenkalkulationsfunktionen sind hier einige der Gründe, warum die Plattform so leistungsfähig ist:

Darstellung von technischen und nicht-technischen Benutzern, die mit Airtable arbeiten.

Für technisch nicht versierte Benutzer bietet Airtable:

  • Eine einfach zu bedienende Front-End-Oberfläche
  • Automatisierungen, die mit Point-and-Click-Konfiguration erstellt werden können, um E-Mails zu senden, Datenzeilen zu verarbeiten, Termine in Kalendern zu planen und mehr
  • Mehrere Arten von Ansichten, die es Teams ermöglichen, an derselben Basis und denselben Tabellen zusammenzuarbeiten
  • Airtable-Apps, die vom Marktplatz installiert werden können, um eine Basis aufzuladen

Für Entwickler bietet Airtable:

  • Eine gut dokumentierte Backend-API
  • Eine Skriptumgebung, die es Entwicklern ermöglicht, Aktionen innerhalb einer Base zu automatisieren
  • Automatisierungen, die auch benutzerdefinierte entwickelte Skripte auslösen können, die in der Airtable-Umgebung ausgeführt werden, wodurch die Fähigkeiten von Automatisierungen erweitert werden

Hier erfahren Sie mehr über Airtable.

Erste Schritte: Typeform zu Airtable

Typeform-Umfragen wurden bereits vom Kunden konfiguriert, und der nächste Schritt bestand darin, zu planen, wie diese Daten in Airtable landen und dann in ein Dashboard umgewandelt werden sollten. Beim Erstellen von Dashboards auf Basis einer Datenbank sind viele Fragen zu berücksichtigen: Wie sollten wir die Daten strukturieren? Welche Daten müssen vor der Visualisierung verarbeitet werden? Sollen wir die Base mit Google Sheets synchronisieren und Google Data Studio verwenden? Sollten wir exportieren und ein anderes Drittanbieter-Tool finden?

Zum Glück für Entwickler bietet Airtable nicht nur Automatisierungen und Skripte zur Handhabung der Datenverarbeitungsschritte, sondern hat es auch ermöglicht, benutzerdefinierte Anwendungen und Schnittstellen auf einer Airtable-Basis mit Airtable-Apps zu erstellen.

Benutzerdefinierte Apps in Airtable

Benutzerdefinierte Apps in Airtable gibt es seit der Veröffentlichung des Airtable Blocks SDK Anfang 2018 und wurden kürzlich in Apps umbenannt. Die Veröffentlichung von Blocks war insofern enorm, als es bedeutete, dass Entwickler nun die Möglichkeit hatten,, wie Airtable es ausdrückt, „einen unendlich rekombinierbaren Lego-Bausatz“ zu entwickeln.

In jüngerer Zeit ermöglichte der Airtable Marketplace mit dem Wechsel zu Apps auch das öffentliche Teilen von Apps.

Airtable Apps bieten Unternehmen ein unendlich neu kombinierbares Lego-Kit, das sie an ihre Bedürfnisse anpassen können.

Um eine benutzerdefinierte App in Airtable zu erstellen, muss ein JavaScript-Entwickler wissen, wie man React verwendet, eine der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen. Airtable bietet eine Komponentenbibliothek mit funktionalen React-Komponenten und Hooks, die eine große Hilfe beim schnellen Erstellen einer konsistenten Benutzeroberfläche und beim Bestimmen sind, wie Sie den Status innerhalb der App und ihrer Komponenten verwalten.

Weitere Informationen finden Sie im Artikel „Erste Schritte“ von Airtable und Beispiele für Apps finden Sie in Airtable auf GitHub.

Airtable-Dashboard-Anforderungen

Nach Durchsicht der Dashboard-Modelle mit dem Kundenteam waren die zu verwendenden Datentypen klar. Wir bräuchten eine Reihe von Dashboard-Komponenten, die als Text auf dem Dashboard angezeigt würden, sowie Diagramme verschiedener Metriken, die im Laufe der Zeit verfolgt werden könnten.

Trainer und Mediziner mussten in der Lage sein, für jeden Patienten ein benutzerdefiniertes Dashboard zu erstellen, also brauchten wir eine flexible Möglichkeit zum Hinzufügen und Entfernen von Diagrammen. Andere statische Daten in Bezug auf jeden Patienten würden ungeachtet des ausgewählten Patienten angezeigt werden.

In diesem Fall reduzierten sich die Dashboard-Abschnitte auf:

  • Allgemeine Informationen – Patientenname, E-Mail, Telefonnummer, Kontaktpräferenz, Geburtsdatum, Alter
  • Ziele – Ziele, die der Patient basierend auf den Umfrageergebnissen hat
  • Einige Statistiken – BMI, Größe und Gewicht
  • Verwendung von Medikamenten - Auflistung aller verschreibungspflichtigen Medikamente, die bereits von einem Patienten verwendet wurden
  • Familiengeschichte von Erkrankungen – Hilfreich bei der Diagnose bestimmter Erkrankungen
  • Diagramme – Ein Abschnitt, in dem der Benutzer des Airtable -Dashboards ein Diagramm hinzufügen und konfigurieren kann, welche Metrik es im Laufe der Zeit visualisieren würde

Bild zeigt ein Airtable-Dashboard-Mockup.

Eine Möglichkeit, alle Abschnitte mit Ausnahme der Diagramme anzusprechen, besteht darin, alle Spalten für Ziele, Medikamenteneinnahme und Familienanamnese fest in das Dashboard zu codieren. Dies würde es dem Kundenteam jedoch nicht erlauben, neue Fragen zu einer Typeform-Umfrage hinzuzufügen oder eine neue Spalte zu einer Airtable-Tabelle hinzuzufügen, um diese Daten auf dem Dashboard darzustellen, ohne dass ein Entwickler die benutzerdefinierte App aktualisiert.

Eine elegantere und erweiterbare Lösung für diese Herausforderung bestand darin, einen Weg zu finden, Spalten als relevant für einen bestimmten Dashboard-Abschnitt zu markieren und diese Spalten mithilfe der Metadaten abzurufen, die Airtable bei Verwendung der Tabellen- und Feldmodelle verfügbar macht.

Dies wurde erreicht, indem Feldbeschreibungen als Ort verwendet wurden, um eine Spalte aus der Tabelle als relevant für einen Dashboard-Abschnitt zu markieren, der dem Benutzer angezeigt werden soll. Dann konnten wir sicherstellen, dass nur diejenigen mit der Erstellerrolle (die Administratoren) für die Basis die Möglichkeit hatten, diese Feldbeschreibungen zu ändern, um zu ändern, was auf dem Dashboard angezeigt wird. Um diese Lösung zu veranschaulichen, konzentrieren wir uns hauptsächlich auf die Punkte in Allgemeine Informationen und wie man Diagramme präsentiert.

Erstellen eines #TAG# Systems

Angesichts der Dashboard-Abschnitte war es sinnvoll, wiederverwendbare Tags für einige Abschnitte und spezifische Tags für bestimmte Spalten zu erstellen. Für Elemente wie Patientenname, E-Mail und Telefonnummer wurden jeweils #NAME# , #EMAIL# und #PHONE# zur Beschreibung jedes Felds hinzugefügt. Dadurch könnten diese Informationen wie folgt über die Tabellenmetadaten abgerufen werden:

 const name = table ? table.fields.filter(field => field.description?.includes("#NAME#"))

Für Bereiche des Dashboards, die aus vielen getaggten Spalten schöpfen müssten, hätten wir die folgenden Tags für jeden Dashboard-Abschnitt:

  • OBJ - Ziele
  • FAM - Familiengeschichte
  • MED - Verwendung von Medikamenten
  • CAN – Krebsspezifische Familienanamnese
  • CHART - Jede Spalte, die zum Hinzufügen von Diagrammen verwendet werden sollte; muss eine Menge sein

Darüber hinaus war es wichtig, den Namen einer Spalte in einer Tabelle von der Bezeichnung zu trennen, die sie auf dem Dashboard erhalten würde, damit alles, was ein #TAG# erhält, auch die Möglichkeit hat, zwei #LABEL# -Tags in seiner Feldbeschreibung zu erhalten . Eine Feldbeschreibung würde wie folgt aussehen:

Screenshot, der die Verwendung von Tags in einer Feldbeschreibung zeigt.

Falls die #LABEL# -Tags fehlen, zeigen wir den Spaltennamen aus der Tabelle an.

Wir können das in der Beschreibung festgelegte Label mit einer einfachen Funktion wie dieser parsen, nachdem wir das Feld mit dem vorherigen Codebeispiel abgerufen haben:

 // utils.js export const setLabel = (field, labelTag = "#LABEL#") => { const labelTags = (field.description?.match(new RegExp(labelTag, "g")) || []).length; let label; if (labelTags === 2) label = field.description?.split(`${labelTag}`)[1]; if (!label || label?.trim() === '') label = field.name; return {...field, label, name: field.name, description: field.description}; }

Mit diesem #TAG# -System erreichen wir vor allem drei Dinge:

  • Spaltennamen (Felder) in der Tabelle können beliebig geändert werden.
  • Beschriftungen für Daten im Dashboard können sich von Spaltennamen unterscheiden.
  • Dashboard-Abschnitte für Ziele, Medikamentenverbrauch, Familienanamnese und Diagramme können vom Kundenteam aktualisiert werden, ohne eine Codezeile zu berühren.

Beständiger Zustand in Airtable

In React verwenden wir den Zustand und übergeben ihn als Requisiten an Komponenten, um diese Komponente neu zu rendern, wenn sich ihr Zustand ändert. Normalerweise ist dies an einen API-Aufruf gebunden, der eine Dashboard-Komponente antreibt, aber in Airtable haben wir bereits alle Daten und müssen einfach filtern, was wir anzeigen, basierend auf dem Patienten, den wir anzeigen. Wenn wir den Zustand verwenden, werden die Daten außerdem nicht nach einer Aktualisierung im Dashboard selbst gespeichert.

Wie können wir also einen Wert nach der Aktualisierung beibehalten, um ein Dashboard gefiltert zu halten? Glücklicherweise bietet Airtable dafür einen Hook namens useGlobalConfig , in dem es einen Schlüsselwertspeicher für eine App-Installation auf einem Dashboard verwaltet. Wir müssen lediglich die Logik zum Abrufen von Werten aus diesem Schlüsselwertspeicher implementieren, wenn die App geladen wird, um unsere Dashboard-Komponenten zu versorgen.

Noch nützlicher bei der Verwendung des useGlobalConfig -Hooks ist, dass, wenn seine Werte gesetzt sind, die Dashboard-Komponente und ihre untergeordneten Komponenten neu gerendert werden, sodass Sie die globale Konfiguration so verwenden können, als würden Sie eine Zustandsvariable in einer typischen React-Implementierung verwenden.

Einführung in Diagramme

Airtable bietet Beispiele für Diagramme mit seiner Simple Chart App, die React Charts verwendet, einen React-Wrapper auf Chart.js (chart-ception).

In der Simple Chart App haben wir ein Diagramm für die gesamte App, aber in unserer Dashboard-App benötigen wir die Möglichkeit, dass der Benutzer seine eigenen Diagramme zu seinem eigenen Dashboard hinzufügt und daraus entfernt. Darüber hinaus scheint es in Diskussionen mit dem Kundenteam, dass bestimmte Metriken besser auf demselben Diagramm angezeigt werden sollten (wie Messwerte für den diastolischen und systolischen Blutdruck).

Damit haben wir folgende Punkte zu bewältigen:

  • Beständiger Status für das Diagramm jedes Benutzers (oder noch besser mit Global Config)
  • Mehrere Metriken pro Diagramm zulassen

Hier kommt die Leistungsfähigkeit von Global Config zum Tragen, da wir den Schlüsselwertspeicher verwenden können, um die ausgewählten Metriken und alles andere über unsere Diagrammliste zu verwalten. Wenn wir ein Diagramm in der Benutzeroberfläche konfigurieren, wird die Diagrammkomponente selbst aufgrund von Aktualisierungen der globalen Konfiguration neu gerendert. Für den Diagrammabschnitt des Dashboards finden Sie hier eine Übersicht mit den Referenzkomponenten, die sich auf Dashboard charts.js und single chart.js konzentrieren.

Die an jedes Diagramm übergebene Tabelle wird für ihre Metadaten verwendet, um die Felder zu finden, während die übergebenen Datensätze bereits von dem Patienten gefiltert wurden, der in der Dashboard-Komponente der obersten Ebene ausgewählt wurde, die dashboard_charts/index.js .

Beachten Sie, dass die Felder, die als Optionen in der Dropdown-Liste für ein Diagramm aufgeführt sind, mit dem zuvor erwähnten #CHART# -Tag abgerufen werden, mit dieser Zeile in einem useEffect Hook:

 // single_chart/index.js … useEffect(() => { (async () => { ... if (table) { const tempFieldOptions = table.fields.filter(field => field.description?.includes('#CHART#')).map(field => { return { ...setLabel(field), value: field.id } }); setFieldSelectOptions([...tempFieldOptions]); } })(); }, [table, records, fields]); ...

Der obige Code zeigt, wie die zuvor referenzierte setLabel Funktion mit #TAG# verwendet wird, um alles hinzuzufügen, was in den #LABEL# -Tags bereitgestellt wird, und es für die Option in der Feld-Dropdown-Liste anzuzeigen.

Unsere Diagrammkomponente nutzt die von Chart.js bereitgestellten Mehrachsenfunktionen, die mit React Charts angezeigt werden. Wir haben es einfach über die Benutzeroberfläche um die Möglichkeit des Benutzers erweitert, einen Datensatz und einen Diagrammtyp (Linie oder Balken) hinzuzufügen.

Der Schlüssel zur Verwendung von Global Config ist in diesem Fall zu wissen, dass jeder Schlüssel nur eine Zeichenfolge | enthalten kann boolesch | Zahl | null | GlobalConfigArray | GlobalConfigObject (siehe Referenz zum globalen Konfigurationswert).

Wir müssen die folgenden Elemente pro Diagramm warten:

  • chartTitle , der automatisch generiert wird und vom Benutzer umbenannt werden kann
  • fields -Array, in dem jedes Element Folgendes enthält:
    • Feld als fieldId von Airtable
    • chartOption als eine Zeile | Balken, wie in der Chart.js-Dokumentation angegeben
    • color als Airtable-Farbe aus den colorUtils
    • hex als Hex-Code, der sich auf die Airtable-Farbe bezieht

Um dies zu verwalten, fand ich es am bequemsten, diese Daten als Objekt zu stringifizieren, anstatt Global Config-Schlüssel und -Werte ganz nach unten zu setzen. Siehe das Beispiel unten (globalConfig.json im Kern), das globale Konfigurationswerte zum Filtern von Datensätzen nach dem Patienten und einige zugehörige Variablen enthält, die zur Unterstützung einer Typeahead-Filterkomponente verwendet werden (danke an „react-bootstrap-typeahead“):

 { "xCharts": { "chart-1605425876029": "{\"fields\":[{\"field\":\"fldxLfpjdmYeDOhXT\",\"chartOption\":\"line\",\"color\":\"blueBright\",\"hex\":\"#2d7ff9\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425876288": "{\"fields\":[{\"field\":\"fldGJZIdRlq3V3cKu\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425876615": "{\"fields\":[{\"field\":\"fld1AnNcfvXm8DiNs\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldryX5N6vUYWbdzy\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:37:56 AM\"}", "chart-1605425994036": "{\"fields\":[{\"field\":\"fld9ak8Ja6DPweMdJ\",\"chartOption\":\"line\",\"color\":\"blueLight2\",\"hex\":\"#cfdfff\"},{\"field\":\"fldxVgXdZSECMVEj6\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 2:39:54 AM\"}", "chart-1605430015978": "{\"fields\":[{\"field\":\"fldwdMJkmEGFFSqMy\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"},{\"field\":\"fldqwG8iFazZD5CLH\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"}],\"chartTitle\":\"New Chart\"}", "chart-1605430916029": "{\"fields\":[{\"field\":\"fldCuf3I2V027YAWL\",\"chartOption\":\"line\",\"color\":\"blueLight1\",\"hex\":\"#9cc7ff\"},{\"field\":\"fldBJjtRkWUTuUf60\",\"chartOption\":\"line\",\"color\":\"blueDark1\",\"hex\":\"#2750ae\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 4:01:56 AM\"}", "chart-1605431704374": "{\"fields\":[{\"field\":\"fld7oBtl3iiHNHqoJ\",\"chartOption\":\"line\",\"color\":\"blue\",\"hex\":\"#1283da\"}],\"chartTitle\":\"Grafico criado em 11/15/2020, 4:15:04 AM\"}" }, "xPatientEmail": "[email protected]", "xTypeaheadValue": "Elle Gold ([email protected])", "xSelectedValue": "[{\"label\":\"Elle Gold ([email protected])\",\"id\":\"[email protected]\",\"name\":\"Elle Gold\",\"email\":\"[email protected]\"}]" }

Hinweis: Alle oben enthaltenen Daten und die in den Animationen unten enthaltenen Daten sind keine echten Patientendaten.

Hier ist ein Blick auf das Endergebnis:

Animierte Anzeige der Airtable-Dashboard-Benutzeroberfläche.

Was ist mit der Eingabeaufforderung?

Um nach Patient zu filtern, brauchten wir eine Möglichkeit, einen Patienten auszuwählen und dann die Datensätze basierend auf diesem Patienten zu filtern. In diesem Abschnitt überprüfen wir, wie dies erreicht wurde.

Für das Typeahead war „react-bootstrap-typeahead“ eine einfache Wahl, da die einzigen verbleibenden Schritte darin bestanden, die Optionen für das „typeahead“ vorzubereiten, es mit einer Airtable-Eingabe zum Stylen und Laden von Bootstrap und einigen anderen Stilen für unser Menü zu mischen. Das Ablegen von Komponenten aus Ihren bevorzugten Komponentenbibliotheken in einer Airtable-App ist nicht so einfach wie bei der typischen React-Webentwicklung; Es sind jedoch nur ein paar zusätzliche Schritte erforderlich, damit alles so aussieht, wie Sie es erwarten würden.

Hier ist das Endergebnis:

Animiertes GIF, das die Filter-by-Patient-Funktionalität zeigt.

Um die Airtable-Eingabe zu rendern und alle unsere Stile konsistent zu halten, enthält „react-bootstrap-typeahead“ eine renderInput-Prop. Weitere Informationen zum Ändern des Renderings der Komponente finden Sie hier.

Für die Bootstrap-Stile und zum Überschreiben unserer Menüpunkte wurden die folgenden zwei Utils von Airtable verwendet:

  • loadCSSFromString
  • loadCSSFromURLAsync

Siehe frontend.js im Kern für einen Auszug der Typeahead-Implementierung.

Diese Zeile wurde verwendet, um Bootstrap global zu laden:

 // frontend/index.js loadCSSFromURLAsync('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

Sie werden einige zusätzliche Logik für Dinge wie den Umgang mit Stiländerungen beim Hover oder das Neugestalten von Links ( <a></a> ) bemerken, um das vertraute Aussehen und Verhalten von Bootstrap zu erhalten. Dazu gehört auch die Handhabung der Einstellung der Global Config-Werte für die Schnellvervollständigung und das Filtern von Datensätzen, sodass die App den ausgewählten Patienten im Dashboard beibehält, wenn ein Benutzer sein Dashboard verlässt, seine Seite aktualisiert oder dieses Dashboard mit anderen teilen möchte App. Dies ermöglicht den Benutzern auch, mehrere Kopien derselben App nebeneinander im selben Airtable-Dashboard mit verschiedenen ausgewählten Patienten oder mit verschiedenen Diagrammen zu installieren.

Denken Sie daran, dass ein Dashboard in Airtable auch allen Benutzern der Base zur Verfügung steht, sodass diese benutzerdefinierten App-Installationen auf einem Dashboard auf dieselben Patienten und Diagramme gefiltert werden, unabhängig davon, welche Benutzer gleichzeitig auf das Dashboard schauen.

Fassen wir zusammen, was wir bisher behandelt haben:

  1. Airtable ermöglicht sowohl technisch nicht versierten Benutzern als auch technischen Benutzern die Zusammenarbeit in Airtable.
  2. Typeform wird mit einer Airtable-Integration geliefert, die es technisch nicht versierten Benutzern ermöglicht, Typeform-Ergebnisse Airtable zuzuordnen.
  3. Airtable-Apps bieten eine leistungsstarke Möglichkeit, die Airtable-Basis aufzuladen, unabhängig davon, ob Sie auf dem Marktplatz auswählen oder eine benutzerdefinierte App erstellen.
  4. Entwickler können Airtable mit diesen Apps schnell auf nahezu jede erdenkliche Weise erweitern. Das Design und die Implementierung unseres obigen Beispiels dauerten nur drei Wochen (natürlich mit enormer Hilfe von vorhandenen Bibliotheken).
  5. Ein #TAG# -System kann verwendet werden, um das Dashboard zu ändern, ohne dass Codeänderungen durch Entwickler erforderlich sind. Dafür gibt es bessere und schlechtere Anwendungsfälle. Stellen Sie sicher, dass Sie die Berechtigungen auf die Erstellerrolle beschränken, wenn Sie diese Strategie verwenden.
  6. Die Verwendung von Global Config ermöglicht es Entwicklern, Daten innerhalb einer App-Installation beizubehalten. Mischen Sie dies in Ihre Zustandsverwaltungsstrategie, um Daten für Ihre Komponenten bereitzustellen.
  7. Erwarten Sie nicht, Komponenten aus anderen Bibliotheken und Projekten per Drag-and-Drop direkt in Ihre Airtable-App zu ziehen. Stile können mit den von Airtable bereitgestellten Dienstprogrammen loadCSSFromString und loadCSSFromURLAsync geladen werden.

Zukunftssicher

Verwenden Sie eine ausgefeiltere Middleware

Mit Typeform und Airtable ist es einfach und kostengünstig, die Zuordnung von Fragen zu Spalten zu konfigurieren.

Es gibt jedoch einen großen Nachteil: Wenn Sie eine Umfrage mit mehr als 100 Fragen auf Airtable abgebildet haben und eine Zuordnung ändern müssen, müssen Sie die gesamte Zuordnung löschen und neu beginnen. Dies ist eindeutig nicht ideal, aber für eine kostenlose Integration können wir damit umgehen.

Andere Optionen wären, dass eine Zapier-Integration (oder eine ähnliche) die Daten zwischen Typeform und Airtable verwaltet. Dann könnten Sie die Zuordnung jeder Frage zu jeder Spalte ändern, ohne von vorne anfangen zu müssen. Dies hätte auch seine eigenen Kostenüberlegungen zu berücksichtigen.

Hoffentlich helfen einige der hier gelernten und kommunizierten Lektionen anderen, die Lösungen mit Airtable entwickeln möchten.

Schließlich können Sie sich das Wesentliche mit den in diesem Artikel besprochenen Dateien ansehen.