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.
-
Model
- Í okkar tilviki er Model-ið tegund gagnanna sem við getum fengið frá database-inu, modelið sér bara um að gefa services models svo service veit hvering gögnin geta litið út í gagnagrunninum.
-
Services
- Services í api serverinn hann tekur reqest frá presentor-inum, og sendir til baka það sem Presentorinn var að byðja um. Hann sendir á reoisitory til að fá gögnin sem presentorin-inn er að byðja um.
-
Presenter
- Presentorinn er create-react-app, presentorinn fær beiðnir frá notandanum og vinnur úr þeim, t.d að route hann annarstaðar á síðunn, senda gögn og mart fleyra.
-
View
- Er það sem notandinn sér. Í raun og veru er view-ið react líka, þars sem html er skirfið inn á sama stað og route-inn, og request-inn til api-sins.
-
Repository
- Er það sem service notar til að tala við databasið. Í okkar tilfelli er það mongoose sem sér um það það. Service-ið sendi stuttar skipanir á repository-ið sem breytir þeim í request sem MongoDB skilur.
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.
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