5. diel - Úvod do vývojového prostredia webstore

V predchádzajúcej lekcii, Ladenie programu a hraničnými , sme vyladili malý program v JavaScripte. Tiež sme si vysvetlili, čo je to debugger a vieme, čo sú to hraničnými.

Správne používanie IDE je pre produktivitu veľmi dôležité. Či už pracujeme v akomkoľvek IDE alebo na akomkoľvek type projektu, môže nám ušetriť veľa času. My sa v tejto lekcii zoznámime s jedným z najpoužívanejších IDE na JavaScript, ktorým je webstore:

Niečo málo o WebStormu

Webstore je IDE používané predovšetkým pre vývoj v JavaScripte. Ako si neskôr ukážeme, webstore si poradí aj s inými jazykmi. Rovnako ako napríklad ďalší IDE PhpStorm, GoLand alebo Rider ho vyvinula česká spoločnosť JetBrains sro

Stiahnutia a Inštalácia

Teraz už prejdeme k stiahnutiu WebStormu, sťahovať ho budeme z oficiálnych stránok jetbrains.com kliknutím na tlačidlo Download v pravom hornom rohu. Ďalšie kroky sa budú líšiť podľa OS.

Windows

Zo všetkých troch podporovaných platforiem je na Windows inštalácia najjednoduchšie, jednoducho stiahneme súbor a spustíme ho. Sprievodca inštaláciou je jednoduchý a intuitívny.

MacOS

Stiahneme súbor .dmg, rozkliknite a spustíme.

Linux

Na Linuxe už to bude mierne zložitejšie, stiahneme archív .tar.gz, extrahujeme ho a v priečinku /WebStorm-212.4746.80/bin/ (čísla môžete mať samozrejme odlišná) nájdeme súbor webstorm.sh. Tento súbor spustíme príkazom sudo ./webstorm.sh.

Druhý, pravdepodobne jednoduchší spôsob je stiahnutie cez Ubuntu Software alebo cez príkaz sudo snap install webstorm. Ako linuxáci si s tým určite poradíte.

Základné ovládanie

Po spustení by mal váš webstore vyzerať asi takto:

K prístupu do jednotlivých projektov sú tu tri tlačidlá:

New Project - vytvorí nový projekt.
Open - otvorí zložku ako projekt.
Get from VCS - otvorí projekt z gastrointestinálneho systému, alebo iného verziovacieho nástroja. O kooperácii gastrointestinálne a WebStormu sa budeme baviť ešte neskôr.

My použijeme to prvé, teda New Project. V ďalšom okne uvidíme toto okno (frameworky naľavo môže mať každý iné):

Vidíme, že webstore nám vie pomôcť s vytváraním projektu v jednotlivých frameworkoch, nám pre teraz bude stačiť Empty Project. Môžeme si samozrejme zmeniť umiestnenie alebo názov projektu. Projekt si vytvoríme. Pravým tlačidlom klikneme na priečinok projektu a zvolíme New > JavaScript File, pomenujeme ho index.js. Úplne rovnako vytvoríme ešte jeden, tentoraz HTML súbor. Miesto New > JavaSript File zvolíme New > HTML file s názvom index.html, zatiaľ by všetko malo vyzerať takto:

Vidíme, že nám webstore sám vygeneroval základné HTML štruktúru, my si ju trochu upravíme:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
    <script type="text/javascript" src="index.js"><script/>
</head>
<body>
   <button type="button" onclick="clickMe()">Click me!</button>
</body>
</html>

Pridali sme import súboru index.js a tlačidlo Click Me!, Ktoré po kliknutí spustí funkciu clickMe(), ktorú si onedlho nadefinujeme.

Možno ste si už všimli, že keď začneme písať nový element, napr. <button>, webstore nám napovedá. Zobrazí nám všetky potenciálne premenné, funkcie atď. JS súbor upravíme takto:

const clickMe = () => {
    console.log("Hello world");
};

Pre zobrazenie stránky máme dve možnosti:

jednoducho otvoríme index.html, napríklad v Google Chrome.
- druhá možnosť je nechať si opäť pomoct WebStormem pomocou klávesov Alt + F2, webstore potom spustí na localhost server, na ktorom spustí našej aplikácii (web).

Oprava

Ďalšia užitočná vec, ktorú webstore disponuje je oprava preklepov napríklad v HTML tagech. Skúsme si napríklad namiesto <button> napísať <buton> a prejdime do záložky Problems (alebo pomocou klávesov Alt + 6):

Ešte lepšie je ale oprava podobných chýb, skúsime napr. Zmeniť hodnotu konštanty:

const clickMe = () => {
    const hello = "Hi world!";
    hello = "hello";
    console.log(hello);
};

Nielen že nás webstore na túto chybu upozorní, ale dokonca nám ponúkne riešenie. Pri nabehnutí na slovo s chybou a stlačení klávesov Alt + Enter nám webstore ponúkne možnosť Replace with let, tu len odenterujeme a kód je v poriadku:

možnosti - Debugging
Webstore vie upraviť aj HTML kód, to môžeme vyskúšať napr. Duplikáciou tagu </head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
    <script type="text/javascript" src="index.js"></script>
</head>
</head>
<body>
<button type="button" onclick="clickMe()">Click me!</button>
</body>
</html>

Webstore nám odstránenie prebytočného tagu po kontrole sám navrhne.

Terminál

Poslednou vecou, s ktorou sa dnes zoznámime, je terminál vo WebStormu. Dostaneme sa do neho cez klávesy Alt + F12, alebo překliknutím do záložky Terminal vľavo dole. V termináli je otvorená zložka projektu a my máme možnosť spúšťať príkazy rovno z WebStormu v zložke projektu. Keď klikneme na sipecka vedľa Terminal: Local, máme možnosť vytvoriť SSH session. Tá sa dá použitý pre plno vecí od komunikácie so serverom, až po pripojenie napríklad k Raspberry Pi. Stačí len zadať IP adresu cieľa, port cez ktorý chceme komunikovať, našej "prezývku" pre komunikáciu so serverom a heslo / kľúč.

To je pre dnešok všetko.

V ďalšej lekcii, Debugging vo vývojovom prostredí webstore , si ukážeme konkrétne vývojové prostredie webstore a ako ho možno využiť pri Debugging.

Článok pre vás napísal Lukáš Michalik

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

jako Autor se věnuje C#, tvorbě her v C++ a JavaScriptu

Aktivity