hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch '136-final-documentation-adjustments' into 'master'

Browse Source 
Resolve "Final documentation adjustments"

Closes #136

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!120
This commit is contained in:
Marcel Schwarz 2020-06-20 15:51:15 +00:00
commit bd9a23a0b0
12 changed files with 303 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -1 +1,2 @@
# UBC - Timetracking with Geofences # UBC SS2020 - Geo Timetracking - Team TacocaT
![Geo Timetracking](other-artifacts/Product-Flyer.png)

53
documentation/documentation.tex
View File

@ -156,7 +156,7 @@
%\missingfigure[figwidth=6cm]{Testing a long text string} %\missingfigure[figwidth=6cm]{Testing a long text string}
%Tiefe des Inhaltsverzeichnisses %Tiefe des Inhaltsverzeichnisses
\setcounter{tocdepth}{2} \setcounter{tocdepth}{1}
% Metadaten % Metadaten
\author{Simon Kellner, Marcel Schwarz, Tobias Wieck, Tim Zieger} \author{Simon Kellner, Marcel Schwarz, Tobias Wieck, Tim Zieger}
@ -166,27 +166,6 @@
\include{parts/titlepage} \include{parts/titlepage}
\begin{abstract}
{\huge Checkliste Lieferobjekte}
\begin{itemize}
\item Ein Journal (z.B. Excel in Dropbox, Office 365, Google), in dem jedes Projektmitglied Tages- und Themenspezifisch seine geleisteten Arbeiten mit Aufwandsangabe listet. Z.b. "Hans 12.4 3 Std Backend Coding"- Das Journal muss zeitnah geführt werden und verfügbar sein. Ein unvollständiges Zeitjournal führt zur Abwertung in der Benotung.
\item Projektdokumentation (*: ca. 15-25 Seiten, je nach Bilderdichte)
\begin{itemize}
\item Source Code und alle erstellten Dokumente
\item Erläuterung des Designs (*)
\item Einrichtung der Entwicklungsumgebung (*) \\
(falls anwendbar, Standarddinge wie Eclipse, Android SDK müssen nicht detailliert erwähnt werden):
\begin{itemize}
\item Welche Frameworks wurden für die Entwicklung benutzt und was gab es bei der Konfiguration / Installation dieser Tools zu beachten?
\item Wie wurden die Zielanwendungen erzeugt und z.B. auf ein Zielgerät oder Server übertragen und dort aktiviert?
\end{itemize}
\item Projektbericht: Wie sind Sie vorgegangen, was wollten Sie erreichen, was haben Sie gelernt, was gab es für Probleme, was haben Sie erreicht, wer hat was gemacht?
\end{itemize}
\item Datei mit der Präsentation
\end{itemize}
\end{abstract}
\tableofcontents \tableofcontents
\listoffigures \listoffigures
@ -206,23 +185,27 @@
\include{parts/android} \include{parts/android}
\chapter{Vollständiger Application Stack} \chapter{Vollständiger Application Stack}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/ApplicationStack} \includegraphics[width=0.9\linewidth]{img/ApplicationStack}
\caption{Application Stack} \caption{Application Stack}
\end{figure} \end{figure}
Das Deployment von Geotime ist in drei große Schichten aufgeteilt. Zunächst wäre hier die Backend Schicht, die Schicht der Datenhaltung und der API. Dieser Teil der Anwendung braucht am meisten Schutz, da er der wichtigste ist und dort alle Daten gespeichert werden. Der Zugriff auf die Datenbank ist nur auf das Backend beschränkt. Um nun die Applikation zu Nutzen gibt es zwei Möglichkeiten: Eine Android App oder ein Webbrowser. Das Deployment der Geo Timetracking Application ist in drei große Schichten aufgeteilt. Zunächst wäre hier die Backend Schicht, die Schicht der Datenhaltung und der API. Dieser Teil der Anwendung braucht am meisten Schutz, da er der wichtigste ist und dort alle Daten gespeichert werden. Der Zugriff auf die Datenbank ist nur auf das Backend beschränkt. Um nun die Applikation zu Nutzen gibt es zwei Möglichkeiten: Eine Android App oder ein Webbrowser.\\
Die Android App implementiert die View Schicht selbst und fragt nur für Daten den Backend-Dienst an. Diese Anfragen gehen zunächst an den Server, der die App hostet und werden dann von dem darauf laufenden Docker Deamon an den entsprechenden Container weitergeleitet. Die Android App implementiert die View Schicht selbst und fragt nur für Daten den Backend-Dienst an. Diese Anfragen gehen zunächst an den Server, der die App hostet und werden dann von dem darauf laufenden Docker Deamon an den entsprechenden Container weitergeleitet.\\
Beim Zugriff über den Webbrowser funktioniert die Kommunikation geringfügig anders. Zunächst wird vom Client der nginx Container nach dem statischen Teil der Website gefragt, dieser lädt dann über ähnliche Anfragen wie in der Android App die Daten vom Backend. Das global gesprochene Protokoll ist hierbei immer HTTP. Beim Zugriff über den Webbrowser funktioniert die Kommunikation geringfügig anders. Zunächst wird vom Client der nginx Container nach dem statischen Teil der Website gefragt, dieser lädt dann über ähnliche Anfragen wie in der Android App die Daten vom Backend. Das global gesprochene Protokoll ist hierbei immer HTTP.
\chapter{Projektjournal} \chapter{Projektjournal}
\begin{figure}[H]
\centering
\includegraphics[width=\linewidth]{img/Clockify_Summary-Overview.pdf}
\end{figure}
Dieser Report zeigt eine Übersicht der geleisteten Arbeit jedes Gruppenmitglieds. Der vollständige Report ist separat angehängt. Dort kann jede Aktivität auf Issue Ebene genau nachvollzogen werden. Da lediglich die Issuenummern angegeben wurden, können die eigentlich dahinter liegenden Aufgaben auf GitLab\footnote{\url{https://gitlab.com/marcel.schwarz/2020ss-qbc-geofence-timetracking/-/issues?scope=all\&utf8=\%E2\%9C\%93\&state=all}} eingesehen werden.
\chapter{Projektfazit und Ausblick} \chapter{Projektfazit und Ausblick}
Bei dem Projekt im Rahmen von Ubiquitous/Pervasive Computing konnten wir Bekanntes anwenden und Neues lernen. Wir alle konnten uns gut einbringen und zusammen auf unser gemeinsames Ziel hinarbeiten. Im Rückblick auf die vergangenen 5 Sprints lässt sich sagen, dass diese erfolgreich verlaufen sind. Die Verteilung der Aufgaben war gleichmäßig und funktionierte reibungslos. Die Idee des Projekts konnte vollständig umgesetzt werden, zudem konnten Anfangs nicht geplante Features umgesetzt werden. Hierzu zählen z.B.: Tagesübergreifende Time Records. Wir alle sind mit dem Ergebnis unserer Arbeit zufrieden und können das Projekt als erfolgreich bezeichnen.\\ Bei dem Projekt im Rahmen von Ubiquitous/Pervasive Computing konnten wir Bekanntes anwenden und Neues lernen. Wir alle konnten uns gut einbringen und zusammen auf unser gemeinsames Ziel hinarbeiten. Im Rückblick auf die vergangenen 5 Sprints lässt sich sagen, dass diese erfolgreich verlaufen sind. Die Verteilung der Aufgaben war gleichmäßig und funktionierte reibungslos. Die Idee des Projekts konnte vollständig umgesetzt werden, zudem konnten anfangs nicht geplante Features umgesetzt werden. Hierzu zählen z.B. tagesübergreifende Time Records. Wir alle sind mit dem Ergebnis unserer Arbeit zufrieden und können das Projekt als erfolgreich bezeichnen.\\
\\
Ebenso sehen wir ein großes Potential in der Weiterentwicklung unseres Endprodukts. Hier haben wir Ideen wie: Zuordnung der Benutzer in Gruppen, Benutzerprofile mit Daten über den Benutzer und dessen Tätigkeit oder auch Zuweisung von Kernarbeitszeit und Zeitrahmen um TimeTracking nur in einem festgelegten Zeitfenster zu erlauben. Mit ein paar Verbesserungen könnte unser Produkt von kleinen Unternehmen verwendet werden, die ein auf Vertrauen basiertes Zeitmeldesystem suchen.
Ebenso sehen wir ein großes Potential in der Weiterentwicklung unseres Endprodukts. Hier haben wir Ideen wie: Zuordnung der Benutzer in Gruppen, Benutzerprofile mit Daten über den Benutzer und dessen Tätigkeit oder auch Zuweisung von Kernarbeitszeit und Zeitrahmen, um Timetracking nur in einem festgelegten Zeitfenster zu erlauben. Mit ein paar Verbesserungen könnte unser Produkt von kleinen Unternehmen verwendet werden, die ein auf Vertrauen basiertes Zeitmeldesystem suchen.
\end{document} \end{document}

BIN
documentation/img/Clockify_Summary-Overview.pdf Normal file
View File

Binary file not shown.

270
documentation/parts/android.tex
View File

@ -1,66 +1,66 @@
\chapter{Android-App} \chapter{Android-App}
\section{Technologiebeschreibung} \section{Technologiebeschreibung}
\subsection{Android SDK} \subsection{Android SDK}
Die Android-Entwicklung wurde, aufgrund der Ausgereiftheit und den Emulatoren, mit Android-Studio realisiert. Android-Studio verwaltet auch das SDK und unterstützt beim aktuell halten der Bibliotheken. Die Android-Entwicklung wurde, aufgrund der Ausgereiftheit und den Emulatoren, mit Android-Studio realisiert. Android-Studio verwaltet auch das SDK und unterstützt beim aktuell halten der Bibliotheken.\\
Das minimale API-Level, welches das Endgerät haben darf, wurde auf 23 "Marshmallow" festgelegt. Dadurch werden ca. 85\% der Geräte unterstützt und ist aktuell genug um gewisse Features, wie das neue Berechtigungssystem, zu unterstützen. Die Zielversion ist das aktuelle Android 10 mit API-Level 29. In dieser Version wurden erneut Berechtigungen geändert, wodurch im Code einige Anpassungen gemacht werden mussten (siehe: \ref{sec:Probleme}) Das minimale API-Level, welches das Endgerät haben darf, wurde auf 23 "Marshmallow" festgelegt. Dadurch werden ca. 85\% der Geräte unterstützt und ist aktuell genug um gewisse Features, wie das neue Berechtigungssystem, zu unterstützen. Die Zielversion ist das aktuelle Android 10 mit API-Level 29. In dieser Version wurden erneut Berechtigungen geändert, wodurch im Code einige Anpassungen gemacht werden mussten (siehe: \ref{sec:Probleme})
\subsection{Kotlin} \subsection{Kotlin}
Die Entscheidung fiel auf Kotlin als Programmiersprache, da die Sprache von Google für die Entwicklung von Android-Apps bevorzugt wird. Außerdem bietet dies die Gelegenheit, eine neue Programmiersprache zu erlernen. Dadurch musste jedoch viel Zeit investiert werden um zum einen die Sprache und zum anderen die Entwicklungsumgebung, sowie den Aufbau einer Android-App zu lernen. Dafür wurden zwei von insgesamt fünf Sprints eingeplant, weswegen die App nur die Grundfunktionen besitzt. Die Entscheidung fiel auf Kotlin als Programmiersprache, da die Sprache von Google für die Entwicklung von Android-Apps bevorzugt wird. Außerdem bietet dies die Gelegenheit, eine neue Programmiersprache zu erlernen. Dadurch musste jedoch viel Zeit investiert werden um zum einen die Sprache und zum anderen die Entwicklungsumgebung, sowie den Aufbau einer Android-App zu lernen. Dafür wurden zwei von insgesamt fünf Sprints eingeplant, weswegen die App nur die Grundfunktionen besitzt.
Die aktuellste Kotlin-Version zur Zeit der Fertigstellung ist 1.3.72. Die aktuellste Kotlin-Version zur Zeit der Fertigstellung ist 1.3.72.
\subsection{Retrofit} \subsection{Retrofit}
Für die Kommunikation mit dem Backend wurde die Bibliothek Retrofit in der Version 2.8.1 verwendet. Retrofit ist ein HTTP-Client für Android, mit dem man REST-Endpunkte simpel ansprechen kann. Zusammen mit der Gson-Bibliothek lassen sich JSON-Nachrichten senden und empfangen. Für die Kommunikation mit dem Backend wurde die Bibliothek Retrofit in der Version 2.8.1 verwendet. Retrofit ist ein HTTP-Client für Android, mit dem man REST-Endpunkte simpel ansprechen kann. Zusammen mit der Gson-Bibliothek lassen sich JSON-Nachrichten senden und empfangen.
Das angefragte API wird mit Klassen und Methoden in der Anwendung modelliert. Dadurch ist es möglich, nur die Felder abzufragen, welche auch benötigt werden. Genaueres in Kapitel \ref{subsec:AnzeigeDaten}. Das angefragte API wird mit Klassen und Methoden in der Anwendung modelliert. Dadurch ist es möglich, nur die Felder abzufragen, welche auch benötigt werden. Genaueres in Kapitel \ref{subsec:AnzeigeDaten}.
\subsection{Material Design} \subsection{Material Design}
Material ist eine Bibliothek, die Komponenten und Richtlinien bereitstellt. Nach einmaligem Einbinden der Bibliothek können die Komponenten verwendet werden, indem der Komponente der Style zugewiesen wird. Material ist eine Bibliothek, die Komponenten und Richtlinien bereitstellt. Nach einmaligem Einbinden der Bibliothek können die Komponenten verwendet werden, indem der Komponente der Style zugewiesen wird.
\section{Farbschema und Designsprache} \section{Farbschema und Designsprache}
In einem gemeinsamen Meeting mit dem Web-Frontend einigten wir uns auf Farbcodes, die auf beiden Oberflächen verwendet werden. So haben wir uns auf ein dunkles Schema festgelegt, mit den Farben aus dem Logo für Schrift und Akzente. Als Schriftart wird Montserrat verwendet (siehe: Abbildungen \ref{Abb:login} - \ref{Abb:settings}). In einem gemeinsamen Meeting mit dem Web-Frontend einigten wir uns auf Farbcodes, die auf beiden Oberflächen verwendet werden. So haben wir uns auf ein dunkles Schema festgelegt, mit den Farben aus dem Logo für Schrift und Akzente. Als Schriftart wird Montserrat verwendet (siehe: Abbildungen \ref{Abb:login} - \ref{Abb:settings}).
\section{Umsetzung} \section{Umsetzung}
\subsection{Design der Activities} \subsection{Design der Activities}
Insgesamt besitzt die App die vier Activities: Login, MainActivity, Register und Settings. Wobei die Register- und die Settings-Activity aus zeitlichen Gründen ohne Funktion sind. Sie haben auch noch die alten unschönen Eingabefelder, sind aber für die Funktion der gesamten Anwendung nicht sonderlich relevant, weshalb entschieden wurde, diese zu vernachlässigen und den Fokus auf die Funktionalität zu legen. Insgesamt besitzt die App die vier Activities: Login, MainActivity, Register und Settings. Wobei die Register- und die Settings-Activity aus zeitlichen Gründen ohne Funktion sind. Sie haben auch noch die alten unschönen Eingabefelder, sind aber für die Funktion der gesamten Anwendung nicht sonderlich relevant, weshalb entschieden wurde, diese zu vernachlässigen und den Fokus auf die Funktionalität zu legen.\\
Jeder Bildschirm hat eine Top-Bar auf der, je nachdem auf welchem Bildschirm man sich befindet, unterschiedliche Inhalte angezeigt werden. Beim Einloggen und Account erstellen wird außer dem Logo und dem Namen der App nichts angezeigt. In den Einstellungen erscheint anstatt des Logos ein Zurück-Button und auf dem Hauptbildschirm gibt es ein Menü zum Ausloggen und um zu den Einstellungen zu gelangen. Jeder Bildschirm hat eine Top-Bar auf der, je nachdem auf welchem Bildschirm man sich befindet, unterschiedliche Inhalte angezeigt werden. Beim Einloggen und Account erstellen wird außer dem Logo und dem Namen der App nichts angezeigt. In den Einstellungen erscheint anstatt des Logos ein Zurück-Button und auf dem Hauptbildschirm gibt es ein Menü zum Ausloggen und um zu den Einstellungen zu gelangen.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\begin{minipage}[b]{0.4\linewidth} \begin{minipage}[b]{0.4\linewidth}
\includegraphics[width=\linewidth]{img/android/login} \includegraphics[width=\linewidth]{img/android/login}
\caption{Login Activity} \caption{Login Activity}
\label{Abb:login} \label{Abb:login}
\end{minipage} \end{minipage}
\hspace{.1\linewidth} \hspace{.1\linewidth}
\begin{minipage}[b]{0.4\linewidth} \begin{minipage}[b]{0.4\linewidth}
\includegraphics[width=\linewidth]{img/android/register} \includegraphics[width=\linewidth]{img/android/register}
\caption{Register Activity} \caption{Register Activity}
\end{minipage} \end{minipage}
\end{figure} \end{figure}
Links die Eingabefelder mit Material Design und rechts die alten, selbst erstellten. Links die Eingabefelder mit Material Design und rechts die alten, selbst erstellten.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\begin{minipage}[b]{0.4\linewidth} \begin{minipage}[b]{0.4\linewidth}
\includegraphics[width=\linewidth]{img/android/main} \includegraphics[width=\linewidth]{img/android/main}
\caption{Main Activity} \caption{Main Activity}
\label{Abb:main} \label{Abb:main}
\end{minipage} \end{minipage}
\hspace{.1\linewidth} \hspace{.1\linewidth}
\begin{minipage}[b]{0.4\linewidth} \begin{minipage}[b]{0.4\linewidth}
\includegraphics[width=\linewidth]{img/android/settings} \includegraphics[width=\linewidth]{img/android/settings}
\caption{Settings Activity} \caption{Settings Activity}
\label{Abb:settings} \label{Abb:settings}
\end{minipage} \end{minipage}
\end{figure} \end{figure}
Wie zu erkennen ist lag, der Fokus der Implementierung deutlich auf der Main Activtiy, da sie auch das Wichtigste der App beinhaltet. Prominent ist dabei der 'START'-Knopf an der Unterseite, mit dem die Aufzeichnung gestartet werden kann (genaueres im Kapitel \ref{subsec:main}). Wie zu erkennen ist lag, der Fokus der Implementierung deutlich auf der Main Activtiy, da sie auch das Wichtigste der App beinhaltet. Prominent ist dabei der "START"-Knopf an der Unterseite, mit dem die Aufzeichnung gestartet werden kann (genaueres im Kapitel \ref{subsec:main}).
\subsection{Authentifizierung} \subsection{Authentifizierung}
Zur Authentifizierung benutzen wir JWT, welches bei jeder Anfrage ans Backend mit geschickt werden muss. Das Token erhält man beim Einloggen mit den richtigen Daten und muss persistiert werden, bis sich der Benutzer ausloggt. Dazu wird das Token im privaten Speicher der App gespeichert. In allen weiteren Activities kann dann auf den Speicher zugegriffen werden und das Token beim Erstellen des \verb|AuthenticationInterceptor|s mitgegeben werden. Beim Ausloggen wird einfach die Datei mit dem Token aus dem Speicher gelöscht. Zur Authentifizierung benutzen wir JWT, welches bei jeder Anfrage ans Backend mit geschickt werden muss. Das Token erhält man beim Einloggen mit den richtigen Daten und muss persistiert werden, bis sich der Benutzer ausloggt. Dazu wird das Token im privaten Speicher der App gespeichert. In allen weiteren Activities kann dann auf den Speicher zugegriffen werden und das Token beim Erstellen des "AuthenticationInterceptor"s mitgegeben werden. Beim Ausloggen wird einfach die Datei mit dem Token aus dem Speicher gelöscht.
Der \verb|AuthenticationInterceptor| ist Kind von der \verb|Interceptor|-Klasse aus der \verb|okhttp3|-Bibliothek, welche in Retrofit eingebunden ist. Mithilfe des Interceptors können REST-Aufrufen Header-Daten mitgegeben werden. In unserem Fall ist das das \verb|Authorization|-Feld mit dem Token. Der "AuthenticationInterceptor" ist Kind von der "Interceptor"-Klasse aus der "okhttp3"-Bibliothek, welche in Retrofit eingebunden ist. Mithilfe des Interceptors können REST-Aufrufen Header-Daten mitgegeben werden. In unserem Fall ist das das "Authorization"-Feld mit dem Token.
\begin{lstlisting}[language=Kotlin,caption=AuthenticationInterceptor] \begin{lstlisting}[language=Kotlin,caption=AuthenticationInterceptor]
class AuthenticationInterceptor(pToken: String) : Interceptor { class AuthenticationInterceptor(pToken: String) : Interceptor {
private val token = pToken private val token = pToken
override fun intercept(chain: Interceptor.Chain): Response { override fun intercept(chain: Interceptor.Chain): Response {
@ -71,26 +71,26 @@ class AuthenticationInterceptor(pToken: String) : Interceptor {
return chain.proceed(request) return chain.proceed(request)
} }
} }
\end{lstlisting} \end{lstlisting}
Der Interceptor wird dem HTTP-Client hinzugefügt, welcher später bei der Erzeugung des Retrofit-Builders notwendig ist. Der Interceptor wird dem HTTP-Client hinzugefügt, welcher später bei der Erzeugung des Retrofit-Builders notwendig ist.
\begin{lstlisting}[language=Kotlin,caption=HTTP Client] \begin{lstlisting}[language=Kotlin,caption=HTTP Client]
val httpClient = OkHttpClient.Builder() val httpClient = OkHttpClient.Builder()
val interceptor = AuthenticationInterceptor(token) val interceptor = AuthenticationInterceptor(token)
httpClient.addInterceptor(interceptor) httpClient.addInterceptor(interceptor)
\end{lstlisting} \end{lstlisting}
\subsection{Anzeige der Daten in der Main Activity}\label{subsec:AnzeigeDaten} \subsection{Anzeige der Daten in der Main Activity}\label{subsec:AnzeigeDaten}
Die Daten werden per REST-Aufruf mithilfe vom Retrofit-Framework vom Backend geholt. Um Anfragen zu senden, benötigt man einen Retrofit-Builder. Diesem wird die anzufragende URL, ein JSON-Konverter und ein HTTP-Client mitgegeben. Aus diesem Builder und einer Service-Klasse, in der die Methoden definiert sind, wird ein Objekt erzeugt, mit dem die Methoden aufrufbar sind. Die Daten werden per REST-Aufruf mithilfe vom Retrofit-Framework vom Backend geholt. Um Anfragen zu senden, benötigt man einen Retrofit-Builder. Diesem wird die anzufragende URL, ein JSON-Konverter und ein HTTP-Client mitgegeben. Aus diesem Builder und einer Service-Klasse, in der die Methoden definiert sind, wird ein Objekt erzeugt, mit dem die Methoden aufrufbar sind.
\begin{lstlisting}[language=Kotlin,caption=Retrofit Builder] \begin{lstlisting}[language=Kotlin,caption=Retrofit Builder]
val builder = Retrofit.Builder() val builder = Retrofit.Builder()
.baseUrl("http://plesk.icaotix.de:5000") .baseUrl("http://plesk.icaotix.de:5000")
.addConverterFactory(GsonConverterFactory.create()) .addConverterFactory(GsonConverterFactory.create())
.client(httpClient.build()) .client(httpClient.build())
val retrofit = builder.build() val retrofit = builder.build()
service = retrofit.create(GeofenceService::class.java) service = retrofit.create(GeofenceService::class.java)
\end{lstlisting} \end{lstlisting}
Die Klasse \verb|GeofenceService| dient, wie oben beschrieben, zur Definition der Endpunkte in Form von Methodenaufrufen. Dort wird definiert, ob es ein \verb|POST|- oder \verb|GET|-Entpunkt ist, wie der Pfad lautet und was für Parameter mitgegeben werden. Die Klasse "GeofenceService" dient, wie oben beschrieben, zur Definition der Endpunkte in Form von Methodenaufrufen. Dort wird definiert, ob es ein "POST"- oder "GET"-Entpunkt ist, wie der Pfad lautet und was für Parameter mitgegeben werden.
\begin{lstlisting}[language=Kotlin,caption=GeofenceService] \begin{lstlisting}[language=Kotlin,caption=GeofenceService]
@POST("/login") @POST("/login")
fun login(@Body login_data: ValuesUserLogin): Call<Void> fun login(@Body login_data: ValuesUserLogin): Call<Void>
@ -99,16 +99,16 @@ fun getUser(): Call<ValuesUser>
@GET("accounts/search/findByUsername") @GET("accounts/search/findByUsername")
fun getAccounts(@Query("username") username : String): Call<EmbeddedAccounts> fun getAccounts(@Query("username") username : String): Call<EmbeddedAccounts>
\end{lstlisting} \end{lstlisting}
Der Rückgabewert der Methoden ist immer vom Typ \verb|Call|. Wenn aus dem Body Werte gelesen werden sollen, muss eine Art Skelett-Klasse angelegt werden mit den relevanten Feldern. Die Klasse \verb|ValuesUser| stellt Werte der Antwort bereit, wie z. B. den Vornamen. Der Rückgabewert der Methoden ist immer vom Typ "Call". Wenn aus dem Body Werte gelesen werden sollen, muss eine Art Skelett-Klasse angelegt werden mit den relevanten Feldern. Die Klasse "ValuesUser" stellt Werte der Antwort bereit, wie z. B. den Vornamen.
\begin{lstlisting}[language=Kotlin,caption=ValuesUser] \begin{lstlisting}[language=Kotlin,caption=ValuesUser]
class ValuesUser(firstname: String) { class ValuesUser(firstname: String) {
@SerializedName("firstname") @SerializedName("firstname")
var firstname = firstname var firstname = firstname
} }
\end{lstlisting} \end{lstlisting}
Der Aufruf der Methode erfolgt asynchron. Deshalb darf sich nicht auf das Ergebnis des Aufrufs direkt danach verlassen werden, sonst bekommt man eine Null-Pointer-Excetion. Die Methode \verb|enqueue| besitzt ein Callback-Objekt als Parameter, welches \verb|onResponse| und \verb|onFailure| überschreibt. Dort wird entsprechend definiert, was in den jeweiligen Fällen ausgeführt werden soll. Der Aufruf der Methode erfolgt asynchron. Deshalb darf sich nicht auf das Ergebnis des Aufrufs direkt danach verlassen werden, sonst bekommt man eine Null-Pointer-Excetion. Die Methode "enqueue" besitzt ein Callback-Objekt als Parameter, welches "onResponse" und "onFailure" überschreibt. Dort wird entsprechend definiert, was in den jeweiligen Fällen ausgeführt werden soll.
\begin{lstlisting}[language=Kotlin,caption=Callback der "getUser" Funktion] \begin{lstlisting}[language=Kotlin,caption=Callback der "getUser" Funktion]
val call = service.getUser() val call = service.getUser()
call.enqueue(object : Callback<ValuesUser> { call.enqueue(object : Callback<ValuesUser> {
override fun onResponse(call: Call<ValuesUser>, response: Response<ValuesUser>) { override fun onResponse(call: Call<ValuesUser>, response: Response<ValuesUser>) {
@ -123,41 +123,41 @@ call.enqueue(object : Callback<ValuesUser> {
println("Response 'whoami' failed. " + t.message) println("Response 'whoami' failed. " + t.message)
} }
}) })
\end{lstlisting} \end{lstlisting}
\bigskip \bigskip
In dieser Art und Weise werden alle Anfragen ans Backend gehandhabt. Dazu zählen: In dieser Art und Weise werden alle Anfragen ans Backend gehandhabt. Dazu zählen:
\begin{itemize} \begin{itemize}
\item Abfragen der Location-Daten zu dem Benutzer für den Geofence \item Abfragen der Location-Daten zu dem Benutzer für den Geofence
\item Befüllen des Dropdown-Menüs mit den Timetrack-Accounts des Benutzers \item Befüllen des Dropdown-Menüs mit den Timetrack-Accounts des Benutzers
\item Anzeigen der Beschreibung und der Vergütung \item Anzeigen der Beschreibung und der Vergütung
\item Befüllen des RecyclerViews mit den heutigen Einträgen \item Befüllen des RecyclerViews mit den heutigen Einträgen
\item Auslösen des Start-/Stopp-Events \item Auslösen des Start-/Stopp-Events
\item Einloggen \item Einloggen
\end{itemize} \end{itemize}
\subsection{Geofencing}\label{subsec:geofence} \subsection{Geofencing}\label{subsec:geofence}
Die Geofencing-Funktion ist die zentrale Funktion für die App und auch für das gesamte Projekt. Deshalb war es wichtig, dass sie frühzeitig funktioniert. Die Geofencing-Funktion ist die zentrale Funktion für die App und auch für das gesamte Projekt. Deshalb war es wichtig, dass sie frühzeitig funktioniert.\\
Um die Position eines Gerätes zu bestimmen, bedarf es einer Berechtigung, die vom Benutzer bestätigt werden muss. Für Geräte mit API-Level 28 und niedriger muss dafür die \verb|ACCESS_FINE_LOCATION|-Berechtigung gesetzt werden und für API-Level 29 und höher \verb|ACCESS_BACKGROUND_LOCATION|. Um die Position eines Gerätes zu bestimmen, bedarf es einer Berechtigung, die vom Benutzer bestätigt werden muss. Für Geräte mit API-Level 28 und niedriger muss dafür die \linebreak "ACCESS\_FINE\_LOCATION"-Berechtigung gesetzt werden und für API-Level 29 und höher "ACCESS\_BACKGROUND\_LOCATION".\\
Der Geofence wird initialisiert, wenn für den Benutzer Geo-Daten gespeichert sind. Ist dies der Fall, so wird ein \verb|GeofencingClient| angelegt, dem dann der Geofence hinzugefügt wird. Der Geofence wird erzeugt mit den Parametern: Breitengrad, Längengrad, Radius, der Lebenszeit des Fence und den Übergangstypen. Die Typen sind in unserem Fall \verb|GEOFENCE_TRANSITION_ENTER| und \verb|GEOFENCE_TRANSITION_EXIT|, da wir immer reagieren wollen, wenn der Nutzer den Bereich verlässt oder betritt. Der Geofence wird initialisiert, wenn für den Benutzer Geo-Daten gespeichert sind. Ist dies der Fall, so wird ein "GeofencingClient" angelegt, dem dann der Geofence hinzugefügt wird. Der Geofence wird erzeugt mit den Parametern: Breitengrad, Längengrad, Radius, der Lebenszeit des Fence und den Übergangstypen. Die Typen sind in unserem Fall "GEOFENCE\_TRANSITION\_ENTER" und "GEOFENCE\_TRANSITION\_EXIT", da wir immer reagieren wollen, wenn der Nutzer den Bereich verlässt oder betritt.
\begin{lstlisting}[language=Kotlin,caption=Anlegen des Geofencing Clients] \begin{lstlisting}[language=Kotlin,caption=Anlegen des Geofencing Clients]
geofencingClient = LocationServices.getGeofencingClient(this) geofencingClient = LocationServices.getGeofencingClient(this)
geofence = Geofence.Builder().setRequestId("Geofence") geofence = Geofence.Builder().setRequestId("Geofence")
.setCircularRegion(lat, long, rad) .setCircularRegion(lat, long, rad)
.setExpirationDuration(Geofence.NEVER_EXPIRE) .setExpirationDuration(Geofence.NEVER_EXPIRE)
.setTransitionTypes(Geofence.GEOFENCE_TRANSITION_ENTER or Geofence.GEOFENCE_TRANSITION_EXIT) .setTransitionTypes(Geofence.GEOFENCE_TRANSITION_ENTER or Geofence.GEOFENCE_TRANSITION_EXIT)
.build() .build()
\end{lstlisting} \end{lstlisting}
Um den Geofence-Client zu starten wird auf das Objekt die \verb|addGeofences|-Methode ausgeführt mit einem \verb|GeofencingRequest|-Objekt und einem \verb|PendingIntent|-Objekt als Parameter. Um den Geofence-Client zu starten wird auf das Objekt die "addGeofences"-Methode ausgeführt mit einem "GeofencingRequest"-Objekt und einem "PendingIntent"-Objekt als Parameter.
\begin{lstlisting}[language=Kotlin,caption="addGeofences" Methode] \begin{lstlisting}[language=Kotlin,caption="addGeofences" Methode]
geofencingClient.addGeofences(getGeofencingRequest(), geofencePendingIntent)?.run { geofencingClient.addGeofences(getGeofencingRequest(), geofencePendingIntent)?.run {
addOnSuccessListener { ... } addOnSuccessListener { ... }
addOnFailureListener { ... } addOnFailureListener { ... }
} }
\end{lstlisting} \end{lstlisting}
In der \verb|getGeofencingRequest|-Methode wird festgelegt, auf welches initiale Event reagiert werden soll und der oben erstellte Geofence wird hinzugefügt. Als initiales Event haben wir \verb|INITIAL_TRIGGER_ENTER| gewählt, da es ausgelöst wird, wenn man sich bereits im Bereich befindet und die App startet. Denn erst mit dem Eintrittsevent wird der Button zum Starten der Aufzeichnung freigeschaltet. Das \verb|geofencePendingIntent| definiert die BroadcastReceiver-Klasse, welche bei jedem Event aufgerufen wird. In der "getGeofencingRequest"-Methode wird festgelegt, auf welches initiale Event reagiert werden soll und der oben erstellte Geofence wird hinzugefügt. Als initiales Event haben wir "INITIAL\_TRIGGER\_ENTER" gewählt, da es ausgelöst wird, wenn man sich bereits im Bereich befindet und die App startet. Denn erst mit dem Eintrittsevent wird der Button zum Starten der Aufzeichnung freigeschaltet. Das "geofencePendingIntent" definiert die BroadcastReceiver-Klasse, welche bei jedem Event aufgerufen wird.
\begin{lstlisting}[language=Kotlin,caption=Setzen der Geofence Trigger] \begin{lstlisting}[language=Kotlin,caption=Setzen der Geofence Trigger]
private fun getGeofencingRequest(): GeofencingRequest { private fun getGeofencingRequest(): GeofencingRequest {
return GeofencingRequest.Builder().apply { return GeofencingRequest.Builder().apply {
setInitialTrigger(GeofencingRequest.INITIAL_TRIGGER_ENTER) setInitialTrigger(GeofencingRequest.INITIAL_TRIGGER_ENTER)
@ -168,86 +168,84 @@ private val geofencePendingIntent: PendingIntent by lazy {
val intent = Intent(this, GeofenceBroadcastReceiver::class.java) val intent = Intent(this, GeofenceBroadcastReceiver::class.java)
PendingIntent.getBroadcast(this, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT) PendingIntent.getBroadcast(this, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT)
} }
\end{lstlisting} \end{lstlisting}
Die \verb|GeofenceBroadcastReceiver|-Klasse definiert, was bei den jeweiligen Events ausgeführt werden soll. In unserem Fall ist dies das Verändern einer boolean Shared-Prefrences-Variable, je nachdem ob der Bereich betreten oder verlassen wurde. Warum diese Art und Weise gewählt wurde lesen Sie in Kapitel \ref{sec:Probleme}. Das Code-Beispiel zeigt die Aktion beim Betreten des Bereichs. Die "GeofenceBroadcastReceiver"-Klasse definiert, was bei den jeweiligen Events ausgeführt werden soll. In unserem Fall ist dies das Verändern einer boolean Shared-Prefrences-Variable, je nachdem ob der Bereich betreten oder verlassen wurde. Warum diese Art und Weise gewählt wurde lesen Sie in Kapitel \ref{sec:Probleme}. Das Code-Beispiel zeigt die Aktion beim Betreten des Bereichs.
\begin{lstlisting}[language=Kotlin,caption=Ändern der Shared-Preferences] \begin{lstlisting}[language=Kotlin,caption=Ändern der Shared-Preferences]
context!!.getSharedPreferences("LOCATION", Context.MODE_PRIVATE) context!!.getSharedPreferences("LOCATION", Context.MODE_PRIVATE)
?.edit() ?.edit()
?.putBoolean("ENABLED", true) ?.putBoolean("ENABLED", true)
?.apply() ?.apply()
\end{lstlisting} \end{lstlisting}
In der \verb|MainActivity| wird ein Listener für diese Shared-Prefrences-Variable definiert. Je nachdem, zu welchem Wert sich die Variable ändert, wird der Start/Stopp-Button freigeschaltet oder gesperrt. Wenn der Benutzer den Bereich verlässt, aber noch aufzeichnet, wird dadurch die Aufzeichnung automatisch gestoppt und gespeichert. In der "MainActivity" wird ein Listener für diese Shared-Prefrences-Variable definiert. Je nachdem, zu welchem Wert sich die Variable ändert, wird der Start/Stopp-Button freigeschaltet oder gesperrt. Wenn der Benutzer den Bereich verlässt, aber noch aufzeichnet, wird dadurch die Aufzeichnung automatisch gestoppt und gespeichert.
\section{Funktionen der App} \section{Funktionen der App}
Wie oben beschrieben, besteht die Android-App aus vier Activities. Die Register- und Settings-Activity sind aus zeitlichen Gründen ohne Funktion und layouttechnisch nicht überarbeitet. Der Fokus lag stark auf der Main-Activity, die das Kernstück der App darstellt. Im Folgenden die Funktionalitäten der Activities Login und Main. Wie oben beschrieben, besteht die Android-App aus vier Activities. Die Register- und Settings-Activity sind aus zeitlichen Gründen ohne Funktion und layouttechnisch nicht überarbeitet. Der Fokus lag stark auf der Main-Activity, die das Kernstück der App darstellt. Im Folgenden die Funktionalitäten der Activities Login und Main.
\subsection{Login Screen} \subsection{Login Screen}
In der Abbildung \ref{Abb:login} ist der Login Screen zu sehen. Er besteht aus der Top-Action-Bar mit Logo und App-Name, den Eingabefeldern und zwei Buttons. Alle Komponenten sind aus der Material-Design-Bibliothek. In der Abbildung \ref{Abb:login} ist der Login Screen zu sehen. Er besteht aus der Top-Action-Bar mit Logo und App-Name, den Eingabefeldern und zwei Buttons. Alle Komponenten sind aus der Material-Design-Bibliothek.
Zum Einloggen werden die Daten in die jeweiligen Felder eingegeben. Wenn ein Feld markiert ist, wird das ausgewählte Feld blau umrandet und der Hinweis wird auf die obere Linie verschoben. Das Passwortfeld zeigt nur kurz den eingegebenen Buchstaben an und wird dann zu einem '*', sodass das Passwort nicht offen lesbar ist. Zum Einloggen werden die Daten in die jeweiligen Felder eingegeben. Wenn ein Feld markiert ist, wird das ausgewählte Feld blau umrandet und der Hinweis wird auf die obere Linie verschoben. Das Passwortfeld zeigt nur kurz den eingegebenen Buchstaben an und wird dann zu einem "*", sodass das Passwort nicht offen lesbar ist.
Der Login-Button sendet die Daten an das Backend und prüft, ob die Daten korrekt sind. Wenn dies der Fall ist, enthält die Antwort das Token, welches in den privaten Speicher abgelegt wird, und die App wechselt zum Hauptbildschirm. War der Login nicht erfolgreich, wird dem Benutzer eine Pop-Up-Meldung angezeigt und nichts weiter unternommen. Mit dem Betätigen des Registrieren-Knopfes wird man auf die Register-Activity weitergeleitet. Der Login-Button sendet die Daten an das Backend und prüft, ob die Daten korrekt sind. Wenn dies der Fall ist, enthält die Antwort das Token, welches in den privaten Speicher abgelegt wird, und die App wechselt zum Hauptbildschirm. War der Login nicht erfolgreich, wird dem Benutzer eine Pop-Up-Meldung angezeigt und nichts weiter unternommen. Mit dem Betätigen des Registrieren-Knopfes wird man auf die Register-Activity weitergeleitet.
\subsection{Main Activity}\label{subsec:main} \subsection{Main Activity}\label{subsec:main}
Auf dem Hauptbildschirm erscheint in der Top-Action-Bar ein drei Punkte Menü (Kebab-Menü), von dem aus man zu den Einstellungen gelangen oder sich ausloggen kann. Beim Ausloggen wird die Datei mit dem Benutzer-Token gelöscht und die Login-Activity aufgerufen. Auf dem Hauptbildschirm erscheint in der Top-Action-Bar ein drei Punkte Menü (Kebab-Menü), von dem aus man zu den Einstellungen gelangen oder sich ausloggen kann. Beim Ausloggen wird die Datei mit dem Benutzer-Token gelöscht und die Login-Activity aufgerufen.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.4\linewidth]{img/android/main_menu} \includegraphics[width=0.4\linewidth]{img/android/main_menu}
\caption{Menü auf dem Hauptbildschirm} \caption{Menü auf dem Hauptbildschirm}
\label{Abb:menu} \label{Abb:menu}
\end{figure} \end{figure}
Direkt unter der Top-Action-Bar wird der Benutzer mit dem Vornamen begrüßt (Abb.: \ref{Abb:main}). Direkt unter der Top-Action-Bar wird der Benutzer mit dem Vornamen begrüßt (Abb.: \ref{Abb:main}).
In der Bedienfläche kann der Benutzer den Timetrack-Account auswählen und dessen Details ansehen, seine heutigen Arbeitszeiten ansehen und die Aufzeichnung starten oder stoppen. In der Bedienfläche kann der Benutzer den Timetrack-Account auswählen und dessen Details ansehen, seine heutigen Arbeitszeiten ansehen und die Aufzeichnung starten oder stoppen.\\
Die Auswahl des Accounts erfolgt über ein Dropdown-Menü. Bei Auswahl wird sofort die zugehörige Beschreibung und die Vergütung angezeigt. Wenn die Aufzeichnung am Laufen ist, wird das Dropdown-Menü ausgeblendet. Das verhindert, dass der Benutzer eine Aktivität für einen anderen Account stoppen kann, als für den, auf dem er sie gestartet hat. Ist für den Benutzer noch kein Account vorhanden, wird "None" im Menü angezeigt und die beiden Felder für Beschreibung und Vergütung werden ausgeblendet. Die Auswahl des Accounts erfolgt über ein Dropdown-Menü. Bei Auswahl wird sofort die zugehörige Beschreibung und die Vergütung angezeigt. Wenn die Aufzeichnung am Laufen ist, wird das Dropdown-Menü ausgeblendet. Das verhindert, dass der Benutzer eine Aktivität für einen anderen Account stoppen kann, als für den, auf dem er sie gestartet hat. Ist für den Benutzer noch kein Account vorhanden, wird "None" im Menü angezeigt und die beiden Felder für Beschreibung und Vergütung werden ausgeblendet.\\
Für die Anzeige der heutigen Arbeitszeiten haben wir eine RecyclerView verwendet. Das Layout dazu wird in einer extra XML-Datei definiert und mit Daten in einer Adapter-Klasse befüllt. Durch eine Backendabfrage bekommen wir die nötigen Daten dafür. Bei aktiver Aufzeichnung wird ein Element angezeigt mit der Startzeit und der Info, dass das Ende offen ist. Für die Anzeige der heutigen Arbeitszeiten haben wir eine RecyclerView verwendet. Das Layout dazu wird in einer extra XML-Datei definiert und mit Daten in einer Adapter-Klasse befüllt. Durch eine Backendabfrage bekommen wir die nötigen Daten dafür. Bei aktiver Aufzeichnung wird ein Element angezeigt mit der Startzeit und der Info, dass das Ende offen ist.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.4\linewidth]{img/android/main_recording} \includegraphics[width=0.4\linewidth]{img/android/main_recording}
\caption{Laufende Aufzeichnung} \caption{Laufende Aufzeichnung}
\label{Abb:menu} \end{figure}
\end{figure} Der Start-Stop-Button schaltet die Aufzeichnung um, in dem ein Backend-Endpunkt angesprochen wird. In der App haben wir eine boolean-Variable "running" definiert, welche speichert, ob die Aufzeichnung aktiv ist. Anhand ihr wird entschieden, wie der Start-Stop-Button aussieht und ob beim Verlassen des Geofence noch gestoppt werden muss. Der Button ist nicht auswählbar, wenn sich der Nutzer außerhalb seines Arbeitsplatzes befindet und zeigt dies auch an (Abb.: \ref{Abb:outside}). Ist der Nutzer dann im Bereich, wird "Start" angezeigt und der Button ist freigeschaltet. Während der Aufzeichnung trägt der Button die Schrift "Stop". Hat der Nutzer noch keine Geo-Daten für seinen Arbeitsplatz definiert, wird auch das auf dem Button angezeigt.
Der Start-Stop-Button schaltet die Aufzeichnung um, in dem ein Backend-Endpunkt angesprochen wird. In der App haben wir eine boolean-Variable \verb|running| definiert, welche speichert, ob die Aufzeichnung aktiv ist. Anhand ihr wird entschieden, wie der Start-Stop-Button aussieht und ob beim Verlassen des Geofence noch gestoppt werden muss. Der Button ist nicht auswählbar, wenn sich der Nutzer außerhalb seines Arbeitsplatzes befindet und zeigt dies auch an (Abb.: \ref{Abb:outside}). Ist der Nutzer dann im Bereich, wird "Start" angezeigt und der Button ist freigeschaltet. Während der Aufzeichnung trägt der Button die Schrift "Stop". Hat der Nutzer noch keine Geo-Daten für seinen Arbeitsplatz definiert, wird auch das auf dem Button angezeigt. \begin{figure}[H]
\begin{figure}[H] \centering
\centering \includegraphics[width=0.4\linewidth]{img/android/btn_outside}
\includegraphics[width=0.4\linewidth]{img/android/btn_outside} \caption{Nutzer außerhalb seines Geofence}
\caption{Nutzer außerhalb seines Geofence} \label{Abb:outside}
\label{Abb:outside} \end{figure}
\end{figure} \begin{figure}[H]
\begin{figure}[H] \centering
\centering \includegraphics[width=0.4\linewidth]{img/android/btn_start}
\includegraphics[width=0.4\linewidth]{img/android/btn_start} \caption{Aufzeichnung kann gestartet werden}
\caption{Aufzeichnung kann gestartet werden} \end{figure}
\end{figure} \begin{figure}[H]
\begin{figure}[H] \centering
\centering \includegraphics[width=0.4\linewidth]{img/android/btn_stop}
\includegraphics[width=0.4\linewidth]{img/android/btn_stop} \caption{Laufende Aufzeichnung}
\caption{Laufende Aufzeichnung} \end{figure}
\end{figure} \begin{figure}[H]
\begin{figure}[H] \centering
\centering \includegraphics[width=0.4\linewidth]{img/android/btn_no_fence}
\includegraphics[width=0.4\linewidth]{img/android/btn_no_fence} \caption{Nutzer hat noch keinen Geo-Daten}
\caption{Nutzer hat noch keinen Geo-Daten} \end{figure}
\end{figure} Um versehentliches Stoppen der Aufzeichnung zu verhindern, muss der Nutzer in einem Pop-Up-Dialog seine Aktion bestätigen.
Um versehentliches Stoppen der Aufzeichnung zu verhindern, muss der Nutzer in einem Pop-Up-Dialog seine Aktion bestätigen. \begin{figure}[H]
\begin{figure}[H] \centering
\centering \includegraphics[width=0.4\linewidth]{img/android/confirm_stop}
\includegraphics[width=0.4\linewidth]{img/android/confirm_stop} \caption{Bestätigungs Dialog zum stoppen}
\caption{Bestätigungs Dialog zum stoppen} \end{figure}
\label{Abb:menu}
\end{figure}
\section{Probleme und Lösungen}\label{sec:Probleme} \section{Probleme und Lösungen}\label{sec:Probleme}
Damit die App auch die aktuellste Android Version unterstützt, mussten einige zusätzliche Punkte berücksichtigt werden. Neben der Berechtigung aus Kapitel \ref{subsec:geofence} mussten in der \verb|build.gradle|-Datei Kompilierungsoptionen gesetzt werden.\\ Damit die App auch die aktuellste Android Version unterstützt, mussten einige zusätzliche Punkte berücksichtigt werden. Neben der Berechtigung aus Kapitel \ref{subsec:geofence} mussten in der "build.gradle"-Datei Kompilierungsoptionen gesetzt werden.\\
Zu Beginn wollten wir alle Activities mit Fragments realisieren, sodass es nur eine Activity gibt und alles weitere Fragments sind. Allerdings war es schwieriger, zwischen den Fragments zu wechseln, als in den Tutorials beschrieben. Deshalb sind wir auf reine Activities umgestiegen. Zwischen diesen ist das Hin- und Herschalten deutlich einfacher, es besteht jedoch kein Zugriff auf Elemente der anderen Activities.\\ Zu Beginn wollten wir alle Activities mit Fragments realisieren, sodass es nur eine Activity gibt und alles weitere Fragments sind. Allerdings war es schwieriger, zwischen den Fragments zu wechseln, als in den Tutorials beschrieben. Deshalb sind wir auf reine Activities umgestiegen. Zwischen diesen ist das Hin- und Herschalten deutlich einfacher, es besteht jedoch kein Zugriff auf Elemente der anderen Activities.\\
Das wurde aber erst dann problematisch, als wir aus der Klasse \verb|GeofenceBroadcastReceiver| eine Methode der \verb|MainActivity| zur Änderung der Oberfläche aufrufen wollten. Das hat den Grund, dass Android nicht sicher sagen kann, dass diese Activity gerade auch aktiv ist. Deshalb haben wir den Weg über die Shared-Preferences gewählt mit einem Listener in der \verb|MainActivity|.\\ Das wurde aber erst dann problematisch, als wir aus der Klasse "GeofenceBroadcastReceiver" eine Methode der "MainActivity" zur Änderung der Oberfläche aufrufen wollten. Das hat den Grund, dass Android nicht sicher sagen kann, dass diese Activity gerade auch aktiv ist. Deshalb haben wir den Weg über die Shared-Preferences gewählt mit einem Listener in der "MainActivity".\\
Initial wollten wir das Token in einer Datenklasse abspeichern, welche beim Einloggen befüllt wird. Dazu müsste allerdings das Objekt oder die Referenz zu jeder anderen Activity übergeben werden. Eine andere Möglichkeit stellen erneut die Shared Preferences dar. Das wäre auch eine gute Lösung gewesen, welche wir aber zu spät entdeckt haben. Deshalb haben wir das Problem mit dem privaten Speicher gelöst. Er ist durch andere Apps und den Benutzer nicht einsehbar, bildet deshalb also kein Sicherheitsrisiko.\\ Initial wollten wir das Token in einer Datenklasse abspeichern, welche beim Einloggen befüllt wird. Dazu müsste allerdings das Objekt oder die Referenz zu jeder anderen Activity übergeben werden. Eine andere Möglichkeit stellen erneut die Shared Preferences dar. Das wäre auch eine gute Lösung gewesen, welche wir aber zu spät entdeckt haben. Deshalb haben wir das Problem mit dem privaten Speicher gelöst. Er ist durch andere Apps und den Benutzer nicht einsehbar, bildet deshalb also kein Sicherheitsrisiko.\\
Unerwartet war, dass die Geofence-Funktion die normale Android Positionsbestimmung zusätzlich benötigt. Denn zuerst hatten wir die Positionsbestimmung implementiert und dann die Geofence-Funktion, was funktioniert hat. Da in der Geofence-Funktion kein Code der normalen Positionsbestimmung referenziert wurde, dachten wir, man könne diesen weglassen, was ein Trugschluss war. Auch der Versuch, Teile der Positionsbestimmung wegzulassen, war ohne Erfolg. Deshalb beinhaltet die App auch Code für die normale Positionsbestimmung. Unerwartet war, dass die Geofence-Funktion die normale Android Positionsbestimmung zusätzlich benötigt. Denn zuerst hatten wir die Positionsbestimmung implementiert und dann die Geofence-Funktion, was funktioniert hat. Da in der Geofence-Funktion kein Code der normalen Positionsbestimmung referenziert wurde, dachten wir, man könne diesen weglassen, was ein Trugschluss war. Auch der Versuch, Teile der Positionsbestimmung wegzulassen, war ohne Erfolg. Deshalb beinhaltet die App auch Code für die normale Positionsbestimmung.
\section{Deployment} \section{Deployment}
Das Deployment spielte im Entwicklungsprozess der App keine große Rolle, da es Android-Studio benötigt um die App zu starten. Zum Abschluss haben wir allerdings den aktuellen Stand des Projekts in einer APK-Datei persistiert. Damit lässt sich die App auf andere Geräte installieren und in den App-Store laden. Zur Erstellung einer solchen APK muss ein Key zur Signatur angegeben werden. Das Deployment spielte im Entwicklungsprozess der App keine große Rolle, da es Android-Studio benötigt um die App zu starten. Zum Abschluss haben wir allerdings den aktuellen Stand des Projekts in einer APK-Datei persistiert. Damit lässt sich die App auf andere Geräte installieren und in den App-Store laden. Zur Erstellung einer solchen APK muss ein Key zur Signatur angegeben werden.

14
documentation/parts/backend.tex
View File

@ -7,7 +7,7 @@
Es wurden im Projektverlauf auch noch diverse Erweiterungen des Frameworks genutzt. Es wurden im Projektverlauf auch noch diverse Erweiterungen des Frameworks genutzt.
\begin{itemize} \begin{itemize}
\item \textbf{org.springframework.boot:spring-boot-starter-web} bringt einen integrierten Tomcat Application Server mit und ermöglicht das Verarbeiten von Webanfragen. \item \textbf{org.springframework.boot:spring-boot-starter-web} bringt einen integrierten Tomcat Application Server mit und ermöglicht das Verarbeiten von Webanfragen.
\item \textbf{org.springframework.boot:spring-boot-starter-actuator} wird genutzt, um Diagnose-Endpoints freizuschalten. \item \textbf{org.springframework.boot:spring-boot-starter-actuator} wird genutzt, um Endpoints für Diagnose freizuschalten.
\item \textbf{org.springframework.boot:spring-boot-starter-data-jpa} bringt alle nötigen Abhängigkeiten, um mit der Java Persistence API Daten in einer Datenbank abzulegen. \item \textbf{org.springframework.boot:spring-boot-starter-data-jpa} bringt alle nötigen Abhängigkeiten, um mit der Java Persistence API Daten in einer Datenbank abzulegen.
\item \textbf{org.springframework.boot:spring-boot-starter-data-rest} bietet Möglichkeiten, sehr leicht Datenbank Entitäten als HTTP REST Ressourcen bereitzustellen. \item \textbf{org.springframework.boot:spring-boot-starter-data-rest} bietet Möglichkeiten, sehr leicht Datenbank Entitäten als HTTP REST Ressourcen bereitzustellen.
\item \textbf{org.springframework.boot:spring-boot-starter-security} wird später zusammen mit der Authentifizierung über JWT genutzt. \item \textbf{org.springframework.boot:spring-boot-starter-security} wird später zusammen mit der Authentifizierung über JWT genutzt.
@ -106,13 +106,13 @@
\lstinputlisting[language=Java,linerange={14-27,38-41,47-58},caption=RecordRepository,label=code:record-repository]{../backend/src/main/java/de/hft/geotime/repositories/RecordRepository.java} \lstinputlisting[language=Java,linerange={14-27,38-41,47-58},caption=RecordRepository,label=code:record-repository]{../backend/src/main/java/de/hft/geotime/repositories/RecordRepository.java}
In diesem Repository befinden sich diverse verschiedene Methoden, wie Datenoperationen definiert werden können, ohne dass sie aktiv implementiert werden müssen. Es beginnt mit der Funktion "findAllByStartdateBetween". Dieser Name kann direkt als Java Hibernate Statement interpretiert werden und nimmt als Parameter zwei Datumsangaben entgegen und eine Page. Die zwei Datumsangaben werden aus dem Schlüsselwort "Between" abgeleitet. Damit es sich aber um echt vergleichbare Daten handelt, müssen diese nach einem bestimmten Schema geparsed werden. Dieses Schema ist in der "DateTimeFormat" Annotation angegeben. Als Rückgabe liefert diese Funktion dann eine Menge aller Einträge zwischen diesen Daten. In diesem Repository befinden sich diverse verschiedene Methoden, wie Datenoperationen definiert werden können, ohne dass sie aktiv implementiert werden müssen. Es beginnt mit der Funktion "findAllByStartdateBetween". Dieser Name kann direkt als Java Hibernate Statement interpretiert werden und nimmt als Parameter zwei Datumsangaben entgegen und eine Page. Die zwei Datumsangaben werden aus dem Schlüsselwort "Between" abgeleitet. Damit es sich aber um echt vergleichbare Daten handelt, müssen diese nach einem bestimmten Schema geparsed werden. Dieses Schema ist in der "DateTimeFormat" Annotation angegeben. Als Rückgabe liefert diese Funktion dann eine Menge aller Einträge zwischen diesen Daten.\\
Die nächste Funktion funktioniert nun ähnlich, nur dass dort über Eigenschaften mehrerer verlinkter Objekte gegangen werden kann. "findAllBy" ist wieder das selbe wie oben und zeigt an, dass eine Liste von Ergebnissen zurückgeliefert wird, aber "Account\_User\_Username" bedeutet nun folgendes: "Gehe zum Account des Records, dann zum User dieses Accounts und von diesem User dann den Username". Der gefundene Username wird dann mit dem Parameter der Funktion verglichen und die Ergebnisse entsprechend gefiltert. Weiter zeigt das "And" eine Verkettung eines weiteren Ausdrucks an. So können auch relativ komplexe Abfragen automatisch implementiert werden. Die nächste Funktion funktioniert nun ähnlich, nur dass dort über Eigenschaften mehrerer verlinkter Objekte gegangen werden kann. "findAllBy" ist wieder das selbe wie oben und zeigt an, dass eine Liste von Ergebnissen zurückgeliefert wird, aber "Account\_User\_Username" bedeutet nun folgendes: "Gehe zum Account des Records, dann zum User dieses Accounts und von diesem User dann den Username". Der gefundene Username wird dann mit dem Parameter der Funktion verglichen und die Ergebnisse entsprechend gefiltert. Weiter zeigt das "And" eine Verkettung eines weiteren Ausdrucks an. So können auch relativ komplexe Abfragen automatisch implementiert werden.\\
Reicht allerdings die obige Syntax nicht mehr aus, kann auch direkt eine Hibernate Abfrage über die "@Query" Annotation angegeben werden. Der Name der Funktion ist dann nicht mehr relevant für die Implementation, sondern nur noch für den Pfad, unter dem die Funktion später zu erreichen ist. Die Query an der "today" Funktion bietet nun die Möglichkeit, alle Einträge in der Records Tabelle für den aktuell anfragenden User zu bestimmen. Zusätzlich wird der Zeitraum noch auf den aktuellen Tag eingeschränkt, daher ergab sich auch der passende Name "today" für die Funktion. Der Nutzer wird automatisch über die "principal" Variable in der Abfrage eingefügt. Der Pricipal wird gesetzt, sobald der Authentication Filter den User erfolgreich eingeloggt hat. Weiter wird der aktuelle Tag über die Datenbankvariable "current\_date" abgefragt. Reicht allerdings die obige Syntax nicht mehr aus, kann auch direkt eine Hibernate Abfrage über die "@Query" Annotation angegeben werden. Der Name der Funktion ist dann nicht mehr relevant für die Implementation, sondern nur noch für den Pfad, unter dem die Funktion später zu erreichen ist. Die Query an der "today" Funktion bietet nun die Möglichkeit, alle Einträge in der Records Tabelle für den aktuell anfragenden User zu bestimmen. Zusätzlich wird der Zeitraum noch auf den aktuellen Tag eingeschränkt, daher ergab sich auch der passende Name "today" für die Funktion. Der Nutzer wird automatisch über die "principal" Variable in der Abfrage eingefügt. Der Pricipal wird gesetzt, sobald der Authentication Filter den User erfolgreich eingeloggt hat. Weiter wird der aktuelle Tag über die Datenbankvariable "current\_date" abgefragt.\\
Zuletzt kann auch nach Standard SQL Werten wie "null" oder "not null" gefragt werden. Zu sehen ist dies in der zuletzt dargestellten Funktion. Zuletzt kann auch nach Standard SQL Werten wie "null" oder "not null" gefragt werden. Zu sehen ist dies in der zuletzt dargestellten Funktion.\\
Die Datei ist nicht vollständig abgedruckt, sondern nur ausschnittsweise, um die Grundkonzepte zu erläutern. Die Datei ist nicht vollständig abgedruckt, sondern nur ausschnittsweise, um die Grundkonzepte zu erläutern.
\subsection{Projections} \subsection{Projections}
@ -307,9 +307,9 @@
Zuletzt gilt es noch zu erwähnen, dass alle Ressourcen Paging und Sorting unterstützen. Paging ist besonders bei Web APIs wichtig, da die Geschwindigkeit sehr stark von der Menge der übertragenen Daten abhängt. Wenn eine Ressource immer alle Daten zurückliefern würde, würde dies bei mehreren hundert Einträgen sicher noch funktionieren. Aber sobald die Zahl der Einträge deutlich höher wird, muss abgeschnitten und aufgeteilt werden. Unsere Standard Seitengröße ist auf 20 Einträge gesetzt. Weiter enthält die Antwort des Servers durch die HAL Integration immer Links zur aktuellen, nächsten und vorherigen Seite als Link. Sorting wird ebenfalls unterstützt. Es kann nach jedem Feld im zurückgegebenen JSON sortiert werden, auch die Richtung ist spezifizierbar. Zuletzt gilt es noch zu erwähnen, dass alle Ressourcen Paging und Sorting unterstützen. Paging ist besonders bei Web APIs wichtig, da die Geschwindigkeit sehr stark von der Menge der übertragenen Daten abhängt. Wenn eine Ressource immer alle Daten zurückliefern würde, würde dies bei mehreren hundert Einträgen sicher noch funktionieren. Aber sobald die Zahl der Einträge deutlich höher wird, muss abgeschnitten und aufgeteilt werden. Unsere Standard Seitengröße ist auf 20 Einträge gesetzt. Weiter enthält die Antwort des Servers durch die HAL Integration immer Links zur aktuellen, nächsten und vorherigen Seite als Link. Sorting wird ebenfalls unterstützt. Es kann nach jedem Feld im zurückgegebenen JSON sortiert werden, auch die Richtung ist spezifizierbar.
\section{Probleme und Lösungen} \section{Probleme und Lösungen}
\subsection{Einlesen in Spring} \subsection{Einlesen in Spring}
Spring ist ein sehr komplexes Framework, weshalb es manchmal wirklich sehr schwierig war, Fehler zu verstehen, und die Gründe dahinter zu verstehen. Solange man sich aber an viele der Best-Practicies von Spring hält, ist es überhaupt nicht schwer, in relativ kurzer Zeit auch sehr komplexe APIs zu bauen. Durch die enorme Menge an Dokumentation und auch Hilfe aus der Community sowie Techtalks können viele Probleme leicht gelöst werden. Spring ist ein sehr komplexes Framework, weshalb es manchmal wirklich sehr schwierig war, Fehler zu verstehen, und die Gründe dahinter zu verstehen. Solange man sich aber an viele der Best-Practices von Spring hält, ist es überhaupt nicht schwer, in relativ kurzer Zeit auch sehr komplexe APIs zu bauen. Durch die enorme Menge an Dokumentation und auch Hilfe aus der Community sowie Techtalks können viele Probleme leicht gelöst werden.
\subsection{Änderungen an den Endpoints} \subsection{Änderungen an den Endpoints}
Es mussten anfangs viele Endpoints immer wieder umdefiniert werden, da sie nicht Best-Practicies entsprochen haben oder nicht performant funktioniert haben. Dies wurde später aber immer einfacher, wenn man sich an die Denkweise einer REST-API gewöhnt hat. Auch zwei Wege Links zwischen Ressourcen waren bei uns nicht möglich, da sie zu Endlosrekursionen führten. Später wurde aber auch klar, das dies überhaupt nicht gewünscht ist. Es mussten anfangs viele Endpoints immer wieder umdefiniert werden, da sie nicht Best-Practices entsprochen haben oder nicht performant funktioniert haben. Dies wurde später aber immer einfacher, wenn man sich an die Denkweise einer REST-API gewöhnt hat. Auch zwei Wege Links zwischen Ressourcen waren bei uns nicht möglich, da sie zu Endlosrekursionen führten. Später wurde aber auch klar, das dies überhaupt nicht gewünscht ist.
\subsection{Probleme mit MariaDB} \subsection{Probleme mit MariaDB}
Zu Beginn haben wir für das Docker-Image der Datenbank den "latest"-Tag benutzt. Dies war möglich, da wir keinerlei eigene Konfiguration der Datenbank und deren Tabellen vorgenommen haben. Allerdings wurde Mitte April die neue LTS-Version von Ubuntu veröffentlicht und damit auch das Basisimage von MariaDB angepasst. Durch Änderungen in Ubuntu 20.04 funktionierten nun gewisse Datenbankfunktionen nicht mehr ordnungsgemäß. Als Lösung kam dann nur ein Downgrade auf eine ältere Version in Frage. Zu Beginn haben wir für das Docker-Image der Datenbank den "latest"-Tag benutzt. Dies war möglich, da wir keinerlei eigene Konfiguration der Datenbank und deren Tabellen vorgenommen haben. Allerdings wurde Mitte April die neue LTS-Version von Ubuntu veröffentlicht und damit auch das Basisimage von MariaDB angepasst. Durch Änderungen in Ubuntu 20.04 funktionierten nun gewisse Datenbankfunktionen nicht mehr ordnungsgemäß. Als Lösung kam dann nur ein Downgrade auf eine ältere Version in Frage.
\section{Deployment} \section{Deployment}

6
documentation/parts/einleitung.tex
View File

@ -1,8 +1,8 @@
\chapter{Einleitung} \chapter{Einleitung}
Im Rahmen der Vorlesung Ubiquitous Computing ist eine Projektarbeit mit dem Thema der Allgegenwärtigkeit von Computern vorgesehen. Im Rahmen der Vorlesung Ubiquitous Computing ist eine Projektarbeit mit dem Thema der Allgegenwärtigkeit von Computern vorgesehen.\\
Dazu fanden wir uns als Gruppe zusammen und sammelten unsere Ideen für Projektthemen. Letztendlich setzte sich der Timetracker mit Geofence gegen eine Wetterstation und eine Augmented Reality App durch. Dazu fanden wir uns als Gruppe zusammen und sammelten unsere Ideen für Projektthemen. Letztendlich setzte sich der Timetracker mit Geofence gegen eine Wetterstation und eine Augmented Reality App durch.\\
Die Idee der Timetrack-Anwendung ist, dass ein Arbeitnehmer erst dann mit der Aufzeichnung seiner Arbeitszeit beginnen kann, wenn er sich am Arbeitsort befindet. Wenn er diesen verlässt, wird seine Aufzeichnung beendet. Dabei hat er mehrere Zeitkonten zur Auswahl, auf die er seine Arbeitszeit verbuchen kann. Die Idee der Timetrack-Anwendung ist, dass ein Arbeitnehmer erst dann mit der Aufzeichnung seiner Arbeitszeit beginnen kann, wenn er sich am Arbeitsort befindet. Wenn er diesen verlässt, wird seine Aufzeichnung beendet. Dabei hat er mehrere Zeitkonten zur Auswahl, auf die er seine Arbeitszeit verbuchen kann.\\
Das Projekt ist in drei Teile unterteilt: Backend, Web-Frontend und Android-App. Entsprechend dem Aufwand arbeiteten am Web-Frontend zwei Studenten, am Backend und der Android-App jeweils ein Student. Die Android-App soll lediglich die Basisfunktionalitäten bieten, wie Starten und Stoppen der Aufzeichnung für einen gewählten Account, wenn man sich am Arbeitsort befindet, sowie log in und log out. Im Web-Frontend sollen verschiedenste Statistiken angezeigt werden, sowie Adminfunktionaltäten, um Accounts zu editieren, neue Einträge hinzufügen, Geodaten für den Arbeitnehmer setzen und Benutzer löschen. Das Backend kommuniziert mit der Datenbank, sichert die Authentifizierung der Benutzer und stellt den Oberflächen Endpoints zur Verfügung. Das Projekt ist in drei Teile unterteilt: Backend, Web-Frontend und Android-App. Entsprechend dem Aufwand arbeiteten am Web-Frontend zwei Studenten, am Backend und der Android-App jeweils ein Student. Die Android-App soll lediglich die Basisfunktionalitäten bieten, wie Starten und Stoppen der Aufzeichnung für einen gewählten Account, wenn man sich am Arbeitsort befindet, sowie log in und log out. Im Web-Frontend sollen verschiedenste Statistiken angezeigt werden, sowie Adminfunktionaltäten, um Accounts zu editieren, neue Einträge hinzufügen, Geodaten für den Arbeitnehmer setzen und Benutzer löschen. Das Backend kommuniziert mit der Datenbank, sichert die Authentifizierung der Benutzer und stellt den Oberflächen Endpoints zur Verfügung.

2
documentation/parts/entwicklungsumgebung.tex
View File

@ -32,7 +32,7 @@
\lstinputlisting[language=docker, caption=Dockerfile Backend]{../backend/Dockerfile} \lstinputlisting[language=docker, caption=Dockerfile Backend]{../backend/Dockerfile}
\lstinputlisting[language=docker, caption=Dockerfile Frontend]{../frontend/Dockerfile} \lstinputlisting[language=docker, caption=Dockerfile Frontend]{../frontend/Dockerfile}
\lstinputlisting[language=docker, caption=Dockerfile Android]{../android/Dockerfile} \lstinputlisting[language=docker, caption=Dockerfile Android, basicstyle={\footnotesize\ttfamily}]{../android/Dockerfile}
Zu erwähnen sind noch einige Besonderheiten. Da wir ein Programm entwickeln, was sich mit Zeiterfassung beschäftigt, ist es wichtig im Backend die Zeitzone des Images zu setzen, da sonst immer die UTC Zeitzone als Standard angenommen wird. Selbiges gilt auch für die SQL Datenbank, welche mit MariaDB umgesetzt ist. Zu erwähnen sind noch einige Besonderheiten. Da wir ein Programm entwickeln, was sich mit Zeiterfassung beschäftigt, ist es wichtig im Backend die Zeitzone des Images zu setzen, da sonst immer die UTC Zeitzone als Standard angenommen wird. Selbiges gilt auch für die SQL Datenbank, welche mit MariaDB umgesetzt ist.
\section{Docker-Compose} \section{Docker-Compose}

278
documentation/parts/frontend.tex
View File

@ -1,31 +1,31 @@
\chapter{Web-Frontend} \chapter{Web-Frontend}
\section{Technologiebeschreibung} \section{Technologiebeschreibung}
\subsection{Vue.js} \subsection{Vue.js}
Vue.js ist ein Javascript Framework, welches den Aufbau von Frontend Anwendungen erleichtert. Ein Hauptmerkmal hierbei ist die Kapselung der einzelnen Elemente in Komponenten, welche ihren eigenen HTML, Javascript und CSS code enthalten. Eine Komponente kann mehrere andere Komponenten einbinden, sowie diesen Daten mitgeben. Eingebundene Komponenten können an die übergeordnete Komponente Daten senden. Vue.js\footnote{\url{https://vuejs.org/}} ist ein Javascript Framework, welches den Aufbau von Frontend Anwendungen erleichtert. Ein Hauptmerkmal hierbei ist die Kapselung der einzelnen Elemente in Komponenten, welche ihren eigenen HTML, Javascript und CSS code enthalten. Eine Komponente kann mehrere andere Komponenten einbinden, sowie diesen Daten mitgeben. Eingebundene Komponenten können an die übergeordnete Komponente Daten senden.
\subsection{Vuetify} \subsection{Vuetify}
Vuetify ist ein Designframework für Vue.js, dass viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framwork ist Bootstrap. Das Designschema von Vuetify ist an Googles Material Design angelehnt. Nach Installation können die Elemente sehr einfach eingebunden und verwendet werden. Vuetify\footnote{\url{https://vuetifyjs.com/de-DE/}} ist ein Designframework für Vue.js, das viele Elemente wie Menüleisten, Buttons und Dialogfenster bereitstellt. Ein bekanntes äquivalentes Framework ist Bootstrap. Das Designschema von Vuetify ist an Googles Material Design angelehnt. Nach Installation können die Elemente sehr einfach eingebunden und verwendet werden.
\section{Farbschema und Designsprache} \section{Farbschema und Designsprache}
Wir haben uns für die, von Google entwickelte Designsprache, Material Design entschieden. Diese zeichnet sich durch ihre kartenartigen Flächen und dem Gestaltungsstil Flat Design aus. Verwendet werden auch viele Schatten um die materialistisch-physikalische Darstellung zu erzeugen.\\ Wir haben uns für die, von Google entwickelte, Designsprache "Material Design" entschieden. Diese zeichnet sich durch ihre kartenartigen Flächen und dem Gestaltungsstil Flat Design aus. Verwendet werden auch viele Schatten, um die materialistisch-physikalische Darstellung zu erzeugen.
In unserem eigens entwickelten Farbschema haben wir uns für ein dunkles Thema mit Blau als Hauptfarbe entschieden.
\begin{figure}[H]
\centering
\includegraphics[width=\linewidth/2]{img/frontend/color_sceme.png}
\caption{Farbschema}
\end{figure}
Unser Logo wurde im abgestimmten Farbschema umgesetzt und stellt die Kombination zwischen einer Stoppuhr und einem Kompass dar. So verbindet das Logo Zeit und Ort welche bei der Verwendung unseres Produkts eine wichtige Rolle spielen.
\begin{figure}[H]
\centering
\includegraphics[width=\linewidth/3]{img/frontend/logo_dark_gt.png}
\caption{Logo unserer Anwendung}
\end{figure}
In unserem eigens entwickelten Farbschema haben wir uns für ein dunkles Thema mit Blau als Hauptfarbe entschieden.
\begin{figure}[H]
\centering
\includegraphics[width=\linewidth/2]{img/frontend/color_sceme.png}
\caption{Farbschema}
\end{figure}
Unser Logo wurde im abgestimmten Farbschema umgesetzt und stellt die Kombination zwischen einer Stoppuhr und einem Kompass dar. So verbindet das Logo Zeit und Ort, welche bei der Verwendung unseres Produkts eine wichtige Rolle spielen.
\begin{figure}[H]
\centering
\includegraphics[width=\linewidth/3]{img/frontend/logo_dark_gt.png}
\caption{Logo unserer Anwendung}
\end{figure}
\section{Umsetzung} \section{Umsetzung}
\subsection{Einarbeitung} \subsection{Einarbeitung}
Zur Einarbeitung haben wir den Vue JS Crash Course von Traversy Media genutzt. Dieser ist auf Youtube zu finden: \href{https://www.youtube.com/watch?v=Wy9q22isx3U&t=3007s}{https://www.youtube.com/watch?v=Wy9q22isx3U\&t=3007s} Zur Einarbeitung haben wir den Vue JS Crash Course\footnote{\url{https://www.youtube.com/watch?v=Wy9q22isx3U}} von Traversy Media genutzt. Dieser ist kostenlos auf YouTube zu finden.
\subsection{Arbeit mit Dummy-Daten} \subsection{Arbeit mit Dummy-Daten}
Zur Erstellung der Listen und Diagramme haben wir häufig Dummy-Daten verwendet, um die Funktionalität im Frontend unabhängig vom Backend zu entwickeln. Die Dummy-Daten haben wir im jeweiligen Vue Component wie folgt angelegt. Zur Erstellung der Listen und Diagramme haben wir häufig Dummy-Daten verwendet, um die Funktionalität im Frontend unabhängig vom Backend zu entwickeln. Die Dummy-Daten haben wir im jeweiligen Vue Component wie folgt angelegt:
\begin{lstlisting}[language=JavaScript,caption=Dummy-Daten] \begin{lstlisting}[language=JavaScript,caption=Dummy-Daten]
<script> <script>
... ...
export default { export default {
@ -60,62 +60,62 @@ export default {
... ...
} }
</script> </script>
\end{lstlisting} \end{lstlisting}
Durch Verwendung der Dummy-Daten war es ebenso möglich Funktionsaufrufe zum Löschen oder Bearbeiten von Daten zu testen ohne persistente Veränderungen an den Daten auszulösen. Durch neu laden der Seite sind die Dummy-Daten wiederhergestellt. Bei der Erstellung der Diagramme waren die Dummy-Daten ebenfalls wichtig, so konnten Formatierungsfunktionen für die Zeitanzeige getestet werden. Ebenfalls konnte so die Optimale Größe und Anordnung der Diagramme bestimmt werden.\\ Durch Verwendung der Dummy-Daten war es ebenso möglich, Funktionsaufrufe zum Löschen oder Bearbeiten von Daten zu testen, ohne persistente Veränderungen an den Daten auszulösen. Durch neu laden der Seite sind die Dummy-Daten wiederhergestellt. Bei der Erstellung der Diagramme waren die Dummy-Daten ebenfalls wichtig, so konnten Formatierungsfunktionen für die Zeitanzeige getestet werden. Ebenfalls konnte so die optimale Größe und Anordnung der Diagramme bestimmt werden.\\
\\
Durch die Verwendung von Dummy-Daten war der Umstieg auf die Live Daten nicht allzu schwer. Die Dummy-Daten konnten bei Anbindung an die Datenbank reibungslos durch Live-Daten aus der Datenbank ersetzt werden. Durch die Verwendung von Dummy-Daten war der Umstieg auf die Livedaten nicht allzu schwer. Die Dummy-Daten konnten bei Anbindung an die Datenbank reibungslos durch Live-Daten aus der Datenbank ersetzt werden.
\subsection{Authentifizierung} \subsection{Authentifizierung}
Wie schon im Backend beschrieben wurde, haben wir zur Authenfizierung JSON Web Token benutzt. Beim Login wurde das Token abgeholt und in den Sessionstorage geschrieben. Wir haben uns für den Sessionstorage entschieden, weil dieser beim Schließen des Browsertabs automatisch gelöscht. Der Logout Button entfernt ebenso das Token aus dem Storage. Wie schon im Backend beschrieben wurde, haben wir zur Authenfizierung JSON Web Token benutzt. Beim Login wurde das Token abgeholt und in den Sessionstorage geschrieben. Wir haben uns für den Sessionstorage entschieden, weil dieser beim Schließen des Browsertabs automatisch gelöscht wird. Der Logout Button entfernt ebenso das Token aus dem Storage.
\subsection{Abrufen der Daten in Listen} \subsection{Abrufen der Daten in Listen}
Zum Abrufen der Daten nutzen wir XMLHttpRequests. Diese geben vom Backend ein JSON Objekt zurück. Dies ermöglicht es uns die JSON Funktionen von Java Script zu nutzen. Zum Abrufen der Daten nutzen wir XMLHttpRequests. Diese geben vom Backend ein JSON Objekt zurück. Dies ermöglicht es uns, die JSON Funktionen von Java Script zu nutzen.
\begin{lstlisting}[language=JavaScript,caption=Get Request] \begin{lstlisting}[language=JavaScript,caption=Get Request]
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
var today; var today;
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
today = JSON.parse(xhttp.responseText); today = JSON.parse(xhttp.responseText);
today = today._embedded.records; today = today._embedded.records;
} }
}; };
xhttp.open("GET", baseUri + "/records/search/today", false); xhttp.open("GET", baseUri + "/records/search/today", false);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(null); xhttp.send(null);
\end{lstlisting} \end{lstlisting}
\subsection{Ändern und Hinzufügen von Daten} \subsection{Ändern und Hinzufügen von Daten}
Zum Ändern und Hinzufügen von Daten haben wir ebenfalls XMLHTTRequests genutzt. Zum Hinzufügen wurden Post Request gesendet, zum Ändern Patch Requests. Zum Ändern und Hinzufügen von Daten haben wir ebenfalls "XMLHttpRequests" genutzt. Zum Hinzufügen wurden Post Requests gesendet, zum Ändern Patch Requests.
\begin{lstlisting}[language=JavaScript, caption=Post Request] \begin{lstlisting}[language=JavaScript, caption=Post Request]
xhttp.open("Post", baseUri + path, false); xhttp.open("Post", baseUri + path, false);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(JSONData); xhttp.send(JSONData);
\end{lstlisting} \end{lstlisting}
\begin{lstlisting}[language=JavaScript, caption=Patch Request] \begin{lstlisting}[language=JavaScript, caption=Patch Request]
xhttp.open("PATCH", baseUri + path, false); xhttp.open("PATCH", baseUri + path, false);
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send(JSONData); xhttp.send(JSONData);
\end{lstlisting} \end{lstlisting}
\subsection{Auswertung in Diagrammen} \subsection{Auswertung in Diagrammen}
Jeder Benutzer kann seine Daten in einer Übersicht zusammengefasst betrachten, hier verwenden wir folgende Diagramme: Jeder Benutzer kann seine Daten in einer Übersicht zusammengefasst betrachten, hier verwenden wir folgende Diagramme:
\begin{itemize}
\item Kreisdiagramme
\begin{itemize} \begin{itemize}
\item Verhältnis von Arbeitszeit zu Pausenzeit von allen Accounts des Benutzers. \item Kreisdiagramme
\item Verhältnis der Arbeitszeit je TimeTrack Account des Benutzers mit Angabe des Gesamtverdienstes. \begin{itemize}
\item Verhältnis des Verdienstes je TimeTrack Account des Benutzers. \item Verhältnis von Arbeitszeit zu Pausenzeit von allen Accounts des Benutzers.
\item Verhältnis der Arbeitszeit je TimeTrack Account des Benutzers mit Angabe des Gesamtverdienstes.
\item Verhältnis des Verdienstes je TimeTrack Account des Benutzers.
\end{itemize}
\item Säulendiagramme
\begin{itemize}
\item Übersicht über die Letzten 7 Tage mit Arbeits- und Pausenzeit.
\item Übersicht über die Letzten 30 Tage mit Arbeits- und Pausenzeit.
\end{itemize}
\end{itemize} \end{itemize}
\item Säulendiagramme Um Diagramme verwenden zu können, haben wir das Framework Apexcharts\footnote{\url{https://apexcharts.com/}} eingebunden, welches es ermöglicht, konfigurierbare Diagramme einzufügen.
\begin{itemize} Die Konfiguration des Säulendiagramms für die Ansicht der letzten 30 Tage ist nachfolgend dargestellt.
\item Übersicht über die Letzten 7 Tage mit Arbeits- und Pausenzeit. \begin{lstlisting}[language=JavaScript, caption=Konfiguration Säulendiagramm]
\item Übersicht über die Letzten 30 Tage mit Arbeits- und Pausenzeit.
\end{itemize}
\end{itemize}
Um Diagramme verwenden zu können haben wir das Framework Apexcharts eingebunden, welches es ermöglicht, konfigurierbare Diagramme einzufügen.
Die Konfiguration des Säulendiagramms für die Ansicht der letzten 30 Tage ist nachfolgend dargestellt.
\begin{lstlisting}[language=JavaScript, caption=Konfiguration Säulendiagramm]
<script> <script>
... ...
export default { export default {
@ -163,98 +163,94 @@ export default {
} }
}; };
}, },
\end{lstlisting} \end{lstlisting}
Für die Kreisdiagramme war es notwendig, alle Zeiteinträge abzuholen, die Zeiten zu addieren und in die Datenfelder des Diagramms zu schreiben. Bei dem Kreisdiagramm, das die Accounts darstellt, war es notwendig, die Timetrack-Accounts des Benutzers abzufragen und für jeden ein Feld der addierten Zeit anzulegen und den Lohn in einer Variablen abzulegen.
Für die Kreisdiagramme war es notwendig alle Zeiteinträge abzuholen, die Zeiten zu Addieren und in die Datenfelder des Diagramms zu schreiben. Bei dem Kreisdiagramm das die Accounts darstellt war es notwendig die TimeTrack Accounts des Benutzers abzufragen und für jeden ein Feld der addierten Zeit anzulegen und den Lohn in einer Variable abzulegen. \begin{lstlisting}[language=JavaScript, caption=Zuordnung der Zeit zu den TimeTrack Accounts]
\begin{lstlisting}[language=JavaScript, caption=Zuordnung der Zeit zu den TimeTrack Accounts] for (let index = 0; index < records.length; index++){
for (let index = 0; index < records.length; index++){ var record = records[index];
var record = records[index]; for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) { if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") { this.series[indexAccs] += record.duration;
this.series[indexAccs] += record.duration; }
} }
} }
} \end{lstlisting}
\end{lstlisting}
Ebenfalls war es notwendig eine Funktion zu erstellen, die den gesamten Lohn des jeweiligen Accounts nach den ermittelten Stunden berechnet.\\ Ebenfalls war es notwendig, eine Funktion zu erstellen, die den gesamten Lohn des jeweiligen Accounts nach den ermittelten Stunden berechnet.\\
\\
Bei den Säulendiagrammen müssen lediglich die nötigen Zeiteinträge beim zuständigen Endpoint angefragt werden. Dieser Endpoint liefert alle Einträge zwischen einem Startdatum und einem Enddatum. Hier wird immer das aktuelle Datum verwendet und die Zeitspanne entsprechend zurückgerechnet.
\\
Um riesige Anfragen zu verhindern wird Paging verwendet um die Anfragen durchzuführen, das heißt es werden so oft 50 Einträge angefragt, bis die letzte Seite erreicht ist.
Bei den Säulendiagrammen müssen lediglich die nötigen Zeiteinträge beim zuständigen Endpoint angefragt werden. Dieser Endpoint liefert alle Einträge zwischen einem Startdatum und einem Enddatum. Hier wird immer das aktuelle Datum verwendet und die Zeitspanne entsprechend zurückgerechnet.\\
Um riesige Anfragen zu verhindern wird Paging verwendet, das heißt, es werden so oft 50 Einträge angefragt, bis die letzte Seite erreicht ist.
\subsection{Administrator Funktionalitäten} \subsection{Administrator Funktionalitäten}\label{subsection:frontend:admin}
Ein Administrator hat die Möglichkeit zur vollen Nutzerverwaltung. Er kann Nutzer löschen, und bearbeiten. Als Bearbeitungsmöglichkeiten hat er die Accountverwaltung von Nutzern, das Setzen der Arbeitslocation für einen Nutzer und das Ändern des Namens. Ein Administrator hat die Möglichkeit zur vollen Nutzerverwaltung. Er kann Nutzer löschen, und bearbeiten. Als Bearbeitungsmöglichkeiten hat er die Accountverwaltung von Nutzern, das Setzen der Arbeitslocation für einen Nutzer und das Ändern des Namens.
\section{Funktionen der Website} \section{Funktionen der Website}
\subsection{Home} \subsection{Home}
Die Home Seite hat zwei Ansichten. Wenn kein User angemeldet ist, sieht man lediglich einen Wilkommensgruß und hat die Möglichkeit sich anzumelden. Wenn man angemeldet ist, sieht man seine persönlichen Informationen, die einem zugeordnete Abeitslocation, die Tagesarbeitszeit und die eigenen Accounts. Die Home Seite hat zwei Ansichten. Wenn kein User angemeldet ist, sieht man lediglich einen Wilkommensgruß und hat die Möglichkeit, sich anzumelden. Wenn man angemeldet ist, sieht man seine persönlichen Informationen, die einem zugeordnete Abeitslocation, die Tagesarbeitszeit und die eigenen Accounts.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/home.PNG} \includegraphics[width=\linewidth]{img/frontend/home.PNG}
\caption{Home eingeloggt} \caption{Home eingeloggt}
\end{figure} \end{figure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/HomeLoggedOut.PNG} \includegraphics[width=\linewidth]{img/frontend/HomeLoggedOut.PNG}
\caption{Home ausgeloggt} \caption{Home ausgeloggt}
\end{figure} \end{figure}
\subsection{Time Records} \subsection{Time Records}
Auf der Time Records Seite kann man die eigenen Arbeitszeiten einsehen. Außerdem hat man die Möglichkeit fehlerhafte Einträge zu verbessern oder zu löschen, indem man über den Stift hovert und neue Einträge zu erstellen indem man den plus Button anklickt. Auf der Time Records Seite kann man die eigenen Arbeitszeiten einsehen. Außerdem hat man die Möglichkeit, fehlerhafte Einträge zu verbessern oder zu löschen, indem man über den Stift hovert. Neue Einträge können erstellen werden, indem man den "+"-Button am Ende der Seite anklickt.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/timerecords.PNG} \includegraphics[width=\linewidth]{img/frontend/timerecords.PNG}
\caption{Time Records} \caption{Time Records}
\end{figure} \end{figure}
\subsection{Statistics} \subsection{Statistics}
Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier werden 2 verschiedene Diagrammtypen eingesetzt, um dem Benutzer eine bestmögliche Auswertung seiner Zeiteinträge zu bieten. Auf der Statistics Seite sind die Daten der Time Records übersichtlich ausgewertet. Hier werden zwei verschiedene Diagrammtypen eingesetzt, um dem Benutzer eine bestmögliche Auswertung seiner Zeiteinträge zu bieten.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/statistics_pie.PNG} \includegraphics[width=\linewidth]{img/frontend/statistics_pie.PNG}
\caption{Kreisdiagramme} \caption{Kreisdiagramme}
\end{figure} \end{figure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/statistics_column.PNG} \includegraphics[width=\linewidth]{img/frontend/statistics_column.PNG}
\caption{Säulendiagramme} \caption{Säulendiagramme}
\end{figure} \end{figure}
\subsection{Accounts} \subsection{Accounts}
Die Accouts Seite bietet einem die Möglichkeit eigene Accounts einzusehen und zu verwalten. Man kann neue Accounts hinzufügen und bestehende Accounts löschen oder anpassen. Die Accouts Seite bietet Möglichkeiten, um eigene Accounts einzusehen und zu verwalten. Es ist möglich, neue Accounts hinzuzufügen und bestehende Accounts zu löschen oder anzupassen.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/accounts.PNG} \includegraphics[width=\linewidth]{img/frontend/accounts.PNG}
\caption{Accounts} \caption{Accounts}
\end{figure} \end{figure}
\subsection{Admin} \subsection{Admin}
Die Admin Seite bietet einem die Möglichkeiten, welche in 5.3.7 beschrieben werden. Um die einzelnen Verwaltungsmöglichkeiten zu sehen, reicht es über den Stift zu hovern. Das linke Zeichen (rote Mülltonne) löscht den jeweiligen Nutzer, das mittlere (grün) Ist zum Ändern der Nutzerinformationen und der Position der Arbeitsstelle. Das rechte Zeichen (blau) führt einen zur Accountverwaltung für den jeweiligen Nutzer. Die Admin Seite bietet einem die Möglichkeiten, welche in \ref{subsection:frontend:admin} beschrieben werden. Um die einzelnen Verwaltungsmöglichkeiten zu sehen, reicht es über den Stift zu hovern. Das linke Zeichen (rote Mülltonne) löscht den jeweiligen Nutzer, das mittlere (grünes Papier mit Stift) ist zum Ändern der Nutzerinformationen und der Position der Arbeitsstelle. Das rechte Zeichen (blaue Person mit drei Strichen) führt zur Accountverwaltung für den jeweiligen Nutzer.
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth]{img/frontend/admin.PNG} \includegraphics[width=\linewidth]{img/frontend/admin.PNG}
\caption{Admin} \caption{Admin}
\end{figure} \end{figure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=\linewidth/2]{img/frontend/verwaltung.PNG} \includegraphics[width=\linewidth/2]{img/frontend/verwaltung.PNG}
\caption{Nutzer Verwaltung} \caption{Nutzer Verwaltung}
\end{figure} \end{figure}
\section{Probleme und Lösungen} \section{Probleme und Lösungen}
\subsection{Diagramme} \subsection{Diagramme}
Beim erstellen der Säulendiagramme sind wir auf den Fehler gestoßen, dass der erste Eintrag von links nicht richtig angezeigt wird. Dieser Fehler ist den Entwicklern von Apexcharts bekannt aber noch nicht behoben. Wir haben das Problem behoben indem wir die die Daten an der ersten Stelle entfernen. Dies führt zu einem kleinen Abstand, jedoch wird das Diagramm so optimal ohne fehlende Beschriftungen dargestellt. Beim Erstellen der Säulendiagramme sind wir auf den Fehler gestoßen, dass der erste Eintrag von links nicht richtig angezeigt wird. Dieser Fehler ist den Entwicklern von Apexcharts bekannt, aber noch nicht behoben. Wir haben das Problem behoben, indem wir die die Daten an der ersten Stelle entfernen. Dies führt zu einem kleinen Abstand, jedoch wird das Diagramm so optimal ohne fehlende Beschriftungen dargestellt.
\subsection{Custom Headers Chrome} \subsection{Custom Headers Chrome}
Ein weiteres unserer Probleme war, dass Chrome sich geweigert hat auf den selbst erstellten Header zuzugreifen. Dieses Problem konnten wir im Backend lösen, indem wir den Header zu den Access-Control-Expose-Headers hinzugefügt haben. Ein weiteres unserer Probleme war, dass Chrome sich geweigert hat, auf den selbst erstellten Header zuzugreifen. Dieses Problem konnten wir im Backend lösen, indem wir den Header zu den "Access-Control-Expose-Headers" hinzugefügt haben.
\begin{lstlisting}[language=Java] \begin{lstlisting}[language=Java]
res.setHeader("Access-Control-Expose-Headers", "Authorization"); res.setHeader("Access-Control-Expose-Headers", "Authorization");
\end{lstlisting} \end{lstlisting}
\subsection{Kein Patch möglich} \subsection{Kein Patch möglich}
Beim erstellen eines Patch Requests hattten wir das Problem, dass dieser verweigert wurde. Dies lag daran, dass in den standard Cors-Konfigurationen nur Get, Head und Post erlaubt sind. Da wir noch Delete und Patch brauchen, haben wir alle Methoden erlaubt. Beim Erstellen eines Patch Requests hatten wir das Problem, dass dieser verweigert wurde. Dies lag daran, dass in den Standard Cors-Konfigurationen nur Get, Head und Post erlaubt sind. Da wir noch Delete und Patch brauchen, haben wir alle Methoden erlaubt.
\begin{lstlisting}[language=Java] \begin{lstlisting}[language=Java]
final CorsConfiguration configuration = new CorsConfiguration().applyPermitDefaultValues(); final CorsConfiguration configuration = new CorsConfiguration().applyPermitDefaultValues();
configuration.addAllowedMethod("*"); configuration.addAllowedMethod("*");
\end{lstlisting} \end{lstlisting}

2
documentation/parts/titlepage.tex
View File

@ -7,7 +7,7 @@
\vspace{1cm}\\ \vspace{1cm}\\
{\scshape\LARGE Studiengang Informatik \\ Ubiquitous Computing \\ Sommersemester 2020 \par} {\scshape\LARGE Studiengang Informatik \\ Ubiquitous Computing \\ Sommersemester 2020 \par}
\vspace{2cm} \vspace{2cm}
{\Huge\bfseries GeoTime \par} {\Huge\bfseries Geo Timetracking \par}
{\LARGE Timetracking auf Standortbasis \par} {\LARGE Timetracking auf Standortbasis \par}
\vfill \vfill
{\Large \textsc{von}} {\Large \textsc{von}}

BIN
other-artifacts/Clockify-Summary-Report-20.03.2020-20.06.2020.pdf Normal file
View File

Binary file not shown.

0
presentation/Praesentation.pptx → other-artifacts/Praesentation.pptx
View File

BIN
other-artifacts/Product-Flyer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB