Github introductie

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

Instructions

Nodig voor deze les:

Een computer met internet

Het grootste software platform ter wereld

Wat is git en wat is github??

Git is een tool die ontwikkelaars gebruiken om aan projecten te werken. Git helpt ze daarbij vooral met versiebeheer en samenwerken.

GitHub is de website waar git de bestanden op zet. Hoe dat precies werkt komen we later op terug.

Master is hier de "hoofdlijn"

Anderen dragen bij aan master

Versiebeheer

Een belangrijk onderdeel van github is het versiebeheer. Dat is handig want dan kan je goed zien wat je in welke versie gedaan hebt.

Je kan dan de code makkelijk terug vinden of terug naar een bepaalde versie.

Samenwerken

Git is oorspronkelijk in het leven geroepen om ontwikkelaars beter samen te laten werken.

Door git te gebruiken kunnen ontwikkelaars makkelijker elkaars werk controleren.

Git helpt ook bij ongelukken: wat als je nou alle twee code heb geschreven voor hetzelfde probleem?

Committen?

Elk brokje werk in het overzicht heet een commit. Bij een commit beschrijf je wat de code die je gemaakt hebt hoort te doen.

Een commit doe je pas als het brokje werk dat je aan het doen ben klaar is. De code mag dus niet stuk zijn. (Behalve op vrijdagmiddag)

Repository

Ja ho stop! Committen, commitlogs, samenwerken.. waar gebeurt dit allemaal?

Je maakt een account aan op github.com. Op github.com kan je vervolgens voor elk project een mapje maken waar je je code beheert. Zo'n map heet een repository (of repo).

In de afbeelding hiernaast zie je een repo met twee bestanden: my_page.html en style.css 

Linkje

https://github.com/lgg-maartens/htmldog

DEMO

Docent laat zien

• Een repository maken
• Een bestand uploaden. 
• Een commit message schrijven
• Een regel aanpassen en het bestand opnieuw uploaden: git ziet dat alléén die regel is aangepast (terwijl het hele bestand is geupload)

Opdracht 1: je eerste repo

1. Maak een account op github.com. Gebruik je school e-mail
   
2. Maak een nieuwe repository en noem deze "test"
3. Maak op je computer een tekstbestand aan genaamd "appeltaart.txt" met kladblok en zet hier in de tekst "appeltaart"
4. Upload je tekstbestand naar je repo, schrijf een commit 
   message en doe een commit
5. Doe nu in kladblok een aanpassing aan je tekstbestand
6. Upload je tekstbestand opnieuw (weer met commit message)
7. Gefeliciteerd, je hebt je eerste git project opgetuigd. Bekijk de 
   logs van je repo om je commit history te zien

Editor

Git(hub) staat in principe los van de editor waarin je de code schrijft. Vaak is het een mapje op je computer wat je synchroniseert met Github nadat je het hebt bewerkt in je favoriete editor (zoals Thonny)

Op school niet mogelijk, vanwege netwerk beperkingen...

Nog beter: Github heeft online editor: CodeSpaces. Deze doet het altijd en overal (ook thuis dus)

Nognog beter: Github heeft "classroom" functionaliteit waar je docent projecten kan klaarzetten.

Linkje

https://github.com/lgg-maartens/htmldog

DEMO

Docent laat zien

• Github classroom
• Werken in Github codespaces
• Commit maken vanuit Codespace
• 
  

Opdracht 2: Codespaces

1. Meld je aan bij de classroom opdracht "Kennismaking met 
   Github" (Je docent zet een link hiervoor op het bord)
2. Claim de juiste persoon in de Classroom (je voornaam)
3. Je krijgt nu automatisch een kloon van een eenvoudig 
   html/css project
4. Open deze in Codespaces
5. Installeer de extensie HTML-play om je webpagina te bekijken
6. Maak een wijziging (tekst aanpassen of achtergrondkleur oid)
7. Maak een commit (met zinvolle message)
8. Maak nog een wijziging en een commit
9. Ga terug naar de versie van de eerste commit

Opdracht 3: samenwerken

1. Spreek af met wie je een (test)team bent (2 of 3)
2. Meld je aan bij de classroom opdracht "Kennismaking met 
   github - samenwerken" (Je geeft weer een link)
3. De eerste persoon maakt een team. De anderen "joinen"
4. Je krijgt nu weer een kloon van het eenvoudige 
   html/css project
5. Alle groepsgenoten openen het proect in hun eigen Codespace
6. Edit nu met 2 personen tegelijk hetzelfde bestand (index.html)
7. Commit afzonderlijk van elkaar
8. Los het veroorzaakte Merge Conflict op
9. Experimenteer verder

Opdracht 4: CoPilot

Github Codespaces heeft AI-assistent CoPilot "ingebouwd"

1. Activeer CoPilot voor je Codespace door in het rechter chatvenster een vraag te stellen
2. Experimenteer met vragen stellen
3. Probeer ook eens zelf je code te editen met CoPilot actief,
   Je zult zien dat hij een soort "autocomplete" doet voor je
4. Doe een uitbreiding op de site (een tabel bijvoorbeeld) met autocomplete van CoPilot. Check goed of de code doet wat je wilt
5. Vergeet niet te committen na elke grotere wijziging.