Zpět na blog
Vzdělávání

Študijný plán pre budúceho JavaScript programátora

Skillmea tím
26.03.2021
12 minut čtení
Ľudia sa nás často pýtajú, ako sa stať frontend developerom, aké technológie by mali ovládať, čo všetko vedieť, kde začať a aká je správna postupnosť jednotlivých online kurzov. Na základe našich skúseností, rád od lektorov ako Yablko a ďalších, sme v tomto článku dali dokopy študijnú cestu budúceho frontened developera.

Frontend developer vs backend developer vs fullstack developer

Frontend developer, frontenďák je človek, ktorý je zodpovedný za časti webovej aplikácie alebo webstránky, ktoré používatelia vidia a interagujú s nimi. Backend developer je človek, ktorá má na starosti všetko to, čo človek nevidí - infraštruktúra, dátový model, databáza. No a potom je tu full-stack developer, ktorý je zmesou frontendu aj backendu a zvládne celý proces návrhu webovej aplikácie od začiatku do konca. Pomôžme si týmto meme pre lepšiu vizualizáciu:
Programátorské meme
V dnešnej dobe sa dosť stiera hranica medzi frontendom a backendom. Je to kvôli tomu, že čoraz viac úloh, ktoré spadajú do oblasti backendu, majú na starosti frontend vývojári.
Frontend developer robí najmä tieto úlohy:
  • rozhoduje o dizajne a štruktúre webstránok,
  • vyvíja funkcie na dosiahnutie dobrej používateľskej skúsenosti (user experience),
  • dbá na responzivitu webstránky,
  • optimalizuje webstránku pre rýchle načítanie a škálovateľnosť v budúcnosti,
  • volí správnu kombináciu webových technológií pre dosiahnutie najlepšieho výsledku.

Zručnosti front-end developera

Dobrý frontenďák je na nezaplatenie. Doslova. Pri vývoji webstránok či aplikácií je nesmierne dôležitý a musí preto mať komplexné znalosti nielen z oblasti vývoja webu:
  • ovládať technológie ako HTML, CSS, JavaScript a ďalšie (čítaj ďalej v článku),
  • ak vie pracovať s nejakým grafickým softwarom ako napr. Photoshop, Sketch alebo Illustrator, je to veľké plus,
  • základné znalosti SEO,
  • dobré komunikačné znalosti, lebo veľa komunikuje s kolegami (grafik, backend developer, projektový manažér, klient),
  • nezľakne sa problémov a vie ich riešiť.

Mzda frontend developera

Podľa portálu platy.sk na Slovensku zarába JavaScript developer (prečo sme vybrali práve pozíciu JavaScript developer sa dozvieš nižšie v článku) od 1.300 Eur až po 2.900 Eur. Záleží od počtu rokov praxe, skúseností, projektoch na akých si už pracoval a tak ďalej. Dobrých JavaScript developerov firmy stále hľadajú, takže keď naskočíš na vlak frontend  developmentu, o prácu budeš mať postarané.
Priemerný hrubý mesačný plat programátora na Slovensku
JavaScript je aj extrémne populárny, podľa RedMonk rebríčka je JavaScript číslo 1 čo sa týka popularity na GitHube a Stack Overflow. Keď pohľadáš aj otvorené pozície napr. na Profesii, vyhodí ti to stovky pozícií JavaScript či frontend programátora. A keď si do svojho LinkedIn profilu doplníš, že ovládaš JavaScript a k tomu nejaký JavaScript framework, inbox ti vybuchne od ponúk rôznych IT recruiterov. Poď na to a pozri si návod, ako sa stať frontend programátorom.

Ako sa stať frontend developerom?

Nenechaj sa odradiť a choď za svojim cieľom. V texte nižšie sme vypichli podľa nás tie najdôležitejšie technológie, ktoré by si ako dobrý frontenďák mal ovládať. Poďme na to.
TL;DR: HTML, CSS a JavaScript sú chrbtovou kosťou frontend developmentu. Frontend development kombinuje práve tieto tri technológie a k tomu JavaScriptové frameworky (alebo knižnice).

Krok číslo 1: HTML a CSS

Toto je úplne prvá téma, ktorej by si sa mal venovať, pokiaľ máš v pláne byť frontend developerom. Je to alfa a omega celého frontend developmentu. HTML a CSS používajú všetky weby, všetky webové aplikácie. HTML a CSS ťa zadarmo naučí kurz Webrebel 1: HTML, CSS a JavaScript. Všetky videá o HTML a CSS sú k dispozícii zadarmo, stačí sa prihlásiť do kurzu. V tomto kurze sa naučíš aj dôležité veci o tom, ako vôbec internet funguje, ako fungujú prehliadače, čo je HTTP a HTTPS, DNS, JSON, XML a kopec ďalších skratiek, ktorým teraz možno nerozumieš, ale v procese tvorby webstránok sú to dôležité znalosti.

A keď budeš pri CSS, venuj mu poriadne veľa času. Môže sa zdať, že je ľahké pracovať s CSS, ale na jeho zvládnutie je potrebného veľa času. Skús sa opýtať backend developera, prečo nie je frontendistom? Šanca, že ti odpovie, "Lebo neznášam CSS" je dosť vysoká.

Sledovať videá nestačí a preto si určite počas ich sledovania rob domáce úlohy, ktoré v kurze sú. Urob si svoje vlastné portfólio, ponúkni sa svojim známym, že im spravíš webstránku, rob maličké projektíky len tak pre svoje potešenie a takto sa budeš zdokonaľovať a chytíš písanie kódu za pačesy.
Ukážka HTML, CSS a Java Script | Zdroj: https://moz.com/blog/javascript-seo

Krok číslo 2: píš lepšie CSS

Lepšie CSS sa naučíš písať napríklad vďaka preprocesorom. Známymi preprocesormi sú Sass, Less alebo Stylus. Preprocesor je program, ktorý spracuje kód v jednom formáte (napr. Sass) a zmení ho na kód v druhom formáte (CSS). Vďaka Sass vieš písať menej kódu a bude prehľadnejší. 

Keď budeš robiť na webových projektoch, je dobré ovládať aj nejaký ten CSS framework. Najväčšími frajermi na tomto poli sú pravdepodobne Bootstrap a Foundation. Bootstrap je iniciatíva Twitteru a zaslúži si veľkú pochvalu za zavedenie responzívneho dizajnu vo veľkom meradle. Bol to prvý framework, ktorý podporoval filozofiu 'mobile-first'. Pomocou Bootstrapu vieš relatívne rýchlo vytvárať responzívne weby. 

Ak je pre teba Bootstrap zbytočne obmedzujúci v tom, ako tvoj dizajn bude vyzerať, vyskúšaj CSS framework Tailwind 2. Je pre ľudí, ktorí chcú mať flexibilitu a tvoriť vlastný dizajn. Tailwind je intuitívny a moderný CSS framework, ktorý sa dá rýchlo naučiť.

Krok číslo 3: trošku prikúrime - JavaScript

JavaScript bude pre teba ako frontend developera bezpochyby najdôležitejšou zručnosťou. Ako sa naučiť JavaScript? Logická odpoveď: začni základmi. Nebuď povrchný, ale ani v úvode nechoď do úplných detailov. Learning by doing je naše odporúčanie, keď sa učíš JavaScript:
  1. Nauč sa základy JavaScriptu,
  2. Nauč sa React, Vue alebo Angular,
  3. Pochopíš, že nemáš dobré základy JavaScriptu,
  4. Vráť sa k bodu 1. a nauč sa poriadne JavaScript.
JavaScript je už niekoľko rokov po sebe najpopulárnejším programovacím jazykom, pozície vyžadujúce JavaScript pribúdajú ako huby po daždi. Keď budeš vedieť JavaScript, o robotu máš postarané. Yablko pripravil parádny kurz o modernom JavaScipte. Tento kurz ťa naučí písať moderný JavaScript, budeš vedieť jeho syntax (ES6 a ES7), aby si nepísal spaghetti code a pravidlá jazyka. Okrem toho, zvládneš nástroje ako package managers (správa závislostí) npm a yarn, skrotíš DOM, budeš vedieť používať nástroje ako Webpack a tak ďalej. V kurze je takmer 23 hodín materiálu o modernom JavaScripte, bude to fuška, ale výsledok bude stáť za to.

Krok číslo 4: vyber si svoj osud - Vue, React, Angular

Keď si zvládol predchádzajúce tri kroky, si pripravný naučiť sa pracovať s mocnými nástrojmi v podobe JavaScript frameworkov alebo knižníc. Aktuálne v roku 2021 sú najviac v kurze Angular, React a Vue. Nemusíš vedieť všetky, radšej jeden a poriadne. Každá z týchto technológií má svoje pre a proti a sú určené na komplexný vývoj frontendových webových aplikácií. Tieto frameworky sú si podobné a pokiaľ sa naučíš jeden, prejsť na iný framework nie je až také náročné. Poďme si teraz veľmi stručne predstaviť spomínané tri frameworky.

Angular je vývíjaný spoločnosťou Google, prvýkrát bol vydaný v roku 2010 a je postavený na TypeScripte. Otcom Angularu je Slovák Miško Hevery. V roku 2016 bol predstavený výrazný update tohto frameworku - Angular 2, v rámci ktorého došlo aj k vypusteniu "JS" z názvu. Okrem Googlu samotného používajú Angular weby ako PayPal, Upwork, Microsoft a ďalšie.

React je vyvíjaný ďalším gigatnom - Facebookom, ktorý ho okrem iného používa v aplikáciách Instagram či WhatsApp, na Reacte fičia aj weby Netflixu či Uber. Prvý release bol v roku 2013 a ide o JS knižnicu pre vytváranie používateľských rozhraní (UI). 

Vue je najmladším JS frameworkom v tomto výbere. Vue za sebou síce nemá žiadnu veľkú firmu, ale tiež je používaný veľkými firmami, napr. Alibaba, Behance alebo GitLab. S príchodom Vue 3 v septembri 2020 prešlo Vue na TypeScript.
JavaScript frameworks Angular, React, Vue

BONUS

Git

Git sa používa vo väčšine vývojárskych firiem, čím skôr sa naučíš s Gitom pracovať, tým lepšie pre teba. Git je verziovací systém, vďaka ktorému sa môžeš kedykoľvek vrátiť k pôvodnej verzii svojho kódu, zdieľaš kód s kolegami spolupracovníkmi, pracuješ v tíme. Git ovládaš cez príkazový riadok alebo si nainštaluješ nejaké GUI pre Git. Git ti vlastne ukladá celú históriu tvojho projektu do repozitára. Svoje repozitáre ukladáš na akomsi hostingu - čo môže byť GitHub, GitLab či Bitbucket.

Testovanie

Ak chceš byť úplný kráľ, svoj kód určite aj testuj. Vyhneš sa tak mnohým problémom pri vývoji. Pri JavaScripte sú najpoužívanejšie knižnice pre testovanie Jest, Mocha, Chai.

Záver

Nezabúdaj, nemusíš dokonale ovládať všetko z vyššie uvedeného. V tomto článku sme sa snažili priniesť ti prierez technológií, ktoré by si mal ovládať, pokiaľ sa chceš stať frontend programátorom. Mohlo by sa zdať, že ich je priveľa a bojíš sa, že to nezvládneš. Pre dodanie sebadôvery si prečítaj tieto príbehy absolventov našich kurzov, ktorí sa rozhodli zmeniť kariéru. Alebo si pozri zopár rozhovorov s absolventami na našom YouTube. Nikdy nie je neskoro začať s programovaním. Keď sa rozhodneš pre vzdelávanie formou online kurzov, najdôležitejšie je vydržať. Držíme ti palce. Kódovaniu zdar!
Skillmea tím

Sme jednotka v online vzdelávaní na Slovensku.

Na našom webe nájdeš viac ako 260 rôznych videokurzov z oblastí ako programovanie, tvorba hier, testovanie softwaru, grafika, UX dizajn, online marketing, MS Office a pod. Vyber si kurz, ktorý ťa posunie vpred ⏩

Mohlo by tě zajímat

Vzdělávání
19.02.2021
Skillmea tím

Kotlin Raw String

String je základný dátový typ v programovacích jazykoch. Slúži na uchovanie textu. Ak chceme napísať String tak text vložíme medzi dvojité úvodzovky.  val cesta = "cesta";Vo väčšine prípadov je to dostačujúce. Čo ak do textu chceme nastaviť cestu na súbor ako text. C:\work\tools\__test Musíme ho vložiť do premennej typu String a všetky lomítka zdvojiť - escapnúť.  val cesta = "C:\\work\\tools\\__test";Kotlin má aj pomôcku a tou je Raw String. Na napísanie textu použijem trikrát dvojité úvodzovky na začiatku aj na konci. val cestaRaw = """C:\work\tools\__test"""Raw String nám umožňuje zapísať String na viac riadkov bez nutnosti spájania pomocou +.  Mám text, ktorý chcem napísať na viac riadkov. Čo musím spraviť ak to chcem v jednom Stringu? Všetky časti spojím pomocou + a pridám špeciálnu značku pre nový riadok \n. val text = "1 639,33\n" + "6 540,03\n" + "8179,36\n" + "+2500,04"Pri Raw Stringu len stlačím enter pre nový riadok a pokračujem v písaní. val textRaw = """1 639,33 6 540,03 8179,36 +2500,04"""Tento spôsob ale nie je pekne čitateľný – všetok text mám zasadený na ľavú stranu, lebo nechceme aby sme tam dali napr. taublátor – v pôvodnom textne nebol.  Čo môžeme spraviť je pridať nejaké špeciálnu značku na začiatok riadku, ktorý chcem odsadiť a potom poviem, že všetko na ľavo od značky spolu so značkou považujem len za odsadenie textu. Pridajme značku (hocijakú): val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04"""Teraz povieme, že # je špeciálna značka pre odsadenie. val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04""".trimMargin("#")A môžeme odsadiť pre lepšiu čitateľnosť: val textRaw = """1 639,33 #6 540,03 #8179,36 #+2500,04""".trimMargin("#")Alebo použijeme default znak oddeľovača, čo je pipe |. val textRaw = """1 639,33 |6 540,03 |8179,36 |+2500,04""".trimMargin()Teraz sa tieto dva Stringy budú rovnať. println("${text == textRaw}") //truePoužitie v reálnej aplikácii Určite by si rád videl príklad z reálnej aplikácie. Jedným z takýchto príkladov by bolo použitie pri písaní Android aplikácie. Presnejšie napríklad pri písaní príkazov pre dopyt na databázu v Room frameworku, ktorý sa používa na zjednodušený prístup k databázam. V Room píšeme takzvané Dao triedy na prístup k databáze. Vezmime si jeden príklad kde chcem napsíať SQL príkaz na vybratie filmov z databázy. @Query("SELECT id, movie_name, genres, directors year FROM MOVIES") suspend fun getAllMovies(): List<MovieShort>Príkaz by si rád napísal na viacero riadkov aby bol lepšie čitateľný. @Query("SELECT id, movie_name, genres, directors year " + "FROM MOVIES") suspend fun getAllMoviesInShortForm(): List<MovieShort>Alebo použiješ Raw String. @Query(""" SELECT id, movie_name, genres, directors year FROM MOVIES """)Určite si vieš predstaviť ako sa ti zlepší čitateľnosť, ak budeš mať zložitejšie select príkazy v kombinácii napríklad s join.
Vzdělávání
21.01.2021
Lubomir Herko

Ako na vlastný Virtuálny privátny server - časť 1.

Každý týždeň jeden blog. Také som si dal predsavzatie do nového roka. Hneď prvý týždeň sa to nepodarilo, ale čo už 🤦🏻‍♂️ . V tomto texte (alebo seriáli?) budeme riešiť tvoj vlastný Virtuálny privátny server (VPS). Konkrétne: • zistíme čo to VPS vlastne je a aké sú výhody a prípadné nevýhody, • skúsime analyzovať naše potreby a vybrať vhodné parametre nášho servera, • VPS kúpime, nastavíme, zabezpečíme a pripravíme pre našu aplikáciu, • z GitHub repozitára nasadíme našu aplikáciu do produkcie pomocou GithubActions (CI), • kúpime doménu a nasadíme SSL certifikát pomocou letsencrypt. Je to veľa práce, pome na to. Načo mi je vlastný server?Hneď na začiatku si to vyjasnime: VPS je pre väčšinu projektov zbytočný. Pri dnešných možnostiach, ako svoju aplikáciu vieme nasadiť do produkcie a sprístupniť ju používateľom na pár klikov je často zbytočné riešiť komplikované nastavovanie vlastného servera. Hlavne údržba a riešenie prípadných problémov nám môže pripomenúť, ako zle sme sa rozhodli. Napriek tomu VPS má svoje miesto a niekedy sa naozaj môže hodiť, napríklad: • ak máš linux v malíčku, alebo svoj VPS už máš (si skúsený/á), • ak výkon zdieľaného hostingu viditeľne nestačí a už nevieš svoju aplikáciu ďalej optimalizovať, • ak nepostačujú dostupné technológie zdieľaného hostingu (potrebuješ doinštalovať vlastné knižnice, tooly), • ak má aplikácia extrémne nároky na výkon procesora, veľkosť pamäte, alebo potrebuješ ukladať gigabajty/terabajty dát, • ak sú dáta, s ktorými pracuješ príliž senzitívne na to, aby boli uložené na jednom mieste spolu s dátami iných používateľov zdieľaného hostingu. Asi by sme našli aj dalšie prípady, špecifiká, kedy sa hodí VPS, tieto nám však nateraz postačia. Ak teda spadáš do niektorého z kritérií, čítaj ďalej. Aký výkon servera potrebujem?Brzdi. Predtým, ako pristúpime ku kúpe servera by sme mali vedieť, aké sú naše požiadavky. Aspoň približne. Potrebujeme veľa jadier procesora? Alebo si vystačíme s jedným, prípadne dvoma jadrami? Potrebujeme veľa operačnej pamäte, alebo terabajty dát na disku? To sú ťažké otázky, ale poradím ti: • Ak aplikácia neexistuje a chceš VPS len vyskúšať, zvoľ najlacnejší server aký je v ponuke. Či máš 1 procesor, alebo 32 procesorov - terminál reaguje vždy rovnako rýchlo. • Ak je aplikácia nová a nepoznáš jej nároky, začni radšej s menej výkonným a lacnejším serverom. Napríklad CPU s jedným, alebo dvoma jadrami a 2G RAM. Väčšina providerov disponuje jednoduchým škálovacím nástrojom. Ak sa zvýšia nároky, pohneš v administračnom rozhraní nejakým sliderom a šup, máš o dve jadrá viac, prípadne dvojnásobok RAM - do pár sekúnd. • Ak si narazil na limity zdieľaného hostingu, pravdepodobne poznáš dôvod, prečo chceš vyskúšať VPS. Najlepšie ak si komunikoval s podporou svojho providera a potvrdili, že si narazil na limit ich CPU, alebo RAM. Kde kúpiť server?Takže, ak vieme aspoň približne čo chceme, urobme prieskum. Osobne mám vyskúšaných týchto predajcov VPS: • Linode, DigitalOcean, Hetzner, WebSupport Ubuntu Server a terminál bude u každého predajcu rovnaký. Riadiť sa teda môžeme podľa nasledovných kritérií: 2. cena 4. ešte raz cena 6. možnosti administračného rozhrania a prípadného navyšovania výkonu do budúcnosti 8. lokalita dátového centra (čo najbližšie k používateľom) Moja skúsenosťV poslednej dobe to u mňa osobne vyhráva Hetzner (hetzner.de). Frajeri majú vynikajúce ceny (vlastný server v čase písania tohoto textu vieš získať už za 3E/mesiac) a navyšovanie počtu CPU a RAM je riešené jednoduchým sliderom v administračnom rozhraní. Super vec 🎉. Dátové centrum môžeš zvoliť relatívne blízko - Falkenstein, Nemecko. TIP: V ľavom hornom rohu zmeníš jazyk webu z nemeckého na anglický. 😎 Vytvorenie konta HetznerAko sa už konečne teda dostaneme k vlastnému serveru? Takto: 2. Vytvor si konto na hetzner.de (klik) 4. Klikni na linku, ktorú ti Hetzner poslal na email zadaný pri registrácii 6. V sérii formulárov vyplň svoje iniciály (posledný formulár vyžaduje údaje o platbe, žiadna platba vopred však nie je potrebná) 8. Po vyplnení a odoslaní formulárov sa implicitne zobrazí formulár - nastavenia tvojich iniciál. Vpravo hore klikaj na štvorčeky a vyber z ponuky možnosť "Cloud": Ak máš po absolvovaní predchádzajúcich krokov pred sebou takúto obrazovku: [Konzola cloudu Hetzner.de.]je všetko v poriadku. Môj server!Už sme blízko. V zozname projektov (predchádzajúci obrázok) klikni na "Default" (tento názov vieš zmeniť cez ikonu troch bodiek v pravom hornom rohu karty produktu) a následne "Add server". [Vytvorenie nového VPS.] Parametre serveraTeraz zvolíme parametre servera. V tomto prípade zvolíme najlacnejší variant, ale niektoré možnosti popíšeme bližšie. Parametre servera teda nastavíme nasledovne: 2. Location (umiestnenie dátového centra): Falkenstein, pretože je najbližšie k Slovensku. 4. Image (operačný systém): Ubuntu 20.04, pretože s ním viem pracovať a tiež existuje obrovská komunita používateľov Ubuntu servera, čo uľahčí vyhľadanie návodov a riešení prípadných problémov. So serverom Ubuntu bude ďalej pokračovať aj tento tutoriál. 6. Type (typ servera): Štandardný, pretože nám nevadí, že spolu s našim VPS budú na fyzickom serveri bežať aj iné virutálne servery. Dedikovaný typ servera je vhodný len vtedy, ak potrebujeme naozaj veľký výpočtový výkon pre naše použitie. Z ďalších možností typu servera vyberme hneď prvý s označením CX11 a teda 1x VCPU, 2GB RAM, 20GB SSD v cene €2.99 za mesiac. 8. Volume (externý disk): Nevytvárame externý disk. • TIP: Ak vytvoríme VPS s veľkosťou SSD 20GB a potrebujeme viac dát, nemusíme hneď meniť veľkosť SSD na serveri, ale môžeme pripojiť k serveru externý disk. Má to jednu veľkú výhodu a jednu menšiu. Veľkou výhodou je, že v prípade zvyšovania výkonu (napr. z 1CPU a 2GB RAM na 4CPU 8GB RAM) môžeme zvoliť možnosť, že nechceme navyšovať aj veľkosť SSD - teda SSD ostane na hodnote 20GB. Takéto rozhodnute nám v budúcnosti umožní aj krok späť a teda zníženie počtu VCPU a RAM. Takto môžeme ušetriť nemálo finančných prostriedkov, ak potrebujeme zvýšiť výkon VPS len dočasne, nie natrvalo (napr. ak je aplikácia preťažená len v období Vianoc). 10. Network (sieť): Nevytvárame sieť, pretože nevytvárame skupinu serverov, ktoré potrebujeme mať na jednej sieti (napr. ak by sme potrebovali zvlášť VPS pre webserver a databázový server). 12. Additional features (ďalšie možnosti): V prípade možnosti User data nešpekulujeme (zatiaľ). To sa nám môže hodiť vtedy, ak chceme niektoré činnosti automatizovať, napríklad automaticky pridať používateľov do systému, spustiť rôzne skripty po inštalácii a podobne. Backups sú pravidelné zálohy, čo je nutnosť na produkčnom serveri, kde beží ostrá aplikácia. Táto služba je však spoplatnená - 20% z ceny nášho servera. Ak teda vytváraš produkčný server, nafurt, tak odporúčam aj so zálohami. Ak len testuješ, tak je to na tebe 😉 . 14. SSH Key (SSH kľúč): Ak máš skúsenosti s *nix systémami, možno máš vytvorený svoj id_rsa.pub kľúč. Ak áno, tu ho môžeš použiť a tak sa autentifikovať pri pripájaní k serveru. V opačnom prípade (a to je náš prípad) ti bude zaslané heslo k root použivateľovi na tvoj email. Tu teda nešpekulujeme a zatiaľ nezaškrtneme túto možnosť. • TIP: Povoliť vzdialený prístup pre root používateľa nie je bezpečné a používa sa len pre prvotné nastavenie servera (prvé prihlásenie do nového VPS). Jedným z prvých krokov po prihlásení sa do nového VPS by malo byť vytvorenie vlastného používateľa, ktorý sa bude prihlasovať pomocou kľúča (nie hesla) a zakázanie vzdialeného prístupu pre root používateľa. To bude aj náš postup. 16. Name (Názov): Toto je názov servera, ktorý je zobrazený v administračnom paneli hetzner, ale aj v konzole po pripojení k serveru cez SSH protokol. • TIP: Spomeň si na nejaké názvy svetov, postáv z tvojich obľúbených počítačových hier, komixov alebo filmov 😎 . Veľa čítania kôli pár klikom. Nastavenie servera teda môže vyzerať aj takto: [Nastavenie parametrov VPS.] Prvé SSH spojenie Po potvrdení nastavení chvíľu počkáme na spustenie novej inštancie nášho VPS. Zároveň nám Hetzner doručí email s informáciami o IP adrese, na ktorú sa budeme pripájať a heslom pre root používateľa. Tak skontroluj email a poď sa prihlásiť na server cez SSH. Aký program použiť na prihlásenie cez SSH? Pre MacOS je to Terminal, alebo iTerm. V prípade linuxu (akéhokoľvek) je to veľmi podobné MacOS - čiže opäť Terminal. Používatelia Windows môžu použiť na SSH pripojenie program Putty, prípadne nainštalovať WSL doplnok a použiť WSL terminal. Napíš do komentára ak sa stretneš s nejakým problémom, poriešime. Z emailu som sa dozvedel, ze IP môjho servera je 78.47.244.57 a heslo k používateľovi root je ss3PgfWnHwxUhUaKEEr9 (ani neskúšaj, server v dobe čítania tohto textu už nebude existovať). [Email s autorizáciou do nášho VPS.]TerminalPríkaz ssh, ktorý použijeme v MacOS, Linux alebo WSL termináli má nasledovný syntax: ssh pouzivatel@ip_serveraTeda v našom prípade: ssh root@78.47.244.57Terminál si vypýta heslo, môžeme ho len skopírovať a prilepiť. Pri zadávaní hesla do terminálu sa nezobrazujú žiadne hviezdičky ani odozva. Preto len potvrdíme príkaz klávesou Enter. Ak sa na server pripájame prvýkrát, SSH sa opýta, či chceme server uložiť do zoznamu SSH serverov. Napíšeme yes a spojenie sa v prípade správneho hesla úspešne nadviaže: [Prvé pripojenie k serveru cez SSH.]Pri prvom prihlásení je nutné zmeniť heslo používateľa root. Zadáme staré heslo a vytvoríme nové. Hotovo. Náš nový VPS server Ubuntu 20.10 je vytvorený. Čo ďalej?V ďalšej časti blogu budeme pokračovať s nastavením nášho servera: 2. vytvoríme si na lokálnom počítači SSH kľúč 4. vytvoríme na serveri vlastného používateľa a nastavíme prihlasovanie cez SSH kľúč 6. zabezpečíme server pomocou firewallu, fail2ban a iných nástrojov 8. nainštalujeme a spustíme webový server (nginx) 10. nainštalujeme a spustíme databázový server (postgresql, ak budeš potrebovať tak aj MySQL) 12. nainštalujeme závislosti (git, nodejs, ...) V tretej časti budeme riešiť deploy našej aplikácie na VPS: 2. kúpime doménu a nasmerujeme ju na server 4. naklonujeme našu aplikáciu na server, spustíme ju pod doménou a vytvoríme k nej službu (systemd service aby sa automaticky spustila pri prípadnom reštarte servera) 6. pomocou certbot nastavíme doméne SSL certifikát a sprístupníme aplikáciu pod HTTPS 8. pomocou GithubActions nastavime continous integration tak, aby sa po push do main branche spustili automatizovane testy a v pripade bezchybnosti sa aplikacia rovno nasadi do produkcie Veľa roboty máme. Ale veľa sa aj naučíme. Štvrtá časť nie je.
Vzdělávání
08.12.2020
Skillmea tím

Abstrakcia a zoraďovanie v kolekciách v Jave

Poďme sa porozprávať o abstraktných triedach v jave (abstract class in java). Abstrakcia slúži na schovanie zložitosti od používateľa a zobrazuje len relevantné informácie. Abstraktné triedy a metódy V našom príklade vieme, že všetky zvieratá vydávajú zvuk. Je to niečo abstraktné – niečo, čo si vieme predstaviť a v kóde to zapíšeme nasledovne. Upravme metódu v triede Animal. public abstract void makeNoise();Dáva to zmysel, lebo Animal nepredstavuje určité špecifické zviera a teda nevieme, aký zvuk vydá, ale vieme, že chceme aby všetko, čo bude dediť od Animal, vydávalo zvuk. Pomocou public abstract som povedal, že táto metóda nemusí mať vnútro – nemusí mať kód (implementáciu). Ak mám abstraktnú metódu, tak aj celá trieda musí byť abstract. public abstract class Animal{ public String name = "animal"; public abstract void makeNoise(); }Ak je trieda abstract, tak z nej nemôžem vyrobiť objekt. Načo by som aj robil objekt Animal, však je to len abstrakcia. Toto nebude fungovať: Animal animal = new Animal();Ak je Animal abstract a obsahuje abstract metódu, tak som povedal, že potomk musí napísať implementáciu abstract metódy alebo bude potom tiež abstract. Nám vyhovuje, aby Mamal bol tiež abstract. Tým pádom nemusíme vyrobiť implemntáciu. Z triedy Mamal zmažeme makeNoise a označíme ju za abstract. public abstract class Mamal extends Animal { public String name = "mamal"; }Teraz triedy, ktoré dedia od Mamal musia implementovať metódu makeNoise. Cat a Dog už danú metódu implementujú, teda nemusíme nič robiť. Ale Fox túto metódu nemá a preto ju musíme implementovať. IntelliJ IDEA nám v tomto pomôže skratkou. Stlačíme Alt + Insert a vyberieme Implement Methods. public class Fox extends Mamal { @Override public void makeNoise() { System.out.println("Ring-ding-ding-ding-dingeringeding!"); } } Zoraďovanie v kolekciáchPre zoraďovanie použijeme už existujúci algoritmus v triede Collections.sort(l). Písmeno l v tomto prípade bude List. Ak by tento List obsahoval sadu Stringov, boli by zoradené abecende, ak by obsahoval Dátum tak budú zoradene chronologicky. Ako je to možné? Je to preto, lebo tieto triedy implementujú rozhranie Comparable. Ak by si sa snažil takto zoradiť také triedy, ktoré neimplementujú toto rozhranie, tak program vyhodí výnimku. Existuje ale možnosť, že v tvojej triede implementuješ toto rozhranie. Potom toto triedenie je teraz považované za prirodzené. Príklad: Máme Osobu, ktorá implementuje Comparable. Musíme implementovať metódu compareTo. public class Osoba implements Comparable<Osoba>{ private String meno; private String priezvisko; private int vek; public Osoba(String meno, String priezvisko, int vek) { this.meno = meno; this.priezvisko = priezvisko; this.vek = vek; } //get, set metódy vynechané pre čitatelnosť @Override public String toString() { return "Osoba{" + "meno='" + meno + '\'' + ", priezvisko='" + priezvisko + '\'' + ", vek=" + vek + '}'; } @Override public int compareTo(Osoba o) { int porovnaniePriezvisk = o.getPriezvisko().compareTo(this.getPriezvisko()); return porovnaniePriezvisk !=0 ? porovnaniePriezvisk : o.getMeno().compareTo(this.getMeno()); } }Čo ak chceš použiť úplne iné ako prirodzené triedenie, chceš to triediť napríklad podľa veku. Alebo chceš triediť objekty, ktoré neimplementujú Comparable rozhranie? Tak si ho vyrobíš. Na to použiješ rozhranie Comparator a potom ho požiješ Collections.sort(e, VEK_TRIEDENIE);. public class Sort { private static final Comparator<Osoba> VEK_TRIEDENIE = new Comparator<Osoba>() { @Override public int compare(Osoba o1, Osoba o2) { return Integer.compare(o1.getVek(), o2.getVek()); } };Vyskúšame si: public static void main(String[] args) { Osoba[] osobyArray = { new Osoba("Jaro", "Beno", 20), new Osoba("Peter", "Beno", 25), new Osoba("Karol", "Slepec", 18), new Osoba("Tomas", "Vlak", 22) }; List<Osoba> osoby = Arrays.asList(osobyArray); System.out.println(osoby); Collections.sort(osoby); System.out.println(osoby); Collections.sort(osoby, VEK_TRIEDENIE); System.out.println(osoby); } }V ďalších blogoch sa pozrieme na zopár zaujímavostí z Javy 13 a takisto sa budeme venovať aj Kotlinu. Ostaň nám verný a uč sa Javu 😊

Nezmeškaj info o nových kurzoch a špeciálnych ponukách