Merge pull request #753 from Czechitas-podklady-WEB/752-js24-přidat-p…

…ráci-s-lokálním-serverem

JS2.4 Přidat práci s lokálním serverem

daweb/js2/server-komunikace/cv-destrukturovani.md → daweb/js2/server-komunikace/cv-lokalni-api.md

@@ -1,4 +1,4 @@
-## Cvičení: Destrukturování a komponenty
+## Cvičení: Lokální API a komponenty
 
 ::exc[cvlekce/workshop]
 ::exc[cvlekce/workshop-komponenty]

daweb/js2/server-komunikace/cvlekce/generator-hesel/exercise.md

@@ -6,7 +6,7 @@ lead: Vyrobte stránku na generování silných hesel.
 solutionAccess: protected
 ---
 
-Vyrobíme stránku, která pomůže uživateli vygenerovat opravdu silné a neprůstřelné heslo. Použijeme k tomu [tréninkové API](https://apps.kodim.cz/daweb/trening-api/docs/heslo) na generování hesel. Zároveň už projekt vytvoříme pomocí Vite a JSX.
+Vyrobte stránku, která pomůže uživateli vygenerovat opravdu silné a neprůstřelné heslo. Použijte k tomu veřejné API na [genratr.com/](https://api.genratr.com/) na generování hesel. Zároveň už projekt vytvořte pomocí Vite a JSX.
 
 1. Založte si nový projekt příkazem
 
@@ -16,8 +16,8 @@ Vyrobíme stránku, která pomůže uživateli vygenerovat opravdu silné a nepr
 
 1. Otevřete si ve VS Code vytvořenou složku `cviceni-generator-hesel`.
 1. Prohlédněte si dokumentaci API pro generování hesla a vyzkoušejte si jej „na sucho“ v prohlížeči. Zkuste vygenerovat hesla různých délek a prohlédněte si, jak vypadá struktura dat, která API vrací.
-1. V hlavním `index.jsx` promažte JSX ve funkci `render`. Nechte na stránce pouce prvek `.container` a nadpis `h1`.
-1. Před voláním funkce `render` vytvořte proměnnou `data`, do které si pomocí volání `fetch` na tréninkové API uložíte vygenerované heslo délky 16.
+1. V hlavním `index.jsx` promažte JSX ve funkci `render`. Nechte na stránce pouze prvek `.container` a nadpis `h1`.
+1. Před voláním funkce `render` vytvořte proměnnou `data`, do které si pomocí volání `fetch` na tréninkové API uložíte vygenerované heslo délky 12.
 1. Upravte JSX ve funkci `render` tak, aby zobrazila uživateli vygenerované heslo s nějakým vhodným textem pro uživatele.
 
 ### Bonus
@@ -35,15 +35,15 @@ import '../global.css';
 import './index.css';
 
 const response = await fetch(
-  'https://apps.kodim.cz/daweb/trening-api/apis/passwords?length=16'
+  'https://api.genratr.com/?length=12&uppercase&lowercase&special&numbers'
 );
-const data = await response.json();
+const json = await response.json();
 
 document.querySelector('#root').innerHTML = render(
   <div className="container">
     <h1>Webová aplikace</h1>
     <p>
-      Vaše heslo je: {data.password}, délka: {data.length}
+      Vaše heslo je: {json.password}, délka: 12
     </p>
   </div>
 );
@@ -72,14 +72,14 @@ import '../global.css';
 import './index.css';
 
 const response = await fetch(
-  'https://apps.kodim.cz/daweb/trening-api/apis/passwords?length=16'
+  'https://api.genratr.com/?length=12&uppercase&lowercase&special&numbers'
 );
-const data = await response.json();
+const json = await response.json();
 
 document.querySelector('#root').innerHTML = render(
   <div className="container">
     <h1>Webová aplikace</h1>
-    <StrongPassword password={data.password} length={data.length} />
+    <StrongPassword password={json.password} length={12} />
   </div>
 );
 ```

daweb/js2/server-komunikace/cvlekce/workshop-komponenty.md

@@ -9,7 +9,5 @@ solutionAccess: protected
 Pokračujte v předchozím cvičení. V tomto cvičení vytvoříme komponenty pro zobrazení informací o workshopu.
 
 1. Už známým postupem vytvořte komponentu `WorkshopIntro`, která bude zobrazovat informace o workshopu. Tato komponenta bude mít zatím dvě `props` s názvem `title` a `description`. Komponenta bude zobrazovat název workshopu a jeho popis. Komponentu mějte v oddělené složce, správně ji importujte a použijte ve funkci `render`.
-1. V komponentě `Workshop` použijte k získání názvu a popisu workshopu destrukturování.
 1. Vytvořte další dvě komponenty `Venue` a `Instructor`, které budou zobrazovat informace o místě konání a instruktorovi. Dejte těmto komponentám takové `props` jaké uznáte za vhodné, abyste zobrazili takové informace, jaké chcete.
-1. V obou komponentách si vyzkoušejte destrukturování.
-1. Data o celém workshopu jsou relativně obsáhlá, můžete si z nich vybrat další informace, které vás zajímají a zobrazit je na stránce. Dajte také stránce nějakou hezkou strukturu a styly.
+1. Data o celém workshopu jsou relativně obsáhlá, můžete si z nich vybrat další informace, které vás zajímají a zobrazit je na stránce. Dejte také stránce nějakou hezkou strukturu a styly.

daweb/js2/server-komunikace/cvlekce/workshop.md

@@ -6,9 +6,10 @@ lead: Vytvořte aplikaci zobrazující informace o workshopu.
 solutionAccess: protected
 ---
 
-Vyzkoušejte si práci s daty, která už vypadají o kousek realističtěji.
+Vyzkoušejte si práci s lokálními daty, která už vypadají o kousek realističtěji.
 
-1. API endpoint na adrese https://apps.kodim.cz/daweb/trening-api/apis/workshop vrací JSON s informacemi o smyšleném IT workshopu. Prohlédněte si dobře strukturu dat, která API vrací.
-1. Vytvořte nový projekt pomocí `npm init kodim-app@latest cviceni-workshop jsx`. V tomto projektu si v hlavním `index.jsx` stáhněte data pomocí `fetch` a zatím si je pro kontrolu vypište do konzole.
-1. Pomocí destrukturování si dvou separátních proměnných uložte objekty představující instruktora a místo konání workshopu.
+
+1. Repozitář [cviceni-workshop-api](https://github.com/Czechitas-podklady-WEB/cviceni-workshop-api) obsahuje data pro lokální API, které poskytuje informace o smyšleném IT workshopu. Naklonujte si tento repozitář a spusťte lokální API server pomocí `npx apidroid@latest`.
+1. Data o workshopu najdete na API endpointu `/api/workshops/0`. Vyzkoušejte si jej v prohlížeči a prohlédněte si strukturu dat.
+1. Nechte API spuštěné a vytvořte nový projekt pomocí `npm init kodim-app@latest cviceni-workshop jsx`. V tomto projektu si v hlavním `index.jsx` stáhněte data pomocí `fetch` a zatím si je pro kontrolu vypište do konzole.
 1. Pomocí JSX zobrazte na stránce nějaké základní informace o workshopu. Nemusíte zobrazovat vše, vyberte si pouze to, co vás zajímá. Zobrazte však alespoň název workshopu, jméno instruktora a místo konání workshopu.

daweb/js2/server-komunikace/entry.yml

@@ -7,7 +7,8 @@ sections:
   - format-json
   - api-js
   - cv-volani-api
-  - destrukturovani
-  - cv-destrukturovani
+  - verejna-api
+  - lokalni-api
+  - cv-lokalni-api
   - shrnuti
   - ulozky-na-doma

daweb/js2/server-komunikace/lokalni-api.md

@@ -8,12 +8,27 @@ Frontend postavený nad takovým API pak samozřejmě nepůjde zveřejnit na int
 
 ### Zdroj dat
 
-Abychom mohli lokální server spustit, potřebujeme mít nějaká data, která nám API bude poskytovat. V pozdějších lekcích si ukážeme, jak si můžete sami vytvořit data pro své lokální API. Do té doby si data vždy stáhneme z nějakého připrazeného git repozitáře.
+Abychom mohli lokální server spustit, potřebujeme nejprve mít nějaká data, která nám API bude poskytovat. V pozdějších lekcích si ukážeme, jak si můžete sami vytvářet data pro svá lokální API. Do té doby si data vždy stáhneme z nějakého připrazeného git repozitáře.
 
-Lokální server spustím ve složce příkazem:
+Pro následující ukázku si naklonujte [následující repozitář](https://github.com/Czechitas-podklady-WEB/ukazka-simpsons-api), který obsahuje data o několika postavách z animovaného seriálu Simpsonovi. Nakonovanou složku si otevřete ve VS Code a v terminálu spusťte následující příkaz:
 
 ```shell
-npx jsonhost
+npx apidroid@latest
 ```
 
-Pokud neřekneme jinak, server běží na adrese [http://localhost:4000](http://localhost:4000).
+Balíček `apidroid` je nástroj, který nám umožní spustit lokální API. Je podobný balíčku `serve`, který jste používali k spuštění lokálního serveru pro frontend. Po spuštění příkazu se vám v terminálu zobrazí informace o tom, na jaké adrese a portu je API dostupné. Většinou to bude `http://localhost:4000`, pokud není port 4000 obsazený jiným procesem.
+
+### Použití lokálního API
+
+Vždy, když budeme mít k dispozici repoziář s daty pro lokální API, dokumentace k API bude vždy v souboru `README.md` v kořenové složce repozitáře. Na GitHubu si tak vždy na hlavní stránce repozitáře můžete přečíst, jaké endpointy API nabízí a jak je můžete použít.
+
+V případě Simpsonových z dokumentace vyčteme, že API nabízí endpointy pro získání seznamu všech postav a detaily jedné postavy podle ID.
+
+- Seznam všech postav: `http://localhost:4000/api/characters`
+- Detail jedné postavy: `http://localhost:4000/api/characters/:id`
+
+Vyzkoušejte si v prohlížeči otevřít jak seznam postav, tak například postavu s ID 1.
+
+:::box{type=remember}
+Vždy, když budete chtít použít lokální API, musíte mít spuštěný `apidroid` v samostatném okně VS Code. Při vývoji tak budete mít otevřena vždy dvě okna VS Code - jedno s frontendem a druhé s API.
+:::

daweb/js2/server-komunikace/shrnuti.md

@@ -5,4 +5,4 @@ Po této lekci byste měli vědět a znát
 - základy posílání pořadavků mezi prohlížečem a serverem,
 - jak funguje formát JSON a k čemu slouží,
 - jak z JavaScriptu odeslat požadavek na nějaké API,
-- jednoduché destrukturování objektů a jak jej můžeme použít v komponentách.
+- jak pracovat s lokálním API serverem.