31. diel - Verziovací nástroj Git a Visual Studio Code

V minulej lekcii, Najčastejšie chyby JS začiatočníkov, robíš ich tiež? , sme si ukázali najčastejšie chyby začiatočníkov v JavaScripte, napr. ohľadom pomenovania kolekcií, Boolean výrazov a DRY.

Základnú konštrukciu jazyka JavaScript máme za sebou. Kým kurz úplne opustíme, naučíme sa pracovať s nástrojom Git, ktorý nám pomáha efektívne spravovať a sledovať zmeny v našom kóde. Často sa tiež používa na spoluprácu vo vývojových tímoch.

Čo je to Git?

Git je nástrojom pre správu verzií, ktorý programátorom umožňuje sledovať históriu všetkých zmien v projekte. Môžeme sa tak jednoducho vrátiť k ľubovoľnej predchádzajúcej verzii nášho kódu, ktorá bola ešte funkčná alebo keď zistíme, že nám nejaký nový spôsob riešenia čohokoľvek nakoniec nevyhovuje. Verzie je možné organizovať do tzv. vetiev, ktoré si môžeme ľubovoľne pomenovávať.

Git si môžeme predstaviť aj ako magický denník, ktorý si pamätá každý náš krok pri písaní kódu.

Prečo používať Git?

Git nám určite pomôže organizovať kód vo vlastných projektoch. Najväčší prínos Gitu je ale pri práci v tíme, kedy umožňuje jednoducho vidieť, aké konkrétne zmeny kto v aplikácii vykonal a kde. Keď sa stane, že dvaja ľudia editovali ten istý súbor, možno zmeny zlúčiť (zamergovať) a nestane sa tak, že si členovia vývojového tímu prepisujú kód pod rukami. Preto je základná znalosť práce s Gitom očakávaná na väčšine pracovných pozícií (kde existuje nejaký vývojový tím). Cez Git taktiež študenti našich rekvalifikačných kurzov odovzdávajú svoj projekt na skúšku.

Git je možné používať do istej miery aj ako zálohu. Zmeny však musíme ručne a pravidelne nahrávať na vzdialený repozitár. Aplikácie tiež obvykle obsahujú aj ďalšie súbory okrem zdrojových kódov, ktoré sa na Git nedávajú. Preto minimálne pre začiatočníkov odporúčame stále používať synchronizované úložiská typu Dropbox, aby ste o svoje projekty neprišli pri strate alebo poškodení počítača.

Základné príkazy Gitu

S Gitom sa často pracuje cez príkazový riadok. My si prácu uľahčíme a budeme pracovať v grafickom rozhraní Visual Studio Code. Budeme používať nasledujúce príkazy:

• Commit - je v Gite ekvivalentom ukladania dokumentu a slúži na vytvorenie záznamu o tom, čo sa zmenilo od posledného commitu (uloženia) ,
• Push - nahrá všetky naše lokálne zmeny (commity) na vzdialený server, odkiaľ si ich môžu ostatní programátori stiahnuť,
• Pull - stiahne zo vzdialeného servera všetky zmeny od ostatných programátorov do našej verzie kódu.

Príkazov je samozrejme viac, tým je potom venovaný celý kurz. Nám to však takto stačí.

Git repozitár

Git repozitár si predstavme ako špeciálny priečinok na našom počítači, ktorý obsahuje všetky súbory projektu, ale okrem toho aj informácie o histórii všetkých zmien, ktoré sme v týchto súboroch urobili. Zakaždým, keď urobíme nový commit, Git uloží informácie o zmenách práve do repozitára.

Vzdialený vs. lokálny repozitár

Repozitár je uložený na našom počítači (lokálny repozitár), ale aj na serveri na internete (vzdialený repozitár). Zakaždým, keď vykonáme push, odošleme všetky zmeny z nášho lokálneho repozitára do vzdialeného. Tam si ich potom môžu prezerať ďalší ľudia. A naopak, keď vykonáme pull, stiahneme najnovšie zmeny zo vzdialeného repozitára do svojho lokálneho (napr. zmeny vykonané ostatnými).

Vytvorenie vzdialeného GitHub repozitára

GitHub je jednou z najznámejších platforiem pre hosťovanie Git repozitárov, a preto ju budeme využívať aj my v tomto tutoriáli.

Registrácia

Aby sme na GitHube mohli vytvoriť vlastný repozitár, musíme sa najskôr zaregistrovať. Prejdeme na oficiálne stránky GitHub a vykonáme registráciu, kde si nastavíme:

• emailovú adresu,
• heslo a
• svoju unikátnu prezývku.

Postup registrácie vyzerá takto:

Vytvorenie repozitára

Po úspešnej registrácii sa prihlásime do svojho účtu. V pravom hornom rohu klikneme na tlačidlo s plusom a šípkou (+▼) az menu vyberieme položku New repository:

Následne vidíme formulár na vytvorenie repozitára. Poďme si podrobnejšie prejsť jednotlivé položky a ich význam:

• Repository name - Názov repozitára je krátky, jednoduchý a opisuje, čo obsahuje. Vyhýbame sa špeciálnym znakom a namiesto medzier píšeme pomlčky (-).
• Public / Private - Viditeľnosť určuje, kto môže repozitár vidieť a pristupovať k nemu. Najčastejšie vytvárame privátnych repozitárov, ku ktorým máme prístup iba my či naši kolegovia. Verejných repozitárov vytvárame najmä pre tzv. open source projekty, ktoré povzbudzujú verejnú spoluprácu.
• README file - Tento dokument je prvá vec, ktorú používateľ vidí, keď navštívi náš repozitár. Obsahuje základný popis projektu, inštrukcie pre inštaláciu, použitie, prispievanie do projektu a tak ďalej.
• .gitignore - Už vieme, že Git repozitár by mal obsahovať výhradne zdrojový kód. Tento súbor sa používa na vylúčenie ostatných súborov alebo zložiek z verziovacieho systému. Môže ísť napríklad o priečinok node_modules/, logovací .log súbory a podobne.
• License - Licencia v repozitári určuje, ako môžu ostatní používať, kopírovať, modifikovať či distribuovať náš projekt.

Nový repozitár pomenujeme napr. git-tutorial, viditeľnosť nastavíme na Private a ďalej pridáme README:

Teraz, keď máme formulár vyplnený, klikneme na tlačidlo Create repository a počkáme, kým sa vzdialený repozitár vytvorí:

Týmto máme vzdialený GitHub repozitár vytvorený a môžeme prejsť na prácu s Gitom vo Visual Studio Code 😊

Git vo Visual Studio Code

Najprv potrebujeme mať nainštalovaného Git klienta na našom počítači.

Inštalácia Git

Prejdeme na web git-smc, kde stiahneme Git klient kliknutím na tlačidlo Git for Windows Setup:

Následne inštaláciu "vynextíme" a počkáme, kým sa Git klient do počítača nainštaluje. Jednotlivé kroky inštalácie podrobne vysvetľujeme v lekcii Git - Inštalácia a vytvorenie repositára.

Klonovanie repozitára

Ako ďalší krok je potrebné vzdialený repozitár naklonovať do lokálneho. V ľavom menu klikneme na Source Control a následne v ponuke zvolíme Clone Repository:

Potom sa nám zobrazí nová ponuka, v ktorej klikneme na Clone from GitHub a prihlásime sa k svojmu účtu:

Pokiaľ v ponuke možnosť Clone from GitHub nevidíte, nainštalujte si do Visual Studio Code pluginy GitHub Pull Requests and Issues a GitHub Repositories.

Teraz v ponuke vidíme zoznam s našimi vzdialenými GitHub repozitármi. Z ponuky vyberieme repozitár, ktorý sme si v predchádzajúcom kroku založili:

Potom zvolíme cestu, kam sa má repozitár naklonovať a chvíľu počkáme. Týmto sa vzdialený repozitár naklonuje (skopíruje) z GitHubu do počítača. Potom nás Visual Studio Code vyzve, či chceme repozitár ihneď otvoriť. Túto možnosť potvrdíme.

Verzovanie projektu

V prieskumníkovi súborov klikneme pravým tlačidlom, v ponuke zvolíme New Folder... a nový adresár pomenujeme src/. Potom klikneme pravým tlačidlom myši na adresár src/, zvolíme New File... a súbor pomenujeme HelloWorld.html.

Poďme do súboru vložiť nasledujúci kód, ktorý určite spoznávate:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World in JavaScript</title>
    </head>

    <body>
        <script type="text/javascript">
            document.write("Hello World!");
        </script>
    </body>
</html>

Teraz je na čase vytvoriť náš prvý commit.

Commit

V ľavom menu klikneme na Source Control, ďalej do textového poľa Message napíšeme, čo sme urobili. My sme do repozitára pridali aplikáciu Hello World, napíšeme teda napr. Add HelloWorld application a klikneme na tlačidlo Commit:

Správne napísaná commit správa by mala jasne a stručne popisovať, aké zmeny daný commit prináša. Ďalej existujú rôzne konvencie, ale všeobecne platí, že správy píšeme v imperatíve a ideálne v anglickom jazyku.

Commit amend

Pri vytváraní commitu sa pri kliknutí na ▼ pri tlačidle Commit zobrazí možnosť Commit (Amend), ktorá nám umožní upraviť posledný commit. Táto možnosť je užitočná, ak sme urobili chybu vo svojom poslednom commite, napríklad zabudli pridať nejaký súbor, alebo chceme zmeniť commit správu.

Push

Zmenu máme vytvorenú. Teraz ju nahráme do vzdialeného repozitára na GitHube. Na to slúži operácia push. Push typicky vykonávame po dokončení logickej jednotky práce, pred odchodom z domu či práce alebo ak chceme, aby naše zmeny boli viditeľné pre ostatných.

V IDE push vyvoláme kliknutím na tlačidlo Push, ktoré sa zobrazí po kliknutí na ... v ponuke Source Control:

Pozor! Projekty vytvorené podľa kurzov z ITnetwork pod licenciou PRO nenahrávajte do verejných repozitárov! Sú chránené autorskými právami a ich šírenie je nelegálne. Mohol by si ich potom zobraziť a stiahnuť ktokoľvek na internete, čím by po Vás mohla byť vyžadovaná náhrada škody.

Pull

Opačnou operáciou na push je pull. Tá stiahne zo vzdialeného servera všetky zmeny od ostatných do našej verzie kódu. Pull vykonáme kliknutím na tlačidlo Pull, ktoré sa zobrazí po kliknutí na ... v ponuke Source Control.

Keďže na vzdialenom serveri nemáme aktuálne žiadne zmeny, operácia po dokončení nezobrazí žiadnu hlášku.

Teraz vieme založiť vzdialený GitHub repozitár a napojiť sa naň cez Visual Studio Code. Vieme vytvárať commity a do repozitára ich nahrávať pomocou príkazu push, prípadne ich stiahnuť príkazom pull. Pokiaľ vás Git zaujal, detailne sa ním zaoberáme v pokročilom kurze Git.

V nasledujúcom kvíze, Kvíz - Základná konštrukcia JavaScript, si vyskúšame nadobudnuté skúsenosti z kurzu.