Initial commitHEADmain

13 files changed, 561 insertions, 0 deletions

diff --git a/21-implementierungsheft-kolloquium/slides/changes.tex b/21-implementierungsheft-kolloquium/slides/changes.tex
new file mode 100644
index 0000000..692c6ce
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/changes.tex
@@ -0,0 +1,84 @@
+\begin{frame}{Änderungen zum Entwurf}
+
+\vspace{-.4cm}
+\begin{orangeblock}{Kompatibilität}
+    \begin{minipage}{1.7cm}
+        \centering
+        \fontsize{23pt}{0pt} 
+        \selectfont 
+        \textcolor{orange}
+        \faPlug
+    \end{minipage}
+    \hspace{-.5cm}
+    \begin{minipage}{.7\textwidth}
+        \begin{itemize}
+            \item Benutzernamen und E-Mail-Adresse speichern
+            \item Device API
+        \end{itemize}
+    \end{minipage}
+\end{orangeblock}
+
+\begin{greenblock}{E-Mail-Verifizierung}
+    \begin{minipage}{1.7cm}
+        \centering
+        \fontsize{23pt}{0pt} 
+        \selectfont 
+        \textcolor{kit-green}
+        \faUserCheck
+    \end{minipage}
+    \hspace{-.5cm}
+    \begin{minipage}{.7\textwidth}
+        \begin{itemize}
+            \item Neuer Endpunkt zur Verifizierung der E-Mail-Adresse
+            \item Anmelden nur mit bestätigter E-Mail-Adresse
+        \end{itemize}
+    \end{minipage}
+\end{greenblock}
+
+\begin{blueblock}{RSS Parser}
+    \begin{minipage}{1.7cm}
+        \centering
+        \fontsize{23pt}{0pt} 
+        \selectfont 
+        \textcolor{kit-blue}
+        \faRssSquare
+    \end{minipage}
+    \hspace{-.5cm}
+    \begin{minipage}{.7\textwidth}
+        \begin{itemize}
+            \item Asynchroner RSS Parser nach \enquote{Fire and Forget} Prinzip
+            \item Speichern/Löschen über Referenzen in DAO-Schicht
+        \end{itemize}
+    \end{minipage}
+\end{blueblock}
+
+\begin{redblock}{Datenzugriffsschicht}
+    \begin{minipage}{1.7cm}
+        \centering
+        \fontsize{23pt}{0pt} 
+        \selectfont 
+        \textcolor{kit-red}
+        \faDatabase
+    \end{minipage}
+    \hspace{-.5cm}
+    \begin{minipage}{.7\textwidth}
+        \begin{itemize}
+            \item \sout{DAO-Implementierungen} (JPA-Repository)
+        \end{itemize}
+    \end{minipage}
+\end{redblock}
+
+%
+%	Original
+%
+%\begin{itemize}
+%	\item Kompatibilität mit Podcatchern \begin{itemize}
+%		\item Speicherung von Benutzernamen und E-Mail-Adressen
+%		\item Device API
+%	\end{itemize}
+%	\item Verifizierung der E-Mail-Adresse
+%	\item RSSParser
+%	\item Reduzierte Datenzugriffsschicht
+%\end{itemize}
+
+\end{frame}
diff --git a/21-implementierungsheft-kolloquium/slides/classdiagram.tex b/21-implementierungsheft-kolloquium/slides/classdiagram.tex
new file mode 100644
index 0000000..3186a53
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/classdiagram.tex
@@ -0,0 +1,36 @@
+\begin{frame}[t]{Einführung}
+    \centering
+    \includegraphics[width=\textwidth]{assets/diagrams/classdiagram}
+\end{frame}
+
+% sub
+% episode
+% auth
+% model
+% util
+
+\begin{frame}[t]{Subscriptions-API}
+    \centering
+    \includegraphics[width=\textwidth]{assets/diagrams/classdiagram-subscriptions}
+\end{frame}
+
+\begin{frame}[t]{EpisodeActions-API}
+    \centering
+    \includegraphics[width=\textwidth]{assets/diagrams/classdiagram-episode-actions}
+\end{frame}
+
+\begin{frame}[t]{Authentication-API}
+    \centering
+    \includegraphics[width=.75\textwidth]{assets/diagrams/classdiagram-authentication}
+\end{frame}
+
+\begin{frame}[t]{Model-Paket}
+    \centering
+    \includegraphics[width=\textwidth]{assets/diagrams/classdiagram-model}
+\end{frame}
+
+\begin{frame}[t]{Util-Paket}
+    \centering
+    \includegraphics[width=\textwidth]{assets/diagrams/classdiagram-util}
+\end{frame}
+
diff --git a/21-implementierungsheft-kolloquium/slides/components.tex b/21-implementierungsheft-kolloquium/slides/components.tex
new file mode 100644
index 0000000..5a6afe6
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/components.tex
@@ -0,0 +1,7 @@
+\begin{frame}[t]{Komponenten Backend}
+
+    \begin{figure}[h]
+        \includegraphics[width=0.7\textwidth]{assets/diagrams/backendComponentDiagram}
+       \end{figure}
+
+\end{frame}
\ No newline at end of file
diff --git a/21-implementierungsheft-kolloquium/slides/difficulties.tex b/21-implementierungsheft-kolloquium/slides/difficulties.tex
new file mode 100644
index 0000000..d3e64dd
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/difficulties.tex
@@ -0,0 +1,34 @@
+\begin{frame}{Schwierigkeiten}
+
+    \begin{columns}[t]
+
+        \begin{column}{.5\textwidth}
+            \centering{\fontsize{30pt}{36pt}\selectfont\faDesktop}
+            \vspace{.2cm}
+            \begin{blueblock}{Dashboard}
+                \begin{itemize}
+                    \item CORS Einschränkung
+                    \item Error-Handling
+                    \item Kommunikation zwischen Komponenten
+                \end{itemize}
+            \end{blueblock}
+        \end{column}
+
+        \begin{column}{.5\textwidth}
+            \centering{\fontsize{30pt}{36pt}\selectfont\faServer}
+            \vspace{.2cm}
+            \begin{orangeblock}{Server}
+                \begin{itemize}
+                    \item Authentifizierung
+                    \item API
+                    \item EpisodeActionService (AntennaPod)
+                \end{itemize}
+            \end{orangeblock}
+        \end{column}
+        
+    
+    \end{columns}
+
+    
+\end{frame}
+
diff --git a/21-implementierungsheft-kolloquium/slides/einführung.tex b/21-implementierungsheft-kolloquium/slides/einführung.tex
new file mode 100644
index 0000000..d818cd3
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/einführung.tex
@@ -0,0 +1,40 @@
+\begin{frame}[t]{Einführung}
+
+
+    \begin{columns}[t]
+        \begin{column}{.3\textwidth}
+        \centering{\fontsize{30pt}{36pt}\selectfont\faPodcast}
+        \vspace{.2cm}
+        \begin{block}{Podcast}
+        \begin{itemize}
+            \item RSS-Feed
+            \item Episoden
+            \item Audio/Video
+        \end{itemize}
+        \end{block}
+        \end{column}
+        \begin{column}{.3\textwidth}
+        \centering{\fontsize{30pt}{36pt}\selectfont\faArrowCircleDown}
+        \vspace{.2cm}
+        \begin{block}{Podcatcher}
+        \begin{itemize}
+            \item lokale Verwaltung von Podcasts
+            \item API Unterstützung
+            \item Abspielen von Episoden
+        \end{itemize}
+        \end{block}
+        \end{column}
+        \begin{column}{.3\textwidth}
+        \centering{\fontsize{30pt}{36pt}\selectfont\faSync}
+        \vspace{.2cm}
+        \begin{block}{Synchronisationsserver}
+        \begin{itemize}
+            \item Hörfortschritte
+            \item Abonnements
+            \item Discovery
+        \end{itemize}
+        \end{block}
+        \end{column}
+        \end{columns}
+
+\end{frame}
\ No newline at end of file
diff --git a/21-implementierungsheft-kolloquium/slides/features.tex b/21-implementierungsheft-kolloquium/slides/features.tex
new file mode 100644
index 0000000..6ec435b
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/features.tex
@@ -0,0 +1,37 @@
+\begin{frame}{Features}
+\begin{columns}[t]
+\begin{column}{.3\textwidth}
+\centering{\fontsize{30pt}{36pt}\selectfont\faSync}
+\vspace{.2cm}
+\begin{block}{Synchronisation}
+\begin{itemize}
+    \item Abos
+    \item Hörfortschritt
+\end{itemize}
+\end{block}
+\end{column}
+\begin{column}{.3\textwidth}
+\centering{\fontsize{30pt}{36pt}\selectfont\faGlobe}
+\vspace{.2cm}
+\begin{block}{Weboberfläche}
+\begin{itemize}
+    \item Aboliste
+    \item Zuletzt gehört
+\end{itemize}
+\end{block}
+\end{column}
+\begin{column}{.3\textwidth}
+\centering{\fontsize{30pt}{36pt}\selectfont\faUser}
+\vspace{.2cm}
+\begin{block}{Account-Verwaltung}
+\begin{itemize}
+    \item Registrieren und Anmelden
+    \item Passwort ändern und zurücksetzen
+    \item Account löschen
+    \item Daten importieren/exportieren
+\end{itemize}
+\end{block}
+\end{column}
+\end{columns}
+\end{frame}
+
diff --git a/21-implementierungsheft-kolloquium/slides/gantt.tex b/21-implementierungsheft-kolloquium/slides/gantt.tex
new file mode 100644
index 0000000..31ed9b9
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/gantt.tex
@@ -0,0 +1,11 @@
+\begin{frame}{Geplanter Zeitplan}
+
+\includegraphics[width=\textwidth]{assets/gantt-plan.eps}
+
+\end{frame}
+\begin{frame}{Tatsächlicher Zeitplan}
+
+\includegraphics[width=\textwidth]{assets/gantt-reality.eps}
+
+\end{frame}
+
diff --git a/21-implementierungsheft-kolloquium/slides/integrationstrategie.tex b/21-implementierungsheft-kolloquium/slides/integrationstrategie.tex
new file mode 100644
index 0000000..0564b5f
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/integrationstrategie.tex
@@ -0,0 +1,82 @@
+\begin{frame}{Integrationsstrategie}
+
+\vspace{-.5cm}
+\begin{minipage}[t]{.47\textwidth}
+    \begin{orangeblock}{Top-Down}
+        \begin{minipage}{1.6cm}
+            \centering
+            \vspace{.15cm}
+            \fontsize{30pt}{36pt}
+            \selectfont
+            \faSortAmountDown
+            \vspace{.2cm}
+        \end{minipage}
+        \hspace{-.5cm}
+        \begin{minipage}{\textwidth - 1.4cm}
+        \begin{itemize}
+            \item Schnelle anschauliche Ergebnisse
+            \item Integration von Dashboard aus zum Server
+            \item spätes Zusammenspiel mit Backend
+            \item Aufwendige/Schwere Tests
+        \end{itemize}
+        \end{minipage}
+    \end{orangeblock}
+\end{minipage}
+\hfill
+\begin{minipage}[t]{.47\textwidth}
+    \begin{greenblock}{Bottom-Up}
+        \begin{minipage}{1.6cm}
+            \centering
+            \vspace{.2cm}
+            \fontsize{30pt}{36pt}
+            \selectfont
+            {\faSortAmountUp*}
+            \vspace{.25cm}
+        \end{minipage}
+        \hspace{-.5cm}
+        \begin{minipage}{\textwidth - 1.4cm}
+        \begin{itemize}
+            \item Integration von Datenbank aus zum Dashboard
+            \item viele einfache Tests sind erforderlich
+            \item spätes Zusammenspiel mit Frontend
+        \end{itemize}
+        \end{minipage}
+    \end{greenblock}
+\end{minipage}
+\vspace{.3cm}
+
+\begin{blueblock}{Outside-In}
+    \begin{minipage}{2cm}
+        \centering
+        \vspace{.2cm}
+        \fontsize{30pt}{36pt}
+        \selectfont
+        \faCompressArrows*
+        \vspace{.3cm}
+    \end{minipage}
+    \hspace{-.5cm}
+    \begin{minipage}{\textwidth - 2cm}
+    \begin{itemize}
+        \item Vereinigt Vorteile von Bottom-Up und Top-Down
+        \item Implementierung von Dashboard und Server gleichzeitig
+        \item Schnelle Tests + anschauliche Ergebnisse
+         \item Gut Parallelisierbar auf ganze Team
+    \end{itemize}
+    \end{minipage}
+\end{blueblock}
+
+% \begin{greenblock}{Outside-In Prinzip}
+%         \begin{itemize}
+%             \item Eine Kombination aus dem Bottom-Up und Top-Down Prinzip
+%             \item Beginnt gleichzeitig auf höchster und niedrigster Logischer Ebene
+%             \item Schrittweise Integration aus beiden Richtungen
+%             \begin{itemize}
+%                 \item Model und Datenbank
+%                 \item Controller und Frontend
+%             \end{itemize}
+%             \item Frühzeitiges testen der Endpunkte und Unit Tests
+%             \item Gut Parallelisierbar auf ganze Team
+%         \end{itemize}
+% \end{greenblock}
+
+\end{frame}
diff --git a/21-implementierungsheft-kolloquium/slides/pattern.tex b/21-implementierungsheft-kolloquium/slides/pattern.tex
new file mode 100644
index 0000000..141954b
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/pattern.tex
@@ -0,0 +1,12 @@
+\begin{frame}{Entwurfsmuster}
+	\begin{columns}
+		\column{.5\textwidth}
+		\begin{greenblock}{Dependency Injection}
+			Standard (\texttt{block})
+        \end{greenblock}
+		\column{.5\textwidth}
+		\begin{blueblock}{Data Access Object (DAO)}
+			= \texttt{exampleblock}
+        \end{blueblock}
+	\end{columns}
+\end{frame}
\ No newline at end of file
diff --git a/21-implementierungsheft-kolloquium/slides/requirements.tex b/21-implementierungsheft-kolloquium/slides/requirements.tex
new file mode 100644
index 0000000..e660bb9
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/requirements.tex
@@ -0,0 +1,58 @@
+\begin{frame}{Muss-Kriterien}
+\rowcolors{1}{kit-orange60}{kit-orange30}
+\begin{tabular}{ >{\bfseries}l l l}
+    \rowcolor{kit-orange}
+    Bezeichner                  & Zusammenfassung                                                           & Implementiert\\\hline
+    \textlangle RM1 \textrangle & Registrierung, Bestätigung und Anmeldung eines Accounts über das Frontend & Ja\\
+    \textlangle RM2 \textrangle & Speichern von Abonnements und Episoden auf dem Server                     & Ja\\
+    \textlangle RM3 \textrangle & Synchronisierung zwischen Podcatchern                                     & Ja\\
+    \textlangle RM4 \textrangle & Eine Weboberfläche                                                        & Ja\\
+    \textlangle RM5 \textrangle & Möglichkeit das eigene Passwort zu ändern / zurückzusetzen                & Ja\\
+    \textlangle RM6 \textrangle & Abonnementliste in der Weboberfläche                                      & Ja\\
+    \textlangle RM7 \textrangle & 50 Anfragen / Sekunde bearbeiten                                          & Zu testen\\
+    \textlangle RM8 \textrangle & Primäre Auslegung des Webfrontends für Desktop-Nutzer                     & Ja\\
+    \textlangle RM9 \textrangle & Unterstützung der gpodder.net RESTful-API                                 & Ja\\
+    \textlangle RM10\textrangle & Das Nutzen einer Datenbank zur Speicherung von Daten                      & Ja\\
+    \textlangle RM11\textrangle & Erweiterte API für Kommunikation zwischen Front- und Backend              & Ja
+\end{tabular}
+\end{frame}
+
+\begin{frame}{Soll-Kriterien}
+\rowcolors{1}{kit-green60}{kit-green30}
+\begin{tabular}{ >{\bfseries}l l l}
+    \rowcolor{kit-green}
+    Bezeichner                  & Zusammenfassung                                                          & Implementiert\\\hline
+    \textlangle RS1 \textrangle & Eine Anleitung (Platzhalter)                                             & Ja\\
+    \textlangle RS2 \textrangle & Die Möglichkeit einen Account zu löschen                                 & Ja\\
+    \textlangle RS3 \textrangle & Spring für das Backend und MariaDB als Datenbank                         & Ja\\
+    \textlangle RS4 \textrangle & Vue.js und Bootstrap für das Frontend                                    & Ja\\
+    \textlangle RS5 \textrangle & npm und vite für das Frontend                                            & Ja\\
+    \textlangle RS6 \textrangle & Eine Single-Page-Application als Frontend mit dynamischer Aktualisierung & Ja\\
+    \textlangle RS7 \textrangle & Ein RSS-Parser um Daten aus einem RSS-Feed zu lesen                      & Ja\\
+    \textlangle RS8 \textrangle & Mindestanforderungen an ein Passwort                                     & Ja\\
+    \textlangle RS9 \textrangle & Salting und Hashing für Verschlüsselung der Personenbezogenen Daten      & Ja\\
+    \textlangle RS10\textrangle & Nutzer bleibt über JWT angemeldet und authentifiziert                    & Ja
+\end{tabular}
+\end{frame}
+
+\begin{frame}{Kann-Kriterien}
+
+\rowcolors{1}{kit-blue60}{kit-blue30}
+\begin{tabular}{ >{\bfseries}l l l }
+    \rowcolor{kit-blue}
+    Bezeichner                  & Zusammenfassung                                                      & Implementiert\\\hline
+    \textlangle RC1 \textrangle & Abonnierten Podcast in Weboberfläche über Link teilen und hinzufügen & Ja\\
+    \textlangle RC2 \textrangle & Abonnements in Weboberfläche deabonnieren                            & Nein\\
+    \textlangle RC3 \textrangle & Importieren und Exportieren aller benutzerbezogenen Daten            & Ja\\
+    \textlangle RC4 \textrangle & Umsiedeln von anderen Gpodder-Plattformen                            & Ja\\
+    \textlangle RC5 \textrangle & Kompatible Weboberfläche für beliebige gpodder.net APIs              & Entfernt\\
+    \textlangle RC6 \textrangle & Responsive designte Weboberfläche                                    & Ja\\
+    \textlangle RC7 \textrangle & Administratorkonten mit privilegierten Funktionen                    & Nein\\
+    \textlangle RC8 \textrangle & OAuth 2.0 im Webfrontend                                             & Nein\\
+    \textlangle RC9 \textrangle & Bei Ausfall des Backends im Frontend angemeldet bleiben              & Ja\\
+    \textlangle RC10\textrangle & Mehrsprachige Weboberfläche                                          & Ja\\
+    \textlangle RC11\textrangle & Erfüllung der DSGVO                                                  & Teils\\
+    \textlangle RC12\textrangle & Docker für einfaches Deployment und Sicherheit                       & Ja 
+\end{tabular}
+\end{frame}
+
diff --git a/21-implementierungsheft-kolloquium/slides/statistics.tex b/21-implementierungsheft-kolloquium/slides/statistics.tex
new file mode 100644
index 0000000..ed9b143
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/statistics.tex
@@ -0,0 +1,85 @@
+\begin{frame}{Statistiken}
+
+\begin{columns}[t]
+    \begin{column}{.4\textwidth}
+        \begin{orangeblock}{Dashboard}
+            \centering
+            \begin{minipage}{.2\textwidth}
+                \centering
+                \vspace{.15cm}
+                \fontsize{30pt}{36pt}
+                \selectfont
+                \faDesktop
+                \vspace{.2cm}
+            \end{minipage}
+            \begin{tabular}{l l}
+                \textbf{SLOC}  & 2020 Zeilen \\
+                \textbf{Commits} & 191 \\ 
+                \textbf{Dateien} & 38
+            \end{tabular}
+        \end{orangeblock}
+    \end{column}
+
+    \begin{column}{.4\textwidth}
+        \begin{greenblock}{Server}
+            \centering
+            \begin{minipage}{.2\textwidth}
+                \centering
+                \vspace{.2cm}
+                \fontsize{30pt}{36pt}
+                \selectfont
+                \faServer
+                \vspace{.25cm}
+            \end{minipage}
+            \begin{tabular}{l l}
+                \textbf{SLOC}  & 3812 Zeilen \\
+                \textbf{Commits} & 305 \\ 
+                \textbf{Dateien} & 60
+            \end{tabular}
+        \end{greenblock}
+    \end{column}
+\end{columns}
+\vspace{.3cm}
+
+\centering
+\begin{minipage}{.9\textwidth}
+    \begin{blueblock}{Insgesamt}
+        \centering
+        \begin{minipage}{.5\textwidth}
+            \centering
+            \begin{minipage}{.2\textwidth}
+                \centering
+                \vspace{.2cm}
+                \fontsize{30pt}{36pt}
+                \selectfont
+                \faChartLine
+                \vspace{.3cm}
+            \end{minipage}
+            \begin{tabular}{l l}
+                \textbf{SLOC}  & 5832 Zeilen \\
+                \textbf{Commits} & 486 \\ 
+                \textbf{Dateien} & 98
+            \end{tabular}
+
+        \end{minipage}
+    \end{blueblock}
+    \small SLOC und Anzahl der Dateien würden basierend der Inhalte des
+    Quellordners \texttt{src/} berechnet und beinhalten keine automatisch
+    generierten Dateien. 
+\end{minipage}
+\end{frame}
+
+\begin{frame}{Zeitlicher Verlauf der Commits}
+    \textbf{Dashboard}
+    \includegraphics[width=\textwidth]{assets/commits-dashboard.png}
+    \textbf{Server}
+    \includegraphics[width=\textwidth]{assets/commits-server.png}
+\end{frame}
+
+\begin{frame}{Commit-Verteilung Server}
+    \includegraphics[width=\textwidth]{assets/contributors-server.png}
+\end{frame}
+
+\begin{frame}{Commit-Verteilung Dashboard}
+    \includegraphics[width=\textwidth]{assets/contributors-dashboard.png}
+\end{frame}
diff --git a/21-implementierungsheft-kolloquium/slides/synchronisation.tex b/21-implementierungsheft-kolloquium/slides/synchronisation.tex
new file mode 100644
index 0000000..0849279
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/synchronisation.tex
@@ -0,0 +1,36 @@
+\begin{frame}{Synchronisation}
+
+    \tikzstyle{line} = [draw, -latex']
+
+    \begin{figure}[H]
+
+        \begin{tikzpicture}
+            
+            \tikzset{focus/.style={rectangle, minimum width = 1cm, minimum height = 0.5cm, rounded corners, draw}};
+            \tikzset{hyperfocus/.style={rectangle, minimum width = 1cm, minimum height = 0.5cm, draw}};
+
+            \node[hyperfocus, text width = 2.6cm, fill = green!25](s){Synchronisations-\\\quad \quad Server};
+            \node[focus, left = 3cm of s, text width = 3.1cm, orange](p1){\quad \underline{p1:Podcatcher}
+                \begin{itemize}
+                    \vspace{0.2cm}
+                    \item Abonnements
+                    \item Hörfortschritt
+                    \vspace{0.1cm}
+                \end{itemize}};
+            \node[focus, above = 1.8cm of s, orange](p2){p2};
+            \node[focus, right = 2.5cm of s, orange](p3){p3};
+            \node[below = 1.7cm of s](p4){\textbf{...}};
+            \umlactor[left = 2.7cm of p2, blue!60]{Benutzer};
+            
+            \draw[] (p1) -- (s);
+            \draw[] (p2) -- (s);
+            \draw[] (s) -- (p3);
+            \draw[] (s) -- (p4);
+            \path [line, thick, blue!60] (Benutzer) -- node [text width=2.5cm, midway, above=0.1cm, align=center] {Podcast abonnieren} (p2);
+            \path [line, thick, blue!60] (Benutzer) -| node [text width=2.5cm, midway, above=0.1cm, align=center] {Episode anhören} (p1);
+
+        \end{tikzpicture}
+
+    \end{figure}
+
+\end{frame}
\ No newline at end of file
diff --git a/21-implementierungsheft-kolloquium/slides/zielsetzung.tex b/21-implementierungsheft-kolloquium/slides/zielsetzung.tex
new file mode 100644
index 0000000..84e1064
--- /dev/null
+++ b/21-implementierungsheft-kolloquium/slides/zielsetzung.tex
@@ -0,0 +1,39 @@
+\begin{frame}{Zielsetzung}
+
+\begin{figure}[H]
+
+\raggedright
+
+\begin{tikzpicture}
+
+\tikzset{focus/.style={rectangle, minimum width=1cm, minimum height=0.5cm, rounded corners=7pt, draw}};
+
+\tikzset{hyperfocus/.style={rectangle, minimum width=1cm, minimum height=0.5cm, draw}};
+
+\node[hyperfocus] (main) {gPodder};
+\node[focus, right = 2cm of main] (sync) {Synchronisation};
+\node[above = of sync] (share) {Inhalt teilen};
+\node[above = 0.5cm of share] (discover) {Podcasts entdecken};
+\node[text width = 3cm, below = of sync] (create) {Listen erstellen und teilen};
+\node[text width = 3cm, below = 0.5cm of create] (popular) {Publisher:\\ Was ist beliebt?};
+
+\node[hyperfocus, right = 3cm of sync, text width = 4cm] (PSE) {\underline{PSE\textsuperscript{2}}\begin{itemize}
+	\item Schlankes Design
+	\item Effizient
+	\item Intuitiv	
+\end{itemize}
+};
+
+\draw[] (main) -- (sync);
+\draw[] (main) -- (share);
+\draw[] (main) |- (discover);
+\draw[] (main) -- (create);
+\draw[] (main) |- (popular);
+\draw[stealth-, thick]  (sync.east) -- ($(PSE.north west) + (0, -0.3)$);
+
+
+\end{tikzpicture}
+
+\end{figure}
+
+\end{frame}
\ No newline at end of file