Lekce 23 - Verzovací nástroj Git a Visual Studio Code

V minulé lekci, Nejčastější chyby PHP začátečníků, děláš je také?, jsme si ukázali nejčastější chyby začátečníků v PHP, např. ohledně vyhodnocování bool výrazů a DRY.

Základní konstrukce jazyka PHP máme za sebou. Než kurz zcela opustíme, naučíme se v tomto tutoriálu pracovat s nástrojem Git, který nám pomáhá efektivně spravovat a sledovat změny v našem kódu. Často se také používá pro spolupráci ve vývojových týmech. S Gitem budeme pracovat pomocí integrace v IDE Visual Studio Code a ukážeme si i postup pomocí příkazové řádky nebo aplikace GitHub Desktop.

Co je to Git?

Git je nástroj pro správu verzí, který programátorům umožňuje sledovat historii všech změn v projektu. Můžeme se tak jednoduše vrátit k libovolné předchozí verzi našeho kódu, když zjistíme, že nám nový způsob řešení nakonec nevyhovuje. Verze lze organizovat do tzv. větví, které si můžeme libovolně pojmenovávat.

Git si můžeme rovněž představit jako magický deník, který si pamatuje každý náš krok při psaní kódu.

Proč používat Git?

Git nám pomůže organizovat kód ve vlastních projektech. Největší přínos má Git při práci v týmu, kdy umožňuje jednoduše vidět, které konkrétní změny kdo v aplikaci provedl a kde. Když se stane, že dva lidé editovali tentýž soubor, lze změny sloučit (zamergovat). Git nám tak pomáhá zabránit nechtěnému přepisování změn ostatních členů týmu. Pokud změny nelze sloučit automaticky, musíme vzniklé konflikty vyřešit ručně. Proto je základní znalost práce s Gitem očekávána na většině pracovních pozic ve firmách s vývojovým týmem. Když potenciálnímu zaměstnavateli ukážeme své projekty např. na GitHubu, budeme vypadat mnohem seriózněji, než když je budeme sdílet např. přes Google Disk.

Git lze používat do jisté míry i jako zálohu. Změny však musíme ručně a pravidelně nahrávat do vzdáleného repozitáře. Aplikace také obvykle obsahují i další soubory kromě zdrojových kódů, které se do Gitu nedávají. Proto minimálně začátečníkům doporučujeme stále používat synchronizovaná úložiště typu Dropbox, abychom o své projekty nepřišli při ztrátě nebo poškození počítače.

Základní příkazy Gitu

S Gitem se často pracuje pomocí příkazového řádku. My si ukážeme, jak s ním pracovat v grafickém rozhraní Visual Studio Code, v příkazovém řádku i v desktopové aplikaci GitHub Desktop. Budeme používat následující příkazy:

• Clone - Zkopíruje repozitář z GitHubu na náš počítač.
• Add – Přidá změny k budoucímu uložení.
• Commit – Uloží připravené změny do historie lokálního repozitáře.
• Push – Nahraje naše lokální commity na vzdálený server, odkud si je mohou ostatní programátoři stáhnout. Necommitované změny neodesílá.
• Pull – Stáhne nové commity ze vzdáleného serveru a začlení je do naší aktuální větve.

Příkazů je samozřejmě více, těm je pak věnován celý kurz. Pro naše potřeby to zatím stačí.

Git repozitář

Git repozitář si můžeme představit jako speciální složku na našem počítači, která obsahuje všechny soubory projektu, ale kromě toho také informace o historii všech změn, které jsme v těchto souborech udělali. Pokaždé, když uděláme nový commit, Git uloží informace o změnách právě do repozitáře.

Vzdálený vs. lokální repozitář

Repozitář je uložený na našem počítači (lokální repozitář), ale také na serveru na internetu (vzdálený repozitář). Pokaždé, když provedeme push, odešleme nové commity z našeho lokálního repozitáře do vzdáleného. Tam si je pak mohou prohlížet další lidé. A naopak, když provedeme pull, stáhneme nové commity ze vzdáleného repozitáře a začleníme je do své aktuální větve (např. změny provedené ostatními).

Vytvoření vzdáleného repozitáře na GitHubu

GitHub je jednou z nejznámějších platforem pro hostování Git repozitářů, a proto ji budeme využívat i my v tomto tutoriálu.

Registrace

Abychom na GitHubu mohli vytvořit vlastní repozitář, musíme se nejprve zaregistrovat. Přejdeme na oficiální stránky GitHub a provedeme registraci, kde si nastavíme:

• e-mailovou adresu,
• heslo,
• svou unikátní přezdívku.

Postup registrace vypadá takto:

Vytvoření vzdáleného repozitáře

Po úspěšné registraci se přihlásíme do svého účtu. V pravém horním rohu klikneme na tlačítko s plusem a šipkou (+ ▼) a z menu vybereme položku New repository:

Následně vidíme formulář k vytvoření repozitáře. Pojďme si podrobněji projít jednotlivé položky a jejich význam:

• Repository name – Název repozitáře je krátký, jednoduchý a popisuje, co obsahuje. Vyhýbáme se speciálním znakům a namísto mezer píšeme spojovníky (-).
• Public/Private – Viditelnost určuje, kdo může repozitář vidět a přistupovat k němu. Nejčastěji vytváříme privátní repozitáře, ke kterým máme přístup pouze my či naši kolegové. Veřejné repozitáře vytváříme zejména pro tzv. open source projekty, které povzbuzují veřejnou spolupráci.
• README file – Tento dokument je první věc, kterou uživatel vidí, když navštíví náš repozitář. Obsahuje základní popis projektu, instrukce pro instalaci, použití, přispívání do projektu a tak dále.
• .gitignore – Již víme, že Git repozitář by měl obsahovat primárně zdrojový kód a související konfigurační soubory. Tento soubor se používá k vyloučení ostatních souborů nebo složek z verzovacího systému.
• License – Licence v repozitáři určuje, jak mohou ostatní používat, kopírovat, modifikovat či distribuovat náš projekt.

Nový repozitář pojmenujeme např. git-tutorial, viditelnost nastavíme na Private a dále přidáme README:

Jakmile máme formulář vyplněný, klikneme na tlačítko Create repository a počkáme, než se vzdálený repozitář vytvoří:

Tímto máme vzdálený GitHub repozitář vytvořený a můžeme přejít k práci s Gitem ve Visual Studio Code 😊

Instalace Gitu

Nejprve potřebujeme mít na našem počítači nainstalovaného Git klienta. Přejdeme na stránku https://git-scm.com/, kde klikneme na tlačítko Install for Windows:

Následně klikneme na Click here to download:

Po spuštění instalátoru stačí klikat na tlačítko Next až do poslední obrazovky, kde klikneme na Install. Tím máme Git klienta nainstalovaného na svém počítači.

Pokud jsme měli Visual Studio Code spuštěný během instalace Gitu, restartujeme jej. Otevřeme terminál kliknutím na záložku Terminal v horním menu a výběrem možnosti New Terminal. Dostupnost Gitu ověříme příkazem:

Windows PowerShell
git --version

Příkaz vypíše verzi nainstalovaného Gitu.

Pokud Git používáme poprvé, bude nutné nastavit uživatelské jméno a e-mail, aby nás Git mohl identifikovat jako autora změn. Toto nastavení se provádí jednorázově a platí pro všechny Git projekty na daném počítači. Do terminálu postupně zadáme následující příkazy, přičemž mezi uvozovky dosadíme své jméno a e-mail:

Windows PowerShell
git config --global user.name "Josef Plachý"
git config --global user.email "[email protected]"
git config --global --list

Poslední příkaz slouží pro kontrolu aktuálního nastavení. Pokud zjistíme chybu, můžeme celý proces nastavení zopakovat.

Ukážeme si postupné kroky práce s Gitem při vytváření nových verzí (tzv. commitů) a následném nahrávání na GitHub.

Git Clone

Vytvořit lokální repozitář jde více způsoby. Pokud již vzdálený repozitář existuje, jako v našem případě, stačí využít klonování. Příkaz git clone tedy zkopíruje vzdálený repozitář do lokálního v našem počítači.

S Gitem lze pracovat přímo v IDE, přes příkazovou řádku nebo pomocí desktopové aplikace. Doporučujeme pro začátek používat integraci přímo v IDE. Pokud by postup nefungoval, např. z důvodu změny rozhraní IDE, můžeme postupovat podle alternativního návodu, na který se přepneme pomocí tlačítek níže.

Git Add

V horním menu VS Code zvolíme File > New File... a nový soubor pojmenujeme index.php. Do souboru vložte kód, který jistě poznáváte:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
        echo('Hello world');
        ?>
    </body>
</html>

Změny uložíme pomocí Ctrl + S. Výsledek by mohl vypadat následovně. Můžeme si všimnout, že ve stromové struktuře má soubor index.php u sebe písmeno U jako Untracked. To znamená, že Git tento soubor zatím nesleduje (není ve verzování):

Nyní je na čase vytvořit náš první commit.

Git Commit

Git Push

Změnu máme vytvořenou. Nyní ji nahrajeme do vzdáleného repozitáře na GitHubu. K tomu slouží operace push. Push typicky provádíme po dokončení logické jednotky práce, před odchodem z domova či práce nebo pokud chceme, aby naše změny byly viditelné pro ostatní.

Projekt je nahraný v našem repozitáři na GitHubu. Můžeme se v prohlížeči podívat na stránku našeho repozitáře a ověřit, že obsahuje soubor index.php s novým kódem:

Pozor! Projekty vytvořené podle kurzů z ITnetwork pod licencí PRO nenahrávejte do veřejných repozitářů! Jsou chráněny autorskými právy a jejich šíření je nelegální. Mohl by si je pak zobrazit a stáhnout kdokoli na internetu, čímž by po Vás mohla být vyžadována náhrada škody.

Git Pull

Opačnou operací k push je pull. Ta stáhne nové commity ze vzdáleného serveru a začlení je do naší aktuální větve.

Nyní umíme založit vzdálený repozitář na GitHubu a napojit se na něj přes Visual Studio Code. Alternativně umíme pracovat s Gitem v příkazové řádce i v aplikaci GitHub Desktop. Naučili jsme se vytvářet commity a do repozitáře je nahrávat pomocí příkazu push, případně je stáhnout a začlenit příkazem pull. Pokud vás Git zaujal, detailně se jím zabýváme v pokročilém kurzu Git.

Shrnutí lekce

Git slouží ke sledování změn v projektu a umožňuje vrátit se ke starším verzím kódu. Projekt může být uložený lokálně v počítači i vzdáleně, například na GitHubu. Repozitář z GitHubu si stáhneme příkazem clone, upravené soubory připravíme pomocí add a změny uložíme do historie příkazem commit. Příkaz push nahraje commity do vzdáleného repozitáře, zatímco pull stáhne nové commity a začlení je do aktuální větve. Git díky tomu usnadňuje týmovou práci, protože uchovává historii změn, ukazuje, kdo co upravil, a pomáhá sloučit práci více lidí.

V následujícím kvízu, Kvíz - Základní konstrukce PHP, si vyzkoušíme nabyté zkušenosti z kurzu.