CSV-Daten in Bubble.io einbinden – Schritt für Schritt

Du hast Daten in einer CSV- oder Excel-Datei und willst sie in deiner Bubble.io-App anzeigen? Dieser Artikel führt dich Schritt für Schritt durch den gesamten Prozess – von der Datei bei instantapi.io bis zur fertigen Repeating Group in Bubble.

Am Ende dieses Tutorials hast du eine live API aus deiner CSV-Datei, die du in Bubble (und jedem anderen No-Code-Tool) abrufen, filtern und anzeigen kannst.

Schritt 1: CSV bei instantapi.io hochladen

Melde dich bei instantapi.io an und navigiere zu Datasets → Neues Dataset. Dort siehst du eine Upload-Fläche.

1. Klicke auf „Datei hochladen" und wähle deine CSV- oder Excel-Datei aus. Alternativ kannst du die Datei direkt in die Fläche ziehen.
2. instantapi.io erkennt die Spaltennamen automatisch aus der ersten Zeile deiner Datei (Header-Zeile).
3. Gib deinem Dataset einen URL-freundlichen Namen, z. B. produkte, mitarbeiter oder artikel. Nur Kleinbuchstaben und Bindestriche.
4. Klicke auf „Dataset erstellen".

Nach wenigen Sekunden ist dein Dataset aktiv. Du siehst die Vorschau der Daten und die fertige API-URL:

Schritt 2: API-Key erstellen

Navigiere in instantapi.io zu API-Keys → Neuen Key erstellen. Gib dem Key einen beschreibenden Namen, z. B. „Bubble App – Lesezugriff".

1. Wähle als Berechtigung „Nur lesen" (Read-only) – für Bubble reicht das in den meisten Fällen.
2. Optional: Verknüpfe den Key mit einem spezifischen Dataset, wenn du den Zugriff einschränken möchtest.
3. Klicke auf „Key erstellen" und kopiere den generierten Key sofort – er wird nur einmal vollständig angezeigt.

Schritt 3: API Connector in Bubble einrichten

Öffne deine Bubble-App und navigiere zu Plugins (linke Sidebar). Falls noch nicht installiert, suche nach „API Connector" und installiere das offizielle Bubble-Plugin kostenlos.

API konfigurieren

Im API Connector Plugin klicke auf „Add another API" und fülle folgendes aus:

API Call definieren

Klicke innerhalb deiner neuen API auf „Add another call" und konfiguriere:

Klicke anschließend auf „Initialize call". Bubble führt einen Test-Request aus und erkennt das JSON-Schema deiner API automatisch. Du siehst die verfügbaren Felder (entsprechend deinen CSV-Spalten) und kannst mit „Save" bestätigen.

Schritt 4: Filter-Parameter nutzen

instantapi.io unterstützt URL-basierte Filterparameter, die du direkt in deinem Bubble-API-Call verwenden kannst. Das ist besonders nützlich, wenn du nur einen Teil der Daten anzeigen möchtest – z. B. nur Produkte einer bestimmten Kategorie.

Statischer Filter im API Call

Um nur Produkte der Kategorie „Elektronik" abzurufen, ergänze die URL im API Connector:

Dynamischer Filter mit Bubble-Parametern

Noch mächtiger: Du kannst den Filterwert als dynamischen Parameter übergeben, den Bubble zur Laufzeit befüllt. Klicke im API Call auf „+ Add parameter":

In Bubble kannst du diese Parameter dann über Workflow-Events oder Inputs dynamisch setzen – zum Beispiel wenn ein Nutzer eine Kategorie aus einem Dropdown auswählt.

Schritt 5: Daten in einer Repeating Group anzeigen

Jetzt kommt der sichtbare Teil: Daten in der Bubble-App darstellen.

1. Ziehe in deinem Bubble-Editor eine Repeating Group auf deine Seite.
2. Setze Type of content auf instantapi Produkte – Alle Produkte abrufen (dein initialisierter API Call).
3. Setze Data source auf Get data from an external API → wähle deinen API Call.
4. Bubble zeigt dir jetzt die Felder aus deiner CSV als wählbare Datentypen.
5. Füge innerhalb der Repeating Group-Zelle Textelemente, Bilder und andere UI-Elemente ein und verknüpfe sie mit den Feldern: Current cell's Produkte's name, Current cell's Produkte's preis usw.

Schritt 6: Suche und Filter in der UI einbauen

Damit Nutzer die Daten selbst filtern können, baue eine einfache Suche ein:

1. Füge ein Input-Element über der Repeating Group ein, mit dem Placeholder „Produkt suchen...".
2. Gehe zu deiner Repeating Group → Data source → klicke auf den API Call.
3. Setze den Parameter search auf Input Suche's value.
4. Damit die Suche live reagiert, füge im Workflow des Input-Feldes unter „An input's value is changed" → Refresh API Data der Repeating Group hinzu.

Das Ergebnis: Bei jeder Eingabe im Suchfeld sendet Bubble automatisch einen neuen API-Request mit dem Suchbegriff als Parameter – und die Liste aktualisiert sich in Echtzeit.

Funktioniert auch mit anderen No-Code-Tools

Das Prinzip ist bei allen No-Code-Plattformen dasselbe – nur die Benutzeroberfläche unterscheidet sich leicht:

In jedem Fall benötigst du dieselben zwei Informationen: deine API-URL und deinen API-Key (im Header x-api-key). Der Rest ist toolspezifische Konfiguration.

Daten aktualisieren – so einfach wie Datei ersetzen

Wenn sich deine Daten ändern – neue Produkte kommen dazu, Preise werden angepasst, Zeilen gelöscht – musst du lediglich die aktualisierte CSV- oder Excel-Datei bei instantapi.io erneut hochladen:

1. Gehe zu deinem Dataset in instantapi.io.
2. Klicke auf „Datei ersetzen" und lade die neue Version hoch.
3. instantapi.io aktualisiert die API automatisch – die URL und alle API-Keys bleiben unverändert.

Deine Bubble-App ruft beim nächsten Laden der Seite automatisch die neuen Daten ab. Kein Redeployment, kein Neustart, keine Unterbrechung.

---

Fazit: Von 0 auf Bubble-App in unter 30 Minuten

Was früher ein Backend-Entwicklungsprojekt war, dauert heute weniger als eine halbe Stunde. Mit instantapi.io als Datenschicht und Bubble als Frontend hast du alle Zutaten für eine vollwertige Webanwendung – ohne eine einzige Zeile Code zu schreiben.

Und das Beste: Das Tutorial funktioniert genauso für Glide, Adalo, Webflow und alle anderen No-Code-Tools. Eine Datei, eine API, unzählige Möglichkeiten.