Az válaszott projekt kapcsán egy tanulós applikációt fogok elkészíteni, ahol tanulós kártyákat, kártyabankokat, tanulási statisztikákat, és különböző fontosabb iskolai/egyetem eseményéeket lehet kezelni. Az alkalmazás alapötlete a tanulók által közkedvelt Anki appból származik, ennek egy egyszerűbb, könnyen kezelhető változatát fogom elkészíteni. Az app minden tanuló, egyetemi hallgató számára kiváló lehetőséget nyújt a szervezett, mély és aktív tanuláshoz, nem elfeledkezve a folyamatos tanlási statisztikák, visszajelzésekről
Az alkalmazás alapvetően 3 fő oldalból állna, illetve egy negyedik kártyákat pörgető activityből.
Az első esemény oldalon tanuláshoz kapcsolódó eseményeket lehet rögzíteni. Pl: melyik nap lesz zh, miből, mennyire érződik nehéznek. Az oldal alapvetően Scaffold alapú lenne, a hozzá tartozó funkciók:
- Új esemény felvétele, dialógus ablakban esemény beállítása.
- Már meglévő esemény törlése, összes esemény törlése.
- Események rendszerezése: Időpont alapján, Nehézségi szint alapján
- Eseményekre kattintva az esemény részletes információinak megtekintése külön ablakban.
- Események adatbázisba mentése
- Értesítés küldése, ha közeleg az esemény
A második oldal is hasonlóan Scaffold alapú lenne
- Itt új kártyabankokat lehet felvenni, ezeknek címkéket, típuskat adni.
- Kártya bankok törlése
- Kártyabankokra kattintva új kártyákat tudunk felvenni.
- Új kártya felvétele egy külön oldalon jelenik meg, itt lista nézetben az összes kérdés fel van sorolva.
- Új kártyát felvehetünk, előlap / hátlap információk kezelése, kártyákat törölhetjük is akár.
- Kártyára kattintva megjelenik a kártya nézet, ahol ki tudjuk próbálni, hogyan fog kinézni.
- Kártya bankra kattintva továbbá lehetőség van a kártyák végigpörgetésére, amit más trackelni fogunk statisztikai adatokhoz.
A harmadik oldal a statisztika oldal.
- Itt grafikonokon látni lehet hogy a felhasználó aznap mennyi kártyák pörgetett végig, mennyi jó/rossz választ adott.
- Akár heti/havi/éves lebontásban, a statisztikákat is adatbázisban fogok tárolni perzisztensen.
- Adatbáziskezelés: Kártya bankok, kártyák, események, statisztikák elmentése adatábázisba, illetve onnan való betöltése.
- Notificaion: Értesítés küldése, ha több napja nem pörgetett 1 kártya bankot sem végig a felhasználó / közeleg az esemény.
- Statisztikák megjelenítése grafikonokkal, animált kétoldalú kártyák használata
A StudyCards alkalmazásommal egy könnyen és intuitívan használható tanulós appot valósítottam meg, amely lehetővé teszi a felhasználók számára, hogy tanulós kártyabankokat, és tényleges kétoldalú kártyákat hozzanak létre az elsajátítani kívánt tananyaghoz. Az alkalmazás ezen kívül lehetőséget biztosít a kártybankok végigpörgetésére, részletes statisztikák megtekintésére, és még a fontos évközi időpontok felvételére és kezelésére.
Az alkalmazás alapvetően négy fő profil köré épül: deadlines, decks, cards, statistics. A funkcionalitások is erősen ezekehez a fogalmak, "entitások" köré épültek, így ilyen formában mutatom be.
Az első oldalon a fontosabb időpontokat, beadandó határidőket, deadlineokat lehet kezelni.
- A már felvett határidők kilistázása optimalizált módon
- Új határidő felvétele, határidő kártya paramétereinek beállítása, és elmentése
- A már felvett határidő módosítása: Dupla kattintással betöltődik a módosító panel, és ott újra elmenthető a kártya a változásokkal.
- Felvett határidő törlése: Hosszant kattintva egy dialógus ablak ugrik fel, ahol a törlés véglegesíthető
A második (középső) oldalon a kártyabankok (deckek) kezelése történik.
- A már felvett kártyabankok kilistázása optimalizált módon
- Új kártyabank felvétele, paraméterek beálltása
- A már felvett kártyabank módosítása: Dupla kattintással betöltődik a modostó panel, és ott őjra elmenthető a kártyabank a változásokkal.
- Felvett kártyabank törlése: Hosszant kattintva egy dialógus ablak ugrik fel, ahol a törlés véglegesíthető.
- Kártyabank kártyáinak végigjátszása: A Play gombra kattintva végigiterálunk a kártyákon, animált balra/jobbra húzható modon a kétoldalú kártyákkal letesztelhetjük a tudásunkat.
- Kártyabankra kattintva elérhetővé válik a hozzá tartozó kérdések kezelése
A második (középső) oldalon a kártyák kezelése (miután rákattintottunk egy kártyabankra).
- Kártyabankhoz felvett kártyák listázása
- Új kártyák felvétele, amik az adott kártyabankhoz lesznek asszociálva.
- A meglévő kártyák módosítása: Dupla kattintással betöltődik a módosító panel, és ott újra elmenthető a kártya a változásokkal.
- Felvett kártya törlése: Hosszant kattintva egy dialógus ablak ugrik fel, ahol a törlés véglegesíthető.
A harmadik oldalon a tanulós statisztikák jelennek meg.
- Napi statisztikák megtekintése, végigpörgetett kártyák száma, sikerességével aránya.
- Heti statisztikák megtekintése, adott hét napjaira lebontva a kártyák száma és sikeressége
- Havi statisztikák megtekintse, éves szinten minden hónapra egyedileg lebontva statisztikák.
- Éves statisztikák megtekintése, összes játszott kártya, kártyabank és egy Githubohoz hasonló hetekre lebontott, napi aktivitás grid.
Az alkalmazás alapvetően négy fő profil köré épül: deadlines, decks, cards, statistics. A funkcionalitások és a képernyők is erősen ezekehez a fogalmak, "entitások" köré épültek, így ilyen formában mutatom be.
- ábra: Ezen az ábrán a bal oldali, első ablak látható, ahol a már felvett határidős kártyák jelennek meg, listázott formában. Az oldal Scaffold alapú, alul a navigációs sávban lehet a fő profilok között navigálni. A + gombbal pedig átnavigálunk a határidő szerkesztő oldalra, ahol pedig új határidőket lehet majd felvenni.
- ábra: Ezen az ábrán a határidő szerkesztő ablak látható, itt lehet beállítani a határidő kártya paramétereket, amihez az felhasználó egy valós időben frissülő preview változatot is lát. A TopBar-ban lévő 'Save' gombbra kattintva lehet létrehozni új kártyát, vagy a már meglévő kártya módosításokat elmenteni. Amennyiben egy kártyára kétszer kattintunk, akkor szintúgy ez az oldal fog megjelenni, viszont ekkor már előre be lesznek töltve a kártya adatok, és mentés esetén nem jön létre új kártya, hanem a meglévő fog módosulni.
- ábra: A lista nézetben egy adott határidő kártyára hosszant kattintva felugrik a törlés panel, ahol véglegesen törölhetjhük a felvett határidőt.
- ábra: Ezen az ábrán a középső ablak látható, ahol a már felvett kártyabankok jelennek meg, listázott formában. Az oldal Scaffold alapú, alul a navigációs sávban lehet a fő profilok között navigálni. A + gombbal pedig átnavigálunk a kártyabank szerkesztő oldalra, ahol pedig új kártyabankokat lehet majd felvenni.
- ábra: Ezen az ábrán a kártyabank szerkesztő ablak látható, itt lehet beállítani a kártyabank paramétereket, amihez az felhasználó egy valós időben frissülő preview változatot is lát. A TopBar-ban lévő 'Save' gombbra kattintva lehet létrehozni új kártyát, vagy a már meglévő kártya módosításokat elmenteni. Amennyiben egy kártyabankra kétszer kattintunk, akkor szintúgy ez az oldal fog megjelenni, viszont ekkor már előre be lesznek töltve a kártyabank adatai, és mentés esetén nem jön létre új kártyabank, hanem a meglévő fog módosulni.
- ábra: A lista nézetben egy adott kártyabankra hosszant kattintva felugrik a törlés panel, ahol véglegesen törölhetjhük a felvett kártyabankot.
- ábra: Ezen az ábrán a középső ablak látható, miután már rákattintottunk egy kártyabanrkra, így a hozzá tartozó tényleges kártyák jelennek meg, listázott formában. A + gombbal pedig átnavigálunk a kártya szerkesztő oldalra, ahol pedig új kártyát lehet majd felvenni.
- ábra: Ezen az ábrán a kártya szerkesztő ablak látható, itt lehet beállítani a kártya paramétereket, amihez az felhasználó egy valós időben frissülő preview változatot is lát. A TopBar-ban lévő 'Save' gombbra kattintva lehet létrehozni új kártyát, vagy a már meglévő kártya módosításokat elmenteni. Amennyiben egy kártyára kétszer kattintunk, akkor szintúgy ez az oldal fog megjelenni, viszont ekkor már előre be lesznek töltve a kártya adatai, és mentés esetén nem jön létre új kártya, hanem a meglévő fog módosulni.
- ábra: A lista nézetben egy adott kártyára hosszant kattintva felugrik a törlés panel, ahol véglegesen törölhetjhük a felvett kártyát.
- ábra: A kártyabank play iconra kattintva a hozzá tartozó kártyák fognak animált kétoldalú kártyaként megjelenni, amiket végig tudunk iterálni. Az ábrán láthatü hogy a 2. kártyánál járunk, és az előlapi oldalán lévő szöveget látjuk kezdésnek.
- ábra: A kártyára kattintva animálva megjelenik a kártya hátulja, ahol leelenőrizhetjük, hogy megfelelően tudtuk-e az adott kártyához tartozó információkat.
- ábra: Miután egy kártyával végeztünk, akkor ha jobbra húzzuk a kártyát, animálva kirepül a képernyőről, mindeközven zöldre festve, így jelezve hogy, ekkor "KNOWN" állapotú lesz a kártya, és lépünk tovább a következőre.
- ábra: Miután egy kártyával végeztünk, akkor ha balra húzzuk a kártyát, animálva kirepül a képernyőről, mindeközven pirosra festve, így jelezve hogy, ekkor "UNKNOWN" állapotú lesz a kártya, és lépünk tovább a következőre.
- ábra: A harmadik fő panelen a statisztikák jelennek meg. Az ábrán is látható oldal az adott napi statisztikákat vizualizálja a felhasználónak. Itt lehet megtekinteni, hogy hány kártyát pörgettünk végig, mennyit tudtunk belőle, és mennyit nem. Ez az oldal kifejezetten csak napi statisztikákat jelenít meg.
- ábra: A vertical pager 2. oldalán, ahogy az ábrán is látható az adott heti statisztikákat vizualizálja a felhasználónak. Itt lehet megtekinteni, hogy hány kártyát pörgettünk végig a hét folyamán napi lebeontásban, mennyit tudtunk belőlük, és mennyit nem. Ez az oldal kifejezetten csak heti statisztikákat jelenít meg.
- ábra: A vertical pager 3. oldalán, ahogy az ábrán is látható az adott havi statisztikákat vizualizálja a felhasználónak. Itt lehet megtekinteni, hogy hány kártyát pörgettünk végig a hónapok folyamán napi lebeontásban, mennyit tudtunk belőlük, és mennyit nem, százalékos arányban is. Ez az oldal kifejezetten csak havi statisztikákat jelenít meg.
- ábra: A vertical pager 4. oldalán, ahogy az ábrán is látható az adott éves statisztikákat vizualizálja a felhasználónak. Itt lehet megtekinteni, hogy hány kártyát pörgettünk végig éves szinten, hány különböző paklit játszottunk végig, illetve egy heti nézetű, napi bontású GitHub-hoz hasonló aktivitás panelt is megjelenít. Ez az oldal kifejezetten csak éves statisztikákat jelenít meg.
A nagyházi feladat kódolása során törekedtem a laborok által bemutatott megoldások használatára, a szépen felépített, rétegzett architektúra kialaktására.
- Data, Domain, Ui rétegekre bontás
- Dependency Injection az adatbázis, usecasek, viewmodelekhez
- Viewmodel használata, mindegyik screen-hez saját viewmodel
- MVI architektúra: state alapú viewmodel, screen event alapú kommunikáció
- SQLite adatbázis használata, négy különböző DAO réteg a négy fő profilhoz.
- Rengeteg komplexebb adatbázis lekérdezés (Pl. Statisztika oldalon vannak elég komplex lekérdezések, de a deckekhez is van join alapú lekérdezés.)
- Animáció, rajzolás. A Play oldalon a flip kártya, annak jobbra/balra mozgatása saját komponens.
- Állapotmentes UI, rengeteg újrafelhasználható UI komponens, state hoisting
- String resource használata
- Külső material design: Reply
- Statisztika chartok megjelenítése YCharts könyvtárral
- Saját designed kártyák (Deadline, Bankok, Sima kártyák)
- Optimalizált megjelenítés: Mindenhol LazyColumn/LazyGrid ahol listás nézet van
- 3 pages Horizontal Pager a fő profilon
- Statisztika oldalt 4 pages Vertical pager a napi/heti/havi/éves statisztikák megjelenítéséhez
Számomra a nagyházi feladat készítése rettentően tanulságos volt. Úgy érzem, hogy most sikerült mélyen megértenem, hogyan kell kialakítani egy komplexebb applikációt, és mennyire fontos az, hogy szépen rétegezve, moduláris, újrafelhasználható komponensekből építsük fel az alkalmazást. Számomra alapvetően az első nagyobb kihívás az adatábzis kezelés volt, mivel szükség volt komplexebb, több tábla összekapcsolásával kinyert lekérdezésekre, illetve a statisztika oldalon is rengeteg komplexebb, group by alapú lekérdezést is alkalmaztam. Fejlesztés során elképesztően élveztem az alkalmazás tervezését, UI design elemeket, a deck, card, deadline kártyákat saját magam terveztem, kialakításuk több iteráción is keresztül mentek, de végül úgy érzem sikerült egy kellően izgalmas, a szemnek is jó érzést keltő UI design-t kialakítani. Ami még nagyobb falat volt fejlesztés közben a Play ablakon az animált kétoldalú kártyák kialakítása, de itt is sikerült egy tök jó, moduláris, eseményeket megfelelően kezelő, újrafelhasználható kártyát megvalósítanom. Végső soron, ami szerintem a legszebb lett az alkalmazásban, az a statisztika oldal. Itt ugye napi/heti/havi/éves statisztikákat mutatok, sokat gondolkodtam a különféle chartok használatán, illetve kifejezetten tetszik, hogy sikerült egy GitHub szerű heti felosztású, napi bontású éves aktivitás statisztika panelt elkésztenem, ami szerintem nagy jópofa lett. Összességében én úgy érzem sikerült tényleg! mélyen elsajátítanom az android fejlesztés alapjait, és az órán tanult ismeretek már most rengeteget segítettek, és bővítették gondolkodásomat, és a meglátásaimat.