UI:Kodutöö 4 (2019)

Kolmanda kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö käigus staatiline HTML prototüüp. Kolmanda praktikumitöö käigus muudeti staatiline prototüüp dünaamiliseks ja seoti väliste (staatiliste) andme-API-dega.

Töö peab esitamiseks olema paigutatud Dijkstra serverisse aadressile http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax3/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suured/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka.

Neljandaks praktikumitöö põhisisuks on andmete visualiseerimine ja ülesandest on võimalik valida kahe variandi vahel:

1. Tooteomaniku dashboardi ehitamine.
2. Teenuse animeeritud landingpage ehitamine.

Teenuseomaniku Dashboard

Teenuseomaniku dashboardi ehitamise eesmärk on minna teenuseomaniku rolli ja esitada ülevaatlikult teenuse peamised tulemuslikkuse võtmenäitajad (KPI-d)

Nõuded

1. Dashboard avaneb uuel lehel , nt http://dijkstra.cs.ttu.ee/~Eesnimi.Perenimi/kasutajaliidesed/prax4/dashboard ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ei ole.
2. Esitatud peab olema minimaalselt 3 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena
3. Graafikute kuvamiseks peab kasutama mõnda välist teeki nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) või mõnda muud vabalt valitud teeki. Kõigil siin punktis nimetatud graafikurakendustel on ka versoonid Vue-s otse kasutamiseks
4. Graafikud on dünaamilised, s.t andmed loetakse staatilistest JSON failidest.
5. Leht peab olema valideeruv

Abimaterjale ja viiteid:

• KPI-de kohta, mis see on: <https://leanway.ee/blogi/kpi-mis-asi-see-veel-on> ja <https://www.geckoboard.com/blog/defining-kpis-how-to-choose-metrics-that-inspire-action/>
• 5 Principles of Good Dashboard Design: <https://www.netsolutions.com/insights/good-dashboard-design-principles/>
• Build a Visual Dashboard in 10 Steps: <https://www.isixsigma.com/tools-templates/metrics/build-a-visual-dashboard-in-10-steps/>

SVG Animatsioonid

Animatsioonide eesmärgiks on pakkuda teenuse ostjale/kasutajale ootamatusmoment ja teha loodud teenus elavamaks ja visuaalselt atraktiivsemaks.

Inspiratsiooniks: https://swissincss.com/ või https://beesandbombs.tumblr.com/ või https://dux.ee/ :)

Abimaterjale ja viiteid:

• How I stopped worrying and learned to animate SVG: https://medium.com/@aniboaz/animate-svg-4fa7dd00e860
• Blobs! https://css-tricks.com/blobs/