Article
Der Artikel ist eine wiederkehrende Komponente, die sich durch alle Kapitel zieht. Die jeweils dargestellten Artikel erklären dem User worum es in dem Kapitel geht.
Um den einheitlichen Aufbau der einzelnen Artikel zu gewährleisten, wurde das zugrundeliegende Datenmodell in einem Interface festgehalten. Das Schema befindet sich in dem Ordner "models".
Eine Artikel-Komponente besteht aus den folgenden Eigenschaften:
-
id- jedem darzustellendem Artikel wird eine ID vergeben. -
topic- das Thema des Artikels. Dieses ist insbesondere für die Darstellung des richtigen Artikels wichtig. -
category- diese Eigenschaft kann später dazu genutzt werden, um zwischen dem langen Kapiteltext und dem kürzeren Kapiteltext zu unterscheiden. -
headline- die Überschrift des Artikels. -
content- Inhalt des Artikels.
Aktuell werden die einzelnen Artikel in einem Mock-Service festgehalten. Dieser Service beinhaltet zum einen die darzustellenden Daten und zum anderen die Methoden, um die gewünschten Artikel zu filtern. Der Service ist dafür verantwortlich, die von der View angeforderten Daten bereitzustellen.
Der Service ist ebenfalls in einem Interface festgehalten. Klassen, die dieses Interface implementieren, müssen derzeit die beiden Methoden getArticles() sowie getArticle(requestedTopic) umsetzen.
Die darzustellenden Daten werden in einem Array wie folgt gespeichert:
Um einen neuen Artikel einzufügen, kann das Array mit einem neuen Objekt erweitert werden. Die einheitliche Benennung der topic property ist besonders wichtig, da diese in den jeweiligen Kapiteln referenziert wird, um den gewünschten Artikel bereitzustellen.
Das Styling des Artikels erfolgt in dem String, welches der content property zugewiesen wird. Die HTML-Absätze werden hier gesetzt und der String wird im HTML der Komponente durch das Binding als HTML interpretiert.
Um die Komponente einzubinden, genügt es in der ts-Datei das entsprechende Thema des Artikels anzugeben:
requestedTopic: String = 'ernaehrung';.
Anschließend kann die Komponente in dem HTML-Dokument folgendermaßen eingebunden werden:
<app-article [requestedTopic]="requestedTopic"></app-article>.
Die einzelnen Artikel sind zu Test-Zwecken in einem Mock-Service festgehalten. Vor dem Launch der Anwendung sollten diese Daten in einer Datenbank festgehalten werden. Der hierfür notwendige Service wurde bereits aufgesetzt, muss allerdings mit der entsprechenden Funktionalität vervollständigt werden. Der Mock-Service eignet sich gut zum Testen. Damit die Anwendung im production-state nicht den Mock-Service sondern den richtigen Service verwendet, können die entsprechenden provider in der Datei environment.prod.ts einkommentiert werden.
Die Artikel-Komponente ist grundsätzlich responsive und passt sich der jeweiligen Bildschirmgröße an. Da aktuell kein spezielles Design für mobile Endgeräte vorliegt, konnte der "Mobile First Approach" nicht umgesetzt werden. Da Mobile First jedoch einen besonders großen Einfluss auf SEO (Search Engine Optimization) und Ranking hat, empfiehlt es sich dies bei der Weiterentwicklung zu berücksichtigen.