bachelor-thesis-flutter-elinux/chapters/05_analyse_und_design/01_architektur.md

\pagebreak

## Architektur

### Analyse

### Design

<!-- Flutter Entwicklung folgt einer unidirektionalen
 Datenflussarchitektur, die auf dem Modell-View-Controller
  (MVC)-Muster basiert. -->

Flutter gibt Entwicklern eine große Freiheit bei der
Auswahl der Architektur für ihre Anwendungen. Es gibt
keine festen Regeln oder Vorschriften zur Ordnerstruktur
oder anderen Konventionen bezüglich der Architektur.

Als Architektur für die Anwendung
wurde eine drei-schichtige Architektur gewählt.
Eine Schichtenarchitektur ist nicht nur Teil der
Architektur von Flutter selbst, sondern ist auch
eine bewährte Architektur für die Entwicklung von
Flutter Anwendungen. Die drei Haupt-Schichten
der Architektur der Anwendung sind die Präsentationsschicht,
die Geschäftsschicht und die Datenzugriffsschicht.
In der Präsentationsschicht werden die Benutzeroberfläche
und die Benutzerinteraktionen implementiert. Die Geschäftsschicht
ist für die Implementierung der Geschäftslogik verantwortlich.
Die Datenzugriffsschicht ist für den Zugriff auf die Datenbank
und die Datenverarbeitung verantwortlich. Die drei Schichten

Die drei Schichten sind die **Präsentationsschicht**,
die **Geschäftslogikschicht** und die **Datenzugriffsschicht**.
Die Präsentationsschicht ist für die Darstellung der
Benutzeroberfläche verantwortlich. Die Anwendungsschicht ist für die Geschäftslogik verantwortlich. Die Datenzugriffsschicht ist für den Zugriff auf die Datenbank verantwortlich. Die drei Schichten sind voneinander unabhängig und kommunizieren über definierte Schnittstellen. Die drei Schichten sind in der Abbildung 3.1 dargestellt.

- three-layer architecture [@hajianFlutterEngineering2024, 219]

\begin{figure}[ht]
\centering
\caption{3-Schichtenarchitektur der Flutter Anwendung}
\end{figure}

```{=latex}
\begin{center}
```

```{.mermaid loc=assets/mermaid caption="3-Schichtenarchitektur der Flutter Anwendung" #fig:reference-name}
flowchart TD
    A[Präsentationsschicht] <--> B
    B[Geschäftslogikschicht] <--> C
    C[Datenzugriffsschicht]
```

```{=latex}
\end{center}
```

\begin{figure}[ht]
\centering

<!-- prettier-ignore -->
\caption*{Quelle: eigene Darstellung}
\end{figure}

## Ordner Konventionen

### Layers-First Ordnerstruktur

- schneller und einfacher Start
- einfach zu verstehen
- sehr unübersichtlich, sobald die Anwendung wächst
- zusammengehörende Dateien für ein Feature über das Projekt verteilt

### Feature-First Ordnerstruktur

- Dateien, die zu einem Feature gehören, sind an einem
  Ort zu finden
- Layers in Feature
- Einfache Kommunikation
- Verständnis, was ein Feature ist, muss im Team trainiert werden

\begin{figure}[ht]
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 lib/.
.2 common.
.2 constants.
.2 features.
.3 benchmark.
.3 home.
.3 settings.
.3 system\char`\_resources.
.2 app.dart.
.2 main.dart.
}
\end{minipage}
\caption{Example caption}

<!-- prettier-ignore -->
\caption*{Quelle: hier Quellangabe}
\end{figure}

eine Klasse pro File, Ausnahmen eng zusammengehörige Klassen
wie zB. Stateful Widgets

state Architektur

android architecture

### freezed package

generiert den notwendigen Code einer
unveränderlichen Klasse:

- Konstruktor
- toString, equlas, hashCode Methode
- copyWith Methode
- JSON Serialisierung

### State Management

Für das State Management wurde Riverpod gewählt.