návod verze 2024-05-11 Windows ## 1. Nainstalujte si Node.js Node.js je systém pro tvorbu internetových aplikací, především webových serverů. Protože Charticulator je webová aplikace a my se ho pokusíme zprovoznit lokálně na svém počítači, budeme prostředí Node.js potřebovat. Nainstalujte si verzi 16.2.20 *(instalace ke stažení níže, pravděpodobně verze 64-bit, ale volte podle svého PC)*. Novější verze (17.0+) bude bohužel dělat neplechu... Windows 64-bit: [https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi](https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi) Windows 32-bit: [https://nodejs.org/dist/v16.20.2/node-v16.20.2-x86.msi](https://nodejs.org/dist/v16.20.2/node-v16.20.2-x86.msi) Proč neinstalujeme nejnovější verzi Node.js? Není běžné instalovat staré verze aplikací (hlavně z bezpečnostních důvodů), ale pro teď nám to bude muset stačit: verze 17.0 opravila jednu specifickou chybu, a tato oprava teď paradoxně neumožňuje Charticulatoru rychle a správně nastartovat. Instalace je proto samozřejmě na vlastní nebezpečí. Pokud chcete, můžete Charticulator bez instalace zkoušet zde: https://ilfat-galiev.im/charticulator/ Tato webová verze je ale trochu jiná ve svém grafickém rozhraní a nemusí být podle mých zkušeností úplně vychytaná: nicméně většinu funkcí tam najdete. Při instalaci Node.js není třeba zaklikávat navíc žádné další volby (mimo odsouhlasení licence), tj. nejspíše si vystačíte s tlačítkem Další/Next až do konce instalace. ![[Pasted image 20240513195942.png]] ## 2. Stáhněte si Charticulator Na Githubu leží poslední zveřejněná verze nástroje od Microsoftu. Stáhněte si ho jako ZIP soubor z této URL podle obrázku níže (zelené tlačítko Code -> Download ZIP): https://github.com/microsoft/charticulator ![[Pasted image 20240513200106.png]] ZIP soubor rozbalte. Rozbalenou složku doporučuji si pro přehlednost přejmenovat třeba na "charticulator". Pro jednoduchost můžete přetáhnout složku s rozbaleným Charticulatorem do kořenového adresáře na disku C:/ - není to ale podmínka, další kroky si přizpůsobte podle toho, kde budete mít složku uloženou... Po otevření by složka měla obsahovat mnoho souborů - pozor, rozbalování souborů ve Windows někdy vytvoří ještě jednu složku nad rozbalenou složkou... Cílem je mít složku nazvanou "charticulator" a po jejím otevření vidíte množství souborů, jko na obrázku níže: ![[Pasted image 20240513200302.png]] ## 3. Spusťte PowerShell PowerShell je automatizační nástroj se skriptovacím řádek zabudovaný do Windows - takže ho v systému už pravděpodobně máte. Můžeme ho tedy rovnou spustit. Nevíte kde? Prostě ho hledejte jako jakoukoliv jinou aplikaci ve Start menu. Pokud tam nebude, můžete kliknout pravým tlačítkem na ikonu Windows na hlavní liště a vybrat Windows PowerShell. ![[Pasted image 20240513200642.png]] ## 4. Přesuňte se do do složky PowerShell nastartuje v nějaké složce: to poznáte tak, že před blikajícím kurzorem je vypsaná cesta, kde se zrovna nacházíte (např. PS *C:/Users/Jméno* atp.). Je potřeba se přesunout do složky s Charticulatorem. To uděláte tak, že zadáte příkaz cd *(change directory)* a za něj napíšete cestu, kam se má PowerShell přesunout. To co do PowerShellu napíšete tak bude vypadat nějak takto: cd *cesta-k-souboru* Takže např. cd C:/charticulator nebo cd c:/Users/Jmeno/Downloads/charticulator-master a pak jen kliknete na Enter. Že se to povedlo poznáte tak, že se před blikajícím kurzorem objeví jiná cesta. Nyní jste se přesunuli a pracujete s PowerShellem ve složce s Charticulatorem. Pokud nevíte, kde složku máte, můžete na ni kliknout pravým tlačítkem myši v Průzkumníkovi a vybrat Kopírovat jako cestu. Tu pak do PowerShellu jen vložíte. ![[Pasted image 20240513200734.png]] ## 4. Vyvolejte yarn Yarn je takzvaný balíčkovací systém, který mimochodem vyvinul Facebook pro programovací jazyk JavaScript a Node.js. V tomhle balíčkovacím systému Microsoft "zabalil" Charticulator, a my ho teď musíme zase "rozbalit". Nejdříve ho ale musíme nainstalovat: npm install --global yarn Jste tedy v PowerShellu ve složce, kde je rozbalený ZIP soubor s Charticulatorem. Proveďte následující příkaz (napsat a Enter): yarn ![[Pasted image 20240513200843.png]] Chvíli to bude blikat a nějakou dobu to poběží. Skoro to může i vypadat, že se to zaseklo, ale nenechte se zmást - jen to prostě trvá. Nechte to běžet, dokud to nevypíše následující hlášku: Done! ![[Pasted image 20240513201034.png]] ![[Pasted image 20240513201119.png]] ## 5. Zkompilujte Charticulator Jak je tento krok hotový, pokračujte následujícím příkazem: copy config.template.yml config.yml ![[Pasted image 20240513201158.png]] To nevypíše nic, jen se objeví nový řádek pro další příkaz: to ovšem znamená, že vše proběhlo v pořádku. Pojďme tedy rozjetí Charticulatoru dokončit. Zadejte následující příkaz: yarn build A čekejte... Bude to opět nějakou dobu trvat, někdy to skoro bude vypadat, že se nic neděje a možná to cestou vyhodí nějaká varování. Vyčkejte, trpělivost, nechte ho pracovat. ![[Pasted image 20240513201229.png]] Celý proces by měl skončit opět hláškou Done! Pokud to tak je, máte pravděpodobně vyhráno. ![[Pasted image 20240513201426.png]] ## 6. Rozjeďte lokální server Charticulator poběží lokálně v našem prohlížeči, proto musíme spustit lokální server. S *yarnem* to není nic náročného, prostě zadejte tento příkaz: yarn server ![[Pasted image 20240513201503.png]] Jakmile bude poslední řádek vypadat jako ten na obrázku výše, lokální server je rozjetý a Charticulator běží. Dostanete se na něj tak, že otevřete svůj prohlížeč a zadáte adresu http://localhost:4000 ![[Pasted image 20240513201628.png]] Pokud takto vypadá to, co vidíte ve webovém prohlížeči, je to super: povedlo se vám lokálně rozběhnout Charticulator! Wow! PowerShell okno během práce s Charticulatorem v prohlížeči nezavírejte - musí běžet celou dobu. ![[Pasted image 20240513201751.png]] ## 7. Zastavte lokální server Po skončení práce s Charticulatorem v okně PowerShellu zmáčknete *Ctrl+C*, tím proces ukončíte a lokální server přestane fungovat. Okno PowerShellu můžete zavřít. ## 8. Jak znovu rozjet Charticulator? Když budete chtít Charticulator znovu zapnout, už neprocházíte všemi kroky, ale pouze spustíte PowerShell, přesunete se pomocí příkazu *cd* do složky, kde máte Charticulator uložený a opět provedete příkaz ke spuštění serveru: yarn server Pak stačí spustit webový prohlížeč a znovu přejít na adresu http://localhost:4000 ![[Pasted image 20240513202255.png]] Tím je hotovo a Charticulator běží, dokud server opět neukončíte.