Git & GitHub

pentru începători

Comunitate
open-source
Lecții gratuite
Exerciții practice
La care vă dăm feedback
Traininguri
live

Păvă

Traineri

George

Cătălin

Diana

{ about you }

👨‍🎓👩‍🎓

Cine ești?

Ce experiență ai

în programare?

Ce faci?

Part 1

Part 2

💭 Despre GIT
   GIT în VSCode
GIT CLI   

👩‍💻 Let's begin! 👨‍💻

0) despre git

Cum urmarim schimbarile,

fara a pierde versiunile vechi?

Cum putem colabora cand scriem cod?

Cum putem detecta noile schimbari ale codului?

cum GIT?

Git

Github

CLI

Desktop

app

IDE Plugin

Web client

Cum versionam codul?

Cum folosim Git?

Cum folosim Github?

{ DEMO }

{ github  DEMO }

1) Tool-uri

Download & install Git

GitHub account

Install VSCode

Install GitLens

1) vscode

Editor de cod open-source, ce oferă foarte multe facilități pentru a ne ajuta să codăm rapid.

Extrem de popular pentru partea de FrontEnd, dar printr-o serie de extensii poate fi folosit și pentru alte limbaje/tehnologii.

{ DEMO }

Adăugarea unui proiect în workspace

VIDEO/GIF

📂 Drag and drop folder în editor

În stânga editorului vom vedea denumirea folderului și fișierele pe care le conține.

Crearea unui nou fișier

File -> New File
(CTRL + N)

Selectăm primul icon (lângă denumirea folder-ului).

sau

Bara de activitate

Search - căutare în toate fișierele după un cuvânt cheie

File explorer - aici navigăm prin folderele și fișierele proiectului nostru

Source Control - include Git Source Control by default

Extensions - de aici instalăm diverse progame care adaugă funcționalități în plus editorului VSCode. De obicei ele sunt open-source, și un efort de comunitate.

Shortcut-uri

Ctrl + P

Navigheză rapid prin fișiere

Ctrl + Shift + P

Accesează Command Palette de unde ai acces rapid la diverse funcționalități

Ctrl + S

💾  Salvează fișierul

2) Repo & Fork

Fiecare proiect de Git se numește repository (repo).

Un fork este o copie a unui repository (proiect). Asta ne permite să facem modificări pe copia noastră, fără a modifica proiectul original.

La ce am folosi Fork?

👨‍💻 Pentru a contribui la un proiect open-source

✔ faci fork la proiect

✔ codezi pe propria versiune care nu impactează originalul

✔ trimiți un pull request pentru a-i sugera autorului să introducă schimbările tale în proiectul original

👩‍💻 Pentru a folosi un proiect open-source ca punct de început pentru un proiect de-al tău.

{ DEMO }

Task 0

1) Intră pe URL-ul https://github.com/FrontEnd-ro/git-github-practice-exercises

 

2) Fork la proiect

3) Clone

Clone - descărcăm proiectul la noi pe calculator pentru a implementa funcționalități.

{ DEMO }

Task 1

1) Deschide Command Pallete (Ctrl + Shift + P)

 

2) Accesează opțiunea Git Clone

 

 

3) Introdu acolo URL-ul proiectului (paste - CTRL + V)

 

4) Selectează un director unde să-l clonezi (descarci)

 

5*) Dacă îți apare un pop-up în dreapta jos care să sugereze să deschizi folderul, apasă open.

4) Coding

Pentru fiecare modificare din fișier, VSCode ne arată diferența față de ce este salvat pe Git.

Aceleași modificări le vedem și-n panoul Source Control

Aici vedem lista cu toate fișierele modificate

Pentru fiecare fișier putem vedea explicit toate modificările

Task 2

1) Deschid fișierul prep.html

 

2) Adaugă un nou element în grid cu numele tău

 

3) Deschide panoul Source Control și verifică dacă modificările

apar acolo

 

 

5) Commits

Acum că avem modificările de la taskul anterior, cum ajung ele pe Git?

STAGING

Primul pas e să alegem ce modificări vrem să adăugăm pe Git.

De exemplu, putem avea 3 fișiere modificate dar noi vrem să împingem doar modificarile din 2 dintre ele.

Facem asta apăsând pe ➕. Acum fișierele selectate se află în zona de Staging

Commit

Acum că am ales modificările, hai să le dăm/adăugăm un mesaj descriptiv ce ne va ajuta să ne amintim mai târziu ce s-a schimbat aici.

E foarte important cum numim mesajele de commit, căci vrem să fie clar ce modificări s-au făcut în proiect.

Un good practice e să legăm commit-urile de issue-ul pe Git care descrie întreaga funcționalitate/problemă (ex: React) 👆

Pentru trainingul de azi hai să folosim o soluție de mijloc, "good enough" pentru numirea commit-urilor👇

[Task-N] Description

Scrie mesajul aici, iar la final Ctrl + Enter

Acum am creat un commit care deocamdată se află pe PC-ul nostru.

Putem vedea întreaga listă de commit-uri în panoul Source Control 👇

Dacă am făcut o greșeală, putem face undo la commit

Task 3

1) Adaugă fișierul modificat (prop.html) în starea Staged.

 

2) Adaugă un commit cu modificările (asigură-te că respecți convenția de nume descrisă anterior  [Task-N] Description).

 

3) Deschide sub-panoul de commits și asigură-te că vezi commit-ul tău.

Putem să-l adăugăm pe GitHub pentru a fi accesibil și colegilor noștri în 2 moduri:

✅ Opțiunea de Sync din bara de jos
✅ Folosing Command Pannel (Ctrl + Shift + P) și apoi opțiunea Push

PUSH

Task 4

1) Hai să facem push la commit pe repository-ul remote

 

2) Navighează pe GitHub și asigură-te că vezi commit-ul acolo 👀

 

Task 5

1) Adaugă o poză cu tine în folderul assets/participants. Numește-o după username-ul tău.

 

2) Adaugă un tag <img> cu acestă poză în celula din task-ul anterior

 

3) Adaugă un commit pentru fiecare fișier modificat. Hai să păstrăm aceeași convenție ca înainte: [Task-N]  Description.

 

4) Hai să facem Push la ambele commit-uri în repo-ul remote

 

5) Mergi în GitHub și verifică că ai commit-urile acolo.

<Br />

6) branch-uri

Big feature?

Avem cod nefuncțional

în aplicație 😬

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Task 7

Task 8

Developerii implementează fiecare funcționalitate pe câte un branch separat, care va ajunge în master doar când e gata.

{ DEMO }

VSCode ne arată în stânga jos pe ce branch suntem:

Pentru a crea un branch nou ne folosim de Command Pallete 👇

Cum putem sa navigam intre branch-uri?

Dupa ce am facut schimbarile in cod, trebuie sa unim ("merge") noul branch cu master 

Task 6

1) Creează un branch numit prep-chellanges din master

 

2) Adaugă în prep.html o nouă celule cu o mică descriere despre tine

 

3) Add a commit with new modification. Remember to follow the naming discussed

 

4) Push this new commit and the entire branch on remote repo

7) Pull requests

Atunci când funcționalitatea de pe un branch este complet implementată, facem un Pull Request (PR) pentru a o adăuga în master.

În cadrul unui PR ceilalți membri ai echipei dau feedback pe noul cod și sugestii de îmbunătățire

Cum creem un nou PR pe GitHub

Alege cele 2 branch-uri pe care vrei să le compari.

merge

Dacă branch-urile nu au conflicte, le putem merge-ui chiar din interfața de GitHub

merge with Conflicts

Dacă în schimb există conflicte, GitHub nu poate merge-ui automat, deci va trebui să facem noi asta în editor.

Rezolvarea conflictelor la merge 👇

Task 7

1) Adaugă pe unul din traineri ca și contributor la proiect

 

2) Trainer-ul va adăuga în prep.html un card nou cu o poză + nume, și va face push la modificări direct pe master

 

3) Create a PR (Pull Request) to add your code in master.

 

4) Fix the merge conflicts locally

 

5) Merge the branch

8) Reverting

Cum revenim la o versiunea anterioară?

Practice time 💪

Rezolvă challenge-urile din repo-ul trainingului:

 

https://github.com/FrontEnd-ro/git-github-practice-exercises

Noi te vom ajuta cu feedback dacă dai de probleme 😉

9) cli preview

Toate comenzile de Git pe care le-am rulat din VSCode pot fi rulate și din terminal.

{ DEMO }

See you next weekend! 👋

Part 1

Part 2

💭 Despre GIT
   GIT în VSCode
GIT CLI   

👩‍💻 Let's begin! 👨‍💻

0) CLI

Pentru noi CLI-ul (terminalul) este un mod mai rapid de a folosi Git & GitHub, deci hai să-l învățăm!

Cum deschidem terminalul?

1) Deschizând GitBash într-un folder

2) Utilizând VSCode și deschizând terminalul acolo

GIT EDITOR CONFIG

Anumite comenzi sunt mai complexe și necesită un editor de text pentru a le folosi.

Default Git vine cu VIM  👉

Hai să configurăm să fie VSCode cel default 👇

git config --global core.editor "code --wait"

1) Clone

Clone - descărcăm proiectul la noi pe calculator pentru a implementa funcționalități.

{ DEMO }

Task 1

 

1) Copiază URL-ul repo-ului de pe GitHub.

 

 

 

 

 

 

 

 

 

Task 1 - Continuare

 

1) Deschide Terminalul în folderul unde dorești să clonezi acel repo

 

 

2) Rulează comanda comanda git clone URL_PASUL_1

 

2) Coding

Pentru fiecare modificare din fișier, VSCode ne arată diferența față de ce este salvat pe Git.

Recap VsCode

Aici vedem lista cu toate fișierele modificate

Pentru fiecare fișier putem vedea explicit toate modificările

status

Git CLI are propriile comenzi prin care putem observa diferențele față de Git, însă aceste diferențe nu sunt la fel de ușor de vizualizat. 

Pentru a vedea ce fișiere am modificat / adăugat / șters, folosim comanda git status.

diff

Pentru a vedea ce fișiere am modificat / adăugat / șters, folosim comanda git diff.

Cu verde apare ce am adăugat

Cu roșu ce am șters

{ DEMO }

Task 2

1) Deschide fișierul prep.html

 

2) Adaugă un nou element în grid cu numele tău.

 

3) Deschide Git Bash sau terminalul din VSCode  și rulează git status, respectiv git diff, pentru a observa diferențele.

 

 

3) Commits

Pentru commits, trebuie urmați aceeași pași învățați în sesiunea precedentă: stage + commit.

StagING

Pentru a adăuga fișierele în zona de staging, vom folosi comanda git add.

Adaugă toate modificările din folderul curent.

Adaugă un fișier specific.

Commit

După ce am adăugat fișierele în zona de staging, putem să trecem la commit, folosind comanda git commit.
Pentru a adăuga un mesaj sugestiv commit-ului, vom folosi flag-ul   -m.

Pentru mesajele de astăzi, vom folosi aceeași convenție de săptămâna trecută👇

[Task-N] Description

{ DEMO }

LOG

Pentru a vedea lista de commits, vom folosi comanda git log.

LOG - pretty

Putem folosi un alt flag care ne va afișa lista pe o singură linie, într-o manieră mai ușor de citit.

TIP: Flag-ul --pretty mai are și alte valori pentru modificarea afișării log-ului.

Task 3

1) Adaugă fișierul modificat (prop.html) în starea staged.

 

2) Adaugă un commit cu modificările (asigură-te că respecți convenția de nume descrisă anterior  [Task-N] Description).

 

3) Asigură-te că vezi commit-ul tău in lista din terminal (HINT: git log)

push

Pentru a duce modificările pe GitHub, folosim comanda git push.

Task 4

1) Hai să facem push la commit pe repository-ul remote.

 

2) Navighează pe GitHub și asigură-te că vezi commit-ul acolo 👀

 

<Br />

4) branch-uri

Așa cum am învățat săptămâna trecută, developerii implementează fiecare funcționalitate pe un branch separat, care va ajunge în master doar când e gata.

Pentru a vedea branch-ul curent, folosim git status.

checkout

Pentru a crea un nou branch, folosim comanda
git checkout -b BRANCH_NAME.

OBS: Rularea acestei comenzi ne va muta automat pe branch-ul nou creat.

checkout

Aceeași comandă se va folosi și pentru navigarea între branch-urile repo-ului git checkout BRANCH_NAME.

OBS: Observați lipsa flag-ului -b din comandă.

push - revisited

Pentru a da push pe un branch nou creat, trebuie să modificăm puțin comanda inițială.

OBS: Orice push ulterior va putea fi făcut doar rulând git push.

{ DEMO }

merge

Pentru a duce schimbările de pe branch-ul curent într-un alt branch, vom folosi comanda git merge.

OBS: Trebuie să fim pe branch-ul pe care vrem să aducem modificările.

pull

Ca best-practice și pentru a evita eventuale probleme de "istoric" al branch-urilor, este bine să luăm ultima versiune a branch-ului pe care dorim să aducem ultimele modificări.

{ DEMO }

Task 5

1) Creează un branch numit prep-challenges din master.

 

2) Adaugă în prep.html o nouă celulă cu o mică descriere despre tine.

 

3) Adaugă un nou commit cu descrierea. Nu uita de convenția pentru denumirea commit-ului.

 

4) Împinge acest nou commit și întregul branch pe repo-ul remote.

5) revert

Cum revenim la o versiune anterioară?

Hash-ul commit-ului

Challenge practic

Am pregătit un challenge practic interactiv pe site.

 

Fiecare task va fi autoevaluat de platforma noastră pentru a ști dacă l-ai  rezolvat corect. E posibil să aibă câteva buguri, dacă le întâlnești dă-ne un semn :)

 

https://FrontEnd.ro/provocari/git-github

6) wrap up

Folosiți Git chiar și la proiectele la care lucrați singuri

Creați un branch pentru fiecare feature/bugfix nou

🌴

Preferați mai multe commit-uri mici, ușor înțelese

Stabiliți-vă un standard de numire a commit-urilor

📃

Folosiți PR-uri pentru a asigura calitatea codului

💪