ASWI - Pokročilé softwarové inženýrství » ASWI 2022 » Zpracování geografických údajů v novoasyrských textech (KBS FF) - Code of Duty

h1. Frontend Development Quickstart Guide

Pro spuštění frontendové aplikace je potřeba mít nainstalovanou (ideálně) nejnovější verzi YARN: https://yarnpkg.com/, který lze snadno nainstalovat přes NPM jež je součástí NodeJS (https://nodejs.org/en/). Yarn nainstalujeme následujícím příkazem (v rootové složce frontendu, tzn. /frontend):

<pre>

npm install --global yarn

</pre>

Následně můžeme příkaz yarn používat kdekoliv v konzoli (nicméně může být nutný restart). Před samotným spuštěním je potřeba stahnout všechny dependencies pro projekt, což provedeme příkazem: <pre>yarn install</pre>

Před spuštěním pro lokální development je nutno vytvořit .env soubor, který bude mít správnou konfiguraci, což provedeme python skriptem *create_dev_env.py* (skript je funkční pro jakoukoliv verzi Pythonu od 3.7+). Tzn v terminálu zadáme:

<pre>python create_dev_env.py</pre>

Pokud bychom potřebovali konfiguraci pro deployment, použijeme skript *create_prod_env.py*.

Samotnou aplikaci spustíme příkazem:

<pre>yarn start</pre>

Aplikace ve výchozím nastavení poběží na portu 3000 na localhostu, tzn.: http://localhost:3000/

h2. Adresářová struktura

* features - logické moduly v aplikaci - např. katalog, home, apod.

* swagger - kód vygenerovaný ze swaggeru přes gen:swagger skript

* utils - utilitní třídy, které se logicky nehodí do žádné features složky

h2. Sdílení stavu mezi komponentami

Pokud potřebujeme sdílet stav jinak než přes props (např. napříč více komponentami) musí se použít globální store objekt, který poskytuje Redux (redux/store.ts). Pro přehlednější kód se v projektu navíc využívá knihovna Redux Toolkit, který do značné míry zpřehledňuje a zjednodušuje Redux kód.

h3. Slice

Slice označuje úsek stavu, který lze mezi komponentami sdílet - např. autentikace, načtené itemy, apod. Šablony, ze kterých je možné vyjít jsou např. *userSlice.ts* (navíc obsahuje i persistenci do localStorage). Slice vždy obsahuje jméno, reducers - dělají operace nad stavem, počáteční stav (při startu aplikace) a případně extraReducers - pro thunks. Pro připojení slice do storu musíme získat ještě jeho "root" reducer a připojit ho v modulu storu:

<pre>

const store = createStore(

    combineReducers({ auth: authReducer, theme: themeReducer, myNewState: myNewStateReducer }),

    {}

)

 </pre>

h3. Thunks

Thunks jsou funkce, které chceme aby se prováděli async - tzn. např. volání API a typicky se umisťují buď do vlastního modulu (userThunks.ts) nebo do stejného modulu jako slice. Opět lze vyjít z příkladů userThunks.ts pro implementaci základních API callů.