Commit fbba4642 authored by Lukas Nagel's avatar Lukas Nagel
Browse files

show previouse slides on final slide

parent 4e6119e4
......@@ -84,7 +84,8 @@ $(grafiken): grafiken/theme.tex
$(versionsgraphen) git-object: grafiken/versiongraph.tex
$(presentation): $(grafiken) $(bilder) presentation/theme.tex
$(presentation): presentation/slides-wrapper.pdf
presentation/slides-wrapper.pdf: $(grafiken) $(bilder) presentation/theme.tex
$(paper): paper/paper.md $(grafiken)
paper/paper.md: references.bib
......
\documentclass[]{beamer}
\include{theme}
\title[Git \& GitHub]{Versionskontrolle mit Git und GitHub}
\author{Lukas Nagel}
\email{lukasngl@mail.upb.de}
\source{git.cs.upb.de/lukasngl/itt}
\date[ITT WS21/22]{IT Technologie Trends WS21/22}
\begin{document}
%
% Titelseite
%
\setbeamertemplate{footline}{}
\begin{frame}
\titlepage
\end{frame}
\setbeamertemplate{footline}{\footline}
\setcounter{framenumber}{0}
%
% Überblick über git
%
\subsection{Was ist Git?}
\begin{frame}
\frametitle{\subsecname}
\begin{image}[0.7]
\img{xkcd_git.png}
\end{image}
\center
(\url{xkcd.com/1597})
\end{frame}
\section{Überblick über git}
\begin{frame}
\frametitle{\subsecname}
\code{git} ist ein Versionsverwaltungssystem\\
\begin{itemize}
\item \emph{Versionsverwaltung:} System zur Erfassung von Änderungen an
Dokumenten
\item Neue Version nach logisch zusammenhängender Menge von Änderungen
explizit durch den Nutzer
\item Versionen liegen im \code{Repository} (kurz: Repo)
\end{itemize}
\end{frame}
%
% Vorstellung zu lösender Probleme
%
\subsection{Welche Probleme löst git?}
\begin{frame}
\frametitle{\subsecname}
\keyword{\color<2->{codegray}Alle Versionen bleiben erreichbar}\\
\only<1>{\begin{itemize}
\item Welche war die letzte lauffähige Version?
\item Modul das später wichtig ist, wurde gelöscht
\item Neue Features ausprobieren
\end{itemize}}
\keyword{\color<3->{codegray}Versionsgeschichte Nachvollziehbar}\\
\only<2>{\begin{itemize}
\item Wann wurde eine Änderung vorgenommen?
\item Warum wurde die Funktion entfernt?
\item Wer hat den Absatz geschrieben?
\end{itemize}}
\keyword{\color<4->{codegray}Effizientes Verzweigen}\\
\only<3>{\begin{itemize}
\item Mehrere Features in eigenem Zweigen
\item Strukturierte Versionsgeschichte
\item Einfaches zusammenführen divergierter Zweige
\end{itemize}}
\keyword{Kollaboration}
\only<4>{\begin{itemize}
\item Mechanismen zum synchronisieren verteilter Repos
\item Änderungen werden am lokalen Repo vorgenommen
\item Viele Workflows möglich
\end{itemize}}
\end{frame}
\subsection{Dezentrale Topologie}
\begin{frame}
\frametitle{\subsecname}
\code{git} ist dezentral
\begin{itemize}
\item Jeder Nutzer hat eigenes \code{lokales} Repository
\item Repositories anderer Nutzer sind \code{remotes}
\item Repositories können untereinander synchronisiert werden
\item Häufig (aber nicht Notwendig): Ein Hauptrepo
\end{itemize}
\end{frame}
\subsection{Arbeitsverzeichnis, Index und Repository}
\begin{frame}
\frametitle{\subsecname}
\begin{image}[0.7]
\img{../grafiken/concept-overview.pdf}
\end{image}
\end{frame}
\subsection{Versionsgeschichte}
\begin{frame}
\frametitle{\subsecname}
Die Menge aller \code{commit}s, ergibt die Versionsgeschichte als \code{DAG}
\begin{itemize}
\item<3-> Mehrere Vorgänger bzw. Nachfolger: \code{Zweig}e (\code{branches})
\item<4> Zeiger auf commits: Spitze des \code{branches}
\item<4> \code{HEAD}: Symbolische Referenzen auf aktuellen Zweig
\item<4> Zeiger wird mit jedem commit vorwärts bewegt
\end{itemize}
\center
\begin{images}[0.7]
\only<1>{\img{../grafiken/example-graph-step00}}%
\only<2>{\img{../grafiken/example-graph-step01}}%
\only<3>{\img{../grafiken/example-graph-step02}}%
\only<4>{\img{../grafiken/example-graph-step03}}%
\end{images}
\end{frame}
%
% Git Objekte
%
\subsection{Git Objekt Modell}
\begin{frame}
\frametitle{\subsecname}
\begin{itemize}
\item Git speichert intern \code{objekt}e
\item Referenz auf Objekte durch \code{SHA1-Hash} des Zielobjekts
\end{itemize}
\center
\begin{image}[0.7]
\img{../grafiken/git-object}
\end{image}
\end{frame}
\subsection{Implikation}
\begin{frame}
\frametitle{\subsecname}
\begin{itemize}
\item Integritäts Mechanismus ähnlich zu Block Chain \\
jeder commit Hash enthält:
\begin{itemize}
\item Hash des \code{tree}s und somit Hashes der \code{blob}s
\item Hashes der Vorgänger
\end{itemize}
\item Deduplizierung: Objekte mit gleichem Inhalt werden nur einmal gespeichert
\item Umbenennung muss nicht gesondert behandelt werden, kleine Änderung im \code{tree} Objekt
\item Effizienz: Branches benötigen nur Zeiger
\end{itemize}
\end{frame}
%
% Anwendungs Beispiel
%
\section{Anwendungsbeispiel}
\begin{frame}
\frametitle{\secname}
\begin{Beispiel}
\begin{itemize}
\item Alice und Bob arbeiten für eine Vorlesung zusammen
\item Ein Algorithmus soll implementiert und Bewiesen werden
\begin{itemize}
\item Dokument: \code{proof.tex}
\item Implementierung: \code{algo.py}
\end{itemize}
\item Sie wollen \code{git} zur Versionsverwaltung verwenden
\end{itemize}
\end{Beispiel}
\end{frame}
\subsection{Initialisierung}
\begin{frame}[fragile]
\frametitle{\subsecname}
\begin{Beispiel}
Zunächst muss das Repository initialisiert werden:
\begin{commandline}
\cmd{ls -a} & \cmt{Zeige Verzeichnis Inhalt an} \\
\out{proof.tex algo.py} \\
\cmd{git init} & \cmt{Initialisiere Repo} \\
\cmd{ls -a} & \cmt{.git Verzeichnis wurde angelegt} \\
\out{\textbf{.git} proof.tex algo.py} \\
\end{commandline}
\end{Beispiel}
\end{frame}
\subsection{Status anzeigen}
\begin{frame}[fragile]
\frametitle{\subsecname}
\begin{Beispiel}
Der sehr nützliche Befehl \code{status} gibt schnellen Überblick
\begin{commandline}
\cmd{git status} & \cmt{Ausgabe leicht gekürzt} \\
\out{Auf Branch master} \\
\out{} \\
\out{Noch keine Commits} \\
\out{} \\
\out{Unversionierte Dateien:} \\
\out{algo.py} \\
\out{proof.tex} \\
\out{} \\
\out{nichts zum Commit vorgemerkt} \\
\end{commandline}
\end{Beispiel}
\end{frame}
\subsection{Dateien versionieren}
\begin{frame}[fragile]
\frametitle{\subsecname}
\begin{Beispiel}
\begin{commandline}
\cmd{git add} proof.tex algo.py & \cmt{zum index hinzufügen} \\
\cmd{git status} & \cmt{Ausgabe gekürtzt} \\
\out{[...]} \\
\out{Zum Commit vorgemerkte Änderungen:} \\
\out{~~~~neue Datei: algo.py} \\
\out{~~~~neue Datei: proof.tex} \\
\cmd{git commit -m} \str{inital} & \cmt{Änderungen committen} \\
\out{[master (Root-Commit) 4db27dd] initial} \\
\out{~2 files changed, 22 insertions(+)} \\
\out{~create mode 100755 algo.py} \\
\out{~create mode 100644 proof.tex} \\
\end{commandline}
\end{Beispiel}
\end{frame}
\subsection{Änderungen versionieren}
\begin{frame}[fragile]
\frametitle{\subsecname}
\begin{Beispiel}
\begin{commandline}
\cmd{vim} algo.py & \cmt{nach pep8 formatieren} \\
\cmd{git add} algo.py & \cmt{Änderung in index} \\
\uncover<2>{\cmd{git commit -m} \str{pep8} & \cmt{Änderungen committen} \\}
\end{commandline}
\end{Beispiel}
\begin{images}
\only<1>{\img{../grafiken/ex1-graph-precommit}}%
\only<2>{\img{../grafiken/ex1-graph}}%
\end{images}
\end{frame}
%
% Branches
%
\section{Verzweigung}
\subsection{\secname}
\begin{frame}
\frametitle{\subsecname}
\begin{image}[0.3]
\img{../grafiken/example-graph-hl-branch}
\end{image}
Neuen Branch erstellen
\begin{commandline}
\cmd{git branch <branchname>} & \\
\end{commandline}
~\\
Zum branch wechseln
\begin{commandline}
\cmd{git checkout <branchname>} & \\
\end{commandline}
\end{frame}
\subsection{Beispiel}
\begin{frame}
\frametitle{\subsecname}
\begin{Beispiel}
Der Algorithmus ist extrem langsam,\\
Alice probiert ihn durch Vorsortieren zu beschleunigen
\begin{commandline}
\visible<1->{\cmd{git checkout -b} \str{performance}} & \\
\visible<1->{\cmd{vim} algo.py} & \\
\visible<1->{\cmd{git add} algo.py} & \\
\visible<2->{\cmd{git commit -m} \str{presort input}} & \\
\end{commandline}
\usepackage{graphicx}
\newcommand{\showslide}[2][0.4]%
{
\fcolorbox{black!30}{white}{
\includegraphics[page=#2, width=#1\textwidth]{slides-wrapper}%
}%
}
\newcommand{\finalslide}%
{
\setbeamertemplate{footline}{}
\begin{frame}
\center
\begin{images}[0.4]
\only<1>{\img{../grafiken/ex2-graph-precommit}}%
\only<2>{\img{../grafiken/ex2-graph}}%
\end{images}
\end{Beispiel}
\end{frame}
\subsection{Mergen}
\begin{frame}
\frametitle{\subsecname}
\begin{image}[0.3]
\img{../grafiken/example-graph-hl-merge}
\end{image}
\begin{itemize}
\item Ein Zweig soll in einen anderen integriert werden
\item Größtenteils automatisch
\item Konflikte müssen manuell behoben werden
\begin{itemize}
\item z.B. wenn selbe Zeile verändert wurde
\item Konflikte werden in betroffener Datei markiert
\end{itemize}
\item Häufigste Methoden: Fast Forward und Drei-Wege-Merge
\end{itemize}
\end{frame}
\subsection{Fast-Forward Merge}
\begin{frame}
\frametitle{\subsecname}
Branch \code{A} soll in \code{B} gemerged werden
\begin{itemize}
\item Nur möglich wenn B direkter Vorgänger von A
\item Dann Zeiger von branch B auf A verschieben
\item Erzeugt keinen Merge Commit
\end{itemize}
\center
\begin{images}
\only<1>{\img{../grafiken/merge-fast-forward-premerge}}%
\only<2>{\img{../grafiken/merge-fast-forward}}%
\end{images}
\end{frame}
\subsection{3-Wege-Merge}
\begin{frame}
\frametitle{\subsecname}
Branch \code{A} soll in \code{B} gemerged werden,
ihr nächster gemeinsamer Vorgänger ist \code{C6D765F}
\begin{itemize}
\item Erzeugt neuen Commit mit Vorgänger
\code{A} und \code{B}
\item branch \code{B} zeigt nun auf diesen Commit
\item \code{tree} des Commits enthält gemergete Version
\end{itemize}
\center
\begin{images}
\only<1>{\img{../grafiken/merge-three-way-premerge}}%
\only<2>{\img{../grafiken/merge-three-way}}%
\end{images}
\end{frame}
\subsection{Beispiel merge}
\begin{frame}
\begin{Beispiel}
\begin{commandline}
\cmd{git checkout} master & \\
\uncover<2>{\cmd{git merge} performance & }
\end{commandline}
\end{Beispiel}
\center
\begin{images}[0.4]
\only<1>{\img{../grafiken/ex3-graph-premerge}}%
\only<2>{\img{../grafiken/ex3-graph}}%
\end{images}
\end{frame}
%
% Remotes
%
\section{Remotes}
\begin{frame}
\frametitle{\secname}
\begin{itemize}
\item git kann lokale mit remote Repositories synchronisieren
\item \code{remote} wird mit Name und URL konfiguriert
\item branches des \code{remote}s sind lokal \code{<name>/<branch>}
\end{itemize}
~\\
Häufig kopiert man ein entferntes Repository.
\begin{commandline}
\cmd{git clone <url>} & \cmt{name defaults to origin} \\
\end{commandline}
\end{frame}
\subsection{Grundlegende Operationen}
\begin{frame}
\frametitle{\subsecname}
Remote zu bestehendem Repo hinzufügen
\begin{commandline}
\cmd{git remote add} <name> <url> & \\
\end{commandline}
~\\
Änderungen von Remote lesen
\begin{commandline}
\cmd{git fetch} <name> <branch> & \\
\cmd{git pull} <name> <branch> & \cmt{zusätzlicher merge} \\
\end{commandline}
~\\
Änderungen an Remote schicken
\begin{commandline}
\cmd{git push} <name> <branch> & \\
\end{commandline}
\end{frame}
\subsection{Beispiel}
\begin{frame}
\frametitle{\subsecname}
Bob will Änderungen von Alice in sein lokales Repo einpflegen
\begin{Beispiel}
\begin{commandline}
\visible<1->{\cmd{git remote add} alice \str{git.upb.de/alice/bogo}} & \\
\visible<2->{\cmd{git fetch} alice master} & \\
\visible<3->{\cmd{git merge} alice/master} & \\
\end{commandline}
\center
\begin{images}[0.4]
\only<1>{\img{../grafiken/ex4-graph-prefetch}}%
\only<2>{\img{../grafiken/ex4-graph-premerge}}%
\only<3>{\img{../grafiken/ex4-graph}}%
\end{images}
\end{Beispiel}
\end{frame}
%
% Überblick über GitHub
%
\section{\faGithub\ GitHub}
\begin{frame}
\frametitle{\secname}
\begin{itemize}
\item Größter Hoster für Open Source git Projekte
\item Viele zusätzliche Services
\begin{itemize}
\item Issues
\item Wiki
\item Actions
\item Pages
\end{itemize}
\item Projekte werden Nutzern untergeordnet
\begin{itemize}
\item Ein Hauptrepo
\item Vereinfacht beitragen von Änderungen
\item URL Schema: \code{github.com/<user>/<project>}
\end{itemize}
\end{itemize}
\end{frame}
%
% Kollaboration in GitHub über Forks und Pull Request
%
\subsection{Forks und Pullrequests}
\begin{frame}
\frametitle{\subsecname}
Forks und Pull Requests entsprechen einem abgewandeltem Integration-Manager-Workflows:
\center
\begin{image}[0.8]
\img{../grafiken/github-workflow}
\end{image}
\end{frame}
\section{Automatisierung}
\subsection{GitHub Actions}
\begin{frame}
\frametitle{\subsecname}
\begin{images}[0.7]
\only<+>{\img{../grafiken/github-actions-step00}}%
\only<+>{\img{../grafiken/github-actions-step01}}%
\only<+>{\img{../grafiken/github-actions-step02}}%
\only<+>{\img{../grafiken/github-actions-step03}}%
\end{images}
\end{frame}
\subsection{Bsp.: Code Stil Richtlinien durchsetzen}
\begin{frame}
\frametitle{\subsecname}
\begin{commandline}
\cmd{cat} .github/workflows/codestyle.yml & \\
\out{name: Besipiel Workflow} \\
\out{on: pullrequest} \\
\out{jobs:} \\
\out{~~name: Check Code Style} \\
\out{~~runs-on: ubuntu-latest} \\
\out{~~steps:} \\
\out{~~~-~name: Setup} \\
\out{~~~~~[...]} \\
\out{~~~-~name: Run Flake8} \\
\out{~~~~~uses: suo/flake8@releases/v1} \\
\end{commandline}
\begin{image}[0.3]
\img{github-action-flake8.png}
\end{image}
\center\tiny(\url{https://github.com/suo/flake8-github-action})
\end{frame}
\subsection{Semantische Konflikte}
\begin{frame}
\frametitle{\subsecname}
\begin{itemize}
\item Rein Textuelle Konflikte werden automatisch erkannt
\item Semantische entstehen bei paralleler Entwicklung
\begin{itemize}
\item \code{statisch}: z.B. Name der Methode geändert,
anderer Branch verwendet alten Namen.
\item \code{dynamisch}: z.B. Server antwortet \texttt{json}, Client erwartet \texttt{XML}
\end{itemize}
\item Erkennbar durch statische \code{Analyse} und automatische \code{Tests}
\item Pull Request kann somit \code{Action} triggern, die dies erkennt
\item Contributer bzw. Maintainer können nun Änderungen einpflegen,
die eventuelle Konflikte lösen
\end{itemize}
\end{frame}
\section{Fazit}
\subsection{Was sind die Vorteile?}
\begin{frame}
\frametitle{\subsecname}
\begin{itemize}
\item git hilft dabei die Versionsgeschichte nachvollziehen
\item branching erlaubt nebenläufige Entwicklung
\item Mit git ist einpflegen von Änderungen einfach
\item GitHub bietet einen einfachen Weg Projekte zu veröffentlichen und bei anderen Änderungen beizutragen
\item GitHub erlaubt Bedienung ohne Kommandozeile
\item GitHub macht es einfach Semantische Konflikte zu erkennen
\end{itemize}
\end{frame}
\subsection{Wo liegen die Probleme?}
\begin{frame}
\frametitle{\subsecname}
\begin{itemize}
\item GitHub ist selbst nicht Open Source und gehört zu MS
\begin{itemize}
\item Alternativen: z.B. GitLab
\end{itemize}
\item Bedienung äußert Komplex
\begin{itemize}
\item "unusually rich command set"
\item Bedienung über Kommandozeile \\
(Natürlich ist es so effizienter und automatisierbar)
\item GUIs und alternative CLIs existieren
\end{itemize}
\item und...
\end{itemize}
\end{frame}
\begin{frame}
\frametitle{\subsecname}
\center
Digitale Signaturen möglich aber nicht verpflichtend
\begin{figure}
\includegraphics[width=0.8\textwidth]{kinda-sus.png}
\end{figure}
\tiny(\url{https://github.com/Amog-OS/AmogOS/commit/5eaa2b0a15b4c4e63b790895c92db3361fed03d9})
\end{frame}
\end{document}
\begin{tabular}{cc}
\showslide{13} & \showslide{38} \\
~ & ~ \\
\showslide{45} & \showslide{46} \\
\end{tabular}
\end{frame}
}
\input{slides}
\documentclass[]{beamer}
\input{slides}
\include{theme}
\providecommand{\finalslide}{}
\title[Git \& GitHub]{Versionskontrolle mit Git und GitHub}
\author{Lukas Nagel}
\email{lukasngl@mail.upb.de}
\source{git.cs.upb.de/lukasngl/itt}
\date[ITT WS21/22]{IT Technologie Trends WS21/22}
\begin{document}
%
% Titelseite
%
\setbeamertemplate{footline}{}
\begin{frame}
\titlepage
\end{frame}
\setbeamertemplate{footline}{\footline}
\setcounter{framenumber}{0}
%
% Überblick über git
%
\subsection{Was ist Git?}
\begin{frame}
\frametitle{\subsecname}
\begin{image}[0.7]
\img{xkcd_git.png}
\end{image}
\center
(\url{xkcd.com/1597})
\end{frame}
\section{Überblick über git}
\begin{frame}
\frametitle{\subsecname}
\code{git} ist ein Versionsverwaltungssystem\\
\begin{itemize}
\item \emph{Versionsverwaltung:} System zur Erfassung von Änderungen an
Dokumenten
\item Neue Version nach logisch zusammenhängender Menge von Änderungen
explizit durch den Nutzer
\item Versionen liegen im \code{Repository} (kurz: Repo)
\end{itemize}
\end{frame}
%
% Vorstellung zu lösender Probleme
%
\subsection{Welche Probleme löst git?}
\begin{frame}
\frametitle{\subsecname}
\keyword{\color<2->{codegray}Alle Versionen bleiben erreichbar}\\
\only<1>{\begin{itemize}
\item Welche war die letzte lauffähige Version?
\item Modul das später wichtig ist, wurde gelöscht
\item Neue Features ausprobieren
\end{itemize}}