diff --git a/assets/branch_protection_rules_error.png b/assets/branch_protection_rules_error.png new file mode 100644 index 0000000..cde4e1f Binary files /dev/null and b/assets/branch_protection_rules_error.png differ diff --git a/assets/branch_protection_rules_name.png b/assets/branch_protection_rules_name.png new file mode 100644 index 0000000..2a4bba2 Binary files /dev/null and b/assets/branch_protection_rules_name.png differ diff --git a/assets/branch_protection_rules_pr1.png b/assets/branch_protection_rules_pr1.png new file mode 100644 index 0000000..9c7dfc8 Binary files /dev/null and b/assets/branch_protection_rules_pr1.png differ diff --git a/assets/branch_protection_rules_pr2.png b/assets/branch_protection_rules_pr2.png new file mode 100644 index 0000000..7ea53f1 Binary files /dev/null and b/assets/branch_protection_rules_pr2.png differ diff --git a/assets/branch_protection_rules_push.png b/assets/branch_protection_rules_push.png new file mode 100644 index 0000000..9eb2822 Binary files /dev/null and b/assets/branch_protection_rules_push.png differ diff --git a/assets/branches.jpg b/assets/branches.jpg new file mode 100644 index 0000000..21923a9 Binary files /dev/null and b/assets/branches.jpg differ diff --git a/frame/frame1.tex b/frame/frame1.tex new file mode 100644 index 0000000..290901b --- /dev/null +++ b/frame/frame1.tex @@ -0,0 +1,33 @@ +\begin{frame} + \section{Introduction} + \frametitle{What you all do when working alone} + \begin{tikzpicture}[ + commit/.style={circle, draw, fill=orange!80, minimum size=8mm, font=\footnotesize\bfseries}, + branch/.style={rounded corners, fill=gray!20, draw=gray, font=\small\ttfamily, inner sep=4pt}, + head/.style={rounded corners, fill=cyan!20, draw=cyan!60, font=\small\ttfamily, inner sep=4pt}, + arrow/.style={-{Stealth[length=3mm]}, thick, gray}, + node distance=1.8cm +] + % Commits + \node[commit] (c1) {C1}; + \node[commit, right=of c1] (c2) {C2}; + \node[commit, right=of c2] (c3) {C3}; + \node[commit, right=of c3] (c4) {C4}; + \node[commit, right=of c4] (c5) {C5}; + + % Arrows between commits + \draw[arrow] (c1) -- (c2); + \draw[arrow] (c2) -- (c3); + \draw[arrow] (c3) -- (c4); + \draw[arrow] (c4) -- (c5); + + % Label master + \node[branch, above=0.6cm of c5] (master) {master}; + \draw[-{Stealth}, thick] (master) -- (c5); + + % Label HEAD + \node[head, above=0.4cm of master] (head) {HEAD}; + \draw[-{Stealth}, thick] (head) -- (master); + \end{tikzpicture} + +\end{frame} \ No newline at end of file diff --git a/frame/frame2.tex b/frame/frame2.tex new file mode 100644 index 0000000..22ff02b --- /dev/null +++ b/frame/frame2.tex @@ -0,0 +1,62 @@ +\begin{frame} + \frametitle{What happens when working in a group} + \begin{tikzpicture}[ + commit/.style={circle, draw, fill=orange!80, minimum size=6mm, font=\tiny\bfseries}, + conflict/.style={circle, draw, fill=red!70, minimum size=6mm, font=\tiny\bfseries}, + branch/.style={rounded corners, fill=gray!20, draw=gray, font=\tiny\ttfamily, inner sep=3pt}, + head/.style={rounded corners, fill=cyan!20, draw=cyan!60, font=\tiny\ttfamily, inner sep=3pt}, + label/.style={font=\small\bfseries, text=gray!70}, + arrow/.style={-{Stealth[length=2mm]}, thick, gray}, + node distance=1.2cm +] + + % === PC 1 (Alice) === + \node[label] at (-1.8, 0) {Alice}; + \node[commit] (a1) at (0,0) {C1}; + \node[commit, right=of a1] (a2) {C2}; + \node[commit, right=of a2] (a3) {C3}; + \node[commit, right=of a3] (a4) {C4}; + \node[commit, right=of a4] (a5) {C5}; + \draw[arrow] (a1) -- (a2); + \draw[arrow] (a2) -- (a3); + \draw[arrow] (a3) -- (a4); + \draw[arrow] (a4) -- (a5); + \node[branch, above=0.4cm of a5] (m1) {master}; + \draw[-{Stealth}, thin] (m1) -- (a5); + + % === PC 2 (Bob) - conflit === + \node[label] at (-1.8, -2.2) {Bob}; + \node[commit] (b1) at (0,-2.2) {C1}; + \node[commit, right=of b1] (b2) {C2}; + \node[commit, right=of b2] (b3) {C3}; + \node[commit, right=of b3] (b6) {C6}; + \node[conflict, right=of b6] (bx) {!!}; + \draw[arrow] (b1) -- (b2); + \draw[arrow] (b2) -- (b3); + \draw[arrow] (b3) -- (b6); + \draw[arrow, red!70] (b6) -- (bx); + \node[branch, above=0.4cm of b6] (m2) {master}; + \draw[-{Stealth}, thin] (m2) -- (b6); + \node[font=\tiny\color{red!70}, right=0.3cm of bx] {CONFLICT on push!}; + + % === PC 3 (Charlie) - conflit === + \node[label] at (-1.8, -4.4) {Charlie}; + \node[commit] (d1) at (0,-4.4) {C1}; + \node[commit, right=of d1] (d2) {C2}; + \node[commit, right=of d2] (d7) {C7}; + \node[commit, right=of d7] (d8) {C8}; + \node[conflict, right=of d8] (dx) {!!}; + \draw[arrow] (d1) -- (d2); + \draw[arrow] (d2) -- (d7); + \draw[arrow] (d7) -- (d8); + \draw[arrow, red!70] (d8) -- (dx); + \node[branch, above=0.4cm of d8] (m3) {master}; + \draw[-{Stealth}, thin] (m3) -- (d8); + \node[font=\tiny\color{red!70}, right=0.3cm of dx] {CONFLICT on push!}; + + % Dashed lines to show the remote link + \draw[dashed, gray!40, thick] (a3.south) -- (b3.north); + \draw[dashed, gray!40, thick] (a2.south) -- (d2.north); + +\end{tikzpicture} +\end{frame} \ No newline at end of file diff --git a/frame/frame3.tex b/frame/frame3.tex new file mode 100644 index 0000000..b3c940c --- /dev/null +++ b/frame/frame3.tex @@ -0,0 +1,69 @@ +\begin{frame} + \frametitle{And the miracle happens} + \framesubtitle{Branches} + \section{Branches} + + \begin{center} + \includegraphics[width=0.5\textwidth]{assets/branches.jpg} + \end{center} + +\end{frame} + +\begin{frame} + \frametitle{And the miracle happens} + \framesubtitle{What does it look like in practice?} + + \begin{tikzpicture}[ + commit/.style={circle, draw, fill=orange!80, minimum size=6mm, font=\tiny\bfseries}, + commitA/.style={circle, draw, fill=teal!60, minimum size=6mm, font=\tiny\bfseries}, + commitB/.style={circle, draw, fill=violet!60, minimum size=6mm, font=\tiny\bfseries}, + branch/.style={rounded corners, fill=gray!20, draw=gray, font=\tiny\ttfamily, inner sep=3pt}, + branchA/.style={rounded corners, fill=teal!15, draw=teal, font=\tiny\ttfamily, inner sep=3pt}, + branchB/.style={rounded corners, fill=violet!15, draw=violet, font=\tiny\ttfamily, inner sep=3pt}, + merge/.style={circle, draw, fill=orange!80, minimum size=6mm, font=\tiny\bfseries}, + arrow/.style={-{Stealth[length=2mm]}, thick, gray}, + arrowA/.style={-{Stealth[length=2mm]}, thick, teal!70}, + arrowB/.style={-{Stealth[length=2mm]}, thick, violet!70}, + label/.style={font=\small\bfseries, text=gray!70}, + node distance=1.5cm +] + + % === Master branch === + \node[commit] (c1) {C1}; + \node[commit, right=of c1] (c2) {C2}; + \node[merge, right=3.5cm of c2] (c5) {C5}; + \node[merge, right=3.5cm of c5] (c8) {C8}; + + \draw[arrow] (c1) -- (c2); + \draw[arrow] (c2) -- (c5); + \draw[arrow] (c5) -- (c8); + + \node[branch, above=0.4cm of c8] (master) {master}; + \draw[-{Stealth}, thin] (master) -- (c8); + + % === Alice's branch (upward) === + \node[commitA, above right=0.8cm and 1cm of c2] (a1) {C3}; + \node[commitA, right=of a1] (a2) {C4}; + + \draw[arrowA] (c2) -- (a1); + \draw[arrowA] (a1) -- (a2); + \draw[arrowA] (a2) -- (c5); + + \node[branchA, above=0.4cm of a2] (ba) {alice-branch}; + \draw[-{Stealth}, thin, teal] (ba) -- (a2); + \node[label, text=teal!70] at (-1.5, 0.8) {Alice}; + + % === Bob's branch (downward) === + \node[commitB, below right=0.8cm and 1cm of c5] (b1) {C6}; + \node[commitB, right=of b1] (b2) {C7}; + + \draw[arrowB] (c5) -- (b1); + \draw[arrowB] (b1) -- (b2); + \draw[arrowB] (b2) -- (c8); + + \node[branchB, below=0.4cm of b2] (bb) {bob-branch}; + \draw[-{Stealth}, thin, violet] (bb) -- (b2); + \node[label, text=violet!70] at (-1.5, -0.8) {Bob}; + +\end{tikzpicture} +\end{frame} \ No newline at end of file diff --git a/frame/frame4.tex b/frame/frame4.tex new file mode 100644 index 0000000..e9c6991 --- /dev/null +++ b/frame/frame4.tex @@ -0,0 +1,9 @@ +\begin{frame} + \frametitle{How do we name them?} + \framesubtitle{Naming convention} + \begin{itemize} + \item<1-> master: the main branch, containing production code + \item<3-> feature/xxx: feature branches, containing new features under development + \item<4-> fix/xxx: bugfix branches, containing bug fixes under development + \end{itemize} +\end{frame} \ No newline at end of file diff --git a/frame/frame5.tex b/frame/frame5.tex new file mode 100644 index 0000000..332d1d4 --- /dev/null +++ b/frame/frame5.tex @@ -0,0 +1,45 @@ +\begin{frame} + \frametitle{And how do we orchestrate all this?} + \framesubtitle{The workflow} + \begin{itemize} + \item<1-> Create a branch + \item<2-> Develop and commit + \item<3-> Push to the remote + \item<4-> Open a Pull Request + \item<5-> Team review + \item<6-> Fix if needed + \item<7-> Merge into main + \end{itemize} + + + \begin{tikzpicture}[ + step/.style={rectangle, rounded corners=4pt, draw=gray!50, fill=gray!10, minimum width=2.2cm, minimum height=0.9cm, font=\scriptsize, align=center, text=gray!80}, + active/.style={rectangle, rounded corners=4pt, draw=orange!70, fill=orange!15, minimum width=2.2cm, minimum height=0.9cm, font=\scriptsize\bfseries, align=center, text=orange!90}, + arrow/.style={-{Stealth[length=2mm]}, thick, gray!50}, + node distance=0.6cm +] + + % === Mini git diagram below === + \node[font=\scriptsize\bfseries, text=gray!60] at (0, -3.2) {Example:}; + + \node[circle, draw, fill=orange!80, minimum size=5mm, font=\tiny\bfseries] (c1) at (1.5, -3.2) {C1}; + \node[circle, draw, fill=orange!80, minimum size=5mm, font=\tiny\bfseries, right=0.8cm of c1] (c2) {C2}; + \node[circle, draw, fill=teal!60, minimum size=5mm, font=\tiny\bfseries, above right=0.5cm and 0.8cm of c2] (f1) {C3}; + \node[circle, draw, fill=teal!60, minimum size=5mm, font=\tiny\bfseries, right=0.8cm of f1] (f2) {C4}; + \node[circle, draw, fill=orange!80, minimum size=5mm, font=\tiny\bfseries, below right=0.5cm and 0.8cm of f2] (m1) {C5}; + + \draw[-{Stealth[length=2mm]}, thick, gray] (c1) -- (c2); + \draw[-{Stealth[length=2mm]}, thick, teal!70] (c2) -- (f1); + \draw[-{Stealth[length=2mm]}, thick, teal!70] (f1) -- (f2); + \draw[-{Stealth[length=2mm]}, thick, teal!70] (f2) -- (m1); + \draw[-{Stealth[length=2mm]}, thick, gray] (c2) -- (m1); + + \node[rounded corners, fill=gray!20, draw=gray, font=\tiny\ttfamily, inner sep=2pt, above=0.3cm of m1] {main}; + \node[rounded corners, fill=teal!15, draw=teal, font=\tiny\ttfamily, inner sep=2pt, above=0.3cm of f2] {feature/login}; + + % Labels PR and merge + \draw[dashed, red!40, thick] (f2) -- (m1) node[midway, right, font=\tiny, text=red!60] {PR + merge}; + +\end{tikzpicture} + +\end{frame} diff --git a/frame/frame6.tex b/frame/frame6.tex new file mode 100644 index 0000000..d970d15 --- /dev/null +++ b/frame/frame6.tex @@ -0,0 +1,34 @@ +\begin{frame} + \frametitle{And how do we prevent bad practices?} + \framesubtitle{Branch protection} + \section{Protection} + + Branch protection is a Git feature + that allows protecting certain branches against unauthorized modifications. + For example, you can protect the master branch to prevent direct commits, require code reviews, or require tests to pass before merging. +\end{frame} + +\begin{frame} + \frametitle{How do we do that?} + \framesubtitle{Branch protection} + \begin{center} + \includegraphics[width=1\textwidth]{assets/branch_protection_rules_name.png} + \end{center} +\end{frame} + +\begin{frame} + \frametitle{How do we do that?} + \framesubtitle{Branch protection} + \begin{center} + \includegraphics[width=0.6\textwidth]{assets/branch_protection_rules_push.png} + \end{center} +\end{frame} + +\begin{frame} + \frametitle{And the magic happens} + \framesubtitle{Branch protection} + \begin{center} + \includegraphics[width=1\textwidth]{assets/branch_protection_rules_error.png} + \end{center} +\end{frame} + diff --git a/frame/frame7.tex b/frame/frame7.tex new file mode 100644 index 0000000..0d9f3fb --- /dev/null +++ b/frame/frame7.tex @@ -0,0 +1,42 @@ +\begin{frame} + \frametitle{Maximum security} + \framesubtitle{Protecting pull requests} + \section{For security enthusiasts!} + + Generally, pull request settings are found in the same place as branch settings + \begin{center} + \includegraphics[width=0.6\textwidth]{assets/branch_protection_rules_pr1.png} + \includegraphics[width=0.7\textwidth]{assets/branch_protection_rules_pr2.png} + \end{center} +\end{frame} + +\begin{frame}[fragile] + \frametitle{Maximum security} + \framesubtitle{CI} + + CI (Continuous Integration) are tools that allow automating tests + on a pull request before merging it. +\end{frame} + +\begin{frame}[fragile] + \frametitle{Maximum security} + \framesubtitle{CI} + + \begin{center} + \begin{block}{.gitea/workflows/ci.yml} + \begin{verbatim} +name: CI +on: + pull_request: + branches: [master] +jobs: + check: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Validation + run: echo "All checks passed!" + \end{verbatim} + \end{block} + \end{center} +\end{frame} diff --git a/frame/frame8.tex b/frame/frame8.tex new file mode 100644 index 0000000..97f45a9 --- /dev/null +++ b/frame/frame8.tex @@ -0,0 +1,10 @@ +\begin{frame} + \frametitle{References} + \begin{itemize} + \item Git documentation: \url{https://git-scm.com/doc} + \item Pro Git book: \url{https://git-scm.com/book/en/v2} + \item GitHub documentation: \url{https://docs.github.com/en} + \item Oh Shit, Git!: \url{https://ohshitgit.com/} + \item Datacamp: \url{https://www.datacamp.com/fr/tutorial/github-and-git-tutorial-for-beginners} + \end{itemize} +\end{frame} \ No newline at end of file diff --git a/main.tex b/main.tex index 02ccf8a..6af68d9 100644 --- a/main.tex +++ b/main.tex @@ -1,6 +1,11 @@ \documentclass[aspectratio=1610]{beamer} + +\usepackage{tikz} + +\usetikzlibrary{positioning, arrows.meta} \usetheme{Madrid} \usecolortheme{beaver} + \title{Collaborating with Git} \author{Louis Gallet} \institute{EPITA} @@ -8,4 +13,21 @@ \begin{document} \frame{\titlepage} + +% frame 1 + +\begin{frame} + \frametitle{Summary} + \tableofcontents +\end{frame} + +\input{frame/frame1.tex} +\input{frame/frame2.tex} +\input{frame/frame3.tex} +\input{frame/frame4.tex} +\input{frame/frame5.tex} +\input{frame/frame6.tex} +\input{frame/frame7.tex} +\input{frame/frame8.tex} + \end{document} \ No newline at end of file