E-learning platforma podporující správu žáku, kurzů, výukových materiálů a testů. Ročníkový projekt ve 3. ročníku střední školy.
Popis projektu
Cílem projektu bylo vytvoření webové aplikace, která poskytuje prostředí pro výuku kurzů, které lektoři nabízejí a spravují. Klíčovými prvky byly:
- správa uživatelů (studentů, lektorů, administrátorů)
- správa tříd (skupin uživatelů)
- správa kurzů (výukových materiálů, testů)
Wireframe
Prvotním požadavkem bylo definování cílů a vytvoření wireframu. Pro wireframe byl zvolen nástroj NinjaMock. Vznikl tedy průchozí wireframe, který ukazoval základní strukturu všech funkcí a jejich vzájemné propojení. Nejsem už bohužel schopen získat přístup k původnímu wireframu, proto zde uvádím pouze několik screenshotů.
![Dashboard uživatele](/_ipx/w_768&f_webp&q_80/images/content/elearning/wireframe/user-dashboard.png)
![Výukový materiál (modul)](/_ipx/w_768&f_webp&q_80/images/content/elearning/wireframe/module.png)
![Dashboard třídy (pro lektora)](/_ipx/w_768&f_webp&q_80/images/content/elearning/wireframe/class-teacher-dashboard.png)
Návrh databáze
Dle definovaných cílů a funkčních požadavků přišel na řadu návrh databáze. Samotné schéma bylo vytvořeno v nástroji DB Designer. Schéma databáze je k dispozici v přiložené dokumentaci (sekce Přílohy).
Výběr technologií
Do projektu jsem šel s tím, že využiji jazyk PHP
, který jsem se snažil v té době naučit. V minulých projektech jsem využil framework CodeIgniter, který byl ideální pro menší projekty. Pro tento projekt jsem se rozhodl využít framework Laravel, který byl, a stále je, jedním z nejpopulárnějších PHP frameworků. Pro databázi jsem zvolil MySQL, tuto volbu jsem extra neřešil :)
Po asi měsíci práce na projektu jsem se rozhodl do projektu nasadit Vue.js. Důvodem byla potřeba vytvářet dynamické a interaktivní prvky, které by bylo bolestivé psát v čistém JS.
Ukázky z aplikace
![Dashboard administrátora](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/admin-dashboard.png)
![Dashboard kurzu](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/course-dashboard.png)
![Výukový modul](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/course-module.png)
![Úprava výukového modulu 1/2](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/course-module-edit-1.png)
![Úprava výukového modulu 2/2](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/course-module-edit-1.png)
![Úprava testu](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/quiz-edit.png)
![Test v praxi](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/quiz-questions.png)
![Výsledky testu ve třídě](/_ipx/w_768&f_webp&q_80/images/content/elearning/ui/quiz-class-results.png)