VEF4-Haust19-TenderStrendingur

Tender-Strendingur

Kypler Lloyd, Pétur Steinn Guðmundsson, Róbert Ingi Hálfdanarson

Til hvers er vefsíðan?

Í stuttu máli tekur vefsíðan á móti tilboðum frá notendum sem vilja taka þátt í verkefnum. Verkefnin á þessari síðu eru fjölbreytt þau gætu verið að byggja hús eða sjá um matinn í skólum, verkefnin koma samt öll frá fyrirtækum eða stöfnunum.

Hluti notandanna eru starfsmenn Strending EHF, starfsmenninir taka verkefnin sem þeir fá og búa til útboð á síðunni. Þar geta aðrir notendur boðið í verkefni og eiga þar möguleika á að fá þau

Hvað vandamál leysir þessi síða?

Það kerfi sem þeir eru með núna, er þannig að notendur sjá hvaða útboð eru í boði á síðunni en ef þeir vilja bjóða í það, þurfa þeir að senda tilboðið í pósti.

Síðan mun gefa notendum leið til að senda tilboðið á netinu.


Hönnunarmynstur

Hönnunarmynstur sem við erum að fylgja eftir MVP eða Model, Presentor og view. En við bætum við Services og repository við sem milliliði.

UML use case diagran


Stack

Stackur-inn sem við erum að nota fyrir þessa síðu er MERN Stack sem notar Apollo.

MERN stendur fyrir MongoDB, Express, React og node. Svo er Apollo graphql server og clinet sér um api request-in.


Virkni vefsíðuna.

Hérna er UML use case diagram af síðunni.

UML use case diagran


Um verkefnið

Verkefnið sem við tókum að okkur er tvískipt, annars vegar heimasíða fyrirtækisins Strendingur fyrir almenning til að skoða (Web-Strendingur); og hins vegar útboðsvefur fyrir bæði starfsfólk Strendings til að nota og önnur fyrirtæki sem taka þátt í útboðum (Tender-Strendingur)

Á Web-Strendingur þurfa að vera almennar upplýsingar um fyrirtækið, starfsfólk o.fl. Einnig er CTA hlekkur sem leiðir mann á Tender-Strendingur síðuna.

Kerfisnotkun

Web-Strendingur notar Gatsby og Netlifly CMS (ekki komið í notkun 26.11.19). Gatsby er öflugur Static Site Generator með innbyggðum uniform GraphQL interface sem les inn gögn hvaðan sem er, hvort sem það eru local gögn eða á server. Gatsby er gert fyrir hraðvirka vafra-upplifun og meðhöndlar gagnavinnslu vel.

Tender-Strendingur er á MERN stack með Apollo GraphQL server. Í development state er síðan keyrð á create react app, serverinn með node og database-ið er hýst hjá MongoDB Atlas. Í production notum við Nginx fyrir client síðuna node fyrir serverinn og MongoDB Atlas fyrir database-ið. Við notum Apollo fyrir API request (GraphQL), Apollo keyrir beint á express serverinum sem keyrist á node. Öll skjöl eru núna geymd beint á container-inum, það er ekki besta leiðin en planið er að breyta því.

Vinnuflæði og verkaskipting

Web-Strendingur var unnin af Kypler og Tender-Strendingur var unnin af Róberti með aðstoð frá Pétri.

Áætlunin var að notfæra sér projects (github) en það gekk ekki nógu vel. Verkefnaskipulagið sem github býður upp á hentaði ekki nógu vel fyrir okkur með okkar verkefnaskiptingu. Þar sem Pétur og Róbert voru þeir sem voru í samvinnu; var auðveldara að ræða málin beint við hvorn annan.

Notandaupplifun

Með Web-Strending vorum við með hefðbundna notendaupplifun í huga, farsímaviðmót, skýr texti, auðvelt að finna upplýsingar o.fl.

Tender-Strendingur var allt önnur saga. Þar gerum við fyrst og fremst ráð fyrir því að síðan sé notuð á stærri skjáum. Líka þurftum við að hafa í huga að gera síðuna eins einfalda og hægt er, starfsmenn eiga alls ekki að lenda í neinum erfiðleikum með að nota kerfið.

Web- og Tender-Strendingur notast við Bulma.io css framework. Með því gátum við auðveldað okkur lífið með minni vinnu ásamt því að bjóða notendum upp á þægilega notendaupplifun.

Gagnagrunnar

Þar sem Web-Strendingur keyrir á Gatsby; sér Gatsby um alla gagnavinnslu með GraphQL. Eins og er þá notum við local markdown skrár til þess að geyma upplýsingar eins og gögn um starfsmenn, verkefni o.fl. Þetta verður svo stýrt í framhaldinu með Content Management System sem sér um að viðhalda þessum skrám.

En með Tender-Strending er gagnavinnslan töluvert öðruvísi. Við notum Apollo til að tala á milli client og serverinn. Mongoose fyrir request á milli serversins og databasið. Allur kóði fyrir samskipti milli database og serversins er i *databaseGateway skrám, þær eru í controller möppunni í server/src. Kóðin fyrir samskiptin milli client og serversins er í resolvers möppunni sem er í server/src. Resolvers höndla öll request sem serverinn fær frá client, þetta er í staðin fyrir get og post request sem maður notar í RESTAPI.

Annað

Lifandi vefur

Web-Strendingur
Tender-Strendingur

Myndband af notkun

Web Strendingur
Tender Strendingur

Heimildir

Scott Tolinski (leveluptutorials)
Apollo docs
Gatsby docs
Node docs
StackOverflow


Nemendur: Kypler, Pétur og Róbert.