Git & GitHub

Versies beheren

De voordelen

  • 🧪 Experimenteren en vergelijken
  • 👩‍🏫 Verschillende voorstellen voor de klant maken
  • 🔙 Verwerking van feedback
    • ​vb. per sprint, om de progress te zien
  • 🚨 Snelle fix toevoegen terwijl je nog aan een groter component bezig bent
  • 🗓️ Aan meerdere, afzonderlijke zaken tegelijk werken
  • 👭 Samenwerken met collega's

Werken met verschillende versies

Versie met extra pagina die nog niet af is

Versie met feedback collega
Waar is nu die versie die de docent vorige week wel goed vond?

Testje met andere kleuren

  • 📑 Heel veel files en folders
  • 9️⃣ Onduidelijk wat nu de juiste versie is
  • 🏷️ Onduidelijke / lange naamgeving
  • ⛓️‍💥Files zijn niet meer aan elkaar gelinkt, sommige code is niet meer up to date
  • 🥵 Versies samenvoegen is een huzarenstukje
  • 😤 Jij of je collega hebben altijd een verschillende versie
  • 🖥️ Alles staat op jouw lokale computer

Moeilijkheden

Werken met verschillende versies

"The stupid content tracker"

✨

✨

Command line

Hoe werkt een computer?

  • 🖥️ Een computer bestaat in essentie uit tekst en bestanden.
  • 📄 Alle data, code en instellingen zijn opgeslagen in bestanden.
  • 📂 Bestanden worden georganiseerd in mappen (folders).

Alles is een bestand

Bestanden zitten in een hiërarchische structuur van mappen.

word.docx

Adobe Photoshop

rawr.jpg

Command Line Interfact (CLI)

  • = Terminal
  • Tekst interface om met bestanden te werken 
  • Op de eerste computers moest je commando's typen in de terminal om folders en bestanden te maken en te bewerken

Nieuwe map genaamd Homework op het bureaublad

Graphical User Interface (GUI)

  • Visuele laag bovenop de CLI
  • De interface van onze computer zoals wij die kennen
  • Computer besturen makkelijker maken
  • Klikken op pictogrammen en vensters in plaats van tekstuele commando's typen

Quick demo

pwd
ls
cd mapnaam
mkdir voorbeeldmapje
cd voorbeeldmapje
touch voorbeeldfile.txt
cd ..

Terminal

PowerShell

Mac

Windows

Windows Terminal

Command line

~Documents/webscripting/week-1 $ pwd
Users/sjouwkevaparys/Documents/webscripting/week-1
~Documents/webscripting/week-1 $

Nieuwe lijn. Hier kan je een nieuw commando schrijven naast het dollarteken.

command line prompt

Het dollarteken $ is een aanduiding van waar een commando start. Kopieer dit nooit.

Het commando kan uit meerdere woorden en tekens bestaan.​

De response van de computer

⚡ Command Line blijft krachtig

  • Snel & flexibel
  • Geavanceerde functies 
  • Werkt op elke soort computer, ongeacht besturingssysteem
  • Servers van op afstand configureren (SSH)
  • Onmisbaar voor GIT:
    • ​Beter inzicht in versiebeheer dan via een visuele interface

Integrated terminal in VScode

  • VS Code > Terminal > New Terminal
  • Opent in de root van je huidige workspace

Git

Wat is git?

  • Open source versiebeheersysteem
  • Houdt wijzigingen bij in zo gehete 'commits'
  • Handig om:
    • samen te werken 
    • terug te gaan naar eerdere versies
    • wijzigingen en variaties te beheren
  • Grote set van commands: git <commandonaam>
  • GUI's: GitHub Desktop, Sourcetree (Maar gaan wij niet gebruiken)
  • documentatie: Officiële documentatie & GitHub repo
  1. Installeer git (Doen we straks samen)
  2. Maak een git-repository van je huidige repository via het commando git init

Aan de slag met git

Stel: we willen dit design coderen

Navigation

Hero

Footer

Commits

  • = snapshot 📸
  • Per onderdeel dat af is, maak je een commit​
  • Stap 1: Voeg eerst de files toe aan de staging area
  • Stap 2: Maak daarna een commit en geef een beschrijvende boodschap mee
$ git add .
$ git commit -m "add navigation"
$

Een punt . betekent: 'alle files waarin er aanpassingen zijn gebeurd'. 

Switchen naar andere commit

$ git log
commit c34b8dad4699a39edf6e25f4dbf7480820533ac9 (HEAD -> main)
Author: Sjouwke Van Parys <sjouwke.vanparys@arteveldehs.be>
Date:   Sat Feb 1 13:03:47 2025 +0100

    add navigation
$ git checkout c34b8dad4699a39edf6e25f4dbf7480820533ac9
$
  • Elke commit heeft een uniek id
  • je kan switchen tussen verschillende commits via het commando git checkout <id>
  • git log toont je een overzicht van de commits

💡 Tip: je hoeft niet het volledige ID te kopiëren. De eerste 6 karakters zijn vaak voldoende uniek.

Status

$ git status
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   css/main.css
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")
$
  • Het commando git status toont aan in welke files er aanpassingen zijn gebeurd
  • ⚠️ Sla eerst je aanpassingen op in een nieuwe commit vooraleer je naar een andere commit gaat kijken.

Voorbeeld

Je bent al even bezig aan het bouwen van een onepager. De navigatie en footer zijn klaar, maar aan de hero ben je nog bezig.

 

Tijdens het feedbackmoment met de docent of klant wil je graag enkel de zaken tonen die al af zijn.

 

Wat nu? 😱

Use case

Geen paniek!

  1. Je hebt normaal gezien al vlijtig 2 commits gemaakt.
  2. Je maakt een derde commit met de changes, die nog niet af hoeven te zijn.
  3. Je keert terug naar de vorige commit, zodat we tijdens het feedbackmoment enkel de navigatie en footer beoordelen.
  4. De code die je reeds schreef voor de hero is niet verloren. Na het feedbackmoment kan je terug navigeren naar commit 3 = de meest recente versie van je code.

Use case

En dan nu in de terminal:

$ git status
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   css/main.css
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")
$ git add .
$ git commit -m "hero part 1: add html"
$ git log
commit c34b8dad4699a39edf6e25f4dbf7480820533ac9 (HEAD -> main)
Author: Sjouwke Van Parys <sjouwke.vanparys@arteveldehs.be>
Date:   Sat Feb 2 10:04:55 2025 +0100

    hero part 1: add html
    
commit 7894ezeazr7894789rez4r65ez4r6ezr464rer4r (HEAD -> main)
Author: Sjouwke Van Parys <sjouwke.vanparys@arteveldehs.be>
Date:   Sat Feb 1 18:44:18 2025 +0100

    add footer
    
commit c34b8dad4699a39edf6e25f4dbf7480820533ac9 (HEAD -> main)
Author: Sjouwke Van Parys <sjouwke.vanparys@arteveldehs.be>
Date:   Sat Feb 1 13:03:47 2025 +0100

    add navigation
$ git checkout 7894ezeazr
$

Use case

Git heeft veel krachtige functies, zoals:

🌳 Branches – Werk in parallel aan verschillende versies van de code.
🔍 Pull Requests – Vraag om wijzigingen samen te voegen in een project.
🍒 Cherry Picking – Haal specifieke commits uit een andere branch.

🚀 Deze extra functies zijn handig, maar voor nu laten we ze achterwege! Wij focussen enkel op committen en pullen van code voor oefeningen.

Meer mogelijkheden met git

GitHub

Git hosting platform

  • Een online service waar je Git repositories kunt opslaan
  • Maakt samenwerken makkelijker
  • Biedt extra tools voor o.a. projectbeheer en hosting
  • Backup van je code

Remote repository

Samenwerken

GitHub account aanmaken

Stap 1: Ga naar      github.com

Stap 2: Klik op "Sign up"

Stap 3: Vul je ⚠️ Artevelde e-mailadres in
              Je kan later nog je privé e-mailadres koppelen

Stap 4: Kies een sterk wachtwoord

Stap 5: Kies een ⚠️ professionele username

                    Dit is voor iedereen zichtbaar en zal je later nog gebruiken.

Stap 6: Verifieer je e-mailadres

Git installeren

⚠️ ⚠️ ⚠️

🤝 We doen alle stappen nu samen.

🐾 Volg stap voor stap goed mee.
 

❌ Verschillend voor Macbook en Windows gebruikers:

1️⃣ We starten met installatie voor Macbook.
2️⃣ Daarna volgt Windows.

⚠️ ⚠️ ⚠️

Git installeren op Macbook

Stap 1: Open       Terminal

Stap 2: Installeer Homebrew

  • Homebrew installeert nuttige dingen op nuttige manieren voor developers met een Macbook
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Git installeren op Macbook

brew install git

Stap 3: Installeer Git via Homebrew

git -v

Stap 4: Check of de installatie gelukt is

De response zou er ongeveer zo moeten uitzien: git version 2.39.3 (Apple Git-146)

Git installeren op Windows

Stap 1: Download Git voor Windows:

Git installeren op Windows

Stap 2: Voer het gedownloade bestand uit:

  • Accepteer de licentievoorwaarden
  • Klik "Next" bij elke stap (standaardinstellingen zijn prima voor beginners)
     

Belangrijke opties tijdens installatie:

  • Kies "Git Bash Here" in het contextmenu
  • Kies "Use Visual Studio Code as default editor"
  • Kies "main" als standaard branch naam

Git installeren op Windows

Stap 3: Open       PowerShell of        Windows Terminal

git -version

Stap 4: Check of de installatie gelukt is

De response zou er ongeveer zo moeten uitzien: git version 2.43.0.windows.1 

⚠️ ⚠️ ⚠️

🤝 Vanaf nu zijn de stappen terug gelijk voor zowel Windows als Mac gebruikers.

⚠️ ⚠️ ⚠️

Eerste Git configuratie

Windows: Open       PowerShell of       Windows Terminal

git config --global user.name "Jouw Naam"

Stap 1: Configureer je naam

Mac: Open       Terminal

git config --global user.email "jouw@artevelde-email.com"

Stap 2: Configureer je e-mail

Installatie verifiëren

git --version
git config --list

De response zou er ongeveer zo moeten uitzien:

MacBook-Pro:~ gebruiker$ git config --list

user.name=Jouw Naam

user.email=jouw@email.com

core.editor=code

init.defaultbranch=main

core.autocrlf=input

credential.helper=osxkeychain

Toegang tot
oefeningen & demo's

Github repository

✨ https://github.com/dvggent-2425-webscripting/code-lessen ✨

Github repository

  • Alle oefeningen en demo's voor het vak
  • Opgedeeld in folders per lesweek 
  • Je hebt read-only toegang
  • Je kunt de code pullen, niet pushen
  • Wordt wekelijks content aan toegevoegd

Repository clonen

  • Een clone maakt een exacte kopie van de repository
  • = download van alle code en de hele Git geschiedenis tot dit specifieke punt in de tijd
  • Je krijgt een lokale versie om in te werken
  • Dit doe je maar één keer aan het begin

Repository clonen

Stap 1: Maak eerst de juiste mappenstructuur

  • Beslis in welke folder op je computer je de oefeningen wil plaatsen
    vb: ~Documents/School/DVG-1/web-scripting
  • Open de folder in Visual Studio Code
  • Terminal > New Terminal
  • Dubbelcheck of je in de juiste folder zit: pwd

Repository clonen

Stap 2: Voer het clone commando uit

git clone https://github.com/dvggent-2425-webscripting/code-lessen.git

 Je hebt nu een map genaamd 'code-lessen' op je computer staan. 

Stap 2: Voer het clone commando uit

Wekelijkse updates

  • Elke week zetten we oefeningen & demo's klaar voor de komende lessen.
  • Bij de start van de les zal je dus altijd de meest recente versie van de repository willen binnenhalen

Wekelijkse updates

⚠️ Aangezien je lokaal aan de oefeningen werkt, zullen er altijd changes zijn:

Stap 1: Sla je changes altijd éérst op door een commit te maken:

git add .
git commit -m "Add fix week 1 oefening 1: kopjes tellen"

Stap 2: Daarna kan je de nieuwe oefeningen binnenhalen:

git pull

Tips voor commits

  • Maak regelmatig commits (bijvoorbeeld na elke oefening)
  • Schrijf duidelijke commit messages, vb:
    • "Oefening 1.3: Arrays toegevoegd"
    • "Bug fix in for-loop week 5: oefening 2"
    • "Week 3 oef 2: HTML formulier afgerond"
  • ​Maak altijd een commit vóórdat je code pullt