Písemky – webová aplikace pro opravu ručně psaného textu

Aplikace vznikla jako školní dílo / diplomová v rámci mého studia softwarového inženýrství na Fakultě informačních technologií ČVUT v Praze. Aplikace je určena k praktickému použití, je plně funkční a po dokončení mého studia je používána na Fakultě informačních technologií ČVUT v Praze k opravování studentských písemných prací (domácí úkoly, zápočtové písemky a podobě).

Aplikace je integrována na školní informační systém KOS (takže má k dispozici seznamy semestrů, vyučujících a studentů včetně jejich vazeb na předměty, paralelky, zápočtové písemky nebo zkoušky) a na školní klasifikační systém Klasifikace (Grades), odkud čerpá informace o klasifikovaných událostech jednotlivých předmětů během semestru a kam ukládá výsledky opravovaných prací. Aplikace vyučujícím umožňuje definovat hodnocené události a jejich části, k nimž pak studenti nebo vyučující odevzdávají oskenované písemné práce. V případě hromadných odevzdání jsou studenti a jednotlivé příklady identifikovány s využitím QR kódů

Vyučující opravují studentské práce s využitím webového grafického editoru, bodové hodnocení aplikace odesílá do fakultní aplikace Klasifikace (Grades). Studenti si mohou jednotlivé stránky opravených písemek zobrazit ve webovém prohlížeči.

V aplikaci vystupují uživatelé v následujících rolích:

  • Vyučující:
    • Definuje hodnocené události a jejich části s využitím informací o předmětech ze systémů KOS a Klasifikace (Grades).
    • Odevzdává oskenované písemné práce za studenty.
    • Opravuje písemné práce v grafickém editoru.
  • Student:
    • Odevzdává svoje písemné práce.
    • Má přístup k opraveným písemným pracem.
  • Správce:
    • Konfiguruje systémová nastavení aplikace.
    • Nastavuje jazykovou podobu uživatelského rozhraní ve více jazycích.
    • Spravuje účty ostatních správců aplikace.
    • Má přístup k informacím o stavu a běhu aplikace.

Při opravování písemné práce aplikace zobrazí v grafickém editoru opravovanou práci jako rastrový obrázek a vyučující tuto vrstvu doplňuje o vrstu s opravami ve formě vektorové grafiky. Grafický editor běží v prohlížeči umožňuje práci na zařízení s operačními systémy Windows, Linux, iOS nebo Android a to s využitím myši, stylusu, tabletu nebo prstu na dotykovém displeji.

Jan Petržílka, webová aplikace, Písemky (Assignments) - webová aplikace pro opravování ručně psaných dokument, editor

Součástí aplikace jsou lokalizační funkčnosti – uživatelské rozhraní obsahuje cca 400 textových polí rozčleněných do cca 40 stránek nebo jejich komponent a obsah všech těchto polí může správce aplikace definovat v českém a anglickém jazyce. Přidání dalšího jazyka vyžaduje pouze dílčí aplikační změny.

Aplikace je naprogramována v Javě s využitím frameworků Spring Boot a Spring Security. Databáze je PostgreSQL, Uživatelské rozhraní je naprogramováno v Reactu a JavaScriptu s využitím Bootstrapu.

Funkční verze webu běží na adrese https://pisemky.petrzilka.cz. V případě zájmu aplikaci rád předvedu.

Diplomová práce 

Posudek vedoucího práce  Posudek oponenta

Prezentace práce  Navštívit web... 

 

Zjednodušený scénář použití aplikace

Vyučující nastaví odevzdávání pro svoji paralelku vyučovaného předmětu v daném semestru. Nastavení je snadné, protože aplikace má informace o předmětu ze systému KOS a z aplikace Klasifikace (Grades).

Student odevzdá svoji práci, alternativně vyučující odevzdá práci za jednoho nebo více studentů.

Vyučující provede opravu písemky s využitím editoru. Editor ukládá data do datových struktur takovým způsobem, že všechny operace kromě mazání mají jednotkovou časovou složitost; časová složitost operace mazání je pak lineární s počtem objektů na obrázku.

Student má k dispozici náhled na opravenou práci.

 

Struktura aplikace

Aplikace je řešena jako vícevrstvá webová aplikace.

Jako databáze je použit PostgreSQL. Obsahuje data o předmětech, vyučujících a studentech, odevzdaných pracech a provedených opravách.

Aplikační server je integrován na systém KOS a aplikace Klasifikace (Grades). Integrace na školní přihlašovací bránu umožňuje přihlašování vyučujících a studentů jejich školním heslem. Aplikace odesílá e-maily pomocí školního e-mailového serveru. Komponenty Open HTML to PDF a Apache PDFBox složí ke generování PDF souborů a k převodu odevzdaných PDF souborů na obrázky. Komponenta Google ZXing pak k rozpoznání QR kódů v odevzdaných pracech.

Uživatelské rozhraní je provedeno ve frameworku React. Komponenta React ZXing slouží k rozpoznání QR kódů v mobilní části aplikace při párování studentů na QR kódy.

Editor pro opravování písemných prací je napsaný v JavaScriptu. Aplikace dále používá komponenty Chart.js pro generování grafů.

 

QR kódy

QR kódy jsou v aplikaci používány pro identifikaci studenta a příkladu v odevzdané práci.

Studenti svoje práce odevzdávají na zkušebních listech generovaných v aplikaci. Na jednotlivých listech je QR kód složený z identifikátoru studenta a příkladu.

V průběhu psaní písemky vyučující obejde posluchárnu a pomocí mobilní části aplikace spáruje jednotlivé studenty s QR kódem na jejich zkušebním listu.

Při opravování písemky aplikace jednotlivé listy roztřídí a přiřadí je studentům a řešeným příkladům. Spolehlivost rozpoznání QR kódu je při provozním nasazení aplikace lepší než 999/1000.

 

 

Lokalizace

Všechny textové popisy zobrazené na uživatelském rozhraní jsou definovány správcem aplikace v češtině a angličtině. Tyto definice jsou uloženy v aplikační databázi a pro lepší orientaci jsou seskupeny podle jednotlivých stránek nebo použitých komponent. Při změně popisu se uchovává historie textů.

 

Využití

Aplikace byla nasazena do zkušebního provozu na jaře 2023 a diplomová práce byla obhájena v červnu 2023.

Aplikace je na fakultě dále používána. Tyto grafy zobrazují data za posledních 12.000 minut před datem 31. 10. 2023.

První graf zachycuje počet požadavků (v zásadě počet zobrazených aplikačních stran nebo uložených změn) v těch minutách, kdy uživatelé s aplikací pracovali. Jednotlivé shluky bodů odpovídají dnům; v noci byl provoz minimální.

Druhý graf zachycuje dobu odezvy při zpracování těchto požadavků. Pro každou minutu jdou vyneseny tři hodnoty - minimální (zeleně), maximální (červeně) a průměrná (modře) doba odezvy. Dlouhé doby odezvy překračující 1 sekundu jsou způsobeny blokujícím čekáním na odpověď integrovaného systému.

 

 

MOJE SILNÉ STRÁNKY

  • Záleží mi na tom, aby moje práce měla pro zákazníka adekvátní hodnotu.
  • Chci dělat věci správně. Opravdu správně.
  • Jsem připraven přijímat odpovědnost a zvládat těžké úkoly.

KONFLIKTNÍ OBLASTI

  • Potřebuji být u toho, když se přijímají rozhodnutí o mojí práci. Vadí mi být na druhé koleji a v závislém postavení.
  • Říkám, co si myslím, a očekávám fér jednání. Jinak spolupracuji jen s obtížemi nebo vůbec ne.
  • Jsem "studený čumák". Soustředím se na práci a na legraci mě moc neužije.

A KDYŽ ZROVNA NEPRACUJI...

  • Studuji. Chci obnovit rozšířit svoji nabídku a zahrnout nové znalosti. Také potřebuji nové obzory, nová témata a inspiraci.
  • Rád chodím po horách. Jak vidím kopec, musím nahoru. Zatracený covid.
  • Moji oblíbení herci jsou Tony Shalhoub, Clint Eastwood a Bruce Willis. Víte, proč právě tito?