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 2024-2025

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

  • 25.4. (dnes) – file upload, session, cookies and local storage
  • 2.5. – user authentication and authorization
  • 9.5. – (děkanské volno)
  • 16.5. – testing
  • 23.5. – security, deployment

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í, primárně jdle o funkčnost – ale pokud by byl super, může nahradit jiné technické prvky ve standardní variantě
  • 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 25. 5. 2025 (konec semstru)
  2. Vypracování a odevzdání – do 31.7. 2025
  3. Obhajoba – do 19. 9. 2025 (konec zkouškového období)

Termíny pro obhajobu se budou postupně objevovat v KOSu, ale přihlásit se můžete až po odevzdání projektu. Při odevzdání můžete navrhnout preferovaný den, kdy byste chtěli přijít na obhajobu.

Před finálním odevzdáním mi také můžete ukázat průběžný stav (např. mailem), abych jej okomentoval předem a případně poradil s nějakými problémy.

V krajních případech vás po odevzdání můžu požádat o přepracování určité části projektu (proto mají odevzdání a obhajoba oddělené termíny).

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: vlastní sociální síť

  • vytvořte si svou vlastní ideální sociální síť 😄
  • nebo jednoduchý klon sítě Facebook / X / Truth Social / Instagram / Youtube / ...
  • základní funkce pro přidávání a správu obsahu
  • výsledek samozřejmě nemusí být dokonalý, protože na rozdíl od vývojářů globálních společností nedostanete 💵 ale jen zápočet

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, poté real-time komunikace mezi klienty přes WebSocket pomocí Django Channels
  • 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

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.

- 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).

--- ## 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 |

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__.