Bubble.io Tutorial - Taxi Matching Algorithmus

Video Tutorial, um in Bubble einen Taxi Algorithmus wie bei Uber oder MyTaxi zu gestalten.

Chris Strobl
Chris Strobl

In diesem Video zeige ich euch, wie man einen Taxi Matching Algorithmus wie bei Apps wie MyTaxi oder Uber in Bubble.io entwickelt.

Taxi Matching Algorithmus in Bubble entwickeln

Video-Transkript:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir ein Taxi App Matching Algorithmus ähnlich wie Apps in mein Taxi oder Uber selbst im Bubble programmieren können.

Wir legen direkt mal los, indem wir mit Frames das Design festlegen. Frames ist eine kleine Bubble Chrome Extensions, die euch beim Layout hilft. Ich habe dazu auch ein Video gemacht, das findet hier oben. Wir gehen in Frames Heathers. Wählen diesen aus passt within if. Darunter fügen wir eine Search Box ein. Ich nehme dafür dieses Design um Passes etwas an. Wir haben hier nun zwei Felder. Ich lösche einmal hier das raus und nehme die Search Box. Kopiere einmal das Formatieren. Und auch hier noch einmal löschen.

So werden einmal Search Box A mit der Original Adresse, wo wir herkommen, also die Abfahrt und dann einmal haben wir die Ankunftsort. Fahrer finden als Button und wir machen hier noch eine Checkbox mit. Bitte den günstigsten Fahrer wählen. Darunter machen wir eine Repeating Group. Wir gehen wieder in Frames. Wie hier diese Liste. Und ändern hier noch das Icon. Als nächstes wählen wir hier im Input Field die Grafik Places und auch hier die Grafik Places. Als nächstes kümmern wir uns hier um diese Checkbox, die gar keine echte Checkbox ist. Wir können das aber dynamisch selber bauen.

Das heißt, wir stellen einen neuen Status auf der Seite in diesen. Sortieren nach Preis. Ja und der Default ist nein. Und wenn wir hier drauf klicken Start/edit workflow. Set state of an Element. Wir nehmen den Status und machen diesen auf. Ja, aber nur wenn. Dieser Preis Nein ist und wir kopieren einmal. Den Workflow und sagen nun, wenn dieser ja ist. Dann wird er zum Nein, wenn wir darauf klicken und dann machen wir noch eine Conditional. Ich kopiere hier einmal den Text und sage wenn. Ist ja dann ist der Text. Eben nicht Square One, sondern. Jack Square. Wir gehen jetzt einmal in Preview und schauen Sie das Ganze an.. Wir klicken einmal darauf und wir sehen nun, dass sich der Status ändert und wieder nicht. Und wir sehen hier, wie wir wunderbar darauf klicken können, aber die Fahrer finden Funktionalität, warum wir nun im nächsten Schritt. Dafür gehen wir die Daten und fügen nun den Fahrer hinzu.

Wir stellen einen neuen data type Fahrer und dieser hat eine aktuelle Position. Das ist eine Geographic Address. Eine. Kilometerpauschale, die ist eine Zahl und wir können noch weitere Funktionen hinzufügen, wie zum Beispiel ein anderes Auto oder ein Profilbild oder andere Typen, aber wir fokussieren uns wirklich auf diese beiden Kernelemente. Nun fügen wir eine App data hinzu. Wir gehen in App data Fahrer und machen eine Kilometerpauschale von drei. Und als Ort nehmen wir verschiedene Orte in Berlin. Diese kopieren wir hier rein. Der zweite Fahrer.

Wenn jetzt hier quasi fünf Elemente und können jetzt den Matching Algorithmus bauen. Das heißt im ersten Schritt. Sagen wir das hier Diese Repeating Group schauen uns das Ganze im Elementary an. Wählen wir aus und machen statt dem aktuellen den Fahrer als Type of content. Und machen hier Do Search for wahrer. Und sortieren nach. Aktuelle Position Distance from. Awards Value und die Standing Now Nächstes passen wir jetzt die einzelnen Elemente der Repeating Group an. Wir nehmen Fahrer, Current cell's, Fahrer.

Und auch hier Fahrer, Current users, Fahrer und darunter nehmen wir jetzt die Distanz zum Kunden. Das heißt. Wir machen. Abfahrt Value Distance from parent groups Fahrer Aktuelle Position und Unit machen wir in KM und fügen dahinter mit einem Leerzeichen KHM. Daneben machen wir nun den Preis. Wir löschen wiederum die verschiedenen Elemente und berechnen den Preis. Das ist die Distanz aus diesen beiden Adressen. Mal die Kilometerpauschale in Euro.

Das heißt, wir nehmen Abfahrt Value Distance from. Ankunftsort verlief in Kilometern mal die Perrin Group, Seefahrers Fahrers, Kilometerpauschale und wir formatieren das Ganze mit zwei Dezimalzahlen und einem Kummer und mit einem Leerzeichen. Schreiben, darunter Fahrtkosten für Und jetzt machen wir noch mal die Distanz. Abfahrt value distance from. Ankunftsort verlief in Kilometern und mit einem Kilometer. Und schließlich noch formatieren wir hier auf null Dezimalzahlen und auch hier die Distanz auf null Dezimalzahlen Format Null. Schließlich wollen wir, dass dieses Element erst sichtbar ist, wenn wir wirklich auf Fahrer finden geklickt haben.

Das heißt, das Element ist visible on page load deaktivieren wir. Und wir sagen, wenn wir auf Fahrer finden klicken, dann zeigen wir dieses Element Show und wir zeigen List. 7. Wir gehen jetzt einmal auf Preview und schauen uns das Ganze an.. Aktuelle Adresse. Und Flughafen Berlin. Wir klicken auf Fahrer finden. Und wir sehen nun, dass der nächste Fahrer mit einer Distanz zum Kunden ein Kilometer weg ist und die Fahrtkosten 62 Euro und für 21 km, die jeweils immer gleich sind. Und wir machen noch einen Test. Grüne Heide bei der Giga Factory von Elon Msk. Und so sehen wir jetzt, dass wir immer den Fahrer haben mit der geringsten Distanz, aber unser Matching Algorithmus soll auch noch mal den Fahrer mit immer dem günstigsten Preis machen, weil wir sehen, dass die Preise nicht zwingend sortiert sind nach dem günstigsten.

Daher sagen wir, wenn hier diese Conditional Preis ist, yes ist, dann sortieren wir anders. Das heißt, wir gehen einmal in die Repeating Group und sagen wenn. Sortieren Preis ist Yes! Dann machen wir Data source Do Search for Fahrer sofort bei Kilometerpauschale die Standing Now. Wir können jetzt natürlich noch weitere Sortierung Eisfelder machen. Wir zum Beispiel sagt jetzt im zweiten Schritt machen wir wiederum die aktuelle Position Distance from dem Ankunftsort Value und die No Code. Dann haben wir das Ganze in zwei Ebenen, wo wir zunächst die günstigste und danach auch die schnellste Pick up Time haben.

Wir gehen jetzt einmal noch ins Preview und schauen uns das Ganze an!

Und wir machen, um das Beispiel gut zu sehen, eine Adresse in Berlin-Kreuzberg. Den Flughafen Willy Brandt. Fahrer finden wir sortieren jetzt einmal nach der geringsten Distanz, aber nicht nach den Fahrkosten wählen, jetzt bitte den günstigsten Fahrer wählen. Und sehen nun, wie wir auch den günstigsten Fahrpreis haben, das heißt, es wird nach der Distanz sortiert. Aber wir haben daraus folgend auch die geringste Distanz.

Damit konntet ihr sehen, wie wir im Bubble komplexere Algorithmen wie bei einer Taxi App spielend einfach installieren könnt Wenn ihr mehr Komplexität braucht, gibt es noch Filter und Sortierung Möglichkeiten. Aber vor allem zeigt euch, dass wenn ihr die Datenbank richtig strukturiert plus eure Funktionalität eingibt, könnt ihr relativ viel schon mit Nocode erreichen.

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

Features