http://courses.cs.taltech.ee/w/index.php?action=history&feed=atom&title=ITI0209_kevad_2024_3._kodut%C3%B6%C3%B6_kirjeldusITI0209 kevad 2024 3. kodutöö kirjeldus - Redigeerimiste ajalugu2026-04-30T09:49:31ZSelle lehekülje redigeerimiste ajaluguMediaWiki 1.35.9http://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2024_3._kodut%C3%B6%C3%B6_kirjeldus&diff=11435&oldid=prevVerrev – 19. mai 2024, kell 21:492024-05-19T21:49:18Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 19. mai 2024, kell 21:49</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >5. rida:</td>
<td colspan="2" class="diff-lineno">5. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav lehelt <code>dashboard.html</code> või <code>dashboard</code> (Reacti või Vue-d kasutatavate projektide puhul). Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2024 kaustas "dashboard".</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav lehelt <code>dashboard.html</code> või <code>dashboard</code> (Reacti või Vue-d kasutatavate projektide puhul). Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2024 kaustas "dashboard".</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><!--</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Töö esitamine'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Töö esitamine'''</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=381087 <del class="diffchange diffchange-inline">Esita see kaitsmispäeva hommikul vähemalt tund aega enne kaitsmiste algust.</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=381087</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">--></del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>Verrevhttp://courses.cs.taltech.ee/w/index.php?title=ITI0209_kevad_2024_3._kodut%C3%B6%C3%B6_kirjeldus&diff=11421&oldid=prevVerrev: Uus lehekülg: 'Teise kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö...'2024-05-01T21:58:35Z<p>Uus lehekülg: 'Teise kodutöö käigus sai teie poolt loodud teenus "valmis". Esimese praktikumitöö käigus loodud valideeritud ja kasutajal testitud protoüübist loodi teise praktikumitöö...'</p>
<p><b>Uus lehekülg</b></p><div>Teise 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 mis on veebist kättesaadav.<br />
<br />
Kolmanda praktikumitöö põhisisuks on andmete visualiseerimine. Dashboardi ehitamisel võid kasutada varasemate praktikumitööde käigus valminud stiile, komponente, HTMLi jne, aga see võib olla olemasolevast rakendusest täiesti eraldi, oluline on, et see oleks Dijkstra serverist õigelt aadressilt kättesaadav.<br />
<br />
Töö peab esitamiseks olema sarnaselt 2. iseseisva tööga paigutatud Turingu serverisse, kus olemasolevale prototüübile on vaja juurde lisada dasboard. Dashboard peab olema kättesaadav lehelt <code>dashboard.html</code> või <code>dashboard</code> (Reacti või Vue-d kasutatavate projektide puhul). Lisaks sellele peab olema lähtekood TTÜ Gitlabis projekti ITI0209_2024 kaustas "dashboard".<br />
<br />
<!--<br />
'''Töö esitamine'''<br />
Sarnaselt eelmiste iseseisvate töödega esita viited sellele Moodles: https://moodle.taltech.ee/mod/assign/view.php?id=381087 Esita see kaitsmispäeva hommikul vähemalt tund aega enne kaitsmiste algust.<br />
--><br />
<br />
<br />
'''Mida tuleb teha'''<br />
<br />
* Leia enda teenuse või teenusega seotud valdkonna kohta andmestik. Kasutatud andmeallikad peavad olema viidatud. Viite puhul piisab Piisab kui panna lehele (või eri andmekogude korral iga graafiku juurde eraldi) viide ja URL kust andmed saadi. Ära kasuta Kaggle vms sünteetilisi andmestikke.<br />
* Mõtle välja minimaalselt 4 KPId mida visualiseerida<br />
* Esita need graafikutena dashboardil<br />
* Graafikute puhul kasuta ka animatsioone. Kui kasutad loengud-praktikumis soovitatud graafikuteeke, siis arvesta, et animatsioonid tulevad graafikupaketiga juba kaasa. <br />
<br />
'''Nõuded'''<br />
<br />
# Dashboard avaneb uuel lehel sinu prototüübis ja peab olema vaadatav desktopis. Mobiilivaade siin nõutud ega vajalik ei ole.<br />
# Esitatud peab olema minimaalselt 4 ja maksimaalselt 7 meetrikat, millest vähemalt 3 on esitatud eri tüüpi graafikutena. <br />
# Graafikute kuvamiseks peab kasutama mõnda välist teeki. Loengutes teeme näiteid Echarts'iga (https://echarts.apache.org/), aga lubatud on ka mõne muu vabalt valitud teegi kasutamine nt. Amcharts, Chart.js, Highcharts, D3.js (keeruline, ei soovita) Kõigil siin punktis nimetatud graafikurakendustel on ka versoonid Vue-s ja Reactis otse kasutamiseks<br />
# Graafikud on dünaamilised, s.t kõik esitatud andmed dashboardil loetakse staatilistest välistest failidest. Kõige lihtsam on kui olete need salvestanud JSON kujule ja loete need kasutades Fetch API-t.<br />
# Graafiku tüüp on valitud nii et vastab esitatud andmete iseloomule ja küsimusele millele vastust otsib. Väldi rõngas- ja sõõrikdiagrammide kasutamist! <br />
# Graafikud peavad olema arusaadavad - s.t tõlgendatavad ka ilma legendita. Vt ka osa "Friendly vs Unfriendly" loenguslaididest].<br />
# Graafikul peavad olema kohustuslikud elemendid - pealkiri, telgede nimetused, ühikud, tekstiline selgitus. <br />
# Graafikud peavad olema loetavad ka nägemispuudega, s.h. värvipimeda kasutaja poolt. Seda on kõige lihtsam katsetada kui installeerid brauseriplugina, nt [https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa/related Colorblinding]<br />
# Leht peab olema valideeruv<br />
<br />
'''Vaata lisaks'''<br />
# https://uxdesign.cc/data-visualization-hacks-75d56d5bfa66<br />
<br />
'''Koodinäiteid Echartsi kasutamiseks'''<br />
<br>TBC</div>Verrev