Bachelor thesis at University of Palacky 2021/2022 až 2022/2023
Vznik nápadu na bakálřskou práci (spíš pro mě jako záznam)
Od začátku školního roku 2021/2022 se moje přítelkyně vydala cestou brigád na vlastní pěst a to tak, že začala doučovat Angličtinu. Když s tím začala, tak ze začátku používala aplikaci pro rozšíření jejího profilu mezi studenty, kteří hledají doučujícího (pro širší záběr zadala víc možností kontaktu od mobilu přes whatsup až po email). Ze začátku bylo fajn když ji studenti začali psát, ale postupem času bylo neúnosné udržovat s každým konverzaci na jiné platformě a domlouvat s každým individuálně hodiny, nebo řešit peníze skrz jiné sociální sítě. Napadlo mě tedy udělat informační systém, který by ji práci s domluvou a plánováním usnadnil při komunikaci se studenty. V dokumentu teď postupně rozeberu všechny aspekty tohoto informačního systému.
Odkazy
Přihlašovací údaje pro testování
-Přihlášení do admina-
username: admin
passwd: admin
-Přihlášení do studenta > 18-
username: jirnek
passwd: jirka
-Přihlášení do studenta < 18-
username: jakhaj
passwd: kuba
-Přihlášení do rodiče-
phone: 604929978
passwd: radka
Rozdělení
Do informačního systému se přihlašuje skrz standartní login. Žádná registrace není, protože správce (Bára) každému novému příchozímu dá jeho přihlašovací jméno a heslo. Po zadání přihlašovacích údajů se rozeznávají tři typy uživatelů.
- typ (správce/admin)
Mazání studentů (pouze zneviditelnit a znemožnit přístup, ale pro pořeby obnovení je student stále v databázi)
Jednotlivým studentům možnost zapisovat/shrnout co bylo tématem minulých hodiny
Jednotlivým studentům psát domácí úkoly
Přikládat individuálně .PDF studentům do sekce s materiály (obecně soubory)
Individuální osnova/plán pro studenta, který lze měnit správcem podle aktuální potřeby studenta po domluvě
Změnit čas následující výuky
Možnost změnit jméno, příjmení
Přidat odkaz na slovíčka (flash cards)
Zrušit hodinu
Potvrdit platbu a obeznámení o omluvení se z hodiny od uživatele
- typ (student mladší 18 let)
Uvidí osnovu, která naznačuje cestu jakou studium bude probíhat
Krátké shrnutí hodin v sekci průběžné shrnutí
Uvidí domácí úkoly
Uvidí .PDF soubory pro tisk na hodiny
Uvidí čas následující, na kterém se domluvili, že hodina bude probíhat
Může se omluvit z hodiny
Může si změnit heslo
- typ (student starší 18 let/rodič)
Uvidí všechno, co student mladší 18 let plus výčet věci, které jsou pod tímto odstavcem
Uvidí průběžné (nejespíš měsíční) zhodnocení práce studenta (jen v případě když to bude samozřejmě pro rodiče jinak studentovi staršímu 18 let to nemá moc vyznám tam psát, protože si za to zodpovídá sám).
Informace o č.ú
Pro všechny jsou samozřejmě jiná práva a každý uvidí něco jiného.
Technologie
Využívám NextJS (pro klientskou a serverovou část) a MongoDB (s využítím MongoDB Atlas), kde to celé hostuju na Vercelu.
O CO BY SE DALA BAKÁLÁŘKA ROZŠÍŘIT
- REACT NATIVE
- VYHLEDÁVÁNÍ V UŽIVATELÍCH
- PŘIDÁVÁNÍ SOUBORŮ A ODKAZŮ VŠEM (například spelling bee, woordle apod.)
- PLATEBNÍ BRÁNA
- ROZPOZNÁVÁNÍ JESTLI JE ÚLOHA HYPERTEXT A JESTLI ANO, TAK BY UKOL FUNGOVAL JAKO ODKAZ
- INTEGROVANÉ HRY (STORY DICE)
- KALENDÁŘ NA STRANĚ ADMINA, KDE BY VIDĚL VŠECHNY HODINY CO PŘES TÝDEN MÁ ABY VĚDĚL, NA KTERÉ DNY SI MŮŽU KDYŽTAK PŘIDAT STUDENTY
- DOČASNÁ OBNOVA HESLA PŘI ZAPOMENUTÍ ŽÁKA
- PŘIDÁNÍ LEKCE
- ZMĚNA LEKCE PERMANENTNĚ
- KDYŽ BARČA ZMĚNÍ HODINU, TAK UŽIVATEL NA EMAIL DOSTANE UPOZORNĚNÍ
- PŘÍDÁNÍ OKDAZŮ
- MOŽNOST PŘESUNOUT ZÁPISKY V SUMARIZACÍCH NAHORU A DOLU, PROTOŽE PO SMAZÁNÍ JEDNÉ SUMARIZACE Z NĚJAKÉHO DATA UŽ BY NEMUSELY DATUMY JÍT PO SOBĚ
- PŘI ZAKLÁDÁNÍ UŽIVATELE ŘÍCT ADMINOVI JESTLI NEDÁVÁ UŽIVATELE NA DATUM, KTERÉ UŽ MÁ NĚJAKÝ STUDENT ZABRANÉ
- V RODIČOVSKÉM MODU MÍT VŠECHNO V ČEŠTINĚ
- DODĚLAT UPOZORNĚNÍ KDYŽ SE BUDE JEDNAT O DESTRUKTIVNÍ AKCE (odstranění studenta například)
- KONTAKTNÍ INFORMACE NA DÍTĚ NEBO NA ZÁKONNÉHO ZÁSTUPCE
- PŘIDAT NAČÍTANÍ KDYŽ SE UŽIVATEL PŘIHLAŠUJE PRO INFORMOVÁNÍ UŽIVATELE, ŽE SE NĚCO DĚJE
Webová aplikace je co se týče složek rozdělena na COMPONENTS, PAGES, PUBLIC, STYLES a soubory, které se nachází mimo tyto složky jako .gitignore, next.config.js, package-lock.json, package.json. Níže budu popisovat jednotlivé složky a soubory a kním jejich význam
Ve složce components se nachází další podsložky ADMIN , LOGIN , STUDENT -> dvě hlavní role, které se na stránce objevují + přihlášení. Každá z nich má jednoduchý vyznám: je zde hlavní soubor, který se volá někde výš a je poskládaný z koponent, které se nacházejí ve stejné složce. Například ve složce COMPONENTS je další složka STUDENT a v ní je soubor Student.js , ale taky několi dalších souborů s příponou .js. Pro nás je hlavní soubor Student.js , který poskládáme z těch ostatních .js souborů.
Ve složce models se nachází soubory se schématy databázových kolekcí.
Ve složce pages najdeme jednak další složku s názvem api , ve které běží náš server, ale dále ve složce pages najdeme čtyři důležité soubory a výčtově se jedná o _app.js, _document.js, dashboard.js, index.js, kde _app.js je soubor, který je hlavním v celé struktuře a stará se o změnu rolí. Dallé je tu _document.js, což je speciáln soubor z NEXTJS frameworku, který nám umožňuje updatovat tagy v HTML. Tenhle soubor má úžasnou vlastnost a to tu, že tah uvnitř tohoto souboru není stejný jako v ostatních. Používáme tento souboru a speciálně hlavičkovou část pro importování kodu, který je stejný pro všechny stránky. Například když si tady nalinkujeme nějaký font můžeme ho používat pak ve všech souborech. Dalším v pořadí je soubor dashboard.js, který podle role, která přijde ze serveru vegeneruje buď komponentu s adminem, nebo ze studentem (zkrátka slouží jako rozcestník). Poslední v pořadí je index.js, který slouží jako nultá stránka, neboli login -> generují se zde komponenty pro přihlášení uživatele.
Složka publick slouží jako místo, kde jsou soubory týkající se obrázků a pod.
Složka styles má jediný účel a to ten, že v ní definujeme stylování, které je pro celý projekt stejné (nastavujeme zde default).
Složka utils obsahuje dva soubory, kde první z nich Colors.js slouží pro definování barev použitých v aplikaci a druhý dbMongo.js obsahuje funkce, které se používají na serveru pro práci s databází.
Jedná se o soubory .gitignore, .next.config.js, package-lock.json, package.json. Soubor .gitignore slouží pro blokování určitých věcí, pří komitování na Git. Dále soubor .next.config.js nám umožňuje zvolit si, které věci budeme chtít navíc používat v NEXTJS (například já používám styledcomponents, které umožňují vytvářet si vlastní HTML tagy už s nadefinovaným stylování, které se programátor vytvoří). V neposlední řadě tu jsou dva .json soubory, z nichž jeden hlídá verze balíčků (package-lock.json) a druhý v sobě má seznam těch balíčků (package.json).
Je potřeba nakolonovat si celý projekt k sobě. Já osobně rád používám GitHub desktop Instalace GitHub Desktop. Naklonovat projekt je potřeba celý, takže půjdeme na stránku celého projektu PROJEKT a stískneme CODE, kde vybereme možnost "Clone with GitHub Desktop"
Budeme potřebova potřebovat prostředí, ve kterém si kod zobrazíme. Já jsem celou bakalářskou práci psal ve Visual Studio Code a odkaz na stažení je zde VS CODE
Teď je potřeba aplikaci otevřít, takže najedeme do GitHub Desktop a vybereme adresář "Batchelor-Thesis" nebo "Batchelor-Thesis-Testing" a pravým vybereme "Open in Visual Studio Code"
Ještě předtím, než budeme pokračovat dál, je potřeba stáhnout ještě jednu věc, a to je Node.js NodeJS
Teď když máme otevřené VS CODE a stažený NODEJS, tak přejdeme do terminálu, který je ve VS CODU zabudovaný
a začneme stahovat potřebné balíčky. To jak a co budeme stahovat už se nachází pod tímto úvodním manuálem.
První příkaz, který je třeba udělat je v případě Batchelor-Thesis (v případě, že spouštíme Batchelor-Thesis-Testing, tak není potřeba = už jsme přímo v app):
cd BT-master(nextjs)/app
protože budeme instalovat baláčky z package.json , které je možné vidět v souboru.
Pro spuštění aplikace je nutné mít stažené všechny potřebné baličky které lze najít v souboru package.json, který se nachází v adresáří ~/BT-master(nextjs)/app/package.json (opět, jen v případě, že jsme ve složce "Batchelor-Thesis"). Je potřeba stahovat tyto balíčky do cesty BT-master(nextjs)/app
Stahujeme je pomocí příkazu:
npm install <název balíčku>
(taky je možnost použít --> npm i <název balíčku> <název balíčku> --- <název balíčku> pro stahování více balíčku současně)
Potom už jen stačí dostat se na již zmíněnou cestu ~/BT-master(nextjs)/app/ (opět, jen v případě, že jsme ve složce "Batchelor-Thesis"), kde zadáme do konzole příkaz:
npm run dev
a můžeme do webového prohlížeče napsat URL http://localhost:3000, která nám zobrazí naši webovou aplikaci.