In questa lezione imparerai a utilizzare Git e GitHub direttamente da Visual Studio Code (VS Code).
Creeremo una pagina web basilare, la pubblicheremo online su un repository remoto e gestiremo due versioni del sito (italiano e inglese) attraverso i branch.
In questa lezione imparerai a utilizzare Git e GitHub direttamente da Visual Studio Code (VS Code).
Creeremo una pagina web basilare, la pubblicheremo online su un repository remoto e gestiremo due versioni del sito (italiano e inglese) attraverso i branch.
Visual Studio Code già installato.
Una casella di posta elettronica aziendale/scolastica o personale per creare l'account.
Registrazione del profilo sviluppatore.
Vai su github.com e clicca su Sign up.
Inserisci la tua email, crea una password sicura e scegli un username.
Completa la verifica e inserisci il codice di conferma inviato via email.
Prerequisito per la gestione dei file locale.
Scarica e installa Git da git-scm.com (puoi confermare le opzioni predefinite durante l'installazione).
Apri il terminale (o il terminale integrato di VS Code) ed esegui i seguenti due comandi (sostituendo con i tuoi dati reali usati su GitHub):
Strutturazione del file iniziale.
Apri VS Code e crea una nuova cartella sul tuo computer chiamata mio-primo-repo.
Apri la cartella in VS Code (File > Apri cartella...).
Crea un nuovo file chiamato index.html e inserisci il seguente codice di partenza:
Staging, commit e pubblicazione cloud.
VS Code permette di gestire il flusso di lavoro di Git in modo intuitivo:
Clicca sull'icona Controllo Codice Sorgente (Source Control) nella barra laterale di sinistra (oppure Ctrl+Shift+G / Cmd+Shift+G).
Clicca sul pulsante Inizializza Repository (Initialize Repository).
Staging dei cambiamenti: Passa il cursore sul file index.html nell'elenco Modifiche (Changes) e clicca sul pulsante + (Aggiungi a Staging / Stage Changes).
Il file si sposterà nella sezione Modifiche in staging (Staged Changes).
Scrivi il messaggio di commit nel campo di testo in alto (es. Primo commit: Hello World) e clicca su Commit.
Clicca sul pulsante Pubblica Branch (Publish Branch).
Se richiesto, autorizza VS Code ad accedere al tuo account GitHub e seleziona l'opzione Publish to GitHub public repository.
Flusso completo: Modifica → Staging → Commit su Branch diversi.
I branch (rami) permettono di sviluppare nuove funzionalità senza intaccare il ramo principale (main).
Clicca in basso a sinistra sulla barra di stato di VS Code dove vedi scritto main.
Seleziona Crea nuovo branch... (Create new branch...), digita versione-italiana e premi Invio.
Nel file index.html, modifica il testo principale:
Staging: Nella scheda Controllo Codice Sorgente, clicca sul + accanto a index.html per aggiungere la modifica allo staging.
Commit & Publish: Scrivi il messaggio Traduzione in italiano, fai clic su Commit e poi su Pubblica Branch.
Torna sul ramo principale: clicca in basso a sinistra su versione-italiana e seleziona nuovamente main dall'elenco.
Noterai che index.html torna alla versione iniziale!
Crea un nuovo branch chiamato versione-inglese.
Aggiungi un dettaglio in inglese nel file index.html:
Staging: Clicca sul pulsante + accanto al file index.html per effettuare lo staging delle modifiche.
Commit & Publish: Inserisci il messaggio Aggiornamento versione inglese, fai Commit e infine Pubblica Branch.
Per verificare la vera "magia" di Git e confermare che le due versioni coesistono nello stesso progetto senza sovrascriversi, segui questi passaggi:
Passa da un ramo all'altro in locale su VS Code:
Clicca sul nome del branch in basso a sinistra sulla barra di stato di VS Code.
Seleziona versione-italiana: osserva il file index.html nell'editor, vedrai comparire il testo "Ciao Mondo".
Clicca di nuovo e seleziona versione-inglese: vedrai il file trasformarsi istantaneamente mostrando "Hello World" e il nuovo paragrafo.
Verifica il risultato online su GitHub:
Apri la pagina del tuo repository su github.com.
In alto a sinistra sopra l'elenco dei file, fai clic sul menu a tendina con la voce main (o Branches).
Seleziona versione-italiana o versione-inglese per navigare tra i vari rami: vedrai che il codice del file index.html cambia a seconda del ramo selezionato!
