1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
\section{Weboberfläche}
Die Weboberfläche wird mit dem Frontend-Web-Framework Vue.js erstellt. Mit Vue
werden wiederverwendbare, auf Datenänderungen reagierende Komponenten erstellt.
Die Komponenten nutzen ein fertiges Aussehen von dem Frontend-CSS-Framework
Bootstrap. Außerdem werden Icons der freien Schriftart fontawesome
verwendet.
Das Projekt wird durch den \Gls{bundler} vite aufgesetzt, gebaut und stellt einen
Entwicklungswebserver mit Echtzeitvorschau bereit. Durch den vue-router wird bei
der \Gls{spa} ein Seitenwechsel durch Manipulation der
Browser-Chronik (History Manipulation) simuliert. Dadurch hat der Nutzer eine
bessere Erfahrung, weil die Seite nicht neu geladen werden muss, wenn zu einem
anderen Menüpunkt gewechselt wird.
Wenn der Nutzer sich anmeldet wird die E-Mail-Adresse, der \Gls{session-token} und
Spracheinstellungen in dem globallen Zustandsspeicher gespeichert, welcher durch
die Pinia-Abhängigkeit bereitgestellt wird. Dadurch haben alle
\Glspl{uiComponent} einfachen Zugriff auf die Daten und diese müssen nicht über
Props in tiefliegende \Glspl{uiComponent} durchgereicht werden.
Die Seiten werden als einzelne Kompontenten erstellt. Andere HTML-Strukturen
werden als eigene Komponenten ausgelagert, wenn sie in mehreren Seiten verwendet
werden und zur Reduzierung von Komplexität und Duplikation beitragen und selbst
Logik beinhalten.
Vom Frontend benötigte Abhängigkeiten:
\begin{itemize}
\item vite
\item vue
\item vue-router
\item Pinia (globaler Zustandsspeicher)
\item bootstrap
\item fontawesome
\item vue-i18n (Support für mehrere Sprachen)
\end{itemize}
\subsection{Komponentendiagramm Web-Frontend}
\includegraphics[width=\textwidth]{assets/diagrams/componentdiagram}
\subsection{Komponentenbeschreibung}
\begin{minipage}{.7\linewidth}
\subsubsection*{SubscriptionComponent}
\begin{description}
\item[Tag] \texttt{<Subscription subscription>}
\item[Props] \mbox{} \\
\emph{subscription} \mbox{} Subscription-Objekt, welches Attribute zu einem \Gls{podcast} und
dessen \Glspl{episode} enthält.
\item[Beschreibung] Nimmt ein Subscription-Objekt, zeigt Titel und LastUpdate und
\Glspl{episode} der Subscription an.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/subscription.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{EpisodeComponent}
\begin{description}
\item[Tag] \texttt{<Episode episode>}
\item[Props] \mbox{} \\
\emph{episode} \mbox{} EpisodeAction-Objekt, welches Titel, \Gls{podcast},
Timestamp, Dauer und Hörfortschritt der \Gls{episode} enthält.
\item[Beschreibung] Nimmt ein EpisodeAction-Object, zeigt Titel, \Gls{podcast}, Dauer,
Hörfortschritt und LastUpdate an.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/episode.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{LastUpdateComponent}
\begin{description}
\item[Tag] \texttt{<LastUpdate timestamp>}
\item[Props] \mbox{} \\
\emph{timestamp} \mbox{} Date-Objekt, welches die Zeit der letzten Änderung enthält
\item[Beschreibung] Nimmt ein Timestamp und gibt die Zeit seit dem Timestamp in
einem menschenlesbaren Format aus.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/lastupdate.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{HelpComponent}
\begin{description}
\item[Tag] \texttt{<Help>}
\item[Beschreibung] Zeigt Hilfestellungen in einem Fenster an. Dieses kann über
die Navigationsleiste aufgerufen werden.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/help.png}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{NavbarComponent}
\begin{description}
\item[Tag] \texttt{<Navbar>}
\item[Beschreibung] Enthält route-links zu im vue-router definierten Pfaden.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\fbox{\includegraphics[width=\textwidth]{assets/navbar.png}}
\end{figure}
\end{minipage}
\vspace{.5cm}
\begin{minipage}{.7\linewidth}
\subsubsection*{PasswordValidatorComponent}
\begin{description}
\item[Tag] \texttt{<Password>}
\item[Beschreibung] Überprüft ob der eingegebene Text die Bedingungen für ein
sicheres Passwort erfüllt.
\end{description}
\end{minipage}
\begin{minipage}{.3\linewidth}
\begin{figure}[H]
\includegraphics[width=\textwidth]{assets/password-margin.png}
\end{figure}
\end{minipage}
|
