|
1
|
# 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
|
Klientská část je postavena na systému [Node.js](https://nodejs.org/en/) společně s frameworkem [Next.js](https://nextjs.org/)
|
|
14
|
a je implementována v programovacím jazyce javascript doplněném o knihovnu [React](https://reactjs.org/) a [Typescript](https://www.typescriptlang.org/).
|
|
15
|
Dále se v projektu využívají komponenty knihovnen [Ant Design](https://ant.design/) a [Bootstrap](https://react-bootstrap.netlify.app/).
|
|
16
|
|
|
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
|
Dále je potřeba mít vygenerované API pro komunikaci se serverem. API se generuje pomocí skriptu `"generate-api"` definovaném v souboru `package.json`.
|
|
20
|
Pro úspěšné vygenerování je potřeba mít spuštěnou serverovou část aplikace a správně nastavenou její url adresu ve zmíněném skriptu. Po nainstalování
|
|
21
|
balíčků a vygenerování API stačí již klientskou část spustit pomocí příkazu `yarn run dev`. Aplikace pak defaultně běží na adrese _http://localhost:3000/_.
|
|
22
|
|
|
23
|
## Struktura
|
|
24
|
Klientská část aplikace je členěna do adresářů:
|
|
25
|
* `api` - vygenerované API
|
|
26
|
* `components` - komponenty
|
|
27
|
* `contexts` - kontexty
|
|
28
|
* `hooks` - React Hooks
|
|
29
|
* `layouts` - rozložení pohledů
|
|
30
|
* `pages` - jednotlivé pohledy
|
|
31
|
* `public` - veřejné soubory (obrázky, apod.)
|
|
32
|
* `styles` - styly
|
|
33
|
* `utils` - nástroje
|
|
34
|
|