167 lines
7.6 KiB
TeX
167 lines
7.6 KiB
TeX
\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} |