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í

  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ř).
    • localStorage
    • JSON
    • Cílem je upravit template do podoby v následující video ukázce s využitím localStorage:
  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, jak je ukázáno na video ukázce. Úkol tedy mohou řešit i ti, kteří nedělali samotný převodník.
    • Pokud by se nedařilo čtení dat z předchozích měsíců 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.
    • Cílem je tedy zadání vypracovat například do podoby jako v následující video ukázce (ion-card, ve kterém bude Canvas):
  8. - Phaser - Herní framework (4b).
  9. 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
    Základní template pro ukázku na cvičení
    • Cílem úkolu je (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 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 náhodně po mapě pohybovat zároveň s hráčem.

  10. Pokračování v předchozím úkolu (4b):
  11. - 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:
  12. Geolokace, poloha telefonu, kompas, atd. (2-3b)
  13. Na výběr máte ze tři možností, pro získání bodů si stačí vybrat jednu:
    (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 video:
    https://leafletjs.com/examples.html
    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, o ovládání pomocí naklánění telefonu, restart levelu zatřepání telefonem, otočení telefonu vzhůru nohama – mute/pauza

    (c) vytvoření aplikace, která je ukázána v následujícím .pdf na poslední straně
    (.pdf) práce s nativním rozhraním - geolokace, poloha telefonu, kompas.
    geolocation
    accelerometer
  14. 6.5. Odevzdání předchozího úkolu + prezentace nebo odevzdání projektu
  15. 13.5. Odevzdání projektu nebo prezentace