\chapter{Anforderungen}\label{ch:anforderungen}

\section{Laufzeitumgebung}\label{sec:laufzeitumgebung}

\subsection{Sprachen}\label{subsec:sprachen}
Wie bereits erwähnt wurden bei diesem Projekt nur die Sprachen \gls{html}, \gls{css} und JavaScript verwendet

\subsection{Keine Bibliotheken}\label{subsec:keine-bibliotheken}
Auf JavaScript Bibliotheken und Frameworks wie \glqq jQuery\grqq, \glqq React\grqq~oder \glqq Angular\grqq~wurde verzichtet.
Stattdessen wurden native JavaScript-Funktionen verwendet.
Auch das \gls{html}- beziehungsweise \gls{css}-Framework \glqq Bootstrap\grqq~wurde nicht verwendet.


\section{Sicherheit}\label{sec:sicherheit}

\subsection{Authentifizierung}\label{subsec:authentifizierung}
Damit nicht jede Person zugang zu den Daten hat, muss der Benutzer sich authentifizieren.
Dafür wird beim Starten der Webapp ein Login-Fenster, wie in (Abbildung~\ref{fig:login}, angezeigt.
Sollte der Login am Server erfolgreich sein, wird der generierte Token in Session Storage gespeichert.
Das hat zur Folge, dass der Login spätestens mit dem Beenden der Browser-Session ungültig gemacht wird.

\begin{figure}
    \centering
    \includegraphics[width=0.4\textwidth]{images/login}
    \caption{Login-Fenster}
    \label{fig:login}
\end{figure}

\subsection{Logout}\label{subsec:logout}
Der Logout wird zum einen vom Server automatisch durchgeführt, wenn seit 600 Sekunden keine Aktivität mehr erkannt wurde.
Des Weiteren wird im Browser beim Login und bei jeder Aktivität ein Timeout gesetzt, sodass der Token in Session Storage automatisch nach diesen 600 Sekunden gelöscht wird.
Ein Logout-Button befindet sich oben rechts im Header (Abbildung~\ref{fig:logout}).

\begin{figure}
    \centering
    \includegraphics[width=0.2\textwidth]{images/logout}
    \caption{Logout-Button}
    \label{fig:logout}
\end{figure}

\section{Darstellung}\label{sec:darstellung}

\subsection{Anpassung an Browserfenstern}\label{subsec:anpassung-an-browserfenstern}
Da es unterschiedliche Bildschirme gibt, ist der Inhalt der App nicht überall gut lesbar.
Deshalb wurde mittels \gls{css} \glqq Media queries\grqq~dafür gesorgt, dass bei schmalen Geräten die Baum-Ansicht unter der Verzeichnis-Ansicht angezeigt wird.
Dadurch wird sichergestellt, dass auf Smartphones, die sowieso schon wenig Platz in der Breite haben, nicht noch mehr Platz \glqq verschwendet\grqq~wird.

\subsection{Usability}\label{subsec:usability}
Der Dateimanager ist von der Grundstruktur ähnlich aufgebaut wie der \glqq Windows Explorer\grqq~unter Windows oder \glqq Nautilus\grqq~unter Linux.
Nutzer, die diese Dateimanager schon genutzt haben, finden sich in der Webapp schnell zurecht.

\subsection{Fehlererkennung}\label{subsec:fehlererkennung}
Auch wenn es eigentlich nicht vorkommen sollte, kann es immer wieder zu Fehlern kommen, weil die angefragte Datei zum Beispiel gelöscht wurde.
Die Fehlermeldungen des Servers werden von der App abgefangen und angezeigt (Siehe Abbildung~\ref{fig:error}).
Eine Erfolgsmeldung (Abbildung~\ref{fig:success}) wird wie die Fehlermeldung angezeigt, aber mit grünem statt rotem Hintergrund.

\begin{figure}
    \centering
    \includegraphics[width=\textwidth]{images/error}
    \caption{Fehlermeldung}
    \label{fig:error}
\end{figure}

\begin{figure}
    \centering
    \includegraphics[width=\textwidth]{images/succes}
    \caption{Erfolgsmeldung}
    \label{fig:success}
\end{figure}

\subsection{Verzeichnisse \& Dateitypen}\label{subsec:verzeichnisse-&-dateitypen}
Verzeichnisse und Dateitypen werden in der Verzeichnis-Ansicht durch unterschiedliche Icons angezeigt (Abbildung~\ref{fig:files}).
So wird sichergestellt, dass der Benutzer schnell herausfinden kann, um was es sich handelt.

\begin{figure}
    \centering
    \includegraphics[width=\textwidth]{images/files}
    \caption{Dateiansicht mit unterschiedlichen Icons}
    \label{fig:files}
\end{figure}

\section{Navigation}\label{sec:navigation}
Die Navigation ist entweder über den Verzeichnis-Baum links (Abbildung~\ref{fig:tree}) beziehungsweise unten oder über die Datei-Ansicht rechts oder oben möglich.
Um sich ein Verzeichnis nach oben zu bewegen, kann \glqq ..\grqq~verwendet werden.
Um ein oder mehrere Verzeichnisse nach oben zu gehen, kann der Pfad oberhalb der Dateien verwendet werden.
Direkt über der Datei-Ansicht wird das aktuelle Verzeichnis angezeigt (Siehe Abbildung~\ref{fig:path}).

\begin{figure}
    \centering
    \includegraphics[width=0.4\textwidth]{images/tree}
    \caption{Verzeichnis-Baum}
    \label{fig:tree}
\end{figure}

\begin{figure}
    \centering
    \includegraphics[width=\textwidth]{images/path}
    \caption{Anzeige des aktuellen Verzeichnisses}
    \label{fig:path}
\end{figure}

\subsection{Verzeichnis öffnen}\label{subsec:verzeichnis-oeffnen}
Um ein Verzeichnis zu öffnen, kann das entsprechende Verzeichnis in der Verzeichnis-Ansicht angeklickt werden.

\section{Datei-Handling}\label{sec:datei-handling}

\subsection{MP4-Video-Datei abspielen}\label{subsec:mp4-video-datei-abspielen}
Der Dateimanager kann mp4-Video-Dateien abspielen, indem diese in der Verzeichnis-Ansicht angeklickt werden.

\subsubsection{Audio-Datei abspielen}
Der Dateimanager kann Audio-Dateien abspielen, indem diese in der Verzeichnis-Ansicht angeklickt werden.

\subsubsection{Bild-Datei ansehen}
Der Dateimanager kann Bild-Dateien anzeigen, indem diese in der Verzeichnis-Ansicht angeklickt werden.

\subsubsection{Text-Datei bearbeiten}
Der Dateimanager kann Text-Dateien bearbeiten, indem diese in der Verzeichnis-Ansicht angeklickt werden.
Im neuen Fenster kann der Inhalt der Datei bearbeitet werden und wird mit einem Klick auf \glqq Save\grqq~gespeichert.

\subsubsection{Datei herunterladen}
Eine Datei kann heruntergeladen werden, indem in der Verzeichnis-Ansicht das Kontextmenü (Abbildung~\ref{fig:context}) mittels Rechtsklick geöffnet wird.
Dann muss nur noch \glqq Herunterladen\grqq ausgewählt werden.

\subsubsection{Datei löschen}
Eine Datei kann gelöscht werden, indem in der Verzeichnis-Ansicht das Kontextmenü (Abbildung~\ref{fig:context}) mittels Rechtsklick geöffnet wird.
Dann muss nur noch \glqq Löschen\grqq ausgewählt werden.

\begin{figure}
    \centering
    \includegraphics[width=0.6\textwidth]{images/context}
    \caption{Kontextmenü}
    \label{fig:context}
\end{figure}

\subsubsection{Text-Datei erstellen}
Um eine Text-Datei zu erstellen, muss unten rechts über das \glqq +\grqq-Icon gehovert werden (Abbildung~\ref{fig:hover}).
Bei den neu angezeigten Icons das zweite von oben anklicken, um die Datei zu erstellen.
Im Header des neuen Fensters kann der Dateiname festgelegt werden.
Der Rest ist gleich wie beim Bearbeiten von Text-Dateien (Siehe Abbildung~\ref{fig:text}).

\begin{figure}
    \centering
    \includegraphics[width=\textwidth]{images/text}
    \caption{Textdatei erstellen}
    \label{fig:text}
\end{figure}

\subsubsection{Datei hochladen}
Um eine Datei hochzuladen muss unten rechts über das \glqq +\grqq-Icon gehovert werden (Abbildung~\ref{fig:hover}).
Bei den neu angezeigten Icons das dritte von oben anklicken, um die Datei hochzuladen.

\section{Verzeichnis-Handling}\label{sec:verzeichnis-handling}

\subsection{Verzeichnis löschen}\label{subsec:verzeichnis-loeschen}
Ein Verzeichnis kann gelöscht werden, indem in der Verzeichnis-Ansicht das Kontextmenü mittels Rechtsklick geöffnet wird.

\subsection{Verzeichnis erstellen}\label{subsec:verzeichnis-erstellen}
Um ein Verzeichnis zu erstellen, muss unten rechts über das \glqq +\grqq-Icon gehovert werden (Abbildung~\ref{fig:hover}).
Bei den neu angezeigten Icons das oberste anklicken, um das Verzeichnis zu erstellen.


\begin{figure}
    \centering
    \includegraphics[width=0.2\textwidth]{images/hover}
    \caption{Menü}
    \label{fig:hover}
\end{figure}