4.8 KiB
News Feature
Das News Feature zeigt eine Liste von Nachrichten der Tagesschau (siehe Abbildung \ref{newsList}). Die Nachrichten können in einer Liste oder in einem Raster angezeigt werden (siehe Abbildung \ref{newsGrid}), mithilfe eines Stateful Widgets kann zwischen den beiden Ansichten gewechselt werden.
Die Nachrichten werden von der Tagesschau-API abgerufen, welche als OpenAPI unter der Adresse https://tagesschau.api.bund.dev/ verfügbar ist. Die Nutzung der API ist für den privaten nicht-kommerziellen Gebrauch gestattet, die Veröffentlichung hingegen nicht - mit Ausnahme von Angeboten, welche explizit unter der CC-Lizenz stehen. Außerdem soll man mit nicht mehr als 60 Abrufen pro Stunde tätigen, was für die Testzwecke in dieser Arbeit ausreichend ist [@TagesschauAPIOpenAPIa].
\pagebreak
\Begin{multicols}{2}
\begin{figure}[H] \caption{News Liste} \label{newsList} \centering {\shadowimage[width=7cm]{./assets/screenshots/newsList.png}} \end{figure}
\begin{figure}[H] \caption{News Raster} \label{newsGrid} \centering {\shadowimage[width=7cm]{./assets/screenshots/newsGrid.png}} \end{figure}
\End{multicols}
In der Implementierung des News-Features wurden in der Datenzugriffsschicht passende Modelle für die zum Test benötigten Daten erstellt, welche von der API abgerufen werden. Die Modelle wurden mit Hilfe des Freezed-Pakets generiert und werden in dem UML Klassen-Diagramm in Abbildung \ref{umlNews} dargestellt. Zum besseren Verständnis werden in dem Diagramm die Typen der Attribute in den Typen aus der Dart Programmiersprache angegeben. Viele der Attribute sind explizit als optional deklariert, da die API nicht immer alle Attribute liefert, zudem wurden nur die wenigsten Attribute modelliert, die für die Anzeige der Nachrichten benötigt werden. Alle anderen Attribute werden aus der JSON Antwort der API nicht verwendet und ignoriert.
In der Geschäftsschicht wurde ein Controller mit dem Namen NewsController erstellt. Dieser nutzt den Riverpod Generator als Klasse. In der notwendigen build Methode wird als Future ein RegionNews Objekt zurückgegeben, welches die neuesten Nachrichten der Tagesschau enthält. Des weiteren wurde im Controller eine appendPage Methode implementiert, welche die nächste Seite der Nachrichten abruft und an die bereits vorhandenen Nachrichten anhängt. Der von Riverpod generierte Provider newsControllerProvider wird in der Präsentationsschicht verwendet, um die Nachrichten anzuzeigen und sobald man am Ende der Liste oder des Rasters angekommen ist, wird die nächste Seite der Nachrichten mit der appendPage Methode abgerufen und an die bereits vorhandenen Nachrichten angehängt. Der Nutzer kann so unendlich tief in die Nachrichtenliste scrollen. \
\begin{figure}[H]
\centering
\caption{UML Klassen-Diagram für das News Feature}
\label{umlNews}
classDiagram
RegionNews *-- "0..n" News
News *-- "0..1" TeaserImage
class RegionNews{
+news: List~News~
+nextPage: String?
+fromJSON(Map~String, dynamic~ json) RegionNews
+toJSON() Map~String, dynamic~
}
class News{
+title: String?
+teaserImage: TeaserImage?
+brandingImage: TeaserImage?
+date: String?
+type: String?
+fromJSON(Map~String, dynamic~ json) News
+toJSON() Map~String, dynamic~
}
class TeaserImage{
+imageVariants: Map~String, String~?
+fromJSON(Map~String, dynamic~ json) TeaserImage
+toJSON() Map~String, dynamic~
}
\end{figure}