| 1 |
94016960
|
Jaroslav Hrubý
|
# Frontend
|
| 2 |
|
|
|
| 3 |
|
|
## Použité technologie
|
| 4 |
|
|
* Node.js
|
| 5 |
|
|
* Next.js
|
| 6 |
|
|
* React
|
| 7 |
|
|
* Typescript
|
| 8 |
|
|
* Ant Design
|
| 9 |
|
|
* Bootstrap
|
| 10 |
|
|
* Openapi Generator
|
| 11 |
|
|
* Sweet Alert 2
|
| 12 |
|
|
|
| 13 |
a4b7eec8
|
Lukáš Vlček
|
Frontend (UI) anotační aplikace je postaven na React frameworku [Next.js](https://nextjs.org/) (využívající systém [Node.js](https://nodejs.org/en/))
|
| 14 |
|
|
a je implementován v programovacím jazyce TypeScript (některé knihovny jsou implementovány "jen" v JavaScriptu).
|
| 15 |
|
|
Velká část UI komponent a implementace rozložení využívá (obvykle upravené) komponenty z UI frameworků [Ant Design](https://ant.design/) (tabulky, tlačítka, modály...) a [Bootstrap](https://react-bootstrap.netlify.app/) (některé layout prvky, taby...).
|
| 16 |
94016960
|
Jaroslav Hrubý
|
|
| 17 |
|
|
## Spuštění vývojového prostředí
|
| 18 |
|
|
Před spuštěním je nutno nainstalovat všechny knihovny pomocí balíčkovacího systému [yarn](https://yarnpkg.com/) (příkaz `yarn install`).
|
| 19 |
a4b7eec8
|
Lukáš Vlček
|
|
| 20 |
|
|
V případě změny REST API je potřeba upravit (přegenerovat) API client pro komunikaci se serverem. K automatickému generování API se používá knihovna OpenApiGenerator, neboť
|
| 21 |
|
|
server publikuje rozhraní ve formátu OpenApi (resp. Swagger). Pro snazší použití je připraven skript `"generate-api"` definovaný v souboru `package.json` (který je možné spustit příkazem `yarn generate-api`).
|
| 22 |
|
|
Pro úspěšné automatické vygenerování API client je potřeba mít spuštěnou serverovou část aplikace a správně nastavenou její url adresu ve zmíněném skriptu.
|
| 23 |
|
|
|
| 24 |
|
|
Po nainstalování balíčků a případném vygenerování (aktualizaci) API clienta stačí již klientskou část spustit pomocí příkazu `yarn dev`. Aplikace pak ve výchozím nastavení poběží na adrese _http://localhost:3000/_.
|
| 25 |
94016960
|
Jaroslav Hrubý
|
|
| 26 |
|
|
## Struktura
|
| 27 |
|
|
Klientská část aplikace je členěna do adresářů:
|
| 28 |
a4b7eec8
|
Lukáš Vlček
|
* `api` - vygenerované třídy API client
|
| 29 |
94016960
|
Jaroslav Hrubý
|
* `components` - komponenty
|
| 30 |
|
|
* `contexts` - kontexty
|
| 31 |
|
|
* `hooks` - React Hooks
|
| 32 |
|
|
* `layouts` - rozložení pohledů
|
| 33 |
|
|
* `pages` - jednotlivé pohledy
|
| 34 |
|
|
* `public` - veřejné soubory (obrázky, apod.)
|
| 35 |
|
|
* `styles` - styly
|
| 36 |
|
|
* `utils` - nástroje
|