Nahlášení zadání projektu (do 10.4.2026) + Prezentace (do 10.4.2026)
→ Nahlášení zadání projektu
Seznam nahlášených projektů
→ Nahlášení tématu prezentace
Seznam nahlášených prezentací
11.5.2026 v zápočtovém týdnu proběhne poslední cvičení, ve kterém bude možné odevzdat projekty.
Přednášky
Přednášky vede kolega Pavel Moravec a jejich obsah a další informace lze dohledat v seznamu kurzů na lms.vsb.cz.
Cvičení
Během semestru budou zadávány úkoly, které budou hodnoceny na cvičeních. Za hodnocení z těchto úkolů bude možné získávat body na zápočet. Pokud se nemůžete osobně dostavit na cvičení a odprezentovat úkol, zašlete mi prosím své řešení e-mailem. Následně mi ho ukážete osobně na našem dalším společném cvičení.- Možnosti vývoje hybridních mobilních aplikací (HTML, JavaScript, CSS)
- Hybridní mobilní aplikace (.pdf)
- Ionic Framework (HTML, JS, CSS)
- Základy (HTML/Ionic)
- tlačítko
- card (karta)
- sablona-pro-cviceni
- w3schools HTML
- w3schools JavaScript
- w3schools ladění
- remote-debugging
- Práce s datem (3b)
- Template pro cvičení (práce s datem a časem, zadání je uvnitř)
- w3schools HTML DOM Poskytnutá ukázka slouží jako inspirace. Výslednou podobu a strukturu aplikace si navrhněte podle vlastní kreativity.
- Template pro cvičení (práce s úložištěm, zadání je uvnitř).
- localStorage
- JSON
- Vytvoření mobilní aplikace pomocí monaca.io video návod monaca.io Poskytnuté ukázky slouží jako inspirace. Výslednou podobu a strukturu aplikace si navrhněte podle vlastní kreativity.
- BMI Kalkulačka
- Range slider
- Radios
- Dialog (pro zobrazení výsledku)
- Cílem je vypracovat BMI kalkulačku do podoby v následující video ukázce (je možné vycházet z předchozího cvičení).
- Základní varianta bez historie (2b)
- Varianta s historií (+1b) (propojení s předchozím cvičením, localstorage + JSON)
- Poskytnuté ukázky slouží jako inspirace. Výslednou podobu a strukturu aplikace si navrhněte podle vlastní kreativity.
- Zadání pro cvičení (.pdf) - zadání i s návodem je uvnitř: 2,5b
- Převodník měn
- Zadání pro cvičení (.pdf, zadání i s návodem je uvnitř)
- 1-3b podle rozsahu:
- - Prevodnik bez volitelnych argumentu se zakladnim vyberem men.
- - Volitelne argumenty (date, lang).
- - Vyuziti SSE (Server-Sent Events).
- - Vylepseny vyber men s vyhledavanim/filtrem men.
- Napoveda:
ion-select
- Ukázka dvou variant se základním výběrem měny + volitelné argumenty (date, lang):
- Herní framework - Phaser (6b) (.pdf - návod je uvnitř). (A) Základní šablona pro ukázku na cvičení
-
w3schools HTTP
w3schools Fetch API
+ 0,5b: zobrazení vtipu pomocí Fetch API:
jokeapi.dev
api.chucknorris.io
Pro lokální spuštění při vývoji můžete použít rozšíření Live Server ve VS Code, případně můžete zůstat u projektu přes WebNative jako doposud.
(B) Ukázka PWA na homel.vsb.cz (progressive web application)
PWA umožňuje nainstalovat hru přímo přes mobilní prohlížeč jako běžnou aplikaci. Stačí soubory nahrát např. na server homel, otevřít odkaz a v menu prohlížeče si ji přidat na plochu. Pokud je správně nastaven Service Worker pro ukládání souborů do mezipaměti, bude hra fungovat i bez připojení k internetu.
(C) Částečně funkční vyplněná základní šablona v kombinaci s PWA (D) Zadání:
- (1b) Tvorba vlastní mapy: https://www.mapeditor.org/
- (1b) Po mapě se budou náhodně generovat předměty, které bude hráč sbírat a za které dostane body + přidat text, který bude zobrazovat nejlepší skóre a to se bude dekrementovat, pokud v časovém limitu hráč nenarazí na žádný předmět + ukládání nejlepšího skóre do úložiště.
- (1b) Přidat nepřítele (další herní postavu), který se bude např. náhodně po mapě pohybovat zároveň s hráčem (při kolizi s hráčem mu např. resetuje skóre).
- (1b) Doplňte ovládání postavy kliknutím myši/dotykem prstu (např. přes
- (1b) Vyzkoušet si aplikaci ve verzi PWA (progressive web application)
- (1b) Další funkcionalita (např. zvuk, menu, více levelů)
- Ukázku
- Další ukázky pro herní engine najdete na https://labs.phaser.io/3.86/index.html.
- (1b) Po mapě se budou náhodně generovat předměty, které bude hráč sbírat a za které dostane body + přidat text, který bude zobrazovat nejlepší skóre a to se bude dekrementovat, pokud v časovém limitu hráč nenarazí na žádný předmět + ukládání nejlepšího skóre do úložiště.
- (1b) Přidat nepřítele (další herní postavu), který se bude např. náhodně po mapě pohybovat zároveň s hráčem (při kolizi s hráčem mu např. resetuje skóre).
- (1b) Doplňte ovládání postavy kliknutím myši/dotykem prstu (např. přes
pointerdown). - (1b) Vyzkoušet si aplikaci ve verzi PWA (progressive web application)
- (1b) Další funkcionalita (např. zvuk, menu, více levelů)
- Ukázku
pointerdown naleznete např. zde: Move and stop at position. - Další ukázky pro herní engine najdete na https://labs.phaser.io/3.86/index.html.