Tvorba internetových aplikací

Jakub Klinkovský

:: České vysoké učení technické v Praze
:: Fakulta jaderná a fyzikálně inženýrská
:: Katedra softwarového inženýrství

Akademický rok 2023-2024

Orientační plán přednášek a cvičení na zbytek semestru

  • 5.4. (dnes) – 2×\times cvičení – práce s modely v Django
  • 12.4. – přednáška + cvičení – tvorba a zpracování formulářů
  • 19.4. – přednáška + cvičení – session, cookies and local storage
  • 26.4. – přednáška + cvičení – user authentication and authorization
  • 3.5. – přednáška + cvičení – testing
  • 10.5. – přednáška + cvičení – security, deployment
  • 17.5. – 2×\times cvičení

Celkem to vyjde na 11 přednášek a 15 cvičení.

Semestrální projekt pro klasifikovaný zápočet

Vytvořte dynamickou webovou aplikaci, která vyhovuje tematickým a technickým požadavkům:

  1. Téma je libovolné, ale musí být smysluplné. Dále nesmíte odevzdat to, co už odevzdal někdo před vámi. Pokud téma odpovídá nějakému příkladu ze cvičení, musí být patřičně rozšířené.
  2. Výsledek musí být plně funkční aplikace, která generuje validní kód HTML5, používá validní CSS a je v podstatě připravena k ostrému nasazení na serveru (samotné nasazení ale není nutná podmínka).
  3. Technické požadavky (viz dále...)

Technické požadavky pro semestrální projekt

Standardní varianta: aplikace využívá alespoň 3 prvky z následujících kategorií:

  • rozumně rozsáhlé dynamické UI generované nějakým front-endovým frameworkem (např. Mithril.js nebo ReactJS)
  • použití databáze (modelů frameworku Django) a formulářů pro zpracování uživatelských dat a uložení v databázi
  • upload souborů (např. obrázků) a jejich zpracování na serveru
  • použití session pro reprezentaci stavu aplikace (např. spolu s ověřením uživatele při přihlášení do aplikace)
  • použití technik asynchronního programování, buď v JavaScriptu (front-end) nebo v Pythonu (server)
  • obsahuje kód pro automatické testování alespoň některých částí aplikace

Nestandardní varianty: individuální podmínky dle potřeby.

Poznámky k semestrálním projektům

  • Pro serverovou část není striktně nutné použít framework Django (ale držte se alespoň Pythonu 🙏).

  • Každá aplikace by měla být doplněna hezkým vzhledem definovaným pomocí CSS

    • vzhled není hlavní prvek hodnocení – ale pokud by byl super, může nahradit jiné technické prvky ve standardní variantě
    • letos první zápočet – animované logo FJFI
  • Nejlepší práce mohou být uveřejněny v síni slávy na GitLabu FJFI nebo dokonce dále rozvíjeny a použity v praxi (viz následující nabídka témat).

  • Pokud předmět opakujete, platí podmínky z loňska (resp. můžete si vybrat, podle kterých podmínek chcete splnit zápočet).

Postup pro vypracování semestrálního projektu

  1. Výběr tématu a technických požadavků
    • témata se nesmí opakovat, ale stačí se odlišit unikátním technickým provedením (např. použít jiný framework)
    • technické varianty se můžou kombinovat i pro jedno téma – např. týmová práce ve dvojici (případně větší skupině), kde jeden vypracuje serverovou část a někdo jiný vypracuje klientskou část
  2. Rezervace
    • po výběru mě kontaktujte, abych vám projekt schválil a zarezervoval
  3. Vypracování (samostatně)
  4. Obhajoba – osobní předvedení na zápočtovém termínu, který bude vypsaný v KOSu, a poté dostanete známku A-F.

Semestrální projekt – harmonogram

  1. Výběr a rezervace tématu projektu – do 19. 5. 2024 (konec semstru)
  2. Vypracování a obhajoba – do 22. 9. 2023 (konec zkouškového období)

Termíny pro obhajobu se budou postupně objevovat v KOSu. Už v průběhu práce na projektu mi ale můžete předat průběžný stav (např. mailem), abych jej okomentoval předem – tím se velmi zefektivní hodnocení i vaše práce (případné nedostatky se odhalí co nejdříve). Průběžné neosobní odevzdávání se navíc nezapočítává do počtu pokusů v KOSu.

Nabídka témat pro semestrální projekty

Vzhledem k počtu studentů nezvládnu vymyslet dostatečný počet témat. Následující seznam slouží hlavně pro inspiraci, budu rád, když si dokážete vymýslet vlastní téma.

Téma 1: fotoalbum

  • fotoalbum se stromovou strukturou alb a fotografií
  • možnost přihlášení a správa přístupu k fotkám (resp. albům)
  • formuláře pro vytváření a modifikaci obsahu (včetně uploadu souborů)
  • je k dispozici několik variant provedení

Téma 2: plánovač společných akcí/termínů ("Doodle")

  • formulář pro vytvoření akce s danými termíny (pouze pro autorizované uživatele)
  • hlasovací formulář pro výběr preferovaného termínu (pro všechny (anonymní) uživatele, kteří znají danou URL adresu)
  • funkce pro automatické smazání starých akcí
  • případně další funkce dle vaší volby

Téma 3: aplikace pro zadávání a odevzdávání domácích úkolů

  • různé pohledy pro studenty a vyučující (po přihlášení)
  • formuláře pro vytvoření úkolu vyučujícím a pro odevzdání úkolu studentem
  • hlavní motivace (vylepšení oproti Moodle): umožnit automatickou kontrolu minimálních požadavků, které zadá vyučující
    • v případě chyby by se studentovi zobrazila zpětná vazba a možnost to opravit
    • technicky je to velmi náročný úkol (nelze zaručit bezpečnost aplikace), ale zde jde jen o prvotní návrh (stačí kontrolovat jen triviální věci jako třeba počet souborů, koncovka .py resp. .cpp, apod.)
  • motivováno aktuálními potřebami na KSI
  • projekt by bylo možné dále rozvíjet v rámci bakalářské práce

Téma 4: základ webové aplikace pro benchmarky v TNL

  • TNL je open-source knihovna pro vědecké výpočty vyvíjená na FJFI (KM + KSI)
    • paralelní výpočty na procesorech a grafických kartách (C++, CUDA)
    • řada benchmarků pro ověření efektivity jednotlivých algoritmů
  • v tomto tématu by úkol spočíval ve vytvoření databáze a webové aplikace pro přehlednou prezentaci výsledků jednotlivých benchmarků (pomocí tabulek a grafů)
  • hlavní účel: regresní testování (porovnání výsledků stejného benchmarku provedeného pro různé verze kódu)
    • v semestrálním projektu ale není třeba dojít tak daleko...
  • možnost rozšíření a pokračování v rámci bakalářské práce, a to nejen z jako čistě webový projekt
    • automatizace spouštění benchmarků, implementace nových benchmarků, ...

Téma 5: hra lodě

  • známá strategická hra pro 2 hráče (viz Jak se hrají lodě)
  • navázání "spojení" mezi dvěma hráči prostřednictvím serveru
  • automatické obnovování stránky pomocí JavaScriptu, střídání tahů
  • formuláře pro zaznamenání a odeslání akce
  • vhodné pro týmovou práci (reprezentace stavu hry na serveru a prvky vhodné pro dynamické UI)
  • lze vymyslet nové téma pro libovolnou jinou hru

Téma 6: webové aplikace pro CERN

KSI má dlouholetou spolupráci s organizací CERN, kde řada absolventů i studentů pracuje na výzkumných projektech.

Nabízí se několik "jednoduchých" témat, které by šlo zpracovat v rámci předmětu:

  • Telefonní seznam expertů a správa jejich služeb s pokrytím provozu 24/7
  • Monitorovací dashboard pro fyzikální experiment v prostředí Grafana
  • Webový inventář serverů, síťových prvků a jejich konfiguračních
    rozhraní (IPMI, SNMP)
  • Prohlížeč seznamu souborů zaznamenaných při fyzikálním experimentu s
    možností vyhledávání a filtrování
  • Webové rozhraní pro editaci kalibračních hodnot fyzikálního experimentu

Podrobnosti poskytnou kolegové na požádání 😄

pokud máte skvělé téma a nešlo by splnit standardní variantu, domluvíme se individuálně na jiných podmínkách.

--- ## Semestrální projekt – hodnocení Práce bude hodnocena na stupnici 0-100 bodů, které budou uděleny následovně: - 10 bodů – originalita tématu - 60 bodů – technické provedení - 30 bodů – vizuální provedení - bonusové body dle uvážení hodnotitele Výsledná známka se udělí dle standardní klasifikační stupnice ČVUT (viz Bílá kniha): | Známka | A | B | C | D | E | F | |--------|---|---|---|---|---|---| | Body | 100-90 | 89-80 | 79-70 | 69-60 | 59-50 | 49-0 |