GIT - init clone commit pull push VSC

                      GIT
1 / 20
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4,5

In deze les zitten 20 slides, met tekstslides.

time-iconLesduur is: 45 min

Onderdelen in deze les

                      GIT

Slide 1 - Tekstslide

Hoe werkt Git? 1/3
Ruwweg bestaat Git uit 3 onderdelen:
  1. Working Directory: (lokaal) hier pas je bestanden aan
  2. Staging Area: (lokaal) hier staan aangepaste bestanden 
  3. Repository: (in Git lokaal, maar bij Github op een server) hier slaat Git de veranderingen op als verschillende versies van je project

Slide 2 - Tekstslide

a



                     git add bestand1.txt
                     git add bestand2.txt
                                                       git commit -m "test"

Slide 3 - Tekstslide

Hoe werkt Git? 3/3
git init maakt een nieuw project
git clone url maakt een kloon van een online project
git remote add origin url linkt een lokale Git aan Github

git add bestandsnaam voegt een bestand toe aan je staging
git commit -m 'tekst' zet staging bestanden naar je repo

git push stuurt je repo naar Github
git pull update je repo van Github

Slide 4 - Tekstslide

Hoe werkt Git? 3/3
git init maakt een nieuw project
git clone url maakt een kloon van een online project
git remote add origin url linkt een lokale Git aan Github

git add bestandsnaam voegt een bestand toe aan je staging
git commit -m 'tekst' zet staging bestanden naar je repo

git push stuurt je repo naar Github
git pull update je repo van Github

Slide 5 - Tekstslide

VisualStudio Code 1/2
Met VisualStudio Code (VSC) kun je relatief eenvoudig een Github bestand aanpassen:
  • ga naar je Github project pagina
  • verander de url van https:// in https://vscode.dev/ 
    https://github.com/jklos-smc/A2-HTMLCSS
    https://vscode.dev/github.com/jklos-smc/A2-HTMLCSS
  • open het bestand en sla het op

Slide 6 - Tekstslide

VisualStudio Code 2/2
  • nadat je het bestand hebt opgeslagen, druk je op deze knop in de verticale balk:
  • in het Source Control scherm vul je eerst een commit message in en druk je op het vinkje:
  • klaar!

Slide 7 - Tekstslide

Wat is Github?
GitHub is een online platform dat als repository voor Git kan worden gebruikt, waardoor die in de cloud staat

Github werkt dus met Git, waarvan we net zagen dat deze lokaal veranderingen in je code kan bijhouden
Deze veranderingen kunnen vervolgens vanuit de repository (hierna: repo) in Github worden opgeslagen via git push

Slide 8 - Tekstslide

git clone 1/2
Clone: hiermee maak je een lokale kopie van een repo

Zo kun je een repo op Github op je computer zetten

Deze opdracht zet je in VSC in de terminal of in opdrachtprompt



Slide 9 - Tekstslide

git clone 2/2
  1. Ga naar de juiste map in de terminal op je computer 
    (bv via cd C:\Users\Klos\informatica\ )
  2. Git clone <url>
    bv git clone https://github.com/jklos-smc/A2-HTMLCSS



Slide 10 - Tekstslide

Terminal commando's
Tip: de volgende commando's zijn handig:
  • mkdir <naam>
    hiermee maak je een map/folder
  • cd <folder>
    hiermee ga je naar een (sub)folder, dit kan zijn:
    relatief (bv cd fotos)
    absoluut (bv cd c:\users)

Slide 11 - Tekstslide

Wat doet git commit?
git commit: slaat wijzigingen op in de lokale repo

In een commit staan alleen wijzigingen van een bestand, maar in de repository staat het gehele bestand (inclusief de wijzigingen)
Teruggaan naar een eerdere versie is makkelijk, omdat de wijzigingen in elke commit staan!

Slide 12 - Tekstslide

Wat doet git push?
git push origin main: stuurt de lokale repo naar Github

origin verwijst naar de Github repo 
main geeft de branch aan waar
naartoe gepusht moet worden

bv. git push origin testbranch


Slide 13 - Tekstslide

Wat doet git pull?
git pull origin main: haalt van Github naar de lokale repo 

origin verwijst naar de Github repo 
main geeft de branch aan waarvan
gehaald moet worden

vgl. git pull origin testbranch

Slide 14 - Tekstslide

Wat doet git branch?
git branch: maakt een "tak" binnen een project

In deze tak maak je wijzigingen die bij die tak horen, maar in principe kun je elk bestand van het project aanpassen en ook naar deze tak "pushen" en ervan "pullen"

Slide 15 - Tekstslide

Hele proces in git commandos
git clone <url> : om project binnen te halen (eenmalig)
git pull : om meest recente versie binnen te halen van main
git add bestand : om bestand in staging te zetten
git merge -m "tekst hier" : om bestand in lokale repo te zetten
git push : om de lokale repo naar Github te sturen

let op: met git push en git pull staat standaard origin main ingevuld
   origin is de Github repo
   main is de standaard branch in Github

Slide 16 - Tekstslide

Opdracht: Git installeren
Voor goed gebruik van Github moeten we eerst lokaal Git installeren
  1. Ga naar je start menu en open Command prompt
  2. Tik daar in: winget install --id Git.Git -e --source winget
    ( als dat niet werkt ga dan naar https://git-scm.com/downloads/ )
  3. Ga daarna naar Github.com en klik op Sign up
  4. Gebruik je school e-mailadres en maak een nieuw wachtwoord
  5. Open je Visual Studio Code en log in met je Github account via het poppetje en dan
    "Turn on Cloud Changes"
timer
5:00

Slide 17 - Tekstslide

Opdracht: Github: Repository 1/2
  1. In Github: kies "New Repository" en vul in: PO HTML
  2. Kies "Private" en deel het met je PO partner en jklos-smc
  3. Maak een HTML pagina met een beschrijving van je PO
    Let op: niet git init doen, maar git clone
  4. Gebruik de command line of GitHub-interface om een commit te maken met een duidelijke commit message!

Slide 18 - Tekstslide

Opdracht: Github: Repository 2/2

Slide 19 - Tekstslide

Slide 20 - Tekstslide