YOUserbase/doc/main.tex

\documentclass[a4paper]{article}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{calc}
\usepackage{enumitem}
\usepackage{titlesec}
\usepackage{xcolor}
\usepackage{graphicx}
\usepackage{svg}
\usepackage{amsmath}
\usepackage{titlepic}
\usepackage{subcaption}
\usepackage{nameref}
\usepackage{hyperref}
\usepackage{float}
\usepackage{tabularx}

\newcommand*{\figref}[2][]{%
  \hyperref[{fig:#2}]{%
    [Abbildung~\ref*{fig:#2}%
    \ifx\\#1\\%
    \else
      \,#1%
    \fi]
  }%
}


\title{YOUserbase}
\author{Kimi Löffel\\INF2021g\\Modul 322\\}
\date{\today\\v1.0.0}
\titlepic{\includesvg[width=100pt]{logo.svg}}

\begin{document}

\maketitle
\newpage
\tableofcontents
\newpage

\section{Auftraggeber}

\subsection{Information}

Als Chef von GutHib möchte ich eine Applikation haben,
die es mir ermöglicht, um intern meine Mitarbeiter zu verwalten.
Die Zielgruppe und die Kunden der Applikation
meine internen Mitarbeiter.
Dieses Produkt soll uns helfen
eine bessere Struktur und Übersicht der Mitarbeiter in unsere Firma zu bringen
und uns damit besser zu organisieren.
GutHib agiert global und ist ein Grossunternehmen.
Unser Marktanteil der globalen Git-Repositories ist 99\%.
Da wir die grösste Open-Source Plattform der Welt bieten,
möchten wir,
dass unsere verwendeten Produnkte ebenfalls Open-Source sein sollten,
so soll es auch diese Applikation sein.

\subsection{Anforderungen}

Ich möchte ein Produkt, dass mir erlaubt diverse Mitarbeiter
zu erfassen, zu bearbeiten und zu löschen.
Die Mitarbeiter sollen auch diversen Arbeitsgruppen hinzugefügt werden können.
Ich möchte auch, dass ich die Mitarbeiter nach verschiedenen
Kriterien sortieren kann. Dazu gehören Name, Vorname, Geburtsdatum, Arbeitsgruppe und
Gehalt.
Ich möchte ein eigenes für uns entwickeltes Produkt,
da dieses so garantiert Open-Source ist und ich Features benötige,
die mir so kein anderes User-management-system bietet.

\section{Thema}

\subsection{Ziele}

Ein Ziel der künftigen Nutzern soll sein,
dass sie Mitarbeiter hinzufügen, bearbeiten, ansehen und löschen können (CRUD).
Die Mitarbeiter sollen diversen Gruppen hinzugefügt werden können.
Diese Gruppen sollen ebenfalls erstellbar, bearbeitbar, löschbar und ansehbar sein (CRUD).
Ebenfalls sollen alle erfassten Mitarbeiter in einer Übersicht ersichtlich sein.
Dort soll es ebenfalls möglich sein diverse Filter anzuwenden
um so einen besseren Überblick über die Mitarbeiter und deren Gruppen/Funktionen zu bekommen.
Dies soll den Benutzern den Arbeitsablauf erleichtern
und ihnen einen klareren Überblick über die Miarbeiter geben.
Das Produkt soll für Firmen und Start-ups kreiert werden.
Im allgemeinen soll ein Open-Source Projekt entstehen,
dass als gute Grundlage für Erweiterungen verwendet werden kann.
So kann das Projekt auch von anderen Firmen verwendet
und auf ihre Anwendungsbereiche angepasst werden.

\subsection{Typischer Ablauf}

Ein typischer Ablauf eines Benutzers wird beispielsweise so aussehen.

\begin{enumerate}
    \item Öffnen der Applikation.
    \item Erfassen einer Neuen Person.
    \item Erkennen eines Fehlers einer bereits eingetragenen Person
    \item Berichtigung dieses Fehlers
    % \item Mehreren Benutzern eine Gruppe hinzufügen.
\end{enumerate}

\subsection{Zielplattform}

YOUserbase wird als Desktop-Applikation entwickelt.
Fokussiert werden hierbei MacOS Geräte.

\section{Zielgruppe}

\begin{description}
   \item[Alter] 16-65
   
        Alle die bei einer Firma arbeiten können.
   \item[Ausbildung] Grundausbildung + teilweise höhrerer Abschluss
   \item[Technisches Verständniss] ganzes Spektrum
   
       Da die Applikation Open-Source sein wird sicher viele Entwickler.
       Aber auch viele Personen ohne grosses technisches Verständniss,
           beispielsweise im HR-Bereich die die Mitarbeiter verwalten.
   \item[Geschlecht] unwichtig
   \item[Finanzielle Verhältnisse] unwichtig
   \item[Sozialer Status] unwichtig
   \item[Peergruppe] unwichtig
   \item[Wohnsituation] unwichtig
   \item[Interessen] unwichtig
\end{description}

Es sind so viele Angaben unwichtig,
da die Applikation von allen Personen,
die bei GutHib arbeiten verwendet werden kann.

\subsection{Zwei typische Benutzer}

\subsection*{Anaïs}
Anaïs stellt die Zielgruppe, der HR-Arbeitenden dar.
Sie wird die Applikation verwenden um Personen einzutragen,
sie zu Gruppen hinzuzufügen
und die Personen zu verwalten.

\begin{description}
   \item[Alter] 40
   \item[Ausbildung] Grundausbildung arbeitet im HR
   \item[Technisches Verständniss] Mittelmässiges technisches Verständniss,
       täglicher Gebrauch von Tools wie Outlook etc.
   \item[Geschlecht] weiblich
   \item[Finanzielle Verhältnisse] gut verdienend, keine finanziellen Probleme
\end{description}

\vspace{5pt}

\subsection*{Ben}

Ben stellt die Zielgruppe, der Entwickler dar.
Er wird die Applikation verwenden um zu sehen,
welcher Arbeitsgruppe er zugeteilt wurde
und sich so besser organisieren zu können.

\begin{description}
   \item[Alter] 27
   \item[Ausbildung] Master-Abschluss arbeitet in der Entwicklung von GutHib
   \item[Technisches Verständniss] Grosses technisches Verständniss,
        entwickelt Programme und benutzt täglich diverse Programme.
   \item[Geschlecht] weiblich
   \item[Finanzielle Verhältnisse] gut verdienend, keine finanziellen Probleme
\end{description}

\section{Persona}

\subsection*{Anaïs}
\vspace{10pt}

\begin{description}
   \item[Endgerät] Geschäftslaptop
   \item[Nutzungszeit] Zwischen 9:00 und 17:00 Uhr, also während der Arbeitszeiten
   \item[Nutzungsdauer] Anfangs sehr lange (mehrere Tage) um alle Mitarbeiter einzutragen,
       danach im täglichen Gebrauch nur kurze um die Arbeitsgruppen upzudaten,
       oder Mitarbeiter neu hinzuzufügen, oder zu löschen.
   \item[Zweck der Nutzung] Managen unserer Mitarbeiter
   \item[Erfahrungen mit ähnlichen Produkten] Alle hatten ein gewisses Problem,
       welches mich davon abgehalten hat,
       die Applikation schnellstmöglich zu adoptieren.
    \item[Erwartungen an dieses Produkt] Einfache Bedienung, alle nötigen Features.
    \item[Nutzungsort] Hauptsächlich im Büro, wenn ich im Home-Office bin, dann auch zuhause.
    \item[Liebglingsprogramm/applikation] Wenn ich jetzt nicht GutHib sage bin ich wahrscheinlich gefeuert,
        deshalb GutHib. Ich finde das Konzept, der GutHib-Repositories wirklich sehr spannend.
        Auch wie sie fast alles vereinfachen, Versionisierung etc.
    \item[Weshalb kann die Applikatino hilfreich sein] Ich kann so einen viel besseren Überblick
        über unsere Mitarbeiter bekommen als mit unserer Excel-Liste
    \item[Was halten Sie von Open-Source] Open-Source ist ein sehr tolles Konzept,
        das von GutHib auch sehr unterstützt wird.
\end{description}

\vspace{5pt}

\subsection*{Ben}
\vspace{10pt}

\begin{description}
   \item[Endgerät] Persönlicher Laptop
   \item[Nutzungszeit] Zwischen 18:00 und 02:00 Uhr, ich arbeite um diese Zeit
   \item[Nutzungsdauer] Täglich max. 10min
   \item[Zweck der Nutzung] Ich bin ein Entwickler bei GutHib und möchte
        so sehen können, welchen Arbeitsgruppen ich zugeteilt wurde.
   \item[Erfahrungen mit ähnlichen Produkten] Viele Konkurenzprodukte bieten nicht die Feauters,
       die ich gerne hätte.
       Teilweise auch Grundkonzepte die falsch umgesetzt wurden.
    \item[Erwartungen an dieses Produkt] Einfache Bedienung, Erweiterbarkeit für Entwickler,
        simpel aber trotzdem genügend Features.
    \item[Nutzungsort] Ich arbeite im Home-Office, deshalb zuhause.
    \item[Liebglingsprogramm/applikation] Git, ich mag das Konzept von Git,
         deshalb arbeite ich auch bei GutHib, um das Open-Source Konzept noch mehr zu stärken.
    \item[Weshalb kann die Applikatino hilfreich sein] Ich bekomme einen besseren Überblick darüber
        in welcher Arbeitsgruppe ich zugeteilt wurde und kann zu jeder Arbeitszeit mit meiner Arbeit beginnen.
    \item[Was halten Sie von Open-Source] Ich liebe Open-Source,
        man kann eigene Features zu einem bestehenden Produkt dazu entwickeln
        und das Produkt seinen persönlichen Belieben anpassen
\end{description}

\section{Anforderungen}

\subsection{Funktionale Anforderungen}

\begin{itemize}
    \item Die Applikation soll in der Lage sein User zu definieren.
    \item Die Applikation soll in der Lage sein Arbeitsgruppen zu erstellen.
    \item Die Applikation soll in der Lage sein User zu Arbeitsgruppen hinzuzufügen.
\end{itemize}

\subsection{Nicht-Funktionale Anforderungen}

\begin{itemize}
    \item Die Applikation soll so performat sein um mehrere hundert gleichzeitige Benutzer zu handlen.
    \item Die Applikation soll mehrere hundert Benutzer speichern können.
    \item Die Applikation soll für den Benutzer ansprechend aussehen.
\end{itemize}

\subsection{Priorität}

\begin{enumerate}
    \item Die Applikation soll in der Lage sein User zu definieren.

    Dies ist am wichtigsten, da dies die wichtigste Funktionalität von YOUserbase ist.
    \item Die Applikation soll in der Lage sein Arbeitsgruppen zu erstellen.

    Dieser sowie der nächste Punkt sind ebenfalls wichtig,
    da sie auch zu den Hauptfunktionen der Applikation gehören
    \item Die Applikation soll in der Lage sein User zu Arbeitsgruppen hinzuzufügen.
    \item Die Applikation soll mehrere hundert Benutzer speichern können.

    Dieser Punkt ist ebenfalls sehr wichtig.
    Da die Applikation für GutHib, mit mehreren hundert Mitarbeitern, gemacht wird, sollen diese auch speicherbar sein.
    \item Die Applikation soll so performat sein um mehrere hundert gleichzeitige Benutzer zu handlen.

    Da alle Mitarbeiter sowohl eingetragen sind als auch Benuter sind.
    Sollen sied alle gleichzeitig ihre momentane Arbeitsgruppe sehen und/oder bearbeiten können.
    \item Die Applikation soll für den Benutzer ansprechend aussehen.

    Dies ist rein kosmetisch, es ist zwar auch wichtig,
    kann aber theoretisch auch zu einem späteren Zeitpunkt noch verbessert werden.
\end{enumerate}

\section{Vorkonzepte}

\subsection{Farbkonzept}

\definecolor{color1}{HTML}{faf8fa}
\definecolor{color2}{HTML}{b6d0e9}
\definecolor{color3}{HTML}{95c4e1}
\definecolor{color4}{HTML}{8e9cc6}
\definecolor{color5}{HTML}{4b78cb}

Meine fünf Farben sind:

\begin{description}
    \item[\textcolor{color1}{\rule{.1\textwidth}{12pt}}] \#faf8fa Alabaster

    Diese Farbe habe ich gewählt, um sie als Hintegrundfarbe für die Black-on-White Designs zu verwenden.
    Sie ist nicht ein Standard \#ffffff aber auch nicht etwas zu extravagantes.
    Falls ich ein White-on-Black Design habe, dann soll dies die Schriftart werden.
    \item[\textcolor{color2}{\rule{.1\textwidth}{12pt}}] \#b6d0e9 Spindle

    Diese Farbe habe ich gewählt, um sie als helle Akzentfarbe zu verwenden.
    Sie stellt einen leichten Kontrast zu jeder anderen Farbe in meiner Farbpalette dar.
    \item[\textcolor{color3}{\rule{.1\textwidth}{12pt}}] \#96c4e1 Morning glory

    Diese Farbe soll meine \emph{Eye-catching} Farbe werden.
    Mein ganzes Layout soll etwas um diese Farbe herumgebaut werden.
    Das Logo und alle wichtigen Elemente werden alle diese Farbe besitzen
    \item[\textcolor{color4}{\rule{.1\textwidth}{12pt}}] \#8e9cc6 Polo blue

    Diese Farbe ist im Gegenteil zu \emph{Morning Glory} eine dunkle Akzentfarbe.
    Sie wird nur punktuell eingesetzt.
    \item[\textcolor{color5}{\rule{.1\textwidth}{12pt}}] \#4b78cb Indigo

    Für die dunklen Designs werde ich diese Farbe verwenden.
    Ebenfalls wird dies höchstwahrscheinlich meine Schriftfarbe für die weissen Designs
\end{description}

\subsection{Schriftarten}

Ich habe mich für folgende Schriftarten entschieden:

\begin{figure}[htb]
    \centering
    \includegraphics[width=\textwidth/2]{allianceNo1.png}
    \caption{Font Alliance No. 1}
    \label{fig:allianceNo1}
    \vspace{5pt}
    \includegraphics[width=\textwidth/2]{blimone.png}
    \caption{Font Blimone}
    \label{fig:blimone}
\end{figure}

Die Alliance-Schriftart soll die Haupttextart werden.
Blimnone soll für die Titel verwendet werden.

Ich habe mich für eine Sans-Serif Schriftart entschieden,
da diese für alle Personen verständlich und einfach zu lesen ist.
Da ich keine grossen Blocktexte haben werde, sind die Serifen nur ablenkend und helfen dem Benutzer nicht.
Die Schriftart ist etwas moderner,
da das Design einen modernen Eindruck machen soll.

\subsection{Logo}

\begin{figure}[htb]
  \centering
  \includesvg[width=100pt]{logo.svg}
  \caption{Logo für YOUserbase}
\end{figure}

Ich habe dieses Logo selbst gemacht.

Wie man erkennen kann, ist das Logo aus zwei Icons gestaltet.
Zum einen ist das Icon der Datenbank zu erkennen.
Da der Name YOUserbase aus den Worten \emph{You}, \emph{User} und \emph{Database}
zusammengesetzt ist, steht das Datenbank-Icon für die \emph{Database}.
Zum anderen ist das Icon eines Profils eingebaut.
Dieses steht für die Worte \emph{You} und \emph{User} da es sowohl \emph{dich} wie auch
einen unspezifizierten User darstellen kann.
Die Icons habe ich vom Material-Design übernommen und etwas abgeändert (Ränder kleiner gemacht etc.).
Ich habe das Material-Design gewählt, weil es mir sehr gefällt und ich es auch sehr modern finde,
was meine Webseite wiederspiegeln soll.

\section{Mocking}

Die Mockups sind im Anhang zu finden. Sie sind keine Prototypen sondern nur \emph{Sketches}.
Sie zeigen wo die Elemente hinkommen, aber nicht wie genau die einzelnen Elemente aussehen sollen.
Dies wird dem Entwickler überlassen,
die einzelnen Elemente (z.B. Buttons, Tabellen etc.),
sollen aber wiedererkennbar sein und wiederverwendet werden.

In den User-Stories wird jeweils auf die jeweilige Abbildung mit der Nummer referenziert.
Diese sollte Klickbar sein, damit man zum dazugehörigen Bild kommen kann.

\section{User Stories}

\subsection{User Story 1}

Anaïs möchte als HR-Arbeitende 
eine Einsicht in die bereits vorhandenden Gruppen haben
und neue hinzufügen können um ihr dabei zu helfen
die Arbeitsgruppen zu verwalten.

\subsection*{Ablauf}

Der erste Schritt ist, dass Anaïs sich einloggen muss. \figref{login}
Sie klickt auf \emph{LOGIN}

Als zweites sieht Anaïs die Übersicht der bereits eingetragenen Mitarbeitern. \figref{overview-workgroups}
Sie klickt auf \emph{CREATE}.

Zum Schluss wird die Eingabemaske um eine Gruppe hinzuzufügen angezeigt. \figref{new-workgroup}
Nach einem Klick auf \emph{Erstellen} wird die Arbeitgruppe hinzugefügt.

\subsection{User Story 2}

Anaïs möchte als HR-Arbeitende
Personen hinzufügen können um alle Mitarbeitenden in YOUserbase abzubilden.

\subsection*{Ablauf}

Der erste Schritt ist, dass Anaïs sich einloggen muss. \figref{login}
Sie klickt auf \emph{LOGIN}

Als zweites sieht Anaïs die Übersicht der bereits eingetragenen Mitarbeitern. \figref{overview-persons}
Sie klickt auf \emph{CREATE}.

Zum Schluss wird die Eingabemaske um einen Mitarbeitr hinzuzufügen angezeigt. \figref{new-person}
Nach einem Klick auf \emph{Erstellen} wird die Arbeitgruppe hinzugefügt.

\subsection{User Story 3}

Ben möchte als Mitarbeiter
sehen können, welcher Arbeitsgruppe er zugeteilt wurde,
um sich so besser organisieren zu können.

\subsection*{Ablauf}

Der erste Schritt ist, dass Ben sich einloggen muss. \figref{login}
Er klickt auf \emph{LOGIN}

Danach gelangt er auf seine Startseite. \figref{overview-personal}

\section{Anhang}

\begin{figure}[H]
    \centering
    \includesvg[width=\textwidth]{YOUserbase Login.svg}
    \caption{YOUserbase Login}
    \label{fig:login}
\end{figure}

\begin{figure}
    \centering
    \includesvg[width=\textwidth]{YOUserbase Group Overview.svg}
    \caption{Übersicht über die Arbeitsgruppen}
    \label{fig:overview-workgroups}
\end{figure}

\begin{figure}
    \centering
    \includesvg[width=\textwidth]{YOUserbase General Overview.svg}
    \caption{Übersicht über die Mitarbeiter}
    \label{fig:overview-persons}
\end{figure}

\begin{figure}
    \centering
    \includesvg[width=\textwidth]{YOUserbase New Group.svg}
    \caption{Neue Arbeitsgruppe erstellen}
    \label{fig:new-workgroup}
\end{figure}

\begin{figure}
    \centering
    \includesvg[width=\textwidth]{YOUserbase New Person.svg}
    \caption{Neue Person erstellen}
    \label{fig:new-person}
\end{figure}

\begin{figure}
    \centering
    \includesvg[width=\textwidth]{YOUserbase Personal Overview.svg}
    \caption{Persönliche Übersicht}
    \label{fig:overview-personal}
\end{figure}

\end{document}