texdiary/vortrag/core.tex

\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}

% beamer settings
\title{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{movie15}

%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}

% TODO: create and insert toc
\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 fehlender Edubs-Mail-Client\inlinegraphics{media/baslerstab-1.jpg}\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 Design Prinzipien\inlinegraphics{media/paintbrush.png}\pause
            \item Schnelligkeit\inlinegraphics{media/run.png}\pause
            \item Mobil und Modern\inlinegraphics{media/mobile.png}\pause
            \item Einstellungen\inlinegraphics{media/settings.png}
        \end{itemize}
    \end{varwidth} 
\end{frame}

\begin{frame}[plain]{Weshalb Java?}
\begin{varwidth}{.3\textwidth}
        \begin{figure}
            \centering
            \includegraphics[height=.8\textheight]{media/java-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.6\textwidth}
        \begin{itemize}\pause
            \item war offizielle Sprache für Android Apps\pause
            \item abgelöst von Kotlin (seit 2019)\pause
            \item EF Informatik
        \end{itemize}
    \end{varwidth} 
\end{frame}

% TODO: consider using external player
\section{Haupteil}
\subsection{App mit Film}
\begin{frame}[plain]{Demo}
    \begin{figure}[h]
        \centering
        INSERT DEMO HERE
        %\includemovie[toolbar]{120pt}{190pt}{media/cutaccountViewer.mp4}
        %\includemovie[toolbar]{90pt}{90pt}{media/draftsExample.mp4}
    \end{figure}
\end{frame}

%:TODO Fix it simon
\subsection{App Inhalte}
        \begin{frame}[plain]{Was alles drin ist}
            \centering
        \begin{figure}[h]
        \pause
        \includegraphics[height=.8\textheight]{media/emailWriter.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/errorMessage.png}
        \pause
        \includegraphics[height=.8\textheight]{media/emailViewer.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/accountManager.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/moreSettings.jpg}
    \end{figure}
\end{frame}

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

\begin{frame}[plain]{Database}
\begin{block}{allgemein}
\end{block}

\begin{block}{in der app}
%:TODO finish this simon
    \pause
\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}|}
%\begin{tabular}{ c c c c c c c c c c}
 \hline
 \multicolumn{10}{|c|}{Database Table} \\
 \hline
    \small{ObejctKey} &To & cc & bcc & from & date & subject & \small{textContent} & folder & seen  \\
    \hline
    \pause
     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]{Email Connection}
\centering
\includegraphics[width=.8\textwidth]{../maturText/media/connection-diagram.png}
\end{frame}

\defverbatim[colored]\makeset{
\lstset{language=python}
\begin{lstlisting}
def sendStarttls(host, sendingMail, receivingMail, password, message="",
                 subject="", port=587, cc=[], bcc=[]):
    context = ssl.create_default_context()

    if type(cc) is not str:
        cc = ",".join(cc)
    if type(bcc) is not str:
        bcc = ",".join(bcc)
    utf8Message = ("Subject: " + subject + "\nCC: " + cc + "\nBCC: " + bcc +
                   "\n\n" + message)
    decoded = utf8Message.encode('cp1252').decode('utf-8')

    with smtplib.SMTP(host, port) as serverConnection:
        serverConnection.starttls(context=context)
        serverConnection.login(sendingMail, password)
        serverConnection.sendmail(sendingMail, receivingMail, decoded)
\end{lstlisting}
}

\begin{frame}[plain]{Senden einer Email}
%\makeset
    \lstset{language=Python}
    \lstinputlisting[language=Python]{code/sentMail.py}
\end{frame}


% TODO: make abstraction layer
\begin{frame}[plain]{Room}
INSERT ABSTRACTION LAYERS
\end{frame}

% TODO: add individual layers, add 'wirklich again'
\begin{frame}[plain]{Was haben wir selber gemacht?}
%\includegraphics[height=.8\textheight]{media/hardware-abstraction-layers.png}
    \includegraphics<1>[height=.8\textheight]{media/empty.png}
    \pause
    \includegraphics<2>[height=.8\textheight]{media/layer01.png}
    \pause
    \includegraphics<3>[height=.8\textheight]{media/layer02.png}
    \pause
    \includegraphics<4>[height=.8\textheight]{media/layer03.png}
    \pause
    \includegraphics<5>[height=.8\textheight]{media/layer04.png}
    \pause
    \includegraphics<6>[height=.8\textheight]{media/layer05.png}
    \pause
    \includegraphics<7>[height=.8\textheight]{media/layer06.png}
    \pause
    \includegraphics<8>[height=.8\textheight]{media/layer07.png}
\end{frame}

%\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}

% TODO: insert bugs
\begin{frame}[plain]{Bugs}
INSERT BUGS HERE
\end{frame}

%:TODO Ich han eig gmeint Bilder us de Apps. Also wenn du seisch es isch zu überlade das me das in de Apps seht und ned s Logo fo de App
\begin{frame}[plain]{Inspiration Design}
\begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
            \centering
            \includegraphics[width=.9\textwidth]{media/gmail-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
        \centering
        \includegraphics[width=.9\textwidth]{media/k9-logo.png}
        \end{figure}
    \end{varwidth}
    \hfill
    \begin{varwidth}{.3\textwidth}\pause
        \begin{figure}
        \centering
        \includegraphics[width=.9\textwidth]{media/fairmail-logo.png}
        \end{figure}
\end{varwidth}
\end{frame}

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

\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 Android Studio\inlinegraphics{media/android-studio-logo.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}

\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 \& VoIP\pause
            \item texdiary
        \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
        \includegraphics[height=.7\textheight]{media/github-repo.jpg}
    \end{figure}
    \begin{itemize}
        \centering
        \item https://github.com/noahvogt/snailmail
        \item https://git.noahvogt.com/me/snailmail
    \end{itemize}
\end{frame}

\end{document}