texdiary/vortrag/core.tex

\documentclass[aspectratio=169]{beamer}

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

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

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

\begin{frame}{Inhaltsverzeichniss}
%\ldots{}
    \tableofcontents
\end{frame}

%\begin{frame}{Motivation}
%\begin{itemize}\pause
%    \item allgemeines Interesse\pause
%    \item fehlender Edubs-Mail-Client\pause
%    \item persönliche Bedürfnisse
%\end{itemize}

\section{Vorwort}
\begin{frame}{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}

%\begin{frame}{Ziele}
%\begin{itemize}\pause
%    \item Basisfunktionen\pause
%    \item Account Manager\pause
%    \item Design Prinzipien\pause
%    \item Schnelligkeit\pause
%    \item Mobil und Modern\pause
%    \item Einstellungen\pause
%\end{itemize}
%\end{frame}

    \subsection{Ziele}
\begin{frame}{Ziele}
\begin{varwidth}{.5\textwidth}
        \begin{figure}
            \centering
            \includegraphics[width=.9\textwidth]{media/target.jpeg}
        \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}{Warum 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}

\begin{frame}{Demo}
    \begin{figure}[h]
        \centering
        \includemovie[toolbar]{120pt}{190pt}{media/cutaccountViewer.mp4}
        \includemovie[toolbar]{90pt}{90pt}{media/draftsExample.mp4}
    \end{figure}
\end{frame}

\begin{frame}{Was alles drin ist}

    \begin{figure}[h]

        \includegraphics[height=.8\textheight]{media/emailViewer.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/emailWriter.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/accountManager.jpg}
        \pause
        \includegraphics[height=.8\textheight]{media/moreSettings.jpg}

    \end{figure}

\end{frame}

\begin{frame}{Allgemeine App-Struktur}
\begin{varwidth}{.3\textwidth}
    \pause
        \begin{figure}
            \centering
            \includegraphics[height=.7\textheight]{../maturText/media/AppStructure.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
            \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}

%: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}{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}{Database}
\begin{block}{allgemein}
\end{block}

\begin{block}{in der app}
\end{block}
\end{frame}

\begin{frame}{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}{Sendung einer Email}
\makeset
\end{frame}

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

\begin{frame}{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 kryptografisches Signieren\inlinegraphics{media/key.png}
        \end{itemize}
    \end{varwidth} 
\end{frame}

\begin{frame}{Was haben wir wirklich selber gemacht?}
\centering
\includegraphics[height=.8\textheight]{media/self.jpeg}
\end{frame}

\begin{frame}{Room}
INSERT ABSTRACTION LAYERS
\end{frame}

\begin{frame}{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}{Was wir gelernt haben}
\end{frame}

\begin{frame}{persönliche Meinung}
\end{frame}

\begin{frame}{Zukunft: Wie geht es weiter?}
\end{frame}

\end{document}