1/3 - Forráskód kezelő rendszerek bevezető

1., A forráskód kezelés bevezető

Az előző gyakorlaton létrehoztunk egy pár fájl (.html, .js, .css), amelyek a forráskódunkat alkotják. Ha ezeken a fájlokon változtatunk, jó lenne, ha valamilyen módon követhetnénk ezeket. Ha esetleg olyan módosítást hajtunk végre, ami valamit tönkretesz más részekben, akkor hasznos, ha vissza tudunk térni egy korábbi verzióhoz, ha pedig csapatban dolgozol össze kell fésülnötök (merge) a munkátokat. Erre találták ki a forráskód kezelő rendszereket (Source Control).

Ha mindezek mellett olyan rendszert használsz, amely online is menti a fájljaidat valamilyen tárhelyre, akkor a munkád akkor sem veszik el, ha a géped tönkremegy. Ezen a gyakorlaton röviden bemutatom, hogyan működik a forráskód kezelés, majd a Git néhány funkcióját, amely az egyik leggyakrabban használt elosztott forráskód kezelő manapság.

2., A forráskód kezelés alapjai

Sokféle forráskód kezelő rendszer létezik. Vannak központosított mint például a Team Foundation Version Control (TFVC), amely egy központi szerveren tartja az előzményeket (history) és fájl szinten kezeli a jogosultságokat, míg az elosztott rendszerek, mint például a Git, a szerveren lévő összes fájlt lokálisan is letárolja egy ún. repository-ban (röviden repo), amelyben minden információ benne van.

A Git tulajdonképpen olyan mintha fényképeket készítenénk a fájljaidról adott időpillanatokban, és ezeken a fényképeken tudsz előre és hátra "utazni az időben" ezekhez a pontokhoz (commit-okhoz). Ez látható az alábbi ábrán. Ha csak ki akarsz valami új funkciót próbálni, de nem tudod biztosan, hogy működni fog-e, akkor csinálsz egy branch-et. Ezután ezen a branchen dolgozol és ide commit-olod a fájl módosításaid. Ha működik, akkor összefésülöd az eddigikkel, ha nem, akkor egyszerűen törlöd a branched, vagy otthagyod, hátha később szükség lesz még rá, és visszaváltasz a fő ágra (2-es pont), és innen dolgozol tovább. Nem kell minden fájlt megvizsgálnod, hogy mindent töröltél-e. Nem kell kikommentelned sorokat, hogy "Nem tudom erre még szükség lesz-e" stb., egyszerűen visszaváltasz egy korábbi pontra.



3., Szerezzük be az eszközöket.

A Git-et innen tudod installálni
https://git-scm.com/downloads

Nyissunk egy parancssort és írjuk be.
git --version
A git-et akár parancssorból is használhatjuk. Van akik ebben gyorsabban dolgoznak (és sajnos vannak, akik csak azt hiszik, hogy ebben gyorsabban dolgoznak :) ), de mi erre a célra egy ún. Git kliens-t fogunk használni, ami sokban meg fogja könnyíteni az életünket (branch-ek közötti váltás, forráskód letöltést stb.). Én a Source Tree-t fogom bemutatni, mivel ingyenes és könnyen kezelhető, de ha haladóbb vagy, bármit használhatsz (szerintem e tutorial keretéig hasonlóan működnek).

Innen tudod letölteni és telepíteni a source-tree-t
https://www.sourcetreeapp.com/

4., Hozzunk létre egy repo-t

  • Nyisd meg a source tree-t
  • File->Clone/New
  • Válts át a "Create" tab-ra
  • Tallózd ki a mappádat, amiben dolgozol a Browse gombbal
  • Adj nevet a repository-nak: "TestRepository1"
  • Nyomd meg a Create-et és a "yes"-t a felugró ablakon.

Gratulálok! Sikeresen létrehoztál egy Git repo-t. Ha most elnavigálsz a könyvtáradba egy fájlkezelőben, és be van kapcsolva, hogy látszódjanak a rejtett fájlok, akkor látni fogsz egy rejtett mappát .git néven.

Adjunk hozzá kódot

Nyissunk meg egy mappát VS Code-ban, és hozzunk létre egy index.html fájlt. Írjuk bele az alábbiakat.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git commands</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <h1>Most important git commands</h1>
    <div class="list">
        <div class="head-section">
            <div>Git command</div>
            <div>Description</div>
        </div>
        <div class="content">
            <div class="row">
                <div>git clone |remotUrl|</div>
                <div>clones remote repository</div>
            </div>
            <div class="row">
                <div>git init </div>
                <div>creates repositroy in a local folder</div>
            </div>
            <div class="row">
                <div>git version </div>
                <div>gets version of git</div>
            </div>
            <div class="row">
                <div>git diff </div>
                <div>gets differences from last commit</div>
            </div>
        </div>
    </div>
</body>

</html>
Ezután adjunk hozzá egy index.css fájlt az alábbi tartalommal.
.list{
    display: flex;
    flex-flow:column;
    font-size: large;
}

.head-section{
    font-weight: bold;
    border:1px solid black;
    display: flex;
    flex-flow: row;
}

.head-section > div{
    flex: 1;
}

.content{
    border:1px solid black;
    display: flex;
    flex-flow: column;
}

.row{
    display: flex;
    flex-flow: row;
}

.row > div{
    flex: 1;
}
Mindkét változattás után mentsük a fájlt (Ctrl + S). VS Code-ban ezután válasszuk ki a source control tab-ot a bal oldali oldalsávon az alábbi ikon-ra kattintva.
a 2 fájl amit létrehoztunk untracked állapotban van. Ez azt jelenti, hogy a VS Code felismerte, hogy van egy Git repo a mappában, de az alábbi két fájl még friss.

 Válasszuk ki mindkét fájlt Ctrl + kattintás, vagy egyikre kattintunk és Ctrl + A, ezután írjunk be egy üzetetet a Message helyére, és kattintsunk a pipára.

 
 
A két fájl commit-olva (egyesek szerint commit-álva) lett a master nevű branch-re.

Biztosítsuk be magunkat egy online tárhellyel

Bármilyen projektnél hasznos, ha a forrásfájlok nem csak a saját gépünkön léteznek. Erre létrehozhatunk egy fiókot egy szolgáltatónál minta bitbucket vagy a github, akik ingyen tárolják neked a kódod. Ez úgy működik, hogy létrehozol egy online repo-t is, és ide push-olod a változtatásaidat. Én itt a bitbucket-et fogom megmutatni.

  • Látogass el a https://bitbucket.org/ linkre, regisztrálj egy fiókot. és hozz létre egy új repository-t pl TestRepository1
  • Az oldalon látni fogsz egy beviteli mezőt, amiben a "git clone" szerepel. Másold ki innen a repository-d címét, a "git clone" nélkül
  • https://<yourusername>@bitbucket.org/<yourusername>/testrepository1.git
  • Ezután nyisd meg a source-tree-t és kattints a Remote gombra
  • Töltsd ki a mezőket az alábbi ábrák alapján.


  

A "yourusername" helyére persze a saját adataid add meg.

  • Jobb gomb a bal oldalsávon a master branchen
  • Itt választ ki a push to -> bitbucket

Most megjelent a Remotes->bitbucket alatt is a master. Királyság, a kódod biztonságban van. A zsarolóvírusos hackerek most már hiába titkosítják a géped, legalább a forráskódod vissza tudod állítani (a gyerekkori képeimet mondjuk persze nem feltételen ide tenném fel). Természetesen csak akkor, ha egy pár commit után azért pusholod is a változtatásaid.

Adjunk hozzá egy gitignore fájlt

Hozzunk létre egy ún. feature branch-et (a feature-t leginkább funkciónak lehet fordítani, az oldal egy olyan részének megvalósítása ami önállóan is értelmes egységet képvisel). Mi most példaként fogjuk használni ezt a branchet, hogy megnézzük hogyan működik a Git.
  • Sourcetree-ben kattints a master-re, majd a felső ikonok közül válaszd a Branch-et
  • Írd be, hogy "feature/add_gitignore"és üss entert
Egy új branch jött létre a feature mappában, ezt a fájl nevének megadásakor adtad meg. A Sourcetree automatikusan beállította, hogy ez legyen az aktív branch. Egyszerre csak egy branch lehet aktív, amin éppen dolgozol. Ha váltani akarsz a branch-ek között, akkor csak kétszer kattintasz a branch nevére. Mivel most az add_gitignore branch aktív, ezért a változtatások ide fognak mentődni egy commit esetén. És a master branch nem fog változni.

Most, hogy minden fejlesztő, akivel dolgozol láthatja a push-olt változtatásaid, akinek hozzáférést adsz a repo-dhoz, előfordulhat, hogy lesznek fájlok, amiket létrehozol, de nem akarsz commit-olni. Ennek több oka is lehet, vagy azért mert csak te használod őket, vagy csak tesztelésre használod, vagy olyan JS package-ek amiket bárki le tud tölteni magának.

Adjuk hozzá a következő fájlokat és mappákat, majd módosítsuk az index.html fájl tartalmát
  • unimportant_root1.txt
  • unimportantfolder/unimportant1.txt 
  • unimportantfolder/unimportant2.txt
  • módosítsuk a "Most important git commands" szöveget "Important git commands"-ra az index.html-ben
Csak az index.html fájl módosítást akarjuk commit-olni. Az unimportant (magyarul: nem fontos) fájlokat ki szeretnénk hagyni. Ennek az egyik módja a staging terület használata a Git-ben. Ezegy olyan terület ahova előkészíthetjük a menteni kívánt módosításokat.
  • VS Code-ban navigáljunk a source control nézetre
  • Jobb az index.html-en, és válasszk a stage changes-t

Ha most rákattintunk az index.html fájlra a baloldali oldalsávban, akkor látni fogjuk a különbségeket, amiket változtattunk. Ez egyike a forráskód kezelés nagy előnyeinek. Ha most commit-álnánk a változtatásokat, akkor csak az index.html fájl kerülne be hiszen a többi fájl unstaged állapotban van. Hosszú távon azonban kényelmetlen lenne mindig csak az új módosításokat feltenni, előfordulhat, hogy véletlen az unimportant file-ok is felkerülnének.

Adjunk hát hozzá ehelyett egy .gitignore fájlt a munkakönyvtárunk gyökerébe. Ez a fájl megmondja a Git-nek, hogy miket hagyjon figyelmen kívül a változáskezelésben. Írjuk be a fájlba ezeket.

unimportant_root1.txt
unimportant/
Először is, az unimportant_root1.txt fájlt akarjuk figyelmen kívül hagyni, majd mindent ami az unimportant mappa alatt van. Ha elmentjük a fájlt, akkor frissül a source control, és már nem is jelennek meg a nem fontos fájlok



  Fésüljük össze a módosításainkat (Merge-eljük)

Most már csak az van hátra, hogy a branchünket merge-eljük a master-re (ez már egy igazi szakzsargonnal teletűzdelt mondat volt)
  • Nyissuk meg a sourcetree-t és frissítsünk rá a nézetre F5-tle (Ez egy idő után magától is megtörténik, de ha nem szeretnénk várni...)
  • Váltsuk át az aktív branch-et a master-re duplakattintással
  • Jobb gomb az add_gitignore branch-en majd válaszd ki a merge feature/add_gitignore into current branch
  • Pipáljuk be a "create a new commit even if fast forward is possible" lehetőséget
  • Kattintsunk az OK-ra
Most a master branchen már minden változtatás fent van, amit az add_gitignore branch-en elvégeztél. Ne felejtsd el a push-t :)

5., Tippek és trükkök

  • Ha a mappa amit ki akarsz hagyni almappában van akkor így hivatkozhatod be a .gitignore fájlban */almappa_nev
  • További mintákat is megadhatsz lásd. https://git-scm.com/docs/gitignore 
  • Ha már van online fiókod (pl a bitbucketen) akkor Sourcetree-ben a repo-kat úgy is le tudod szedni, hogy File->new-ban a Clone-t választod
  • VS Code-ban automatikusan formázhatod (autoformat) az aktuális dokumentumod a Ctrl + K, Ctrl + D billentyűket.
  • Összekötheted az autoformatot a fájlmentéssel, Alt + F, P, S (File->Preferences->Settings) írd be, hogy "format on save" és pipáld be a lehetőséged
Kérlek, ha van pár perced segítsd a blog működését azzal, hogy névtelen visszajelzést adsz

Nincsenek megjegyzések:

Megjegyzés küldése

Feliratkozás: Bejegyzések (Atom)