Bubble.io Tutorial - Liste mit allen Ländern in Bubble erstellen

In diesem Video lernt ihr wie man Listen mit allen Ländern der Welt erstellen kann, um damit beispielsweise Dropdowns für den Checkout Prozess zu definieren.

Kostenloses Countries Plugin von Coaching No Code Apps: https://bubble.io/plugin/countries-1485907924596x944498889467625500

Kostenloses CSV File von No Code Germany für alle Länder: https://drive.google.com/drive/folders/1ZNwPlOBpAB6zLFUARoMzG3XVgxmm8CRT?usp=sharing

Video-Transkript:

Hallo, mein Name ist Chris Strobl, ich bin der Gründer von No Code Germany und heute geht es um Länder in diesem Beispiel Check out Stripe Seht ihr, wir haben ein Dropdown Menü mit allen Ländern in dem wir Stripe anwenden können. Wenn ich das ganze auf Englisch mache, heißt Deutschland Germany. Und wenn ich das ganze auf Deutsch mache, heißt Deutschland Deutschland und Amerika heißt die Vereinigten Staaten. Und wie können wir nun diese Informationen im Bubble integrieren? Hierfür gibt es zwei Wege. Einmal mit dem Country Plugin. Dies ist ein kostenloses Plugin und einmal über ein CSV Import, wo ihr mehr Freiheiten habt. Wir legen direkt mal los mit dem Country Plugin. Dies ist ein kostenloses Plugin von Coaching No Code Apps und dort habt ihr die Möglichkeit über eine sogenannte Rest API, nämlich Ress Countries euch alle möglichen Länder Informationen eingeben zu lassen.

Und nun wollen wir dieses Plug in anwenden. Ich habe bereits eine Repeating Group hier vorbereitet, das ist eine Full List und als Type of content wählen wir List all countries. Und Data source Get data Froman external API. Countries list all countries. Und dann sortieren wir das Ganze sortiert. Und jetzt seht hier und das ist das Besondere an dem Plugin ganz unterschiedliche Wege um das Ganze zu sortieren. Und wir wählen hier translations deutsch kommen. Und die ständigen No. Und nun füge ich für die Übersichtlichkeit hier einen Index ein. Das heißt in Search Dynamic data Current cell's Index. Bei Deutsch wählen wir nun in Search Dynamic data Current cell's List URL countries und wir nehmen die Translation Deutsch kommen. Bei Englisch wählen wir auch wiederum Input Field, Dynamic data, Current cell's, list, URL Countries und Name kommen.

Wir gehen jetzt einmal ins Preview und schauen uns das ganze mit dem Country Plugin an.. Und wir sehen nun, wie wir eine volle Liste haben mit sage und schreibe 250 Ländern und immer einmal auf Deutsch und einmal auf Englisch. Wie ihr gesehen habt, dauert es etwas, bis alle Länder geladen wurden und deswegen eine zweite Möglichkeit, die schneller ist, ist ein CSV Import. Hierfür braucht ihr jedoch den Zeitplan im Bubble. Der günstigste Plan ist der Personal Plan, in dem ihr die Möglichkeit hat, bis zu 100 Röse in einer CSV-Datei hochzuladen. Und deswegen habe ich ein paar Dateien vorbereitet.

Einmal alle Länder. Das sind wiederum 250 Länder und auf der anderen Seite dann aber auch einmal die Länder bis 100 Länder, nämlich gesplittet in drei Dateien. Diesen Link findet ihr in den Shownotes. Der große Vorteil am CSV Importe ist auch, dass die Länder weglassen könnt, die euch nicht passen und so könnt ihr das ganze anpassen an Zielgruppe. Wir gehen jetzt einmal zurück in den Editor und laden nun diese Dateien hoch. Dafür gehen wir in Data.

Und jetzt seht hier, wir haben einen Custom Data type Countries, der wiederum zwei Textfelder hat Deutsch und Englisch. Wenn wir nun in App data gehen, countries, dann gehen wir hier auf Uploads. Icon Fall Totalblockade. Und ihr wählt hier Countries Part 1 CSV aus. Type of data countries und ihr klickt hier auf Map Fields und jetzt seht hier, wie Bubble bereits automatisch einen Vorschlag macht Wenn das nicht perfekt passt, können wir das eben noch nochmal auswählen. Dann auf Value Day Data Get data Set ist ready to upload und uploads data. Danach gehen wir auf New Abluft Pick up Fall to Upload Part 2 Wir wiederholen den Prozess, weil data upload data. Und noch mal New Uploads PKW to Abluft Part 3 Valley Data Hublot Data. Danach refresh ihr hier. All countries und wir sehen, dass wir alle Länder nun in der Datenbank haben. Wenn wir zurück ins Designated gehen, in die Repeating Group CSV Import, dann noch wir Type of content countries. Do Search for countries sort bei Deutsch die Sendung No. Analog zur vorherigen Repeating Group möchte ich wieder für die Übersichtlichkeit Input Field Dynamic data Current cell's Index.

Und hier wiederum Insert Dynamic data Current users countries Deutsch und Current cell's countries English auswählen. Wenn wir jetzt ins Preview gehen, können wir uns genau die Ladezeiten hiervon einmal ansehen. Und ihr seht, wie wir eine gleiche Datenbasis haben, aber der CSV Importe massiv schneller lädt als über die API. Ich würde sagen, beide Wege haben ihre Vor und Nachteile und ich möchte euch kurz zum Abschluss noch einmal eine dritte Möglichkeit zeigen, nämlich mit Option set zu arbeiten, weil die Countries ja quasi sich nicht oft ändern, sondern statisch bleiben. Wenn ihr in die Datenbank geht und auf Option set klickt, könnt ihr hier ein Custom Option set festlegen.

Ich habe das hier bereits einmal beispielhaft getan. Mit Deutsch und Englisch und dann den verschiedenen Optionen. Ich möchte euch aber auch die Vor und Nachteile zwischen Option set und einer Database Variante zeigen. Option set sind weitaus leichter in der Live Applikation abzuleiten. Darüber hinaus ist eure Datenbank auch erheblich aufgeräumter, aber leider könnt ihr keine CSV Imports oder Workflows nutzen, um die Daten automatisiert hinzuzufügen. Deswegen ist es auch mühselig die Daten einzufügen und darüber hinaus ist immer Display als Wert vorhanden.

Und bei vielen Einträgen wie eben alle Countries leidet hier auch die Übersichtlichkeit. Und demnach steht es euch wirklich frei, genau die richtige Variante Plug in Option set oder CSV Import für euren Use Case anzuwenden. Mit allen Vor und Nachteilen.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button und subscribe unseren Channel. Bei Fragen schreibt uns gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.