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

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

Základní konstrukce jazyka JavaScript máme za sebou. Než kurz zcela opustíme, naučíme se 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.

Co je to Git?

Git je nástrojem 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, která byla ještě funkční nebo když zjistíme, že nám nějaký nový způsob řešení čehokoli 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 určitě pomůže organizovat kód ve vlastních projektech. Největší přínos Gitu je ale při práci v týmu, kdy umožňuje jednoduše vidět, jaké konkrétní změny kdo v aplikaci provedl a kde. Když se stane, že dva lidé editovali ten samý soubor, lze změny sloučit (zamergovat) a nestane se tak, že si členové vývojového týmu přepisují kód pod rukama. Proto je základní znalost práce s Gitem očekávána na většině pracovních pozic (kde existuje nějaký vývojový tým). Přes Git rovněž studenti našich rekvalifikačních kurzů odevzdávají svůj projekt ke zkoušce.

Git lze používat do jisté míry i jako zálohu. Změny však musíme ručně a pravidelně nahrávat na vzdálený repozitář. Aplikace také obvykle obsahují i další soubory kromě zdrojových kódů, které se na Git nedávají. Proto minimálně pro začátečníky doporučujeme stále používat synchronizovaná úložiště typu Dropbox, abyste 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 přes příkazový řádek. My si práci usnadníme a budeme pracovat v grafickém rozhraní Visual Studio Code. Budeme používat následující příkazy:

• Commit - je v Gitu ekvivalentem ukládání dokumentu a slouží k vytvoření záznamu o tom, co se změnilo od posledního commitu (uložení) ,
• Push - nahraje všechny naše lokální změny (commity) na vzdálený server, odkud si je mohou ostatní programátoři stáhnout,
• Pull - stáhne ze vzdáleného serveru všechny změny od ostatních programátorů do naší verze kódu.

Příkazů je samozřejmě více, těm je pak věnovaný celý kurz. Nám to však takto stačí.

Git repozitář

Git repozitář si představme 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 všechny změny 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 nejnovější změny ze vzdáleného repozitáře do svého lokálního (např. změny provedené ostatními).

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

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:

• emailovou adresu,
• heslo a
• svou unikátní přezdívku.

Postup registrace vypadá takto:

Vytvoření 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 pomlč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 výhradně zdrojový kód. Tento soubor se používá k vyloučení ostatních souborů nebo složek z verzovacího systému. Může se například jednat o složku node_modules/, logovací .log soubory a podobně.
• 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:

Teď, když 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 na práci s Gitem ve Visual Studio Code 😊

Git ve Visual Studio Code

Prvně potřebujeme mít nainstalovaného Git klienta na našem počítači.

Instalace Git

Přejdeme na web git-smc, kde stáhneme Git klient kliknutím na tlačítko Git for Windows Setup:

Následně instalaci "vynextíme" a počkáme, než se Git klient do počítače nainstaluje. Jednotlivé kroky instalace podrobně vysvětlujeme v lekci Git - Instalace a vytvoření repositáře.

Klonování repozitáře

Jako další krok je potřeba vzdálený repozitář naklonovat do lokálního. V levém menu klikneme na Source Control a následně v nabídce zvolíme Clone Repository:

Poté se nám zobrazí nová nabídka, ve které klikneme na Clone from GitHub a přihlásíme se ke svému účtu:

Pokud v nabídce možnost Clone from GitHub nevidíte, nainstalujte si do Visual Studio Code pluginy GitHub Pull Requests and Issues a GitHub Repositories.

Nyní v nabídce vidíme seznam s našimi vzdálenými GitHub repozitáři. Z nabídky vybereme repozitář, který jsme si v předchozím kroku založili:

Poté zvolíme cestu, kam se má repozitář naklonovat a chvíli počkáme. Tímto se vzdálený repozitář naklonuje (zkopíruje) z GitHubu do počítače. Poté nás Visual Studio Code vyzve, zda chceme repozitář ihned otevřít. Tuto možnost potvrdíme.

Verzování projektu

V průzkumníkovi souborů klikneme pravým tlačítkem, v nabídce zvolíme New Folder... a nový adresář pojmenujeme src/. Poté klikneme pravým tlačítkem myši na adresář src/, zvolíme New File... a soubor pojmenujeme HelloWorld.html.

Pojďme do souboru vložit následující kód, který jistě poznáváte:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Ahoj světe v JavaScriptu</title>
    </head>

    <body>
        <script type="text/javascript">
            document.write("Ahoj světe!");
        </script>
    </body>
</html>

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

Commit

V levém menu klikneme na Source Control, dále do textového pole Message napíšeme, co jsme udělali. My jsme do repozitáře přidali aplikaci Hello World, napíšeme tedy např. Add HelloWorld application a klikneme na tlačítko Commit:

Správně napsaná commit zpráva by měla jasně a stručně popisovat, jaké změny daný commit přináší. Dále existují různé konvence, ale obecně platí, že zprávy píšeme v imperativu a ideálně v anglickém jazyce.

Commit amend

Při vytváření commitu se při kliknutí na ▼ u tlačítka Commit zobrazí možnost Commit (Amend), která nám umožní upravit poslední commit. Tato možnost je užitečná, pokud jsme udělali chybu ve svém posledním commitu, například zapomněli přidat nějaký soubor, nebo chceme změnit commit zprávu.

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 a nebo pokud chceme, aby naše změny byly viditelné pro ostatní.

V IDE push vyvoláme kliknutím na tlačítko Push, které se zobrazí po kliknutí na ... v nabídce Source Control:

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.

Pull

Opačnou operací k push je pull. Ta stáhne ze vzdáleného serveru všechny změny od ostatních do naší verze kódu. Pull provedeme kliknutím na tlačítko Pull, které se zobrazí po kliknutí na ... v nabídce Source Control.

Jelikož na vzdáleném serveru nemáme aktuálně žádné změny, operace po dokončení nezobrazí žádnou hlášku.

Nyní umíme založit vzdálený GitHub repozitář a napojit se na něj přes Visual Studio Code. Umíme vytvářet commity a do repozitáře je nahrávat pomocí příkazu push, případně je stáhnout příkazem pull. Pokud vás Git zaujal, detailně se jím zabýváme v pokročilém kurzu Git.

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