Tämä tehtävä sisältää sekä frontendin että backendin toteutusta. Tee React-osuudet frontend-kansioon, käytä haluamiasi alikansioita. Tee Node-osuudet backend-kansioon, käytä haluamiasi alikansioita. Frontendin muotoiluun voit käyttää joko React-Bootstrapia tai Material-UI-kirjastoa HUOM! Muut UI-kirjastot eivät kelpaa!
Jokainen tehtävä on 3p => 20*3p = 60p.
Harjoituksen sisältö: Tee MERN-stackilla fullstack-sovellus
TREENIPÄIVÄKIRJA, jolla voit selata painoilla tehtäviä treenejä. Oheisissa kuvissa on hahmoteltu sovelluksen näyttöjä, mutta tee siitä oman näköisesi.
Tietokantaan talletetaan käyttäjistä siis etunimi, sukunimi, sähköpostiosoite, salasana, onko ammattilainen. Yksittäisen käyttäjän treeneistä talletaan pvm, treenilaji, suorituskerrat, suorituspaino. Voit itse päättää millaisina dokumentteina ja collectioneina nämä talletetaan.
Harrastajasivuille tarvitsee summata yhteen harrastajien treeneistä tiedot seuraavasti: pvm, ko. päivänä kaikkien harrastajien tekemien suorituskertojen summa, kaikkien ko. päivänä mitä tahansa suoritusta tehneiden harrastajien lukumäärä. Samalla tavoin ammattilaissivua varten lasketaan vastaavat tiedot koskien ammattilaisia. Näitä harrastaja- tai ammattilaissivujen tietoja ei tarvitse tallettaa kantaan, vaan ne voidaan laskea tekemällä kantaan sopivat haut kyseisiä tietoja näytettäessä.
Sovelluksessa on seuraavat sivut: "Etusivu", "Harrastajien tulokset", "Ammattilaisten tulokset", "Omat treenit".
Pääsivulla on sovelluksen nimi TREENIPÄIVÄKIRJA, taustakuva sekä valikkopalkki, jossa navigoinnit em. sivuille. Lisäksi kirjautumattomalle käyttäjälle näytetään valinta "Kirjaudu". Jos käyttäjä on kirjautunut, näytetään hänen etunimensä.
Kyseisestä toiminnosta avautuu modaalinen dialogi, jossa voi syöttää kirjautumista varten sähköpostiosoitteensa ja salasanansa. Jos käyttäjä on kirjautunut, niin näytetään "Kirjaudu"-valinnan tilalla valinta "Kirjaudu ulos".
Toteuta backendiin endpoint "user/login", joka ottaa vastaan POST-toimintoja tarvittavat käyttäjätiedot kirjautumista varten. Koodi tarkistaa kannasta, että kyseinen käyttäjä löytyy.
Edellinen toteutus siten, että kirjautumisessa palautetaan token, jolla käyttäjä voidaan tunnistaa ja tarkistaa hänen oikeutensa eri palveluihin. Tokeniin on hyvä tallettaa esim. käyttäjän id ja hänen roolinsa eli onko ammattilainen.
Kirjautumattomalle käyttäjälle annetaan myös mahdollisuus rekisteröityä. Rekisteröitymistä varten kirjautumisdialogissa on painike "Rekisteröidy", joka avaa joko uuden dialogin tai antaa kirjautumisdialogille lisäkenttiä. Rekisteröinnin yhteydessä kysytään etunimi, sukunimi, sähköpostiosoite, salasana sekä ruksattava tieto onko ammattilainen. Jos rekisteröityjä ei ruksi ko. kohtaa, hän on silloin harrastelija. Tiedot viedään tietokantaan. Rekisteröitymistä varten on endpoint "user/register".
Toteuta frontendissa reititys ja navigointivalintojen näyttäminen siten, että kaikki käyttäjät, myös kirjautumattomat voivat nähdä pääsivun sekä harrastajien tulokset. Kirjautuneet ammattilaiset voivat nähdä lisäksi myös ammattilaisten tulokset. "Omat tulokset"-sivu sekä sen navigointivalinta näytetään vain kirjautuneille (voi olla harrastelija tai ammattilainen), eikä sinne saa päästä esim. urlia käsin kirjoittamalla. Samalla tavoin myös muille sivuille pitää estää pääsy muilta kuin luvallisilta käyttäjiltä. Oikeudet voidaan toteuttaa kovakoodattuina eli ne eivät tarvitse olla kannasta luetun käyttäjätiedon mukaan määrättyjä.
Frontendin reititys siten, että käyttäjän kirjautumistiedot on talletettu palvelimelta onnistuneen kirjautumisen myötä saatuna tokenina + etunimenä + roolina kontekstiin (useContext esim.) ja oikeuksien tarkistus navigoinnissa sekä etunimen näyttö "Omat treenit"-sivulla tehdään sitä käyttäen.
Harrastajat-sivulla näytetään harrastajien tulokset päivittäin yhteenlaskettuina. Tieto näytetään taulukkomaisesti, sarakkeet: Pvm, suoritukset yhteensä, suorittajalkm. Hakua varten backendissä endpoint "result/amateurs".
Ammattilaiset-sivulla näytetään ammattilaisten tulokset päivittäin yhteenlaskettuina. Tieto näytetään taulukkomaisesti, sarakkeet: Pvm, suoritukset yhteensä, suorittajalkm. Hakua varten backendissä endpoint "result/professionals".
10. "Omat treenit"-sivu, tietojen näyttö taulukkomaisesti, tieto haettu kannasta, käyttäjä kovakoodattu
Sivulla näytetään taulukkomaisesti yhden käyttäjän treenit. Sarakkeet: Pvm, Laji, Suorituskerrat, Paino. Hakua varten tehdään backendiin endpoint "result/". Tunniste voi olla kovakoodattu.
Omat treenit voi nähdä vain kirjautunut käyttäjä ja hän näkee siellä vain omat tuloksensa, ei muiden. Tämä perustuu siihen, että sisäänkirjautuneella käyttäjällä on tallessa token, jossa on sisällä käyttäjätunniste. Kun hän hakee henkilökohtaisia tuloksia, backend katsoo vastaako pyynnön mukana tulevassa tokenissa oleva tunniste pyynnön endpointin tunnistetta.
"Omat treenit"-sivulla käyttäjä voi muokata omia suorituksiaan. Backendissä on muokkausta varten endpoint "result/". Tunniste voi olla kovakoodattu.
Muokkauspyynnön mukana tulee token, josta backend tarkastaa, onko käyttäjällä oikeus ko. tietojen muokkaamiseen.
"Omat treenit"-sivulla käyttäjä voi poistaa omia suorituksiaan. Backendissä on poistoa varten endpoint "result/". Tunniste voi olla kovakoodattu.
Poistopyynnön mukana tulee token, josta backend tarkastaa, onko käyttäjällä oikeus ko. tietojen poistoon.
"Omat treenit"-sivulla on painike, josta käyttäjälle avautuu joko samalle sivulle tai dialogiin tms. kentät, joiden avulla käyttäjä voi lisätä omia treenisuorituksiaan. Backendissä on lisäystä varten endpoint "result/". Tunniste voi olla kovakoodattu.
Muokkauspyynnön mukana tulee token, josta backend tarkastaa, onko käyttäjällä oikeus tietojen lisäämiseen. Vain kirjautuneet käyttäjät saavat lisätä treenitietoja, tässä ei tarvitse välttämättä tutkia tokenin sisältöä, ainoastaan se onko token validi.
Frontendissä on käytetty joko React-Bootstrapia tai Material-UI-kirjastoa tarkoituksenmukaisilla tavoilla ja ulkoasu on siisti ja yhtenäinen. HUOM! Vain jompikumpi näistä kirjastoista kelpaa!!
Backendissä täytyy käsitellä kaikki mahdolliset virhetilanteet ja lähettää niistä sopiva koodi ja ilmoitus.
Frontendissä täytyy käsitellä backendin lähettämät ilmoitukset ja viestittää niistä käyttäjälle yhdenmukaisella tavalla käyttäen UI-kirjaston dialogia.