diff --git a/materials/Makefile b/materials/Makefile index a25d23466d11b56330547fa6821c8cd650d0ca78..8efe7af136cf021175ef5fcb7ddab935d65b5707 100644 --- a/materials/Makefile +++ b/materials/Makefile @@ -1,22 +1,43 @@ default: build -build: out/slides.pdf out/sheet_local.pdf +build: out/slides.pdf out/sheet_local.pdf out/sheet_team.pdf out/sheet_advanced.pdf out/sheet_internals.pdf -out/slides.pdf: slides.typ +out/slides.pdf: slides.typ slides/local.typ slides/team.typ mkdir -p out typst compile slides.typ out/slides.pdf -out/sheet_local.pdf: sheet_local.typ +out/sheet_local.pdf: sheet_local.typ sheet_template.typ global.typ mkdir -p out typst compile sheet_local.typ out/sheet_local.pdf +out/sheet_team.pdf: sheet_team.typ sheet_template.typ global.typ + mkdir -p out + typst compile sheet_team.typ out/sheet_team.pdf + +out/sheet_advanced.pdf: sheet_advanced.typ sheet_template.typ global.typ + mkdir -p out + typst compile sheet_advanced.typ out/sheet_advanced.pdf + +out/sheet_internals.pdf: sheet_internals.typ sheet_template.typ global.typ + mkdir -p out + typst compile sheet_internals.typ out/sheet_internals.pdf + open: out/slides.pdf xdg-open out/slides.pdf watch_local: typst watch sheet_local.typ out/sheet_local.pdf +watch_team: + typst watch sheet_team.typ out/sheet_team.pdf + +watch_advanced: + typst watch sheet_advanced.typ out/sheet_advanced.pdf + +watch_internals: + typst watch sheet_internals.typ out/sheet_internals.pdf + watch_slides: typst watch slides.typ out/slides.pdf diff --git a/materials/slides.typ b/materials/slides.typ index c89e54ab47789bf857a8706a7b76c60e3573a6e2..da9296691e0f4f3c184cfc2ce85f8dd75aa3830d 100644 --- a/materials/slides.typ +++ b/materials/slides.typ @@ -49,468 +49,6 @@ #title-slide() -= Lokales Git -== Motivation -#image("images/Vortragsversionen.png") - -== Motivation - -#speaker-note[ - Warum solltet ihr ein Versionskontrollsystem benutzen? - - Das hier links: So sah meine Versionskontrolle 2016 aus. Villeicht habt ihr so etwas schon mal gesehen oder verwendet. - Ich war mehrfach in einem Zustand gewesen, wo nichts mehr funktionierte und ich mich nicht mehr erinnern konnte, - was ich jetzt alles verändert hatte seit das Programm das letze Mal funktionierte. - Ich hatte also gemerkt, dass es keine gute Idee war immer alles zu überschreiben ohne die funktionierenden Zwischenstände zu speichern, - deshalb war das hier meine Versionskontrolle. - Jedes Mal wenn ich eine neues Feature implementiert hatte, habe ich den Ordner kopiert und eine neue Versionsnummer vergeben. - Und von da an habe ich dann im neuen Ordner weitergearbeitet. - - Das ist ein sehr schlechtes System, aber es zeigt was wir eigentlich beim Entwickeln brauchen und welche Anforderung wir an ein Versionskontrollsystem haben. - - 1. Es sollte möglich sein alte Zustände wiederherzustellen. - Ich will mir nicht merken was ich gerade geändert habe und was ich da vorher hatte, als es noch funktionierte. - ich will frei experimentieren können, ohne die zuvor funktionierende Version zu verlieren. - - 2. Es sollte leicht sichtbar sein, was sich verändert hat. Im Idealfall sollte ich auch sehen warum ich es geändert habe. Dazu kommen wir später, wie eine gute Commit-Message aussieht. - - 3. Es sollte nicht das ganze Projekt bei jeder Änderung kopiert werden, sodass ich die genau gleiche Datei zigmal in jedem Ordner habe. - Nur was ich geändert habe sollte auch zusätzlichen Platz einnehmen. - - 4. Und was bei größeren Projekten wichtig wird. Mehrer Personen sollten zeitgleich zusammenarbeiten können ohne sich in die Quere zu kommen. Das kriegen manche Unternehmen auch trotz Git nicht hin, aber ich versuche hier auch ein bisschen die Worst-Practices zu erwähnen, wie ihr Git nicht verwenden solltet. -] - -// Worst-Practices: -// - Split one project into multiple repository despite the components being tightly coupled (see point 1 snd 2 of worst practice document) -// - Commit autogenerated files (see point 3) -// - Pollute your main branch with dysfunctional debug commits (point 6) - -#grid( - columns: (60%, 40%), - image("images/Manual Versions.png"), - [ - #pause - - Es sollte einfach sein beliebige alte Zustände anzusehen und wiederherzustellen - #pause - - Es sollte leicht sichtbar sein, was sich verändert hat - #pause - - Unveränderte Dateien sollten keinen zusätzlichen Speicherplatz verbrauchen - #pause - - Mehrer Personen sollten zeitgleich zusammenarbeiten können ohne sich in die Quere zu kommen - ], -) - -== Beispiel -// TODO: Programmaufbau in zwei Dateien zeigen -#image("images/italogeier.svg", height: 60%) -#text(font: "New Computer Modern")[ - Wir $phi$lmen Vorlesungen und sorgen in Zusammenarbeit mit der - Fakultät für eine langfristige $phi$nanzielle Eξstenzgarantie für die - dies erledigende Φdeo AG. -] - -== Beispiel - Programmaufbau -#grid( - columns: (auto, auto), - row-gutter: 8pt, - image("icons/Docs.svg", height: 1.2em), - `greekify.py`, - [], - ```py - with open(file, 'r') as fd: - content: str = fd.read() - content = greekify_replace(content) - print(content) - ``` -) - -#v(1fr) - -#grid( - columns: (auto, auto), - row-gutter: 8pt, - image("icons/Docs.svg", height: 1.2em), - `replace.py`, - [], - ```py - def greekify_replace(input: str) -> str: - return input.replace("phi", "φ").replace("Phi", "Φ") - ``` -) - -#v(1fr) - -#grid( - columns: (auto, auto), - row-gutter: 8pt, - image("icons/Docs.svg", height: 1.2em), - `test.txt`, - [], - ```txt - Pioniere der Philosophie - ``` -) - -#v(1fr) - -== Beispiel - Repository - -#let v1 = { - node((0,-1), [Version 1], fill: yellow, width: 6em) - edge((0,-1), (0,0), "-") - node((0,0), `wrapper`, width: 6em) - edge((0,0), (0,1), "-") - node((0,1), [$phi$], width: 6em) -} - -#let v2 = { - node((1,-1), [Version 2], fill: yellow, width: 6em) - edge((1,0), (0,0), "-|>") - edge((1,-1), (1,0), "-") - node((1,1), [$phi, pi$], width: 6em) - edge((1,0), (1,1), "-") - node((1,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) -} - -#let v3 = { - node((2,-1), [Version 3], fill: yellow, width: 6em) - edge((2,0), (1,0), "-|>") - edge((2,-1), (2,0), "-") - node((2,1), [$phi, pi$], width: 6em, stroke: (dash: "dashed")) - edge((2,1), (1,1), "-|>") - edge((2,0), (2,1), "-") - node((2,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) - edge((2,1), (2,2), "-") - node((2,2), `test`, width: 6em) -} - -#slide(repeat: 4, self => [ - #speaker-note[ - ] - - #let (uncover, only, alternatives) = utils.methods(self) - #alternatives[ - #align(center)[ - `git init` - ] -][ - #align(center)[ - `git commit` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((0,-2), `HEAD,main`, stroke: none) - edge((0,-2), (0, -1), "-|>") - - node((-1, 0), [greekify.py:], stroke: none) - node((-1, 1), [replace.py:], stroke: none) - fletcher.hide(node((-1, 2), [test.txt:], stroke: none)) - - v1 - - fletcher.hide({ - v2 - v3 - }) - } - ) - ][ - #align(center)[ - `git commit` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((1,-2), `HEAD,main`, stroke: none) - edge((1,-2), (1, -1), "-|>") - - node((-1, 0), [greekify.py:], stroke: none) - node((-1, 1), [replace.py:], stroke: none) - fletcher.hide(node((-1, 2), [test.txt:], stroke: none)) - - v1 - - v2 - - fletcher.hide(v3) - }, - ) - ][ - #align(center)[ - `git commit` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((2,-2), `HEAD,main`, stroke: none) - edge((2,-2), (2, -1), "-|>") - - node((-1, 0), [greekify.py:], stroke: none) - node((-1, 1), [replace.py:], stroke: none) - node((-1, 2), [test.txt:], stroke: none) - v1 - v2 - v3 - }, - - ) - ][ - #align(center)[ - `git checkout HEAD~1` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((2,-2), `main`, stroke: none) - edge((2,-2), (2, -1), "-|>") - node((1,-2), `HEAD`, stroke: none) - edge((1,-2), (1, -1), "-|>") - - node((-1, 0), [greekify.py:], stroke: none) - node((-1, 1), [replace.py:], stroke: none) - node((-1, 2), [test.txt:], stroke: none) - - v1 - v2 - v3 - }, - ) - ] -]) - -== Beispiel - Staging Area - -#let v1 = { - node((0,-1), [Version 1], fill: yellow, width: 6em) - edge((0,-1), (0,0), "-") - node((0,0), `wrapper`, width: 6em, name: <wrapper>) - edge((0,0), (0,1), "-") - node((0,1), [$phi$], width: 6em) -} - -#let working1 = { - node((-2,-2.25), [Working Area], fill: none, stroke: none, name: <working-header>) - node((-2,0), `wrapper`, width: 6em, name: <working-wrapper>) - node((-2,1), [$phi$], width: 6em, name: <working-replace>) - node(enclose: (<working-wrapper>, <working-replace>, <working-header>)) -} - -#let working2 = { - node((-2,-2.25), [Working Area], fill: none, stroke: none, name: <working-header>) - node((-2,0), `wrapper`, width: 6em, name: <working-wrapper>) - node((-2,1), [$phi,pi$], width: 6em, name: <working-replace>) - node(enclose: (<working-wrapper>, <working-replace>, <working-header>)) -} - -#let stage1 = { - node((-1,-2.25), [Stage], fill: none, stroke: none, name: <stage-header>) - node((-1,0), `wrapper`, width: 6em, name: <stage-wrapper>) - node((-1,1), [$phi$], width: 6em, name: <stage-replace>) - node(enclose: (<stage-wrapper>, <stage-replace>, <stage-header>)) -} - -#let stage2 = { - node((-1,-2.25), [Stage], fill: none, stroke: none, name: <stage-header>) - node((-1,0), `wrapper`, width: 6em, name: <stage-wrapper>) - node((-1,1), [$phi,pi$], width: 6em, name: <stage-replace>) - node(enclose: (<stage-wrapper>, <stage-replace>, <stage-header>)) -} - -#let v2 = { - node((1,-1), [Version 2], fill: yellow, width: 6em) - edge((1,0), (0,0), "-|>") - edge((1,-1), (1,0), "-") - node((1,1), [$phi, pi$], width: 6em, name: <PhiPi>) - edge((1,0), (1,1), "-") - node((1,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) -} - -#let v3 = { - node((2,-1), [Version 3], fill: yellow, width: 6em) - edge((2,0), (1,0), "-|>") - edge((2,-1), (2,0), "-") - node((2,1), [$phi, pi$], width: 6em, stroke: (dash: "dashed")) - edge((2,1), (1,1), "-|>") - edge((2,0), (2,1), "-") - node((2,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) - edge((2,1), (2,2), "-") - node((2,2), `test`, width: 6em) -} - -#slide(repeat: 4, self => [ - #speaker-note[ - 3. Sinn der Staging Area ist, das ihr auswählen könnt welche der Änderungen in eurem Working Tree ihr jetzt comitten möchtet. - 4. Wenn ich mit der Stage zufrieden bin, rufe ich `git commit` auf um Stage in einen neuen Commit zu übernehmen. - ] - #let (uncover, only, alternatives) = utils.methods(self) - #alternatives[ - #align(center)[ - `git init` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) - edge((0,-1.75), (0, -1), "-|>") - - node((-3, 0), [greekify.py:], stroke: none) - node((-3, 1), [replace.py:], stroke: none) - - working1 - - stage1 - - v1 - - fletcher.hide(v2) - - node((-0.25,-2.25), `.git`, stroke: none, name: <git>) - node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) - }, - ) - ][ - #align(center)[ - `editor replacer.py` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) - edge((0,-1.75), (0, -1), "-|>") - - node((-3, 0), [greekify.py:], stroke: none) - node((-3, 1), [replace.py:], stroke: none) - - working2 - - stage1 - - v1 - - fletcher.hide(v2) - - node((-0.25,-2.25), `.git`, stroke: none, name: <git>) - node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) - }, - ) - ][ - #align(center)[ - `git add` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) - edge((0,-1.75), (0, -1), "-|>") - - node((-3, 0), [greekify.py:], stroke: none) - node((-3, 1), [replace.py:], stroke: none) - - working2 - - stage2 - - edge(<working-replace>, <stage-replace>, "-|>", bend: 30deg, stroke: red) - - v1 - - fletcher.hide(v2) - - node((-0.25,-2.25), `.git`, stroke: none, name: <git>) - node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) - }, - ) - ][ - #align(center)[ - `git commit` - ] - #fletcher.diagram( - node-stroke: 1pt, - spacing: 40pt, - node-corner-radius: 4pt, - render: (grid, nodes, edges, options) => { - cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) - }, - { - node((1,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) - edge((1,-1.75), (1, -1), "-|>") - - node((-3, 0), [greekify.py:], stroke: none) - node((-3, 1), [replace.py:], stroke: none) - - working2 - - stage2 - - v1 - - v2 - - edge(<stage-replace>, <PhiPi>, "-|>", bend: 20deg, stroke: red) - - node((-0.25,-2.25), `.git`, stroke: none, name: <git>) - node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) - }, - ) - ][ - #align(center)[ - `git checkout HEAD~1` - ] - ] -]) - - -= Collaboration - -#speaker-note[ - Example: One slide with the workflow showing file explorer and RWTH-gitlab. - Example: Second slide: The technical layer using fletcher graphics. - - Initial state: There is an upstream repository. - 1. I clone that repository. - 2. I checkout the main branch of my local repository. - 3. I change the files. - 4. I commit the files to my local repository. - 5. I push my changes to the upstream repository. - 6. My teampartner pulls the changes from the upstream repository. -] - -== Motivation -#align(center, image("images/parallel.png", height: 100%)) \ No newline at end of file +#include "slides/local.typ" +#include "slides/team.typ" diff --git a/materials/slides/local.typ b/materials/slides/local.typ new file mode 100644 index 0000000000000000000000000000000000000000..a7fbeff4f084e500226e6ad6f2c45b0d2ea9a166 --- /dev/null +++ b/materials/slides/local.typ @@ -0,0 +1,516 @@ +#import "@preview/touying:0.5.3": * +#import themes.metropolis: * + +#import "@preview/cetz:0.3.1" +#import "@preview/fletcher:0.5.2" as fletcher: node, edge +#import "@preview/ctheorems:1.1.3": * +#import "@preview/numbly:0.1.0": numbly +#import "@preview/codly:1.0.0": * + += Lokales Git + +== Motivation +#image("/images/Vortragsversionen.png") + +== Motivation + +#speaker-note[ + Warum solltet ihr ein Versionskontrollsystem benutzen? + + Das hier links: So sah meine Versionskontrolle 2016 aus. Villeicht habt ihr so etwas schon mal gesehen oder verwendet. + Ich war mehrfach in einem Zustand gewesen, wo nichts mehr funktionierte und ich mich nicht mehr erinnern konnte, + was ich jetzt alles verändert hatte seit das Programm das letze Mal funktionierte. + Ich hatte also gemerkt, dass es keine gute Idee war immer alles zu überschreiben ohne die funktionierenden Zwischenstände zu speichern, + deshalb war das hier meine Versionskontrolle. + Jedes Mal wenn ich eine neues Feature implementiert hatte, habe ich den Ordner kopiert und eine neue Versionsnummer vergeben. + Und von da an habe ich dann im neuen Ordner weitergearbeitet. + + Das ist ein sehr schlechtes System, aber es zeigt was wir eigentlich beim Entwickeln brauchen und welche Anforderung wir an ein Versionskontrollsystem haben. + + 1. Es sollte möglich sein alte Zustände wiederherzustellen. + Ich will mir nicht merken was ich gerade geändert habe und was ich da vorher hatte, als es noch funktionierte. + ich will frei experimentieren können, ohne die zuvor funktionierende Version zu verlieren. + + 2. Es sollte leicht sichtbar sein, was sich verändert hat. Im Idealfall sollte ich auch sehen warum ich es geändert habe. Dazu kommen wir später, wie eine gute Commit-Message aussieht. + + 3. Es sollte nicht das ganze Projekt bei jeder Änderung kopiert werden, sodass ich die genau gleiche Datei zigmal in jedem Ordner habe. + Nur was ich geändert habe sollte auch zusätzlichen Platz einnehmen. + + 4. Und was bei größeren Projekten wichtig wird. Mehrer Personen sollten zeitgleich zusammenarbeiten können ohne sich in die Quere zu kommen. Das kriegen manche Unternehmen auch trotz Git nicht hin, aber ich versuche hier auch ein bisschen die Worst-Practices zu erwähnen, wie ihr Git nicht verwenden solltet. +] + +// Worst-Practices: +// - Split one project into multiple repository despite the components being tightly coupled (see point 1 snd 2 of worst practice document) +// - Commit autogenerated files (see point 3) +// - Pollute your main branch with dysfunctional debug commits (point 6) + +#grid( + columns: (60%, 40%), + image("/images/Manual Versions.png"), + [ + #pause + - Es sollte einfach sein beliebige alte Zustände anzusehen und wiederherzustellen + #pause + - Es sollte leicht sichtbar sein, was sich verändert hat + #pause + - Unveränderte Dateien sollten keinen zusätzlichen Speicherplatz verbrauchen + #pause + - Mehrer Personen sollten zeitgleich zusammenarbeiten können ohne sich in die Quere zu kommen + ], +) + +== Beispiel +// TODO: Programmaufbau in zwei Dateien zeigen +#image("/images/italogeier.svg", height: 60%) +#text(font: "New Computer Modern")[ + Wir $phi$lmen Vorlesungen und sorgen in Zusammenarbeit mit der + Fakultät für eine langfristige $phi$nanzielle Eξstenzgarantie für die + dies erledigende Φdeo AG. +] + +== Beispiel - Programmaufbau +#v(1fr) + +#grid( + columns: (auto, auto), + row-gutter: 8pt, + image("/icons/Docs.svg", height: 1.2em), + `greekify.py`, + [], + ```py + with open(file, 'r') as fd: + content: str = fd.read() + content = greekify_replace(content) + print(content) + ``` +) + +#v(1fr) + +#grid( + columns: (auto, auto), + row-gutter: 8pt, + image("/icons/Docs.svg", height: 1.2em), + `replace.py`, + [], + ```py + def greekify_replace(input: str) -> str: + return input.replace("phi", "φ").replace("Phi", "Φ") + ``` +) + +#v(1fr) + +#grid( + columns: (auto, auto), + row-gutter: 8pt, + image("/icons/Docs.svg", height: 1.2em), + `test.txt`, + [], + ```txt + Pioniere der Philosophie + ``` +) + +#v(1fr) + +== Beispiel - Repository + +#let v1 = { + node((0,-1), [Version 1], fill: yellow, width: 6em) + edge((0,-1), (0,0), "-") + node((0,0), `wrapper`, width: 6em) + edge((0,0), (0,1), "-") + node((0,1), [$phi$], width: 6em) +} + +#let v2 = { + node((1,-1), [Version 2], fill: yellow, width: 6em) + edge((1,0), (0,0), "-|>") + edge((1,-1), (1,0), "-") + node((1,1), [$phi, pi$], width: 6em) + edge((1,0), (1,1), "-") + node((1,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) +} + +#let v3 = { + node((2,-1), [Version 3], fill: yellow, width: 6em) + edge((2,0), (1,0), "-|>") + edge((2,-1), (2,0), "-") + node((2,1), [$phi, pi$], width: 6em, stroke: (dash: "dashed")) + edge((2,1), (1,1), "-|>") + edge((2,0), (2,1), "-") + node((2,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) + edge((2,1), (2,2), "-") + node((2,2), `test`, width: 6em, name: <testSnap>) +} + +#slide(repeat: 4, self => [ + #speaker-note[ + ] + + #let (uncover, only, alternatives) = utils.methods(self) + #alternatives[ + #align(center)[ + `git init` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + fletcher.hide({ + node((0,-2), `HEAD,main`, stroke: none) + edge((0,-2), (0, -1), "-|>") + + node((-1, 0), [greekify.py:], stroke: none) + node((-1, 1), [replace.py:], stroke: none) + node((-1, 2), [test.txt:], stroke: none) + + v1 + + v2 + v3 + }) + + node((-1.2,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 16pt, enclose: (<testSnap>, <git>)) + } + ) +][ + #align(center)[ + `git commit` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((0,-2), `HEAD,main`, stroke: none) + edge((0,-2), (0, -1), "-|>") + + node((-1, 0), [greekify.py:], stroke: none) + node((-1, 1), [replace.py:], stroke: none) + fletcher.hide(node((-1, 2), [test.txt:], stroke: none)) + + v1 + + fletcher.hide({ + v2 + v3 + }) + + node((-1.2,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 16pt, enclose: (<testSnap>, <git>)) + } + ) + ][ + #align(center)[ + `git commit` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((1,-2), `HEAD,main`, stroke: none) + edge((1,-2), (1, -1), "-|>") + + node((-1, 0), [greekify.py:], stroke: none) + node((-1, 1), [replace.py:], stroke: none) + fletcher.hide(node((-1, 2), [test.txt:], stroke: none)) + + v1 + + v2 + + fletcher.hide(v3) + + node((-1.2,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 16pt, enclose: (<testSnap>, <git>)) + }, + ) + ][ + #align(center)[ + `git commit` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((2,-2), `HEAD,main`, stroke: none) + edge((2,-2), (2, -1), "-|>") + + node((-1, 0), [greekify.py:], stroke: none) + node((-1, 1), [replace.py:], stroke: none) + node((-1, 2), [test.txt:], stroke: none) + v1 + v2 + v3 + + node((-1.2,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 16pt, enclose: (<testSnap>, <git>)) + }, + + ) + ][ + #align(center)[ + `git checkout HEAD~1` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((-1, 10), (24, -1), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((2,-2), `main`, stroke: none) + edge((2,-2), (2, -1), "-|>") + node((1,-2), `HEAD`, stroke: none) + edge((1,-2), (1, -1), "-|>") + + node((-1, 0), [greekify.py:], stroke: none) + node((-1, 1), [replace.py:], stroke: none) + node((-1, 2), [test.txt:], stroke: none) + + v1 + v2 + v3 + + node((-1.2,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 16pt, enclose: (<testSnap>, <git>)) + }, + ) + ] +]) + +== Areas + +#v(1fr) + +=== Working Area +- Die aktuell angezeigt Version an der auch weitergearbeitet wird +- wird durch HEAD markiert + +#v(1fr) + +=== Staging Area +- Die Änderungen die in den nächsten Commit sollen + + +#v(1fr) + +=== Repository +- Versionen die in den Versionsverlauf aufgenommen wurden + +#v(1fr) + +== Beispiel - Staging Area + +#let v1 = { + node((0,-1), [Version 1], fill: yellow, width: 6em) + edge((0,-1), (0,0), "-") + node((0,0), `wrapper`, width: 6em, name: <wrapper>) + edge((0,0), (0,1), "-") + node((0,1), [$phi$], width: 6em) +} + +#let working1 = { + node((-2,-2.25), [Working Area], fill: none, stroke: none, name: <working-header>) + node((-2,0), `wrapper`, width: 6em, name: <working-wrapper>) + node((-2,1), [$phi$], width: 6em, name: <working-replace>) + node(enclose: (<working-wrapper>, <working-replace>, <working-header>)) +} + +#let working2 = { + node((-2,-2.25), [Working Area], fill: none, stroke: none, name: <working-header>) + node((-2,0), `wrapper`, width: 6em, name: <working-wrapper>) + node((-2,1), [$phi,pi$], width: 6em, name: <working-replace>) + node(enclose: (<working-wrapper>, <working-replace>, <working-header>)) +} + +#let stage1 = { + node((-1,-2.25), [Stage], fill: none, stroke: none, name: <stage-header>) + node((-1,0), `wrapper`, width: 6em, name: <stage-wrapper>) + node((-1,1), [$phi$], width: 6em, name: <stage-replace>) + node(enclose: (<stage-wrapper>, <stage-replace>, <stage-header>)) +} + +#let stage2 = { + node((-1,-2.25), [Stage], fill: none, stroke: none, name: <stage-header>) + node((-1,0), `wrapper`, width: 6em, name: <stage-wrapper>) + node((-1,1), [$phi,pi$], width: 6em, name: <stage-replace>) + node(enclose: (<stage-wrapper>, <stage-replace>, <stage-header>)) +} + +#let v2 = { + node((1,-1), [Version 2], fill: yellow, width: 6em) + edge((1,0), (0,0), "-|>") + edge((1,-1), (1,0), "-") + node((1,1), [$phi, pi$], width: 6em, name: <PhiPi>) + edge((1,0), (1,1), "-") + node((1,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) +} + +#let v3 = { + node((2,-1), [Version 3], fill: yellow, width: 6em) + edge((2,0), (1,0), "-|>") + edge((2,-1), (2,0), "-") + node((2,1), [$phi, pi$], width: 6em, stroke: (dash: "dashed")) + edge((2,1), (1,1), "-|>") + edge((2,0), (2,1), "-") + node((2,0), `wrapper`, width: 6em, stroke: (dash: "dashed")) + edge((2,1), (2,2), "-") + node((2,2), `test`, width: 6em) +} + +#slide(repeat: 4, self => [ + #speaker-note[ + 3. Sinn der Staging Area ist, das ihr auswählen könnt welche der Änderungen in eurem Working Tree ihr jetzt comitten möchtet. + 4. Wenn ich mit der Stage zufrieden bin, rufe ich `git commit` auf um Stage in einen neuen Commit zu übernehmen. + ] + #let (uncover, only, alternatives) = utils.methods(self) + #alternatives[ + #align(center)[ + `git init` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) + edge((0,-1.75), (0, -1), "-|>") + + node((-3, 0), [greekify.py:], stroke: none) + node((-3, 1), [replace.py:], stroke: none) + + working1 + + stage1 + + v1 + + fletcher.hide(v2) + + node((-0.25,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) + }, + ) + ][ + #align(center)[ + `editor replace.py` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) + edge((0,-1.75), (0, -1), "-|>") + + node((-3, 0), [greekify.py:], stroke: none) + node((-3, 1), [replace.py:], stroke: none) + + working2 + + stage1 + + v1 + + fletcher.hide(v2) + + node((-0.25,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) + }, + ) + ][ + #align(center)[ + `git add replace.py` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((0,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) + edge((0,-1.75), (0, -1), "-|>") + + node((-3, 0), [greekify.py:], stroke: none) + node((-3, 1), [replace.py:], stroke: none) + + working2 + + stage2 + + edge(<working-replace>, <stage-replace>, "-|>", bend: 30deg, stroke: red) + + v1 + + fletcher.hide(v2) + + node((-0.25,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) + }, + ) + ][ + #align(center)[ + `git commit` + ] + #fletcher.diagram( + node-stroke: 1pt, + spacing: 40pt, + node-corner-radius: 4pt, + render: (grid, nodes, edges, options) => { + cetz.canvas({cetz.draw.rect((0, 9), (27.5, -0.5), stroke: none); fletcher.draw-diagram(grid, nodes, edges, debug: options.debug)}) + }, + { + node((1,-1.75), `HEAD,main`, stroke: none, name: <HEADmain>) + edge((1,-1.75), (1, -1), "-|>") + + node((-3, 0), [greekify.py:], stroke: none) + node((-3, 1), [replace.py:], stroke: none) + + working2 + + stage2 + + v1 + + v2 + + edge(<stage-replace>, <PhiPi>, "-|>", bend: 20deg, stroke: red) + + node((-0.25,-2.25), `.git`, stroke: none, name: <git>) + node(inset: 8pt, enclose: (<HEADmain>, <PhiPi>, <wrapper>, <git>)) + }, + ) + ][ + #align(center)[ + `git checkout HEAD~1` + ] + ] +]) \ No newline at end of file diff --git a/materials/slides/team.typ b/materials/slides/team.typ new file mode 100644 index 0000000000000000000000000000000000000000..31640d3017e62dbcb038a7c48540136fdc60d9b5 --- /dev/null +++ b/materials/slides/team.typ @@ -0,0 +1,26 @@ +#import "@preview/touying:0.5.3": * +#import themes.metropolis: * + +#import "@preview/cetz:0.3.1" +#import "@preview/fletcher:0.5.2" as fletcher: node, edge +#import "@preview/ctheorems:1.1.3": * +#import "@preview/numbly:0.1.0": numbly +#import "@preview/codly:1.0.0": * + += Collaboration + +#speaker-note[ + Example: One slide with the workflow showing file explorer and RWTH-gitlab. + Example: Second slide: The technical layer using fletcher graphics. + + Initial state: There is an upstream repository. + 1. I clone that repository. + 2. I checkout the main branch of my local repository. + 3. I change the files. + 4. I commit the files to my local repository. + 5. I push my changes to the upstream repository. + 6. My teampartner pulls the changes from the upstream repository. +] + +== Motivation +#align(center, image("/images/parallel.png", height: 100%)) \ No newline at end of file