Používání API 1

76. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Jak vypadá zápis hlaviček v HTTP požadavcích?
Jaké cykly známe v JS?
Je git decentralizovaný?
Musí být akce ve Vuex synchronní?
Jak se merge conflicty řeší?

Sestavení Vue aplikace

  • soubory .vue nejsou v prohlížeči zobrazitelné
  • npm run dev nám při změně naší aplikaci sestaví znovu
  • chceme-li nahrát webovou stránku, musíme jí sestavit
  • npm run build

Co vlastně sestavení dělá?

  • vezme soubory a ty zredukuje na balíčky
  • jednotlivé komponenty se uloží do JS kódu, který umí dle našich šablon generovat HTML, které se vkládá do stránky
  • reálně sestavená aplikace obshauje pouze HTML, který najedeme v public/index.html s odkazy na JS balíčky
  • v případě, že používáme balíčky se zabalí společně se JS

Sestavená aplikace neobsahuje nepoužíváne assety a celkově věci pro development.

Když aplikaci sestavíme, Vue automaticky počítá, že se bude nacházet na hlavní složce domény — https://smth.cz/. Toto chování lze změnit.

Změna hlavní složky

V hlavní složce založíte soubor vue.config.js ve kterém nastavíte následující:

Pokud používáte vue-router a máte nastavený jiný mód než hash, je nutné nastavit správně server, aby Vaše požadavky uměl zpracovat.

Mód history je modernější a lepší pro SEO. Na mém hostingu či na GitHub Pages to nelze nastavit.

Počítání měny v Klikačce

Morsmordre 2

Cílem je vytvořit Vue aplikaci, která bude komunikovat s Web REST API Morsmordre. Práce je rozdělena do několika části. Vždy odevzdáváte jednu část, po které můžete jít na další. Práci si uložte, bude potřeba příští hodiny.

Bodový základ: 3b

Části

  1. (SPOLEČNĚ) Odeslání požadavku na API — získání anonymizovaných uživatelů. Zobrazení dat.
  2. Získání všech objektů Playground a jejich zobrazení.
  3. Přidání objektu playgroundu.
  4. Smazání objektu z playgroundu. (Jen když můžeme)
  5. Filtrace objektů (moje vlastní, dle datumu, ...)

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/