\section{Produktübersicht}

In diesem Kapitel wird der Aufbau der Synchronisationsserver-Webseite in einem Use-Case-Diagramm, welches sich in Abbildung
\ref{fig:UseCase} befindet, visualisiert.

Hierbei wird in Aktivitätsdiagrammen näher auf die Aktionen \enquote{Anmelden} (Abbildung \ref{fig:ActLogin}),
\enquote{Registrieren} (Abbildung \ref{fig:ActRegister}) und \enquote{Passwort vergessen} (Abbildung \ref{fig:ActResetPass})
eingegangen.

Weiter beschreibt ein abstrahiertes Sequenzdiagramm (Abbildung
\ref{fig:SeqSynchSubs}) den Nachrichtenaustausch bei der Synchronisation der
gespeicherten Daten eines Benutzers. Dies erfolgt am Beispiel der Tätigung eines
neuen \Glspl{abo} über einen \Gls{podcatcher}.

\subsection{Der Aufbau der Webseite}

In dem Use-Case-Diagramm in Abbildung \ref{fig:UseCase} erkennt man den Aufbau der Webseite des Synchronisationsservers.
Besucht man die Seite ohne eingeloggt zu sein, so hat man die Möglichkeit die Sprache zu ändern, sich anzumelden, sich zu registrieren oder sein Passwort über die \enquote{Passwort vergessen}-Funktion \ref{f:pwreset} zurückzusetzen.
Dabei gibt es die Möglichkeit sich mit seinem Google-Konto oder dem Konto eines anderen Anbieters zu registrieren / anzumelden.

Ist man angemeldet, wird man auf ein \Gls{dashboard} weitergeleitet.
Dort hat man die Möglichkeit eine Anleitung einzusehen und die bisher
abonnierten \Glspl{podcast} einzusehen.
Dabei erhält man zu jedem \Gls{podcast} einen Überblick über dessen
\Glspl{episode} und Details darüber, bis zu welchem Zeitpunkt man die
\Gls{episode} angehört hat.
Auch gibt es die Möglichkeit einen Verlauf und den korrespondierenden
Fortschritt aller zuletzt gehörten \Glspl{episode} einzusehen.

Des Weiteren kann man das eigene Profil verwalten.
Dies beinhaltet das Ändern des eigenen Passworts, das Importieren der Daten einer Gpodder-Instanz über eine Anmeldung oder
dem Importieren als Datei.
Auch können in der Profilverwaltung personenbezogene Daten als Datei importiert und exportiert werden.
Schließlich hat man in der Profilverwaltung die Möglichkeit den eigenen Account permanent zu löschen.

Ist man ein Administrator, so hat man zusätzlich die Möglichkeit Statistiken einzusehen.

\newpage

% UML Use-Case Diagramm
\begin{figure}[H]
	\centering
	\hspace*{-2.5cm}
	\input{sections/TikzPictures/UseCaseUML}
	\caption{Use-Case-Diagramm der Webseite\\(*) - Optionale Funktionen, deren Implementierung nicht feststeht}
	\label{fig:UseCase}
\end{figure}
\newpage

\subsection{Das Einloggen}

Im Aktivitätsdiagramm \enquote{Anmeldung} in Abbildung \ref{fig:ActLogin} möchte der Nutzer sich auf der Webseite anmelden.
Hierzu ruft der Nutzer zunächst die Webseite auf und landet auf der Login Seite.

Hat der Nutzer sich bereits zuvor auf dem Computer auf der Seite angemeldet und dabei ausgewählt eingeloggt zu bleiben,
so wird der Nutzer über Session-\Glspl{cookie} automatisch auf das \Gls{dashboard} weitergeleitet.
Ist das nicht der Fall, so muss der Nutzer seine Anmeldedaten eingeben.

Nach dem Eintragen der Daten hat der Nutzer die Möglichkeit für das nächste Mal, wenn der Nutzer die Webseite
am selben Computer betritt, angemeldet zu bleiben.
Daraufhin drückt der Nutzer den \enquote{Anmelden}-Button.

Wurde die E-Mail oder das Passwort falsch eingegeben, so zeigt die Seite eine Fehlermeldung an und der Nutzer wird aufgefordert seine Eingabe zu korrigieren.
Wurden die E-Mail und das Passwort korrekt eingegeben, so landet der Nutzer
angemeldet auf dem \Gls{dashboard}, von wo aus er dann alle Aktionen ausführen kann, für die man angemeldet sein muss.

\newpage

% UML Activity Diagramm - Login
\begin{figure}[H]
	\centering
	\input{sections/TikzPictures/ActivityLogin}
	\caption{Aktivitätsdiagramm - Anmelden}
	\label{fig:ActLogin}
\end{figure}
\newpage

\subsection{Das Registrieren}

Möchte sich der Nutzer einen neuen Account erstellen, so läuft dieser Vorgang
entsprechend dem Aktivitätsdiagramm \enquote{Registrieren} in Abbildung \ref{fig:ActRegister} ab.
Der Nutzer ruft zunächst die Webseite auf und landet auf der Login Seite.
Dort wählt der Nutzer die \enquote{Registrieren}-Option aus und wird zur Registrierungsseite weitergeleitet.

Auf der Registrierungsseite gibt der Nutzer in den jeweils dafür zugeordneten Eingabefeldern seine E-Mail-Adresse und zur Kontrolle
zwei Mal das gleiche Passwort ein, welches dem Account zugeordnet werden soll.
Daraufhin drückt der Nutzer zum Abschluss den \enquote{Registrieren}-Button.
Der Server überprüft, ob die E-Mail-Adresse bereits vergeben ist und ob das Passwort die Passwortmindestanforderungen \ref{r:pw-requirements} erfüllt.

Ist die E-Mail schon vergeben, so wird dem Nutzer eine entsprechende Meldung angezeigt und der Nutzer muss die eingegebene E-Mail-Adresse korrigieren.
Erfüllt das Passwort nicht die Mindestvoraussetzungen, so wird dem Nutzer auch hier eine entsprechende Meldung angezeigt und der Nutzer muss die Eingabe korrigieren.

Erfüllen die Eingaben die Voraussetzungen, so wird an die angegebene E-Mail-Adresse eine E-Mail mit einem Link zur Verifizierung
der E-Mail-Adresse geschickt.
Der Nutzer muss diesen Link innerhalb der nächsten 24 Stunden zur Aktivierung seines Kontos öffnen, da ansonsten der Link
abläuft und der Nutzer den Prozess erneut beginnen muss.

Wurde der Link innerhalb von 24 Stunden geöffnet, so wird der Account aktiviert und der Nutzer wird über den Link zur Login Seite
weitergeleitet, von wo aus er sich mit seinem neu erstellten Account nun einloggen kann.

\newpage

% UML Activity Diagram - Register
\begin{figure}[H]
	\centering
	\input{sections/TikzPictures/ActivityRegister}
	\caption{Aktivitätsdiagramm - Registrieren}
	\label{fig:ActRegister}
\end{figure}
\newpage

\subsection{Das Vergessen des Passwortes}

Hat der Nutzer einmal sein Passwort vergessen, so gibt es die Möglichkeit das Passwort zurückzusetzen.
Wie dieser Vorgang aussieht, wird im Aktivitätsdiagramm \enquote{Passwort zurücksetzen} in Abbildung \ref{fig:ActResetPass}
dargestellt.
Zunächst ruft der Nutzer die Webseite auf und landet auf der Login Seite.
Über die Option \enquote{Passwort vergessen} wird der Nutzer auf die \enquote{Passwort vergessen}-Seite weitergeleitet.

Hier gibt der Nutzer in einem Eingabefeld die E-Mail-Adresse des Accounts an, dessen Passwort der Nutzer vergessen hat.
Nach der Bestätigung der Eingabe überprüft der Server, ob unter der angegebenen E-Mail-Adresse ein Account angelegt ist.
Ist dies nicht der Fall, so wird der Nutzer erneut darum gebeten die E-Mail-Adresse anzugeben.
Existiert ein Account unter der angegeben E-Mail-Adresse, so wird eine E-Mail an die angegebene Adresse geschickt, die einen
automatisch generierten Link enthält, der es dem Nutzer erlaubt das Passwort für den jeweiligen Account zurückzusetzen.

Der Nutzer muss den Link innerhalb der nächsten 24 Stunden öffnen, da dieser ansonsten abläuft und zu einer entsprechenden
Fehlermeldung führt.
Öffnet der Nutzer den Link innerhalb von 24 Stunden, so wird der Nutzer auf eine Seite weitergeleitet auf der der Nutzer
zwei Mal das neue Passwort eingeben muss.
Das Passwort muss dabei die Passwortmindestanforderungen \ref{r:pw-requirements} erfüllen.

Ist das neue Passwort eingegeben, so muss der Nutzer den \enquote{Passwort zurücksetzen}-Button drücken und das eingegebene Passwort wird überprüft.
Erfüllt das Passwort die Mindestanforderungen nicht, so wird dem Nutzer eine entsprechende Fehlermeldung angezeigt und der Nutzer muss sich ein neues Passwort ausdenken und zwei Mal eingeben.
Erfüllt das Passwort die Mindestanforderungen, so wird das neue Passwort für den Account gespeichert und der Nutzer wird auf die Login Seite weitergeleitet, von wo aus er sich mit dem neuen Passwort anmelden kann.

\newpage 

% UML Activity Diagram - Reset Password
\begin{figure}[H]
	\centering
	\input{sections/TikzPictures/ActivityResetPass}
	\caption{Aktivitätsdiagramm - Passwort vergessen}
	\label{fig:ActResetPass}
\end{figure}
\newpage

\subsection{Das Synchronisieren am Beispiel eines Abonnements}

Der Benutzer in Abbildung \ref{fig:SeqSynchSubs} hört \Glspl{podcast} über die
verschiedenen \Gls{podcatcher}-Applika\-tionen \enquote{Podcatcher1} und \enquote{Podcatcher2}.
Dabei spielt es im Folgenden keine Rolle ob er beide Applikationen auf demselben Gerät, beide auf jeweils unterschiedlichen Geräten oder die gleiche Applikation auf unterschiedlichen Geräten verwendet.

Der Benutzer tätigt ein neues \Gls{abo} über die \Gls{podcatcher}-Applikation \enquote{Podcatcher1}.
Dies bewirkt zunächst eine lokale Änderung der Liste der \Glspl{abo}.
Im Zuge dessen wird auch der Server über die vorgenommene Änderung benachrichtigt.
Dieser speichert dann die kommunizierte Änderung persistent in der \Gls{db}.

Im Folgenden lässt sich der Benutzer die Liste seiner \Glspl{abo} im Webfrontend anzeigen.
Dafür benachrichtigt das Webfrontend den Server darüber, dass es die Liste der
\Glspl{abo} des entsprechenden Nutzers benötigt (\enquote{Client Pull}).
Das Webfrontend erhält die aktuelle Liste, welche insbesondere das zuvor
getätigte \Gls{abo} enthält, und zeigt diese dem Nutzer an.

Der Benutzer lässt sich nun auch in der \Gls{podcatcher}-Applikation
\enquote{Podcatcher2} die Liste seiner \Glspl{abo} anzeigen.
Die Anwendung \enquote{Podcatcher2} benachrichtigt hierfür nach kurzer Zeit oder
nach manueller Anforderung den Server darüber, dass sie die Liste der
\Glspl{abo} des entsprechenden Nutzers benötigt.

Die Anwendung erhält die aktuelle Liste, übernimmt diese lokal und zeigt sie dem Nutzer an.
So wird der aktuelle Stand der Liste der \Glspl{abo} (analog der Fortschritt
beim Anhören/Ansehen von \Glspl{episode}) über alle verbundenen \Gls{podcatcher} (und entsprechend alle verbundenen Geräte) synchronisiert.

\newpage 

% UML Sequence Diagram - Synchronise Subscription
\begin{figure}[H]
	\centering
	\raisebox{3cm}{
	\input{sections/TikzPictures/SequenceSynchroniseSubscription}}
	\caption{Sequenzdiagramm - Synchronisation am Beispiel Abonnieren}
	\label{fig:SeqSynchSubs}
\end{figure}
\newpage
