Projekt

Obecné

Profil

Stáhnout (2 KB) Statistiky
| Větev: | Tag: | Revize:
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