Skýrsla
Hugmyndin á bak við Amigo er sú að notendur eigi að geta kynnst vinum eða samstarfsaðilum með sameiginleg áhugamál. Á forsíðunni eru birtir prófílar fólks sem á áhugamál sem samsvara manns eigin áhugamálum. Notendur hafa val um að smella annað hvort á Like eða Next á hverjum prófíl. Like-takkinn hefði þá virkni að ef báðir aðilar smelltu á Like hjá hvorum öðrum gætu þeir sent hvorum öðrum skilaboð og kynnst betur. Hugmyndin er innblásin af Tinder og svipuðum forritum.
Einnig höfðum við í huga að hafa eiginleika sem kallast Board þar sem fólk gæti auglýst eftir fólki í ákveðin verkefni. Allir aðrir notendur Amigo gætu séð þessar auglýsingar og sent beiðni um að taka þátt í verkefninu, sem sá sem auglýsti gæti samþykkt eða hafnað.
Á stillingarsíðu er hægt að setja inn áhugamál sem eru notuð til að bera notandann saman við aðra notendur og sýna honum prófíla fólks sem eiga eitthvað sameiginlegt. Einnig er hægt að stilla grunnupplýsingar sem birtast öðrum notendum; prófílmynd, nafn, aldur, lýsingu og staðsetningu. Okkur datt einnig í hug að bjóða upp á að forgangsraða áhugamálum svo ákveðin áhugamál gætu haft meira vægi í samanburðinum.
Amigo er alfarið unnið í Angular 8, sem er skrifað í TypeScript og vinnur þess utan með HTML og SCSS. Öll forritun Amigo fór fram í TypeScript. Enginn bakendi er í kerfinu okkar heldur notum við Firebase-þjónustur Google fyrir auðkenningu, gagnavinnslu og -geymslu. Auðkenning fer alfarið fram í gegn um Google-reikninga og öll gögn eru geymd í Cloud Firestore. Auk þess notum við Cloud Functions til að sjá til þess að búnir séu til prófílar fyrir alla notendur og að þeim sé haldið við.
Ástæða þess að við völdum Angular fram yfir önnur kerfi var sú að við vorum í raun að gera app þar sem okkur fannst eðlilegast að stærsti hluti virkninnar yrði í framendanum. Þetta hafði þó þau áhrif að við vorum að læra á eitthvað sem við höfðum aldrei notað áður og stór hluti af þeim tíma sem tók að vinna verkefnið fór í að læra á grunnatriði Angular.
Til að vinna með Firestore í Angular notum við AngularFire 2 viðbótina. Þar að auki notum við Angular Material til að fá sem flesta tilbúna hluti fyrir viðmót vefsins. Þetta safn notuðum við í nær allar hliðar vefsins. Má nefna sem dæmi að allir takkar eru Material takkar og flestir eru þeir með táknum úr Material safninu. Auk þess notum við tilbúnar útfærslur Angular Material á valmynd sem sýnir Settings og Log out-takka (⋮) og á hliðarvalmynd sem kemur inn frá vinstri hliðinni þegar smellt er á hamborgaratakkann (☰) í vinstra horninu.
Amigo var unnið í samræmi við Gitflow vinnuflæðið. Skýringarmynd af því má finna í verkefni 2. Í stuttu máli gengur það út á að tvær greinar eru alltaf til staðar, master og develop. Báðar eiga alltaf að vera í lagi. Ef vinna á að nýjum eiginleika er búin til sérstök grein með forskeytinu feature/, bugfix fá forskeytið bugfix/ o.s.frv. Þessar greinar sameinast að lokum develop greininni þegar þær eru tilbúnar og þegar tími er kominn á að gefa nýja útgáfu út er búin til release/-grein sem er síðan sameinuð við master greinina, en þar á alltaf að vera nýjasta stabíla útgáfa vefsins hverju sinni.
Verkaskiptingin hjá okkur var ekkert sérstaklega ströng. Hver og einn tók að sér verkefni eftir þörfum, vann í því á feature/-grein og sameinaði það síðan develop-greininni þegar vinnunni var lokið. Ef einhver átti í vandræðum með eitthvað og vildi hjálp við það kom fyrir að aðrir færu inn á þá grein og ynnu að sameiginlegri lausn, þó svo að yfirleitt hafi hver og einn haft forræði yfir sínum verkefnum þó viðkomandi kunni að hafa borið ákveðin atriði undir samstarfsfélagana.
Sérvirkni er mjög víðtækt hugtak og getur í raun átt við flestallt sem við gerðum. Sem dæmi mætti þó til dæmis nefna vinalistann í hliðarvalmyndinni (sem var ekki fullkláraður sökum tímaskorts) og alla vinnslu með prófíla. Prófílar eru sóttir í Cloud Firestore gagnagrunninn. Síðan er farið í gegn um alla prófílana og þeir sem innihalda einhver sameiginleg áhugamál með prófíl notandans sjálfs eru settir í fylki. Þeir eru síðan settir fram á forsíðunni með Like og Next tökkum.
Hægt er að skoða hvern prófíl fyrir sig á prófílssíðum og sé enginn prófíll valinn er hægt að nota hana til að skoða eigin prófíl.
Prófílarnir byggja síðan allir á ákveðinni grind sem er skilgreind sem interface og lýsir því hvaða gögn eru í henni. Þetta auðveldar okkur að lesa gögnin úr gagnagrunninum, búa til object til að skrifa í gagnagrunninn og margt fleira.
Til að þetta virki er til staðar auðkenningarþjónusta sem notar Firebase og heldur utan um UID þess notanda sem skráður er inn. Auk þess er að sjálfsögðu gagnagrunnsþjónustan sem sér um að sækja prófíla og önnur gögn í gagnagrunninn, auk þess sem hún sér um uppfærslu gagna þegar notandi breytir stillingunum sínum.
Svo má að sjálfsögðu ekki gleyma stillingasíðunni en þangað setjum við inn prófílgögn notandans úr gagnagrunninum og gerum honum kleift að breyta þeim og senda aftur í gagnagrunninn. Helsta sérvirknin þar felst líklega í að breyta áhugamálastreng í áhugamálafylki, auk þess að láta formið virka.
Öll gögn sem við vinnum með í Amigo eru geymd í Cloud Firestore (Firebase). Þegar notandi skráir sig er búin til færsla fyrir hann í safni sem heitir users. Sú færsla hefur ID sem samsvarar UID (notendauðkenni) notandans og inniheldur UID, nafn og slóð að prófílmynd (allt strengir). Síðan er ætlast til að notendur bæti við þessi gögn aldri (tölu), lýsingu (streng), staðsetningu (streng) og áhugamálum (fylki strengja). Það er allt gert í gegn um Settings-síðuna en þar er einnig hægt að breyta nafni og prófílmynd. Áhugamál eru tekin inn sem strengur með kommu og bili (, ) milli áhugamála og er þeim streng skipt upp í fylki strengja áður en þau eru send til Firebase.
Í src/environments/ má finna stillingar sem notaðar eru þegar Amigo er build-að. environment.ts lýsir þróunarumhverfi og environment.prod.ts production umhverfi. Eins og er er eini munurinn á þessum skrám Firebase stillingarnar. Hægt er að breyta þeim til að þær eigi við það Firebase project sem maður sjálfur er með (viðeigandi stillingar má finna í Firebase Console).
Fyrst þarf að setja upp alla nauðsynlega pakka með npm install.
Til að build-a Amigo er notuð skipunin ng build (ng build --prod fyrir production build). Nauðsynlegt er að nota Firebase Hosting og Cloud Firestore svo hægt sé að virkja Cloud Functions.
Til að setja Amigo upp þarf að setja upp firebase-tools pakkann með npm install -g firebase-tools. Síðan þarf að færa working directory inn í functions/ möppuna með cd functions og síðan keyra skipunina firebase deploy.
Í okkar production-umhverfi heimila öryggisreglur Cloud Firestore í users-safninu notendum aðeins að uppfæra skjöl sem eiga ID sem passar við UID (notendaauðkenni) þeirra. Þær eru svohljóðandi:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{user} {
allow read;
// Only allow user to write to their own document
allow write: if request.auth.uid == user;
}
}
}Hægt er að prófa Amigo á slóðinni https://amigo-c73c8.firebaseapp.com. Vefurinn krefst innskráningar með Google-reikningi og ber að nefna að það getur tekið nokkrar sekúndur fyrir prófíl að verða til hjá nýjum notendum.
- Angular Docs
- Angular Material Components
- Internetið endilangt, mikið á StackOverflow
Fyrstu vikurnar í verkefninu fóru nær einungis í að láta okkur detta eitthvað í hug sem okkur þætti sniðugt og raunhæft að vinna að. Þegar hugmyndin að Amigo var komin þurftum við að velja framework og gerðum það með hjálp Gunnars kennara og Smára í Vefskólanum, sem heimsótti okkur í tímann. Að því loknu fórum við að huga að útfærsluatriðum, hvernig framsetningin og virknin ætti að vera í megindráttum. Þegar grunnurinn að því var kominn byrjuðum við að lesa okkur til um Angular og prófa það. Síðan byrjuðum við að vinna í verkefninu sjálfu og lærðum í raun grunnatriði Angular á meðan við vorum að því (eftir þörfum). Við byrjuðum hægt og það tók töluverðan tíma að gera allt sökum þess að við höfðum aldrei notað Angular eða í raun neitt framendaframework áður. Smám saman fór þetta þó allt að koma saman og verða að einhverri heild og að lokum tókst okkur að fá inn algjöra grunnvirkni Amigo (vantaði þó margt upp á). Það væri góður grunnur ef við ákveddum að halda áfram með verkefnið.
Lokaafurðina teljum við nokkuð góða, sérstaklega í ljósi þess að við vorum að vinna með kerfi sem við höfum aldrei snert á áður og höfðum aðeins tæplega fjóra mánuði til að ákveða hvað við vildum gera, ákveða tæknina, læra á hana og framkvæma allt saman. Það er margt óklárað og sumt mætti betur fara en þó er ákveðin heildstæðni í vefnum í núverandi ástandi.
Eitt af grundvallaratriðum Amigo er Like-takkinn á prófílunum. Hann er það sem í raun hefði gefið Amigo notagildi. Hins vegar gafst ekki tími til að forrita virkni fyrir þennan takka. Hann hefði þurft að tengjast gagnagrunni og við hefðum þurft að halda utan um það á einhvern hátt hvaða notendum öllum notendum líkaði við. Hins vegar var önnur grunnvirkni sem skipti meira máli að klára, þar sem þessi hluti hafði í raun ekki beinlínis áhrif á neitt annað sem við gerðum, fyrir utan framsetningu prófílanna á forsíðunni.
Vinalistinn var eitt af því sem byrjað var á en hann var ekki kláraður. Hann er í hliðarvalmyndinni og sýnir alla vini notandans, flokkaða eftir því hvort þeir séu inni á Amigo eða ekki (online eða offline). Hann er sýnilegur á síðunni í núverandi standi en upplýsingarnar eru harðkóðaðar og breytast ekkert milli notenda. Við náðum ekki að byrja á vinakerfinu fyrir utan þennan lista.
Board-síðan var hluti af upprunalegu hugmyndinni fyrir Amigo. Þar átti að vera hægt að auglýsa verkefni og taka við umsóknum frá fólki um að taka þátt í þeim. Birkir vann að þessari síðu og var framendavirkni hennar langt komin þegar. Ekki var búið að setja upp gagnagrunnstengingu. Þegar við hnýttum síðan lausa enda í lok annar og færðum allt inn á develop-greinina til þess að búa til release urðum við að sleppa board-síðunni þar sem hún olli vandræðum þegar hún var sameinuð öllu hinu (merge conflict). Við náðum ekki að leysa það á þeim stutta tíma sem við höfðum og ákváðum því að láta hana liggja milli hluta að sinni.
Hugmynd var um að bjóða upp á einkaspjall milli notenda sem báðir smelltu á Like hvor við annan. Við byrjuðum aldrei á því enda fannst okkur mikilvægara að vinna að öðrum hlutum. Til bráðabirgða hefði verið hægt að gefa notendum sem líkaði hvorn við annan aðgang að netfangi eða notandanafni á Facebook, Twitter, Instagram, Skype, Discord eða öðrum samskiptamiðlum.
Það er galli sem við vitum af sem lýsir sér þannig að prófílarnir hlaðast aðeins inn þegar forsíðan er fyrst skoðuð (ef notandi sækir forsíðuna fyrst). Ef notandi fer af forsíðu á aðra síðu og fer síðan til baka sjást engir prófílar. Eina leiðin til að fá þá aftur á skjáinn er að endurhlaða síðunni (á forsíðunni sjálfri). Þetta vandamál kom upp á meðan við vorum að vinna að forsíðunni en var aðeins tímabundið. Það tók sig síðan upp aftur þegar allar feature/ greinarnar sem eftir voru voru sameinaðar í lok annar.
Það hefði verið eðlilegt að láta notendur sem nýskrá sig skrá upplýsingar um sig áður en þeir fengju að nota Amigo. Við ákváðum að eyða ekki tíma í það að þessu sinni þar sem það er ekki nauðsynlegt til að vefurinn virki. Þess í stað er gert ráð fyrir að notendur fari rakleiðis í stillingarnar og breyti sínum upplýsingum. Það þarf m.a. að gera til að hægt sé að para notandanum saman við aðra notendur á grundvelli áhugamála.
Í footernum á síðunni eru tveir tenglar; Contact us og Terms of Service. Contact us bendir á Twitter-reikning Amigo sem Victor bjó til en Terms of Service bendir ekki á neitt. Við hefðum getað búið til form til að hafa samband og skilmála en þar sem það var ekki nauðsynlegur hluti af Amigo slepptum við því.
Reynir Aron, Victor Wahid, Birkir Arndal
VEFÞ2VÞ05DU - Gunnar Þórunnarson
Tölvubraut - Tækniskólinn