Ein kurzer Überblick über den Airtable

Airtable funktioniert über Arbeitsbereiche, die "Basen" genannt werden. Die Basen enthalten Tabellen, in denen die Benutzerdaten in verschiedenen "Ansichten" angezeigt werden, je nach spezifischen Anwendungsfällen und Kundenanforderungen. Zu diesen Ansichten gehören die Standard-Grid-Ansicht, eine Kalenderansicht für zeit- und datumsbasierte Daten sowie Galerie- oder Kanban-Ansichten für die Visualisierung und Gruppierung von Daten. Es ist auch eine Formularansicht verfügbar, die mit externen Zielgruppen geteilt werden kann, um eingehende Benutzereingaben zu erfassen.

Jede Datenzeile bzw. jeder "Datensatz" verfügt über vorformatierte Feldtypen. Dazu gehören Standardfelder wie einfacher Text, Daten, Zahlen, Formeln und URLs sowie weitere Airtable-spezifische Optionen wie farbkodierte Dropdowns für Einzel- und Mehrfachauswahl, automatische fortlaufende Nummerierung und Benutzerzuweisungen (basierend auf den in der Basis enthaltenen Konten). Ansichten innerhalb einer Basis können auch miteinander verknüpft werden, so dass Tabellen über einen "Rollup"-Feldtyp miteinander kommunizieren können.

Airtable bietet auch In-App-Automatisierungen, mit denen bestimmte Prozesse automatisch ablaufen, wenn bestimmte Bedingungen erfüllt sind. Die Auslöser können auch mit externen Anwendungen verknüpft werden - nativ mit Produkten der Google Suite und Microsoft Outlook. Für andere automatisierte Integrationen mit externen Anwendungen werden häufig Automatisierungsplattformen wie Zapier, Integromat oder IFTTT verwendet. Alle bieten robuste Funktionen zur Verknüpfung von Airtable-Daten mit Ihren Webflow-Sites sowie mit Benutzerdaten aus Memberstack.

Obwohl das Basisprodukt von Airtable kostenlos ist, ist auch Airtable Pro erhältlich, dessen Preis von der Anzahl der gewünschten Datensätze, der Anzahl der einzubeziehenden Mitarbeiter und anderen spezifischen Funktionen abhängt. Eine vollständige Übersicht über die Preise für die Airtable-Plattform finden Sie hier.

Verbinden von Webflow mit Airtable

Mit diesen Tools ist ein sehr gängiger Rahmen für den Aufbau interaktiver Low-Code-Mitgliedschaftswebsites die Verwendung von Webflow als Front-End, Airtable als Back-End, Memberstack als sicherer Mitgliedschaftsmanager und Zapier, um sie alle miteinander zu verbinden.

Mit diesem Framework und einigen anderen kreativen Webdesign-Tricks ist es möglich, eine große Vielfalt an Website-Typen zu erstellen. Im Folgenden werde ich einige unserer bevorzugten kostenlosen Webflow-Vorlagen (mit Cloneables) hervorheben, die Airtable nutzen.

Webflow + Airtable-Klonelemente

1. Airtable Stellenbörse

https://showcased.webflow.io/projects/airtable-job-board

Diese von Ben Parker erstellte Jobbörse verwendet Airtable und No Code API (weitere Informationen weiter unten), um den Benutzern das Durchsuchen von Stellenangeboten zu ermöglichen. Sie enthält drei CMS-Sammlungen (Stellenanzeigen, Unternehmen und Kategorien), die über entsprechende CMS-Sammlungsseiten mit Vorlagen verfügen.

No Code API was used in this example (as opposed to something like Zapier) because the creator wanted to bypass the need to update the Webflow CMS database. Instead, he connects the API endpoint to the CMS collection template, populating it from Airtable directly. Below, you can find the code for this in the header (before the </body> tag). On No Code API you can generate an API endpoint and place it inside the fetch() method. To note: it appears that the author used an Autocode API endpoint instead of a No Code API endpoint in this example. The process should be roughly the same though.

From before the </body> tag:

CODE:

fetch("https://dev--airtable-listings.bparker.autocode.gg/") 
.then(handleError) // skips to .catch if error is thrown 
.then((data) => { 
data.forEach((record) => { 
let id = record.id; 
let listing = document.getElementById("listing"); 
let clone = listing.cloneNode(true); 
clone.id = id; document.getElementById("root").appendChild(clone); 
let wrapper = document.getElementById(id); 
let heading = wrapper.querySelector(".job-name"); 
heading.textContent = record.fields.Name; 
let company = wrapper.querySelector(".company"); 
company.textContent = record.fields.company_name;

Sie können die Variablen "id", "listing", "job-name" und "company" durch die entsprechenden Feldnamen in Airtable ersetzen (wenn Sie die Vorlage z. B. für einen anderen Zweck verwenden). Wenn alles korrekt funktioniert, sollten Sie in der Lage sein, für jedes Element ein benutzerdefiniertes Attribut festzulegen, das aktualisiert wird, wenn neue Datensätze zu Airtable hinzugefügt werden.

Einen Überblick über die Funktionsweise von No Code API finden Sie auf der Website des Unternehmens hier.

2. Eingebettete Airtable-Kalkulationstabelle

https://showcased.webflow.io/projects/Embed-Airtable-Spreadsheet-in-Webflow

Diese Vorlagenseite zeigt Ihnen, wie Sie eine Airtable-Ansicht in Ihre Website einbetten können, um eine visuell ansprechende Tabellenansicht für Ihre Benutzer zu erstellen. Es handelt sich um ein leistungsstarkes Tool, mit dem Sie die Datenvisualisierungsfunktionen von Airtable direkt auf Ihrer Website nutzen können, das von Philipp Roth erstellt wurde.

Der entsprechende Code und das Verfahren für die Einrichtung sind auf der Vorlagenseite enthalten, aber Airtable hat den Großteil der Arbeit bereits für Sie erledigt. Wenn Sie die Schaltfläche "Ansicht freigeben" oben in der Ansicht, in der Sie sich befinden, auswählen (und dann zum Menü "Freigabe-Link [ausgewählte Ansicht] erstellen" navigieren), sollten Sie den Code erhalten, den Sie zum Einbetten auf Ihrer Website benötigen.

Von dort aus können Sie es in ein HTML-Embed-Element in Webflow einfügen (eine Premium-Funktion) und mit der Formatierung und Gestaltung wie bei jedem anderen Element fortfahren. Es sei darauf hingewiesen, dass das Aussehen Ihrer Ansicht in der Airtable-Anwendung auch in der Einbettung erscheint, es sei denn, Sie passen das CSS selbst an.

3. NoCode Dashboard

https://showcased.webflow.io/projects/nocode-dashboard

Dieses No-Code-Dashboard, das von Joel Whittaker bei Middlelink entwickelt wurde, bietet eine robuste Möglichkeit, dynamische Daten von Airtable zu verfolgen und zu visualisieren. Es verwendet Memberstack für die Benutzerauthentifizierung, MiddleLink (eine Drag-and-Drop-API-Entwicklungsplattform) zur Verbindung mit Airtable und WeBlocks als visuellen Code-Editor. MiddleLink ist funktionell ähnlich wie No Code API, wenn auch mit einer ganz anderen Benutzeroberfläche und einigen zusätzlichen Funktionen. Ich werde nicht zu tief in die Materie eindringen, aber es lohnt sich auf jeden Fall, hier nachzuschauen.

Diese Website verwendet auch WeBlocks - eine weitere Drag-and-Drop-Entwicklungsplattform, mit der Sie einbettbares JS für Ihre Webflow-Website erstellen können. Weitere Informationen finden Sie hier (ich empfehle, das Tutorial durchzuarbeiten, um ein Gefühl dafür zu bekommen, wie es funktioniert).

4. Willkommen im Dschungel

https://showcased.webflow.io/projects/clone-welcome-to-jungle-par-ottho-tools

Diese französische Job Board-Vorlage, die von otthotools erstellt wurde, folgt einem ziemlich standardisierten Modell dafür, wie Airtable verwendet werden kann, um CMS-Sammlungen in Webflow aufzufüllen. Es sammelt Job-Informationen in einer Airtable-Ansicht, sendet sie in einer Sammlungsliste (obwohl die Methode nicht spezifiziert ist), und verwendet dann eine Sammlungsseiten-Vorlage, um diese Job-Informationen auf einer Landing Page und in einer Sammlungselement-Seite anzuzeigen. Der eigentliche Gewinner ist jedoch die elegante Benutzeroberfläche (insbesondere auf der Seite mit den Sammlungselementen), auf der die Auftragsinformationen in einem leicht lesbaren und anpassbaren Format angezeigt werden.

Hinweis: Dieses Cloneable ist komplett auf Französisch - es sollte jedoch relativ einfach sein, die Struktur auf jedes Projekt, an dem Sie arbeiten, anzuwenden.

5. Jede Sportart lernen

https://showcased.webflow.io/projects/learn-any-sport

Dieses Sportbildungsportal von Louie Sakoda nutzt Webflow, Airtable und Zapier, um Benutzern die Möglichkeit zu geben, nützliche Informationen über eine bestimmte Sportart zu finden. Während dieses klonbare Portal ebenfalls das Standardmodell verwendet, unterscheidet es sich durch die Integration von Eingabeformularen. Diese füllen verschiedene Arten von CMS-Sammlungen mit jeweils unterschiedlichen Datentypen auf. Airtable ist in dieser Hinsicht nützlich, da es eine Vielzahl von Datenformaten zulässt. Ich empfehle, durch die Anzeige der Seiten zu navigieren, um einen besseren Eindruck davon zu bekommen. 

Die beste Praxis wäre hier wahrscheinlich, um sicherzustellen, dass die CMS-Sammlungen auf Webflow enthalten immer mit den Tabellen auf Airtable gespeichert sind die gleichen. Mit Airtable als Backend für diese Website sollte es möglich sein, Formular-Eingaben in Webflow zu übernehmen, sie an Airtable weiterzuleiten und dann ein weiteres ZAP zu verwenden, um die benötigten Daten zurück in ausgewählte Sammlungslisten und Vorlagenseiten zu übertragen.

6. Podcast-Aufnahme

https://showcased.webflow.io/projects/podcast-reco

This podcast recommendation engine created by John Larson is a powerful example of how dynamic filtering can be used on data being pushed into Webflow from Airtable. It uses some code before the </body> tag to create filters on incoming podcast data, letting site visitors sort through items based on a set of parameters.

Der Autor hat eine Dateisystembibliothek erstellt, die an die CMS-Sammlung angehängt ist, die von Airtable und Filter-Wrappern für jedes der auf der Website enthaltenen Filtergruppen-Elemente befüllt wird. Dieser benutzerdefinierte Code enthält auch anpassbare Animationen, die beschreiben, wie die Filterung aussehen wird.

7. Dynamische Video-Lightbox

https://webflow.com/made-in-webflow/website/dynamic-video-lightbox

Diese dynamische Video-Lightbox-Vorlage von Philipp Roth wird als Workaround für ein Problem mit Lightboxes in der Webflow-API angeboten. Obwohl Webflow über eine native Lightbox-Funktion für Videolinks innerhalb von CMS-Sammlungen verfügt, werden die Videos nicht in der richtigen Benutzeroberfläche abgespielt, wenn diese Links über einen API-Endpunkt (z. B. von Airtable) in die Sammlung gelangen.

Diese Umgehung verwendet HTML-Einbettungen innerhalb von Listenelementen einer Sammlung, um die Benutzeroberfläche des Leuchtkastens neu zu erstellen. Das HTML/CSS verwendet Felder aus der CMS-Sammlung im Code (wodurch es möglich ist, dies für jeden beliebigen Zweck anzupassen). Benennen Sie einfach die Felder img src, data-src und data-img im Skript entsprechend dem Video um, das Sie anzeigen möchten.