Bubble.io Tutorial - Sitzplatz aussuchen mit Drag & Drop Funktion

Schritt-für-Schritt Videoanleitung, um in Bubble.io Drag & Drop Funktionalität zu haben.

Chris Strobl
Chris Strobl

In diesem Video lernt ihr wie man eine Drag & Drop Funktion in Bubble entwickelt.

Link zu Dribble Vorbild/Inspiration

Drag & Drop Funktionalität in Bubble.io

Video-Transkript:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir im Bubble ein Sitzplatzreservierung System ähnlich wie in einer App bauen können. Ich habe mich hierbei von einem Design auf Dribbble inspirieren lassen, einfach für die Mock up Qualität. Das ist von Sargon das unten natürlich auch verlinkt. Wir gehen direkt beim Bubble rein. Und ich habe hier schon einige Sachen vorbereitet, gerade was das Design angeht.

Was wir nun aber tun wollen, ist quasi die Sitzplatzreservierung System mit Dragon Drop zu bauen. Dafür brauchen wir zwei Plugins. Einmal das 3 Google Elements Plugin vom Bubble, das ein kostenloses Plugin und auf der anderen Seite Toolbox, wo wir das List of Numbers Feature brauchen. Wenn wir jetzt einmal im Bubble reingehen, dann haben wir als erstes brauchen wir einen Container. Das heißt, wir gehen hier in das Element und erstellen einen Container. Und nennen diesen auch Container. Anschließend fügen wir das List of Numbers hinzu.

Irgendwo auf dem Screen nennen dieses Links, machen die Startnummer eins. Und hier 16 Zahlen Wir kopieren einmal dieses Element, machen die Startnummer 17. Und ebenfalls 16 Zahlen nennen das Ganze aber rechts. Dies ist, weil wir im Design zwei Reihen haben werden. Anschließend fügen wir eine Repeating Group hinzu auf der linken Seite. Den Type of content machen wir Number und Data source List of Numbers Links Liste und wir machen ein Fix Number of Success mit zwei coolem und acht Spalten. Dann haben wir hier genau 16 Stück, die kopieren einmal, die wir nennen diese. Wir nennen diese Repeating Group links.

Wir fügen einmal die. Wie kupieren einmal die Repeating Group? Nennen diese Rechts, aber nehmen stattdessen die List of Numbers rechts und wir haben hier wiederum 16 verschiedene Zellen. Anschließend gehen wir in Data und fügen ein Option set hinzu. Wir nennen dieses Verfügbarkeit und erstellen hier Optionen frei. Und besetzt. Hinzu. Danach fügen wir einen neuen Data type hinzu.

Wir nennen diesen Sitzplatz. Hier haben wir als erstes die Sitzplatz Nummer. Das ist ein Field Number. Anschließend anschließend das Feld Verfügbarkeit, welches wir aus dem Option set nehmen. Mit dem Default frei und schließlich noch ein Buchung Nummer Feld Typ Text, welches wir quasi mit dem Sitzplatz verknüpfen. Als nächstes gehen wir in die App data und legen nun manuell ein paar einzelne Felder fest. Und schließlich unserem aktuellem Gast, dem wir die Sitzplatz Nummer 1 und frei zuweisen.

Anschließend gehen wir ins Design und nutzen nun hier im Container das Drop Area Feld. Dieses fügen wir hier in die Gruppe ein. Die Toleranz nehmen wir Intersect, das heißt, man muss nicht genau präzise treffen und es funktioniert trotzdem. Die Alternative ist ID, die ein genau exaktes Treffen des Dragon Drops veranschlagt. Type of content Nehmen wir Sitzplatz, Data source, Do Search for und wir machen hier Sitzplatz mit dem Kontrahent. Sitzplatz Nummer ist gleich. Current cell's Number. Und First Item einem Background Color fügen wir nicht hinzu. Jedoch machen wir ein Conditional, wenn Drop area extract over.

Dann machen wir Background Style Background Color und nehmen hier dieses helle Blau. Anschließend fügen wir nun eine Dragon Drop Group hinzu. Die Border Collie machen wir solid und nehmen wiederum das relativ helle Grün, machen Border seit 2 und eine Run mode von 5. Transparenz davon machen wir auch 50 Type of content ist wiederum Sitzplatz und die Data source ist Peer Group Sitzplatz. Als nächstes machen wir Make das Element Drop Bubble.

Und machen hier Move Back als Behavior Post Drop und machen hier die Sable Diable Titeltrack. Anschließend fügen wir hinzu, wenn das Drag and Drop Sitzplatz ist No Code mti Hand The Dragon Drops Sitzplatz Verfügbarkeit ist besetzt. Dann ändern wir die Farbe der Border Color. Auf dieses Gelb. Und die Säbel, die field type Dreck, weil wir den Platz quasi besetzen.

Überdies sagen wir, wenn das Dragon Drop Sitzplatz ist No Code mti and das Drag and Drop Sitzplatz. Verfügbarkeit ist frei. Dann ändern wir den Background Style. Auf Flat Color ebenso die Background Color und die Border Color ändern wir ebenso auf diese Farbe. Und fügen hier nun ein disabled diable Titeltrack und heben das Ganze auf. Schließlich kopieren wir noch einmal nun diese Repeating Group den Content auch hier rüber. Und schließlich brauchen wir noch zwei Workflows, einmal für den Drop Area Sitzplatz rechts. Und einmal für Drop Area Sitzplatz links. Ich beschreibe diese auch, um die wiederzufinden. Das heißt beginnenden Workflow, wenn a drop areas a group. Wir nehmen einmal Sitzplatz links, type of choice Sitzplatz und machen make changes using current Workflows Sitzplatz und wir ändern die Sitzplatz Nummer. Mit Current cell's Number Weiterhin fügen wir noch die Funktionen zu.

Dieser Workflow wird nur ausgeführt, wenn Sitzplatz. Sitzplatz Nummer ist Current cell's number und hier das First Item ist empty. Dann wird das nur ausgeführt. Wir kopieren jetzt einmal den Workflow und ändern das Ganze auf rechts. Was wir jetzt noch dynamisch machen wollen, ist, dass wir hier die Sitzplatz Nummer dynamisch machen.

Und wir nehmen hier die Sitzplatz Nr.. Und formatieren das Ganze Dezimal 0. Und wir gehen jetzt noch einmal ins Preview. Wir sehen, dass wir die Felder nicht bewegen können, die besetzt sind oder frei, aber unser Sitzplatz, der aktuell auf der Insel ist, diesen können wir variieren. Wenn wir auf ein Feld gehen, welches bereits besetzt ist, geht es nicht und wir können aber hier frei wählen. Und somit konnte dir sehen, wie wir im Bubble relativ einfach ein Dragon Drop Element, wenn es Sitzplatzreservierung individuell programmieren können.

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

Plugins