Bubble.io Tutorial - API Connector Deep Dive (Beispiel GIPHY API) [Deutsch]

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: https://de.wikipedia.org/wiki/Programmierschnittstelle).

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 https://www.bubble.io 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.

Kapitel:
0:00 Einführung
0:12 GIPHY Developer Account erstellen
0:57 GIPHY API Endpoints
1:04 Bubble API Connector installieren
1:24 GIPHY Authentifizierung in Bubble definieren
2:22 GET API Call definieren (Search Endpoint)
4:20 Parameter der API bestimmen
5:10 Abgrenzung Private vs. optionale Parameter
5:30 Initialize API Call Funktionalität
6:52 GIPHY API im Bubble Design Tab einbinden
7:07 Repeating Group für API Daten mit Get Data from External API
8:28 Live Demo

Видео Bubble.io Tutorial - API Connector Deep Dive (Beispiel GIPHY API) [Deutsch] канала NoCodeGermany