les 3. Samenwerken met git - replit

Samenwerken met git
lgg
  • Je kan je naar github opsturen d.m.v. een push 
  • Je kan code van een ander ophalen d.m.v. een pull
  • Je kan een conflict oplossen
Benodigdheden
  • Je weet wat een repository is.
  • Je weet hoe je een commit doet
  • Je replit is gekoppeld aan github

1 / 27
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 27 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

Samenwerken met git
lgg
  • Je kan je naar github opsturen d.m.v. een push 
  • Je kan code van een ander ophalen d.m.v. een pull
  • Je kan een conflict oplossen
Benodigdheden
  • Je weet wat een repository is.
  • Je weet hoe je een commit doet
  • Je replit is gekoppeld aan github

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Samenwerken
Git is oorspronkelijk in het leven geroepen om ontwikkelaars beter samen te laten werken zoals Jade en Nine hiernaast.

Maar hoe doe je dat nou?

Deze les gaan we kijken naar hoe je je eigen code pusht (opsturen) en andermans code pullt (ophalen)

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Ieder z'n eigen replit
Deze slide moet ik nog maken maar het komt er op neer dat iedereen z'n eigen replit maakt.

Dus niet samenwerken in replit

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Kies één repository
De commits die Nine en Jade gedaan hebben komen uit één repository waar ze alletwee bij kunnen. De eerste stap om samen te werken is dus ervoor zorgen dat je alletwee (meer kan ook) toegang hebt tot de repo die je gaat gebruiken.

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Push en pull
Nu we allemaal bij de repository kunnen kunnen we eigenlijk weer net zo werken als we altijd al gedaan hebben; je maakt een stukje werk en commit en pusht het naar github.com

Alleen nu moet je er rekening mee gaan houden dat er in de tussentijd werk van iemand anders bij is gekomen.

Push - Git push is het commando om alle commits die je gedaan hebt op te sturen naar github.com

Pull - Pull is het git commando om alle commits die je nog niet hebt van de server te downloaden
push

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Een voorbeeld
Nine
Jade
Nine heeft een html bestand waar ze met Jade mee aan samen werkt. Nine heeft het bestand links maar Jade heeft er een regel aan toegevoegd (regel 7)

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Een voorbeeld
Als Jade dit pusht naar github dan ziet github welke regel er veranderd is:

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Een voorbeeld
Maar Nine nu nog niet de code van Jade. Om het werk van Jade er nu bij te krijgen moet Nine een pull doen. De pull kan je in replit vinden op plek die met de pijl is aangewezen.

Tip
Het kan zijn dat de pull knop in replit niet zichtbaar is. Helpt dan vaak even de pagina opnieuw te laden.

Tip 2
Je kan ook zien in replit dat je "achter loopt" op de repository door de melding "1 commit behind master" die je ook in de afbeelding hiernaast ziet.

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Opdracht
1. Importeer (clone) de repository van je teamgenoot. Hoe dit precies moet staat in de handleiding.

2. Doe beide een commit en push.

3. Eén iemand doet een push als eerste. De ander doet daarna een pull. Wat gebeurt er?


Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Conflicting changes
Nine
Jade
Nine en Jade hebben in hetzelfde bestand iets aangepast: Nine op regel 3 en Jade op regel 7. Jade doet als eerste een push. De code van Jade staat dan op github. Als Nine vervolgens ook een push wil doen zegt github: "ho eens even, dit bestand heeft aanpassingen die jij (Nine) nog niet hebt. Wat nu?"
Conflict!
!

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Conflicting changes
Oplossing

De oplossing is in dit geval makkelijk. Omdat er op verschillende regels gewerkt is kan git automagisch de aanpassingen samenvoegen. Zoals op de afbeelding hiernaast. Daarvoor moet Nine het conflict scherm weg klikken en eerst een pull doen.

De versie van Nine heeft dan ook de aanpassingen van Jade verwerkt en Nine kan weer een commit en push doen.

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Conflicting changes
Nine
Jade
Er is nog één situatie die je kan tegenkomen waar die niet met een pull is op te lossen. En dat gebeurt in deze situatie. Jade had gezien dat Nine een titel had toegevoegd en had supersnel zelf ook een titel toegevoegd en een push gedaan voordat Nine een pull en push kon doen. Behalve dat Nine en Jade nu geen beste vriendinnen meer zijn krijgen zo ook weer die foutmelding... en hoewel Nine eerst een pull probeert krijgt ze toch weer de melding Deze keer kiezen we voor Keep version ion replit
Conflict!
!

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Conflict
Nine en Jade hebben beide dezelfde regel aangepast waardoor git niet meer automatische het bestand kan samenvoegen.

Je ziet op regel 4 en 6 de code van zowel Jade als Nine. Maar er staat ook "gekke" code boven en onder. Dat is code van git die je bij dit soort conflicten te zien krijgt. Je kan dat zo lezen:

<<<<<<< HEAD
aanpassingen op replit
=======
aanpassingen op github
>>>>>>>>

De oplossingen is simpel: pas de code aan zodat je programma weer werkt zoals zou moeten en commit en push

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Samenwerken
Hiernaast zie je schematisch weergegeven hoe twee mensen git gebruiken om samen te werken. Ze gebruiken clone, commit, push en pull. 

Wat belangrijk is is de volgorde waarop alles gebeurt. Zo doet John pas een push nadat hij eerst een pull heeft gedaan.

Wat komt er op de plek van het vraagteken?

git pull
git pull
git pull
het oorspronkelijke plaatje gebruikt fetch, dat heb ik vervangen door pull

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Samenwerken
Hoe ga je het werk van je project verdelen?




Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Opdracht
1. Doe beide een commit en push.

2. Eén iemand doet een push als eerste. De ander doet daarna een pull.

3. Zorg dat er tenminste twee commits per persoon in de repository staan.


Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Kies één repository
1. Maak een nieuwe replit en selecteer "Import from Github"
En importeer van github

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Kies één repository
Replit herkent in de meeste gevallen welke taal het project is dat je importeert. Maar soms niet helemaal en soms ook helemaal niet. Dan krijg je het scherm hiernaast.

In dit scherm selecteer je:

1. De juiste taal
2. De juiste "run button"  

Vraag aan je docent welke run code je voor jouw project moet invoeren. Voor een html project ziet het er in ieder gavel zo uit!
Selecteer het juiste project type

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

NEE
Nog even dit tussendoor. Er zit een knop in replit "Invite"

Die mag je niet gebruiken. Ook niet stiekem.

Waarom niet?
Stel je bent een mooie python functie aan het schrijven die je even wil uitproberen. Maar omdat je collega halverwege een for-loopje is is de code stuk en kan je dus niet testen.

Het geeft ellende. Niet doen.

Slide 19 - Diapositive

Dit is belangrijk om even kort in de les te bespreken. Dit gaan de leerlingen anders doen met alle ellende van dien
Waar moet je aan denken als je met git en replit gaat samenwerken?

Slide 20 - Question ouverte

Cet élément n'a pas d'instructions

Ik kan m.b.v. push en pull mijn code delen met een teamgenoot
A
Dat kan ik
B
Dat kan ik niet
C
Kweetniet

Slide 21 - Quiz

Cet élément n'a pas d'instructions

Dit vond ik niet leuk van deze les

Slide 22 - Question ouverte

Cet élément n'a pas d'instructions

Git wat beter bekeken
We hebben gezien wat er gebeurt als je een pull probeert te doen terwijl iemand anders je voor is geweest.


Dit komt doordat de commits die je doet lokaal gebeuren. Met lokaal bedoelen we eigenlijk: op jouw computer, niet op het internet. Dat is misschien een beetje gek als je b.v. met replit werkt maar een replit kan je beschouwen als een eigen computer. Het uploaden naar github gebeurt pas bij de push.

Voorheen deden we alleen een commit op github.com. Maar stiekem was dat dus een commit en een push!

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

git pull
git commit -m "hier je commit message"
git add <bestand(en>
git push
git clone <naamvanjerepo.git> .
Deze laten we voorlopig even buiten beschouwing om verwarring te voorkomen.
Zo werk je met git
github.com
lokaal

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

git clone <linkjenaarrepo.git> .

git add <bestand(en)>

git commit -m "mooi verhaal"

git push

git pull
Linkje naar documentatie
voorbeeld
git clone https://github.com/Timmiekun/html-css-lesson.git .
voorbeeld
git add *
voorbeeld
git commit -m "added suggestbox to search results"

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Repl koppelen met github
https://docs.google.com/document/d/17cdLmrDGtJnZYGA_1VHOVpu3eSNbJb3pEDOCJNw1kp8

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Bronnen
https://swcarpentry.github.io/git-novice/01-basics/index.html

Slide 27 - Diapositive

Cet élément n'a pas d'instructions