Meeskond: Travo

From EIK wiki
Travo disain 10. detsember 2015

Travo

Rakendus on kättesaadav lehel Travo.im

Lähtekood on kättesaadaval Githubis: Travo-ASP.NET

Tiim

  • Tarvo R. - Projektijuht, kokk-kondiiter-keevitaja

Kirjeldus

Travo on veebirakendus, mis liidab kokku Toggli ja Trello võimekused. Täpsemalt pakub Travo läbi lihtsa kasutajaliidese võimalust luua to-do ülesandeid ning jälgida ülesannete tegemisele kulunud aega.

Üldine spetsifikatsioon

  • Kasutaja saab luua to-do ülesandeid
  • To-do ülesandeid saab liigendada märksõnadega (tagide) abil
  • Märksõnad loob kasutaja ise
  • Kasutaja saab jälgida ülesannete tegemisele kulunud aega
    • Ajajälgimise alustamine toimub 'START' nuppu vajutamisega
    • Vastav nupp on olemas nii pealehel ribana, kui ka iga to-do kastikese detailvaates
    • To-do kastikesel oleva start nupu vajutamine seob automaatselt jälgitava aja antud ülesandega
    • Ilma kirjelduseta jälgitud aeg läheb logisse ilma tagita ja tekstiga 'no description', kasutaja saab seda hiljem muuta
  • Kasutaja ajajälgimised kajastuvad logis
  • Kasutaja näeb enda statistikat

Must have

  • Konto haldus (registreerimine, sisselogimine) +
  • To-do ülesannete haldamine (loomine, muutmine, kustutamine)
  • Ülesannete jaotamine märksõnadega (tags) +
  • Märksõnade haldus (kasutaja saab nimesid ja värve muuta ning märksõnu kustutada)
  • Aja jälgimine (ülesannetepõhine ja ilma)

Nice to have

  • Detailne aja jälgimise statistika

Arendus

Tehnoloogiad

  • ASP.NET5 (RC1-final)
  • ASP.NET MVC 6
  • Entity Framework 7
  • AngularJS (1.4.7)
  • Angular Material (0.11.3)
  • Grunt (0.4.5)
    • Uglify, Watch, CSSMin

Tööriistad

  • Microsoft Visual Studio 2015
  • Microsoft SQL Server Management Studio 2014
  • Atom (Lihtsam tekstiredaktor HTML-is ja CSS-is disaini loomiseks)
  • UniServer (Apache server algse disaini loomiseks)

Kasutatud ressursid

Arendusprotsess

  • 21.09.2015 - Idee
  • 04.10.2015 - Esialgne veebidisain
  • 17.10.2015 - Wiki lehe loomine
  • 25.10.2015 - Esimene töötav backend (ASP.NET, EF7)
  • 15.11.2015 - Üleminek MaterializeCSS pealt Material Design Lite-le (täielik front-end ümbertegemine)
  • 16.11.2015 - Esimene front-end funktsionaalsus AngularJS baasil
  • 19.11.2015 - Üleminek Material Design Lite pealt Angular Material-ile
  • 24.11.2015 - Todo taskide detailvaated, lisamine ja kustutamine
  • 28.11.2015 - Töötav kontohaldus: registreerimine ja sisselogimine
  • 13.12.2015 - Töötav aja jälgimine (ainult tekstilise kirjelduse põhine).
  • 30.12.2015 - Töötav ülesannetepõhine aja jälgimine.
  • 15.01.2016 - Uus disanilahendus Todoist-i eeskujul, töötav märksõnahaldus (lisamine, kustutamine), töötav nimekirja vaade.
  • 17.01.2016 - Esilehe uus disain, CVI paigas, töötav ülesannete tehtuks märkimine.

Featurite to-do list (täitmisjärjekorras)

  • Ajatsoonid tsentraliseerida (kõik panna UTC-le põhinevaks ning hiljem kasutajale kuvades ümberkonverteerida)
  • Statistika vaate inimesele loetavaks teha (kuid mitte liiga palju rõhku sellele veel panna)

Disainiprotsess

Landing page

Travo


Lõpptoode

Rakendus

Rakendus on kättesaadav veebilehel Travo.im

Lähtekood on kättesaadav hetkel vaid õppejõule, läbi TFS-i.

Arendusprotsessi kirjeldus

Travo idee sai algse kuju juba septembri keskel, kuid projekt hakkas kompileeruma alles oktoobri lõpupoole. Suureks raskuseks osutus .NET raamistik ning eelkõige lihtne asjaolu, et arenduses otsustati kasutada abiraamistikke ja teeke, mis olid alles beta staadiumis ning veel adekvaatselt dokumenteerimata. Nimelt käib jutt ASP.NET 5, MVC 6 ja Entity Framework 7 betadest. Peale üle ühe kuu kestnud uurimistööd ja katsetusi valmis backendi struktuur ja konfiguratsioon, mis jäigi kasutusele. Sellele funktsionaalsuse lisamine oli ülimalt lihtne ning järgmiseks takistavaks teguriks sai projekti teine pool: frontend.

Disainilahenduse väljatöötamine võttis kohutavalt palju aega. Kindlalt isegi kauem kui läks backendi struktuuri väljatöötamisega. Kõige valem otsus mis sai langetatud ning osutus ajaplaneerimisel valusaks tagasilöögiks oli prototüüpide tegemise eelistamine lihtsale planeerimisele ja funktsionaalsuse läbimõtlemisele. Peale mitmete ja mitmete prototüüpide loomise järel jõudsin alles rahuldava frontend lahenduseni, mis oli edasiarendamist väärt.

Frontendi kasutamises sai katsetatud mitmete CSS/JS raamistikega, mida põimiti AngularJS teegiga. Kõige esimesena sai ette võetud MaterializeCSS, kuid see langes päris ruttu oma aegluse tõttu mängust välja. Järgmisena sai katsetatud kiire ning kergekaalulise Material Design Lite teegiga, mille puhul jäi kahjuks funktsionaalsusest puudu. Kolmas valik, Angular Material, osutus aga kindlalt õigeks valikuks, kuna sellel on eelnevalt nimetatud teekidest kõige rohkem funktsionaalsust ning on loodud põimuma AngularJS-iga.

Frontendi ajuks on valitud AngularJS, mille abil on tehtud rakendus single page applicationiks ehk SPA-ks. Kasutajaliidesesse laetakse andmed läbi API endpointide, mis töötavad eelpool mainitud beta tehnoloogiate abil.

Rühmaliikmete panus

Tarvo Reinpalu, 140%.

Kasutusjuhend

Veebirakenduse avamisel jõuab kasutaja kõigepealt maandumislehele (landing pageile), kus kuvatakse lühikirjeldus rakendusest ning kasutaja saab sisse logida või ka registreerida, juhul kui neil juba kontot ei ole.

Peale sisselogimist saab kasutaja rakendust reaalselt kasutama hakata. Projekti esitamise hetkeks saab kasutaja teha süsteemis järgmist:

  • Luua märksõnu
  • Luua märksõnade alla ülesandeid
  • Näha enda ülesandeid kolmes erinevas vaates: tulev nädal, kõik ülesanded, tahvel
  • Ülesannetele kulunud aega jälgida
  • Ülesandeid hallata (märkida tehtud, kustutada)
  • Näha statistikat tekstipõhises vaates, ilma igasuguse analüüsita
  • Nautida ilusat disaini

Kõik funktsionaalsused on intuitsiooniga kättesaadavad. Küll aga on vajalik, et kasutaja teaks milleks rakendust kasutatakse: enda produktiivsuse jälgimiseks. Kõige soovitatavam on aga eelnev kogemus Trello, Todoisti või Toggli rakendustega. Sellisel juhul on transitsioon Travosse äärmiselt sujuv.