diff options
Diffstat (limited to '31-qualitaetsheft-kolloquium/slides')
18 files changed, 999 insertions, 0 deletions
diff --git a/31-qualitaetsheft-kolloquium/slides/changes.tex b/31-qualitaetsheft-kolloquium/slides/changes.tex new file mode 100644 index 0000000..e90113a --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/changes.tex @@ -0,0 +1,146 @@ +\begin{frame}{Änderungen zur Implementierung} + +%\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} + +% +% Konzept +% +%\begin{itemize} +% \item Neu erfüllte Kriterien \begin{itemize} +% \item 50 Anfragen / Sekunde (bedingt) +% \item Abonnements in Weboberfläche deabonnieren +% \end{itemize} +% \item Aussagekräftige Benachrichtigungen im Frontend +%\end{itemize} + +\begin{orangeblock}{Performance} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{orange} + \faTachometer + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item 50 Anfragen / Sekunde bedingt möglich + \item Die Systemanforderungen für dieses Kriterium liegen über den Mindestanforderungen + \end{itemize} + \end{minipage} +\end{orangeblock} + +\begin{redblock}{Deabonnieren in der Weboberfläche} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-red} + \faMinusCircle + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item Deabonnieren von Podcasts im Dashboard nun möglich + \item Über Checkboxen auch mehrere auf einmal deabonnieren + \end{itemize} + \end{minipage} +\end{redblock} + +\begin{blueblock}{Aussagekräftige Benachrichtigungen im Frontend} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-blue} + \faExclamationCircle + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item Fehlermeldungen sind nun verständlicher + \item Erfolgreiche Aktionen werden Nutzer über Meldungen mitgeteilt + \end{itemize} + \end{minipage} +\end{blueblock} + +\end{frame} diff --git a/31-qualitaetsheft-kolloquium/slides/classdiagram.tex b/31-qualitaetsheft-kolloquium/slides/classdiagram.tex new file mode 100644 index 0000000..3186a53 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/codestyle.tex b/31-qualitaetsheft-kolloquium/slides/codestyle.tex new file mode 100644 index 0000000..5c82885 --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/codestyle.tex @@ -0,0 +1,179 @@ +\definecolor{error00}{RGB}{255, 0, 0} +\definecolor{error01}{RGB}{204, 0, 0} +\definecolor{error02}{RGB}{153, 0, 0} +\definecolor{error03}{RGB}{102, 0, 0} +\definecolor{error04}{RGB}{51, 0, 0} +\definecolor{error05}{RGB}{25, 0, 0} + +\definecolor{warning00}{RGB}{255, 255, 0} +\definecolor{warning01}{RGB}{255, 215, 0} +\definecolor{warning02}{RGB}{139, 117, 0} +\definecolor{warning03}{RGB}{238, 201, 0} +\definecolor{warning04}{RGB}{255, 215, 0} +\definecolor{warning05}{RGB}{238, 238, 0} +\definecolor{warning06}{RGB}{139, 139, 0} +\definecolor{warning07}{RGB}{255, 255, 0} +\definecolor{warning08}{RGB}{238, 201, 0} +\definecolor{warning09}{RGB}{205, 173, 0} +\definecolor{warning10}{RGB}{205, 205, 0} +\definecolor{warning11}{RGB}{205, 173, 0} +\definecolor{warning12}{RGB}{238, 238, 0} +\definecolor{warning13}{RGB}{139, 117, 0} +\definecolor{warning14}{RGB}{139, 139, 0} + +\begin{frame}{Codestil: Server} +% Balkendiagram: +% zwei Balken: vorher, nachher +% eine Balken besteht aus verschiedenen Ebenen für jeden Linter Fehler + +\vspace{-.7cm} +\begin{multicols}{2} +\hspace{-0.5cm} +\begin{tikzpicture} +\begin{axis}[ + title={Code-Stil-Anmerkungen durch Checkstyle Sun-Checks}, + title style={align=left, at={(.45,1)}}, + ybar stacked, ymin=0, + bar width=10mm, + symbolic x coords={Vorher,Nachher}, + xtick=data, + xticklabel style={text width=2cm,align=center}, + nodes near coords={} +] + +\addplot [fill=error02] coordinates { ({Vorher}, 285 ) ({Nachher}, 0)}; % (sizes) LineLength +\addplot [fill=error00] coordinates { ({Vorher}, 143 ) ({Nachher}, 0)}; % (misc) FinalParameters +\addplot [fill=error03] coordinates { ({Vorher}, 101 ) ({Nachher}, 0)}; % (javadoc) JavadocVariable +\addplot [fill=error04] coordinates { ({Vorher}, 83 ) ({Nachher}, 0)}; % (javadoc) JavadocStyle +\addplot [fill=error02] coordinates { ({Vorher}, 43 ) ({Nachher}, 0)}; % (design) DesignForExtension +\addplot [fill=error01] coordinates { ({Vorher}, 39 ) ({Nachher}, 0)}; % (javadoc) MissingJavadocMethod +\addplot [fill=error01] coordinates { ({Vorher}, 26 ) ({Nachher}, 0)}; % (regexp) RegexpSingleline +\addplot [fill=error02] coordinates { ({Vorher}, 15 ) ({Nachher}, 0)}; % (whitespace) WhitespaceAround +\addplot [fill=error01] coordinates { ({Vorher}, 13 ) ({Nachher}, 0)}; % (javadoc) JavadocPackage +\addplot [fill=error03] coordinates { ({Vorher}, 10 ) ({Nachher}, 0)}; % (whitespace) OperatorWrap +\addplot [fill=error00] coordinates { ({Vorher}, 10 ) ({Nachher}, 0)}; % (javadoc) JavadocType +\addplot [fill=error05] coordinates { ({Vorher}, 7 ) ({Nachher}, 0)}; % (imports) AvoidStarImport +\addplot [fill=error05] coordinates { ({Vorher}, 6 ) ({Nachher}, 0)}; % (coding) MagicNumber +\addplot [fill=error05] coordinates { ({Vorher}, 4 ) ({Nachher}, 0)}; % (javadoc) JavadocMethod +\addplot [fill=error04] coordinates { ({Vorher}, 3 ) ({Nachher}, 0)}; % (coding) HiddenField +\addplot [fill=error02] coordinates { ({Vorher}, 2 ) ({Nachher}, 0)}; % (javadoc) InvalidJavadocPosition +\addplot [fill=error00] coordinates { ({Vorher}, 2 ) ({Nachher}, 0)}; % (blocks) RightCurly +\addplot [fill=error03] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % (whitespace) WhitespaceAfter +\addplot [fill=error04] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % (whitespace) FileTabCharacter +\addplot [fill=error04] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % (misc) NewlineAtEndOfFile +\addplot [fill=error01] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % (misc) ArrayTypeStyle +\addplot [fill=error00] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % (imports) UnusedImports +\addplot [fill=error03, point meta=y,nodes near coords,nodes near coords align={anchor=south}] coordinates { ({Vorher}, 2 ) ({Nachher}, 1)}; % (design) HideUtilityClassConstructor + +\end{axis} +\end{tikzpicture} + +\small +\renewcommand{\arraystretch}{0.8} +\begin{tabularx}{.5\textwidth}{X | c | c} + Regel & Vorher & Nacher \\ \hline + sizes: LineLength & 285 & 0 \\ + misc: FinalParameters & 143 & 0 \\ + javadoc: JavadocVariable & 101 & 0 \\ + javadoc: JavadocStyle & 83 & 0 \\ + design: DesignForExtension & 43 & 0 \\ + javadoc: MissingJavadocMethod & 39 & 0 \\ + regexp: RegexpSingleline & 26 & 0 \\ + whitespace: WhitespaceAround & 15 & 0 \\ + javadoc: JavadocPackage & 13 & 0 \\ + whitespace: OperatorWrap & 10 & 0 \\ + javadoc: JavadocType & 10 & 0 \\ + imports: AvoidStarImport & 7 & 0 \\ + coding: MagicNumber & 6 & 0 \\ + javadoc: JavadocMethod & 4 & 0 \\ + coding: HiddenField & 3 & 0 \\ + javadoc: InvalidJavadocPosition & 2 & 0 \\ + blocks: RightCurly & 2 & 0 \\ + whitespace: WhitespaceAfter & 1 & 0 \\ + whitespace: FileTabCharacter & 1 & 0 \\ + misc: NewlineAtEndOfFile & 1 & 0 \\ + misc: ArrayTypeStyle & 1 & 0 \\ + imports: UnusedImports & 1 & 0 \\ + design: HideUtilityClassConstructor & 2 & 1 \\ +\end{tabularx} +\end{multicols} + +\end{frame} + + +\begin{frame}{Codestil: Dashboard} +% Balkendiagram: +% zwei Balken: vorher, nachher +% eine Balken besteht aus verschiedenen Ebenen für jeden Linter Fehler + +\vspace{-.7cm} +\begin{multicols}{2} +\hspace{-0.5cm} +\begin{tikzpicture} +\begin{axis}[ + title={Code-Stil-Anmerkungen durch ESLint}, + title style={align=left, at={(.3,1)}}, + ybar stacked, ymin=0, + bar width=10mm, + symbolic x coords={Vorher,Nachher}, + xtick=data, + xticklabel style={text width=2cm,align=center}, + nodes near coords={}, + legend style={draw=none} +] + +\addplot [fill=error00] coordinates { ({Vorher}, 26 ) ({Nachher}, 0)}; % error vue/html-indent +\addplot [fill=error01] coordinates { ({Vorher}, 17 ) ({Nachher}, 0)}; % error vue/script-indent +\addplot [fill=error02] coordinates { ({Vorher}, 6 ) ({Nachher}, 0)}; % error vue/require-v-for-key +\addplot [fill=error03] coordinates { ({Vorher}, 5 ) ({Nachher}, 0)}; % error vue/multi-word-component-names +\addplot [fill=error04] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % error vue/valid-v-for +\addplot [fill=error05] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % error vue/valid-template-root +\addplot [fill=warning00] coordinates { ({Vorher}, 125 ) ({Nachher}, 0)}; % warning vue/max-attributes-per-line +\addplot [fill=warning01] coordinates { ({Vorher}, 34 ) ({Nachher}, 0)}; % warning vue/attributes-order +\addplot [fill=warning02] coordinates { ({Vorher}, 26 ) ({Nachher}, 0)}; % warning vue/singleline-html-element-content-newline +\addplot [fill=warning03] coordinates { ({Vorher}, 12 ) ({Nachher}, 0)}; % warning vue/require-default-prop +\addplot [fill=warning04] coordinates { ({Vorher}, 12 ) ({Nachher}, 0)}; % warning vue/html-self-closing +\addplot [fill=warning05] coordinates { ({Vorher}, 11 ) ({Nachher}, 0)}; % warning vue/first-attribute-linebreak +\addplot [fill=warning06] coordinates { ({Vorher}, 10 ) ({Nachher}, 0)}; % warning vue/html-closing-bracket-newline +\addplot [fill=warning07] coordinates { ({Vorher}, 8 ) ({Nachher}, 0)}; % warning vue/multiline-html-element-content-newline +\addplot [fill=warning08] coordinates { ({Vorher}, 5 ) ({Nachher}, 0)}; % warning vue/html-closing-bracket-spacing +\addplot [fill=warning09] coordinates { ({Vorher}, 3 ) ({Nachher}, 0)}; % warning vue/require-prop-types +\addplot [fill=warning10] coordinates { ({Vorher}, 3 ) ({Nachher}, 0)}; % warning vue/attribute-hyphenation +\addplot [fill=warning11] coordinates { ({Vorher}, 2 ) ({Nachher}, 0)}; % warning vue/html-self-closing +\addplot [fill=warning12] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % warning vue/v-on-event-hyphenation +\addplot [fill=warning13] coordinates { ({Vorher}, 1 ) ({Nachher}, 0)}; % warning vue/no-v-html +\addplot +[fill=warning14, point meta=y,nodes near coords,nodes near coords align={anchor=south}]coordinates { ({Vorher}, 1 ) ({Nachher}, 1)}; % warning vue/mustache-interpolation-spacing + +\end{axis} +\end{tikzpicture} + +\small +\renewcommand{\arraystretch}{0.8} +\setlength{\tabcolsep}{1pt} +\begin{tabularx}{.54\textwidth}{X | c | c} + Regel & Vorher & Nachher \\ \hline + error: html-indent & 26 & 0 \\ + error: script-indent & 17 & 0 \\ + error: require-v-for-key & 6 & 0 \\ + error: multi-word-component-names & 5 & 0 \\ + error: valid-v-for & 1 & 0 \\ + error: valid-template-root & 1 & 0 \\ + warning: max-attributes-per-line & 125 & 0 \\ + warning: attributes-order & 34 & 0 \\ + warning: singleline-html-element-content-newline & 26 & 0 \\ + warning: require-default-prop & 12 & 0 \\ + warning: html-self-closing & 12 & 0 \\ + warning: first-attribute-linebreak & 11 & 0 \\ + warning: html-closing-bracket-newline & 10 & 0 \\ + warning: multiline-html-element-content-newline & 8 & 0 \\ + warning: html-closing-bracket-spacing & 5 & 0 \\ + warning: require-prop-types & 3 & 0 \\ + warning: attribute-hyphenation & 3 & 0 \\ + warning: html-self-closing & 2 & 0 \\ + warning: v-on-event-hyphenation & 1 & 0 \\ + warning: mustache-interpolation-spacing & 1 & 0 \\ + warning: no-v-html & 1 & 1 \\ +\end{tabularx} +\end{multicols} + +\end{frame} diff --git a/31-qualitaetsheft-kolloquium/slides/components.tex b/31-qualitaetsheft-kolloquium/slides/components.tex new file mode 100644 index 0000000..5a6afe6 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/coverage.tex b/31-qualitaetsheft-kolloquium/slides/coverage.tex new file mode 100644 index 0000000..51d39ea --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/coverage.tex @@ -0,0 +1,23 @@ +\begin{frame}{Codeüberdeckung} + \vspace{-.4cm} + \begin{figure}[t] + \centering + \includegraphics[width=\textwidth,height=\textheight,keepaspectratio]{assets/coverage/server.png} + \end{figure} + \begin{redblock}{Lücken} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-red} + \faCode + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item Model-Klassen (intern) und Controller (extern) implizit abgedeckt + \item Lombok, Spring und JPA Repositories + \end{itemize} + \end{minipage} + \end{redblock} +\end{frame}
\ No newline at end of file diff --git a/31-qualitaetsheft-kolloquium/slides/difficulties.tex b/31-qualitaetsheft-kolloquium/slides/difficulties.tex new file mode 100644 index 0000000..d3e64dd --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/einführung.tex b/31-qualitaetsheft-kolloquium/slides/einführung.tex new file mode 100644 index 0000000..d818cd3 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/features.tex b/31-qualitaetsheft-kolloquium/slides/features.tex new file mode 100644 index 0000000..6ec435b --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/gantt.tex b/31-qualitaetsheft-kolloquium/slides/gantt.tex new file mode 100644 index 0000000..31ed9b9 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/integrationstrategie.tex b/31-qualitaetsheft-kolloquium/slides/integrationstrategie.tex new file mode 100644 index 0000000..0564b5f --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/pattern.tex b/31-qualitaetsheft-kolloquium/slides/pattern.tex new file mode 100644 index 0000000..141954b --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/performance.tex b/31-qualitaetsheft-kolloquium/slides/performance.tex new file mode 100644 index 0000000..dd27226 --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/performance.tex @@ -0,0 +1,56 @@ +\begin{frame}{Lasttests} + \begin{columns}[t] + \begin{column}{.48\textwidth} + \begin{orangeblock}{2 Kerne / 2GB RAM (mind. Anforderung)} + \begin{minipage}{.2\textwidth} + \centering + \vspace{.15cm} + \fontsize{30pt}{36pt} + \selectfont + \vspace{.2cm} + \end{minipage} + \begin{tabular}{l l} + \textbf{Antwortszeit} & 713,25 ms \\ + \textbf{Durchsatz} & 10,85 Trans./s \\ + \textbf{Apdex} & 0,563 + \end{tabular} + \end{orangeblock} + \end{column} + + \begin{column}{.48\textwidth} + \begin{greenblock}{8 Kerne / 32GB RAM} + \begin{minipage}{.2\textwidth} + \centering + \vspace{.2cm} + \fontsize{30pt}{36pt} + \selectfont + \vspace{.25cm} + \end{minipage} + \begin{tabular}{l l} + \textbf{Antwortszeit} & 81,15 ms \\ + \textbf{Durchsatz} & 88,93 Trans./s \\ + \textbf{Apdex} & 1,000 + \end{tabular} + \end{greenblock} + \end{column} + \end{columns} + \vspace{.3cm} + + \begin{blueblock}{Schlussfolgerung} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-blue} + \faArrowRight + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item Mindestanforderungen bieten unter Last keine optimale Performance + \item Mit stärkerer Hardware kann Durchsatz von 50 Trans./s erreicht werden + \end{itemize} + \end{minipage} + \end{blueblock} + +\end{frame}
\ No newline at end of file diff --git a/31-qualitaetsheft-kolloquium/slides/problems.tex b/31-qualitaetsheft-kolloquium/slides/problems.tex new file mode 100644 index 0000000..b3343a6 --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/problems.tex @@ -0,0 +1,59 @@ +\begin{frame}{Herausforderungen} + +\vspace{-.4cm} + +\begin{orangeblock}{Falsche Zeitangaben} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{orange} + \faClockO + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item \textbf{Problem:} Zeit der letzten Podcastinteraktion falsch + \item \textbf{Ursache:} Lokale statt universelle Zeit zur Berechnung + \item \textbf{Behebung:} Explizite Verwendung von UTC + \end{itemize} + \end{minipage} +\end{orangeblock} + +\begin{redblock}{AntennaPod Fehlermeldung} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-red} + \faWarning + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item \textbf{Problem:} Bei Uploads gibt AntennaPod Fehler aus + \item \textbf{Ursache:} Falscher Parametername gesendet + \item \textbf{Behebung:} JsonProperty \texttt{updateURLs} zu \texttt{update\textunderscore urls} umbenannt + \end{itemize} + \end{minipage} +\end{redblock} + +\begin{blueblock}{Doppelte Sicherung von EpisodeActions} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-blue} + \faClone + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.8\textwidth} + \begin{itemize} + \item \textbf{Problem:} Mehrere EpisodeActions pro Benutzer für eine Episode gespeichert + \item \textbf{Ursache:} Aufgrund von Effizienz - Spring ersetzt erst nach Sammeln der Daten + \item \textbf{Behebung:} EpisodeActions vor Speichern aussortieren + \end{itemize} + \end{minipage} +\end{blueblock} + +\end{frame}
\ No newline at end of file diff --git a/31-qualitaetsheft-kolloquium/slides/requirements.tex b/31-qualitaetsheft-kolloquium/slides/requirements.tex new file mode 100644 index 0000000..e660bb9 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/statistics.tex b/31-qualitaetsheft-kolloquium/slides/statistics.tex new file mode 100644 index 0000000..ed9b143 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/synchronisation.tex b/31-qualitaetsheft-kolloquium/slides/synchronisation.tex new file mode 100644 index 0000000..0849279 --- /dev/null +++ b/31-qualitaetsheft-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/31-qualitaetsheft-kolloquium/slides/testing.tex b/31-qualitaetsheft-kolloquium/slides/testing.tex new file mode 100644 index 0000000..0cc862b --- /dev/null +++ b/31-qualitaetsheft-kolloquium/slides/testing.tex @@ -0,0 +1,59 @@ +\begin{frame}{Testfälle} + + \begin{orangeblock}{Unit-Tests} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{orange} + \faGears + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.9\textwidth} + \begin{itemize} + \item Grundlage für alle weiteren Testfälle + \item Nur für selbst geschriebene Klassen erstellt + \begin{itemize} + \item[\textbf{Vorher:}] 38 Testfälle in 610 Codezeilen für 1780 Quellcodezeilen + \item[\textbf{Nachher:}] 48 Testfälle in 1035 Codezeilen für 2081 Quellcodezeilen + \end{itemize} + \end{itemize} + \end{minipage} + \end{orangeblock} + + \begin{greenblock}{Frontend-Testfälle aus dem Pflichtenheft} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-green} + \faDesktop + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.9\textwidth} + \begin{itemize} + \item Manuell ausgeführt + \item Nicht zu 100\% erfüllt + \item Link für das Zurücksetzen des Passworts bleibt nach Benutzung gültig (technisch bedingt) + \end{itemize} + \end{minipage} + \end{greenblock} + + \begin{blueblock}{Synchronisations-Testfälle aus dem Pflichtenheft} + \begin{minipage}{1.7cm} + \centering + \fontsize{23pt}{0pt} + \selectfont + \textcolor{kit-blue} + \faRefresh + \end{minipage} + \hspace{-.5cm} + \begin{minipage}{.7\textwidth} + \begin{itemize} + \item Manuell (Podcatcher und Frontend) und automatisiert (Unit-Tests) + \item Ohne Einschränkungen erfüllt + \end{itemize} + \end{minipage} + \end{blueblock} + +\end{frame}
\ No newline at end of file diff --git a/31-qualitaetsheft-kolloquium/slides/zielsetzung.tex b/31-qualitaetsheft-kolloquium/slides/zielsetzung.tex new file mode 100644 index 0000000..84e1064 --- /dev/null +++ b/31-qualitaetsheft-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 |