Todo-Liste mit Rails 8 und dem b4um Generator erstellen

Erstelle mit Rails 8 und dem b4um Generator eine moderne Todo-Liste mit Turbo Streams, Stimulus und automatischer Fortschrittsanzeige. Ganz ohne zusätzliche Todo-Gems und ohne Benutzeranmeldung.

Einführung

Eine Todo-Liste ist ein gutes Beispiel dafür, wie sich mit Ruby on Rails eine moderne und interaktive Webanwendung erstellen lässt.

Wir möchten Aufgaben hinzufügen, als erledigt markieren, wieder öffnen und löschen können. Außerdem soll eine Fortschrittsanzeige zeigen, wie viele Aufgaben bereits abgeschlossen sind.

Normalerweise müssten wir dafür verschiedene Rails-Komponenten selbst erstellen: ein Model, einen Controller, mehrere Views sowie JavaScript und CSS.

Mit dem b4um Generator können wir uns diese Arbeit sparen.

Seit Version 0.5.0 enthält der Generator den Befehl b4um:todo, der eine vollständige Aufgabenverwaltung erstellt.

Dabei kommen moderne Rails-Technologien zum Einsatz:

Turbo Streams: Aktualisiert die Aufgabenliste ohne vollständiges Neuladen der Seite.
Stimulus: Übernimmt die clientseitige Interaktion.
Active Record: Speichert unsere Aufgaben dauerhaft in der Datenbank.
b4um Styling: Sorgt für ein responsives Layout mit Unterstützung für Light Mode und Dark Mode.

In diesem Tutorial erstellen wir zunächst eine öffentliche Todo-Liste, die ohne Benutzeranmeldung funktioniert.

Eine persönliche Todo-Liste mit Benutzerkonten und Zugriffsschutz behandeln wir im nächsten Tutorial.

1. Voraussetzungen

Für dieses Tutorial benötigen wir eine funktionierende Ruby-on-Rails-Entwicklungsumgebung.

Wir verwenden folgende Versionen:

Ruby:

ruby -v

Ausgabe:

ruby 3.4.10

Rails:

rails -v

Ausgabe:

Rails 8.1.4

Außerdem benötigen wir den b4um Generator in Version 0.5.0 oder neuer.

Für unser Beispiel verwenden wir Version 0.5.1.

2. Neue Rails-Anwendung erstellen

Zunächst erstellen wir eine neue Rails-Anwendung.

Öffne das Terminal und führe folgenden Befehl aus:

rails new b4um_todo_tutorial

Rails erstellt jetzt das Grundgerüst unserer Anwendung.

Anschließend wechseln wir in das neue Projektverzeichnis:

cd b4um_todo_tutorial

Damit haben wir die Grundlage für unsere Todo-Anwendung geschaffen.

3. b4um Generator installieren

Damit wir den Todo-Generator verwenden können, müssen wir zunächst das entsprechende Gem installieren.

Öffne dazu die Datei Gemfile und ergänze folgenden Eintrag:

gem "b4um_generators", "~> 0.5.1"

Anschließend installieren wir die Abhängigkeiten:

bundle install

Ob der Generator erfolgreich installiert wurde, können wir mit folgendem Befehl überprüfen:

bundle info b4um_generators

In unserer Testanwendung erhalten wir:

b4um_generators (0.5.1)

Damit steht uns der Todo-Generator zur Verfügung.

4. b4um Grundinstallation durchführen

Bevor wir unsere Aufgabenliste erstellen, installieren wir die grundlegenden Komponenten des b4um Generators.

Dazu führen wir folgenden Befehl aus:

bin/rails generate b4um:install

Der Installationsassistent stellt uns anschließend verschiedene Fragen.

Wir können unter anderem auswählen, ob wir folgende Komponenten installieren möchten:

bcrypt für die Passwort-Authentifizierung
Active Storage für Dateianhänge
Eine Startseite
Eine Hero-Sektion
Einen Footer mit Sitemap
Einen Cookie-Consent-Bereich

Für unsere Testanwendung haben wir sämtliche Komponenten installiert.

Wichtig: Für die öffentliche Todo-Liste sind bcrypt und Active Storage nicht erforderlich. Wir haben diese Komponenten bereits installiert, weil wir unsere Anwendung im nächsten Tutorial um Benutzerkonten und persönliche Aufgabenlisten erweitern möchten.

Der Generator installiert außerdem das b4um-Styling mit den benötigten CSS-Dateien, der Navigation und weiteren Komponenten.

Dadurch erhält unsere Todo-Liste später automatisch das einheitliche b4um-Design.

5. Öffentliche Todo-Liste generieren

Jetzt erstellen wir unsere eigentliche Todo-Anwendung.

Dafür benötigen wir nur einen einzigen Generator-Befehl:

bin/rails generate b4um:todo PublicTask

Wir verwenden den Namen PublicTask, weil wir eine öffentliche Aufgabenliste erstellen möchten.

Der Generator erzeugt automatisch die benötigten Dateien.

Model:

app/models/public_task.rb

Controller:

app/controllers/public_tasks_controller.rb

Views:

app/views/public_tasks/index.html.erb
app/views/public_tasks/_task.html.erb
app/views/public_tasks/_progress.html.erb

CSS:

app/assets/stylesheets/b4um_todo.css

Stimulus:

app/javascript/controllers/b4um_todo_controller.js

Zusätzlich erstellt der Generator eine Datenbankmigration und ergänzt die benötigten Routen.

In config/routes.rb wird beispielsweise folgende Route angelegt:

resources :public_tasks, only: %i[index create update destroy]

Damit stehen die benötigten Aktionen zum Anzeigen, Erstellen, Aktualisieren und Löschen unserer Aufgaben zur Verfügung.

Wir müssen weder den Controller noch die Views selbst programmieren.

6. Datenbankmigration ausführen

Damit unsere Aufgaben dauerhaft gespeichert werden können, müssen wir die Datenbankmigration ausführen.

bin/rails db:migrate

Rails erstellt jetzt die Tabelle public_tasks.

Darin werden später unsere Aufgaben und ihr jeweiliger Erledigt-Status gespeichert.

Nach erfolgreicher Migration ist unsere Todo-Anwendung bereit.

7. Todo-Liste im Browser öffnen

Jetzt starten wir unseren Rails-Server:

bin/rails server

Anschließend öffnen wir folgende Adresse im Browser:

http://localhost:3000/public_tasks

Unsere Todo-Liste wird jetzt angezeigt.

Obwohl wir bisher keinen eigenen Controller oder eine View geschrieben haben, besitzen wir bereits eine vollständige Benutzeroberfläche.

Sie besteht aus einer Fortschrittsanzeige, einem Eingabefeld für neue Aufgaben und zwei Bereichen für offene und erledigte Aufgaben.

Zu Beginn sind noch keine Aufgaben vorhanden.

Die Fortschrittsanzeige zeigt deshalb:

0 von 0 erledigt – 0 % abgeschlossen

Die automatisch generierte Todo-Liste ist sofort einsatzbereit und zeigt zunächst eine leere Aufgabenverwaltung.

8. Neue Aufgaben erstellen

Jetzt möchten wir unserer Todo-Liste einige Aufgaben hinzufügen.

Dazu geben wir den gewünschten Text in das Eingabefeld ein und klicken auf Hinzufügen.

Für unser Beispiel erstellen wir folgende Aufgaben:

Rails-Anwendung erstellen
b4um Generator installieren
Öffentliche Todo-Liste generieren
Turbo Streams testen
Tutorial veröffentlichen

Nach dem Hinzufügen erscheint jede Aufgabe automatisch im Bereich Offene Aufgaben.

Gleichzeitig wird der Aufgabenzähler aktualisiert.

Besonders praktisch ist, dass wir nach dem Hinzufügen einer Aufgabe nicht die gesamte Seite neu laden müssen.

Turbo Streams aktualisiert die betroffenen Bereiche automatisch.

Außerdem wird das Eingabefeld durch unseren Stimulus-Controller zurückgesetzt, sodass wir direkt die nächste Aufgabe eingeben können.

Nachdem wir alle fünf Aufgaben erstellt haben, zeigt die Fortschrittsanzeige:

0 von 5 erledigt – 0 % abgeschlossen

Neue Aufgaben erscheinen sofort in der Liste. Die Aufgabenzähler werden automatisch aktualisiert.

9. Aufgaben als erledigt markieren

Jetzt möchten wir einige unserer Aufgaben abschließen.

Dazu klicken wir auf die Checkbox neben einer Aufgabe.

Sobald wir eine Aufgabe als erledigt markieren, passiert Folgendes:

Die Aufgabe verschwindet aus dem Bereich „Offene Aufgaben“.
Sie erscheint im Bereich „Erledigte Aufgaben“.
Der Aufgabentext wird durchgestrichen.
Die Fortschrittsanzeige wird aktualisiert.

Für unser Beispiel markieren wir drei der fünf Aufgaben als erledigt.

Damit ergibt sich folgender Fortschritt:

3 von 5 erledigt – 60 % abgeschlossen

Der Fortschrittsbalken füllt sich entsprechend.

Wir müssen dafür keine eigene Berechnung implementieren. Der generierte Controller und die dazugehörigen Views übernehmen diese Aufgabe.

Erledigte Aufgaben werden automatisch verschoben. Der Fortschrittsbalken zeigt den aktuellen Bearbeitungsstand.

10. Turbo Streams – Aktualisierungen ohne Neuladen

Ein wesentlicher Bestandteil unserer Todo-Anwendung ist die Integration von Turbo Streams.

Turbo Streams gehört zum Hotwire-Ökosystem und ermöglicht es, einzelne Bereiche einer Webseite gezielt zu aktualisieren.

Wenn wir beispielsweise eine Aufgabe als erledigt markieren, muss Rails nicht die gesamte Seite neu laden.

Stattdessen werden nur die betroffenen Bereiche aktualisiert.

In unserer Todo-Anwendung betrifft das insbesondere:

Die Liste der offenen Aufgaben
Die Liste der erledigten Aufgaben
Die Aufgabenzähler
Die Fortschrittsanzeige

Dadurch fühlt sich unsere Anwendung schnell und unmittelbar an.

Wir benötigen dafür kein zusätzliches JavaScript-Framework wie React oder Vue.

Die benötigte Funktionalität wird direkt vom b4um Generator erstellt.

11. Stimulus – Interaktive Eingabefelder

Neben Turbo Streams verwendet der Todo-Generator auch Stimulus.

Stimulus ist ein leichtgewichtiges JavaScript-Framework, das sich besonders gut in Rails-Anwendungen integrieren lässt.

Unser Generator erstellt automatisch folgende Datei:

app/javascript/controllers/b4um_todo_controller.js

Der Stimulus-Controller unterstützt die Interaktion mit unserem Aufgabenformular.

Wenn wir eine neue Aufgabe erfolgreich erstellt haben, wird das Eingabefeld automatisch geleert.

So können wir direkt die nächste Aufgabe eingeben.

Das Zusammenspiel von Turbo Streams und Stimulus ermöglicht uns eine interaktive Benutzeroberfläche, ohne dass wir umfangreichen eigenen JavaScript-Code schreiben müssen.

12. Aufgaben wieder öffnen

Nicht jede erledigte Aufgabe muss dauerhaft abgeschlossen bleiben.

Vielleicht möchten wir eine Aufgabe erneut bearbeiten oder haben sie versehentlich als erledigt markiert.

Dafür klicken wir einfach erneut auf die Checkbox.

Die Aufgabe wird wieder in den Bereich Offene Aufgaben verschoben.

Auch die Fortschrittsanzeige wird automatisch angepasst.

Wenn wir beispielsweise von drei erledigten Aufgaben eine wieder öffnen, reduziert sich unser Fortschritt von 60 % auf 40 %.

Die Aufgabenverwaltung bleibt dabei vollständig synchron.

13. Aufgaben löschen

Nicht mehr benötigte Aufgaben können wir über das Löschsymbol entfernen.

Dieses befindet sich rechts neben jeder Aufgabe.

Nach dem Löschen wird die Aufgabe aus der Liste entfernt.

Gleichzeitig aktualisieren sich die Aufgabenzähler und die Fortschrittsanzeige.

Dabei spielt es keine Rolle, ob die Aufgabe noch offen oder bereits erledigt war.

14. Aufgaben dauerhaft speichern

Unsere Todo-Liste speichert sämtliche Aufgaben in der Datenbank.

Das bedeutet, dass sie auch nach einem Neuladen der Seite erhalten bleiben.

Wir können das ganz einfach überprüfen.

Erstelle mehrere Aufgaben, markiere einige davon als erledigt und lade anschließend die Browserseite neu.

Die Aufgaben erscheinen wieder mit ihrem bisherigen Status.

Auch die Fortschrittsanzeige zeigt weiterhin den korrekten Wert.

Damit haben wir eine vollständige Aufgabenverwaltung mit dauerhafter Datenspeicherung.

15. Light Mode und Dark Mode

Unsere Todo-Liste verwendet das Styling des b4um Generators.

Dadurch unterstützt sie sowohl den Light Mode als auch den Dark Mode.

Die Darstellung passt sich an das ausgewählte Farbschema an.

Auch auf kleineren Bildschirmen bleibt die Benutzeroberfläche durch das responsive Layout nutzbar.

Wir müssen dafür keine zusätzlichen Stylesheets erstellen.

Die benötigten CSS-Regeln werden bereits durch den Generator bereitgestellt.

16. Öffentliche Todo-Liste ohne Benutzeranmeldung

Bisher haben wir unsere Todo-Liste ohne Benutzerkonten erstellt.

Das bedeutet, dass alle Besucher dieselbe Aufgabenliste verwenden.

Eine Anmeldung ist nicht erforderlich.

Wir können das überprüfen, indem wir unsere Anwendung in einem privaten Browserfenster öffnen.

Auch dort können wir die öffentliche Todo-Liste aufrufen.

Bereits erstellte Aufgaben bleiben sichtbar.

Wichtig: Eine öffentliche Todo-Liste eignet sich beispielsweise für Demonstrationen oder einfache gemeinsam genutzte Aufgabenverwaltungen.

Da kein benutzerspezifischer Zugriffsschutz vorhanden ist, können Besucher ohne zusätzliche Schutzmaßnahmen auch Aufgaben anderer Besucher bearbeiten oder löschen.

Für persönliche Aufgaben benötigen wir deshalb eine Benutzeranmeldung und eine Zuordnung der Aufgaben zum jeweiligen Benutzerkonto.

Genau das werden wir im nächsten Tutorial umsetzen.

17. Fazit

Mit dem b4um Generator haben wir in wenigen Schritten eine vollständige Todo-Anwendung erstellt.

Dafür waren im Wesentlichen nur zwei Befehle notwendig:

Todo-Anwendung generieren:

bin/rails generate b4um:todo PublicTask

Datenbankmigration ausführen:

bin/rails db:migrate

Der Generator hat die benötigten Rails-Komponenten automatisch erstellt.

Unsere Anwendung unterstützt jetzt das Erstellen, Erledigen, Wiederöffnen und Löschen von Aufgaben.

Zusätzlich erhalten wir getrennte Aufgabenlisten, automatische Aufgabenzähler und eine Fortschrittsanzeige.

Dank Turbo Streams und Stimulus funktioniert die Bedienung ohne vollständiges Neuladen der Seite.

Auch das responsive Styling mit Light Mode und Dark Mode ist bereits enthalten.

Damit haben wir eine moderne Todo-Anwendung erstellt, ohne selbst einen Controller, Views oder JavaScript-Code schreiben zu müssen.

Ausblick: Persönliche Todo-Listen mit Benutzeranmeldung

Unsere bisherige Aufgabenliste ist öffentlich und wird von allen Besuchern gemeinsam verwendet.

In unserem nächsten Tutorial erweitern wir die Anwendung um eine Benutzeranmeldung mit bcrypt.

Anschließend verwenden wir die Option --owner=User, um jedem Benutzer eine eigene Todo-Liste zuzuweisen.

Der entsprechende Generator-Befehl lautet:

bin/rails generate b4um:todo Task --owner=User

Dadurch erhält jedes angemeldete Benutzerkonto eine persönliche Aufgabenverwaltung.

Außerdem sehen wir uns an, wie der b4um Generator den Zugriff auf fremde Aufgaben verhindert und nicht angemeldete Besucher automatisch zur Login-Seite weiterleitet

Meld dich an und schreibe ein Kommentar