Les 1. Werken met github

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

Instructions

Nodig voor deze les:

Een computer met internet

lgg 

• Je kan twee redenen geven om github te gebruiken
• Je kan een repository maken een daarnaar committen (en je weet wat een commit is)
• Je kan uitleggen waarom versiebeheer nuttig is

Maar wat is dit?

Vandaag gaan we dit maken

Dit is commit (message)

Dit is het commitlog scherm uit github

Dit is ook een commit

Dit is ook een commit

Wat is git?

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 niet de meester. Je kan master vervangen door github.com

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?

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.

Vandaag gaan we het stukje "Your Work" uit de afbeelding hiernaast doen. We gaan vandaag leren hoe je moet committen.

Dit is commit (message)

Dit is het commitlog scherm uit github

Dit is ook een commit

Dit is ook een commit

Zo ziet github.com eruit.

De blauwe bolletjes uit de vorige afbeeldingen zijn de commits in dit overzicht

Committen?

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

Een commit doe je pas als het brokje werk dat je aan het doen bent klaar is. De code mag dus niet stuk zijn.

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 elke 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 

Zo'n repo gaan we vandaag aanmaken. Dat is erg makkelijk.

Linkje

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

1 commit. Dit betekent dat je 1 keer iets hebt aangepast aan je repopsitory (project)

Hier zie je de bestanden die je net hebt geupload. Je ziet de bestandsnaam met daarnaast de commit die het laatste het bestand heeft aangepast. Met daarnaast weer wanneer dat was.

Je gebruikersnaam / repository naam

Hieronder kan je nieuwe bestanden uploaden. Als je een bestand met dezelfde naam upload wordt het bestand in je repo overschreven met het bestand dat je upload

Instellingen. Hier kan je onder anderen "samenwerken" en "github pages" aanzetten

Wat staat er allemaal op een repository pagina? Gebruik de hotspots

Committen?

Een voorbeeld

1. We hebben hier met een html bestand.
2. We passen de tekst aan
3. We uploaden dat naar github en schrijven een duidelijke commit message

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. Maak een account op github.com. Gebruik je school e-mail
   
2. Koppel je website op replit met github
3. Pas iets aan en doe een commit!

Aan de slag

1. Ga verder met de html tutorial op htmldog.com. Nadat je klaar bent en een pagina upload je de code aanpassingen naar github.
2. Klaar? verder met css - basis

Je kan twee redenen geven om github te gebruiken

1. git zorgt voor structuur
2. git helpt met samenwerken
3. met git kan ik altijd bij m'n bestanden
4. git wordt in het bedrijfsleven gebruikt

Je kan een repository maken een daar een commit in doen

1. Ja dat kan ik
2. Dat kan ik een beetje
3. Dat kan ik niet
4. Hallo?

Welk voordeel zou je docent hebben aan github?

00:00

github.com