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:
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.
