TAMZ
Nahlášení zadání projektu (do 10.4.2025) + Prezentace (do 11.4.2025)
→ Nahlášení zadání projektu
    Seznam nahlášených projektů
→ Nahlášení tématu prezentace
   Seznam nahlášených prezentací

Přednášky

Přednášky vede Ing. Pavel Moravec, Ph.D. a další informace o předmětu 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.

  1. - Možnosti vývoje hybridních mobilních aplikací (HTML, JavaScript, CSS).
  2. - Práce s datem.
  3. - Template pro cvičení (práce s úložištěm, zadání je uvnitř).
  4. - 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 vs. varianta s historií (propojení s předchozím cvičením, localstorage + JSON)
  5. - Zadání pro cvičení (.pdf, zadání i s návodem je uvnitř).
  6. - Převodník měn
  7. - Canvas API.
    • Canvas API Tutorial
    • - Cílem úkolu je rozšířit předchozí úkol s převodníkem měn o vykreslení grafu, který bude znázorňovat, jak se daný kurz měnil v několika posledních měsících (ve video ukázce je jich 10).
    • - V aktuálním úkolu není potřeba řešit funkční převod měn, ale po výběru dané měny vykreslit příslušný graf (pomocí Canvas API). Úkol tedy mohou řešit i ti, kteří nedělali samotný převodník.
    • - Pokud by se nedařilo čtení dat sledovaného období z cnb_json - pokuste se alespoň o offline verzi, ve které se data pro vykreslení načtou například z vámi předvyplněného pole.
    • - Pokuste se také o lepší znázornění než je ve video ukázce - např. pokud ve sledovaném období měna posilovala, můžete vykreslovat zelenou barvou nebo naopak barvou červenou. Můžete také uživateli dát na výběr délku sledovaného období.
    • - Video ukázka pro inspiraci (ion-card, ve kterém je Canvas):
  8. - Phaser - Herní framework (4b).
    9. Základní šablona pro ukázku na cvičení
    Rozšířená šablona (pomocné funkce + další mapy, které můžete využívat)
    Je potřeba HTTP Server - můžete použít např. plugin do VS Code (Live Server), případně další možnosti z následujících odkazů:
    getting-started-phaser3
    making-your-first-phaser-3-game-czech
    Cílem úkolu je: (také viz .pdf )
     - Experimentovat s animacemi hráče, s map editorem (tvorba vlastní mapy), kolizním systémem, atd.
     - 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.
     - Přidat nepřítele (další herní postavu), který se bude např. náhodně po mapě pohybovat zároveň s hráčem.
  9. Pokračování v předchozím úkolu (4b):
    10. - Ovládání pomocí dotyků, přidání zvuků, ukládání skóre do úložiště (JSON), vylepšený pohyb nepřátel (například naváděný přímo na hráče), přidání více map, menu (může obsahovat například výběr levelu, vypnutí zapnutí zvuků), přidání různé obtížnosti, přidání střelby, atd.
    - Další užitečné informace a návody najdete na: https://labs.phaser.io/
    Ukázkový template se základním menu + přepínámí levelů
    - Video ukázka - vytvoření menu:
  10. Geolokace, poloha telefonu, atd. (2-3b)
    11. Na výběr máte více možností, pro získání bodů si stačí vybrat jednu a tu vypracovat:
    (a) Vytvořit aplikaci s mapovými podklady (možnost zjistit aktuální polohu, informace o vzdálenosti k nějakému místu/markeru, zobrazit list vybraných míst/localStorage) například pomocí Leaflet + OpenStreetMap, viz základní ukázka ve videu (bez listu vybraných míst atd.):
    https://leafletjs.com
    dostupé také pro react: https://react-leaflet.js.org
    případně můžete zkusit zobrazit i trasu. například pomocí leaflet-routing-machine:
    https://www.liedman.net/leaflet-routing-machine


    (b) rozšíření hry například o: vibrace, ovládání pomocí naklánění telefonu, restart levelu zatřepání telefonem, otočení telefonu vzhůru nohama – mute/pauza