In Bubble API Connector verwenden

In diesem Video lernt ihr wie man mit dem API Connector von Bubble die Funktionalität von Bubble und damit eurer Web-App erheblich erweitern könnt. Dies gelingt, indem wir APIs also Programmierschnittstellen einbinden (Mehr Infos findet ihr hier zum Konzept).

Als Beispiel nehmen wir die GIPHY API, welche ihr unter https://developers.giphy.com/ finden könnt. Dort erstellen wir einen Developer Account und anschließend eine eigene App mit der GIPHY API. Anschließend schauen wir uns die API Dokumentation von GIPHY an. Die findet ihr unter: https://developers.giphy.com/docs/api/

Anschließend installieren wir in Bubble den API Connector. Geht auf Plugins und sucht nach dem offiziellen API Connector in Bubble.

Erstellt dort eine neue API mit dem Namen GIPHY API.

Die Authentifizierung ist ein Private key in URL. In der Dokumentation von GIPHY haben wir den API Key und fügen diesen in Bubble hinzu. Anschließend definieren wir den Search Endpoint in Bubble. Wir nehmen einen GET Call und aus der Dokumentation holen wir uns den URL Request: https://api.giphy.com/v1/gifs/search

Danach bestimmen wir die Parameter der API. Der Key ist der Query (q) und als default value nehmen wir "porsche", dies steht euch komplett frei.

Dieser Value ist nicht private. Daher könnt ihr hier die Checkbox deaktivieren.

Schließlich gibt uns Bubble die Funktion den API Call zu testen. Der Button heißt Initialize API Call. Bei einer korrekten API bekommen wir als Antwort nun von der API direkt die Informationen zurück.

Bubble ordnet jeder API Response auch automatisch einen Datentyp zu, welcher aber von euch jeder Zeit geändert werden kann.

Sobald wir erfolgreich die API im API Connector initialisiert haben, ist der nächste Schritt im Workflow oder Design Tab jeweils darauf zuzugreifen. Hierfür legen wir ein Input Feld an, welches wir Keyword Giphy nennen. Darunter legen wir eine Repeating Group an. Bei Data Source wählen wir Get Data from external API und wählen hier unsere GIPHY API Search. Den Type auf Content lassen wir von Bubble automatisch festlegen. In der Repeating Group legen wir nun ein Image fest, welches wir dynamisch mit den Daten aus der GIPHY API befüllen. Anschließend nehmen wir ein Textfeld um dieses ebenfalls mit Daten aus unser API zu befüllen (username, z.B.).

Wenn wir nun auf Preview gehen, können wir sehen, wie unsere Bubble Applikation mit der GIPHY API kommuniziert und wir quasi unsere eigene API in Bubble definiert haben.

Video-Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute wie ihr in Bubble eigene APIs connecten könnt, über den API Connector und dafür nutzen wir die GIPHY API. Als erstes erstellt ganz einfach einen Account; loggt euch ein und wir drücken auf "Get started". Wenn man in "Get started" ist, seht ihr einmal den SDK Overview, wir nutzen aber die ganz normale API. Als erstes erstellen wir hierfür eine App. Wir nehmen die API. Select API. Next step; und erstellen diese App. Ihr bekommt jetzt hier einen API Key. Parallel dazu öffnet die Dokumentation. Ihr geht auf API und schaut euch die Endpoints an. Wir gehen einmal in den Search Endpoint. Jetzt gehen wir in Bubble.io.

Und gehen auf Plugins und installieren den API Connector. Und dieser API Connector lässt euch jetzt eigene API entwickeln und wir gehen erstmal auf Add another  API. Wir nennenn diese API "GIPHY" und haben jetzt verschiedene Authentifizierungsmöglichkeiten, da wir heute ein ganz einfaches Tutorial machen und das erste Mal mit dem API Connector arbeiten, nehmen wir die Private key in URL. Es gibt auch public APIs und es gibt natürlich auch ganz kompliziert verschlüsselte API, gerade für Payments.

Wir nehmen aber eine Private key in URL. Ihr seht jetzt hier die Key Name und den Key value und wenn wir in die Dokumentation von GIPHY gehen, seht ihr das GIPHY sagt, es ist ein api_key und das ist ein string. Das heißt wir kopieren genau hier api_key und fügen das ein in den Key name und als Key value nehmt ihr aus GIPHY euren API Key Für die Development key value könnt ihr auch das gleiche nehmen. Das ist optional. Wenn wir jetzt diesen API Call, das heißt quasi die Kommunikation mit der API definieren wollen, haben wir ein Wechselspiel zwischen Dokumentation und Bubble.

Wir gehen. auf die GIPHy Developers und schauen uns den Endpoint "Search Endpoint" an und sehen, dass dieser uns Access gibt und Zugang zur Library, zur Bibliothek von Millionen von Gifs und Stickern, indem wir ein Wort oder eine Phrase eingeben. Wie funktioniert das? Wir gehen runter und sehen wir haben die URL, also quasi die API URL. Diese hat folgende Parameter, die vorausgesetzt werden, nämlich den API_key und den String. Diese zwei sind required. Und dann haben wir noch viele optionale Parameter, wie z.b. "wie viele sind das Limit".

Das heißt den ersten, nämlich den API key, den haben wir bereits oben in der Authentifizierung: API Key. Und jetzt bei den Parametern würde ich sagen wir nennen diese API "Search". Das ist möglich einerseits als Data oder Action. Da wir uns Daten zurückgeben lassen und nicht einen Workflow steuern wollen in dieser API, ist es Data. Und wir bekommen zurück ein JSON file und hier habt ihr jetzt die verschiedenen Wege mit einer API zu arbeiten. Ganz vereinfacht GET gibt uns Daten. Das heißt, wir holen uns Daten. POST sendet Daten und PUT und PATCH und DELETE arbeiten mit Daten. Wir haben eine Search API, das heißt eine API, die sich Daten holt. Als nächstes gehen wir zurück in die Dokumentation und nehmen diese URL für die Gifs.

Wir kopieren die hier rein und fügen noch https:// hinzu und brauchen jetzt noch die Parameter. Das heißt der Parameter 1, wie wir gesehen haben, ist neben dem api_key der Query, das heißt "q:". Und dieser Query durchsuch GIPHY nach Keywords, um Bilder zurückzugeben. Das heißt wir suchen mit dem Query "q:". Was machen wir: Wir gehen zurück, fügen hinzu "q" und nehmen als Value z.b. "Porsche". Ein weiterer Parameter ist nun, wenn ihr zurück in die Dokumentation geht, nicht required, aber möglich: Limit.

Das heißt wie viele Objekte wollen wir zurück? Wir machen hier Limit und legen fest: 20. Jetzt habe ich hier noch private und optional. Private bedeutet, dass wir über unsere Applikation, also über den Workflow, nicht manipulieren können wie wir die API schicken. Wenn wir private wegmachen, wie hier bei dem Query, können wir nachher in der Applikation den Parameter noch ändern. Optional bedeutet hingegen, dass wir den Parameter gar nicht brauchen. Das nächste ist jetzt, dass wir initialisieren. Das heißt dieser API Call wird einmal geschickt und ihr seht jetzt hier, dass wir alle Daten von der API zurückbekommen und die API perfekt initialisiert wurde. In den Feldern hier seht ihr das Bubble automatisch schon einen Vorschlag macht, was das für Daten sind. Z.b. Text, Zahlen oder aber auch Boolean Werte. Z.B. User ist Verified. Das ist ganz wichtig, wenn ihr später die Daten aus der API speichern wollt. Dass ihr hier quasi auch seht: "Ok, was kriege ich überhaupt zurück?".

Gleichzeitig, wenn ihr hier unten auf Show Raw Data klickt im API Connector, seht ihr das JSON wie es ganz genau zurückkommt. Wir drücken jetzt auf save. Ich möchte euch kurz noch einmal zeigen, was passiert, wenn ihr einen Fehler macht. Das heißt, es kommt sehr häufig vor, wenn man eine API definiert, dass es nicht sofort auf Anhieb passt. Also ich mache einmal statt search einfach search mit T. Wir re-initializen. Und wir sehen: wir kriegen einen API Error von Bubble. Das heißt wir sehen direkt, ob es funktioniert oder nicht. Wir machen noch mal "search". Initialisieren. Und sehen: jetzt funktioniert alles. Jetzt speichern wir das Ganze. Ich will euch noch zeigen, wie ihr im Frontend das Ganze benutzen könnt. Wir gehen in den Design Editor und wir legen als erstes ein Input Search Feld an. Das heißt, hier nehmen wir Keyboard für GIPHY und machen Text als Feld. Darunter nehmen wir eine repeating group, die hat sich als sehr wertvoll gezeigt, um APIs darzustellen. Ihr geht auf DataSource get data from external API und hier ist nun unsere GIPHY API search.

Und ihr steht, dass der Query Parameter hier mit Porsche ausgefüllt wird. Quasi, das was standardmäßig drin ist. Wir gehen auf Insert dynamic data, Input und nehmen den Value davon. Wenn ihr auf Close drückt, geben wir hier noch die data. Ihr seht, wir kriegen verschiedene zurück, wir wollen aber die Daten aus der API. Bubble.io schlägt euch jetzt vor den type of content auch zu ändern das drücken wir "ja" und kriegen Search data zurück. Und machen wir das ein bisschen kleiner auf 2 Rows, machen full list. Wir haben das ganze ja limitiert und neben hier ein Image und Insert dynamic data, Current cell's Search data, Image original URL und dazu daneben Insert dynamic data, Title und den Username des Erstellers dann. Wenn wir jetzt auf Preview gehen, dann seht ihr das wir einmal unser Standard Porsche Query haben, der beim Initialisieren da war und wenn wir jetzt einen anderen Query eingeben, zum Beispiel "Ferrari".

Dann kriegen wir Ferraris und wenn wir eingeben "Volkswagen", kriegen wir Volkswagen. Anhand der GIPHY API kann man sehen, wie ezellent Bubble über den API Connector erweiterbar ist und dieser API Connector ist quasi auch der erste Schritt, um selber Plugins in Bubble zu entwickeln. Und ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.