Git telepítése

Ez egy verziókezelő rendszer. Ahhoz kell, hogy több ember tudjon együtt dolgozni ugyanazon a kódon. A git telepítőjét letöltjük a https://git-scm.com/ oldalról. A telepítőben minden jó úgy, ahogy van, tovább gombot nyomogatva befejezzük.

Alapismeretek

Repository (repo/repozitórium): egy olyan mappa, ami kódot tartalmaz, és a git kezeli.

Branch (ág): a kód egy verziója

Commit/push/pull/pull request

Github regisztráció

Regisztrálj egy fiókot a https://github.com oldalon. Ez egy olyan online tárhely, mint a google drive, de git által kezelt kódot tárol.

Miután megerősítetted a mailcímed, nem kell új repot létrehozni, keress meg, és küldök meghívót.

Node telepítés

A node egy olyan rendszer, ami Javascript futtatására képes a böngészőn kívül. Jár hozzá az npm, ami csomagokat kezel. (https://www.npmjs.com/ oldalon megtalálhatóak ezek a csomagok).

A node innen tölthető le: https://nodejs.org/en/ A bal oldali verziót kell választani (recommended for most users). A telepítésnél szintén csak a tovább gombot kell nyomogatni.

Vscode telepítés

Ez a fejlesztőkörnyezet. A https://code.visualstudio.com/ oldalról tölthető le, telepítése ugyanúgy zajlik, mint a korábbiaknak.

Ha itt jársz, indítsd újra a géped.

Ismerkedés a parancssorral

Nevezik még konzolnak, vagy terminálnak. Ezt egy szöveges felület, amibe parancsokat tudunk gépelni. Windowson a start menüben rákeresve, a cmd (ez a régi verziója) vagy a powershell (ez az újabb) érhetjük el. A vscode felületén belül is elérjük, a terminal menüben (ekkor alulra egy powershell ablakot kapunk, csak nem kéket, hanem feketét).

A konzolba nem ctrl+v-vel, hanem jobb egérgombbal lehet beilleszteni.

Érdemes abba a mappába mozognunk, amiben majd dolgozni szeretnénk. A mappaváltáshoz a cd parancsot adhatjuk ki, majd a mappa teljes, vagy részleges elérési útját. A legalsó sor elején mindig kiírja a mappát, ahol vagyunk. Például:

PS C:\Users\balazs> cd..
PS C:\Users> cd .\balazs\
PS C:\Users\balazs> cd .\Documents\
PS C:\Users\balazs\Documents> cd C:/src
PS C:\src>

Git beállítása

Adjuk ki az alábbi parancsokat, természetesen nevet mailcímet a sajátunkra cserélve.

git config --global user.email "[email protected]"
git config --global user.name "Name"

Repo klónozása

Githubon a megfelelő repo oldalán (pl: https://github.com/magyarb/rticket-frontend-v2) kattintsunk a zöld "clone/download" gombra. Az ott megjelenő linket másoljuk a git clone parancs után, és így adjuk ki. Például:

PS C:\Users\balazs\Documents\vscode> git clone https://github.com/magyarb/rticket-frontend-v2.git

Ez létre fogja hozni a C:\Users\balazs\Documents\vscode mappán belül az rticket-frontend-v2 mappát, és benne lesz a kódunk, valamint a git beállításai, tehát tudni fogja, hogy hova kell feltölteni a változásokat.

Vue cli telepítése

A vue egy frontend framework, ami annyit jelent, hogy egy csomó hasznos funkciót ad az alap javascript nyelvhez, hogy könnyebb legyen programozni benne. Ad egy szép felületet is az egyszerű kezeléshez. Így tudjuk telepíteni:

npm i -g @vue/cli

Ez azt jelenti, hogy az npm (node package manager) segítségével i mint installáljuk fel, -g mint globálisan (tehát nem csak ehhez a projekthez, hanem a gépre úgy, hogy mindenhonnan elérhető legyen) a @vue tehát a vue felhasználó által létrehozott cli nevű csomagot.

Csomagok telepítése

A gitről leklónozott mappánkban még nincsenek benne a hozzá szükséges külső modulok, csak a kód. Ahhoz, hogy az egész működjön, kellenek ezek a csomagok is. A projektünk mappájában adjuk ki az npm i parancsot:

PS C:\Users\balazs\Documents\vscode\rticket-frontend-v2> npm i

Ez létrehozza a projektben a node_modules nevű mappát, ebben lesznek a szükséges csomagok, pl qr kód olvasó vagy dátumválasztó.

Vue project importálása

Hogy dolgozni tudjunk vele, a vue kezelőfelületén hozzá kell adni a projektet. Először elindítjuk a felületet:

vue ui

Majd a megjelenő ablakban az import fül alatt kiválasztjuk a projektünk mappáját, majd import.

Ezután a tasks menüben kiválasztjuk a serve lehetőséget, és a parameters-ben bekapcsoljuk a 'Use HTTPS' lehetőséget. Majd a zöld run task gombbal lefordítjuk a projektet, és az Open app gombbal megnyithatjuk.

Szerkesztés

A vscode-ban nyissuk meg a mappánkat (file->open folder), majd válasszuk ki az src/views mappában a megfelelő vue fájlt (ez a főoldalnak például Home.vue).

Ha felajánlja a Vetur kiegészítő telepítését, fogadjuk el. Ez színezi a kódot, hogy érthetőbb legyen.

Mielőtt bármihez nyúlunk, csináljunk egy új branch-et. Ehhez a vscode-ban bal alul a branch ikonra kell kattintani, ami mellett a master szó van. Majd fent a create new branch-et választani, megadni a nevét, és kész. A bal alsó sarokban mindig látjuk, hogy melyik branch-en szerkesztünk éppen.

Ezután szerkesszünk valamit a kódban, majd mentsük el (ctrl+s). A böngészőben megnyitott projektünknek le kell frissülnie, és tartalmaznia kell a változtatásokat.

Kollaboráció

Amint a változtatásainkkal elégedettek vagyunk, válasszuk a vscode-ban a bal felső ikonok közül a harmadikat, és írjunk be a fent megjelenő dobozba a változtatásaink összefoglalóját, pár szóban. Ezután a pipa gombot megnyomva commit-oljuk a változtatásokat (tehát létrehozunk egy új verziót a kódból, amik tartalmazzák a változtatásainkat). Ahhoz, hogy a változtatásokat más is lássa, bal alul, a repo neve melletti kis körkörös nyíl ikont nyomjuk meg, ezzel feltölti a változtatásainkat a felhőbe (és letölti az esetleg mások által végzett változtatásokat).