React: Frontend-kehitys Vite: kehitysympäristö Express.js: Backendin reititys SQLite: Tietokanta, joka tallentaa käyttäjätiedot, harjoitukset ja sarjat Material-UI: Käyttöliittymän komponentit (navigointi, painikkeet, lomakkeet)
Tämä sovellus käyttää SQLite-tietokantaa käyttäjä-, harjoitus- ja sarjatietojen tallentamiseen. Tietokanta on tallennettu paikallisesti tiedostoon database.db, joka sijaitsee backend-kansiossa. Backend/index.js sisältää Node.js-palvelimen, joka käyttää Express-sovelluskehystä. Tämä tiedosto vastaa sovelluksen palvelinpuolen logiikasta, reitityksestä ja tietokantatoiminnoista. Se mahdollistaa SQLite-tietokannan käytön, tarjoaa REST API -päätepisteet ja hallitsee tiedonsiirtoa.
Taulut
- users (Käyttäjätiedot) Tämä taulu sisältää sovelluksen käyttäjän perusprofiilitiedot. Taulussa on aina vain yksi käyttäjä, ja sovellus sallii yhden käyttäjän tietojen päivittämisen. Sarake Tietotyyppi Kuvaus:
id INTEGER (PK) Yksilöllinen käyttäjän tunniste (automaattisesti lisätty) name TEXT Käyttäjän nimi height INTEGER Käyttäjän pituus (cm) weight INTEGER Käyttäjän paino (kg) birthdate DATE Käyttäjän syntymäaika gender TEXT Käyttäjän sukupuoli
- exercises (Harjoitukset) Tämä taulu sisältää harjoitustiedot. Jokainen harjoitus voi sisältää useita sarjoja (sets). Harjoitus liittyy päivämäärään ja kategoriaan (esim. rinta, jalat, ylävartalo jne.). Sarake Tietotyyppi Kuvaus:
id INTEGER (PK) Yksilöllinen harjoituksen tunniste (automaattisesti lisätty) date TEXT Harjoituksen päivämäärä (muoto YYYY-MM-DD) category TEXT Harjoituksen kategoria (esim. "Jalat", "Ylävartalo") exerciseName TEXT Harjoituksen nimi (esim. "Kyykky", "Penkkipunnerrus")
- sets (Sarjat) Tämä taulu sisältää kaikki yksittäiset sarjat, jotka liittyvät exercises-tauluun. Jokaisella sarjalla on tietoa siitä, mihin harjoitukseen se kuuluu (exerciseId), sekä sen paino ja toistot. Sarake Tietotyyppi Kuvaus:
id INTEGER (PK) Yksilöllinen sarjan tunniste (automaattisesti lisätty) exerciseId INTEGER (FK) Viittaus harjoituksen id-kenttään (vierasavain) weight INTEGER Käytetyt painot (kg) reps INTEGER Toistojen määrä
Navigointipalkki (AppBar)
Käyttäjälle näytetään AppBar, joka sisältää sovelluksen otsikon ja navigointivälilehdet.
Navigointivalikossa on seuraavat välilehdet:
Add Exercise: Ohjaa harjoituksen lisäyssivulle.
Exercise Log: Ohjaa harjoituspäiväkirjaan.
User Info: Ohjaa käyttäjätietojen hallintasivulle.
Exercise Data: Ohjaa harjoitustietojen analysointisivulle.
Navigoinnin hallinta
React Routerin avulla käyttäjä voi siirtyä eri sivujen välillä ilman sivun uudelleenlatausta.
Aktiivinen välilehti on korostettu, ja valittu välilehti muuttuu automaattisesti URL-polun perusteella.
Responsiivinen käyttöliittymä
Käyttöliittymä käyttää Material-UI (MUI)-komponentteja, jotka sopeutuvat automaattisesti eri laitteille.
AppBar ja Tabs mahdollistavat yksinkertaisen ja tyylikkään navigoinnin myös mobiililaitteilla.
Reititys ja näkymien renderöinti
Komponentti hyödyntää React Routerin Outlet-komponenttia, joka mahdollistaa sisäisten näkymien lataamisen päärungon sisällä.
Sovelluksen kaikki päänäkymät (Add Exercise, Exercise Log, User Info ja Exercise Data) ladataan Outlet-komponentin kautta.
Harjoitusten lisääminen
Käyttäjä voi lisätä useita harjoituksia yhdellä kertaa.
Jokaiselle harjoitukselle voi määrittää kategorian, nimen ja sarjat (paino ja toistot).
Sarjojen hallinta
Käyttäjä voi lisätä ja poistaa sarjoja (setit) yksittäisistä harjoituksista.
Sarjalle voi syöttää painon ja toistojen määrän.
Päivämäärän valinta
Käyttäjä voi valita päivämäärän, johon harjoitukset tallennetaan.
Käytössä on DatePicker-komponentti päivämäärän valitsemiseen.
Validointi ja käyttäjäpalaute
Jos käyttäjä yrittää tallentaa harjoituksen ilman kaikkia vaadittuja tietoja, sovellus ilmoittaa puuttuvista tiedoista.
Ilmoitukset näkyvät Snackbar-komponentissa, ja käyttäjä näkee virheet selkeällä tekstillä.
Tietojen lähetys
Kun käyttäjä painaa Save Exercises, kaikki harjoitukset lähetetään palvelimelle (API) POST-pyynnöllä.
Onnistuneen tallennuksen jälkeen käyttäjä saa ilmoituksen onnistumisesta.
Harjoituspäiväkirjan näyttäminen
Harjoitukset ryhmitellään päivämäärän mukaan.
Jokaiselle päivämäärälle näytetään luettelo harjoituksista ja niiden sarjoista.
Tiedot haetaan palvelimelta (API-pyynnöllä) ja näytetään taulukkona.
Harjoitukset ja niiden sarjat on mahdollista selata pystysuunnassa vierittämällä.
Näytedatan generointi
Käyttäjä voi luoda näytedataa, joka sisältää 9 harjoitusta (3 päivälle, 3 harjoitusta per päivä, 3 sarjaa per harjoitus).
Toiminto käyttää painikkeen painalluksen jälkeen vahvistusikkunaa (Dialog).
Data lähetetään palvelimelle POST-pyynnöillä, ja käyttöliittymä päivittyy automaattisesti.
Harjoituksen poistaminen
Käyttäjä voi poistaa yksittäisiä harjoituksia painamalla roskakorikuvaketta.
Käyttäjältä pyydetään vahvistus ennen poistamista.
Kun harjoitus on poistettu, se poistetaan myös käyttöliittymästä.
Palaute käyttäjälle
Toiminnot (esim. poistaminen, näytedatan luominen) antavat palautetta käyttäjälle ilmoituspalkin (Snackbar) avulla.
Käyttäjälle kerrotaan, onnistuiko vai epäonnistuiko toiminto (onnistuminen: vihreä, epäonnistuminen: punainen).
Käyttäjätietojen näyttäminen ja muokkaaminen
Käyttäjätiedot näytetään käyttöliittymässä lomakkeena, mutta kentät ovat aluksi vain luku -tilassa.
Käyttäjä voi siirtyä muokkaustilaan painamalla Edit-painiketta, jolloin kentät avautuvat muokattavaksi.
Käyttäjä voi tallentaa tai peruuttaa muutokset painikkeilla.
Tiedon validointi
Lomake vaatii, että kaikki kentät on täytetty ennen tallennusta.
Pituuden ja painon tulee olla positiivisia numeroita.
Syntymäaika tarkistetaan DatePicker-komponentilla, jotta päivämäärä on oikeassa muodossa.
Tietojen tallentaminen
Käyttäjä voi tallentaa uudet tai muokatut tiedot palvelimelle.
Jos käyttäjätietoja ei ole olemassa, luodaan uusi käyttäjä.
Jos tiedot ovat jo olemassa, ne päivitetään.
Ennen tietojen tallennusta käyttäjältä pyydetään vahvistus.
Ilmoitukset ja lataustilat
Ilmoitukset näkyvät käyttöliittymässä Snackbarin avulla, joka kertoo käyttäjälle, onko tiedot tallennettu, onko virheitä tapahtunut tai puuttuuko kentistä tietoja.
Lataustila näytetään CircularProgress-kuvakkeella, kunnes käyttäjätiedot on ladattu.
Harjoitustietojen näyttäminen ja valinta
Käyttäjä voi valita harjoituskategorian, harjoituksen nimen ja päivämäärän.
Näytetään valitun harjoituksen tiedot (1RM, suhteellinen voima, treenipäivämäärät).
One Rep Max (1RM) ja Suhteellinen Voima
Näytetään valitun harjoituksen 1RM (maksimaalinen yhden toiston suorituskyky) ja suhteellinen voima (1RM / kehonpaino).
Näiden tietojen avulla käyttäjä voi seurata suorituskyvyn kehittymistä.
Graafit ja kaaviot
Line Chart: Näyttää valitun harjoituksen 1RM-kehityksen ajan kuluessa.
Pie Chart: Näyttää treenijakauman kategorioittain valitulle kuukaudelle.
Harjoitusten valinta ja suodatus
Käyttäjä voi suodattaa harjoituksia kategorian, harjoitusnimen ja päivämäärän perusteella.
Harjoituksia ladataan palvelimelta ja ne ryhmitellään kategorioittain.
Ilmoitukset ja virheenkäsittely
Käyttäjä saa visuaalisen ilmoituksen (Snackbar), jos tietojen lataaminen, laskeminen tai muu toiminto epäonnistuu.
Virheistä ilmoitetaan selkeillä virheilmoituksilla.
Täysruututila
Käyttäjä voi tarkastella Line Chart -kaaviota täysruututilassa.