Tvorba webu IV.

Mgr. Michal Jakl

Prostor pro vyhodnocení úkolu z minula ☺

Obsah lekce

1. Verzovací systémy a spolupráce při vývoji
2. GIT

​

​

​

​

​

Praktické cvičení: Propojení projektu a GIThubu

1. Jak to (ne)dělat...

​

• Strach upravit funkční kód ("Co když to rozbiju?")
• Spolupráce posíláním ZIP souborů přes Messenger/e-mail
• Slavná věta: "Ale u mě na počítači to fungovalo!"

​

-> V profi světě se takhle pracovat nedá – když dělá na webu více lidí, ZIPy přes e-mail jsou cesta do pekel.

2. Záchrana = Verzovací systém (VCS)

​

Stroj času pro váš projekt

​

• Sleduje historii: Kdo, kdy a jakou změnu udělal (a proč).
• Bezpečná síť: Kdykoliv se můžete vrátit k funkční verzi z minulosti.
• Paralelní vesmíry: Můžete zkoušet nové šílené nápady (např. úplně předělat CSS), aniž byste rozbili zbytek webu.
• Týmová práce: Více lidí může plynule pracovat na stejném projektu najednou.

​

Verzování není jen záloha. Je to detailní logovací deník celého projektu.

3. Git není GitHub!

​

GIT

• Nástroj (software na vašem počítači).
• Funguje i bez internetu (lokálně).
• Řídí to všechno pod kapotou.

GitHub

• Platforma / Sociální síť pro kód.
• Je na internetu (v cloudu).
• Slouží pro sdílení s týmem, zálohování a vystavení portfolia (váš vývojářský životopis).

Git je jako motor v autě. GitHub je garáž, kde to auto parkujete a ukazujete ho kamarádům. Existují i jiné garáže (GitLab, Bitbucket), ale motor (Git) zůstává stejný.

4. Kde se vzal, tu se vzal... Git

​

Git nevznikl v laboratoři jako teoretický koncept. Vznikl z čiré frustrace tisíců programátorů, kteří potřebovali pracovat na největším open-source projektu na světě a nechtěli si navzájem přemazávat kód.

• Vytvořil ho Linus Torvalds v roce 2005 (ten samý člověk, co stvořil Linux).
• Důvod? Vývojáři Linuxu se už z dosavadních nástrojů chtěli zbláznit.
• Decentralizovaný: Každý z vás má na svém počítači kompletní historii celého projektu. I když spadne server, máte všechno.

5. Jak Git vidí vaše soubory

​

Představte si to jako stop-motion animaci. Neukládáte jen informaci 'tady jsem posunul ruku o centimetr doprava', ale vyfotíte celou scénu znovu. Git je tak chytrý, že ho to nestojí moc místa na disku, ale vám to dává absolutní jistotu, že se můžete vrátit k jakémukoliv políčku filmu.

• Ostatní systémy si pamatují jen "co se změnilo" (rozdíly/deltas).
• Git fotí snímky (snapshots).
• Kdykoliv uděláte "uložení" (commit), Git vyfotí stav celého webu.
• Pokud se soubor nezměnil, Git ho neukládá znovu, jen ukáže prstem na předchozí fotku (proto je tak bleskově rychlý).

6. Svatá trojice Gitu

​

• Tři stavy vašeho kódu:

1. Working Directory (Pracovní adresář)

• Vaše složka v počítači. Tady tvoříte, píšete kód, děláte chaos.

​

2. Staging Area (Přípravovna)

• Místo, kam si odložíte soubory, které chcete v dalším kroku "vyfotit" a uložit.

​

3. Repository (Historie/Sklad)

• Databáze Gitu. Zde jsou soubory bezpečně uloženy navždy.

7. Jak to funguje v praxi? - Metafora rodinné fotky 📸

​

• Working Directory = Chystání scény
• Všichni pobíhají po obýváku, někdo se češe, pes štěká. (Je to rozdělaná práce, ukládáte si soubory v editoru, ale ještě to nedává smysl jako celek).
• Staging Area = Pohled přes hledáček
• Řeknete: "Babičko, pojď sem. Karle, ty běž pryč, máš špinavé tričko." (Do stagingu vybíráte jen ty soubory, které patří k jedné konkrétní hotové funkci. Karel a jeho rozbitý kód na fotce nebudou).
• Repository = CVAK! 📸
• Zmáčknete spoušť. Fotka se vyvolá a založí do pevného, nezničitelného alba. (To je váš Commit).

​

Do Staging Area (do hledáčku) si připravíte jen to, co spolu logicky souvisí. Upravili jste navigaci a do toho rozbili patičku? Vyfotíte jen tu navigaci. Patičku necháte běhat po obýváku, dokud ji neopravíte.

8. Jak začít? (Dvě cesty do světa Gitu)

​

Cesta 1: Začínám na zelené louce (git init)

• Mám u sebe prázdnou složku (nebo už rozdělaný projekt) a chci do ní "nainstalovat" Git.
• Vytvoří skrytou složku .git (to je ten samotný motor stroje času).

​

Cesta 2: Připojuji se k existujícímu (git clone)

• Někdo už projekt založil (třeba na GitHubu) a já chci jeho kopii k sobě do počítače.
• Stáhne složku i s kompletní historií.

9. Obslužné příkazy

​

• 🧭 git status = Radar
• Kde jsem? Co je upravené? Co je připravené na focení?

​

• ➕ git add <soubor> = Hledáček
• Přidávám do Staging Area. Např. git add index.html. Pokud chci přidat vše, použiju git add . – ale opatrně s tím!

​

• 📸 git commit -m "Zpráva" = Cvak!
• Uložení stavu. Vytvoření permanentního záznamu v historii.

10. Umění psát Commit Messages - Neštvěte své budoucí já (ani kolegy)

​

Pravidla pro dobrou zprávu ✅:

​

• Stručná, ale výstižná (co a proč se změnilo).
• Ideálně v rozkazovacím způsobu (např. "Přidej navigační menu", nikoliv "Přidáno navigační menu").
• Anglicky nebo česky? (V týmu se domluvte, ale dodržujte to! Pro světový open-source vždy anglicky).
• Commit message není komentář k fotce na Instagramu. Je to technická dokumentace.
• Když vám ve 3 ráno spadne web, a vy v historii uvidíte 10 commitů s názvem 'oprava', nebudete vědět, ke kterému se vrátit.
• Buďte specifičtí: 'Oprav barvu tlačítka Odeslat v patičce'."

11. 💻 LIVE UKÁZKA: Git v akci

​

1. Vytvoř prázdnou složku moje-super-stranka.
2. Otevři v terminálu, napiš git status (ukáže chybu, že to není git repozitář – ukázka, že status opravdu radí).
3. Napiš git init. Znovu git status (už to funguje, jsme na větvi main/master).
4. Vytvoř index.html a dej tam základní kostru s <h1>Ahoj UJEP</h1>.
5. Ukaž git status (svítí červeně – Untracked files).
6. Použij git add index.html.
7. Ukaž git status (svítí zeleně – Changes to be committed).
8. Udělej git commit -m "Založ základní strukturu index.html".

12. Větve (Branches) – Váš osobní píseček

​

12. Větve (Branches) – Váš osobní píseček

​

• Větev main (dříve master) je posvátná. Tady leží kód, který je 100% funkční a připravený k odevzdání/nasazení.
• Chcete zkusit nový šílený design hlavičky? Vytvořte si novou větev.
• Větve jsou paralelní vesmíry: Co se stane ve větvi, zůstane ve větvi (dokud se nerozhodnete jinak).
• Můžete libovolně přepínat mezi rozdělanou prací a stabilní verzí.

​

​

Představte si, že máte hotový základ semestrálky. Funguje to. Ale vy chcete zkusit přidat dark mode. Kdybyste to dělali rovnou v hlavní verzi a v půlce zjistili, že to nejde, máte rozbitý web den před odevzdáním. Git Branch vám vytvoří izolovanou kopii, kde můžete bezpečně experimentovat.

14. Návrat domů (Slučování / Merging)

​

• Dark mode je hotový a funguje! Jak ho dostat zpět do hlavní verze webu?
• Krok 1: Přepnu se tam, KAM chci změny dostat (typicky git switch main).
• Krok 2: Spustím sloučení: git merge <nazev_vetve> (např. git merge dark-mode).
• Git vezme historii vaší větve a plynule ji "zipem" připne k hlavní větvi.

15. Strašák jménem MERGE CONFLICT 👾

​

Merge konflikt není chybová hláška, že jste něco rozbili. Je to bezpečnostní pojistka Gitu. Ukážeme si, jak snadné je to vyřešit.

​

• Co to je?
• Vy i váš kolega (nebo vy ve dvou různých větvích) jste upravili úplně stejný řádek ve stejném souboru.
• Git je chytrý, ale neví, kdo má pravdu.
• Zastaví se a řekne: "Tohle musíte rozhodnout vy!"
• Editor vám přesně ukáže obě varianty: Current Change vs. Incoming Change.
• Vyberete jednu (nebo je spojíte), uložíte, uděláte commit. Hotovo.

16. 💻 LIVE UKÁZKA 2: Rozbijeme to!

​

• Jsi na větvi main. V Notepad++ v souboru index.html změň nadpis na <h1>Vítejte na UJEPu!</h1>, ulož. V terminálu: git add . a git commit -m "Změna v main".
• Vytvoř větev: git switch -c novy-nadpis.
• Změň ten samý řádek na <h1>Fakulta přírodovědecká UJEP</h1>, ulož. git add . a git commit -m "Změna ve větvi".
• Vrať se: git switch main. (Notepad++ by tě měl upozornit, že se soubor změnil, dej "Ano/Přenačíst").
• Udělej: git merge novy-nadpis. Terminál zakřičí CONFLICT.
• Otevři ten soubor v Notepad++
• Zvýrazni a smaž řádek s <<<<<<<, řádek s ======= a řádek s >>>>>>>. Smaž i jeden z nadpisů (nebo je spoj do jednoho).
• Ulož soubor v Notepad++.
• V terminálu napiš git add index.html (tím Gitu řekneš: "vyřešeno!") a nakonec git commit -m "Vyřešen konflikt".

17. Seznamte počítač s cloudem (Remote)

​

• Git u vás na počítači zatím o GitHubu vůbec neví. Musíme mu říct, kam má data posílat.
• Tomuto spojení se říká Remote (vzdálený repozitář).
• Tradičně se ten hlavní vzdálený repozitář na GitHubu pojmenovává slovem origin (jako "původ" nebo "zdroj").
• Přidání adresy: git remote add origin <odkaz_na_github>

18. Tam a zase zpátky (Push & Pull)

​

• ⬇️ git pull (Tahat): Stáhne novinky od kolegů z GitHubu a rovnou je sloučí (merge) s vaším kódem.
• Pravidlo: Vždycky dělejte pull předtím, než začnete ráno pracovat!

​

• ⬆️ git push (Tlačit): Posílá vaše lokální commity nahoru na GitHub.
• Tip: Poprvé musíte říct kam přesně: git push -u origin main. Pak už stačí jen git push.

​

Tohle je vaše ranní a večerní rutina. Ráno přijdete k počítači, uvaříte kafe, napíšete git pull, abyste měli nejnovější kód od kolegů. Odpoledne dopíšete svou část, uděláte commit a pošlete to kolegům přes git push.

19. Pull Request (PR) – Svatý grál firemní práce

​

• V profi týmu nemůžete jen tak poslat (pushnout) svůj kód přímo do hlavní větve main a rozbít produkční web. Jak to funguje:
• Vytvoříte si větev (např. novy-design).
• Uděláte commity a pushnete tuto větev na GitHub.
• Na GitHubu kliknete na Create Pull Request.
• Tím říkáte: "Žádám (Request) o to, abyste si natáhli (Pull) můj kód do hlavní větve."
• Následuje Code Review: Kolegové kód projdou, okomentují, vy ho případně opravíte a až pak se slavnostně klikne na zelené tlačítko Merge.

​

• Pull Request je místo, kde se v práci nejvíc naučíte. Zkušenější kolega vám kód projde, napíše vám tipy na zlepšení, a vy tak neriskujete, že pustíte na živý web nějakou obří chybu.

20. 💻 LIVE UKÁZKA 3: Letíme do cloudu

​

• Otevři v prohlížeči GitHub, klikni na "New Repository", pojmenuj ho ujep-demo (nech ho prázdný, bez README).
• GitHub ti ukáže přesné příkazy, které máš zkopírovat.
• Zkopíruj git remote add origin ... do svého terminálu, kde máš ten projekt z předchozí ukázky (s vyřešeným konfliktem z Notepadu).
• Zadej git push -u origin main.
• Aktualizuj stránku v prohlížeči (F5) – a bum! Co jste před chvílí editovali v Notepadu, je najednou veřejně na internetu na krásném profilu.

21. Černá listina Gitu (.gitignore) - Co do Gitu rozhodně NEPATŘÍ!

​

• Git ve výchozím stavu sleduje všechno. Někdy je ale až moc iniciativní.
• Do kořenové složky projektu proto zakládáme skrytý textový soubor s názvem .gitignore.
• Co do něj zapisujeme (co nechceme verzovat):
• 🛑 Tajnosti: Hesla k databázím, API klíče (na GitHubu běží boti, co kradou klíče do pár vteřin od zveřejnění!).
• 🛑 Obří soubory: Videa (.mp4), zdrojové grafiky (.psd), vygenerované složky (např. obávaná černá díra node_modules).
• 🛑 Osobní nastavení: Konfigurační soubory vašeho editoru (např. složka .vscode), do toho kolegům nic není.

​

Tohle je vaše záchranná brzda. Jakmile budete dělat s databází nebo nahrávat web na server, nesmíte svá hesla nahrát na GitHub. Zapamatujte si: Co se jednou dostane na GitHub, to si internet pamatuje navždy, i když to pak smažete.

22. Zlatá pravidla přežití (Shrnutí)

​

• 🔄 Commitujte často, a po malých kouscích. (Nefoťte celou svatbu na jeden snímek. Rozbijte to na logické celky – např. "Přidáno menu", "Upraveno logo").
• 📝 Pište smysluplné zprávy. (Myslete na své budoucí já ve 3 ráno před odevzdáním semestrálky).
• ⬇️ Ráno Pull, večer Push. (Než začnete psát kód, vždycky si stáhněte aktuální stav z GitHubu. Ušetříte si hromadu konfliktů).
• 🌿 Nerozbíjejte main! (Nové nápady vždycky zkoušejte ve vlastní větvi).

23. Kdo je ten divný maskot? 🐙🐱

​

• Z fotobanky na trůn: V roce 2008 potřeboval GitHub vtipný obrázek pro chybovou stránku 404. Zakladatelé ho koupili na fotobance za pár dolarů (původní název "Octopuss").
• Jméno: Oficiálně se jmenuje Mona Lisa (zkráceně Mona), ale všichni jí říkají Octocat.
• Proč kočko-chobotnice?
• 💻 Technický důvod: V Gitu existuje reálný příkaz "Octopus merge" (když slučujete tři a více větví najednou).
• 🎨 Filozofický důvod: Roztomilá hlavička je váš uhlazený Frontend. Změt chapadel pod ní je váš zamotaný Backend a databáze.
• Najděte si svého: Na webu octodex.github.com najdete stovky komunitních verzí (Spider-Man, zombie, Homer Simpson...).

Na doma

Nahrajte svou aktuální podobu semestrálkového webu na GitHub a do Moodlu nahrajte odkaz na daný repozitář!

mail@mjakl.cz

Tel. 608 544 839

Web: mjakl.cz

​

Děkuji za pozornost a těším se příště!��Prostor pro zpětnou vazbu