Sådan bruger du Github

Github Desktop

Github er et sted, hvor du og din gruppe kan gemme sikkerhedskopier af jeres kode. Hvis din computer bryder sammen eller bliver væk, så kan du altid hente en klon af jeres kode til en ny computer.

Filstruktur

På Github er det vigtigt, jeres filer ligges med præcis den samme struktur, som i mapperne på din egen computer. At gøre dette ved at uploade filerne manuelt en for en, det er altså ret bøvlet og tager lang tid. Derfor er Github Desktop en god løsning.

├── css
│   └── css.css
├── images
│   └── README.md
├── index.html
└── js
    └── js.js

Nyt Repository
I Giithub Desktop kan du lave et nyt repository via File > New Repository. Local Path skal pege på mappen, hvor du har dine filer:

Derefter skal du offentliggøre (publish) dit repository.

Og så er dit repository ellers klar til brug.

Hvis du klikker på “Show in Finder” vil du se mappen, der nu bruges sammen med dit repository.

Hvis du klikker på “View on Github” kan du se de gemte filer på Github.

Du kan også åbne dine filer i Visual Studio Code ved at klikke på “Open in Visual Studio Code”.

Inviter gruppemedlemmer til at redigere den fælles kode

Hvis flere i en gruppe vil bruge det samme repo, skal du sende en invitation til gruppen. Du kan invitere ved at skrive de andre brugeres github brugernavne her:

Kloner (Clone)

Når invitationen er accepteret skal den nye bruger selv klone en kopi af dit repository til sin computer (klon betyder som bekendt: kopi af noget). Du kan også bruge en klon af din kode, fx hvis du vil redigere koden på en anden PC, når du kommer hjem.

En nem måde at klone på er at klikke på knappen “code” i Github. Så kan du kopiere URL’en til dette repo:

Når du har dette link til repoet, så skal du bruge det til Github Desktop.

Fortsæt i Github Desktop

Så åbnes denne dialog:

1:2 URL
Klik på fanebladet URL, og indsæt det link du kopiede for et øjeblik siden.

2:2 Local Path
Betyder en lokal sti. Det er den mappe, hvor klonens filer bliver gemt på din computer.

Klik nu på Clone

Hva’ Så?

Herefter vil Github Desktop placere filerne i den mappe du pegede på med Local Path. I eksemplet her vil mappen ligge på min Desktop. Placer dine Github filer et mere praktisk sted, det behøver ikke at være Desktoppen!

I Github Desktop ser du nu denne dialog:

Hvis der står no local Changes, så kan du:

• Åbne mappen i Visual Studio Code (eller en anden editor).
• Show in Finder (Mac) / Explorer (Windows).
• View on Github – åbner din browser i repositoriet online.

VSC – koden redigeres

Prøv nu at klikke på “Open in Visual Studio Code“.

Prøv at redigere en af filerne, tilføj fx et et par linjer til README.md filen. På billedet kan du se, der er tilføjet noget nyt:

Husk at gemme! Når du har gemt, så skift til “Github Desktop“, der vil se omtrent sådan ud:

Hvordan du skubber dine ændringer ind i Github (Push)

Når du er tilfreds med din kode, skal den skubbes (pushes) til jeres repository på Github – således at din gruppe får nytte af dit arbejde. Gør sådan:

Klik derefter på den blå knap “Commit to main“.

Nu skal du klikke på den blå knap “Push Origin”. Og så uploades dine ændringer på Guthub websiden.

Hvis du vil tjekke om din kode er tilføjet, så kan du klikke på “View on Github”. Her ser du resultatet:

Når andre ændrer noget

Når et af de andre gruppemedlemmer ændrer noget i jeres repo, så kan du hente deres kode i Github desktop. Klik på “Fetch Origin” (= hent fra originalen).

Nu opdager “Github Desktop”, at der er ny kode tilgængelig. Du henter den ved at klikke “Pull Origin”.

Næste billede viser, at koden er opdateret:

Og nu hvor du har den opaterede kode kan arbejdet fortsætte.

Branch (Gren)

Hvis du vil eksperimentere lidt med koden – uden at påvirke de andres arbejde, så kan du lave en forgrening (branch). Hvis dit eksperiment lykkes, så kan din forgrening blandes sammen med den øvrige kode.

I Github Desktop kan du oprette grene sådan:

I den øverste linje kan du se, hvilken forgrening du arbejder på:

I branchen kan du igen åbne ændre din kode, og pushe til dit repo som før. Her ses ændringerne:

Nu kan du lave en “commit mesage” og pushe … som før.

Pull Request

Den blå knap sender dig ind på Githubs webside, hvor du kan “merge” (= blande) den nye kode med den originale.

Det gør man selvfølgelig kun hvis det er nyttigt.

Hvis eksperimentet lykkes kan du lave en såkaldt “Pull Request”. Websiden på Github ser sådan ud:

Så ånbes denne dialog:

Hvis du mener, at det er nyttigt at blande de to grene, så kan du vælge “Merge Pull Request”. Nu er grenene blandet sammen:

I Network Graph kan du se, at de to grene “Main” og “Eksperiment” er blandet sammen:

Tilbage til Main
Samme sted kan du skifte fra en gren til en anden, så hvis du vil tilbage til main, da klik på Current Branch og vælg main.

Merge Conflict

En blandingskonflikt (merge conflict) opstår, når Github opdager, at den samme fil findes i to eller flere versioner. Det sker ofte, når to gruppemedlemmer arbejdeer med den samme fil, fx hvis flere har redigeret ./css/style.css.

Blandingskonflikter kan også ske, når en forgrening giver flere varianter af den samme fil.

Når konflikter optræder, kan de løses i Github Desktop. Her vil Github Desktop åbne Visual Studio Code i en visning, hvor du kan sammenligne kodelinjer – og markere, hvad der kan eller ikke kan bruges.

Her kan du se, hvordan man løser en merge conflict i Visual Studio Code.

Kilder

Denne artikel og videoen er fremstillet ved hjælp af Open Sourde produkter:

• Screen Capture: Open Broadcast Studio (OBS)
• Video editor: Open Video Shot
• Lyd: Audacity
• Github Desktop

• Github.com
• Visual Studio Code (VSC)