Digitalisierung des Aachener Karnevals mit Hilfe einer App

Transkript

1 Seminararbeit im Rahmen des Studiengangs Scientific Programming Fachhochschule Aachen, Campus Jülich Fachbereich 9 Medizintechnik und Technomethematik Digitalisierung des Aachener Karnevals mit Hilfe einer App Aachen, Dezember 2017 Felix Bengsch

2

3 Inhaltsverzeichnis 1 Einleitung 1 2 Recherche vorhandener Apps 2 3 Implementierung Backend Datenbankaufbau API GET POST PATCH DELETE Frontend Ionic Internationalisierung Caching Config Direktiven *ngfor *ngif Events Neuigkeiten Allgemein Pushnotifications Rosenmontagszug Allgemein Beacons Veranstaltungen Allgemein Indexed List Werbung Recherche bestehender Werbeframeworks Eigene Umsetzung Zusammenfassung und Ausblick 20

4 A Quellcode 22

5 1 Einleitung Der Festausschuss Aachener Karneval (AAK) möchte allen Karnevalsinteressenten eine App zur Verfügung stellen, die sie umfassend über alle Themen rund um den Karneval in Aachen informiert. Der AAK ist der Dachverband aller Karnevalsvereine der Region Aachen. Aus Sicht des AAK ist dieser Schritt aus mehreren Gründen nötig: Zum einen sollte es einen zentralen Ort geben, an dem alle Veranstaltungen wie Karnevalssitzungen eingetragen und eingesehen werden können. Bisher musste jeder Verein seine Veranstaltungen sowie Informationen zu diesen an den Webmaster des AAK schicken. Danach hat dieser einen Flyer vorbereitet, auf dem Informationen zu allen Veranstaltungen zu finden waren. Abb. 1.1 zeigt den Flyer der aktuellen Session. Auf den ersten Blick ist erkennbar, dass er nicht sehr schön ist, außerdem ist die Schrift sehr klein. Es ist offensichtlich, dass dieser Ablauf sehr lange dauerte, da der Webmaster auf alle Vereine (ca. 60 Stück) warten musste. Weiterhin konnten die Informationen nachträglich nicht mehr geändert werden. Dies war besonders ärgerlich, wenn sich im Nachhinein ein Termin änderte. Zum anderen sollen die Zuschauer des Rosenmontagszuges über die App Informationen zur aktuell an ihnen vorbeifahrenden Gruppe erhalten. Diese Funktionalität soll mittels Bluetoothsendern, den so genannten Beacons, realisiert werden. Diese Seminararbeit beschreibt die erste Version einer solchen App. In Kapitel 2 werden zunächst einige vorhandene Karnevalsapps aus anderen Städten vorgestellt sowie bewertet, welche Aspekte der Apps übernommen werden können. Danach wird in Kapitel 3 die vorhandene Implementierung dargelegt. Dabei wird zuerst in Abschnitt 3.1 auf das Backend eingegangen, danach in Abschnitt 3.2 auf das Frontend. Alle Aspekte, die in diesem Kapitel gezeigt werden, werden durch Quellcode erläutert. Weiterhin wird auf einige grundlegende Aspekte der beiden verwendeten Frameworks Laravel und Ionic eingegangen. Abschließend wird in Kapitel 4 ein Fazit gezogen und ein Ausblick auf Erweiterungsmöglichkeiten gegeben. Kostümsitzung Uhr 2. Kostümsitzung Uhr Sonntag 28/01/18 SONNTAG Aachener Narrenzunft 1892 e.v. Karnevalistischer Frühschoppen Uhr Biwak Uhr Kinderbiwak Uhr Herrensitzung Uhr Herrensitzung Uhr Biwak Uhr Kinderbiwak Uhr Kindersitzung Uhr Kinderkostümsitzung Uhr Kinderkostümfest Uhr Kinderkostümfest Uhr Burtscheider Kurpark-Terrassen, Dammstr. 40, Aachen KG Burtscheider Lachtauben 1952 e.v. Saal Kessel, Raerener Str., Aachen-Lichtenbusch KG Oecher Jonge 1950 e.v. Dauergartenverein Lohmühle, Am Hangeweiher 1, Aachen Brander Unterbähner 1969 e.v. Gewerbepark Brand, Aachen KG Oecher Prente 1988 e.v. Ballsaal Altes Kurhaus Aachen, Kurhausstr. 2, Aachen Schwarz-Blaue Funken 1966 e.v. OT St. Hubertus, Händelstr. 8B, Aachen KV Immer Plaaan 1952 e.v. Alkuinrealschule, Alkuinstr. 40, Aachen KG Hooreter Frönnde 2005 e.v. Haarbachtalhalle, Am Mühlenteich 30, Aachen KG Nirmer Narrenzunft 1954 e.v. Saalbau Rothe Erde, Hüttenstr , Aachen KK Oecher Storm 1881 e.v. Pfarrheim St. Rochus, Schwinningstr. 96, Aachen KG Orjenal Mönster Jonge 1971 e.v. Inda-Gymnasium Kornelimünster, Gangolfsweg 52, Aachen Dienstag 30/01/18 DIENSTAG Stadtgarde Oecher Penn von 1857 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen 1. Seniorensitzung Uhr Mittwoch 31/01/18 MITTWOCH Forster KG Närrische e.v. Saalbau Kommer, Forster Linde 55, Aachen Stadtgarde Oecher Penn von 1857 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen 1. Seniorensitzung Uhr 2. Seniorensitzung Uhr Donnerstag 01/02/17 DONNERSTAG Forster KG Närrische e.v. Saalbau Kommer, Forster Linde 55, Aachen Aachener Zeitung 2. Seniorensitzung Uhr 22. Festival der Öcher Lieder Uhr Eurogress Aachen, Europa Saal, Monheimsallee 48, Aachen Freitag 02/02/18 FREITAG KK Oecher Storm 1881 e.v. Quellenhof, Berlinsaal, Monheimsallee 52, Aachen Rathausgarde Öcher Duemjroefe 1953 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen KG Grün-Weiss Lichtenbusch 1966 e.v. Saal Kessel, Raerener Str., Aachen-Lichtenbusch Tropi Garde n.e.v. St. Josef 1970 Josefshaus, Kirberichshofer Weg 6a, Aachen Kappesball Saalbau Rothe Erde, Hüttenstr , Aachen Große Storm Sitzung Uhr Große Kostümsitzung Uhr Möhnenball Uhr 3. Kostümsitzung Uhr Kappesball Uhr Samstag 03/02/18 SAMSTAG KG Nachteulen Aachen 1986 e.v. Lebenshilfe, Hergelsmühlenweg 5, Aachen Sitzung Uhr 1. KG Richterich Koe Jonge 1956 e.v. Peter-Schwarzenberg-Halle, Grünenthaler Str., Aachen Aachener Karnevals Club Royal 1987 e.v. OT Driescher Hof, Königsberger Str. 7a, Aachen 1. Walheimer KG 1973 e.v. Festzelt Walheim, Prämienstr., Aachen Karnevalsverein der Aachener Bäcker 1925 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen AKC Turmschwalben 1970 e.v. Theaterschule Sedanstr., Schleswigstr. 3, Aachen Erste Grosse Brander KG 1954 e.v. Gewerbepark Brand, Aachen KV Immer Plaaan 1952 e.v. Burtscheider Kurpark-Terrassen, Dammstr. 40, Aachen Karnevalsverein der Aachener Bäcker 1925 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen Tropi Garde n.e.v. St. Josef 1970 Josefshaus, Kirberichshofer Weg 6a, Aachen Kindersitzung Uhr Kostümfest Uhr Gala-Kostümsitzung Uhr Sitzung Uhr Große Sitzung Uhr Galasitzung Uhr Jubiläums Sitzung Uhr Ball Uhr 4. Kostümsitzung Uhr Sonntag 04/02/18 SONNTAG KG Grün-Weiss Lichtenbusch 1966 e.v. Messe auf Oecher Platt Uhr Karn. Frühschoppen Uhr Frühschoppen Uhr Kinderfest Uhr Matinee Uhr Kindersitzung Uhr Kindersitzung Uhr Kinderfest Uhr Kinderkostümparty Uhr Seniorensitzung Uhr Seniorensitzung Uhr Kindersitzung Uhr Hausball Uhr 31. Festsitzung mit Verleihung des Ehrentoupets Uhr Kinderfest Uhr Kirche Oberforstbach, Aachen KG Nachteulen Aachen 1986 e.v. Gartenkolonie Am Höfling, Branderhofer Weg 48, Aachen KG Oecher Jonge 1950 e.v. Ort noch offfen Stadtwache Oecher Boerjerwehr 199 e.v. Jugendhaus am Backenzahn, Händelstr. 8B, Aachen Schwarz-Blaue Funken 1966 e.v. Vereinslokal Alt-Brand, Nordstr. 50, Aachen AKC Turmschwalben 1970 e.v. Theaterschule Sedanstr., Schleswigstr. 3, Aachen 1. Walheimer KG 1973 e.v. Festzelt Walheim, Prämienstr., Aachen Aachener Karnevals Club Royal 1987 e.v. OT Driescher Hof, Königsberger Str. 7a, Aachen Erste Grosse Brander KG 1954 e.v. Gewerbepark Brand, Aachen 1. KG Richterich Koe Jonge 1956 e.v. Peter-Schwarzenberg-Halle, Grünenthaler Str., Aachen KG Hooreter Frönnde 2005 e.v. Haarbachtalhalle, Am Mühlenteich 30, Aachen KG Grün-Weiss Lichtenbusch 1966 e.v. Saal Kessel Lichtenbusch Stadtgarde Oecher Penn von 1857 e.v. Goldener Schwan, Markt 37, Aachen Löstige Öcher Figaros Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen Tropi Garde n.e.v. St. Josef 1970 Josefshaus, Kirberichshofer Weg 6a, Aachen Montag MONTAG Aachener Stadtreiter Albert-Vahle-Halle, Hubert-Wienen-Straße 13, Aachen Kostümreiten Uhr Dienstag 06/02/18 DIENSTAG Prinzengarde der Stadt Aachen ARV 1910 e.v. Stute trifft Hengst Die Karnevalssitzung Uhr Zelt vor der 100,5 Arena, Soers, Aachen = Kinderveranstaltungen Alle Angaben ohne Gewähr! Mittwoch 07/02/18 MITTWOCH FestAusschuss Aachener Karneval 1935 e.v. Kinderkostümfest des Märchenprinzen Uhr Empfang Narrenschiff Uhr Närrische Ratssitzung Uhr Kostümreiten Uhr Karnevalsaußensitzung Uhr Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen KG Orjenal Mönster Jonge 1971 e.v. Benediktusplatz Kornelimünster, Aachen Oberbürgermeister der Stadt Aachen Krönungssaal, Rathaus, Markt, Aachen Prinzengarde der Stadt Aachen - A.R.V e.v. Gut Neuhaus, Lintertstr. 80, Aachen IG Eilendorfer Vereine Hof des Eilendorfer Vereinshauses, Nirmer Str. 28, Aachen Donnerstag 08/02/18 FETTDONNERSTAG Forster KG Närrische e.v. Open-Air-Sitzung Jeck op Foorsch Uhr Fettdonnerstag im Karnevalszelt Uhr Fettdonnerstag Open-Air Uhr Altweiberparty Uhr Oche A Love Uhr Mäddchere-Sitzung Uhr Fettdonnerstagsparty Uhr Straßenkarneval Uhr Außengelände Saalbau Kommer, Forster Linde 55, Aachen Brander Unterbähner 1969 e.v. Gewerbepark Brand, Aachen KG Oecher Spritzemänner 1967 e.v. Jonas Tor Burtscheid, Kapelenstr., Aachen Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen Prinzengarde der Stadt Aachen ARV 1910 e.v. Zelt vor der 100,5 Arena, Soers, Aachen Stadtwache Oecher Boerjerwehr 199 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen 1. Walheimer KG 1973 e.v. Festzelt Walheim, Prämienstr., Aachen Tropi Garde n.e.v. St. Josef 1970 Hof, Aachen Freitag 09/02/18 FREITAG Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen 1. Walheimer KG 1973 e.v. Festzelt Walheim, Prämienstr., Aachen Stadtwache Oecher Boerjerwehr 199 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen Bezirksamt Haaren Haarbachtalhalle, Am Mühlenteich 30, Aachen Öcher Narrentreff Uhr Dorfabend Uhr Große Sitzung Uhr Bezirkskarneval Uhr Samstag 10/02/18 SAMSTAG KK Oecher Storm 1881 e.v. Neumarkt, Frankenberger Viertel, Aachen KG Bröselspetze Verlautenheide e.v Pfarrheim, Verlautenheidenerstr., Aachen KG Orjenal Mönster Jonge 1971 e.v. Korneliusmarkt Kornelimünster, Aachen KG De Bahkäufjere 1952 e.v. Philipp-Neri-Haus, Ahornstr. 49, Aachen Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen Prinzengarde Brander Stiere 1928 e.v. Festzelt, Gewerbepark Brand, Aachen GV De Bonneploecker 1977 e.v. Gartenkolonie Eupener Str. 2c, Aachen KG Närrische Flammengilde 1972 e.v. Saalbau Kommer, Forster Linde 55, Aachen Aachener Karnevals Verein 1859 e.v. Ballsaal Altes Kurhaus Aachen, Kurhausstr. 2, Aachen KG Burtscheider Lachtauben 1952 e.v. Burtscheider Kurpark-Terrassen, Dammstr. 40, Aachen Open-Air-Sitzung Uhr Närrisches Treiben Stadtgarde Oecher Penn von 1857 e.v. Eurogress Aachen, Monheimsallee 48, Aachen KG Grün-Weiss Lichtenbusch 1966 e.v. Saal Kessel, Raerener Str., Aachen-Lichtenbusch IG Laurensberger Vereine Altes Rathaus, Rathausstrasse, Aachen Tropi Garde n.e.v. St. Josef 1970 Pfarrkirche St. Fronleichnam, Schleswigstr. 15, Aachen Sonntag 11/02/18 TULPENSONNTAG FestAusschuß Aachener Karneval 1935 e.v. Kinderkostümzug des Märchenprinzen Julius I Uhr Karnevalsumzug Uhr Karnevalsumzug Uhr Karnevalszumug Uhr Karnevalsumzug Uhr Karnevalsumzug Uhr Kaffeevisite Uhr Rekrutenvereidigung Uhr After Zoch Party Uhr After-Zug-Party Uhr Party im Zelt Uhr Penn-Zelt-Party Uhr Kostümball Uhr Große Kostümsitzung Uhr Aachener Innenstadt 1. KG Richterich Koe Jonge 1956 e.v. Richterich, Aachen Brander Unterbähner 1969 e.v. Brand, Aachen KG Grün-Weiss Lichtenbusch 1966 e.v. Lichtenbusch, Aachen KG Hooreter Jonge 1956 e.v. Haaren, Aachen IG Eilendorfer Vereine Eilendorf, Aachen Aachener Karnevals Verein 1859 e.v. Ballsaal Altes Kurhaus Aachen, Kurhausstr. 2, Aachen Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen Erste Grosse Brander KG 1954 e.v. Gewerbepark Brand, Aachen KG Grün-Weiss Lichtenbusch 1966 e.v. Saal Kessel, Raerener Str., Aachen-Lichtenbusch 1. KG Richterich Koe Jonge 1956 e.v. Zelt Richterich, Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen KG Bröselspetze Verlautenheide e.v Pfarrheim, Verlautenheidenerstr., Aachen KG Oecher Prente 1988 e.v. Eurogress Aachen, Europasaal, Monheimsallee 48, Aachen Marktsitzung Uhr Eureg. Jeckenparade Uhr Erbsensuppenessen Uhr Prinzen-Disco-Fever Uhr Lumpenball Uhr Kostümparty Uhr Florresei Palast Uhr Karnevalsparty Uhr Penn-Ball Uhr Prinzenball Uhr Straßenkarneval Uhr Fastelovvendsjoddesdengst Uhr Montag 12/02/18 ROSENMONTAG FestAusschuß Aachener Karneval 1935 e.v. Aachener Innenstadt Stadtgarde Oecher Penn von 1857 e.v. Penn-Zelt, Katschhof, Aachen Aachener Karnevals Verein 1859 e.v. Ballsaal Altes Kurhaus Aachen, Kurhausstr. 2, Aachen KK Oecher Storm 1881 e.v. Insulaner, Bismarkstr. 113, Aachen Rathausgarde Öcher Duemjroefe 1953 e.v. Saalbau Kommer, Forster Linde 55, Aachen Rosenmontagszug Uhr Garde-Ball Uhr Party nach dem Zug sparkasse-aachen.de Lorem ipsum dolores sit amet consectetuer. Wenn man einen Finanzpartner hat, Lorem ipsum dolor sit amet, consectetuer adipis cinem eli sed diam nonummy nibhkarneval euismod nostrudvor exerciort tation fördert. ullamcorper suscipit der den Hausball Uhr After Zoch Party Dienstag 13/02/18 VEILCHENDIENSTAG Aachener Karnevals Verein 1859 e.v. Theater, Theaterplatz 1, Aachen Stadtwache Oecher Boerjerwehr 199 e.v. Abschlussball Uhr TrööetemannVerbrennung Uhr Aposto, Kapuzinerkarree, Kapuzinergraben 19, Aachen Lorem insu Jeck dol sitamet. ist einfach. Mittwoch 14/02/18 ASCHERMITTWOCH FestAusschuss Aachener Karneval 1935 e.v. Hoher Dom zu Aachen Abschlussgottesdienst Uhr lobortis nisl ut. Layout & Print: IMAGEROUP24.de KG Nirmer Narrenzunft 1954 e.v. Saalbau Rothe Erde, Hüttenstr , Aachen Tropi Garde n.e.v. St. Josef 1970 Josefshaus, Kirberichshofer Weg 6a, Aachen Abbildung 1.1: Bisheriger Veranstaltungsflyer 1 Termine Session

6 2 Recherche vorhandener Apps Am Anfang des Projektes stellte sich die Frage, ob es schon Apps zum Thema Karneval gibt und wenn ja, welche Aspekte man von diesen in die eigene App übernehmen kann. Sucht man im AppStore beziehungsweise PlayStore nach dem Begriff Karneval, so findet man zahlreiche Apps einzelner Vereine oder regionaler Partner wie Zeitungen. Zwar haben einige dieser Apps ganz interessante Funktionen, wie die Texte lokaler Karnevalslieder oder eine Navigation zum nächsten öffentlichen WC, all das entsprach aber nicht dem, was mit diesem Projekt erreicht werden sollte, nämlich eine Plattform mit Zugang für jeden Karnevalsverein, um aktuelle Informationen und Veranstaltungstermine an einer Stelle zu bündeln. Im Folgenden werden die Funktionen einiger Karnevalsapps gezeigt, dabei wird sich auf die Apps der Karnevalshochburgen Köln, Mainz und Düsseldorf konzentriert. AppSolut jeck [Bie17](Köln): Diese App listet Veranstaltungen mit ihren Minimalinformationen auf. Dazu gehören Titel, Veranstalter, Beginn, Ort und ein Link auf die Webseite des Veranstalters. Die gesamte Liste sieht nach zusammenkopierten Komponenten aus und es scheint, als sei nicht wirklich viel Aufwand in das Design gesteckt worden. Allerdings gibt es sehr viele Filtermöglichkeiten, so kann man nach Terminen, Veranstaltern, Orten und Veranstaltungskategorien filtern. Mainzer Fastnacht [Gmb17a](Mainz): Die Veranstaltungsübersicht dieser App wirkt freundlicher als in Köln, es gibt ein Foto und mehr Informationen zu jeder Veranstaltung. Dies ist aber kein wirklicher Vorteil. Weiterhin gibt es eine Sektion Umzug, diese ist aktuell aber noch nicht funktionsfähig. Selbiges gilt für den Neuigkeiten-Teil. Darüber hinaus gibt es noch eine Sektion Hotels, mit der man Hotels buchen kann. Diese Funktion wirkt zwar auf den ersten Blick ganz nützlich, ist aber auf den zweiten Blick überflüssig, da es genug andere Plattformen dafür gibt und man diese nicht zwangsläufig in eine Karnevalsapp integrieren muss. Jeck in Düsseldorf [Gmb17b] (Düsseldorf): Beim Start der App kommt man zum Bereich Neuigkeiten. Dieser ist sehr übersichtlich aufgebaut, dort werden auch regelmäßig neue Meldungen erstellt. Wichtige Meldungen werden durch ein Bild als Hintergrund besonders hervorgehoben. Es gibt zudem eine Übersicht von allen Veranstaltungen mit jeweils detaillierten Informationen. Allerdings sind nur zukünftige Veranstaltungen zu sehen, es gibt keine Möglichkeit, sich vergangene Veranstaltungen anzeigen zu lassen. Zusätzlich gibt es einen Bereich Zugaufstellung, der die Reihenfolge der am Zug teilnehmenden Gruppen auflistet. Allerdings gibt es keine Informationen zu den einzelnen Gruppen, sodass sich dieser Bereich nicht gut in die App eingliedert. Um die Recherche zusammenzufassen kann man sagen, dass man aus den betrachteten Apps einige interessante Punkte extrahieren kann, dennoch muss die Beacon-Funktionalität selbst entwickelt werden. 2

7 3 Implementierung Da die App eine typische Client-Server-Kommunikation benötigt, muss sowohl das Backend (Server) als auch das Frontend (Client) implementiert werden. Die beiden genutzten Frameworks, Laravel für das Backend und Ionic für das Frontend, wurden ausgewählt, da sie sehr mächtig sind und einem großen Funktionsumfang bieten. 3.1 Backend Die erste Version von Laravel wurde im Juni 2011 veröffentlicht. Mit Hilfe von Eloquent, das in Laravel integriert ist, ist es möglich, mit der Datenbank über so genannte Models zu kommunizieren. Eloquent ist der ORM (object-relational mapper) von Laravel. Er ordnet jeder Datenbanktabelle ein Model zu. Man führt nur Operationen auf dem Model aus, Laravel kümmert sich dann um die Kommunikation mit der Datenbank. Ein weiterer Vorteil des Frameworks ist, dass die gesamte Datenbank mit Migrations aufgebaut und verändert werden kann. Eine Migration ist eine PHP-Klasse, die zwei Methoden besitzt: up() zum Ändern oder Neuanlegen und down(), um die Änderungen wieder rückgängig zu machen. Quellcode A.1 zeigt die Migration, die die Tabelle users mit den Spalten id, , username und password anlegt. Zusätzlich ist die Spalte id der Primärschlüssel und imkrementiert sich automatisch um eins. Werte der Spalte dürfen nur einmal auftauchen. Durch das ganze Framework zieht sich das Convention over configuration-paradigma. Das bedeutet, dass der Entwickler nichts konfigurieren muss, solange er sich an die Konventionen hält. Konkret bedeutet das zum Beispiel, dass dem Model User die Datenbanktabelle users zugeordnet ist. Der Vorteil dieses Paradigmas ist, dass keine Zeit durch aufwendige Konfigurationen verloren geht. Weiterhin ist es trotzdem möglich, die Konventionen zu überschreiben. Die Konvention der Zuordnung Model Datenbanktabelle ist nur eine von vielen Beispielen des Convention over configuration-paradigmas in Laravel Datenbankaufbau Abb. 3.1 zeigt den Aufbau der Datenbank. Aus Platzgründen werden die Attribute der Tabellen event_user_pictures, event_pictures, news_pictures und article_pictures weggelassen, da sie alle bis auf eins identisch sind: Sie speichern neben dem Speicherort des Bildes auch die id des Benutzers, der es hochgeladen hat. Weiterhin wird natürlich auch die id des Objektes gespeichert, zu dem es gehört (also News, Event oder Article). Auf den ersten Blick sieht man, dass die Tabelle users eine zentrale Rolle im Datenbankschema spielt: In fast allen Tabellen (nur in beacons und ads_banners nicht) wird die user_id gespeichert, welche 3

8 ein Fremdschlüssel auf das Attribut id von users ist. Die users-tabelle enthält neben den Attributen name, und mobile auch die Attribute api_token und remember_token, welche benötigt werden, um einen angemeldeten Benutzer zu identifizieren. Weiterhin fällt auf, dass die Tabelle ads_banners keine Verbindung zu anderen Tabellen besitzt. Dies liegt daran, dass zu einem Werbebanner nur die werbende Firma, der Speicherort des Bildes und zuletzt die Anzeigedauer gespeichert wird. Auf die Werbebanner wird in Abschnitt noch genauer eingegangen. In der Tabelle events werden alle Informationen zu Events gespeichert. Dies sind neben dem Namen auch die Startzeit, die Beschreibung, das Programm und der Veranstaltungsort. Die Tabelle news speichert alle Neuigkeiten und die dazugehörigen Informationen. Eine Neuigkeit besteht aus einem Titel und einem Text. Weiterhin kann angegeben werden, ob die Neuigkeit sehr wichtig ist oder nicht (mittels top_news), außerdem wird in release_date gespeichert, wann die Neuigkeit veröffentlicht werden soll. Dieser Zeitpunkt kann auch in der Zukunft liegen, sodass es auch möglich ist, eine Neuigkeit einzutragen, sie aber erst später angezeigt wird. In der Tabelle articles sind die Informationen zu allen Karnevalswagen gespeichert: Ein Karnevalswagen hat einen Titel und einen Beschreibungstext. Weiterhin wird die id des article_pictures, welches das Hauptbild darstellen soll, gespeichert. Der Name der Tabelle ist deshalb articles, da die App später verallgemeinert werden soll. In diesem konkreten Fall stellt ein article einen Karnevalswagen dar, allerdings kann er später alles mögliche darstellen, sodass ein allgemeinerer Name passender erschien. Der Aspekt Soft-Deletes wurde im Datenbankschema aus Platzgründen bewusst ausgeklammert. In der Laravel-Dokumentation heißt es dazu: In addition to actually removing records from your database, Eloquent can also soft delete models. When models are soft deleted, they are not actually removed from your database. Instead, a deleted_at attribute is set on the model and inserted into the database. If a model has a non-null deleted_at value, the model has been soft deleted. Laravel-Dokumentation[Otw17] Ruft man also auf einem Model, welches Soft-Deletes unterstützt, die Methode delete() auf (siehe Abschnitt ), so wird der entsprechende Datensatz nicht aus der Datenbank gelöscht, das Attribut deleted_at wird nur auf den aktuellen Zeitstempel gesetzt. Weiterhin werden Datensätze, welche bereits soft-deleted wurden, aus allen Datenbankanfragen automatisch herausgefiltert, sodass man als Entwickler keinen Mehraufwand hat. Natürlich ist es auch möglich, Datensätze, die soft-deleted wurden, wiederherzustellen, indem man einfach auf dem entsprechenden Objekt die Methode restore() aufruft. Der große Vorteil von Soft-Deletes ist, dass aus Versehen gelöschte Datensätze einfach wiederhergestellt werden können. Allerdings wird die Datenbank schnell sehr voll, was zur Folge hat, dass die Anfragen an die Datenbank langsamer werden. Deshalb sollten Soft-Deletes mit Bedacht eingesetzt werden. Natürlich ist es auch möglich, auf Soft-Deletes zu verzichten, dann wird der entsprechende 4

9 Abbildung 3.1: Datenbankaufbau 5

10 Datenbankeintrag einfach gelöscht. Der Nachteil hierbei ist, dass versehentlich gelöschte Einträge nicht wiederhergestellt werden können API Für Datenbankoperationen (Lesen, Schreiben und Löschen) stellt der Server eine API (Application Programming Interface) zur Verfügung. Die App ruft spezielle URLs mit Hilfe von HTTP auf und erhält dann eine Antwort vom Server, welche die gewünschten Daten enthält. Jede HTTP-Anfrage wird durch die Angabe der Methode eingeleitet. Diese bestimmen die Aktion, die durch die Anfrage ausgeführt wird. Folgende Methoden werden zur Kommunikation zwischen Client und Server verwendet: GET, um Daten abzufragen POST, um einen neuen Datensatz in die Datenbank einzufügen PATCH, um einen vorhandenen Datensatz zu editieren DELETE, um einen Datensatz zu löschen Im Folgenden wird die Implementierung der vier Methoden am Beispiel des ArticleControllers gezeigt. Dafür benötigt man weiterhin das Model Article, welches durch das Convention over configuration-paradigma automatisch der Tabelle articles zugeordnet ist. Auf die in Quellcode A.2 gezeigten Methoden wird in Abschnitt genauer eingegangen GET Quellcode A.3 zeigt die Methode index(), die ausgeführt wird, wenn die URL GET /articles aufgerufen wird. In den Methoden images und beacons wird weiterhin festgelegt, dass zwischen den Models ArticlePicture und Article beziehungsweise zwischen Beacon und Article eine N:1-Beziehung herrscht, also ein Beacon/ArticlePicture genau einem Article zugeordnet ist. Weiterhin besitzt ein Article n Beacons/ArticlePictures. Das Argument der Methode Article::with() ist ein Array, welches die Methodennamen enthält, die die Beziehungen eines Articles beschreiben. Die nachfolgenden Methoden get() und toarray() wandeln die Articles nur noch in ein Array um, welches dann der Methode insertadsinarticles übergeben wird. Diese fügt in ein Array von articles Werbung ein. Auf die konkrete Implementierung wird in Abschnitt genauer eingegangen POST Um einen neuen Article anzulegen, muss die URL POST /articles aufgerufen werden. Quellcode A.4 zeigt die Methode store, die dann ausgeführt wird. Alle benötigten Informationen wie der Name werden clientseitig im HTTP-Header gesetzt. Diese Informationen sind in der Methode store in der Variable $request verfügbar. In Zeile drei wird zunächst ein neues Article- Objekt erzeugt. Der Aufruf von $request->all() sorgt dafür, dass dieses Objekt bereits mit allen Werten der HTTP-Headerfelder initialisiert wird. Da die user_id kein Headerfeld ist, wird sie in Zeile vier noch gesetzt, ehe der Article in Zeile fünf in der Datenbank gespeichert wird. Bereits an dieser Stelle sind alle erforderlichen Informationen des zu speichernden Articles in 6

11 der Datenbank abgelegt. Jetzt müssen aber noch die dazugehörigen Bilder gespeichert werden, was in den Zeilen sieben bis 40 geschieht. Zunächst wird ein Objekt $ret erstellt, welches später zurückgegeben wird. Es enthält neben dem schon gespeicherten $article ein leeres Array images, in dem Informationen über die zugehörigen Bilder gespeichert werden. Falls der HTTP-Header ein Feld namens images hat, wird über jedes Objekt aus diesem Array iteriert. Ein solches Objekt enthält im Wesentlichen die base64-stringdarstellung des Bildes. Zunächst wird mit uniqid(, true) eine einzigartige, 23 Stellen lange Zeichenkette generiert, welche als Dateiname fungiert. In Zeile 14 wird die Methode saveimage aufgerufen, welche den base64-string in einer JPG-Datei speichert. Der Zweite Übergabeparameter dieser Methode spezifiziert den Speicherort. Alle Bilder müssen im public_path gespeichert werden, damit man auf sie von außerhalb zugreifen kann. Nachdem das Bild gespeichert ist, wird in den Zeilen 16 bis 20 ein neues ArticlePicture-Objekt erzeugt, was in Zeile 21 in die Datenbank abgespeichert wird. Weiterhin ist es möglich, im HTTP-Header das Feld announcement_pic_index zu setzen. In diesem Falle wird in Zeile 23 überprüft, ob der Wert dieses Feldes gleich der Laufvariablen $count ist. Tritt dies ein, so wird das Attribut gallery des Bildes auf 1 und picture_id_on_announcement auf die id des Bildes gesetzt. Dies wird benötigt, da in der Karnevalswagenliste der App ein Bild als Vorschaubild zu sehen ist. Es ist genau das Bild, bei dem das Attribut gallery den Wert 1 hat. Schließlich wird das gerade gespeicherte $picture dem Array $ret->images hinzugefügt und die Laufvariable um eins erhöht (Zeilen 30 und 31). Sollte während der Verarbeitung des Bildes eine Exception auftreten, zum Beispiel, weil man keine Schreibrechte im angegebenen Speicherort hat oder die hochgeladene Datei keine Bilddatei war, so wird diese Exception in den Zeilen 33 bis 36 abgefangen, eine Fehlermeldung in die Log-Datei geschrieben und mit dem nächsten Element weitergemacht. Am Ende wird das in Zeile sieben erzeugte Objekt $ret in das JSON-Format kodiert und zurückgegeben PATCH Die in Quellcode A.5 gezeigte Methode update() wird ausgeführt, wenn von der App die URL PATCH /articles/{article_id} aufgerufen wird. Zunächst fällt auf, dass die Methode neben dem $request auch einen $article erhält. Hier stellt sich die Frage, wie die Methode den korrekten Datensatz übergeben bekommt. Durch die Benennung des Übergabeparameters nach Konvention (nämlich genau wie das Model), wird der entsprechende Datensatz aus der Datenbank anhand des Primärschüssels id geladen und $article ist das zu aktualisierende Article- Objekt. Der Aufbau der Methode ähnelt der im vorherigen Abschnitt gezeigten Methode store(), allerdings weist sie ein paar Änderungen auf: Zunächst werden alle Attribute des $article mit den Daten der HTTP-Anfrage aktualisiert und dann gespeichert (Zeilen drei und vier). Danach werden alle zum $article gehörigen Bilder gelöscht, was über die Relation images geschieht (siehe Abschnitt ). Danach wird wie im vorherigen Abschnitt ein Objekt $ret definiert und danach über alle images des HTTP-Headers iteriert. Sollte das aktuelle $image ein Attribut content besitzen (es ist also ein Bild, welches noch nicht auf dem Server existiert), so werden in den Zeilen 15 bis 24 die selben Schritte ausgeführt wie in der Methode store des vorherigen Abschnittes. Sonst (das Bild ist also schon auf dem Server gespeichert) wird ein neues ArticlePicture-Objekt 7

12 angelegt und mit den Daten des HTTP-Header gefüllt. Dies ist nötig, da zuvor alle Bilder gelöscht wurden. Danach wird wie bei store, falls nötig, das gallery-attribut eines Bildes gesetzt. Am Ende der Methode wird das zuvor erzeugte Objekt $ret zurückgegeben. Es enthält nebem dem aktualisierten Article auch die dazugehörigen aktualisierten Bilder DELETE Wird die URL DELETE /articles/{article_id} aufgerufen, so wird die Methode destroy() aus Quellcode A.6 ausgeführt. Wie im vorherigen Abschnitt ist der Übergabeparameter nach Konvention benannt, weshalb $article das zu löschende Article-Objekt ist. Auf diesem muss nur noch die Funktion delete aufgerufen werden, um das Attribut deleted_at des entsprechenden Eintrags auf den aktuellen Zeitstempel zu setzen. Der article ist jetzt soft-deleted. 3.2 Frontend Die App, also das Frontend, wurde mit dem Framework Ionic programmiert Ionic Das Framework Ionic ist ein Framework zur Erstellung von hybriden Apps und basiert dabei auf HTML, CSS und TypeScript. TypeScript ist eine Weiterentwicklung von Javascript. Der Javascriptcode ist vollständig kompatibel mit Typescript. TypeScript erweitert das gewöhnliche Javascript jedoch um Typsicherheit und Sichtbarkeit (also private, public und protected). Weiterhin ist es mit Apache Cordova möglich, auf die nativen Sensoren wie Beschleunigungssensor oder Kamera mobiler Endgeräte zuzugreifen. Der Aufbau der einzelnen Seiten der App geschieht mit gewöhnlichem HTML, das Ionic um weitere HTML-Tags erweitert hat, um den Elementen ein natives Aussehen zu geben. Trotzdem kann das Aussehen noch mit CSS verändert werden. Abb. 3.2 zeigt das Zusammenspiel von Ionic, Angular und Cordova. Angular implementiert das Databinding, welches dafür sorgt, dass Datenquelle Abbildung 3.2: Aufbau von Ionic [Kra15] (zum Beispiel ein Array) und Anzeige immer konsistent sind. Ändert man also die Datenquelle, so wird die Anzeige automatisch aktualisiert. Das Apache-Projekt Cordova bietet eine Bibliothek an, um via JavaScript auf die Hardware des Smartphones zuzugreifen. Um die Funktionen von Cordovas JavaScript-Bibliothek zu nutzen, könnte man diese einfach global in die mit AngularJS erstellten Anwendungen - an das window-objekt einhängen und verwenden. Doch widerspricht diese Vorgehensweise dem Model-View-Controller-Pattern von AngularJS. ngcordova löst das Problem, platziert 8

13 sich auf der Bibliothek von Cordova und macht so alle Funktionen per Dependency Injection von AngularJS verfügbar. Durch diese können dann einzelne Funktionen in ihre Komponenten injiziert und verwendet werden. Nun stellt sich die Frage, wie all diese Frameworks zusammenarbeiten: Jedes Framework hat eine bestimmte Zuständigkeit. Ionic arbeitet ausschließlich für die Benutzeroberfläche. Dabei stellt es vorgefertigte CSS-Komponenten und User-Interface-Funktionen über Direktiven oder Services zur Verfügung, die dann im HTML als eigene Elemente und Attribute aktiviert und eingebunden werden können. AngularJS bietet die Infrastruktur beziehungsweise Architektur, um hybride Webanwendungen zu entwickeln und ngcordova schließlich sorgt für den Zugriff auf die Smartphone- Hardware. Die erste Version von Ionic wurde im Mai 2015 veröffentlicht, mittlerweile ist Version die aktuellste. Das Framework selbst und Plugins werden mit dem Paketmanager NPM (Node Package Manager) installiert. Es muss also nur initial NPM installiert werden, was das Hinzufügen, Aktualisieren und Entfernen von Plugins sehr einfach macht Internationalisierung Ein wichtiger Aspekt von Apps ist, dass alle Texte einfach internationalisiert, also in verschiedene Sprachen übersetzt werden können. Internationalisierung ist von großer Relevanz für die App, da Aachen grenznah liegt, sodass eventuell auch ausländische Benutzer auf die App aufmerksam werden. Hier bietet Ionic eine ebenso komfortable wie mächtige Lösung an: Das Plugin TranslateService bestimmt anhand der eingestellten Sprache auf dem Handy automatisch die Sprache, in die alle Texte übersetzt werden müssen. Der Entwickler muss nur die Übersetzungen bereitstellen, alles andere wird ihm durch das Plugin abgenommen. Des Weiteren ist es möglich, eine Sprache als Fallback einzustellen. Dabei wird eine Sprache festgelegt, die verwendet werden soll, falls es für die eigentlich zu benutzende Sprache keine Übersetzungsdatei gibt. Die Benutzung des Plugins läuft wie folgt ab: Zunächst legt man pro Sprache eine json-datei im Projektverzeichnis an (später mehr dazu) und speichert die Übersetzungen als Schlüssel-Werte-Paare ab. Hierbei ist wichtig, dass die Übersetzungen in allen Dateien den selben Schlüssel verwenden. Quellcode A.7 und Quellcode A.8 zeigen zwei beispielhafte Übersetzungsdateien, an denen das weitere Vorgehen beschrieben wird. Bevor man den TranslateService nutzen kann, muss man im Quellcode angeben, wo die Übersetzungsdateien gefunden werden können. Quellcode A.9 zeigt eine verkürzte Version der Datei app.module.ts. Hier werden in erster Linie die Seiten der App der Oberklasse bekannt gemacht, allerdings sollte man hier auch den Speicherort der Übersetzungsdateien angeben. In den Zeilen eins und zwei werden zunächst die benötigten Klassen für den TranslateService importiert. Die Funktion HttpLoaderFactory in Zeile vier legt fest, dass sich die Übersetzungsdateien im Verzeichnis./assets/i18n/ (2. Parameter) befinden und alle die Endung.json (3. Parameter) haben. Nachdem der TranslateService initialisiert wurde, kann man ihn sowohl in HTML-Dateien als auch in ts-dateien benutzen. In HTML-Dateien: In HTML-Dateien wird der Translateservice folgendermaßen benutzt: {{ DONE_BUTTON translate }} Der Schlüssel, zu dem die Übersetzung an- 9

14 gezeigt werden soll, wird als String mit dem pipe-operator der Pipe translate übergeben. Eine Pipe ist eine Funktion, die eine Eingabe ändert und diese wieder ausgibt. Ein anderes Beispiel für eine Pipe ist die Möglichkeit, ein Datum in ein bestimmtes Format umzuwandeln. Der obige HTML-Code gibt entweder Fertig oder Done aus, je nachdem, welche Sprache auf dem Handy eingestellt ist. In ts-dateien: Quellcode A.10 zeigt die Benutzung des TranslateServices in einer ts-datei. Zunächst wird der TranslateService in Zeile eins importiert. Im Konstruktor wird eine Instanz dessen übergeben, sodass man innerhalb der gesamten Klasse mit this.translate auf ihn zugreifen kann. Dies wird in Zeile fünf auch gemacht: Es wird die Methode get mit dem Übergabeparameter DONE_BUTTON aufgerufen, welche eine Promise zurückgibt. Das bedeutet, dass der Code in Zeile sechs erst ausgeführt wird, wenn die Übersetzung für DO- NE_BUTTON bestimmt wurde. Dies passiert asynchron und kann einige Zeit dauern, weshalb es in einem separaten Thread ausgeführt wird. Der Code, der nach der Promise ausgeführt wird, wird also durch diese nicht blockiert. Sobald der Übersetzungstext gefunden wurde, ist er innerhalb der Promise unter dem Namen value verfügbar, er kann beispielsweise gespeichert werden. Die Methode get kann nicht nur mit einem einzelnen String, sondern auch mit einem Array von Strings als Übergabeparameter aufgerufen werden. Dies ist in Zeile neun gezeigt. Dort werden DONE_BUTTON und CANCEL_BUTTON in einem Array übergeben, auf die übersetzten Texte wird mit zum Beispiel values.cancel_button zugegriffen. Dieser Aufruf macht dann besonders Sinn, wenn man viele Übersetzungen benötigt Caching Ein wichtiger Punkt in Sachen Benutzerfreundlichkeit ist, dass die App auch dann benutzbar ist, wenn das Handy nicht mit dem Internet verbunden ist. Deshalb sollten Daten, die einmal heruntergeladen wurden, im Speicher des Gerätes gesichert und bei vorhandener Internetverbindung aktualisiert werden. Konkret heißt das, dass die App beim Start zunächst die gespeicherten Daten anzeigt und beim Server neue Daten anfragt. Erhält sie eine Antwort vom Server, werden diese Daten in den Speicher geschrieben und angezeigt. Erhält sie diese nicht oder einen Fehler, werden weiterhin die gespeicherten Daten angezeigt. Die App sichert alle News, Events und Karnevalswagen. Bilder können zwar auch gesichert werden, dies ist aber nicht Bestandteil dieser Arbeit. Da Speicherzugriff eine häufig auftretende Anforderung ist, gibt es dafür ein von Ionic bereitgestelltes Plugin. Quellcode A.11 zeigt die Benutzung des Storage-Plugins anhand eines Auszuges der Klasse KarnevalsServiceProvider. Die Klasse ist in der App für die Kommunikation mit der API und das Cachen der Daten zuständig. Wie auch beim TranslateService übergibt man eine Instanz des Plugins im Konstruktor, nachdem man es vor der Klasse importiert hat. Die in Zeile zehn beginnende Methode save ist dafür zuständig, die Membervariable _items unter dem Schlüssel KEY im Cache abzulegen. Das Gegenstück zu dieser Methode ist die Methode load darunter. Sie gibt eine Promise zurück: Zunächst wird die Methode get des Storages aufgerufen. War das Laden des Wertes zum Schlüssel KEY erfolgreich, wird der Codeblock von den Zeilen 17 bis 20 aufgerufen. Der Wert steht innerhalb dieses Blockes in der Variable value zur Verfügung. Sollte es 10

15 nicht erfolgreich sein (zum Beispiel wegen fehlender Berechtigungen), wird der Block von den Zeilen 21 bis 23 aufgerufen. Hier könnte man den Fehler weiter behandeln. Natürlich ist die Klasse KarnevalsServiceProvider in der App wesentlich komplexer, dieser Codeausschnitt soll nur die Verwendung des Storage-Plugins zeigen Config Hat man Variablen, auf die man von mehreren Stellen aus zugreifen muss, eignet sich dazu das Config-Plugin besonders gut. Globale Variablen werden an einer zentralen Stelle gesetzt, anschließend ist der Zugriff und das Verändern dieser sehr einfach. Quellcode A.12 zeigt die Benutzung des Plugins. Zunächst ist in den Zeilen eins bis 13 die Datei app.module.ts dargestellt. Hier werden alle Seiten der App deklariert. Weiterhin wird dem IonicModule ein Array an globalen Variablen übergeben. In diesem Codebeispiel besteht es nur aus der Variable api_url, welche den Wert besitzt. Die Zeilen 15 bis 26 wiederum zeigen das Lesen und Schreiben einer in der Config gespeicherten Variable. Zunächst muss, wie bei allen Plugins, eine Instanz zuerst importiert und dann dem Konstruktor übergeben werden. Die Zeile 21 zeigt, wie man den Wert der globalen Variable api_url ausliest, während Zeile 24 demonstriert, wie man den Wert dieser Variable auf einen neuen Wert, in diesem Falle setzt Direktiven Ein wichtiger Bestandteil von AngularJS, welches von Ionic benutzt wird, ist die Verwendung von Direktiven. Eine Direktive ist ein zusätzliches Attribut in einem HTML-Tag, die den AngularJS- Compiler anweist, dem Element ein bestimmtes Verhalten anzuhängen oder das Element und seine Kinder zu verändern. [Ang17a] Diese Definition klingt etwas sperrig, in den nächsten beiden Absätzen wird aber klar, was damit gemeint ist. AngularJS selbst definiert eine Reihe von Direktiven, auf zwei von ihnen wird in dieser Arbeit etwas genauer eingegangen *ngfor Die *ngfor-direktive dient dazu, eine Liste von Objekten oder einzelne Attribute der Listenelemente auszugeben. Sie ist vergleichbar mit einer Foreach-Schleife aus anderen Programmiersprachen. Quellcode A.13 zeigt die Benutzung dieser Direktive: Zunächst wird in den Zeilen eins bis 15 ein Array mit 3 Elementen mit dem Variablennamen personen definiert. Jedes Element dieses Arrays hat die Attribute vorname und nachname, dieser Teil des Codes befindet sich in der ts-datei. Die Zeilen 17 bis 20 zeigen den HTML-Code: Zunächst wird ein div-tag mit der *ngfor-direktive geöffnet. Die Syntax ist wie bei einer Foreach-Schleife: Zunächst wird eine Laufvariable (in diesem Falle person) festgelegt, danach, über welches Array iteriert werden soll, hier über personen. Des Weiteren kann durch let j = index der aktuelle Index über die Variable j herausgefunden werden. Innerhalb des <div>-blockes kann man nun auf die Attribute der aktuellen person zugreifen. Damit ein Ausdruck nicht als reiner Text abgebildet wird, sondern ausgewertet wird, muss er in doppelte geschweifte Klammern gesetzt werden, wie es mit dem Index, dem Nach- und dem Vornamen geschieht. Der Quellcode erzeugt also folgende Ausgabe: 11

16 Person an Position 0: Meyer, Hans Person an Position 1: Müller, Josef Person an Position 2: Schmitz, Jan Durch das Databinding wird die Anzeige automatisch aktualisiert, sobald das Array personen oder irgendein Element daraus verändert wird. Datenquelle (Array) und Anzeige sind also auf jeden Fall konsistent *ngif Während die *ngfor-direktive dafür genutzt wird, um eine Liste darzustellen, wird die *ngif -Direktive benutzt, wenn man einen bestimmten Teil des HTML-Codes nur anzeigen will, wenn eine bestimmte Bedingung erfüllt ist. Quellcode A.14 zeigt ein einfaches Beispiel: In der ts-datei wird in Zeile zwei eine Variable sollanzeigen deklariert und auf den Wert true gesetzt. In der HTML-Datei wird wieder ein <div>-tag geöffnet, welches nun die *ngif -Direktive verwendet: Der gesamte Block wird nur angezeigt, wenn der boolsche Ausdruck (in diesem Falle sollanzeigen) den Wert true liefert, sonst nicht. Tut er dies nicht, wird der gesamte Block aus dem DOM ( ˆ= Document Object Model) entfernt, was den Speicherverbrauch und die Performance deutlich steigert, da verborgene Elemente nicht aktualisiert werden müssen. Durch das Databinding wird es dem DOM wieder hinzugefügt und angezeigt, sobald der boolsche Ausdruck der *ngif -Direktive den Wert true zurückgibt. [Ang17b] Es ist nicht möglich, beide Direktiven in einem HTML-Element zu verwenden. Stattdessen müssen, wie in Quellcode A.15 gezeigt, zwei unterschiedliche Elemente benutzt werden. Dieses Beispiel hat, wie das Beispiel in Quellcode A.13, ein Array personen, über das mit der *ngfor-direktive iteriert wird. Bevor der Vor- und Nachname der Person ausgegeben wird, wird mit der *ngif -Direktive überprüft, ob die Länge des Vornamens der aktuellen person kleiner als fünf ist. Nur dann wird die Person ausgegeben. Die Ausgabe lautet also: Person an Position 0: Meyer, Hans Person an Position 2: Schmitz, Jan Events Manchmal ist es nötig, dass eine Klasse Methoden einer anderen ausführen muss oder diese informieren will, dass eine bestimmte Situation eingetreten ist. Für diese Fälle gibt es in Ionic Events. Quellcode A.16 zeigt die Benutzung von Events. Die Zeilen eins bis sechs zeigen den Code der versendenden Klasse, die Zeilen acht bis 13 den Code der empfangenden Klasse. Im Konstruktor der ersten Klasse wird die Methode publish aufgerufen. Damit wird ein Event versendet. Der erste Parameter dieser Methode ist das topic, damit wird das Event identifiziert. In der anderen Klasse muss sich die Methode auf dasselbe topic registrieren, die Strings müssen also gleich sein. Weiterhin nimmt publish eine beliebige Anzahl an weiteren Parametern entgegen, so können Daten verschickt werden, die dann von der empfangenden Klasse verwendet werden können. Im Konstruktor der zweiten Klasse wird die Methode subscribe aufgerufen. Der erste Parameter ist das topic, das gleiche wie aus der ersten Klasse. Weiterhin gibt man an, unter welchem Namen die verschickten Daten in der Funktion angesprochen werden können, in diesem Fall nachricht und zeit. Die Reihenfolge der Parameter ist gleich der Reihenfolge beim Aufruf der Methode publish. Schließ- 12

17 lich wird in Zeile zehn nur noch der Inhalt ausgegeben. Es ist offensichtlich, dass der Code der zweiten Klasse zuerst ausgeführt werden muss, da man sich zuerst auf ein Event registrieren muss, um es danach zu erhalten Neuigkeiten Der AAK möchte die Benutzer der App regelmäßig mit Neuigkeiten versorgen. Eine solche Neuigkeit wäre zum Beispiel, dass ein neuer Karnevalspräsident gewählt wurde. Dabei wird zwischen sehr wichtigen und nicht so wichtigen Neuigkeiten unterschieden. Beide Arten bewirken, dass sich der Zähler am App-Icon (Badge) erhöht, bei sehr wichtigen Neuigkeiten wird weiterhin eine Mitteilung im Benachrichtigungscenter des Handys angezeigt Allgemein Abb. 3.3 zeigt die Liste der Neuigkeiten. Eine Neuigkeit besteht hierbei aus einem Veröffentlichungszeitpunkt und einem Titel. Den Inhalt der Neuigkeit sieht man nur, wenn man auf diese klickt, da sich dann die Detailseite öffnet. Auf dem Bild sieht man, dass neben den oberen beiden News ein Symbol eines Briefumschlages zu sehen ist. Dies symbolisiert, dass die Neuigkeit noch nicht gelesen wurde. Wurde sie einmal angeklickt, verschwindet das Symbol. Weiterhin kann man erkennen, dass die Titel der ersten drei Neuigkeiten fett gedruckt sind, während der Titel der letzten normal ist. Dies bedeutet, dass die ersten drei sehr wichtige Neuigkeiten sind, die letzte nicht. Quellcode A.17 zeigt den HTML-Code der Neuigkeitenliste. In eine ion-list wird mit Hilfe der *ngfor-direktive für jedes item ein ion-item-sliding eingefügt. In diesem befindet sich ein button. Bei einen Klick auf diesen wird die Methode openitem aufgerufen, welche die Detailseite der Neuigkeit öffnet. Danach wird der Titel der Neuigkeit angezeigt. Je nachdem, ob top_news den Wert eins oder null hat, wird dieser entweder fett oder normal dargestellt. Danach wird noch das Mail-Icon angezeigt, allerdings nur, wenn die Neuigkeit noch nicht gelesen Abbildung 3.3: Neuigkeiten wurde, also item.read den Wert false hat. Dieses Attribut wird zu jeder Neuigkeit im Cache mit Hilfe des Storage-Plugins gespeichert Pushnotifications Wird eine sehr wichtige Neuigkeit eingetragen, so wird vom Server eine Pushnotification an alle Clients verschickt. Dazu wird auf dem Server das Plugin Edjugon-Push verwendet, welches auf die API von FCM (Firebase Cloud Messaging) von Google zugreift. Zunächst muss man sich bei FCM registrieren und für die App einen API-Key generieren, der bei der Pushnotification mitgeschickt wird. Er dient zur Identifikation, an welche App eine Pushnotification verschickt werden 13

18 soll. Quellcode A.18 zeigt sowohl den nötigen serverseitigen Code (Zeilen eins bis 23) als auch den clientseitigen (Zeilen 25 bis 50). Zuerst wird in Zeile sechs eine neue PushNotification erzeugt. Auf dieser wird dann die Methode setmessage aufgerufen. Der Methode wird ein Array an Attributen übergeben. Das wichtigste Attribut ist das Array data, es enthält alle Daten, auf die die App auch zugreifen können soll. In Zeile 18 wird noch der API-Key gesetzt. Dieser wird aus einer Konfigurationsdatei geladen, sodass er nicht im Quellcode codiert ist. Dann wird die Methode send aufgerufen und die PushNotifcation verschickt. Dieser Teil des Quellcodes sorgt dafür, dass sich die Badge, also die kleine Zahl neben dem App-Logo, erhöht. Soll zusätzlich noch eine Mitteilung im Benachrichtigungszentrum zu sehen sein und ein Ton abgespielt werden (dies ist nur der Fall, wenn die news eine top_news war), so muss derselbe Code noch einmal ausgeführt werden. Die einzigen Unterschiede sind, dass das der Methode setmessage übergebene Array noch ein Attribut notification besitzt, welches unter anderem den Titel der Mitteilung festlegt. Weiterhin hat das increase_badge-attribut den Wert false. Clientseitig muss einmalig die Methode subscribefornotifications aufgerufen werden, danach empfängt die App die Pushnotifications, selbst wenn sie komplett geschlossen ist. Zunächst prüft die Methode, ob sie auf einem Handy läuft. Wenn sie nicht auf einem Handy läuft, passiert nichts. Falls ja, registriert sie sich auf das Event open_title. Wird das Event empfangen, so wird zunächst die Methode refresh aufgerufen. Sie gibt alle Neuigkeiten zurück, über die dann iteriert wird. Wird die Neuigkeit mit der passenden id gefunden, so wird die Detailseite mit Hilfe der Methode openitem geöffnet. Im Abschnitt von Zeile 38 bis 48 wird die eigentliche Pushnotification empfangen: Falls data.increase_badge gleich dem String true ist, so wird die Badge um eins erhöht. Zwar wurde dieses Attribut auf dem Server als boolsche Variable verschickt, es kommt aber auf Grund des FCM-Frameworks als String an. Das Attribut data.wastapped wird vom Betriebssystem des Handys auf true gesetzt, wenn die Mitteilung aktiv angetippt wurde, sonst auf false. Im ersten Fall wird das Event open_title versendet, auf das sich weiter oben registriert wurde. Im zweiten Fall wird die Methode presenttoast aufgerufen, welche einen Hinweis anzeigt, dass es eine sehr wichtige Neuigkeit gibt Rosenmontagszug Die Kernfunktion der App ist, dass Zuschauer des Aachener Rosenmontagszuges in Echtzeit Informationen zu den teilnehmenden Gruppen erhalten können. Dies können sowohl Informationen in Textform (zum Beispiel die Geschichte der Gruppe) oder Abbildung 3.4: Karnevalswagen Bilder sein. Dazu wird jede teilnehmende Gruppe mit zwei so genannten Beacons ausgestattet werden. Die App reagiert auf die Bluetooth-Signale der Beacons und zeigt dann die entsprechenden Informationen an. 14

19 Allgemein Abb. 3.4 zeigt den Aufbau der Liste aller Karnevalswagen. Ein Karnevalswagen besteht hierbei nur aus einem Bild der Gruppe und deren Namen. Zusätzlich ist ganz rechts das Symbol eines Auges zu sehen, wenn das Beacon der Gruppe in Reichweite ist. Im nebenstehenden Screenshots sind also die Beacons der Gruppen Stadtgarde Oecher Penn und KG Eulenspiegel in Reichweite. In Quellcode A.19 ist der HTML-Quelltext der Karnevalswagenliste zu sehen. Auch in diesem Fall werden ion-item-sliding benutzt, die mit Hilfe einer *ngfor-direktive in eine ion-list eingefügt werden. Die in Zeile zwei aufgerufene Methode items.query gibt ein Array vom Karnevalswagen zurück, über das dann mit der Laufvariable item iteriert wird. Dann wird wieder ein ion-item-sliding erzeugt, welches einen button enthält. Er enthält ein img, also ein Bild. Die URL des Bildes besteht aus der storage_url, welche über das Config-Plugin geladen wird (siehe Abschnitt ) und dem Speicherort des Bildes auf dem Server. Dann wird noch der Titel des Wagens angezeigt. Schließlich wird, wie zuvor erwähnt, noch das Symbol eines Auges eingefügt, falls item.in_range gleich 1 ist (erkennbar an der *ngif -Direktive). Diese Variable wird anhand der empfangenen Bluetooth-Signale des jeweiligen Beacons gesetzt, darauf wird in Abschnitt genauer eingegangen Beacons Wie in Abb. 3.4 zu sehen ist, ist neben den sich in Reichweite befindenden Karnevalswagen ein Symbol zu sehen. Diese Anzeige muss immer dann aktualisiert werden, wenn ein neues Beacon in Reichweite kommt oder aus der Reichweite verschwindet. Dazu wird der in Quellcode A.20 stehende Code verwendet. Dabei sind die Zeilen eins bis 29 im Karnevalsservice zu finden, während die Zeilen 31 bis 40 Teil der Karnevalswagenliste ist. Das BLE-Plugin von Ionic kümmert sich um die ganze Kommunikation und versendet das Event didrangebeaconsinregion, auf das sich in der Methode listentobeaconevents registriert wird. Wird ein solches Event empfangen, so wird zunächst der Wert autoopen aus der Storage geladen. Er gibt an, ob die Detailseite der Karnevalsgruppe geöffnet werden soll, wenn das zu ihnen gehörige Beacon in Reichweite kommt. Im Array this._items befinden sich alle Karnevalswagen, über dieses iteriert wird. Zunächst wird der title und der current_status_reachable gespeichert, danach wird überprüft, ob das Event das aktuelle item verändert. Falls ja, wird zunächst abgefragt, ob das Beacon neu erschienen (also found true) oder verschwunden (also found false) ist. Falls es neu erschienen ist, wird zunächst das Attribut in_range auf 1 gesetzt. Falls der Wagen vorher noch nicht in Reichweite war (also current_status_reachable false ist), wird zunächst das Event regions_changed verschickt. Soll die Detailseite geöffnet werden (shallopendetailpage wurde in Zeile vier aus dem Storage geladen), so wird zusätzlich noch das Event open_changed mit dem aktuellen item verschickt. Symbolisiert das Event jedoch, dass ein Beacon aus der Reichweite verschwunden ist, so wird nur in_range auf 0 gesetzt und das Event regions_changed verschickt. Bis jetzt wurde nur betrachtet, wie die Events verschickt werden. Die Seite der Karnevalswagen registriert sich in der Methode reacttobeaconevents auf die Events regions_changed und 15

20 open_changed. Wird das Event regions_changed empfangen, so wird this.zone.run aufgerufen. Dies bewirkt, dass die gesamte Liste mit den aktuellen Daten neu gezeichnet wird. Dies hat den Effekt, dass die Icons, die anzeigen, ob sich ein Wagen in Reichweite befindet, auch aktualisiert werden. Normalerweise sollte dies durch das Databinding automatisch passieren, manchmal passiert dies aber nicht, weshalb alles neu gezeichnet werden muss. Wird das Event open_changed empfangen, so wird die Methode openitem mit dem zu öffnenden Wagen-Objekt aufgerufen. Diese Methode sorgt dafür, dass die Detailseite dieses Wagens geöffnet wird Veranstaltungen Bisher wurden alle Veranstaltungsankündigungen in der Karnevalszeit (zum Beispiel Karnevalssitzungen) auf einem Flyer gedruckt. Da es im Raum Aachen ungefähr 60 Karnevalsvereine gibt, war diese Liste sehr unübersichtlich und voll, da alle Veranstaltungen (ungefähr 250 pro Session) auf einem Flyer Platz finden mussten, weshalb eine sehr kleine Schriftgröße gewählt werden musste. Weiterhin war es nicht mehr möglich, im Nachhinein noch Änderungen, wie zum Beispiel einen anderen Veranstaltungsort, anzugeben. Deshalb sollte es in der App eine Möglichkeit geben, Veranstaltungen anzulegen und auch in einer Liste der breiten Masse zugänglich zu machen Allgemein Abb. 3.5 zeigt den Aufbau der Veranstaltungsliste. Ein Event besteht hierbei aus einem Veranstaltungsnamen, einem Ort und einem Startzeitpunkt. Weiter sieht man direkt in der Liste den Organisator einer Veranstaltung. Am linken Rand einer Veranstaltung ist das Logo des veranstaltenden Vereins abgebildet. Am unteren Bildschirmrand sieht man zwei Tabs: Liste und Suche. Die Funktionen dieser beiden Tabs sind selbsterklärend, im Tab Liste sieht man die Übersicht über alle Veranstaltungen, tippt man auf den Tab Suche, so gelangt man in eine Suchmaske, in der man alle Events nach einer bestimmten Zeichenkette durchsuchen kann. Dabei werden sowohl der Name als auch das Programm und die Beschreibung aller Veranstaltungen durchsucht. Weiterhin war es mit dem bisher vorhandenen Flyer sehr aufwendig, eine Veranstaltung zu finden. Deshalb sind in der Veranstaltungsliste alle Veranstaltungen nach Monaten gruppiert. Jeden Monat kann man durch Tippen auf das Symbol neben dem Monatsnamen auf- und zuklappen. So kann man schnell Veranstaltungen finden, die weiter in der Zukunft liegen. Quellcode A.21 zeigt den wichtigen Teil des HTML-Codes der Veranstaltungsliste: Zunächst sind alle Veranstaltungen in eine ion-list eingebettet. Mit Hilfe der *ng- For-Direktive wird für jeden month aus dem Array, welches die Methode items.query zurückgibt, ein ion-item erzeugt. Abbildung 3.5: Veranstaltungsliste items.query gibt ein zweidimensionales Array zurück: Auf der ersten Ebene befinden sich die 16

21 Monate. Jeder Monat hat weiterhin ein Array events, in dem die Events dieses Monates gespeichert sind. Bei einem Klick auf dieses wird die Methode toggledetails aufgerufen, welche dafür sorgt, dass der angeklickte Monat entweder auf- oder zugeklappt wird. Auf die Bedeutung des div-tags in Zeile drei wird in Abschnitt noch genauer eingegangen. Abb. 3.6 zeigt die Icons, welche zum Auf- und Zuklappen angezeigt werden. Die oberen heißen add-circle, die unteren remove-circle. Je nach Betriebssystem des Handys wird das Icon ausgewählt, welches dazu passt, sodass das Design der App nativ wirkt. In Zeile vier wird ein Icon angezeigt, welches symbolisiert, dass die Liste auf- beziehungsweise zugeklappt werden kann. Die eben erwähnte Methode toggledetails sorgt dafür, dass Abbildung 3.6: Icons month.icon auf add-circle gesetzt wird, wenn der Monat zugeklappt wird und auf remove-circle, wenn er aufgeklappt wird. Anhand dieses Namens wird später auch entschieden, ob die Veranstaltungen eines Monats angezeigt werden oder nicht. Zunächst wird aber month.month (Zum Beispiel ) in den Monatsnamen (in diesem Beispiel Januar) umgewandelt, außerdem steht hinter dem Monatsnamen noch die Anzahl an Veranstaltungen in diesem Monat. Bis jetzt wurde die Überschrift eines Monats dargestellt, sollen auch die Veranstaltungen eines Monats auftauchen (month.icon ist also gleich remove-circle), so wird der Code in den Zeilen sieben bis 21 ausgeführt, andernfall nichts. Zunächst wird mit einer weiteren *ngfor-direktive über jedes item aus month.events iteriert. Dann wird ein ion-item-sliding erzeugt, in dem dann ein Button erstellt wird. Beim Klick auf diesen wird die Methode openitem aufgerufen, die dafür sorgt, dass die Detailseite der entsprechenden Veranstaltung geöffnet wird. Dann folgt ein ion-avatar, also ein rundes Bild des Veranstalters, welches vom Server geladen wird. Hier findet das in Abschnitt vorgestellte Config-Plugin Verwendung. Danach werden nur noch der Name, der Ort, der Organisator und die Startzeit dargestellt. Zuletzt werden nur noch die HTML-Tags, welche zuvor geöffnet wurden, wieder geschlossen Indexed List Abb. 3.7 zeigt die sogenannte Indexed List. Sie erscheint immer Abbildung 3.7: Indexed List dann, wenn der Benutzer angefangen hat zu scrollen und verschwindet einige Zeit, nachdem er nicht mehr scrollt. Der Sinn dieser Indexed List ist, dass der Benutzer schnell zu einem Monat springen kann. Normalerweise hat eine Indexed List alle Buchstaben des Alphabets als Indizes, was für diesen Anwendungsfall nicht geeignet ist, da man als Indizes die Monate benötigt, in denen Veranstaltungen stattfinden. Deshalb musste eine eigene Lösung implementiert werden. Quellcode A.22 zeigt die Kernaspekte dieser: In den Zeilen eins bis sechs sieht man den HTML-Code, der für das Anzeigen der eigentlichen Liste 17

22 zuständig ist. Im Grunde ist die Indexed List eine Sammlung von ion-labels, die durch die CSS- Klasse indexed_list über den anderen Inhalt gelegt wird. Weiterhin setzt diese Klasse die Breite und fixiert die Liste an den rechten Bildschirmrand. Klickt man auf ein Element der Indexed List, so wird die Methode scrolltomonth mit dem angeklickten Monat als Übergabeparameter ausgeführt. Diese ist in den Zeilen acht bis 13 dargestellt. Hier wird nun deutlich, warum im Quellcode A.21 vor jedem Monat der Code <div id={{month.month}}></div> ausgeführt wurde: In Zeile zehn ruft man die Methode document.getelementbyid mit dem angeklickten Monat als Parameter auf. Diese sucht im gesamten HTML-Code nach einem Element mit dieser Id und gibt dieses zurück. Schließlich wird in der Variable y gespeichert, zu welcher Position man springen muss, um zu diesem Monat zu gelangen. Dies wird in Zeile elf auch gemacht, ehe in Zeile zwölf die Variable shouldshow auf false gesetzt wird, um die Indexed List wieder zu verbergen Werbung Eine weitere Anforderung an die App ist es, dass lokale Unternehmen Werbekontingente buchen und damit Werbung in der App anzeigen können. Zunächst ist geplant, dass Bannerwerbung geschaltet werden kann, also zum Beispiel in den Listen einzelne Elemente Werbung enthalten. Später soll es noch andere Werbeformen geben: Zum einen soll es möglich sein, auch auf dem Startbildschirm der App ( Splashscreen ) Werbung anzuzeigen, zum anderen sollen sogenannte Geofences an Positionen werbender Unternehmen gesetzt werden. Dadurch öffnet sich beim Benutzer ein PopUp, welches Werbung anzeigt, sobald er in die Nähe eines solchen Geofences kommt Recherche bestehender Werbeframeworks Zunächst gab es die Idee, dass ein bestehendes Werbeframework verwendet wird, um den Aufwand so klein wie möglich zu halten. Eine zentrale Anforderung an ein mögliches Framework ist, dass man selbst festlegen kann, welche Werbung angezeigt wird. Weiterhin muss es leicht in den bestehenden Quellcode eingebunden werden können. Eine nützliche, aber nicht unbedingt notwendige Funktion ist, dass eine automatische Auswertung stattfindet. Nach intensiver Recherche stand fest, dass es für den Einsatz in Apps nur ein Werbeframework gab, dass den optischen und funktionellen Ansprüchen genügte: Das Framework AdMob von Google. Alle anderen gefundenen Frameworks waren entweder nicht leicht in den bestenden Quellcode zu integrieren oder die erzeugten Anzeigen gliederten sich nicht gut in die Listen der App ein. Nachdem die Funktionalitäten von AdMob genauer untersucht wurden, stellte sich heraus, dass auch dieses Framework ungeeignet ist: Das Prinzip von AdMob ist, dass man Platz in seiner App zu Verfügung stellt und Google bestimmt, welche Werbung angezeigt wird. Es wäre also ziemlich wahrscheinlich, dass Werbung anderer Unternehmen angezeigt wird. Deshalb wurde die Entscheidung getroffen, dass die benötigen Funktionalitäten selbst implementiert werden müssen Eigene Umsetzung Quellcode A.23 zeigt die Methode insertadsinarticles des Servers. Sie ist dafür zuständig, in ein Array von News an bestimmten Positionen Werbung einzufügen. Dafür wird zunächst in den Zeilen eins und zwei ein Array $adbanners erzeugt, welches alle Werbebanner enthält. Falls 18

23 noch keine Werbebanner existieren ($adbanners also die Länge 0 hat), werden die $articles unverändert zurückgegeben (Zeile 5). Andernfalls iteriert man mit einer foreach-schleife über alle Indizes, an denen Werbung stehen soll. Die Methode getadindizes berechnet mit Hilfe der Normalverteilung (mit µ = 5 und σ = 0, 5) zufällige Indizes, an denen Werbung stehen soll. Eine Normalverteilung mit diesen Parametern hat die Eigenschaft, dass 95,45% aller erzeugten Zufallszahlen zwischen 4 und 6 ( ˆ=±2σ) liegen. Dies erschien sinnvoll, da so der Lesefluss durch die Werbung nicht gestört wird, die Werbung aber auch nicht untergeht. Erst werden die $adbanners zufällig sortiert, bevor sie in ein temporäres Array eingefügt werden. Der type ist wichtig, damit die App erkennen kann, dass es sich bei dem Objekt an dieser Stelle um ein Werbebanner handelt. Dann wird dieses temporäre Objekt mit Hilfe von array_splice an der gewünschten Position eingefügt. Schließlich wird am Ende der Methode ein Array zurückgegeben, was neben den News auch die Werbebanner enthält. Quellcode A.24 zeigt die Methode delay() des Clients. Sie sorgt dafür, dass die Werbebanner nach einer bestimmten Zeit (welche vorher festgelegt wurde) automatisch durch andere ersetzt werden. Code executed by settimeout() is called from an execution context separate from the function from which settimeout() was called. Mozilla Javascript Docs [Moz17] Auf Grund dieser Tatsache muss man in Zeile zwei zunächst den this-zeiger in der Variable self speichern. Die Methode settimeout() gibt ein Timer-Objekt zurück, welches im Array timers gespeichert wird, um alle noch laufenden Timer beim Verlassen der Seite sauber zu beenden. Sie sorgt weiterhin dafür, dass der Code in den Zeilen vier bis elf erst nach delayms Millisekunden ausgeführt wird. Nach Ablauf dieser Zeit wird zunächst der Bildpfad für die entsprechende Werbung im Array adimages gesetzt. Die HTML-Seite greift auf dieses Array zu, die Bilder werden dann automatisch aktualisiert. Danach wird in den Zeilen sechs beziehungsweise neun die Methode delay() rekursiv aufgerufen, um einen neuen Timer für das nächste Banner zu starten. Es existiert eine Fallunterscheidung, damit man, wenn das letzte Banner angezeigt wird, wieder beim Ersten beginnt. Die Methode delay() wird initial für jedes Banner einmal von Konstruktor aufgerufen. Abb. 3.8 zeigt die Liste der News inklusive eines Werbebanners. Man sieht, dass sich das Werbebanner sowohl von der Größe als auch vom generellen Design gut in die Liste eingliedert und nicht fremd wirkt. Abbildung 3.8: News-Liste Werbung mit 19