{"id":22482204,"url":"https://github.com/wendykr/cviceni-chitchat","last_synced_at":"2026-04-27T21:32:01.645Z","repository":{"id":228804513,"uuid":"774798473","full_name":"wendykr/cviceni-chitchat","owner":"wendykr","description":"Miniaplikace na procvičení znalostí z kurzu Základy TypeScriptu.","archived":false,"fork":false,"pushed_at":"2024-03-29T04:12:00.000Z","size":357,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T19:18:42.372Z","etag":null,"topics":["javascript","kodimcz","local-api","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wendykr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-20T07:53:54.000Z","updated_at":"2024-04-17T13:30:06.000Z","dependencies_parsed_at":"2024-03-20T15:46:35.473Z","dependency_job_id":null,"html_url":"https://github.com/wendykr/cviceni-chitchat","commit_stats":null,"previous_names":["wendykr/cviceni-chitchat"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wendykr/cviceni-chitchat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wendykr%2Fcviceni-chitchat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wendykr%2Fcviceni-chitchat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wendykr%2Fcviceni-chitchat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wendykr%2Fcviceni-chitchat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wendykr","download_url":"https://codeload.github.com/wendykr/cviceni-chitchat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wendykr%2Fcviceni-chitchat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32356598,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","kodimcz","local-api","typescript"],"created_at":"2024-12-06T16:19:56.944Z","updated_at":"2026-04-27T21:32:01.629Z","avatar_url":"https://github.com/wendykr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cvičení: Aplikace ChitChat\n\nKurz Základy TypeScriptu\n\nV tomto cvičení vytvoříme jednoduchou aplikaci pro chatování podobnou například Slacku. Abychom se přiblížili reálnému světu, budeme pracovat s daty z API serveru.\n\nFinální aplikace bude vypadat nějak takto:\n![Ukázka možného výsledku](https://kodim.cz/cms/assets/kurzy/zaklady-ts/lekce/nastaveni/cviceni/chitchat.png)\n\n\n## 1. Založení projektu\nPro založení projektu pro aplikaci ChitChat budeme vycházet z šablony pro vanilla TypeScript. Postupujte podle následujících kroků:\n\n1. Založte si nový vanilla TypeScript projekt pomocí šablony `kodim-app`:\n    ```\n    npm init kodim-app@latest cviceni-chitchat vanilla-ts\n    ```\n\n    Tento příkaz vytvoří nový adresář chitchat, který si otevřete ve VS Code editoru.\n\n2. V [připraveném repozitáři](https://github.com/kodim-vyuka/cviceni-chitchat-zadani) máte k dispozici soubory `index.html` a `styles.css`, ve kterých je vytvořená kostra aplikace s ukázkovým obsahem. Tento repozitář si nemusíte klonovat, stačí si stáhnout soubory přímo z prohlížeče a vložit je do složky `src` ve vašem projektu.\n3. Spusťte vývojový server příkazem\n    ```\n    npm run dev\n    ```\n    a otevřete si aplikaci v prohlížeči. Měli byste vidět kostru aplikace s ukázkovým obsahem.\n4. Tentokrát budeme pracovat s REST API serverem, který bude poskytovat obsah pro kanály, zprávy a vlákna. Tento server je již připravený v [tomto repozitáři](https://github.com/kodim-vyuka/chitchat-api). Repozitář si naklonujte a otevřete si jej v **novém okně** VS Code editoru. Server se spustí příkazem\n    ```\n    npx jsonhost@latest\n    ```\n    Server pak bude běžet na adrese `http://localhost:4000`. Více informací o API najdete přímo v README repozitáře.\n\n5. Všimněte si, že nyní vám na počítači běží dva lokální servery. Jeden vývojový pro frontend a druhý pro backend API.\n6. Prohlédněte si dobře data, která API vrací. Pro tato data bude později potřeba vytvořit datový model v TypeScriptu. Zatím model nevytvářejte, ale zkuste si udělat hrubou představu, jak by mohl vypadat.\n\n\n## 2. Seznam kanálů\nV aplikaci ChitChat budeme pracovat s kanály, které budou zobrazené v levém sloupci. V tomto cvičení si stáhneme data o kanálech z API serveru a zobrazíme je na stránce.\n\nJelikož nemáme React nebo jiný frontend framework, který umí pracovat se stavem, celý obsah aplikace vždy znova vykreslíme při každém načtené stránky. Všechna data je tedy potřeba stáhnout na začátku a poté z nich vytvořit HTML obsah stránky.\n\nPodobně jako ve cvičení s kalendářem si na začátku vyberte, zda budete obsah stránky tvořit čistě pomocí `innerHTML` nebo pomocí DOM API a `createElement`. Je zcela na vás, který postup je vám bližší.\n\n1. Nejdříve je potřeba vytvořit část datového modelu pro kanály. Založte soubor `data-model.ts` a vytvořte příslušné datové typy.\n2. Nyní už můžete po načtení stránky fetchnout data z API a dle dat vytvořit obsah levého sloupce s kanály.\nPokud se vám toto povedlo, máte v podstatě vyhráno, zbytek aplikace je velmi analogický.\n\n\n## 3. Zprávy a vlákna\nDokončíme aplikaci ChitChat tím, že zobrazíme zprávy a vlákna ve prostředním a pravém sloupci.\n\nZásadní věc, kterou si musíme rozmyslet je, odkud zjistíme, kterou zprávu zobrazit a jaké vlákno máme zobrazit. Kdybychom pracovali v Reactu, měli bychom tuto informaci uloženou někde ve stavu. Ve vanilla projektu si vypomůžeme search parametry v URL adrese.\n\nPokud chceme například zobrazit obsah kanálu s `id` 1, URL adresa bude vypadat takto:\n\n```\nhttp://localhost:8080/?channel=1\n```\nKdyž chceme navíc zobrazit obsah vlákna u zprávy s `id` 2, URL adresa bude vypadat takto:\n\n```\nhttp://localhost:8080/?channel=1\u0026thread=2\n```\nPokud si nejste jistí jak získat search parametry z URL adresy, můžete se podívat na příklady použití třídy [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#examples).\n\n### Zobrazení zpráv a vláken\nJakmile máte k dispozici všechny informace o tom, který kanál, případně které vlákno je třeba zobrazit, stačí opět\n\n1. vytvořit příslušný datový model pro data z API,\n2. stáhnout data z API podle toho, co je v URL adrese,\n3. zobrazit data na stránce vámi zvoleným způsobem.\n\nPokračujte v tomto duchu, dokud nebude aplikace funkční, úžasná, krásná, a dokud nepocítíte hřejivý pocit z dobře odvedené práce. Samozřejmě se můžete rozvášnit a přidat nějaké bonusové featury nebo si dokonce pohrát s API serverem a přidat nějaká vlastní data. Představivosti se meze nekladou.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwendykr%2Fcviceni-chitchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwendykr%2Fcviceni-chitchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwendykr%2Fcviceni-chitchat/lists"}