Lekce 22 - Verzovací nástroj Git a NetBeans
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 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 NetBeans 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). Díky tomu se nestane, že by si členové vývojového týmu přepisovali kód pod rukama. 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, 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 pomocí příkazového řádku. My si ukážeme, jak s ním pracovat v grafickém rozhraní NetBeans, 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ží změny tak, že vytvoří záznam o tom, co se od posledního commitu (uložení) změnilo.
- 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ě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 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 repozitáře (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. Jedná se například o dočasnou složku
nbproject/, kterou vytváří NetBeans. - 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 v NetBeans 😊
Git v NetBeans
Nejprve potřebujeme mít nainstalovaného Git klienta na našem počítači.
Instalace Gitu
Pro instalaci plnohodnotné verze 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.
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ůžete postupovat podle alternativního návodu, na který se přepnete pomocí tlačítek níže.
-
Začneme popisem toho, jak vzdálený repozitář naklonovat do lokálního. V menu klikneme na Team a následně v nabídce zvolíme Git a Clone:

Nyní vidíme formulář, do kterého zadáme adresu našeho vzdáleného Git repozitáře a přihlašovací údaje:

Přístupové údaje ke Gitu
Pro získání Repository URL si otevřeme v prohlížeči stránku se vzdáleným repozitářem a klikneme na zelené tlačítko Code. Z nabídky zkopírujeme URL adresu repozitáře:

Uživatelské jméno taktéž známe. Avšak heslo, které jsme zadávali při registraci, fungovat nebude. Pro automatizovaný přístup k našemu účtu potřebujeme vygenerovat přístupový klíč (token). Přejdeme do nastavení GitHub účtu. Alternativně do nastavení přejdeme kliknutím na Profil > Settings > Developer Settings > Personal access tokens > Tokens (classic).
Následně zvolíme možnost Generate new token a Generate new token (classic):

V dalším kroku si token pojmenujeme, nastavíme mu platnost na 1 rok a zaškrtneme povolení operací typu repo:

Token vždy generujeme s omezenou platností.
Pro vygenerování tokenu klikneme na zelené tlačítko Generate token:

Hodnotu tokenu si zkopírujeme a uložíme.
Po zavření stránky s tokenem jej již nebude možné znovu zobrazit.
Nyní se vrátíme zpět do NetBeans, kde do formuláře vložíme URL adresu repozitáře, naše uživatelské jméno na GitHub, místo hesla použijeme token a do pole Clone into napíšeme cestu k adresáři
xampp/htdocs/:
Následně klikáme na tlačítko Next, dokud se nezobrazí dialog Destination Directory. Zde pouze zkontrolujeme umístění a klikneme na Finish:

Po naklonování repozitáře se zobrazí okno, ve kterém klikneme na Create project…, čímž z repozitáře vytvoříme NetBeans projekt:

Průvodce pro založení nového projektu již známe. Při vytváření projektu si pouze pohlídáme, zda se projekt vytvoří ve stejné složce, do které jsme naklonovali náš repozitář:

- V praxi se velmi často k práci s Git používá terminál
(příkazový řádek). Jeho výhodou je stejný způsob použití bez ohledu na
operační systém (Windows, macOS, Linux) a IDE. Ukažme si tedy, jak s ním
pracovat.
Ve Windows si nejdříve otevřeme terminál Git Bash. V Průzkumníkovi si najdeme adresář
C:\xampp\htdocs, do kterého budeme chtít naklonovat náš git-tutorial projekt. Na adresář klikneme pravým tlačítkem myši a v menu zvolíme Zobrazit další možnosti a Open Git Bash here:
Do terminálu napíšeme příkaz:
git clone adresa_naseho_github_projektu
Adresu našeho projektu můžeme získat z URL v našem prohlížeči na stránce GitHub. Příkaz by měl vypadat např. následovně:
git clone https://github.com/D3NY/git-tutorialkdeD3NYnahradíme naší přezdívkou (username), kterou jsme si zvolili při registraci na GitHub.Po potvrzení Enter se nám otevře okno Connect to GitHub s výzvou k přihlášení se ke GitHub. Zvolíme možnost Sign in with your browser:

V terminálu se nám zatím vypíše informace o tom, že autentifikaci máme dokončit ve svém prohlížeči:
Cloning into 'git-tutorial'... info: please complete authentication in your browser...
Přejdeme do okna v prohlížeči a vyplníme naše přihlašovací údaje a heslo. Následně potvrdíme kliknutím na tlačítko Sign in:

Zbývá nám ještě potvrdit, že opravdu chceme autorizovat přístup Git Credential Manager k našemu GitHub účtu:

Po potvrzení úspěšné autentifikace můžeme okno prohlížeče zavřít:

V terminálu máme mezitím výpis, ze kterého nás nejvíce zajímá poslední řádek
Receiving objects: 100%, potvrzující úspěch operace:remote: Enumerating objects: 4, done. remote: Counting objects: 100% (4/4), done. remote: Compressing objects: 100% (3/3), done. remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0) Receiving objects: 100% (4/4), done.
- Spustíme program GitHub Desktop. Na stránce
Welcome to GitHub Desktop zvolíme možnost Sign in
GitHub.com:

Na další stránce vyplníme naše přihlašovací údaje a heslo k GitHub účtu. Následně potvrdíme kliknutím na tlačítko Sign in:

Vzápětí ještě potvrdíme otevření GitHubDesktop aplikace:

Zbývá nám ještě potvrzení nastavení identifikace příštích commitů jednoduše kliknutím na tlačítko Finish:

V menu vybereme File -> Clone repository...:

Vyhledáme náš vzdálený repozitář
git-tutoriala potvrdíme kliknutím na Clone:
Verzování projektu
V projektu klikneme pravým tlačítkem myši na adresář
Source Files/, dále v nabídce zvolíme New > PHP
Webpage a nový soubor pojmenujeme index.php. Pojďme obsah
souboru nahradit naším kódem, který jistě poznáváte:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php
echo('Hello world');
?>
</body>
</html>
Nyní je načase vytvořit náš první commit.
Git Add a Git Commit
-
Můžeme si všimnout, že ve stromové struktuře svítí soubor
index.phpzeleně. To znamená, že je nový a připravený k verzování:
V menu klikneme na Team > Commit, čímž zobrazíme commit dialog.
V nabídce Files to commit vybereme soubory, kterých se commit týká. V našem případě pouze soubor
index.php. Dále do textového pole Commit 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 nám rovněž zobrazí checkbox Amend last commit, 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 pokud jsme zapomněli přidat nějaký soubor nebo chceme změnit commit zprávu.
-
V Git Bash terminálu přejdeme do naší složky s projektem pomocí příkazu
cd(change directory):cd git-tutorial
Příkazem
git statussi můžeme ověřit, které soubory a adresáře (obarvené červenou barvou) můžeme přidávat (git add) do další verze:
Vidíme zde soubory
.gitignore,index.phpa složkunbproject/. Vzhledem k tomu, že složkunbproject/, obsahující konfigurační soubory NetBeans, zálohovat (commitovat) nepotřebujeme, přidáme ji do ignore souboru následujícím příkazem:echo nbproject/ >> .gitignore
Následně můžeme pomocí příkazu
git addpřidat soubor.gitignoreaindex.phpdo takzvané staging fáze, tedy připravené na vytvoření nové verze (commit):git add .gitignore index.php
Příkazem
git statussi můžeme ověřit, které soubory (obarvené zelenou barvou) budou nahrány do příští verze (commit):
Poté můžeme konečně přistoupit k vytvoření nové verze (commitu). Samotný
git commitmusí mít uvedenou zprávu (Commit message). 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.Do terminálu napíšeme:
git commit -m "Add HelloWorld application"
Výstup úspěšného příkazu vypadá následovně:

-
V aplikaci se nám v levé části zobrazí soubory, které jsou buď nové, nebo v nich došlo k nějaké změně. Modrou fajfkou necháme označené jenom
.gitignoreaindex.php. Tím říkáme, že jenom tyto dva soubory chceme zahrnout do dalšího commitu:
Když přidáme adresář
nbproject/do gitignore, přestane se příště objevovat v seznamu změněných souborů/adresářů. V GitHub Desktop vybereme v menu Repository -> Settings a v okně "Repository settings" zvolíme v menu Ignored files. Přesuneme se na konec souboru.gitignorea ručně připíšeme řádek nbproject/. Potvrdíme tlačítkem Save:
Teď už jsme připraveni na commit. Každá verze (commit) musí mít uvedenou zprávu popisující změny v té dané verzi, tzv. Commit message. 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.
V poli Summary tedy napíšeme zprávu Add HelloWorld application a potvrdíme kliknutím na tlačítko Commit 2 files to main:

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í.
-
V IDE push vyvoláme kliknutím na Team > Remote > Push to Upstream:

-
V terminálu nám stačí napsat příkaz
git push:git push
Měli bychom vidět obdobný výstup, který znamená, že všechno proběhlo v pořádku:

-
V GitHub Desktop nám stačí kliknout na tlačítko Push origin:

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 Team
> Remote > Pull from Upstream.
Jelikož na vzdáleném serveru nemáme aktuálně žádné změny, operace po dokončení zobrazí hlášku Žádné změny ke stažení.
- Příkazem
git pullstáhneme nové commity ze vzdáleného repozitáře:git pull
Jelikož na vzdáleném serveru nemáme aktuálně žádné změny, operace po dokončení zobrazí hlášku:
Already up to date.
- V aplikaci GitHub Desktop přejdeme do menu
Repository a zvolíme Pull:
Jelikož na vzdáleném serveru nemáme aktuálně žádné změny, žádné změny se v aplikaci neprovedou.

Nyní umíme založit vzdálený repozitář na GitHubu a napojit se na něj přes NetBeans. 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 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 PHP, si vyzkoušíme nabyté zkušenosti z kurzu.

