Széktorna napló WEB alkalmazás készítése

Kiindulási elvek:

Egy kifejezetten idősebb korosztálynak szánt, széken végezhető tornára (széktorna) fókuszáló webalkalmazásnak óriási haszna van az egészségmegőrzésben és az életminőség javításában.

A legfontosabb tervezési szempont ennél a célcsoportnál a végletes egyszerűség, a nagyfokú átláthatóság (nagy betűk, kontrasztos színek) és a pozitív megerősítés. Kerülni kell a bonyolult menüket és a túlzottan technikai kifejezéseket.

Íme egy részletes terv a "SzékTorna Napló" (munkacím) webalkalmazás felépítésére és funkcióira.

1. Az Alkalmazás Filozófiája és Célközönsége

Célcsoport: 65+ éves korosztály, esetleg mozgásukban korlátozott fiatalabbak, akiknek a hagyományos torna megerőltető.
Fő cél: Rendszeres, biztonságos testmozgás ösztönzése otthoni környezetben, és a sikerélmény biztosítása a fejlődés nyomon követésével.
Design alapelvek (UI/UX):

Akadálymentesség: Nagy gombok, jól olvasható betűtípusok (minimum 18px), magas kontraszt.
Egyértelműség: Minden gomb felirata legyen magyar és pontosan írja le, mit csinál (pl. "Tovább" helyett "Következő gyakorlat").
Motiváció: Barátságos hangnem, dicséretek a teljesítményért ("Szép munka!", "Ma is tett az egészségéért!").

2. Fő Funkciók Részletezése

A. Gyakorlatok és Gyakorlatsorok (A Tartalom)

Ez az alkalmazás szíve. A tartalomnak szakmailag hitelesnek és biztonságosnak kell lennie.

Gyakorlat Adatbázis:

Minden gyakorlathoz tartozzon:

Világos név (pl. "Karkörzés előre").
Nagyméretű videó vagy animált GIF a helyes kivitelezésről (ez kritikus a biztonság miatt).
Rövid, egyszerű szöveges instrukció és a hatás leírása (pl. "Javítja a váll mozgathatóságát").
Szint (pl. Kezdő, Közepes).

Előre összeállított gyakorlatsorok (Routines):

Az idősek többsége nem akar magának összeállítani sort. Kész "csomagokat" kell kínálni.
Példák:

"Reggeli ébresztő (10 perc)" - Könnyű átmozgatás.
"Váll és nyak lazítása (15 perc)" - Fókuszált terület.
"Erősödjünk a székben! (20 perc)" - Kicsit intenzívebb, esetleg kis súlyzóval/vizespalackkal.

B. Végrehajtás Naplója (A "Lejátszó")

Amikor a felhasználó elindít egy tornát, egy speciális felületre kerül.

A "Torna Lejátszó" felület:

A képernyő 70%-át a videó/animáció foglalja el.
Hatalmas időzítő (visszaszámláló) és ismétlésszám kijelző.
Jól látható "Szünet" és "Következő gyakorlat" gombok.
Opció: Hangeffektek vagy narráció (pl. sípszó a gyakorlat végén, vagy "Most pedig emeljük a jobb lábat").

Visszajelzés a végén:

A torna befejezésekor egy gratuláló képernyő jelenik meg.
Fontos: Egy nagyon egyszerű kérdőív a naplózáshoz: "Hogy érezte magát torna közben?" (Választható: Könnyű volt / Pont jó volt / Nehéz volt / Fájt valamim). Ez segít a fejlődés követésében.

C. Ütemezés (A Naptár)

Nem kell bonyolult Google Calendar integráció. Egy egyszerű, átlátható heti nézet a cél.

Heti tervező: A felhasználó bejelölheti, mely napokon szeretne tornázni és melyik programot. (Pl. Hétfő, Szerda, Péntek: "Reggeli ébresztő").
Emlékeztetők (Opcionális): Ha megadja az email címét, az alkalmazás reggel küldhet egy kedves emlékeztetőt: "Ma van a torna napja! Készítse a székét."

D. Fejlődés Diagramok (A Motiváció)

A fejlődés itt nem az izomtömeg növekedését jelenti, hanem a rendszerességet és a közérzet javulását. A diagramok legyenek nagyon egyszerűek, könnyen értelmezhetőek.

"A hónapom" naptár nézet: Egy egyszerű naptár, ahol zöld pipával vagy csillaggal vannak jelölve azok a napok, amikor tornázott. A cél minél több zöldet látni.
Rendszerességi diagram (Oszlopdiagram): Hány percet tornázott az elmúlt hetekben.
Közérzet trend (Vonaldiagram): A torna utáni visszajelzések alapján (Amit a B. pontban említettünk). Láthatóvá válik, ha idővel egyre könnyebbnek érzi ugyanazt a gyakorlatsort.

3. Alkalmazás Struktúra (Oldaltérkép)

Kezdőlap (Dashboard):

Üdvözlés (Névvel).
"A mai teendő": Ha van ütemezett torna, egy nagy gomb az indításhoz.
Gyors indítás: A legutóbb végzett gyakorlatsor gombja.
Heti összefoglaló: "Ezen a héten már 2 alkalommal tornázott! Csak így tovább!"

Tornák (Gyakorlatsorok listája):

Kártyás elrendezésben a választható programok (kép, cím, időtartam).

Naptáram (Ütemezés):

Egyszerű naptár nézet a tervezéshez és a múltbeli teljesítések megtekintéséhez.

Eredményeim (Fejlődés):

A diagramok és statisztikák helye.

Profil/Beállítások:

Nagyon egyszerű beállítások: Név módosítása, betűméret növelése, kijelentkezés.

4. Technológiai Megvalósítás (Javaslat fejlesztőknek)

Frontend (Amit a felhasználó lát): React.js vagy Vue.js. Ezekkel könnyű interaktív "lejátszót" és dinamikus diagramokat készíteni. A stílusozáshoz Tailwind CSS ajánlott az egyszerű reszponzivitás és akadálymentes design miatt.
Backend (A motor): Node.js (Express) vagy Python (Django/Flask).
Adatbázis: PostgreSQL (felhasználói adatok, naplók tárolására).
Diagramok: Chart.js vagy Recharts (egyszerűen implementálható, szép diagramok).
Hitelezés (Auth): Firebase Auth vagy Auth0 (egyszerűsített bejelentkezés érdekében, pl. Google fiókkal vagy "varázslattal" emailben, hogy ne kelljen jelszavakkal bajlódniuk).

5. Egy felhasználói példa (Marika néni útja)

Marika néni (72) megnyitja az oldalt tableten. A felület nagy betűkkel üdvözli.
A főoldalon látja: "Jó reggelt, Marika! Ma szerda van. Tervezett torna: Váll és nyak lazítása".
Rákattint a hatalmas zöld "Torna Indítása" gombra.
Elindul a videó. Egy szimpatikus gyógytornász mutatja a fejkörzést. Marika néni utánozza a székében ülve.
A 15 perces torna végén az alkalmazás megkérdezi: "Hogy esett a mai mozgás?". Marika néni a mosolygós arcra kattint ("Jól esett, pont jó volt").
Az alkalmazás kiírja: "Gratulálunk! Ma is sokat tett az egészségéért. Találkozunk pénteken!".
Marika néni ránéz az "Eredményeim" fülre, és örömmel látja, hogy ebben a hónapban már 8 zöld pipája van a naptárban.

Módosítás

A PHP és az SQLite kombinációja tökéletes ehhez a projekthez.

Miért jó ez a választás?

Egyszerűség: Az SQLite nem igényel külön adatbázis-szervert (mint a MySQL vagy PostgreSQL), az egész adatbázis egyetlen fájlban van. Könnyű mozgatni, menteni.
Költséghatékony: Szinte bármilyen olcsó tárhelyen elfut.
Jövőbiztos (Apache Cordova): Ez a legfontosabb. Ahhoz, hogy később ebből könnyen mobilapplikáció (Cordova) legyen, nem szabad hagyományos PHP weboldalt építenünk, ahol minden kattintás újratölti az oldalt.

A Stratégia: API-alapú megközelítés

Hogy a későbbi mobilapp simán fusson, ketté kell választanunk az alkalmazást:

Backend (PHP + SQLite): Ez lesz az "agy". Nem gyárt HTML-t, csak adatokat szolgál ki (JSON formátumban). Például: "Add ide a mai tornát!", és a PHP visszaadja az adatokat.
Frontend (HTML + CSS + JavaScript): Ez lesz az "arc". Ez fut majd a böngészőben (és később a mobilon). JavaScripttel kéri el az adatokat a PHP-től, és jeleníti meg a felületen anélkül, hogy az oldal újratöltődne.

KEZDJÜNK BELE: 1. FÁZIS - Alapok és Adatbázis

Először hozzuk létre a könyvtárszerkezetet és az adatbázist.

1. Könyvtárszerkezet

Hozz létre egy mappát a számítógépeden (pl. szektorna_app), és benne a következő almappákat és fájlokat. Ha használsz helyi webszervert (pl. XAMPP, WAMP, MAMP), akkor annak a htdocs vagy www mappájában dolgozz.

/szektorna_app

│

├── /api <-- Ide kerülnek a PHP szkriptek (a backend)

│ └── db.php <-- Az adatbázis kapcsolatért felelős fájl

│

├── /assets <-- Képek, videók, stílusok

│ ├── /css

│ │ └── style.css

│ ├── /js

│ │ └── app.js

│ └── /videos <-- Ide tedd majd a gyakorlatok videóit/gif-jeit

│

├── /db <-- Itt lakik majd az SQLite adatbázis fájl

│

└── index.html <-- A főoldal (a frontend belépési pontja)

2. Az Adatbázis Tervezése (Séma)

Az SQLite-ban létre kell hoznunk a táblákat. Íme a javasolt szerkezet a céljainkhoz:

exercises: A gyakorlatok listája.
routines: A gyakorlatsorok (pl. "Reggeli torna").
routine_items: Kapcsolótábla, ami megmondja, melyik sorban milyen gyakorlatok vannak és milyen sorrendben.
workout_logs: A napló. Ki, mikor, mit tornázott, és hogy érezte magát.

3. Az Adatbázis Létrehozása (PHP segítségével)

Most írjunk egy egyszeri PHP szkriptet, ami létrehozza nekünk az adatbázist és a táblákat.

Lépés 2.1: A Backend API - Tornák listázása

Hozz létre egy új fájlt: api/get_routines.php.

Ez a fájl lesz a "pincérünk". Amikor a frontend kéri, ez a fájl megy oda az adatbázishoz, kiszedi a menüt (a gyakorlatsorokat), és tálalja JSON formátumban.

Lépés 2.3: Stílusozás (CSS) - Fókuszban az idősek

Hozz létre egy fájlt: assets/css/style.css.

Itt alapozzuk meg a designt. A legfontosabb szabályok a célcsoportnak:

Nagy alap betűméret.
Magas kontraszt (sötét szürke szöveg fehér alapon).
Nagy gombok és érintési felületek.

Lépés 2.4: Az "agy" (JavaScript)

Végül hozzuk létre az assets/js/app.js fájlt.

Ennek a feladata most:

Amikor az oldal betöltődik, elindítani a folyamatot.
Lekérni az adatokat az api/get_routines.php-től.
Végigmenni az adatokon, és minden tornához gyártani egy szép HTML kártyát, amit beszúr a főoldalra.

Akkor vágjunk bele a projekt legizgalmasabb részébe: a Torna Lejátszóba.

Ez a funkció fogja vezarolnia a felhasználót a gyakorlatokon: mutatja a videót, számolja vissza az időt, és léptet a következő feladatra.

Mivel egy "egyoldalas alkalmazást" (Single Page Application) építünk a későbbi mobilapp miatt, nem fogunk új HTML fájlt létrehozni. Ehelyett a JavaScript fogja lecserélni a főoldal tartalmát a lejátszó felületére, amikor a felhasználó rákattint egy tornára.

A lépések ugyanazok: Backend API -> Stílusok -> JavaScript logika.

Lépés 3.1: Backend API - Egy konkrét torna adatainak lekérése

Szükségünk van egy új "pincérre", aki nem az étlapot hozza (mint az előző), hanem egy konkrét menüsor részleteit.

Lépés 3.2: Stílusok a Lejátszóhoz (CSS)

Nyisd meg az assets/css/style.css fájlt, és add a végéhez a következőket. A cél: hatalmas időzítő, jól látható videó terület és óriási vezérlőgombok.

Link a kiprobáláshoz: https://mierdekel.frw.hu/szektorna/

IT, BI, DWH, DM, AI

Keresés ebben a blogban