## 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].

\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. \

```{=latex}
\begin{figure}[H]
\centering
\caption{UML Klassen-Diagram für das News Feature}
\label{umlNews}
```

```{.mermaid loc=assets/mermaid caption="News UML Diagram"}
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~
    }
```

```{=latex}
\end{figure}
```

<!-- Daraus ergab sich die folgende Ordnerstruktur:

\begin{figure}[H]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 news\char`\_api/.
    .2 business/.
    .3 news\char`\_controller.dart.
.3 scroll\char`\_state\char`\_controller.dart.
.2 data/.
.3 models/.
.4 news.dart.
.4 region\char`\_news.dart.
    .4 teaser\char`\_image\char`\_url.dart.
    .4 teaser\char`\_image.dart.
.3 repository/.
.4 news\char`\_repository.dart.
    .2 presentation/.
    .3 widgets/.
    .4 news\char`\_grid\char`\_item.dart.
    .4 news\char`\_grid.dart.
.4 news\char`\_list\char`\_item.dart.
.4 news\char`\_list.dart.
    .3 news\char`\_screen.dart.
}
\end{minipage}
\end{figure} -->

<!-- wurde verwendet, um die Modelle zu generieren.

\lstinputlisting[language=Java, caption=Implementierung der News Klasse, linerange={0-20}, captionpos=t]
{code/flutter_elinux/lib/features/news_api/data/models/news.dart}

\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t]
{code/flutter_elinux/lib/features/news_api/data/repository/news_repository.dart}

\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t]
{code/flutter_elinux/lib/features/news_api/business/news_controller.dart} -->