27 gennaio 2023

📖 24 min read

Git e GitHub | Il controllo di versione

Ultimo aggiornamento 07 giugno 2023

Come promesso questo è l'articolo nel quale ti spiegherò tutto ciò che devi sapere riguardo al sistema di controllo di versione Git.

Nel precedente articolo sulla preparazione del tuo computer all'ambiente di sviluppo abbiamo installato Git nel tuo computer. In questa lezione ti aiuterò a capire meglio qual è l'utilità nell'utilizzare un sistema di controllo di versione e successivamente ad ultimare la configurazione di Git nel tuo computer con un applicativo web chiamato GitHub.

Alla fine di questo articolo avrai capito a cosa serve Git e sarai pronto ad utilizzarlo.

Indice dei contenuti

Introduzione
Se le nostre vite fossero state controllate da un VCS - Version Control System
Familiarizzazione con i termini più utilizzati in Git
Alcuni consigli quando si usa Git
Introduzione a GitHub
Step 1: Creazione di un account su GitHub
Familiarizzazione con i comandi basici del Terminale che useremo per configurare Git
Step 2: Configurazione di Git
Step 3: La tua prima repository ed il tuo primo git commit
Conclusione

Corso completo Web Developer - Parte 1 - 1.3

Introduzione

Bentornata/o su gorgaTech 👋

Il Version Control System è il processo e la tecnologia utilizzata per controllare le varie versioni del codice che scrivi.

Ti faccio un esempio, se stai costruendo un palazzo inizi a costruire le fondamenta ed una volta che queste sono finite vuoi assicurarti che siano solide prima che inizi a costruirci le mura al di sopra. Una volta costruite le mura faresti lo stesso ovvero ti fermeresti per assicurarti che siano state costruite correttamente e siano allineate prima che ci appoggeresti il tetto al di sopra.

Sarebbe sbagliato se costruissi tutto il palazzo e soltanto dopo averci appoggiato sopra il tetto ti rendi conto che c'è una frattura nelle fondamenta.

Quando si lavora col software e con il codice seguiamo esattamente la stessa procedura. Un sistema di controllo di versione ci aiuta a mantenere traccia di tutti i cambiamenti che stiamo facendo e di quello che stiamo costruendo.

Nel caso dovessimo renderci conto di aver commesso un errore, sarà facile tornare alla versione precedente dove siamo sicuri che tutto funzionava correttamente.

In aggiunta a quanto detto sopra, il sistema di controllo di versione ci permette anche di tenere traccia di più versioni dello stesso palazzo e di creare delle ramificazioni (branches) dove potenzialmente ogni singolo Developer è incaricato di sviluppare una determinata parte del software e poi quando siamo pronti ad un certo punto del processo di sviluppo possiamo riunificare il tutto ed avere un software completo.

Non importa se lavori in team o lavori da solo, il version control system è qualcosa di cui avrai sicuramente bisogno.

Non cercare di capire il tutto perfettamente in questo momento. L'importante è che hai capito il concetto, il perchè. Man mano che lo utilizzerai lo comprenderai sempre di più diventando sempre più efficiente.

Se le nostre vite fossero state controllate da un VCS - Version Control System

Immagina che le nostre vite fossero controllate da un version control system. Potremmo tornare indietro nel tempo come se avessimo una macchina del tempo!! ⏱️🚗

Ogni qual volta che commettiamo un errore potremmo tornare indietro fino al momento prima di commetterlo.

Oppure potremmo riguardare com'era la nostra vita quando avevamo cinque o dieci anni! 👶

O magari vivere parallelamente più versioni della nostra stessa vita.

Ti è mai capitato di voler dire qualcosa e per paura delle conseguenze non l'hai detta? Con un Version Control System potresti creare un git commit prima di dire quella cosa, dirla e vedere che cosa sarebbe successo nel caso in cui l'avessi detta e se le conseguenze non fossero di tuo gradimento potresti tornare indietro al punto dove hai creato il commit.

E se invece volessi costruire una casa da zero, al posto di fare tutti gli steps in ordine partendo dalle fondamenta potresti suddividere il tempo reale in più realtà parallele ed in ognuna di queste portare avanti un determinato lavoro. Una volta che hai completato il tutto puoi riunire tutte le realtà parallele in una facendo un git merge e quindi avere la casa completa.

Questo è quello che ci permette di fare un Version Control System! 💪

Familiarizzazione con i termini più utilizzati in Git

Repository: una sorta di cartella all'interno di GitHub dove il codice viene salvato
Clone: una copia di una Repository su Github che possiamo scaricarci sul nostro computer
Pull: il comando per fare il download dell'ultima versione di una determinata repository
Push: il comando per fare l'upload dell'ultima versione in una determinata repository
Add: aggiunge le modifiche che abbiamo apportato al codice nella cosiddetta Local Staging Area cosí da rendere il codice pronto ad essere inviato su GitHub
Staging: l'area che identifica le modifiche che stiamo per inviare su GitHub
Status: ci mostra lo stato della cartella in cui siamo locati nel terminale e della Staging area
Commit: il comando per creare una nuova versione con le modifiche apportate

Alcuni consigli quando si usa Git

Cerca di creare commits con una quantità di modifiche medio/bassa. Più modifiche saranno presenti in un singolo commit più difficile sarà capire qual è il problema che potrebbe aver causato un bug in una versione di codice che abbiamo caricato su GitHub
Quando si crea un commit ci viene richiesto di aggiungere un messaggio per descrivere le modifiche che questo commit sta apportando. Cerca di usare messaggi che abbiano effettivamente un senso e descrivano quali sono le modifiche che sono state apportate
Quando si lavora in team mantieni aggiornata la tua versione locale del software sfruttando il comando git pull

Introduzione a GitHub

Aspetta un attimo. Neanche il tempo di capire che cos'è Git e voglio subito introdurti ad un'altra cosa?

Per quanto riguarda Git che GitHub sono entrambi strumenti con i quali ci si può confondere inizialmente, con la pratica questa confusione andrà via velocemente diventando sempre più pratici e competenti.

L'obiettivo di questo articolo è di prepararti a 360 gradi al workflow corretto del programmatore.

Il programmatore quando lavora con il codice si assicura di fare dei "salvataggi" man mano che va avanti di modo che può sempre ritornare indietro nel caso in cui dovesse servire.

Quando crei un commit (o un salvataggio) con Git, nel momento della creazione questo viene salvato in locale sul tuo computer.

Come faresti nel caso in cui volessi aprire questo stesso salvataggio da un altro computer?

Se Git è lo strumento con cui crei questi salvataggi, GitHub è come se fosse il Cloud per i tuoi salvataggi. Puoi fare l'upload di questi salvataggi su GitHub, accedere al tuo account GitHub da un altro computer ed utilizzare questi salvataggi.

GitHub oltre ad essere il cloud per i tuoi salvataggi è anche una sorta di social network per gli utenti. Puoi infatti seguire ed essere seguito da altri utenti.

Ci sono altri siti come per esempio GitLab o Bitbucket ma GitHub tende ad essere lo standard come si può evincere dal Developer Survey di StackOverflow del 2022.

Step 1: Creazione di un account su GitHub

Proseguendo con il tutorial e la configurazione di Git arriveremo ad uno step in cui metteremo in comunicazione Git con GitHub quindi passiamo alla creazione di un account su GitHub.

Apri il sito di GitHub e registra un nuovo account

Segui gli steps che GitHub ti richiede per portare a termine la registrazione e non dimenticare di verificare il tuo account con l'e-mail di conferma che ti arriverà una volta completato il processo di registrazione sul sito

Familiarizzazione con i comandi basici del Terminale che useremo per configurare Git

Ora che abbiamo un account su GitHub possiamo proseguire con la configurazione di Git.

Visto che avremo bisogno del Terminale o GitBash per Windows per la configurazione di Git voglio introdurti subito a due comandi che andremo ad utilizzare nel prossimo step:

cd : questo comando ci permette di muoverci fra le cartelle infatti è l'acronimo di change directory
mkdir : questo comando ci permette di creare una nuova cartella infatti è l'acronimo di make directory

Step 2: Configurazione di Git

Ogni qual volta vedi termini scritti in questo modo oppure

  in questo modo

oppure che iniziano con il simbolo del dollaro come

  $ mkdir test

significa che sono comandi che devono essere eseguiti nel Terminale.

Attenzione: non devi scrivere anche il simbolo del dollaro nel Terminale ma solamente tutto ciò che viene subito dopo il dollaro.

Iniziamo quindi con la nostra configurazione di Git

Se utilizzi Windows

Apriamo il terminale Git Bash eseguendolo come Amministratore.

Dal terminale dirigiamoci prima nella cartella Home del computer e poi nella cartella Desktop - ti consiglio di seguire bene gli spazi e le lettere grandi e piccole.

  $ cd ~
  $ cd Desktop

Il simbolo ~ viene definito come tilde. Questo su Windows si può fare con la combinazione dei tasti Alt + Fn + 126 oppure Alt-Gr + Fn + 126 in base al tipo di tastiera che hai. Provali entrambi anche su Microsoft Word, un browser o un qualsiasi text editor e vedi quale dei due ti funziona.

Nel caso non riuscissi proprio a farlo, considera anche di copiare ed incollare il carattere ~ nel terminale.

Adesso abbiamo bisogno di dirigerci nella cartella che abbiamo stabilito di voler utilizzare per i nostri progetti. Nel precedente articolo abbiamo creato questa cartella durante lo step 2. Se non l'hai ancora creata non preoccuparti puoi crearla ora. Se vuoi crearla da terminale esegui il prossimo comando da terminale:

  $ mkdir coding

Altrimenti creala manualmente con il Mouse come faresti normalmente.

Una volta che hai creato questa cartella entriamoci da terminale. Sostituisci il termine coding con il nome che hai deciso di assegnare a questa cartella. Dopodichè creiamo una sottocartella chiamata testing-git e dirigiamoci all'interno.

  $ cd coding
  $ mkdir testing-git
  $ cd testing-git

A questo punto dovresti ritrovarti con una cartela nominata testing-git all'interno della cartella principale nominata coding che si trova sul Desktop.

Essendo Git un programma per poter tracciare modifiche che apportiamo ai files, l'orario in cui vengono fatte e da chi vengono fatte questo ci richiede una configurazione con nome ed email. Quindi una volta entrati nella cartella testing-git da terminale proseguiamo con i comandi sottostanti:

  $ git config --global user.name "IL TUO NOME"
  $ git config --global user.email "LA TUA EMAIL"

Sostituisci "IL TUO NOME" e "LA TUA EMAIL" all'interno delle virgolette con i tuoi dati. Nel caso dovessi sbagliare non preoccuparti, puoi semplicemente ripetere il comando con i dati corretti.

Ora dobbiamo generare le SSH keys che ci permetteranno di autenticarci con l'account GitHub.

Puoi controllare se hai mai generato SSH keys in precedenza con il seguente comando ls ~ e controllare che non c'è nessuna cartella con il nome .ssh.

Quindi proseguiamo generando le SSH keys. Fai attenzione a scrivere correttamente il prossimo comando e sostituire la-tua-email@email.it con quella che effettivamente è la tua e-mail che hai utilizzato nello step 5:

  $ ssh-keygen -t ed25519 -C "la-tua-email@email.it"

7.1. Ti chiederà di decidere dove salvare i files che verranno generati. Puoi semplicemente premere Invio per confermare la cartella di default.

7.2. Ti chiederà poi di decidere una passphrase. Ti consiglio di inserirne una per motivi di sicurezza. Non compariranno le lettere sullo schermo ma non ti preoccupare perchè ti chiederà di confermare al prossimo step. Quando hai scritto correttamente la tua passphrase premi Invio per confermare.

7.3. Infine ti chiederà di ripetere la tua passphrase quindi ripetila e premi Invio per confermare.

Nel caso in cui dovessi fare errori di scrittura potrai ripetere la password come ti mostro nell'immagine sottostante:

A questo punto avremmo creato le nostre SSH keys.

Avrai notato che sto parlando al plurale quando parlo di SSH keys. Se ti sei chiesto il motivo è perchè abbiamo generato due tipi di chiavi SSH. Una pubblica ed una privata. Su GitHub dovremmo inserire quella pubblica. Le due si possono riconoscere dall'estensione del file che finisce con .pub per quella pubblica.

Prima di aggiungere a GitHub la chiave pubblica aggiungiamo la nostra chiave private all'SSH-Agent. Questo ci permetterà di non dover inserire continuamente la passphrase ogni volta che ne avremo bisogno.

Eseguiamo quindi l'SSH-Agent in background:

  $ eval "$(ssh-agent -s)"

Ora aggiungiamo la chiave all'SSH-Agent

  $ ssh-add ~/.ssh/id_ed25519

Ora siamo pronti a copiare la nostra SSH key pubblica (quella pubblica con estensione .pub su GitHub. Apriremo il file con l'applicazione Blocco note attraverso il terminale e dopodichè possiamo semplicemente evidenziare e copiare il tutto. Assicurati di aprire il file .pub e di copiare tutta la riga

  $ notepad ~/.ssh/id_ed25519.pub

Adesso dirigiamoci su GitHub e apriamo le impostazioni su Settings nell'angolo in alto a destra sulla nostra immagine profilo

Dal menù sulla sinistra clicchiamo su SSH and GPG keys

Clicchiamo su New SSH key

Incolliamo la nostra public SSH Key nel riquadro e clicchiamo su Add SSH key. Questa dovrebbe iniziare con ssh-ed25519

FATTO!! 🥳

Se utilizzi macOS

Apriamo il Terminale.

Dal terminale dirigiamoci prima nella cartella Home del computer e poi nella cartella Desktop - ti consiglio di seguire bene gli spazi e le lettere grandi e piccole.

  $ cd ~
  $ cd Desktop

Il simbolo ~ viene definito come tilde. Questo su macOS si può fare con la combinazione dei tasti Alt (o option) + N. Prova prima su Note o un qualsiasi text editor.

Nel caso non riuscissi proprio a farlo, considera anche di copiare ed incollare il carattere ~ nel terminale.

Adesso abbiamo bisogno di dirigerci nella cartella che abbiamo stabilito di voler utilizzare per i nostri progetti. Nel precedente articolo abbiamo creato questa cartella durante lo step 2. Se non l'hai ancora creata non preoccuparti puoi crearla ora. Se vuoi crearla da terminale esegui il prossimo comando da terminale:

  $ mkdir coding

Altrimenti creala manualmente con il Mouse come faresti normalmente.

Una volta che hai creato questa cartella entriamoci da terminale. Sostituisci il termine coding con il nome che hai deciso di assegnare a questa cartella. Dopodichè creiamo una sottocartella chiamata testing-git e dirigiamoci all'interno.

  $ cd coding
  $ mkdir testing-git
  $ cd testing-git

A questo punto dovresti ritrovarti con una cartela nominata testing-git all'interno della cartella principale nominata coding che si trova sul Desktop.

Essendo Git un programma per poter tracciare modifiche che apportiamo ai files, l'orario in cui vengono fatte e da chi vengono fatte questo ci richiede una configurazione con nome ed email. Quindi una volta entrati nella cartella testing-git da terminale proseguiamo con i comandi sottostanti:

  $ git config --global user.name "IL TUO NOME"
  $ git config --global user.email "LA TUA EMAIL"

Sostituisci "IL TUO NOME" e "LA TUA EMAIL" all'interno delle virgolette con i tuoi dati. Nel caso dovessi sbagliare non preoccuparti, puoi semplicemente ripetere il comando con i dati corretti.

Ora dobbiamo generare le SSH keys che ci permetteranno di autenticarci con l'account di GitHub in remoto.

Puoi controllare se hai mai generato SSH keys in precedenza con il seguente comando ls -a ~ e controllare che non c'è nessuna cartella con il nome .ssh.

Quindi proseguiamo generando le SSH keys. Fai attenzione a scrivere correttamente il prossimo comando e sostituire la-tua-email-qui@email.it con quella che è effettivamente la tua e-mail che hai utilizzato nello step 5:

  $ ssh-keygen -t ed25519 -C "la-tua-email-qui@email.it"

7.1. Ti chiederà di decidere dove salvare i files che verranno generati. Puoi semplicemente premere Invio per confermare la cartella di default.

7.2. Ti chiederà poi di decidere una passphrase. Ti consiglio di inserirne una per motivi di sicurezza altrimenti puoi premere Invio per saltare questo passaggio. Non compariranno le lettere sullo schermo ma non ti preoccupare perchè ti chiederà di confermare al prossimo step. Quando hai scritto correttamente la tua passphrase premi Invio per confermare.

7.3. Infine ti chiederà di ripetere la tua passphrase quindi ripetila e premi Invio per confermare.

Nel caso in cui dovessi fare errori di scrittura potrai ripetere la password come ti mostro nell'immagine sottostante:

A questo punto avremmo creato le nostre SSH keys.

Prima di aggiungere a GitHub la chiave pubblica aggiungiamo la nostra chiave privata all'SSH-Agent. Questo ci permetterà di non dover inserire continuamente la passphrase ogni volta che ne avremo bisogno.

Eseguiamo quindi l'SSH-agent in background:

  $ eval "$(ssh-agent -s)"

Ora dobbiamo modificare un file di configurazione di SSH. Nel caso questo file non fosse ancora presente nel computer lo creeremo prima di andarlo a modificare. Per controllare se esiste o meno eseguiamo il seguente comando:

  $ open ~/.ssh/config

Nel caso il file esiste si aprirà l'applicazione Note con questo file, altrimenti vedrai un messaggio d'errore come nell'immagine sottostante

Quindi creiamo il file con il seguente comando prima di poter proseguire alla modifica:

  $ touch ~/.ssh/config

Ed ora ripetiamo il comando di prima per aprire il file in Note

  $ open ~/.ssh/config

A questo punto puoi copiare ed incollare il contenuto sottostante nel file e salvare:

  Host *.github.com
    AddKeysToAgent yes
    UseKeychain yes
    IdentityFile ~/.ssh/id_ed25519

A questo punto aggiungiamo la nostra SSH key pubblica all'Apple Keychain. Se hai scelto di avere una passphrase nello step n. 7 qui ti chiederà di inserirla:

  $ ssh-add --apple-use-keychain ~/.ssh/id_ed25519

Attraverso il Terminale possiamo visualizzare la chiave sullo schermo e copiarla nella nostra clipboard. Quando copi qualcosa con cmd + C o pulsante destro del mouse + copia si dice che il testo che hai copiato è stato copiato nella clipboard.

Quindi visualizziamo la chiave con il seguente comando:

  $ cat ~/.ssh/id_25519.pub

Se il risultato che vedi è un lungo testo che inizia con ssh-ed25519 simile all'immagine sottostante vorrà dire che hai fatto tutto correttamente quindi possiamo proseguire a copiarla nella clipboard

  $ pbcopy < ~/.ssh/id_25519.pub

Adesso dirigiamoci su GitHub e apriamo le impostazioni su Settings nell'angolo in alto a destra sulla nostra immagine profilo

Dal menù sulla sinistra clicchiamo su SSH and GPG keys

Clicchiamo su New SSH key

Incolliamo la nostra public SSH Key nel riquadro e clicchiamo su Add SSH key. Questa dovrebbe iniziare con ssh-ed25519

FATTO!! 🥳

Abbiamo completato la configurazione di Git e l'account GitHub!

Adesso siamo pronti a creare la prima repository su GitHub e collegarla alla cartella testing-git che abbiamo in locale sul nostro computer.

Step 3: La tua prima repository ed il tuo primo git commit

Nel Terminale (per Mac) o GitBash (per Windows) ci troviamo nella cartella testing-git.

Che tu abbia un mac o un PC Windows non cambia nulla a parte la grafica che sarà leggermente diversa.

Che cos'è una Git repository? È semplicemente una cartella che abbiamo deciso di iniziare a tracciare attraverso Git. Queste sono normalmente cartelle che contengono un singolo progetto. Ogni singolo progetto viene sviluppato all'interno di una cartella e questa la tracciamo attraverso Git.

Nel caso in cui avessi stoppato il tutorial o hai riavviato il tuo computer o comunque non ti trovi nella cartella testing-git puoi aprire il Terminale/GitBash e dirigerti in questa cartella con il seguente comando ammesso che questa cartella sia effettivamente presente nel tuo computer:

  $ cd ~
  $ cd Desktop/coding/testing-git

Ora iniziamo a tenere traccia di questa cartella eseguendo il comando sottante. Fai particolare attenzione ad eseguire questo comando nel terminale mentre sei locato nella cartella testing-git e non in una cartella "top-level" ovvero una cartella come il Desktop.

Questo serve a Git per iniziare a tenere traccia dei cambiamenti fatti soltanto in questa cartella.

  $ git init

Il termine init sta per initialize ovvero INIZIALIZZARE / INIZIARE. Quindi stiamo praticamente dicendo a git di iniziare a tenere traccia di questa cartella.

Il risultato dovrebbe essere simile alla seguente immagine

Dopodichè controlliamo che tutto sia andato a buon fine con il seguente comando:

  $ git status

E quello che dovresti vedere dovrebbe essere simile alla seguente immagine

Se erroneamente dovessi inizializzare git in una cartella top-level come il Desktop puoi annullare l'operazione cancellando la cartella nascosta che viene creata quando si esegue il comando git init con il seguente comando:

  $ rm -rf .git

A questo punto se tutto è andato a buon fine esegui il comando sottostante per creare automaticamente un file di nome index.html e scriverci all'interno la frase Hello World

  echo "Hello World" > index.html

Abbiamo appena creato un file con nome index.html nella cartella testing-git con dentro un testo Hello World.

Per controllare che questo sia andato a buon fine eseguiamo il seguente comando

  $ cat index.html

Ora ripetiamo git status per notare che c'è stato un cambiamento nella cartella

  $ git status

E dovremmo vedere qualcosa di simile

Aggiungiamo questo cambiamento alla git staging area

  $ git add index.html

E creiamo un git commit (un salvataggio) assegnandoci un messaggio per descrivere ciò che abbiamo fatto. In questo caso useremo una semplice frase "Il mio primo commit"

  $ git commit -m "Il mio primo commit"

Ora proseguiamo con la creazione della repository su GitHub. Dirigiti sul tuo profilo di GitHub collegandoti al sito https://github.com/, cliccando sull'icona del tuo profilo in alto a destra e cliccando su Your profile

Adesso vai sulla pagina Your repositories

Ed ora crea una nuova repository cliccando su New

A questo punto si aprirà una pagina dove dovrai inserire i dati di questa repository. Assicurati di usare lo stesso nome che abbiamo usato sul computer testing-git. Una volta scritto il nome clicca su Create Repository

Perfetto! Ora dobbiamo eseguire una linea per volta le tre righe che vediamo nel secondo riquadro dello schermo come nell'immagine

Fai attenzione a sostituire emanuelegorga con quello che è il nome del tuo account GitHub. Quindi esegui questi comandi dal Terminale/GitBash

Se è andato tutto a buon fine dovresti ritrovarti con un risultato del genere nel terminale

E se aggiorni la pagina di GitHub sul browser dovresti ritrovarti con qualcosa di simile all'immagine sottostante

Conclusione

Lo so che tutta questa roba ti può sembrare complessa, confusionaria e che magari non fa per te ma credimi chela programmazione in verità è per tutti e te lo garantisco.

L'unica cosa di cui hai bisogno è entusiasmo. Mantieni sempre accesa quella fiammella che ti ha fatto arrivare fino alla fine di quest'articolo.

Ti avrei potuto farti cominciare direttamente con un file HTML e farti fare una pagina web ma questo non è l'approccio con cui io ho imparato e non è l'approccio con cui mi piace tramandare questa passione.

Desidero che tu come me possa avere una possibilità ed avvicinarti in questo mondo nel modo giusto da professionista.

Il mondo ha bisogno di tanti programmatori professionisti e mi auguro che tu possa essere uno/a di questi da qui a qualche mese!

Con questo articolo quindi abbiamo concluso la configurazione di Git e GitHub

Un anticipo a che cosa andremo a vedere nel prossimo articolo:

Command Line - andremo a fare un piccolo approfondimento sulle basi del Terminale / GitBash