Digitalisierung des Aachener Karnevals mit Hilfe einer App Seminarvortrag Felix Bengsch 19. Januar 2018

Inhalt Problemstellung Recherche vorhandener Apps Präsentation der App Server: Laravel Client: Ionic Fazit & Ausblick

Problemstellung (1) Auftraggeber: AAK Ziel: Digitalisierung des Aachener Karnevals Gründe: - Zentraler Ort für Veranstaltungen - Liveinformationen

Problemstellung (2) Bisher: Alle Veranstaltungsankündigungen auf Flyer Prozess sehr langwierig Nachträgliche Änderungen unmöglich Plattform mit Zugang für jeden Karnevalsverein, Bündelung der Informationen

Recherche vorhandener Apps Zahlreiche Apps zum Thema Karneval Beispiele: Köln, Mainz und Düsseldorf Allerdings: Nur Apps einzelner Vereine oder Zeitungen, keine App eines Dachverbandes einzelne Aspekte gut, aber oft überladen, Live-Informationen nicht vorhanden

Präsentation der App

Server: Laravel PHP-basiertes Framework für das Backend Eigener ORM: Eloquent Eloquent: Zuordnung DB-Tabelle Model CRUD-Operationen nur auf Model, Eloquent kommuniziert mit der DB

App: Ionic Framework zur Erstellung hybrider Apps HTML, CSS und TypeScript Erste Version: Mai 2015 Installation des Frameworks und Plugins durch NPM Zusammen mit anderen Frameworks: Zugriff auf native Sensoren des Handys wie z.B. Kamera

Neuigkeiten Regelmäßig Neuigkeiten für Benutzer Nur Titel wird in der Liste angezeigt Briefumschlag = ungelesen (wird im Cache gespeichert) Fett = sehr wichtige Neuigkeit Realisierung: *ngFor und *ngIf

*ngFor und *ngIf

Caching

Pushbenachrichtigungen Pushbenachrichtigung beim Eintragen einer Neuigkeit Mithilfe von FCM Zunächst API-Key generieren Quelle: www.firebase.google.com

Veranstaltungen Bisher: Alle Veranstaltungsankündigungen auf Flyer ca 250 Veranstaltungen pro Session kleine Schriftgröße Keine Änderungen im Nachhinein möglich Zugang für die breite Masse

Veranstaltungen Gruppiert nach Tagen Name, Ort, Zeitpunkt und veranstaltende Gruppe Logo des Veranstalters Realisierung: *ngFor

Detailseite einer Veranstaltung Standardelemente von Ionic: - Segments - Slides GoogleMaps-Plugin mit einigen Modifikationen

Rosenmontagszug Kernfunktion der App App reagiert auf Bluetooth-Signale Bild und Name der Gruppe Auge-Symbol: Beacon der Gruppe ist in Reichweite Realisierung: *ngFor

Beacons Kommunikation über Plugin von Ionic Plugin versendet Event, sobald Beacon in Sichtweite kommt/verschwindet Werden über UID identifiziert, in DB wird die Zuordnung UID Gruppe gespeichert Quelle: https://blog.griddynamics.com

Events

Fazit & Ausblick (1) Frameworks Ionic und Laravel sehr mächtig Frühe Version der App am 11.11 präsentiert 400 Downloads in 14 Tagen Inzwischen 750 Downloads Kinder- & Rosenmontagszug 2018

Fazit & Ausblick (2) Erweiterungen für diese spezielle App: Hochladen von Benutzerfotos Votingfunktion für den Schaufensterwettbewerb Weitere Anwendungsfälle denkbar

Quellen https://angularjs.de/buecher/angularjs-buch/angularjs-directives/ https://docs.angularjs.org/guide/compiler https://laravel.com/docs/5.5/eloquent#soft-deleting

Vielen Dank für Ihre Aufmerksamkeit!