Zur Entwicklung der neuen SPA haben wir drei Komponenten erstellt:
Abalo Body enthält die aktuelle Seite, die durch die Navigation ausgewählt wurde.
Bei Navigationsevents (PopState und custom navigate Event) wird die URL gematcht und die Seite
entsprechend geladen.
Zur Generierung des Impressums haben wir ChatGPT genutzt.
Wir haben das bisherige Menu in eine Vue-Komponente umgewandelt welche sich in PopupMenu.vue und PopupMenuEntry.vue aufteilt.
Für diese Aufgabe mussten wir unsere Artikel Card und Showcase Komponenten von TypeScript zu Vue portieren. Die Aufgabe hat einige Zeit in Anspruch genommen, da wir auch andere Komponenten anpassen mussten.
Für die Pagination haben wir die Pagination-Komponente von PrimeVue genutzt. Die Pagination-Komponente bietet viele Konfigurationsmöglichkeiten und ist einfach zu implementieren. Wir speichern das Limit und die aktuelle Seite als URL-Parameter, so dass Nutzer die URL teilen können. Bei Änderungen von Such oder Filtereinstellungen wird die Seite auf 1 zurückgesetzt.
Das Video gibt einen kurzen Einblick in die Komponentenbibliothek PrimeVue. Wir haben uns für PrimeVue entschieden, da es eine große Auswahl an Komponenten bietet. Für die Erstellung des Videos haben wir Canva genutzt.
Das Video lässt sich unter folgenden Link finden: https://www.youtube.com/watch?v=74h-gy96VFc
Da unser Styling bereits größtenteils mit TailwindCSS umgesetzt wurde, haben wir uns entschieden, lediglich das Popup-Menu in SCSS umzusetzen. Hierfür haben wir das Popup-Menu zudem in eine eigene Vue-Komponente ausgelagert.
Wir haben uns für die Nutzung von Laravel Reverb (server) in Kombination mit Echo.js (client) entschieden. Die Installation und Konfiguration von Laravel Reverb hat Schwierigkeiten bereitet, da die Dokumentation nicht sehr ausführlich ist. Nach einigen Versuchen haben wir es jedoch geschafft.
Folgende Pitfalls sind uns aufgefallen:
- Im Broadcast-Event muss die Methode
broadcastOnimplementiert werden, da sonst der Event nicht korrekt an die Websockets gesendet wird. - Die Migrationen für die jobs, failed-jobs und cache Tabelle müssen angelegt und ausgeführt werden, da sonst die Websockets nicht korrekt funktionieren.
php artisan queue:workmuss im Hintergrund laufen, da sonst die Websockets in der Warteschlange hängen bleiben.
Um eine Wartungsnachricht zu verschicken, muss folgender Befehl in der Konsole ausgeführt werden:
php artisan broadcast-maintenance-message "<Nachricht>"Oder über Tinker:
php artisan tinker> broadcast(new App\Events\MaintenanceMessageUpdated('<Nachricht>'));
Wir haben einen neuen API-Endpunkt unter /api/articles/{id}/sold erstellt, der bei
Aufruf den gewählten Artikel als verkauft markiert. Anschließend wird ein ArticleSold-Event
erstellt und auf den Channel articles, article.{id} und user.{id} gebroadcastet.
Unser Client (Echo.js) hört momentan auf den Channel user.{id} und zeigt dem Anbieter
eine Benachrichtigung an, wenn sein Artikel verkauft wurde.
Wir haben eine neue Seite "Profile" erstellt, auf der der Benutzer seine Daten einsehen
kann. Zudem kann er hier seine Artikel einsehen und als reduziert markieren.
Bei der Reduzierung eines Artikels wird ein ArticleDiscounted-Event erstellt und auf den
Channel articles, article.{id} und user.{id} gebroadcastet.
Alle eingeloggten Benutzer erhalten eine Benachrichtigung, wenn ein Artikel reduziert wurde.
In der Datenbank wird der reduzierte Preis gespeichert und beim Artikel angezeigt.
Man könnte die Websockets noch an weiteren Stellen einsetzen, bswp.:
- Synchronisation von Daten zwischen verschiedenen Clients (z.B. neue Artikel)
- Nutzen: Echtzeitaktualisierung der Daten ohne Neuladen der Seite
- Benachrichtigungen bei neuen Nachrichten
- Nutzen: Echtzeitbenachrichtigung über neue Nachrichten
- Benachrichtigung bei Sonderaktionen
- Nutzen: Nutzer können direkt über Sonderaktionen informiert werden