\documentclass[accentcolor=tud9c,colorbacktitle]{tudbeamer}

\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage[T1]{fontenc}

\begin{document}

\title{MIT AppInventor 2}
\subtitle{Android Apps zum selbst bauen}
\author{Fachschaft Informatik}

\institute{Fachbereich Informatik, TU Darmstadt}

\date{\today}

\begin{titleframe}
\end{titleframe}

\begin{frame}
\frametitle{Ein Malprogramm - so geht's}
	\vspace{5mm}
	1. Ein neues Projekt erstellen: Klick auf \textit{Start new project}. \\
	\vspace{5mm}
	\includegraphics[width=\textwidth]{img/erstellen} \\
	\vspace{5mm}
	2. Dem Projekt einen (sinnvollen) Namen geben.
\end{frame}

\begin{frame}
\frametitle{Ein leeres Projekt}
	\includegraphics[width=\textwidth]{img/uebersicht}
\end{frame}

\begin{frame}
\frametitle{Designer Ansicht}
	\vspace{5mm}
	So wie hier wird die App aussehen. \\
	\vspace{5mm}	
	In diesem Fall benötigt: vier Buttons, eine Leinwand. \\
	\vspace{5mm}
	3. Ein \textit{HorizontalArrangement} Element aus der Gruppe Layout hinzufügen. Damit können Dinge nebeneinander platziert werden. \\
	\vspace{5mm}
	4. Drei Buttons aus der Kategorie \textit{User Interface} in das \textit{HorizontalArrangement} ziehen. \\
\end{frame}

\begin{frame}
\frametitle{So sieht's aus}
	\begin{minipage}[t]{0.49\textwidth}
		\includegraphics[width=\textwidth]{img/arrangement}	
	\end{minipage}
	\begin{minipage}[t]{0.49\textwidth}
		\includegraphics[width=\textwidth]{img/buttons}
	\end{minipage}
\end{frame}

\begin{frame}
\frametitle{Aussehen der Buttons anpassen}
	Ziel: Ein Button für je \textit{Blau}, \textit{Rot} und \textit{Grün}.\\
	\vspace{5mm}
	5. Rechts unter \textit{Components} jeden Button auswählen, rechts oben die Farbe, rechts unten den Text anpassen. \\
	\vspace{5mm}
	\includegraphics[height=0.6\textheight]{img/buttons_benennen}
\end{frame}

\begin{frame}
\frametitle{Die Leinwand}
	6. Aus \textit{Drawing and Animation} einen \textit{Canvas} unter die drei Buttons ziehen und die Höhe und Breite anpassen. (Höhe auf 300 Pixel, Breite auf \textit{Fill Parent}) \\
	\vspace{5mm}
	\begin{minipage}[t]{0.59\textwidth}
		\includegraphics[height=0.7\textheight]{img/canvas}
	\end{minipage}
	\begin{minipage}[t]{0.39\textwidth}
		\includegraphics[height=0.7\textheight]{img/canvas_anpassen}
	\end{minipage}
\end{frame}

\begin{frame}
\frametitle{Tafel wischen}
	7. Einen Button mit der Aufschrift \textit{Löschen} unter der Leinwand hinzufügen. \\
	\vspace{5mm}
	\includegraphics[height=0.75\textheight]{img/layout}
\end{frame}

\begin{frame}
\frametitle{Namen}
	8. Namen für alle Elemente vergeben: Unter Components jedes Element markieren, unten die Schaltfläche \textit{Rename} anklicken und einen neuen Namen eintragen.
\end{frame}

\begin{frame}
\frametitle{Blöcke}
	9. Oben rechts auf \textit{Blocks} klicken. In dieser Ansicht wird Funktionalität festgelegt. \\
	\vspace{5mm}
	
	\includegraphics[width=0.75\textwidth]{img/coding}
	
	\vspace{5mm}
	Links befinden sich einzelne Blöcke, aus denen man ein Programm zusammenbaut. Blöcke für die erstellten Elemente befinden sich unter \textit{Screen 1} und den vergebenen Namen. \\ 
\end{frame}

\begin{frame}
\frametitle{Erste Blöcke}
	10. Block für das Anklicken einen Buttons in die \textit{Viewer} Fläche ziehen.
	\begin{center}
		\includegraphics[width = 0.5 \textwidth]{img/button_logik}
	\end{center}
	Der Inhalt dieses Blocks wird aufgerufen, wenn der Button \textit{KnopfBlau} angetippt wird.	
\end{frame}

\begin{frame}
\frametitle{Inhalt des Blocks}
	11. Aus dem \textit{Canvas} Element den Block \textit{set Leinwand.PaintColor to} in den Block ziehen. \\
	\vspace{5mm}
	12. Aus den \textit{Built-in} Blöcken noch die Farbe anhängen.\\
	\vspace{5mm}
	\begin{minipage}[t]{0.4\textwidth}
		\includegraphics[width=0.9\textwidth]{img/leinwand_farbe}
	\end{minipage}
	\begin{minipage}[t]{0.58\textwidth}
		\includegraphics[width=\textwidth]{img/take_color}
	\end{minipage}
\end{frame}

\begin{frame}
\frametitle{Alle Farbknöpfe}
	13. Mit den anderen beiden Farbknöpfe genauso vorgehen.\\
	\vspace{5mm}
	14. Dem \textit{Löschen} Button die Aktion \textit{call Leinwand.clear} zuordnen.\\
	\vspace{5mm}
	\begin{center}
		\includegraphics[width=0.4\textwidth]{img/code_done}
	\end{center}
\end{frame}

\begin{frame}
\frametitle{Malen}
	\vspace{5mm}
	15. \textit{when Leinwand.Dragged} Block hinzufügen. Die orangenen Bauteile (z.~B.~ \textit{prevX}) sind Variablen. \\
	\vspace{5mm}
	16. Den Weg, den der Finger genommen hat nachzeichnen, indem kleine Linien von der letzten zur aktuellen Position des Fingers gezeichnet werden. Die Positionen sind durch \textit{prevX} und \textit{prevY} für die alte Position sowie \textit{currentX} und \textit{currentY} für die neue Position gegeben.

\end{frame}

\begin{frame}
\frametitle{Linien malen}
	\vspace{5mm}
	13. \textit{call Leinwand.DrawLine} Baustein: Dem muss die Fingerposition übergeben werden. Mit der Maus über die jeweiligen Variablen fahren, wenn das Menü auftaucht auf \textit{get <entsprechender Variablenname>} klicken und das Bauteil an der richtigen Stelle einhängen.
	\includegraphics[width = \textwidth]{img/line_easy}
\end{frame}

\begin{frame}
\frametitle{Punkte malen}
	\textit{when Leinwand.Touched} Baustein: kennt die Position, an der die Leinwand angetippt wurde. \\
	\vspace{5mm}
	14. Einen \textit{call Leinwand.DrawCircle} einfügen. Dieser sorgt dafür, dass ein Kreis mit dem Radius \textit{radius} und dem Mittelpunkt bei \textit{centerX} und \textit{centerY} gemalt wird.\\ 
	\vspace{5mm}
	Zahlen für den Radius sind bei den \textit{Built-In} Blocks unter \textit{Math}.\\
	\begin{center}
		\includegraphics[width = 0.6 \textwidth]{img/draw_block_number}
	\end{center}
\end{frame}

\begin{frame}
\frametitle{Das Ergebnis}
	Der Code ist fertig, es bleibt nur noch, die App auf das Smartphone zu übertragen:\\
	
	Hierzu klicken wir oben unter \textit{Connect} auf \textit{AI Companion}.
	Den angezeigten QR-Code nur noch mit dem \textit{MIT AI2 Companion} App auf dem Smartphone öffnen und die selbstgeschrieben App wird auf das Smartphone übertragen und ausgeführt.\\
	\vspace{5mm}
	Änderungen an der App werden von jetzt an auf das Smartphone übertragen, somit kann man schnell und einfach weitere Funktionen einbauen oder weitere hinzufügen.
		\begin{center}
			\includegraphics[width = 0.5 \textwidth]{img/connecting}
		\end{center}
\end{frame}

\begin{frame}
\frametitle{Vielen Dank dem Sonderforschungsbereich MAKI für die Bereitstellung der Smartphones!}
		\begin{center}
			\includegraphics[width=0.25\textwidth]{img/maki}
		\end{center}
\end{frame}

\end{document}