\documentclass[aspectratio=169]{beamer}

% get rid of clickable beamer buttons
\beamertemplatenavigationsymbolsempty

% parse most utf-8 correctly
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}

% better graphics
\usepackage{graphicx}

\title{
    Eine Email-Client-App entwickeln\\
    \vspace{.1cm}
    \normalsize snailmail
}
\author{Noah Vogt \& Simon Hammer}
\date{5. Februar 2022}
\institute{Gymnasium Kirschgarten}

\usetheme{Copenhagen}

\usepackage{varwidth}

\usepackage{graphicx,calc}
\newlength\myheight
\newlength\mydepth
\settototalheight\myheight{Xygp}
\settodepth\mydepth{Xygp}
\setlength\fboxsep{0pt}

\newcommand*\inlinegraphics[1]{
    \settototalheight\myheight{Xygp}
    \settodepth\mydepth{Xygp}
    \raisebox{-\mydepth}{\includegraphics[height=\myheight]{#1}}
}

% for code snippits
\usepackage{listings}
\usepackage{color}

\definecolor{dkgreen}{rgb}{0,0.6,0}
\definecolor{gray}{rgb}{0.5,0.5,0.5}
\definecolor{mauve}{rgb}{0.58,0,0.82}
\definecolor{background}{rgb}{0.36,0.36,0.36}

\lstset{
    numbersep=3pt,
    keywordstyle=\color{blue},
    commentstyle=\color{dkgreen},
    stringstyle=\color{mauve},
    breaklines=true,
    numbers=left,
    numberstyle=\scriptsize\color{black},
    frame=none,
    basicstyle = \small\ttfamily,
    breaklines=true
    breakatwhitespace=false,
    columns=flexible,
    xleftmargin=0.5cm,framesep=8pt,framerule=0pt,
    aboveskip=3mm,
    belowskip=3mm,
}

% Package to use videos
\usepackage{multimedia}

%for table
\usepackage{array}
\newcolumntype{C}[1]{>{\centering\arraybackslash}m{#1}}

%% Putting the background image in the frames
\usebackgroundtemplate{%
    %\vbox to \paperheight{\hfil\hbox to \paperwidth{\hfil\includegraphics[width=1\paperwidth]{../../logo/version2grey.pdf}\hfil}\vfil}
    \hspace{5.2cm}\includegraphics[width=0.8\paperwidth]{../logo/version2grey.pdf}
    }

\begin{document}
\begin{frame}[plain]

\maketitle

\end{frame}

\begin{frame}[plain]{Inhaltsverzeichniss}
        \tableofcontents
\end{frame}

\section{Vorwort}
\subsection{Motivation}
\begin{frame}[plain]{Motivation}
\begin{varwidth}{.5\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.9\textwidth]{media/macbook.jpg}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item allgemeines Interesse\pause
            \item fehlender Edubs-Mail-Client\pause
            \item persönliche Bedürfnisse
        \end{itemize}
    \end{varwidth} 
\end{frame}

\subsection{Ziele}
\begin{frame}[plain]{Ziele}
\begin{varwidth}{.5\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.8\textwidth]{../logo/version3d.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item Basisfunktionen \inlinegraphics{media/mail.png} \pause
            \item Account Manager\inlinegraphics{media/business.png}\pause
            \item Mobil und Modern\inlinegraphics{media/mobile.png}\pause
            \item Einstellungen\inlinegraphics{media/settings.png}\pause
            \item Schnell, Frei und Simpel\inlinegraphics{media/run.png}
        \end{itemize}
    \end{varwidth} 
\end{frame}

\begin{frame}[plain]{Inspiration Design}
\begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
            \centering
            \includegraphics[width=.8\textwidth]{media/gmail-screenshot.png}\\
            \vspace{.5cm}
            \includegraphics[width=.25\textwidth]{media/gmail-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
        \centering
        \includegraphics[width=.8\textwidth]{media/k9-screenshot.png}\\
        \vspace{.5cm}
        \includegraphics[width=.25\textwidth]{media/k9-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
        \centering
        \includegraphics[width=.8\textwidth]{media/fairmail-screenshot.png}\\
        \vspace{.5cm}
        \includegraphics[width=.25\textwidth]{media/fairmail-logo.png}
        \end{figure}
\end{varwidth}
\end{frame}

\section{Haupteil}
\subsection{App mit Film}
\begin{frame}[plain]{Demo}
        \center
           \movie[externalviewer, autostart]{\includegraphics[height=0.8\textheight]{../logo/version3b.png}}{media/appWithMusic.mp4}
\end{frame}

\subsection{App Inhalte}
\begin{frame}[plain]{Was alles drin ist}
    \centering
    \begin{figure}[h]
        \includegraphics[height=.9\textheight]{media/errorMessage.png}
        \hspace{2.5cm}
        \pause
        \includegraphics[height=.9\textheight]{media/moreSettings.jpg}
    \end{figure}
\end{frame}

\subsection{App-Struktur}
\begin{frame}[plain]{Allgemeine App-Struktur}
\begin{varwidth}{.3\textwidth}
        \begin{figure}
            \centering
            \includegraphics[height=.8\textheight]{../maturText/media/AppStructureFull.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item User Interface \pause
            \item Server Connection \pause
            \item Database
        \end{itemize}
    \end{varwidth} 
\end{frame}

\begin{frame}[plain]{Database}
\begin{block}{Allgemein}
\textbf{Datenbank:} eine organisierte Ansammlung von strukturierter Information oder Daten
\end{block}\pause

\begin{block}{In Der App}
\begin{tabular}{ |C{1.4Cm}  |C{0.9Cm} |C{0.5Cm} |C{0.65Cm} |C{0.95Cm} |C{0.85Cm} |C{1.05Cm} |C{1.55Cm} |C{1.05Cm} |C{0.8Cm}|}
 \hline
 \multicolumn{10}{|c|}{Database Table} \\
 \hline
    \small{ObjectKey} &To & cc & bcc & from & date & subject & \small{textContent} & folder & seen  \\
    \hline
\end{tabular}
\vspace{.9cm}
\end{block}
\end{frame}

\begin{frame}[plain]{Database}
\begin{block}{Allgemein}
\textbf{Datenbank:} eine organisierte Ansammlung von strukturierter Information oder Daten
\end{block}

\begin{block}{In Der App}
\begin{tabular}{ |C{1.4Cm}  |C{0.9Cm} |C{0.5Cm} |C{0.65Cm} |C{0.95Cm} |C{0.85Cm} |C{1.05Cm} |C{1.55Cm} |C{1.05Cm} |C{0.8Cm}|}
 \hline
 \multicolumn{10}{|c|}{Database Table} \\
 \hline
    \small{ObjectKey} &To & cc & bcc & from & date & subject & \small{textContent} & folder & seen  \\
    \hline
     01    & \small{Sam} & null & null & \small{Anna} & \small{1.3.13} & Schule &  Hallo Herr & Draft & true \\
 \hline
\end{tabular} 
\end{block}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/white.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-01.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-02.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-03.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-04.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-05.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-06.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-07.png}}
\end{frame}

\begin{frame}[plain]{Mail Server Connection}
    \centering
    \fbox{\includegraphics[height=.8\textheight]{media/mail-08.png}}
\end{frame}

\begin{frame}[plain]{Senden einer Email}
    \begin{figure}[h]
        \includegraphics[width=\textwidth]{media/codeFragment.png}
    \end{figure}
        \begin{itemize}
            \centering
            \item app/src/main/python/mailFunctions.py
        \end{itemize}
\end{frame}


\subsection{Librarys}
\begin{frame}[plain]{Material Design}
\begin{varwidth}{.5\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=\textwidth]{media/material-design-in-action.jpg}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.4\textwidth}
        \includegraphics[width=\textwidth]{media/material-android.png}
        \begin{itemize}\pause
            \item GUI-Framework\pause
            \item beliebt\pause
            \item in Google Apps
        \end{itemize}
    \end{varwidth}
\end{frame}

\begin{frame}[plain]{Bug}
    \begin{figure}[h]
        \includegraphics[width=.8\textwidth]{media/bug.png}
    \end{figure}
\end{frame}


\section{Resultate}
\begin{frame}[plain]{Resultate}
\begin{itemize}\pause
    \item User Interface\pause
    \item chaquopy\pause
    \item Funktionalität\pause
    \item abschliessend
\end{itemize}
\end{frame}

\section{Gelerntes}
\begin{frame}[plain]{Was wir gelernt haben}
\begin{varwidth}{.5\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.95\textwidth]{media/monetary-success.jpeg}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item Java\inlinegraphics{media/java-only-logo.png}\pause
            \item Android Apps\inlinegraphics{media/android-robot.png}\pause
            \item Database \& SQL\inlinegraphics{media/database.png}\pause
            \item Gradle\inlinegraphics{media/gradle.png}\pause
            \item Zusammenarbeit\inlinegraphics{media/handschlag.jpeg}
        \end{itemize}
    \end{varwidth} 
\end{frame}

\section{Persönliche Meinung}
\begin{frame}[plain]{Persönliche Meinung: Simon}
    \begin{varwidth}{.4\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.95\textwidth]{media/git-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item VCS $\rightarrow$ Git $\rightarrow$ GitHub\pause
            \item Treffen \& Absprachen 
        \end{itemize}
    \end{varwidth}
\end{frame}

\begin{frame}[plain]{persönliche Meinung: Noah}
    \begin{varwidth}{.4\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.95\textwidth]{media/gradle-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.5\textwidth}
        \begin{itemize}\pause
            \item fehlende Erfahrung\pause
            \item Java Libraries\pause
            \item persönlicher \& beruflicher Vorteil
        \end{itemize}
    \end{varwidth} 
\end{frame}

\begin{frame}[plain]{Zukunft: Wie geht es weiter?}
    \begin{figure}
        \centering
        \fbox{\includegraphics[width=.95\textwidth]{media/zukunft.png}}
    \end{figure}
\end{frame}

\end{document}