Bubble.io Tutorial - Dateien extern speichern auf Google Drive mit Zapier [Deutsch]

In diesem Tutorial speichern wir Dateien wie Bilder oder Dokumente extern auf Google Drive. Hierfür nutzen wir Zapier, um für die Integration eine No-Code Lösung zu verwenden. Die Herangehensweise ist analog anwendbar auf Amazon Web Services S3 oder Storage Lösungen wie Dropbox.

Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir Bilder, die wir in unserer Bubble App haben in Google Drive speichern können und das machen wir über Zapier. Wir legen direkt mal los und nehmen das Picture Upload Element. Und darunter ein Input Field, in dem wir den Namen eingeben. Und einen Button. Bild hochladen Wir gehen in Data, erstellen einen neuen Data type. Bild und dieser hat drei Felder einmal Bild Name. Das ist ein Text, einmal das Bild selbst, dass ist ein Image vom Typ und die Bild URL.

Das ist auch ein Text. Wenn wir jetzt in den Workflow gehen, Start/edit workflow. Create a new thing ein Bild. Und der Bild Name ist im Namens Value. Der zweite Schritt ist nun Make changes to to a thing und wir nehmen Result of Step 1 und die Bild URL. Machen wir https:. Und Insert Dynamic data, result of Step 1. Bild. Und die URL. Die URL in Bubble wird angezeigt mit einem S3.Amazon.com.

Das heißt, wenn wir davor https haben, kommen wir anschließend direkt die richtige URL. Anschließend gehen wir Plugins. Und installieren das offizielle Zapier plugin von Bubble, welches nicht Legacy ist, sondern das neue Plugin. Ihr installiert dieses. Und wir sehen hier nun Add another Zap Trigger. Ihr klickt darauf und wir nennen diesen Google Drive upload. Und der Trigger Type ist ein Bild. Dieser ist nun aktuell nicht aktiv. Wir gehen zurück in Workflow Plugins Trigger a Zapier Zap. Und nehmen  hier. Result of Step 1.

Und schließlich Reset relevant inputs. Wenn ihr jetzt in Zapier geht, erstellt dort einen neuen Zap. Als erstes suchen wir Bubble. Also den Trigger. Und wir können nun hier einen neuen Workflow Trigger Event setzen. Ihr müsst euch nun in Bubble einloggen, wenn ihr das noch nicht seid. Dann öffnet sich hier ein Feld. Ich bin bereits eingeloggt in Bubble. Anschließend wählen Sie die App ID. Und die App Version, also ob das nun die Live-Version und die Development Version ist und das Zap. ID. Habt ihr nun hier diese neue ID und ihr macht Continue. Wenn jetzt auf Test trigger geht, bekommt ihr eine Fehlermeldung, weil die Data API nicht exposed ist. Dafür müsst ihr in Settings gehen, API und Enable Data API. Und müsst ihr nun für das Bild diese veröffentlichen. Ihr könnt auch nochmal in Privacy gehen und schauen, ob hier das Bild selbst visible ist und nicht restricted.

Wir gehen zurück in Zapier und testen den Trigger noch einmal. Und wir bekommen jetzt hier von Bubble Standard Daten. Hier geht auf Continue. Und wir wählen als zweite Applikation Google Drive aus. Und wir machten hier Upload file. Als nächstes loggen wir uns in Google Drive ein. Und wer hier den bereits angelegten Ordner Zapier Image Uploader aus. Jetzt könnt ihr hier bei File unter all options, haben wir hier die Bild URL. Wenn ihr das Bild direkt nehmt, gibt es manchmal Probleme und er lädt einen Text hoch stattdessen. Wenn ihr aber die Bild URL habt, funktioniert es auf jeden Fall. Und Convert to document false und den File Name, nehmen wir den Bild Name, was ein text Feld ist. Anschließend drücken wir auf continue. Und aufgrund der Demo Daten werden wir kein Bild sehen. Aber nichtsdestotrotz müssen wir einmal den Test machen, um die ganze Zapier Integration zu aktivieren.

Ihr könnt den Test auch skippen. Ich persönlich fühle mich besser, wenn ich ihn mache. Wir sehen, der Test war erfolgreich und so haben wir jetzt auch in Google Drive dieses Lorem Ipsum Textfeld, was quasi die Demo Daten sind. Ihr macht turn on Zap. Und wir testen jetzt einmal, was passiert, wenn wir die Applikation ausprobieren. Wir klicken jetzt auf Upload ein Image. Ihr nehmt hier dieses Cover. Nennen das Bild Porsche 911 und drücken einmal auf Bild hochladen.

Wenn wir einmal in die Datenbank gehen, das heißt Data App data, dann sehen wir hier die URL. Aber auch dem Bild Name und das Bild selbst. Wenn wir anschließend in Zapier Google gehen, sehen wir, dass wir das Bild hochgeladen haben und gleichzeitig auch dem Bild Namen haben.

Das heißt, unser Upload in der Applikation hat dazu geführt, dass wir einerseits in Bubble die Daten haben, aber gleichzeitig auch das File, die Datei in Google Drive hochgeladen haben. Das Tolle an Zapier ist ihr habt natürlich hier auch ganz andere Integrationen. Ob das nun von Amazon S3 ist  oder eine Dropbox oder ganz andere Services. Das heißt ihr könnt wunderbar zwischen Bubble und Zapier integrieren und euch stehen fast alle Möglichkeiten offen. Und das Ganze ohne selbst zu programmieren.

Wenn euch dieses Video gefallen hat, klickt auf den Like-Button und subscribe den Channel. Das hilft uns wiederum, dass wir mehr Reichweite bekommen. Dadurch lohnt es sich dann auch weiterhin noch mehr kostenlos Content anzubieten. Wenn ihr irgendwelche Fragen habt, schreibt gerne in die Kommentare. Bis dahin wünsche ich euch weiterhin viel Erfolg und auf bald.