Vorönn 2017 T-404-LOKA, Lokaverkefni

Rekstrarhandbók

Ingþór Birkir Árnason Jan Hinrik Hansen Logi Guðmann Þorgrímur Jónasarson

Kennari: Hallgrímur Arnalds Leiðbeinandi: Sigurjón Ingi Garðarsson Prófdómari: Símon Óttar Vésteinsson

12. maí 2017 Efnisyfirlit

1 Framendi 3 1.1 Dependencies 3 1.2 Uppsetning 3 1.3 Keyrsla 3 1.4 ESLint 4 1.5 Stílar 5 1.5.1 BEM - Block Element Modifier 5 1.5.2 StyleLint 5 1.5.3 Gulp task 5

2 Bakendi 6 2.1 Dependencies 6 2.2 Uppsetning 6 2.3 Handhægar upplýsingar 8 2.3.1 Admin aðgangur 8 2.3.2 Postman 8 2.4 PHPUnit 8 2.5 Documentation 9

3 Forritunarreglur 9 3.1 Almennar reglur 9 3.2 VueJS 9 3.3 CSS 10 3.4 PHP - Laravel 11

2 1 Framendi

Framendinn er skrifaður í Vue.js með vue--boilerplate (https://github.com/vuejs-templates/webpack) sem grunn. ​ ​

1.1 Dependencies Til þess að geta keyrt framendann er nauðsynlegt að hafa node og node package manager (). Hægt er að sækja node.js ásamt npm á Node.js heimasíðunni (https://nodejs.org/en/). ​ ​

1.2 Uppsetning 1.) Sækja git repository-ið.

git clone https://github.com/toggi737/Lokaverkefni_vue.git

2.) Setja upp nauðsynleg dependencies í gegnum npm.

npm install

3.) Búa til dev.env.js skrá sem að inniheldur stillingar fyrir þína vél. Nauðsynlegt er að búa til dev.env.js skrá undir config möppunni sem að inniheldur upplýsingar um þann API sem að þú vilt nota. Það er hægt að gera með því að keyra

cp dev.env.js.example dev.env.js

í config möppunni.

Hér má sjá dæmi um skránna ef nota á production API-inn.

var merge = require('webpack-merge') ​ ​ ​ ​ ​ ​ var prodEnv = require('./prod.env') ​ ​ ​ ​ ​ ​

module.exports = merge(prodEnv, { ​ ​ ​ ​ ​ ​ ​ ​ NODE_ENV: '"development"', ​ ​ ​ API: '"https://api.dagbokin.is/v1"', ​ ​ ​ });

3 Passa þarf upp á að hafa bæði einfaldar og tvöfaldar gæsalappir utan um API strenginn eins og sjá má hér fyrir ofan.

1.3 Keyrsla Eftir þessi skref hér að ofan ætti framendinn að vera tilbúinn til keyrslu. Til þess að keyra framendann upp í development mode má keyra

npm run dev

Þá ætti framendinn að opnast í vafra á vélinni þinni með URL-ið

http://localhost:8080

Til þess að build-a framendann fyrir production er svo hægt að keyra

npm run build

1.4 ESLint Kerfið kemur með ESLint config-i sem að passar upp á að JavaScript kóði sé alltaf með sama stílnum. Config-ið sem er í notkun byggir á eslint configi frá Sindre Sorhus sem að kallast xo https://github.com/sindresorhus/eslint-config-xo, en er þó með örlitlum breytingum. ​ Hægt er að setja upp ESLint plugin í mörgum editorum sem að sýnir manni villu um leið og maður brýtur einhverja reglu, en einnig failar build-ið og birtast skilaboð í vafranum, sé einhver regla brotin.

Hentugt getur verið að slökkva á eslint í ákveðnum file eða línu á meðan maður er að forrita, en forðast skal að push-a því inn á master. Til þess að slökkva á eslint í heilum file má bæta við

/* eslint-disable */ efst í viðkomandi file. Til þess að slökkva á eslint í .vue skrá skal þessi lína vera sett efst í