In Bubble eigenen Countdown erstellen

Schritt-für-Schritt Anleitung, um einen Countdown in Bubble io zu erstellen

Chris Strobl
Chris Strobl

In diesem Video lernt ihr eigenen Countdown in Bubble zu erstellen.

Video-Tutorial: Countdown in Bubble erstellen

Unter Plugins installiert ihr das kostenlose Plugin Countdown von Copilot.

Anschließend gehen wir in den Design Tab und wählen das Visual Element Countdown aus und ziehen dieses auf den Canvas.

Danach aktivieren wir das Countdown Plugin mit dem Workflow Page is loaded, Element Action, Start a countdown.

Dort wählen wir das Current date time + 30 Sekunden aus.

Im nächsten Schritt erstellen wir ein Textfeld, wählen Dynamic Data aus und nehmen das Countdown Element und können bei diesem Total Seconds auswählen und gehen anschließend auf Preview.

Ein anderer Weg ist es, von einem fixen Datum rückwärts zu zählen. In unserem Beispiel zählen wir die Tage bis zum neuen Jahr.

In der Datenbank erstellen wir einen Data Type Zeitstempel, welcher ein Date ist. Wir erstellen manuell ein Datum in der Datenbank und speichern dieses. Anschließend wählen wir im Workflow bei Start Datum Do a search for und suchen nach genau dem vorhin definierten Zeitstempel. Im Design Tab ändern wir den Text ebenfalls.

Danach gehen wir auf Preview in die Live Demo.


Video Transkript

Hallo, mein Name ist Chris Strobl und ich  zeige euch heute wie wir einen Countdown in Bubble entwickeln Legen gleich mal los,  indem wir in Plugins gehen und das Countdown Plugin von CoPilot installieren. Das ist ein  kostenloses Plugin, welches uns nun hilft einen Countdown zu erstellen.

Als Erstes ziehen wir
das Countdown Plugin einfach auf den Screen, egal wohin. Man sieht es nicht später in der Webseite. Wir können diesen Countdown nun verschiedenartig aktivieren. Die gängige Praxis ist, immer wenn die Seite geladen wird,startet auch der Countdown. Ich gehe auf Workflow, General, Page is loaded und sage Element action, Start a countdown; und wir nehmen das Current Date/Time + 30 Sekunden. Das heißt, immer wenn die Seite geladen wird, holen wir uns einmal das Current Date, dann starten wir einen Countdown, welcher 30 Sekunden dauert. Wir machen hierfür ein Textfeld und ihr könnt euch unter Insert dynamic data das Countdown Feld holen, ihr könnt das verschiedenartig nehmen.

Ob das jetzt Tage, Stunden, Minuten oder Sekunden sind  oder einfach nur Total Time Seconds. Wir gehen jetzt einmal auf Preview. Wir sehen: Wir haben jetzt genau 27 Sekunden bis zum Countdown Ende. Ein anderer Weg ist, dass ihr ein fixes Datum wollt. Dafür gehen wir in die Datenbank, erstellen einen neuen Type und darin
ein neues Field.

Und das wird ein Datum. Geht dann auf App data und erstellt einen neuen Eintrag. Und wir gehen in den Workflow und anstatt nun Current  date/time, machen wir Do a search for Zeitstempel und nehmen den First item Zeitstempel und gehe jetzt in den Design Tab und schreiben den Text. Wir gehen einmal auf Preview. Dann sehen wir einen Countdown zum neuen Jahr. Somit
konntet ihr sehen wie einfach man in Bubble einen eigenen Countdown erstellen kann; entweder mit der Datenbank oder mit einem Current date/time. Das könnt ihr natürlich weiter zu modifizieren für eure Use Cases. Ich wünsche euch weiterhin viel Erfolg und auf bald!

Plugins