add material for my email implementation lesson

5 files changed, 342 insertions, 0 deletions

diff --git a/Info/11/NTG/3/E-Mail/.gitignore b/Info/11/NTG/3/E-Mail/.gitignore
new file mode 100644
index 00000000..3f6c7881
--- /dev/null
+++ b/Info/11/NTG/3/E-Mail/.gitignore
@@ -0,0 +1,4 @@
+pop3.pdf
+lehrer_pop3.pdf
+smtp.pdf
+lehrer_smtp.pdf
diff --git a/Info/11/NTG/3/E-Mail/handout.tex b/Info/11/NTG/3/E-Mail/handout.tex
new file mode 100644
index 00000000..d1bb6c6b
--- /dev/null
+++ b/Info/11/NTG/3/E-Mail/handout.tex
@@ -0,0 +1,114 @@
+\documentclass[a4paper, landscape]{handout}
+\csname endofdump\endcsname
+\usepackage{minted}
+\usepackage{standalone}
+\usepackage{hyperref}
+
+\title{E-Mail Versand}
+
+\begin{document}
+\thispagestyle{empty}
+
+\subsection*{SMTP - Simple Mail TRansfer Protocol}
+
+\noindent\begin{tabular}{p{0.38\textwidth} p{0.6\textwidth}}
+\newcommand{\clientToServer}[2]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=red!20, minimum width=8cm] {\psolution{#2}} ($(server) - (0, #1)$);%
+  \draw[->] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\newcommand{\serverToClient}[3]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=blue!20, minimum width=8cm] {\psolution{\ifnumless{#2}{400}{\textcolor{green!70!black}{#2}}{#2} #3}} ($(server) - (0, #1)$);%
+  \draw[<-] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\vspace{0mm}
+\input{smtp.tex} &
+
+\faIcon{edit} \textbf{\Large 1. Person Arbeitsauftrag: E-Mails Versenden Leicht Gemacht}\vspace{2mm}
+
+Recherchiere und ergänze im linken Sequenzdiagramm, den typischen \underline{fehlerfreien} Ablauf der Kommunikation, um eine E-Mail von einem Client an einen Server zu senden.
+
+\begin{merke}
+Das \textbf{SMTP}-Protokoll existiert seit \gap{\Large 1981} und verwendet das Transport-Protokoll \gap{\Large \textbf{TCP}} auf Port \gap{\Large 465 oder 587}.
+
+Serverantworten beginnen immer mit einem numerischen Statsucode. Zahlen größer als \pgap{\Large 400} zeigen Fehler an.
+\end{merke}
+
+\begin{tcolorbox}[colframe=cyan, title=\textbf{\textcolor{black}{{\large !} Tipp:}}]
+Informationen zum \textbf{SMTP}-Protokoll findest du unter \url{https://de.wikipedia.org/wiki/SMTP} oder in der formalen Beschreibung des Protokolls (RFC 5321) \url{https://datatracker.ietf.org/doc/html/rfc5321}.
+\end{tcolorbox}
+
+\vspace{0.5cm}
+\faIcon{edit} \textbf{\Large 2. Person Arbeitsauftrag: E-Mails Abholen}\vspace{2mm}
+
+Recherchiere und ergänze im Sequenzdiagramm zum \textbf{POP3}-Protokoll, den typischen \underline{fehlerfreien} Ablauf der Kommunikation, um eine E-Mail als Client von einen Server abzurufen.
+
+Es soll eine Liste aller vorhandener E-Mails und eine Einzelne durch den Client abgerufen werden.
+
+\begin{merke}
+Das \textbf{POP}-Protokoll Version 3 existiert seit \gap{\Large 1988} und verwendet das Transport-Protokoll \gap{\Large\textbf{TCP}} auf Port \gap{\Large110 oder 995}.
+
+Serverantworten beginnen immer mit einem von zwei Statusmeldungen. \pgap{\Large +OK} und \pgap{\Large -Err} geben den Erfolg der Kommunikation an.
+\end{merke}
+
+\begin{tcolorbox}[colframe=cyan, title=\textbf{\textcolor{black}{{\large !} Tipp:}}]
+Informationen zum \textbf{POP3}-Protokoll findest du unter \url{https://de.wikipedia.org/wiki/Post_Office_Protocol} oder in der formalen Beschreibung des Protokolls (RFC 1939) \url{https://datatracker.ietf.org/doc/html/rfc1939}.
+\end{tcolorbox}
+\\
+\end{tabular}
+
+\noindent\begin{tabular}{p{0.38\textwidth} p{0.6\textwidth}}
+\newcommand{\clientToServer}[2]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=red!20, minimum width=8cm] {\psolution{#2}} ($(server) - (0, #1)$);%
+  \draw[->] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\newcommand{\serverToClient}[3]{%
+  \path ($(client) - (0, #1)$) edge[above, align=center, minimum width=8cm] node[fill=blue!20, align=left, text width=6cm] {\psolution{\ifstrequal{#2}{+OK}{\textcolor{green!70!black}{#2}}{#2} #3}} ($(server) - (0, #1)$);%
+  \draw[<-] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\vspace{-10mm}
+\subsection*{POP3 - Post Office Protocol}
+\vspace{5mm}
+\input{pop3.tex} &
+
+\faIcon{hands-helping} \textbf{\Large Arbeitsauftrag: Senden und Abrufen}\vspace{2mm}
+
+Tauscht euch über eure Protokolle aus und vervollständigt eure Sequenzdiagramme und Merkkästen.
+
+\vspace{3mm}
+\faIcon{desktop} \textbf{\Large Arbeitsauftrag: E-Mail per Hand}\vspace{2mm}
+
+Sendet euch gegenseitig eine Nachricht und ruft sie ab.
+
+Im Schulnetzwerk ist eine \textbf{SMTP}-/ und \textbf{POP3}-Server ereichbar unter:
+\begin{tcolorbox}[colframe=red, title=Server]
+\vspace{1mm}
+IP-Adresse: \hspace{5cm} SMTP-Port: \hspace{2cm} POP3-Port: \hspace{2cm}
+\end{tcolorbox}
+
+Jeder hat eine eigene E-Mail-Adresse \textbf{\texttt{vorname@klasse.local}}.
+
+\begin{enumerate}
+\item Lade das Programm \textbf{ncat.exe} aus dem Drive Space herunter.
+\item Starte die Eingabeaufforderung \texttt{cmd}.
+\item Ziehe mit der Maus die Programm-Datei in die Eingabeaufforderung.
+\item Ergänze hinter dem Pfad mit Leerzeichen die \textbf{Adresse} des Servers und den \textbf{Port}. \newline
+      \textbf{Tipp:} \texttt{Strg+C} Beendet das Programm. \hspace{1cm} (\texttt{../ncat.exe <ip-adresse> <port>})
+\end{enumerate}
+
+\faIcon{desktop} \textbf{\Large Arbeitsauftrag: Ein E-Mail Programm}
+\begin{enumerate}
+  \item Implementiert in der Klasse \texttt{SMTP\_Client} das Versenden einer Nachricht.
+  \item Implementiert in der Klasse \texttt{POP3\_Client} das Abrufen einer Liste aller Nachrichten.
+  \item Implementiert in der Klasse \texttt{POP3\_Client} das Abrufen einer Nachricht.
+\end{enumerate}
+
+\begin{tcolorbox}[colframe=cyan, title=\textbf{\textcolor{black}{{\large !} Tipp:}}]
+\begin{itemize}
+  \item Eine \textbf{TCP}-Verbindung wird mit der Klasse \texttt{Schicht\_TCP} und deren Methoden \mintinline{java}{void verbindungAufbauen(String ip, int port)} und \mintinline{java}{void verbindungAbbauen()} verwaltet.
+  \item Daten werden mit der Methode \mintinline{java}{void nachrichtSenden(String msg)} verschickt.
+  \item Gesendete und Empfangenen Daten werden im Ausgabefenster angezeigt.
+\end{itemize}
+\end{tcolorbox}
+\\
+\end{tabular}
+\end{document}
diff --git a/Info/11/NTG/3/E-Mail/pop3.tex b/Info/11/NTG/3/E-Mail/pop3.tex
new file mode 100644
index 00000000..52b0b849
--- /dev/null
+++ b/Info/11/NTG/3/E-Mail/pop3.tex
@@ -0,0 +1,40 @@
+\documentclass[margin=1cm, varwidth, tikz]{standalone}
+\usepackage{etoolbox}
+\input{common_options.tex}
+\input{common_packages.tex}
+\input{common.tex}
+\usetikzlibrary{calc}
+
+\newcommand{\clientToServer}[2]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=red!20, minimum width=8cm] {\psolution{#2}} ($(server) - (0, #1)$);%
+  \draw[->] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\newcommand{\serverToClient}[3]{%
+  \path ($(client) - (0, #1)$) edge[above, align=center, minimum width=8cm] node[fill=blue!20, align=left, text width=6cm] {\psolution{\ifstrequal{#2}{+OK}{\textcolor{green!70!black}{#2}}{#2} #3}} ($(server) - (0, #1)$);%
+  \draw[<-] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+
+\begin{document}
+\begin{tikzpicture}
+\node[fill=red!20] (client) {Client};
+\node[fill=blue!20] (server) at (8, 0) {Server};
+
+\draw[] ($(client) - (0, 1)$) edge[above, ->] node {\textcolor{gray!80}{Verbindungsaufbau}} ($(server) - (0, 1)$);
+\serverToClient{2}{+OK}{POP3 server ready \textless{}domain\textgreater}
+\clientToServer{3}{USER \textless{}user\textgreater}
+\serverToClient{4}{+OK}{user accepted}
+\clientToServer{5}{PASS \textless{}password\textgreater}
+\serverToClient{6}{+OK}{pass accepted}
+\clientToServer{7}{LIST}
+  \path ($(client) - (0, 9)$) edge[above, align=center, minimum height=1.5cm, minimum width=8cm] node[fill=blue!20, align=left, text width=6cm] {\psolution{\textcolor{green!70!black}{+OK} \textless{}Nachrichten Informationen\textgreater\newline 1 bytes\newline 2 bytes}} ($(server) - (0, 9)$);%
+  \draw[<-] ($(client) - (0, 9)$) -- ($(server) - (0, 9)$);%
+\clientToServer{10}{RETR \textless{}Nummer\textgreater}
+\serverToClient{11}{+OK}{\textless{}bytes\textgreater\newline\textless{}E-Mail\textgreater}
+\clientToServer{12}{QUIT}
+\serverToClient{13}{+OK}{}
+\draw[] ($(client) - (0, 14)$) edge[above, ->] node {\textcolor{gray!80}{Verbindungsabbau}} ($(server) - (0, 14)$);
+
+\draw (client) -- ($(client) - (0, 14)$);
+\draw (server) -- ($(server) - (0, 14)$);
+\end{tikzpicture}
+\end{document}
diff --git a/Info/11/NTG/3/E-Mail/slides.md b/Info/11/NTG/3/E-Mail/slides.md
new file mode 100644
index 00000000..b8f4f6d3
--- /dev/null
+++ b/Info/11/NTG/3/E-Mail/slides.md
@@ -0,0 +1,142 @@
+---
+author: Florian Fischer
+theme: metropolis
+aspectratio: 169
+---
+
+## \faIcon{comments} Wiederholung \hfill 1/3
+
+Nimm Stellung zu folgender Aussage:
+
+\vspace{1.5cm}
+
+> Webseitenaufrufe mittels HTTP gehen immer vom Client aus.
+
+\pause
+\begin{tikzpicture}[overlay, remember picture]
+\node[rotate=3, anchor=west, xshift=1cm, yshift=-2cm] at (current page) {\Large\textcolor{green!70!black}{KORREKT!}};
+\end{tikzpicture}
+
+
+## \faIcon{comments} Wiederholung \hfill 2/3
+
+Nimm Stellung zu folgender Aussage:
+
+\vspace{0.5cm}
+
+> Folgende Anfrage und Antwort stellt eine erfolgreiche Kommunikation per HTTP dar
+
+::: {.columns}
+:::: {.column width=40%}
+### Request
+```
+GET /index.html
+Accept-Language: de
+[leere Zeile]
+```
+::::
+
+:::: {.column width=60%}
+### Response
+```
+HTTP/1.1 400 Bad Request
+Content-Type: text/html
+Content-Length: [...]
+Connection: close
+
+<html>
+...
+</html>
+```
+::::
+:::
+
+\pause
+\begin{tikzpicture}[overlay, remember picture]
+\node[rotate=3, anchor=west, xshift=1cm, yshift=-3cm] at (current page) {\Large\textcolor{red}{FALSCH!}};
+\end{tikzpicture}
+
+## \faIcon{comments} Wiederholung \hfill 2/3
+
+::: {.columns}
+:::: {.column width=50%}
+### Request
+```
+GET /index.html HTTP/1.1
+Accept-Language: de
+[leere Zeile]
+```
+::::
+
+:::: {.column width=50%}
+### Response
+```
+HTTP/1.1 200 OK
+Content-Type: text/html
+Content-Length: [...]
+Connection: close
+
+<html>
+...
+</html>
+```
+::::
+:::
+
+
+## \faIcon{comments} Wiederholung \hfill 3/3
+
+Nimm Stellung zu folgender Aussage:
+
+\vspace{1cm}
+
+> Cookies werden vom Client an den Server geschickt, damit sich dieser persönliche Einstellungen merkt. 
+
+\pause
+\begin{tikzpicture}[overlay, remember picture]
+\node[rotate=3, anchor=west, xshift=1cm, yshift=-2cm] at (current page) {\Large\textcolor{red}{FALSCH!}};
+\end{tikzpicture}
+
+## \faIcon{desktop} \faIcon{hands-helping} Arbeitsauftrag: E-Mail Versand verstehen \hfill 5 min
+
+Ihr wollt mit einander per E-Mail kommunizieren.
+\vspace{0.5cm}
+
+::: {.columns}
+:::: {.column width=50%}
+### E-Mails versenden
+Zeichne eine Skizze des Kommunikationsablaufs und der gesendeten Daten beim Versenden einer Mail mit dem **SMTP** Protokoll
+::::
+
+:::: {.column width=50%}
+### E-Mails Empfangen
+Zeichne eine Skizze des Kommunikationsablaufs und der gesendeten Daten beim Abrufen einer Mail mit dem **POP3** Protokoll
+::::
+:::
+
+\vspace{0.5cm}
+\faIcon{comments} Stellt euch gegenseitig eure Skizze und das Protokoll kurz vor.
+
+## \faIcon{desktop} \faIcon{hands-helping} Arbeitsauftrag: E-Mail Versand probieren \hfill 10 min
+
+Auf dem Mailserver existiert für jeden ein Login:
+
+\begin{tcolorbox}[colframe=blue!80]
+  \begin{itemize}
+    \item User: Vorname
+    \item Passwort: Vorname
+  \end{itemize}
+\end{tcolorbox}
+
+1. Downloade, entpacke und öffne das BlueJ-Projekt "Client" aus dem ByCS Drive Space.
+2. Starte die Main-Methode.
+3. Verbinde dich zum SMTP Server und verschicke eine Nachricht an deine Partner\*in.
+4. Verbinde dich zum POP3 Server und rufe die eben erhaltene Nachricht ab.
+
+## \faIcon{desktop} \faIcon{hands-helping} Arbeitsauftrag: E-Mail Versand implementieren
+
+\let\tightlist\relax
+1. Implementiert in der Klasse `SMTP_Client` den Kommunikations Ablauf beim Versenden einer Nachricht
+2. Implementiert in der Klasse `POP3_Client` das Abrufen einer Liste aller Nachrichten
+3. Implementiert in der Klasse `POP3_Client` das Abrufen einer Nachricht
+
diff --git a/Info/11/NTG/3/E-Mail/smtp.tex b/Info/11/NTG/3/E-Mail/smtp.tex
new file mode 100644
index 00000000..4ae0c9e7
--- /dev/null
+++ b/Info/11/NTG/3/E-Mail/smtp.tex
@@ -0,0 +1,42 @@
+\documentclass[margin=1cm, varwidth, tikz]{standalone}
+\usepackage{etoolbox}
+\input{common_options.tex}
+\input{common_packages.tex}
+\input{common.tex}
+\usetikzlibrary{calc}
+
+\newcommand{\clientToServer}[2]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=red!20, minimum width=8cm] {\psolution{#2}} ($(server) - (0, #1)$);%
+  \draw[->] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+\newcommand{\serverToClient}[3]{%
+  \path ($(client) - (0, #1)$) edge[above] node[fill=blue!20, minimum width=8cm] {\psolution{\ifnumless{#2}{400}{\textcolor{green!70!black}{#2}}{#2} #3}} ($(server) - (0, #1)$);%
+  \draw[<-] ($(client) - (0, #1)$) -- ($(server) - (0, #1)$);%
+}
+
+\begin{document}
+\begin{tikzpicture}
+\node[fill=red!20] (client) {Client};
+\node[fill=blue!20] (server) at (8, 0) {Server};
+
+\draw[] ($(client) - (0, 1)$) edge[above, ->] node {\textcolor{gray!80}{Verbindungsaufbau}} ($(server) - (0, 1)$);
+\serverToClient{2}{220}{[Server Infos]}
+\clientToServer{3}{HELO \textless{}domain\textgreater}
+\serverToClient{4}{250}{[greetings]}
+\clientToServer{5}{MAIL FROM: \textless{}sender\textgreater}
+\serverToClient{6}{250}{OK}
+\clientToServer{7}{RCPT TO: \textless{}recipient\textgreater}
+\serverToClient{8}{250}{OK}
+\clientToServer{9}{DATA}
+\serverToClient{10}{354}{End data with \textless{}CR\textgreater\textless{}LF\textgreater.\textless{}CR\textgreater\textless{}LF\textgreater}
+\clientToServer{11}{E-Mail}
+\clientToServer{12}{\texttt{\textbackslash{}r\textbackslash{}n.\textbackslash{}r\textbackslash{}n}}
+\serverToClient{13}{250}{OK}
+\clientToServer{14}{QUIT}
+\serverToClient{15}{221}{OK}
+\draw[] ($(client) - (0, 16)$) edge[above, <-] node {\textcolor{gray!80}{Verbindungsabbau}} ($(server) - (0, 16)$);
+
+\draw (client) -- ($(client) - (0, 16)$);
+\draw (server) -- ($(server) - (0, 16)$);
+\end{tikzpicture}
+\end{document}