Náš blog

Čísla a znaky v Jave
Tipy a triky
28.10.2018
Skillmea

Čísla a znaky v Jave

V tomto článku sa spolu pozrieme na základy práce s číslami a znakmi v programovacom jazyku Java.  Čísla[Image] Prečo používať Numbers a nie primitívne dátové typy? Ak nejaká metóda príjma ako parameter Object, tak jej neviem podsunúť primitívny dátový typ. Môžeš použiť konštanty, ako napríklad MIN_VALUE alebo MAX_VALUE. Môžeme používať metódy na konverziu do a z primitívnych dátových typov ako aj zo String.  Byte b = 127; Byte b2 = 128; //error Byte len do 127Pre všetky typy máme metódy, ktoré z textu vedia vyloviť daný typ. Tu si treba dať pozor, lebo ak chcem zo Stringu dostať Integer – ale zadám tam text, tak to bude chyba. String decimal = "2.5"; double d1 = Double.parseDouble(decimal); decimal = "2.5a"; double d; d = Double.parseDouble(decimal); //chyba Keď hovoríme o číslach, tak nemôžme nespomenúť modulo. Plus, mínus poznáme, ale modulo by nám mohlo robiť problém. private static void modulo() { for(int i = 0; i < 32; i++){ rozdajHracoviKartu(i%4,i); } } private static void rozdajHracoviKartu(int hrac, int karta) { System.out.println("rozdavam hracovi "+hrac+", kartu cislo "+karta); }V tomto príklade výsledok modula nebude nikdy viac ako 3 a menej ako 0. Teda sa karty rozdajú medzi všetkých hráčov v hre. Skús si to pomeniť sám.  Matematické operácie Pre veľa matematických operácií máme triedu Math, ktorá obsahuje množstvo statických metód. Názvy sú samo vysvetľujúce, alebo si pozri nižšie komentáre: System.out.println("a "+a+" abs "+ Math.abs(a)); //absolútna hodnota System.out.println("b "+b+" ceil "+Math.ceil(b)); //zaokrúhli nahor System.out.println("b "+b+" floor "+Math.floor(b)); //zaokrúhli nadol System.out.println("b "+b+" rint "+Math.rint(b)); //klasicke zaokruhovanie zmen b ... vracia double hodnotu intu System.out.println("b "+b+" round "+Math.round(b)); //klasicke zaokruhovanie zmen b ... vracia int alebo long ... int round(float f) System.out.println("c "+c+" a d "+d+" max "+Math.max(c, d)); System.out.println("c "+c+" a d "+d+" min "+Math.min(c, d)); Náhodné číslo V Math triede máme metódu random. Vracia hodnotu od 0.0 po 1.0 . Krátením vieš zvätsit a musíš pretypovať na int ak chceš celé čísla. private static void randomNumbers() { int number = (int)(Math.random() * 100); System.out.println(number); }ZnakyPrimitívny dátový typ char sa používa na uchovanie jedného znaku. Pri char máme tak isto možnosť použiť jeho alternatívu objektovú a to Character V jave existujú escape sekvencie. To sú znaky, teda char, pred ktorým je spätné lomítko. Tieto sekvencie majú pre kompilátor zvláštny zmysel. Neberú sa ako nejaký jednoduchý text.  \t    -  vloží tab  \b   -   vloží backspace  \n   -   vloží nový riadok  \r    -   vloží carriage return  \f    -   vloží formfeed  \'    -    vloží jednu uvodzovku  \"    -   vloží dvojitú uvodzovku  \\    -   vloží spätné lomítko  Máme množstvo pomocných metód: Character ch3 = 'a'; System.out.println("char "+ch); System.out.println("isLetter "+Character.isLetter(ch)); System.out.println("isDigit "+Character.isDigit(ch)); System.out.println("isWhitespace "+Character.isWhitespace(ch)); System.out.println("isUpperCase "+Character.isUpperCase(ch)); System.out.println("isLowerCase "+Character.isLowerCase(ch)); System.out.println("toUpperCase "+Character.toUpperCase(ch)); System.out.println("toLowerCase "+Character.toLowerCase(ch)); System.out.println("toString "+Character.toString(ch));Takýmto spôsobom vieš vložiť aj špeciálne znaky z hora:System.out.println("Some \t nice text. tab"); System.out.println("Some \t\b nice text. backspace"); System.out.println("Some \n nice text. new line"); // je to niečo ako na starom písacom stroji kedy si sa presunul na začiatok riadku //ak nedáš ale nový riadok, tak ti prepíše to čo tam už máš napísané System.out.println("Some \r nice text. carriage return"); System.out.println("Some \r\n nice text. carriage return a new line"); System.out.println("Some \' nice text. "); Ak chceš zadať špeciálnu hodnotu, tak musíš zadať pred daný špeciálny znak lomítko. char uvodzovka = '''; //error char uvodzovka = '\''; System.out.println("Some " nice text."); //error System.out.println("Some \" nice text."); System.out.println("Some \ nice text."); //error System.out.println("Some \\ nice text.");ZáverAk ťa zaujíma Java, tak si tu na https://skillmea.sk pohľadaj kurzy, ktoré sa venujú programovaniu v Jave a nauč sa viac. Ja som Jaro a dúfam sa vidíme pri ďalšom článku alebo videu.
Všetko o Darčeku roka
Novinky
21.10.2018
Skillmea

Všetko o Darčeku roka

Keďže Darček roka od Learn2Code je tu vôbec prvýkrát, prinášame ti jednoduchý prehľad toho, čo o Darčeku roka potrebuješ vedieť. V tomto článku nájdeš všetky odpovede, ktoré by ťa mohli zaujímať. V skratke, Darček roka je kombinácia týchto 3 vecí:  • predplatné Learn2Code online kurzov (prístup do 31.12.2019), • benefity od partnerov (v hodnote viac ako 200 Eur), • súťaž od Apple zariadenia (iPhone Xs, iPad, Apple Watch). Predplatné online kurzovV prípade, ak sa rozhodneš kúpiť si Darček roka, tak získaš neobmedzený prístup do všetkých online kurzov a to nielen tých súčasných, ale aj pripravovaných až do 31.12.2019. Aktuálne nájdeš na našom webe takmer 60 online kurzov, ktoré obsahujú viac ako 500 hodín videomateriálu (videotutoriálov). To je poriadna nálož informácií, vedomostí a know-how. Ber to ako investíciu do seba a do svojho rozvoja. Pomocou týchto kurzov sa môžeš naučiť robiť webstránky, programovať, robiť dizajn a ovládať grafický software, zvládneš online marketing, prácu s fotoaparátom či videom, alebo MS Office. Následne sa môžeš uchytiť v rôznych IT firmách alebo rozbehnúť vlastný online či offline biznis. Načo čakať? Začni už dnes 💪[Naše online kurzy] Benefity od partnerovOkrem kvalitných online kurzov získavaš aj lákavé benefity od našich top partnerov. Poďme si o nich povedať trochu viac. SuperFaktúra  Pokiaľ sa chystáš na podnikanie, alebo už podnikáš, kvalitná služba na vystavovanie faktúr, ktorá sa dá prepojiť s účtovníctvom je nutnosť. SuperFaktúra je jednoduchá a prehľadná a pri tom ponúka množstvo funkcií pre živnostníkov a firmy. V rámci benefitov máš 3 mesiace prémium členstva v SuperFaktúre od Learn2Code zadarmo. Firmáreň.sk Založiť si živnosť, firmu, občianske združenie sa dá pohodlne, online a bez starostí. Portál na zakladanie firiem firmaren.sk je nástroj, vďaka ktorému si dokážeš firmu založiť už za 15 minút. Všetko cez internet a bez rád drahých právnikov. V rámci benefitov v Darčeku roka získavaš kupón na 15 Eur. WebSupport Líder slovenského webhostingového trhu, ktorý na trhu pôsobí od roku 2002 a aktívne sa podieľa na vytváraní zdravého podnikateľského prostredia, podporuje startupy, neziskovky a je tak neoddeliteľnou súčasťou slovenskej IT komunity. Tvoj web musí byť niekde uložený a my ti dávame hosting The Hosting 3 GB na 3 mesiace zadarmo. ESET ESET už vyše 30 rokov vyvíja popredný bezpečnostný softvér pre firmy i domácich používateľov na celom svete. V ESETe veria v technológie a chcú zabezpečiť, aby si ich užívatelia mohli vychutnávať bezpečne. Maj svoje dáta v bezpečí s 30% zľavou na produkty Eset Internet Security alebo Eset Smart Security Premium. Profit Inšpiratívny magazín pre aktívnych ľudí, ktorí chcú žiť naplno a meniť svet. Profit je mesačník, v ktorom nájdeš informácie o nových trendoch, výrazných osobnostiach, inspirujúce príbehy, osobné financie či zaujímavé investície. S Darčekom roka získavaš ročné predplatné so zľavou 50%. Bux.sk Internetové kníhkupectvo Bux.sk ponúka tisíce kníh skladom, novinky svetových aj domácich autorov. Nakúp knihy pre seba alebo blízkych v internetovom knižnom eshope bux.sk a získaj zľavu 10 Eur. Powerlogy Inovatívne produkty pre aktívnych ľudí, zdravé potraviny, káva a ďalšie produkty, ktoré ti už aj v malom množstve dodajú zdravú energiu na každý deň. Od Learn2Code získavaš 20% zľavu na nákup. Forbes Návod na úspech nájdeš v celosvetovo známom magazíne Forbes. Ak hľadáš inšpiráciu na celý rok, Forbes predplatné musíš mať. Okrem tlačeného magazínu získaš aj jeho elektronickú verziu a môžeš teda Forbes čítať v tablete alebo mobile. V rámci Darček roka od nás dostávaš zľavu 25% na nákup ročného predplatného.[Naši Partneri pre Darček roka] Súťaž o Apple produktyKaždý, kto si objedná Darček roka, je automaticky zaradený do súťaže o Apple produkty od partnera akcie Darček roka spoločnosti iStores. Konkrétne môžeš vyhrať nový iPhone Xs, iPad 2018 alebo Apple Watch series 3 GPS. Výhercov budeme žrebovať 1.1.2019 o 20:00 v livestreame na našom Facebooku a ich mená zverejníme aj na webe v sekcii súťaž.[Spoločnosť iStores] [Vyhraj iPhone, iPad alebo Apple Watch] Tip na darčekNevieš, čím obdarovať seba alebo svojich blízkych na Vianoce? Máme pre teba super tip - Darček roka od Learn2Code. Vzdelávanie je tá najlepšia investícia do budúcnosti pre teba alebo tvojich blízkych. A preto nám napíš email a vystavíme ti darčekový poukaz.
Websockety - message board
Tipy a triky
04.10.2018
Miroslav Beka

Websockety - message board

Ahoj, naposledy sme hovorili o websocketoch vo flasku. Používali sme knižnicu flask-socketio a prešli sme si základnú funkcionalitu. Táto knižnica používa koncept miestností alebo rooms, ktorý slúži na to, aby sme vedeli adresovať klientov v nejakých skupinách. Tento koncept sa používa v chatových aplikáciách, kde používatelia vidia správy len v miestnosti, v ktorej sa nachádzajú. Nedostanú správy zo žiadnej inej. Pozrieme sa teda na tento koncept a aby sme spravili aj nejaký reálny príklad, spravíme vlastnú chatovaciu appku. Používatelia sa budú môcť pridať do existujúcej miestnosti, chatovať s ostatnými, vytvárať nové miestnosti a podobne. Bude to veľmi jednoduchý message board.[Image] Základ projektuZačne tým, že si vytvoríme virtualenv! Bez toho sa ani nepohneme. $ mkdir websockets_message_board $ cd websockets_message_board $ virtualenv venv $ . venv/bin/activateInštalujeme závislosti. Budeme používať to isté, čo v predchádzajúcom článku (venv)$ pip install flask, flask-socketioIdeme na boilerplate pre našu appku. Štruktúra vyzerá asi takto: ▾ websockets_message_board/ ▾ static/ ▾ css/ main.css ▾ js/ main.js ▾ templates/ board.jinja ▸ venv/ server.pySúbory main.css a main.js sú zatiaľ prázdne, slúžia len ako placeholder. Pokračujeme teda so súborom server.py a ideme ho naplniť kódom. from flask import Flask from flask import render_template from flask import redirect from flask import url_for from flask_socketio import SocketIO app = Flask(__name__) app.config['SECRET_KEY'] = '\xfe\x060|\xfb\xf3\xe9F\x0c\x93\x95\xc4\xbfJ\x12gu\xf1\x0cP\xd8\n\xd5' socketio = SocketIO(app) ### WEB CONTROLLER @app.route("/") def index(): return redirect(url_for("view_board")) @app.route("/board/") def view_board(): return render_template("board.jinja") if __name__ == '__main__': socketio.run(app, debug=True)Rozdiel oproti minimálnej flask appke je ten, že ju inak spúšťame. Nepoužijeme if __name__ == '__main__': app.run()ale budeme ju spúšťať cez socketIO. if __name__ == '__main__': socketio.run(app, debug=True)To preto, aby aplikácia vedela spustiť viacero vlákien pre každého používateľa. Tak isto je dobré vedieť, že deployment na produkčný server takejto aplikácie je trošku komplikovanejší ako keď máme klasickú flask appku. Obsah základného templejtu board.jinja (aj jediného, ktorý budeme používať) je nasledovný: <!DOCTYPE HTML> <html> <head> <title>Short Term Memory Message Board</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> <script type="text/javascript" src="{{ url_for("static", filename="js/main.js")}}"></script> <link rel="stylesheet" type="text/css" href={{url_for("static", filename="css/main.css")}}> </head> <body> Hello </body> </html>máme tam zopár dôležitých importov ako socket.io, jquery a tak isto aj css a js súbory našej appky. Takýto jednoduchý základ môžeme spustiť a uvidíme, či všetko šlape ako má $(venv) python server.py WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance. * Serving Flask app "server" (lazy loading) * Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance. * Debugger is active! * Debugger PIN: 112-998-522FaceliftTento krok nie je vôbec potrebný, ale keďže všetci majú radi pekné veci, nainštalujeme si css framework zvaný semantic-ui. Je to fajn framework, mám s ním dobré skúsenosti. Dokumentácia je možno trošku tažšia na pochopenie, ale okrem toho to funguje a hlavne vyzerá veľmi pekne. [Image] Stačí stiahnuť toto zipko a integrovať do svojho projektu. Je to veľmi jednoduché. Zip rozbalíme a prekopírujeme nasledovné súbory • themes -> websockets_message_board/static/css/ • semantic.min.css -> websockets_message_board/static/css/ • semantic.min.js -> websockets_message_board/static/js/ Súbory semantic.min.js a semantic.min.css musím includnuť na svoju stránku, takže bežím do board.jinja a prihodím do hlavičky ďalšie riadky: <head> <title>Short Term Memory Message Board</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> <script type="text/javascript" src="{{ url_for("static", filename="js/semantic.min.js")}}"></script> <script type="text/javascript" src="{{ url_for("static", filename="js/main.js")}}"></script> <link rel="stylesheet" type="text/css" href={{url_for("static", filename="css/semantic.min.css")}}> <link rel="stylesheet" type="text/css" href={{url_for("static", filename="css/main.css")}}> </head>Je dôležité dať si pozor, aby sme najprv pridali jquery a až potom semantic.min.js, inak sa mi semantic-ui bude sťažovať, že nevie nájsť jquery knižnicu. V priečinku themes sú hlavne ikony a nejaké obrázky, ktoré semantic-uiposkytuje. Po inštalácií css frameworku môžem hneď vidieť zmenu v podobe iného fontu na mojej smutnej stránke. Nič iné tam ešte nieje. UISpravíme teraz približný náčrt UI, aby som vedel, ako appka asi bude vyzerať a aké funkcie jej vlastne spravíme. Nebude to nič svetoborné. Budeme mať jednu stránku ktorú rozdelím na 3 sekcie. Hlavná bude obsahovať správy, takže to bude môj message board. Bočný panel bude obsahovať zoznam miestností, do ktorých sa budem vedieť prepínať. No a na spodnej lište bude input pre moju správu.[Image] Zhmotním túto svoju predstavu do kódu. Otvorím board.jinja a nahádžem tam nejaké <div> elementy. Keďže používame semnatic-ui ako náš css framework, budem rovno používať triedy v html. Použijeme grid systém, ktorý nám zjednoduší prácu pri ukladaní ui elementov. <body class="ui container"> <div class="ui grid"> <div class="ten wide column"> message board </div> {# end ten wide column #} <div class="six wide column"> rooms </div> {# end six wide column #} </div> {# end grid #} <footer> text input </footer> </body>Môžem skúsiť naplniť tieto časti aj nejakým obsahom. Len tak zo zvedavosti, ako to bude vyzerať. Všetko bude zatiaľ len tak naoko (prototypovanie). Začneme tým najhlavnejším: message boardom <div class="ten wide column"> <h1 id="room_heading" class="ui header">Johny @ Music room</h1> <div id="msg_board"> <div class="ui mini icon message"> <i class="comment icon"></i> <div class="content"> <div class="header">Johny</div> <p>Hello there</p> </div> </div> <div class="ui mini icon message"> <i class="comment icon"></i> <div class="content"> <div class="header">Tommy</div> <p>Hi!</p> </div> </div> <div class="ui mini icon message"> <i class="comment icon"></i> <div class="content"> <div class="header">Tommy</div> <p>What's up?</p> </div> </div> </div> {# end msg board #} </div> {# end ten wide column #}Všetky správy som obalil do div s id msg_board aby som potom jednoducho vedel pridávať nové správy do tohto elementu.[Image] Spravíme to isté pre zoznam miestností. Rozhodol som sa, že do tohto bočného panelu strčíme aj formulár na zmenu mena používateľa. Ten by mal mať možnosť zmeniť svoje meno. Bude to vyzerať asi takto: <div class="six wide column"> <h4 class="ui dividing header">Change username</h4> <form id="choose_username" class="ui form" method="post"> <div class="field"> <div class="ui action input"> <input type="text" id="user_name" placeholder="username..."> <button class="ui button">Change</button> </div> </div> </form> <h4 class="ui dividing header">Rooms</h4> <form id="choose_room" class="ui form" method="post"> <div class="grouped fields"> <label for="fruit">Select available room:</label> <div id="room_list"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="room" class="hidden" value="Lobby"> <label>Lobby</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="room" class="hidden" value="Music"> <label>Music</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="room" class="hidden" value="Movies"> <label>Movies</label> </div> </div> </div> <div class="field"> <input type="text" id="new_room" placeholder="create new room"> </div> <button class="ui button"> Change Room</button> </div> </form> </div> {# end six wide column #}[Image] Tak isto som pridal aj <input /> na vytváranie nových miestností. Myslím, že takúto možnosť by používateľ mohol mať. Poslednou skladačkou bude input pre naše správy. <footer> <form id="send_msg_to_room" class="ui form" method="post"> <div class="field"> <div class="ui fluid action input"> <input type="text" id="msg_input" placeholder="message..."/> <button class="ui button" value="send">send</button> </div> </div> </form> </footer>[Image] Momentálne mi nebudú fungovať radio buttony, pretože semantic-ui potrebuje tieto inicializovať v javascripte. Pome teda na to. Otvoríme main.js a píšeme $(document).ready(function(){ // UI HANDLERS $('.ui.radio.checkbox').checkbox(); });Tak isto môžeme rovno vybaviť iniciálne spojenie cez websockety medzi klientom a serverom. $(document).ready(function(){ var url = location.protocol + "//" + document.domain + ":" + location.port; socket = io.connect(url); // UI HANDLERS $('.ui.radio.checkbox').checkbox(); });Posielanie správ môžem rovno aj vyskúšať v konzole prehliadača. Stačí otvoriť developer tools, prejsť na záložku console a tam už môžeme písať socket.emit("test", "hello there")[Image] Avšak, nič sa nedeje, pretože môj backend ešte nie je vôbec pripravený. Vrhneme sa teda na server side a implementujeme miestnosti - room. RoomsPresunieme sa do súboru server.py a pridáme handler pre základné eventy ktoré budeme používať: join, leave, msg_board, username_change ... from flask_socketio import send, emit from flask_socketio import join_room, leave_room ... ### WEB CONTROLLER @app.route("/") def index(): return redirect(url_for("view_board")) @app.route("/board/") def view_board(): return render_template("board.jinja") ## SOCKET CONTROLLER @socketio.on("join") def on_join(data): username = data["user_name"] room = data["room_name"] join_room(room) send("{} has entered the room: {}".format(username, room), room=room) @socketio.on("leave") def on_leave(data): username = data["user_name"] room = data["room_name"] leave_room(room) send("{} has left the room: {}".format(username, room), room=room) @socketio.on("msg_board") def handle_messages(msg_data): emit("msg_board", msg_data, room=msg_data["room_name"]) @socketio.on("username_change") def username_change(data): msg = "user \"{}\" changed name to \"{}\"".format( data["old_name"], data["new_name"]) send(msg, broadcast=True) ...Eventy join, leave a username_change fungujú veľmi jednoducho. Zakaždým sa pozriem na dáta, ktoré mi prišli (premenná data) a vytvorím jednoduchú správu, ktorú potom broadcastujem na všetkých používateľov v tej danej miestnosti. Ak si už poriadne nepamätáš, čo robil ten broadcast, pospomínaj z minulého blogu. Dôležité je použitie funkcií join_room a leave_room. Tieto pochádzajú z knižnice flask-socketio, ktorú sme inštalovali na začiatku. Slúžia na to aby sme priradili danú session do nejakej miestnosti. Potom, keď pošlem správu do miestnosti, dostanú ju všetci v tej miestnosti. Je to fajn mechanizmus ako kontaktovať iných klientov a usporiadať si ich do nejakých kategórií. rooms nemusím nevyhnutne používať len na chatovú funkcionalitu. Môžem to použiť na to, aby som si zoradil používateľov do nejakej spoločnej skupiny, ktorej posielam barsjaké dáta. Dajme tomu, že by som mal appku o počasí, a nejaká skupina používateľov by mala záujem o notifikácie, či bude pršať. Tak týchto by som hodil do spoločnej skupiny - miestnosti - a notifikácie by som posielal len im. Využitie je teda všakovaké. JavaScriptBackend bol v tomto prípade celkom jednoduchý a nepotrebovali sme toho veľa implementovať. Správy sa od nášho backendu len odrážajú ako od relátka, ktorý ich ďalej rozposiela klientom. Na strane klienta toho bude trošku viacej. Pokračujeme v súbore main.js. Teraz sa pokúsime implementovať posielanie správy a zobrazenie prichádzajúcej správy na messageboard. $(document).ready(function() { ... // generate random user name if needed setRandomNameAndRoom(); // join default room joinRoom(socket); // UI HANDLERS $('.ui.radio.checkbox').checkbox(); // send message $("form#send_msg_to_room").submit(function(event) { userName = sessionStorage.getItem("userName"); roomName = sessionStorage.getItem("roomName"); msg = $("#msg_input").val(); sendMessage(socket, userName, roomName, msg); this.reset(); return false; }); // handle new message socket.on("msg_board", function(data){ msg = '<div class="ui mini icon message">'; msg += '<i class="comment icon"></i>'; msg += '<div class="content">'; msg += '<div class="header">'+data["user_name"]+'</div>'; msg += '<p>' + data["msg"] + '</p>'; msg += '</div>'; msg += '</div>'; $("#msg_board").append(msg); }); }); // HELPERS function setRandomNameAndRoom(){ if (sessionStorage.getItem("userName") == null){ randomName = "user" + Math.floor((Math.random() * 100) + 1); sessionStorage.setItem("userName", randomName); sessionStorage.setItem("roomName", "Lobby"); }; }; function joinRoom(socket){ data = { "room_name" : sessionStorage.getItem("roomName"), "user_name" : sessionStorage.getItem("userName") }; socket.emit("join", data); }; function sendMessage(socket, userName, roomName, message){ data = { "user_name" : userName, "room_name" : roomName, "msg" : msg }; socket.emit("msg_board", data); }; Na začiatok vytvoríme nejaké random meno používateľa a zvolíme default miestnosť "Lobby". To aby sme s týmto nemali starosti zatiaľ. Používame na to pomocné funkcie, ktoré si implementujeme bokom, aby nám nezavadzali. Meno používateľa a názov aktuálnej miestnosti si udržiavam v sessionStorage, čo je fajn dočasné úložisko v prehliadači. Prežije aj reload stránky a navyše sa mi tento spôsob viacej páči ako udržiavať informáciu v cookies. Keď máme potrebné dáta, môžeme sa hneď na začiatku buchnúť do nejakej miestnosti. V javascripte používame knižnicu socket.io, ktorá ale žiadny koncept miestností nepozná. Ak sa pozrieš do dokumentácie (pozor! otvor si client api), zistíš, že nič také ako rooms sa tam nespomína. Takže to je vecička knižnice flask-socketio. Použijeme teda klasický emit na handler join, ktorý existuje na servery. Tento riadok $("form#send_msg_to_room").submit( sa pomocou jquery napichne na formulár a zachytí odoslanie formuláru. Potom môžem robiť čo sa mi zachce a nakoniec vrátim false, takže formulár sa reálne ani neodošle. Odoslanie správy je priamočiare. Zistím UserName, zistím RoomName, vytiahnem si text správy a všetko pošlem do funkcie sendMessage. Táto už zabezpečí zabalanie informácií do jsonu a posielam pomocou funkcie emit. Posielam na handler msg_board, ktorý som si spravil pred chvíľkou. Ostáva mi vyriešiť prijatie správy. To robím pomocou funkcie socket.on, kde dám kód, ktorý sa vykoná pri prijatí správy. Tu si jednoducho (ale zato strašne škaredo) pozliepam kus HTML, ktoré potom strčím na koniec elementu s id msg_board. Predtým, ako to budeš skúšať, je fajn si ešte vymazať tie fejkové správy, ktoré sme tam dali natvrdo do HTML. Takže mažeme tieto riadky <div class="ten wide column"> <h1 id="room_heading" class="ui header">Johny @ Music room</h1> <div id="msg_board"> ---> <div class="ui mini icon message"> ---> <i class="comment icon"></i> ---> <div class="content"> ---> <div class="header">Johny</div> ---> <p>Hello there</p> ---> </div> ---> </div> ---> <div class="ui mini icon message"> ---> <i class="comment icon"></i> ---> <div class="content"> ---> <div class="header">Tommy</div> ---> <p>Hi!</p> ---> </div> ---> </div> ---> <div class="ui mini icon message"> ---> <i class="comment icon"></i> ---> <div class="content"> ---> <div class="header">Tommy</div> ---> <p>What's up?</p> ---> </div> ---> </div> </div> {# end msg board #} </div> {# end ten wide column #}Pome teda ako ďalšiu vec vybaviť zmenu používateľského mena. $(document).ready(function(){ ... // set heading updateHeading(); // set user name handler $("form#choose_username").submit(function(event){ // get old and new name var oldName = sessionStorage.getItem("userName"); var newName = $("#user_name").val(); //save username to local storage sessionStorage.setItem("userName", newName); // change ui updateHeading(); // notify others notifyNameChange(socket, oldName, newName); //clear form this.reset(); return false }); }); function updateHeading(){ roomName = sessionStorage.getItem("roomName"); userName = sessionStorage.getItem("userName"); $("#room_heading").text(userName + " @ " + roomName); }; function notifyNameChange(socket, oldName, newName){ data = { "old_name" : oldName, "new_name" : newName } socket.emit("username_change", data); };Tak ako pri posielaní správy, napichnem sa na HTML formulár a spracujem ho ešte pred odoslaním. Zmeny uložím do sessionStorage. Pridal som ešte 2 vychytávky. • funkcia updateHeading nastaví aktuálny názov miestnosti a používateľa ako hlavičku stránky, • notifyNameChange dá všetkým používateľom vedieť, že si niekto zmenil meno. Meno si už môžem meniť, ale notifikáciu o zmene som nedostal. Na to ešte musíme doplniť jeden event handler na message $(document).ready(function(){ ... // system message socket.on("message", function(data){ msg = '<div class="ui mini icon info message">'; msg += '<i class="bell icon"></i>'; msg += '<div class="content">'; msg += '<p>' + data + '</p>'; msg += '</div>'; msg += '</div>'; $("#msg_board").append(msg); }); }); ...Teraz sa nám začnú zobrazovať aj systémové notifikácie o tom, čo sa deje. Kto vošiel do miestnosti, kto ju opustil alebo kto si zmenil meno. Poslednou vecou, ktorú musíme spraviť, je selekcia miestností. Toto bude vyžadovať trošku viacej práce. Zoznam existujúcich miestností si musíme udržiavať na backende. Ani na klientskej časti ani na backende z knižnice flask-socketio neviem získať zoznam všetkých miestností. Musím si ho teda udržiavať sám. from flask import g ... DEFAULT_ROOMS = ["Lobby"] ... @app.route("/board/") def view_board(): all_rooms = getattr(g, "rooms", DEFAULT_ROOMS) return render_template("board.jinja", rooms=all_rooms) ... ### SOCKET CONTROLLER @socketio.on("join") def on_join(data): username = data["user_name"] room = data["room_name"] all_rooms = getattr(g, "rooms", DEFAULT_ROOMS) if room not in all_rooms: all_rooms.append(room) emit("handle_new_room", {"room_name" : room}, broadcast=True) join_room(room) send("{} has entered the room: {}".format(username, room), room=room)Do templejtu board.jinja som si začal posielať nejaké dáta. Vyhodím teda tie fejkové, ktoré sú tam natvrdo, a spravíme loop, v ktorom pridám všetky existujúce miestnosti. <div id="room_list"> {% for room in rooms %} <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="room" class="hidden" value="{{room}}"> <label>{{room}}</label> </div> </div> {% endfor %} </div>Pokračujem v súbore main.js, kde si vytvorím funkcie, ktoré sa postarajú o zmenu miestnosti + ak bola vytvorená nová, tak ju pridám do zoznamu. $(document).ready(function(){ ... // set room name heading selectCurrentRoom(); updateHeading(); ... // set room handler $("form#choose_room").submit(function(event){ newRoom = getRoomName(); // first leave current room leaveRoom(socket); // set new room sessionStorage.setItem("roomName", newRoom); updateHeading(); // join new room joinRoom(socket); //clear input newRoom = $("#new_room").val(""); //clear message board $("#msg_board").text(""); return false; }); socket.on("handle_new_room", function(data){ item = '<div class="field">'; item += '<div class="ui radio checkbox">'; item += '<input type="radio" name="room" class="hidden" value="'+ data["room_name"] + '">'; item += '<label>' + data["room_name"] + '</label>'; item += '</div>' item += '</div>' $("div#room_list").append(item); selectCurrentRoom(); }); }); ... function leaveRoom(socket){ data = { "room_name" : sessionStorage.getItem("roomName"), "user_name" : sessionStorage.getItem("userName") }; socket.emit("leave", data); }; function selectCurrentRoom(){ currentRoom = sessionStorage.getItem("roomName") $(".ui.radio.checkbox").checkbox().each(function(){ var value = $(this).find("input").val(); if (value == currentRoom){ $(this).checkbox("set checked"); }; }); }; function getRoomName(){ roomName = $("#new_room").val(); if (roomName == ""){ roomName = $("input[type='radio'][name='room']:checked").val(); }; return roomName; };Je tu viacero pomocných funkcií, ktoré mi pomáhajú pri výbere miestnosti alebo pri vytváraní novej. Problematické časti nastávajú práve v tedy, keď chcem miestnosť aj vytvárať. V podstate ale nejde o žiadne komplikované veci. Funkcia selectCurrentRoom mi pomôže prehodiť radio button pri zmene miestnosti. Tým, že používame semantic-ui tak sa nám to tiež trošku skomplikovalo, ale výsledok stojí za to.[Image] ZáverPostavili sme takzvaný proof of concept, spravili sme chatovaciu appku len pomocou websocketov. Nie je to dokonalé a určite je tam veľa múch, to nám však nebránilo pochopiť ako fungujú websockety. Všetky správy žijú len v prehliadači používateľa a nie sú uložené na žiadnom serveri. Niekto to môže považovať za chybu, niekto za fičúru. To už nechám na vás. Celý projekt sa dá stiahnuť tu. Onedlho sa opäť vrhneme na nejakú zaujímavú tému ;)
Code Week 2018
Podujatia
02.10.2018
Skillmea

Code Week 2018

Čo je Európsky týždeň programovania? Európsky týždeň programovania je nezávislé hnutie dobrovoľníkov, ktorí vo svojej vlasti propagujú programovanie v úlohe veľvyslancov týždňa programovania. Všetci organizátori podujatí zameraných na programovanie (školy, učitelia, programátorské kluby a krúžky, knižnice, podniky, verejné orgány) sa vyzývajú, aby doplnili svoje podujatie na mapu na stránke codeweek.eu. Na čo slúži týždeň programovania?• Oslavuje programovanie ako tvorivú činnosť • Dáva ľuďom slobodu • Spája ľudí • Nadchne viac ľudí pre vedu, techniku, inžinierstvo a matematiku Čo si môžem z tohto podujatia odniesť ja?• Programovanie je zábava! • Programovanie je tvorivé! Ľudstvo sa od nepamäti venuje tvorbe – najskôr s pomocou hliny, kameňa, tehál, papiera či dreva, dnes už aj vďaka počítačovému kódu. • Programovanie dáva ľuďom slobodu! Digitálny obsah nemusíte len pasívne prijímať. Vďaka programovaniu môžete veci aj sami tvoriť a sprístupňovať ich miliónom ľudí. Môžete vytvárať webové stránky či hry alebo kontrolovať počítač alebo robota kódom. • Je to možnosť pochopiť svet. Čoraz viac vecí je vzájomne prepojených. Ak vieme, čo sa deje v zákulisí, pochopíme, ako funguje svet! • Programovanie nás učí algoritmickému mysleniu, riešeniu problémov, kreativite, kritickému mysleniu, analytickému mysleniu a tímovej práci. • Až 90 % pracovných miest dneška si vyžaduje digitálne zručnosti vrátane programovania.[Image] Ako sa môžem zapojiť do Európskeho týždňa programovania?• Programátori môžu organizovať semináre v miestnych školách, co-workingových priestoroch, komunitných strediskách alebo knižniciach. • Učitelia, ktorí majú skúsenosti s programovaním, môžu viesť hodiny programovania, vymieňať si učebné osnovy či organizovať semináre pre kolegov. • Učitelia, ktorí (zatiaľ) nemajú skúsenosti s programovaním, môžu zorganizovať semináre alebo pozvať rodičov či študentov, aby sa navzájom naučili programovať. • Rodičia môžu podporiť svoje deti, aby navštívili seminár venovaný programovaniu. • Podniky a neziskové organizácie môžu viesť semináre o programovaní, poskytnúť svojich zamestnancov ako školiteľov v rámci aktivity „staň sa školiteľom“, organizovať pre študentov zábavné programátorské súťaže alebo takéto podujatia sponzorovať. • Verejné inštitúcie môžu organizovať semináre o programovaní alebo diskusie za okrúhlym stolom vo vlastných priestoroch. • Každý, kto sa zúčastňuje na podujatí zameranom na programovanie, sa o skúsenosti môže podeliť na webovej stránke Európskeho týždňa programovania a inšpirovať ostatných! Nezabudnite pridať svoje podujatie na stránke CodeWeek a používať hashtagy #CodeEU a #CodeWeek.
Juraj Šarišský - nový lektor webdesignu
Rozhovory
27.09.2018
Skillmea

Juraj Šarišský - nový lektor webdesignu

Juraj Šarišský je skúsený frontenďák, ktorý ťa bude učiť, ako sa robia poriadne webstránky. Má za sebou roky skúseností s frontendom, momentálne pracuje s React/React Native / Redux a ďalšími top technológiami. Pracoval na projecte v ECB vo Frankfurte, kde bol UI app developer / React / Redux / UX/ UI. Navyše 7 rokov doučoval matematiku a teraz ťa bude učiť kódovať webstránky na kurze v Bratislave.[Juraj Šarišský] Kde teraz pracuješ? Predstav sa nám aj po pracovnej stránke.Momentálne pracujem na pozícii React a Redux developer pre nemeckého nadnárodného klienta. Vzdelávam a učím ostatných kolegov Front-End development. Čo sa ti na tvojej práci páči najviac?Moja súčasná práca mi prináša okrem programovania tiež príležitosť zdieľať svoje vedomosti a skúsenosti s ostatnými kolegami. U nás v práci aktívne budujem front-endovú kultúru. Snažím sa poskytnúť mojim kolegom spôsob vnímania a myslenia, ktorý je potrebný pre kvalitný development a ktorý je odlišný od myslenia, ktoré sa používa na back-ende. U nás si lektorom kurzu Web Designer. Ako si sa k programovaniu, tvorbe webstránok a učeniu dostal?K tvorbe webových stránok som sa dostal počas štúdia na vysokej škole, kde som mal možnosť vidieť práce môjho spolužiaka. Boli to veľmi pekné a kvalitné stránky, tak som si povedal, že by ma tiež bavilo robiť to čo on. Zadovážil som si kvalitné knihy a online kurzy. Začal som s responzívnym designom a Javascriptom. Potom prišlo jQuery. S učením som začal súbežne s tým, ako som pomáhal ostatným študentom a spolužiakom so školskými zadaniami.[Juraj pracoval na viacerých zaujímavých projektoch] Čo všetko môže dať kurz Web Designer niekomu, kto sa rozhodne ho absolvovať?Určite je to potrebná skúsenosť s čistým HTML, CSS a Javascriptom. Nakoľko sa dnes mnoho front-endových developerov učí pracovať rovno s Angularom a Reactom a následne neprejdú cez DOM manipuláciu a Vanilla Javascript, chýbajú im skúsenosti a modely na riešenie UI problémov. Každý front-end developer je v prvom rade HTML, CSS a Javascript developer a preto by mal ovládať aj tieto technológie. Sleduješ aj konkurenciu, aktuálne trendy, inovácie? Ako si na tom v tomto smere?V našej brandži nastal obrovský boom, prichádzajú nové knižnice a frameworky. A ja vôbec nelením a každý deň si pozriem niečo nové. Skúšam nové techniky, snažím sa diskutovať s developermi a zistiť, čo preferujú oni a prečo. Je však potrebná určitá rezervovanosť, nakoľko nie každá technológia prežije. Hlavný focus (preto) vidím v poznávaní Javascriptu a HTML5 api, prípadne je dobré napojiť sa na komunitu, od ktorej sa môže developer veľa naučiť. Dnes je dosť veľa pracovných ponúk v oblasti programovania a tvorby webstránok. Vnímaš to tak aj ty?Áno, určite. Veľké i menšie spoločnosti chcú desktopové aplikácie nahradiť webovými verziami. Keď si predstavíme, že desktopové aplikácie, ktoré tu boli približne 20 rokov sa presúvajú na web, otvára to možnosti pre webových developerov, ktorí sú naozaj veľmi žiadaní. Je táto práca dobre zaplatená? :)Určite áno :). Dnes si aj junior, ktorý príde do väčšej či menšej spoločnosti, kde začne získavať svoje prvé skúsenosti, a kde bude riešiť menej náročné úlohy, môže prísť k platu, ktorý prevýši návrh: prevyšujúcemu priemerný plat na Slovensku. Keď sa zdokonalí v technológiách a je k tomu navyše aj flexibilný, môžeme hovoriť aj o 3 až 5 násobne vyššej mzde, než je to v prípade juniorských pozícií.  Je na Slovensku a v Čechách podľa teba dosť kvalifikovaných ľudí práve na tieto vývojárske pozície?Veľa kvalitných ľudí asi odišlo do zahraničia, to je dnes všeobecne známy problém. Ale tiež nároky firiem bývajú často vyššie než boli pred časom. To podľa mňa otvára možnosť k interpretovaniu toho, čo znamená kvalitný developer.  Ja si myslím, že je dobré špecializovať sa na vybranú oblasť a dosahovať v tejto oblasti vynikajúce výsledky, ale zároveň mať aj znalosti z iných oblastí, aby bol developer flexibilný. Ak by som to mal povedať zjednodušene, potom áno, vo všeobecnosti na trhu chýbajú developeri. Preto som sa rozhodol, že začnem vzdelávať ďalších developerov, aby sme získali náskok pred ostatnými krajinami :) Čo by si poradil všetkým, ktorí nemajú žiadne skúsenosti s programovaním a tvorbou webstránok, ale chceli by nejako začať?Určite by som im poradil aby v prvom rade začali skúmať bežné webové a mobilné aplikácie a zistiť ako fungujú z pohľadu business logiky, aké komponenty a funkcie obsahujú. Toto vedie k správnemu kontextu pre praktické programovanie. Je dôležité vybrať si kvalitný kurz, kde sa naučia okrem programovania aj niečo z developerských a firemných kultúr. Taktiež je dôležité nestrácať chuť učiť sa a na začiatok vyriešiť veľa ľahších problémov. Veď aj tie zložitejšie problémy sú predsa zložené z jednoduchých. A ešte nám prezraď tvoje plány do budúcnosti.V pracovnej oblasti by som ešte chcel zvládnuť programovanie natívnych aplikácií pre iOS. Momentálne sa venujem najmä React a React Native, ale akosi cítim, že pre univerzálnejší prístup je dobré ovládať aj natívne iOS programovanie. Tiež by som chcel navštíviť zaujímavé miesta ako sú Španielsko a Portugalsko, a to hlavne pre ich exotickú kultúru. Ak máš na Juraja nejaké otázky, napíš ich do komentárov. Ak ťa zaujíma tvorba webstránok a si z Bratislavy a okolia, prihlás sa na Jurajov kurz.
Java 8
Tipy a triky
19.09.2018
Skillmea

Java 8

Java 8 je veľký balíček novej funkcionality oproti Java 9 a java 10. Tie sú menšie a odzrkadľujú taktiku tvorcov javy vydávať nové verzie častejšie s menším balíkom novej funkcionality. V tomto článku si povieme najvýraznejšie zmeny z Java 8. Funkcionálne rozhraniaRozhranie, ktoré má len jednu abstraktnú metódu je považované za funkcionálne rozhranie. Pre lepšie načrtnutie v kóde môžeme a je odporúčané pridať anotáciu @FunctionalInterface.  import java.lang.FunctionalInterface;   @FunctionalInterface public interface FunctionalInterfaceExample {     void print(); }  Lambda výrazyOk, chceme pridať do javy možnosť definovať funkcionalitu bez toho aby patrila špecificky pod nejakú triedu. Tieto funkcie chceme vkladať do metód ako parametre. Čo spravíme? Tvorcovia javy sa asi takto nezamýšľali, ale my sme sa takto zamysleli a odpoveď je – použijeme lambda výrazy.  Každá lambda má ako typ funkcionálne rozhranie s jej odpovedajúcou metódou. V príklade vyššie máme rozhranie s metódou print. Táto metóda nevracia nič a neprijíma žiadne parametre. Musíme vytvoriť aj taký lambda výraz – teda nebude obsahovať return a nebudeme mať žiadne návratové hodnoty.  () -> System.out.println("Hello Word")Takto vložíš lambda výraz do metódy:  printHelloWord(() -> System.out.println("Hello Word"));Samotná metóda prijíma na vstupe práve dané funkcionálne rozhranie:  public void printHelloWord2(FunctionalInterfaceExample printHello)Viac o lambda výrazoch sa dozvieš z môjho online kurzu Java pre pokročilých, videá o lambda výrazoch sú zadarmo. StreamsStreamy poskytujú zjednodušenú prácu s dátovými kolekciami. Poskytujú viacero užitočných metód ako sú napríklad filter, sorted, map a iné. Ak stream préjde cez všetky elementy v kolekcii, tak bude prázdny. Teda ak chcem znovu použiť ten istý stream, tak zbytočne, lebo tam už nebudú dáta. Musíš si vytvoriť nový stream.  Nový stream vytvoríš napríklad pomocou stream metódy nad kolekciami.  List<Osoba> osoby = Arrays.asList( null, new Osoba("Jaro", "Beno", 30), new Osoba("Peter", "Kridlo", 55), new Osoba("Karol", "Otko", 18), new Osoba("Karol", "Beno", 18), new Osoba("Peter", "Otko", 20), new Osoba("Fedor", "Ronald", 84) ); osoby.stream();Máš zoznam osôb a chceš z daného zoznamu získať všetky veky osôb starších ako 50 rokov a majú byť zoradené podľa veku. Čo spravíš? Použiješ stream a jeho metódy – tieto metódy akceptujú funkcionálne rozhrania, teda tam dáš lambda výrazy.  List<Integer> veky = osoby.stream() .filter(osoba -> osoba.getVek() < 50) .sorted(Comparator.comparing(Osoba::getVek)) .map(Osoba::getVek) .collect(Collectors.toList());Kolekcie, ktoré sú iterovateľné, majú metódu forEach – ktorá získa stream a prejde všetky elementy.  veky.forEach(System.out::println);   Method referencePo slovensky referencia na metódu. Všimni si príklad z hora: Osoba::getVek. Znamená to, že z triedy Osoba použi metódu getVek. To isté sa dá zapísať aj pomocou lambda výrazu takto osoba -> osoba.getVek(). Ale pomocou referencie si to zjednodušíme lebo java vie, aký je vstupný parameter – je to osoba a vie, že voláš getVek. Tak stačí napísať Osoba::getVek. Metódu voláš bez zátvoriek.  Ďalší článok o Jave už čoskor. Prihlás sa k odberu noviniek a nezmeškaj žiadný nový blog.   
Success story: fullstack webdeveloper Roman
Success stories
09.09.2018
Skillmea

Success story: fullstack webdeveloper Roman

Roman Podskuba študoval na FRIčke Žilinskej univerzity a počas písania diplomovky si uvedomil, že práve weby sú oblasť, ktorá ho baví. Rozhodol sa tomu venovať maximum, absolvoval náš 3-mesačný kurz Web Designer a potom ešte vzdelávací program Azet akadémia. A teraz už zarezáva v tíme Bistro.sk ako full-stack webdeveloper. Prečítaj si jeho príbeh, programátorské začiatky a rady, ktoré dáva začínajúcim kóderom. Začnime tvojou aktuálnou prácou. Čo presne robíš, aká je tvoja pozícia? Pracujem ako webdeveloper v Ringier Axel Springer SK. Pre niekoho bude firma možno známejšia pod značkou Azet. Dostal som sa do tímu Bistra, takže mojou úlohou je podieľať sa na vývoji bistro.sk. Okrem toho vyvíjame aj platformu pre zákaznícky servis a spravujeme aj Azeťácky katalóg, či slovník. Všetci webdeveloperi v tíme sme fullstack, takže pracujeme ako na frontende, tak aj na backende. Nastúpil som len koncom júla 2018, takže momentálne sa viac rozhliadam, ako robím :D[Roman Podskuba - fullstack webdeveloper] Ako si k tejto pozícii dostal?  Vždy som chcel robiť niečo, kde budem môcť používať hlavu a bude ma to aj baviť. Po strednej škole som skúsil ísť študovať informatiku. Tam ma to občas bavilo a občas nie. Až pri diplomovej práci som sa dostal k tvorbe webov a začal som tušiť, že to by mohlo byť niečo, o čo by som sa mal zaujímať. Po škole som šiel na trojmesačný kurz do Žiliny a po ňom som mal už jasno, že toto bude tá správna cesta pre mňa. Máš nejaký vzor, ktorý ťa inšpiruje? Osobu, ktorá je pre teba motivátorom? Momentálne som obklopený ľuďmi, ktorí toho vedia niekoľko násobne viac ako ja. Takže o inšpiratívnych ľudí núdzu nemám. Spomenul by som však jedno meno - Ernest Sawyer - chalan, ktorý viedol kurz v Žiline. On bol asi prvá osoba, vďaka ktorej som si povedal, že to so mnou nemusí byť až také márne, ako som si niekedy myslel. Dal mi presne to, čo som vtedy potreboval - ukázal mi, že len tým, že budem kódiť stránky, sa naučím kódiť stránky. Vďaka nemu som cítil, že každým týždňom robím pokroky. Jeho prístup bol fantastický. Motivuje ma najmä priateľka a najbližšia rodina. Prešli si so mnou od obdobia, keď som bol na úrade práce až doteraz. Vždy som cítil ich podporu a veľmi sa zaujímajú o to ako sa mám v práci a čo tam vlastne robím. Vďaka nim sa cítim vnútorne v pohode a to ma dobíja energiou. Kde berieš inšpiráciu pre svoju prácu? Máš nejaké tipy, ktoré zaručene fungujú? Od kolegov. Dostal som sa do tímu, kde je 10 programátorov a ešte kopec ďalších ľudí, ktorí sa o bistro.sk starajú. Pri toľkých ľuďoch sa každý deň dozviem niečo nové. Na internete je kopec článkov, stránok, tutoriálov, fór a pod., ale nič nie je lepšie ako osobný kontakt s ľuďmi, ktorí sa vo veciach vyznajú do hĺbky. V tejto oblasti je potrebné sledovať aktuálne trendy, inovácie. Ako si na tom ty? Stíhaš to všetko popri práci? Musím sa priznať, že ak sa v osobnom čase venujem nejakým veciam, tak sú to veci, ktoré nemusia byť “trendové”, ale pomôžu mi v práci. Momentálne však v práci ešte doznieva Azet akadémia a mávame raz týždenne workshopy na rôzne témy, kde sa vždy riešia aj aktuálne trendy. Takže tieto veci sa mi dostávajú v práci a vo voľnom čase sa tak môžem venovať najmä veciam mimo IT. Čím všetkým si si musel prejsť, pokiaľ si sa vypracoval na túto pozíciu? Mám vyštudované počítačové inžinierstvo na fakulte riadenia a informatiky na Žilinskej univerzite. Odbor bol zameraný skôr do oblasti hardvéru, robotiky a podobných vecí. Tvorbu webov tento odbor nepokrýva. Mne sa našťastie podarilo dostať sa k diplomke, kde som mal robiť webovú aplikáciu pre zobrazovanie stavu senzorov na platforme Yrobot. Pri tvorbe aplikácie som sa dostal ku kurzu Webrebel 1, pozeral som videá a popri tom využil to, čo sa mi hodilo do mojej práce. Tu som si uvedomil, že web by mohla byť cesta a preto som po ukončení školy išiel na prezenčný kurz od Learn2Code, ktorý viedol Ernest Sawyer. Tu som sa naučil veľmi veľa. Keby som sa učil tieto veci sám, ešte teraz by som určite nebol tam, kde som bol po kurze. Kurz mi dal základy, na ktorých som mohol neskôr stavať. Po kurze som pomáhal pri dvoch projektoch s HTMLkom a CSSkom Námestovskej firme Neonus, kde som sa tiež veľa naučil. A potom som sa výrazným krokom posunul k mojej terajšej pozícii. Prihlásil som sa na Azet Akadémiu, kde som sa takmer 3 mesiace učil na rôznych cvičných projektoch. Väčšina vecí bola zameraná na PHP, ale vyskytli sa tam samozrejme aj HTML a CSS. Okrem toho aj niečo z JavaScriptu či mysql. Počas týchto troch mesiacov som dal do toho veľa úsilia aj vo voľnom čase, čo mi v konečnom dôsledku dosť pomohlo. Pri štúdiu pomimo akadémie, ale aj v nej, som zas využíval kurzy od Learn2Code - Webrebel 1 a 2, Sass, Git a databázy. No, a po akadémii som sa už dostal do tímu Bistra :)[Účastníci Web Designer kurzu v Žiline (Roman v strede :))] Čo ťa najviac baví na tvojej práci? Máš nejaký obľúbený task, ktorý robíš najradšej? Zatiaľ ma baví všetko. Uvidím, ako to bude vyzerať, keď opadne to úvodné nadšenie :) No úplne najviac ma bavia veci, kde môžem použiť doteraz naučené veci a postupne k tomu pridávať nejaké nové poznatky. Momentálne dostávam v práci tasky, ktoré nie sú príliš zložité a sú založené na tom, že každým jedným sa naučím niečo nové, takže na takmer každom tasku si nájdem niečo, čo ma zaujme. Keby však mám vypichnúť jednu vec, tak veľmi rád špekulujem s CSSkom. Na kurze som dostal výborné základy, na ktoré sa mi pomerne ľahko nabaľujú nové veci. Dnes je obrovský dopyt po programátoroch a dizajnéroch. Čo by si poradil všetkým, ktorí nemajú žiadne skúsenosti, ale chceli by nejako začať? Aby sa nebáli a začali. Strach bol mojou asi najväčšou prekážkou. Ešte donedávna som mal pocit, že keď niečo neviem aspoň na 110%, tak nemá význam s tým niečo riešiť, ale treba sa ešte učiť. Postupom času mi však došlo, že takto sa nikam nedostanem. Kódil som si nejaké weby sám pre seba, čo mi určite niečo dalo, ale nič ma neposúvalo vpred tak, ako keď som bol medzi ľuďmi, ktorí veciam rozumejú a mohol som sa ich pýtať. Jednoznačne treba hľadať nové výzvy a skúšať. Každý, kto má snahu, je v tomto odvetví vítaný a časom si určite nájde to, čo ho bude baviť. Takže najdôležitejšie, teda aspoň u mňa, je mať odvahu skočiť do neprebádaných vôd a snažiť sa naučiť plávať. Čo je podľa teba najväčšou výhodou práce v IT odvetví? Je to odvetvie, ktoré ponúka nespočetné množstvo možností. Stále je priestor na učenie sa a zlepšovanie a úlohy väčšinou nie sú stereotypné. Mnohým ľuďom, vrátane mňa, určite musí vyhovovať to, že práca v IT odvetví si vo veľa prípadoch nevyžaduje fixný pracovný čas. Výhod je mnoho, každý si určite nájde tú svoju. Úplne najväčšou výhodou pre mňa je však to, že ma to baví. A to je podľa mňa najdôležitejšie, aby ľudia robili to, čo ich baví a mali z práce radosť. Mal si niekedy pocit, že to nezvládneš? Bolo obdobie, kedy si chcel skončiť a robiť niečo úplne iné? Počas kurzu sa nič také nestalo, tam som pomaly prichádzal na to, že toto je to čo chcem určite robiť a v čom môžem byť dobrý. Až v Azet akadémii som mal občas pocit, že je niečo nad moje sily. Začínalo nás 12 a vedeli sme, že prácu dostanú len niektorí. To mi občas tlačilo do hlavy myšlienky, že práve ja by som mohol byť ten, kto pôjde ďalší deň domov. Ale nikdy som si nepovedal, že chcem robiť niečo úplne iné a vždy, keď sa už k tomu mohlo schyľovať, som zapol aj vo voľnom čase a dal tomu trošku viac, ako by sa možno odo mňa očakávalo.[Účastníci Azet academy]Aké sú tvoje plány do budúcnosti? Som človek, ktorý uprednostňuje stabilitu pred častými veľkými zmenami. Čo sa týka práce, tak kým ma to bude baviť, budem napredovať a budem celkovo spokojný, tak by som rád ostal v Azete. Keďže momentálne toto všetko práca v tíme Bistra spĺňa, nemám dôvod čo i len uvažovať nad zmenou. Skôr mám nejaké plány v osobnom živote, keďže nová práca mi ponúkla aj nové možnosti :) Máš nejakú radu, ktorú by si chcel zdieľať so študentami, ktorí len začínajú s dizajnom, tvorbou web stránok a programovaním alebo so svojím vzdelávaním v IT oblasti? Každý človek je iný. Každý potrebuje niečo iné. Niekomu vyhovuje ísť do toho po hlave a učiť sa od rána do večera. Niekomu zas nabaľovať znalosti v menších dávkach. Jednu vec si však musí uvedomiť každý jeden človek, ktorý chce začať (a nie len začať). Ak niekto čaká, že mu niekto naleje vedomosti do hlavy, tak by sa mal nad tým zamyslieť alebo pouvažovať o inom zameraní. IT oblasť si vyžaduje veľa úsilia, ktoré vychádza od človeka, ktorý sa touto cestou rozhodol ísť. Okrem toho je fajn byť trpezlivý - na začiatku idú veci pomaly a to je občas frustrujúce. Ale s dostatočnou dávkou trpezlivosti má každý šancu na to, aby sa uplatnil v tom, čo ho baví. Romanovi ďakujeme za super rozhovor a parádnu motiváciu aj pre ostatných začínajúcich programátorov. 
Martin Rumanovský - predstavenie nového lektora
Rozhovory
04.09.2018
Skillmea

Martin Rumanovský - predstavenie nového lektora

Martin sa už viac ako 8 rokov venuje programovaniu. Vybudoval vlastnú firmu, ktorá poskytuje komplexné IT služby na mieru a pôsobia na slovenskom aj zahraničnom trhu. Klientom sa snažia priniesť kvalitný a detailne vypracovaný produkt. Martin navrhol vlastné systémy, s ktorými pracujú pri tvorbe webov, eshopov či aplikácií. Popri tom študuje informatiku na Univerzite T. Bati v Zlíne. Martin sa vždy snaží o jedinečnosť toho, čo robí a to naučí aj vás v pripravovaných kurzoch. Martin bude viesť prezenčný kurz tvorby webstránok pre začiatočníkov Web Designer v Banskej Bystrici. Ahoj Martin, vítame ťa u nás v Learn2Code. Si naším novým lektorom, tak sa nám na začiatok trochu predstav.Pochádzam z Banskej Bystrice. Už viac než 8 rokov sa venujem programovaniu a taktiež aj grafike a marketingu. Okrem toho kombinovane (externe) dokončujem štúdium. Na prekvapenie som si vybral odbor informačné technológie na Univerzite Tomáša Baťu v Zlíne. Vo voľnom čase veľmi rád cestujem, športujem a študujem.[Martin Rumanovský - lektor Learn2Code] Kde teraz pracuješ? Predstav sa nám aj po pracovnej stránke.Aktuálne pracujem vo firme, ktorú som sám založil a vybudoval. Firma má názov MR Studio WEB & APP Development (mrstudio.eu) a poskytujeme komplexné IT služby na mieru. Snažíme sa priniesť kvalitný a detailne vypracovaný produkt. Navrhol a vytvoril som vlastné systémy, s ktorými pracujeme pri tvorbe webových stránok, webových aplikácií, portálov, eshopov a marketingu. Primárne pôsobíme na slovenskom a českom trhu. Čo sa ti na tvojej práci páči najviac?Na mojej práci sa mi najviac páči flexibilita z hľadiska času aj miesta práce. Tiež veľmi rád komunikujem s klientmi a hľadám pre nich inovatívne a efektívne riešenia. Samozrejme najviac sa mi páči, keď je klient s vyvinutým produktom spokojný. V Learn2Code si lektorom kurzu Web Designer. Ako si sa k programovaniu, tvorbe webstránok a učeniu dostal?K programovaniu som sa dostal ešte ako študent strednej školy. S kamarátmi sme vo voľnom čase hrávali online hry, ako je NHL alebo FIFA. Časom sme sa zhodli, že potrebujeme webovú stránku na zapisovanie výsledkov, tabuliek a podobne. Vtedy som sa dostal k programovaniu a tvorbe webových stránok. K učeniu som sa dostal vďaka mojej priateľke. Častokrát som jej hovoril, že niektorí programátori nemajú dostatočné znalosti z praxe, ktoré firmy vyžadujú. A ja by som ich chcel naučiť, práve, niečo z praxe, nielen tú teoretickú rovinu. No a ona ma neskôr prihlásila aj k vám do Learn2code na pozíciu lektora (smiech). Čo všetko môže dať kurz Web Designer niekomu, kto sa rozhodne ho absolvovať?Určite mu dá prehľad a vedomosti o tom, ako vytvoriť modernú webovú prezentáciu. Absolvent bude vedieť pracovať s HTML, CSS, jQuery a používať rôzne knižnice. Odporúčam tento kurz každému, kto chce začať tvoriť moderné webové prezentácie. Sleduješ aj konkurenciu, aktuálne trendy, inovácie? Ako si na tom v tomto smere?Samozrejme sledujem aj konkurenciu a aktuálne trendy, bez toho by to nešlo. Myslím, že základom v tejto oblasti je, aby bol človek dynamický, flexibilný a čo najviac informovaný. Vždy sa snažím inšpirovať. Doba a technológie sa posúvajú veľkou rýchlosťou dopredu. Vo voľnom čase veľa študujem nové programovacie jazyky, technológie, dizajn a podobne.[Jeden z Martinových projektov] Dnes je dosť veľa pracovných ponúk v oblasti programovania a tvorby webstránok. Vnímaš to tak aj ty?Samozrejme vnímam. Každým rokom je na trhu viac a viac firiem v oblasti IT a marketingu. Pracovných príležitostí je množstvo. Každý, však, musí na sebe neustále pracovať. Firmy nehľadajú kvantitu, ale kvalitu. Je táto práca dobre zaplatená? :)Či je táto práca dobre zaplatená? Ja osobne si myslím, že pokiaľ je zamestnanec dostatočne kvalifikovaný, mal by byť aj náležite odmenený, ale to už záleží od postoja firmy. V globále si myslím, že áno, je dobre platená. Je na Slovensku a v Čechách podľa teba dosť kvalifikovaných ľudí práve na tieto vývojárske pozície?Podľa môjho názoru kvalifikovaných ľudí nie je dostatok. Firmy majú problém nájsť ľudí, ktorí ovládajú požadované programovacie jazyky alebo technológie aspoň na základnej úrovni. Niektoré firmy pracujú so zamestnancami, takpovediac, niekedy od nuly. Preto, ako som uviedol vyššie, je potrebné neustále sa vzdelávať, snažiť sa napredovať a mať chuť angažovať sa. Jednoducho povedané treba byť aktívny a cieľavedomý. Naša firma, napríklad, aktuálne spolupracuje najmä s ľuďmi z Českej republiky.[Martin Rumanovský] Čo by si poradil všetkým, ktorí nemajú žiadne skúsenosti s programovaním a tvorbou webstránok, ale chceli by nejako začať?Nech navštívia kurz Web Designer :). Dnes je na internete množstvo návodov a tutoriálov, ako začať programovať. Tak isto som začínal aj ja. Nie všetky techniky programovania sú správne prezentované, práve preto je veľmi dôležité vybrať si kvalitný kurz, či návod. A samozrejme to najdôležitejšie je vytrvalosť, vytrvalosť, vytrvalosť a výsledok sa dostaví. A ešte nám prezraď tvoje plány do budúcnosti.S priateľkou máme veľa business plánov do budúcna ako rozšíriť firmu možno aj na iné, ako je slovenský a český trh, vytvoriť nové webové projekty, ale uvidíme ako nám to všetky okolnosti a čas dovolia. Ak máš na Martina nejaké otázky, napíš ich do komentára. Ak sa chceš naučiť robiť webstránky, prihlás sa na Martinov kurz v Banskej Bystrici.
Websockety vo Flasku
Tipy a triky
15.08.2018
Miroslav Beka

Websockety vo Flasku

Websockety vo Flasku Ak si sa niekedy stretol s výrazom websocket a chcel by si sa dozvedieť, čo to vlastne je a ako sa to používa v Python aplikácii, tak tento článok je práve pre teba. Štandardne tvoj prehliadač komunikuje na webe pomocou http protokolu. Klasický http protokol ponúka jednoduchú komunikáciu. Pošle sa request a ako odpoveď dostanem response. Tento klasický komunikačný spôsob nebol dostatočný pre dnešné moderné aplikácie. Bola potreba pre komunikačný kanál, ktorý bude slúžiť na obojsmernú komunikáciu. HTTP by mal byť viac-menej bezstavový a klient a server medzi sebou komunikujú iba keď treba, inak je spojenie medzi nimi uzavreté. Navyše, prehliadač (klient) musí požiadať server o komunikáciu a server môže na túto žiadosť odpovedať. Tá žiadosť, to je ten http request. Inak server nevie kontaktovať klienta len tak sám od seba. Pri websocketoch je to inak. Ide o komunikačný kanál, ktorý sa otvorí raz, na začiatku a potom sa používa na komunikáciu klienta a servera v oboch stranách. To znamená, že server môže posielať dáta zároveň čo klient posiela dáta na server. Toto sa odborne volá full-duplex. Web socket má menší overheat prenosu dát, vie byť real-time a hlavne, server môže posielať dáta na klienta bez toho, aby si ich klient musel explicitne vyžiadať requestom. Toto je užitočné napríklad pri aplikáciách, ktoré zobrazujú real time dáta a server posiela tieto dáta klientovi. Takže ak nastane nejaká zmena dát, server ich proste pošle na klienta. Toto predtým nebolo možné spraviť iba pomocou http protokolu. Minimálny príkladNajlepšie je vyskúšať si tieto koncepty v praxi. Dnes budeme pracovať s Flaskom, knižnicou SocketIO a javascript knižnicami socket.io a jQuery. Budem predpokladať, že Flask aplikácie aspoň trochu poznáš. Začneme tým, že si vytvoríme nové virtuálne prostredie: $ mkdir websockets_primer $ cd websockets_primer $ virtualenv venv $ . venv/bin/activate (venv) $Nainštalujeme závislosti, ktoré budeme potrebovať: (venv)$ pip install flask, flask-socketioV čase písania tohto článku som používal verzie Flask==1.0.2 a Flask-SocketIO=3.0.1. Keď už máme pripravené prostredie a nainštalované závislosti, spravíme nový súbor server.py from flask import Flask from flask import render_template from flask_socketio import SocketIO app = Flask(__name__) app.config["SECRET_KEY"] = "secret" socketio = SocketIO(app) @app.route("/") def index(): return render_template("index.jinja") @socketio.on("event") def handle_event(data): print(data) if __name__ == '__main__': socketio.run(app, debug=True)Na začiatku máme importy ako pre každú inú Flask aplikáciu, avšak pribudlo nám tam from flask_socketio import SocketIO. Tento naimportovaný modul je v podstate to isté ako iné Flask rozšírenia. Inicializáciu websocketov vo Flask aplikácií spravíme pomocou riadku socketio = SocketIO(app). Pomocou tohto objektu socketio budeme príjmať a odosielať správy. Minimálna aplikácia by mala mať aspoň jednu stránku. V našom prípade to bude index.jinja. Toto je treba pretože musíme poskytnúť aj klientskú časť našej aplikácie. Tam bude javascript knižnica socketio a nejaké ďalšie funkcie. Websockety vedia prijímať a posielať správy. Spravíme zatiaľ len prijímanie správ. Pomocou riadku socketio.on("event")definujem handler pre udalosť event. V tomto prípade jednoducho vypíšem dáta na konzolu. @socketio.on("event") def handle_event(data): print(data)Posielanie a prijímanie dát na oboch stranách (klient a server) prebieha ako event. Toto je dôležitý fakt, pretože architektúra aplikácie založenej na eventoch (event driven architecture) funguje trošku inak ako klasické volanie funkcie. Nehovorím, aby si mal z toho paniku teraz, ale maj to na pamäti. Ak poznáš Flask aplikácie, tak spustenie appky vyzerá zväčša takto if __name__ == "__main__": app.run("0.0.0.0", debug=True)My ale musíme appku spustiť inak, pretože používame websockety. Spustíme ju pomocou objektu socketio, ktorý sme si vytvorili na začiatku. if __name__ == '__main__': socketio.run(app, debug=True)Teraz musíme ešte vytvoriť 2 súbory. Snažíme sa renderovať index.jinja a taktiež musíme vytvoriť hlavný javascript súbor, do ktorého budeme písať klientskú časť našej websocketovej ukážky. Vytvorím priečinok templates a do neho súbor index.jinja <!DOCTYPE HTML> <html> <head> <title>Websockets test</title> <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> <script type="text/javascript" src="{{ url_for("static", filename="js/main.js")}}"></script> </head> <body> <form id="emit_event" method="post"> <input type="submit" value="emit"> </form> </body> </html>Dôležité sú 3 importy v hlavičke html dokumentu. Prvý importuje jQuery, druhý importuje knižnicu na prácu so socketmi socketio a posledný import je pre náš main.js súbor, ktorý musíme ešte vytvoriť. Inak, tento html dokument obsahuje len jeden formulár s jedným tlačítkom. To budeme používať na posielanie správy cez websocket. Vytvoríme priečinok static v ňom js a v ňom už konečne súbor main.js Obsah bude vyzerať asi takto: $(document).ready(function() { var url = location.protocol + "//" + document.domain + ":" + location.port var socket = io.connect(url); $("form#emit_event").submit(function(event) { socket.emit("event", "test message"); return false; }); });Toto je hlavná logika klientskej časti. Z tadeto budeme prijímať a posielať správy cez websockety tak isto ako na serverovej časti. Pomocou riadku var socket = io.connect(url); sa pripojím na môj server. Následne pomocou jQuery upravím správanie buttonu, aby pri stlačení poslal správu. Na to slúži funkcia socket.emit() Okej, základ máme hotový a môžeme teraz skúšať posielať správy. Aplikáciu spustím pomocou príkazu: (venv)$ python server.py WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance. * Serving Flask app "server" (lazy loading) * Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat WebSocket transport not available. Install eventlet or gevent and gevent-websocket for improved performance. * Debugger is active! * Debugger PIN: 478-618-530Otvorím prehliadač na http://localhost:5000 a zobrazí sa mi jeden button. Keď ho stlačím na konzole mi vyskočí: test messagePoďme teda preskúmať, aké možnosti nám poskytuje táto knižnica socketio. Príjmanie správAko som už spomínal, prijímanie správ na oboch stranách prebieha ako event. V Pythone musíme pre takýto event definovať handler. V javascripte používame tzv. callbacky. V princípe ide o to isté, ale každý jazyk má svoje vlastné technické riešenie a my si toho musíme byť vedomí. Každý event, ktorý chcem prijať musím mať nejaké meno. V príklade sme mali názov event. Môžem ale použiť čokoľvek @socketio.on("foobar") def handle_data(data): print(type(data)) print(data)Taktiež dáta sa automaticky menia na príslušný typ. Ak v javascripte pošlem string, tak string dostanem aj na serveri. Tak isto to platí pre iné dátové typy ... $("form#emit_event").submit(function(event) { socket.emit("foobar", "message"); socket.emit("foobar", [1,2,3,]); socket.emit("foobar", {data : "message"}); return false; }); ...Po odoslaní udalostí dostanem výpis na serveri <class 'str'> message <class 'list'> [1, 2, 3] <class 'dict'> {'data': 'message'}Handler taktiež môže mať viacero argumentov @socketio.on("sum") def handle_sum(arg1, arg2): print(arg1 + arg2)Upravíme javascriptovú časť a zavoléme event s viacerými argumentami ... $("form#emit_event").submit(function(event) { socket.emit("sum", 23, 47); return false; }); ...Namespace patrí medzi ďalšie funkcie, ktoré mám knižnica SocketIO ponúka. Každý event si môžeme rozdeliť podľa namespaceov. To nám dáva ďalšie možnosti organizácie eventov. @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): print(arg1 + arg2)Avšak pozor! Na strane klienta sa musíme teraz pripojiť na inú url $(document).ready(function() { var namespace = "/math"; var url = location.protocol + "//" + document.domain + ":" + location.port; var socket = io.connect(url + namespace); $("form#emit_event").submit(function(event) { socket.emit("sum", 23, 47); return false; }); });Ďalšia vychytávka je to, že každý event, ktorý pošleme, vie zavolať callback potom, čo sa vykonal. Napríklad z javascriptu pošlem nejaké dáta na server a server mi ešte dodatočne potvrdí, že dáta boli spracované. Aha takto ... $("form#emit_event").submit(function(event) { var ack = function(arg){console.log(arg)}; socket.emit("sum", 23, 47, ack); return false; }); ...Ak chcem, aby sa callback zavolal, musím v Pythone vrátiť nejakú hodnotu z vykonaného handlera => return True @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): print(arg1 + arg2) return TrueMusím si otvoriť v prehliadači konzolu (ja používam chrome) a keď stlačím tlačítko, dostanem výpis na konzolu [Image] Posielanie správPosielať eventy sme už posielali, ale iba z javascriptu. V Pythone to vyzerá veľmi podobne. Používame 2 funkcie send a emit medzi ktorými je zásadný rozdiel. Najprv musíme importovať z knižnice flask-socketio from flask_socketio import send from flask_socketio import emitupravíme funkciu na sčítavanie @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): value = arg1 + arg2 print("{} + {} = {}".format(arg1, arg2, value)) send(value)a pridáme handler v javascripte aby sme mohli tento event zachytiť. ... $("form#emit_event").submit(function(event) { socket.emit("sum", 23, 47); return false; }); socket.on("message", function(data){ console.log("received message: " + data) }); ...Všimni si, že teraz som použil handler, ktorý spracováva event s názvom message. Nie je to náhoda. Ide totiž o to, že funkcia send posiela tzv. unnamed event. Tieto eventy sa vždy posielajú na handler, ktorý spracúva message. Narozdiel od funkcie send, funkcia emit posiela už konkrétny event a musíš mu dať názov. Skúsme teda pozmeniť náš príklad @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): value = arg1 + arg2 print("{} + {} = {}".format(arg1, arg2, value)) emit("result", value)... socket.on("result", function(data){ console.log("sum is: " + data) }); ...BroadcastingVeľmi užitočná funkcia je broadcastovanie, čo už z názvu vyplýva, že eventy sa budú vysielať na všetkých pripojených klientov. Dajme tomu, že zmeníme funciu emit na broadcastovanie @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): value = arg1 + arg2 print("{} + {} = {}".format(arg1, arg2, value)) emit("result", value, broadcast=False)Teraz, keď si otvoríš 2 prehliadače a v jednom stlačíš button, výsledok súčtu sa ukáže vo všetkých prehliadačoch[Image] note: callbacky sa pri broadcastovaní nebudú vykonávať ZáverWebsockety majú mnoho využití. Tento článok bol len úvod a prehľad niektorých základných funkcií. V budúcom blogu spravíme malú aplikáciu postavenú na websocketoch. Máš nejaké otázky k článku? Napíš ju do komentára.
Predstavenie lektora Android Developer kurzu
Rozhovory
08.08.2018
Skillmea

Predstavenie lektora Android Developer kurzu

Dominik Palla je autorom nášho nového online kurzu Android Developer, v ktorom ťa naučí programovať mobilné aplikácie pre platformu Android. Dominik má za sebou viac ako 5-ročnú prax ako androidový vývojár, podniká v oblasti vývoja softwaru na zákazku, je autorom projektu českej hlasovej asistentky s umelou inteligenciou pre OS Android a je držiteľom Java certifikátu od Oraclu. Aktívne sa tiež venuje tvorbe webových a desktopových aplikacií. Keďže Dominika asi nepoznáš, vyspovedali sme ho a teraz ti prinášame tento rozhovor. Čítaj a keď budeš mať nejaké otázky na Dominika, neváhaj ich napísať do komentára. Kde teraz pracuješ? Predstav sa nám aj po pracovnej stránke.Momentálne podnikám na vlastnú päsť, nerobím to však sám, ale zamestnávam ďalších 5 kolegov. Spoločne vyvíjame mobilné aplikácie, prevažne pre platformu Android, ale sem-tam sa nájde aj projekt pre iOS. Klasicky vytvárame tiež webové stránky alebo aplikácie, ku ktorým poskytujeme tiež vlastné hostingové služby. Občas je predmetom našich projektov aj vývoj desktopových aplikácií. Okrem týchto komerčných zákaziek tiež pracujeme na jednom vlastnom projekte - Českej hlasovej asistentke s umelou inteligenciou ClaraSys. Projekt je zameraný predovšetkým na nevidiacich ľudí, ale aj napriek tomu väčšina našich používateľov sú vidiaci ľudiâ. Ide vlastne o aplikáciu na spôsob Siri pre iOS, ale je kompletne v češtine a má väčšie spektrum funkcií. Momentálne pracujeme na implementácii inteligentného slúchatka (Smart Ear), ktoré umožňuje vybaviť všetky úlohy na mobilnom telefóne pomocou rozhovoru s asistentkou cez bluetooth slúchatko be toho, aby ste museli mobil vybrať z vrecka či tašky. Slúchatko bude cca do mesiaca hotové a dostupne v našom eshope. No a samozrejme lektorujeme začínajúcich Android programátorov.[Image] Dominik Palla - autor online kurzu Android Developer Čo sa ti na tvojej práci páči najviac?Na mojej práci sa mi najviac páči sloboda, že môžem vytvoriť v podstate čokoľvek, čo sa mi zapáči. Keď si potrebujem nejakým spôsobom uľahčiť alebo obzvláštniť svoju prácu, nemusím si vyberať len z verejne dostupných aplikácií, ale môžem si vytvoriť aplikáciu priamo pre svoje potreby. Google umožňuje androidovým vývojárom vytvoriť v podstate čokoľvek. Nie je potrebné zostavovať vlastný hardware, pretože to niekto už urobil za vás. Mobilný telefón alebo tablet, prípadne aj inteligentné hodinky či smart televízia majú kompletnú výbavu (bluetooth, WiFi, NFC, GPS a pod.) a vy sami určíte, ako sa daný hardware bude používať (naprogramujete ho tak). Pokiaľ niečo vytvorím, mám to stále všade so sebou a dokonca sa o to môžem podeliť so svojou rodinou alebo priateľmi. Čo viac si priať?[Image] Dominik pracuje na viacerých Android aplikáciách U nás si lektorom online kurzu Android Developer. Ako si sa k programovaniu, Androidu a učeniu dostal?Začínal som klasicky ako mnoho iných programátorov tvorbou webstránok. Stále som sa učil ďalšie a ďalšie programovacie jazyky, ale mojím skutočným snom bolo vytvoriť aplikáciu na svoj mobilný telefón (ako inak než na Android). Dvakrát som to skúšal (prvýkrát cca v 14 rokoch a potom v 15stich), ale vždy neúspešne. Bolo to na mňa veľmi ťažké a nerozumel som tomu. Vždy som to nakoniec odložil a začal sa učiť iný jazyk. Problém pri mojich začiatkoch s Android programovaním bol aj v tom, že v tom čase neexistoval takmer žiadnz český návod, všetko bolo v angličtine, s ktorou som mal trochu problémy. Na tretí pokus asi v 16 rokoch sa mi podarilo záhadné androidové programovanie konečne prelomiž. Bolo to aj tým, že som sa zdokonalil v angličtine a že som už poznal iné programovacie jazyky. Na začiatkoch je najhoršie to, že začínajúci programátor sa nemá koho opýtať, keď rieši nejaké problémy vo svojich začiatkoch. Raz som bol dokonca taký zúfalý, že som kontaktoval jedného českého vývojará, či by mi nepomohol, že pre neho je to otázka 30 minút. Zapýtal si za túto radu 10 tisíc ČK a tak som radšej odpoveď na svoj problém riešil sám. Zo začiatku to trvalo, problémy som riešil pomocou webov ako Stack Overflow ako asi väčšina programátorov. Najskôr som robil veci len preto, že to tak jednoducho malo byť, ale nepochopil som prečo, nikto mi to nevysvetlil. Preto si myslím, že mať človeka, na ktorého sa človek môže obrátiť pri svojich problémoch v začiatkoch (ideálne v jazyku, ktorému dobre rozumie), je celkom dôležité. To ponúkam práve účastníkom svojho kurzu. Čo všetko môže dať spomínaný online kurz tomu, kto sa rozhodne ho absolvovať?Určite získa potrebné základy, na ktorých sa dá ďalej stavať. V rámci kurzu preberieme všetky najpoužívanejšie widgety, ako sú Buttony, CheckBoxy, EditTexty, TextViewy atď. Vždz si ukážeme na praktickom príklade ich použitie. Ďalšia časť kurzu je zameraná na funkčné prvky aplikácií. Tu si preberieme životný cyklus aplikácií, naučíme sa obsluhovať rôzne udalosti a robiť najčastejšie vykonávané akcie. Úplne v poslednej časti kurzu si vyrobíme vlastný webový prehliadač. V rámci tohto kurzu sa príliš nebudeme sústrediť na grafickú stránku aplikácií, najskôr je totiž potrebné pochopiť princíp a potom je možné designovať. Účastníkov kurzu určite poteší sekcia Publikácia aplikácie na Google Play, kde sa pozrieme na to, akým spôsobom je možné publikovať vašu aplikáciu. Po absolvovaní kurzu budú účastníci schopní vytvoriť si jednoduchú až mierne zložitú androidovú aplikáciu a väčšinu vecí, ktorú nebudú vedieť, si dokážu sami aktívne vyhladať na internete. Pokiaľ sa ale aj napriek tomu vyskytne nejaký problém, môžu ma kontaktovať a rád poradím. Pre pokročilejších vývojárov pripravujeme pokračovanie v podobe druhého online kurzu na tvorbu Android aplikácií. Sleduješ aj konkurenciu, aktuálne trendy, inovácie? Ako si na tom v tomto smere?Nové trendy samozrejme sledujem, v podstate všetky ich určuje spoločnosť Google. Každú aplikáciu, ktorú vyvíjam, musím vytvoriť tak, aby bola kompatibilná s čo najviac zariadeniami a to vrátane tých úplne najnovších. Google rád pridáva nové veci, ktoré je potrebne sa za chodu naučiť, ale ktoré sú tiež veľmi efektívne alebo v niektorých prípadoch i nevyhnutné. Príkladom môžu byť nové adaptive icons v Androide 8, alebo odlišný spôsob tvorby notifikácií a časovania udalostí naprieč rôznymi verziami Androidu. Dnes je dosť veľa pracovných ponúk v oblasti programovania a tvorby mobilných aplikácií. Vnímaš to tak aj ty?Áno, byť vývojárom mobilných aplikácií je momentálne „cool“. Pracovných pozícií je veľa a podľa môjho názoru budú pribúdať, obzvlášť v dnešnej dobe, keď sa všetko automatizuje. Je táto práca dobre zaplatená? :)To teda je, priemerný plat programátora v ČR je okolo 40 000 Kč. To platí, keď ste zamestnanec v nejakej firme. Pokiaľ vytvoríte nejaký zaujímavý projekt alebo aplikáciu, môžete sa dostať na úplne inú sumu. Mnoho mladých ľudí zarobilo pekné peniaze tak, že vytvorili aplikáciu, ktorú od nich kúpila nejaká veľká firma (typu Facebook, Google). Je na Slovensku a v Čechách podľa teba dosť kvalifikovaných ľudí práve na tieto vývojárske pozície?Podľa mňa je ich skôr nedostatok. Mnoho ľudí dnes vyhľadáva skôr prácu v zahraničí, je to finančne lukratívnejšie. V Čechách a myslím, že aj na Slovensku je dopyt po kvalitných programátoroch vysoký. Stále niekde vidím inzeráty, kde sa rôzne firmy snažia nájsť programátorov a to kľudne aj bez praxe s tým, že si ich sami vychovajú a zaučia. Čo by ste poradili všetkým, ktorí nemajú žiadne skúsenosti s programovaním a tvorbou mobilných aplikácií, ale chceli by nejako začať?Takýmto ľuďom vždy radím, aby začali s niečím jednoduchším, napr. s webovými stránkami. Ďalší krok sa odvíja od cieľov danehé človeka. Pokiaľ je vaším cieľom stať sa vývojárom androidových aplikácií, vaším ďalším krokom by mala byť Java. Hneď potom sa na vývoj Android aplikácií môžete vrhnúť. Odporúčam nejaký kurz na základy Java, postačovať by mal aj online kurz tu na Learn2Code, ktorý je dokonca úplne zadarmo. A ešte nám prezraď tvoje plány do budúcnosti.Mojím plánom do budúcna je posunúť sa zase o krok, alebo skor o skok ;), projekt ClaraSys, svoje podnikanie povýšiť na etablovanú firmu, no a samozrejme vytvoriť pokročilý kurz Android Developer 2 tu na Learn2Code.
Videosúťaž RECfruit 2018 má svojich víťazov
Ostatné
04.07.2018
Skillmea

Videosúťaž RECfruit 2018 má svojich víťazov

Po úspešnom minuloročnom nultom ročníku súťaže RECfruit prišiel ešte úspešnejší prvý ročník, ktorý so sebou priniesol veľa nových video talentov. Oproti minulému roku nevzrástol len počet videí, ale aj ich kvalita. Odborná porota zložená z profesionálov z praxe mala ťažkú úlohu, ale tri najlepšie videá nakoniec úspešne vybrala. Vysoká úroveň a originalita súťažných príspevkov pomohla organizátorom k rozhodnutiu udeliť aj tento rok špeciálnu cenu a cenu ContentFruiter.  Veľké poďakovanie patrí odbornej porote i partnerom súťaže RECfruit. Bez nich by nebolo možné dostatočne oceniť nápady, snahu, venovaný čas a odvahu súťažiacich, podporiť ich rozvoj a motivovať ich k ďalšej práci videomakerov.  Výsledky prvého ročníka Bronzová priečka Tretie miesto obsadil Dávid Bartoš so svojím videom Práve teraz. Ukazuje potrebu vychutnať si život v prítomnosti. Svoju prácu opísal slovami: „Myšlienka videa je byť v prítomnosti a nachádzať potešenie v prítomnom okamihu. Aj keď nás stále ženú nejaké povinnosti a deadliny, treba si nájsť čas a vychutnať si ho.“ Strieborná priečka Na druhom mieste sa umiestnilo video s názvom Lovec, ktoré do súťaže poslal 19-ročný Košičan Šimon Šebo. Video s pútavou myšlienkou „kradnutia duší“ zanecháva v príjemcovi silnú emóciu. Prekvapením Šimonovho videa boli vynikajúce herecké výkony dvoch malých dievčat, pekné zábery a skvelá práca so zvukom. „Video, ktoré sa začína ako detská rozprávka a končí sa ako horor.“ Takýto dojem vzbudilo spracovanie v organizátoroch súťaže. Nejednoznačný koniec videa vo vás zaručene vyvolá zimomriavky. Víťaz Prvé miesto v súťaži RECfruit získalo video s názvom Again, v ktorom sa 18-ročný Tomáš Biely z obce Hrochoť veľmi originálne pohral s myšlienkou času. V čiernobielom videu je hlavný hrdina zachytený v akejsi časovej slučke. Pútavé spracovanie porotu natoľko oslovilo, že vyhralo so značným bodovým náskokom. Tomáš svoje video opísal týmito slovami: „Again je krátky hraný film, ktorý zachytáva nadprirodzenú udalosť súvisiacu s časovým paradoxom. Celý dej sa odohráva v istom momente, v ktorom je hlavný hrdina „uväznený“, preto teda Práve včas.“ Organizátor opäť pridal ďalšie motivačné ceny Špeciálna cena Organizátori sa rozhodli udeliť špeciálnu cenu videu, ktoré natočil 17-ročný Patrik Hrabovec z Bratislavy. Svoje video nazval podľa témy tohto ročníka, a to Práve včas. Pri hodnotení videí ale bolo známe pod názvom Smrťák. Patrikovo video si vybojovalo špeciálnu cenu kvôli svojej odvahe pohrať sa s témou smrti humorne, no tiež vďaka odlišnosti od ostatných videí. Tento rok takpovediac „vytŕčalo z davu“. Krátku komédiu o konkurze na smrtku geniálne zakončil titulkami, v ktorých hlavný aktér tancuje so svojím „vraždiacim“ nástrojom. Špeciálna cena je udelená aj ako povzbudenie nebáť sa začať a s odhodlaním experimentovať.  Cena ContentFruiter Cenou ContentFruiter sa organizátori rozhodli oceniť prínos Tomáša Bieleho. Ten predviedol svoje majstrovstvo vo videu Again. Túto cenu organizátori udeľujú za mimoriadne dielo. V tom tohtoročnom je to za originalitu, za odvahu pozrieť sa na veci inak, za svojské uchopenie atmosféry, podania, no aj za vtiahnutie do deja od začiatku až do konca. V súťaži sa ocitlo viacero videí, ktoré si zaslúžia pozornosť. Žiaľ, nie všetky sa dajú oceniť. Spomínané víťazné videá, ale i shortlist finalistov si však môžete pozrieť na recfruit.sk. Víťazi získavajú zaujímavé ceny, medzi ktorými nesmú chýbať online kurzy od Learn2Code.
Pripravované online kurzy - 3. štvrťrok 2018
Novinky
24.06.2018
Skillmea

Pripravované online kurzy - 3. štvrťrok 2018

Stále makáme na príprave nových online kurzov a pokiaľ ťa zaujíma, ktoré kurzy v najbližších týždňoch a mesiacoch zverejníme, čítaj ďalej. Flask - Python mikroframeworkAko prvý pán na holenie tu je minimalistický a jednoduchý webový Python framework Flask. Všetky znalosti, ktoré sa naučíš v tomto kurze, vieš neskôr aplikovať aj na iné frameworky. V kurze sa naučíš vyrobiť plnohodnotnú webovú aplikáciu so všetkými jej súčasťami vo Flasku. Porozumieš architektúre webovej aplikácie, budeš vedieť používať databázy, formulár, vyrobíš si prihlasovanie na stránku, použiješ pekný CSS framework a na konci nahodíš svoju aplikáciu na Linux server, Heroku alebo Docker. Malá koštovka a teaser ku kurzu: Android DeveloperNa tento kurz čakáte už dlhšie a dobrou správou je, že už naozaj čoskoro (určite ešte v júli) bude kurz k dispozícii. Programovať mobilné aplikácie pre operačný systém Android sa naučíš práve v tomto kurze. Budeme používať Javu a využijeme vývojárske prostredie od Googlu Android Studio, ktoré beží na platforme Intellij IDEA. V kurze vyrobíš vzorové Android aplikácie, ktoré sa naučíš aj publikovať do obchodu Google Play.  Týmto jedným začiatočníckym Android kurzom neskončíme a už teraz pripravujeme kurz Android programovania pre pokročilých.[Image]   Linux pre začiatočníkovMnohí ste nám písali, nech rozšírime ponuku kurzov aj o Linux a servery. A tak sme sa rozhodli vaše želanie splniť a máme pre vás nachystané dva nové kurzy. Prvým z nich je Linux pre začiatočníkov. Pokiaľ máš ambíciu stať sa Linux administrátorom, týmto kurzom by si mal určite začať. Budeš vedieť robiť s VirtualBoxom, s Linux Desktopom, naučíš sa terminálové príkazy a pohybovať v Linuxe. Servery pre začiatočníkovDruhým z kurzov z úplne iného súdka, ako sme mali doteraz, je online kury Servery pre začiatočníkov. V kurze začneš inštaláciou Linuxového servera, neskôr to bude Lamp server a webserver. Pozrieme sa na zúbok aj mailserveru, SSL certifikátom, cloudu a zálohovaniu. Na záver sa povenujeme skriptovaniu a OnlyOfficu. Máš sa na čo tešiť :)[Image] InDesignPre všetkých, ktorí chcú vedieť zalamovať texty a vytvárať publikácie ako napr. časopisy, noviny, brožúry alebo prospekty určené pre tlač, pripravujeme online kury Adobe InDesign. Okrem zaužívaných postupov pri sadzbe jednotlivých dokumentov sa naučíš a porozumieš základným typografickým pravidlám a na profesionálnej úrovni zvládneš spracovať grafické návrhy až po export pre tlač.[Image] Testovanie - CucumberĎalší parádny kurz od Furbyho. Po kurzoch Testovanie webu I. - Selenium a Selenium Advanced - Java si pre vás nachystal kurz o testovaní s použitím nástroja Cucumber, ktorý aplikuje BDD (behavior-driven development), čiže popísanie testov jednoduchšie a zrozumiteľnejšie. Okrem toho sa v kurze bude venovať aj regulárnym výrazom a Jave. Opäť to bude jeden kvalitný online kurz od Martina.[Image] Microsoft AccessAccess je databázový nástroj, vďaka ktorému vieš vytvoriť rozmanité databázy, ku ktorým môže pristupovať aj viac užívateľov súčasne. V kurze sa naučíš robiť databázy, ale aj vyhľadávať v nich s pomocou SQL.  Data ScienceData Science je nový trend v spravovaní dát, ktorý vznikol ako reakcia na obrovské množstvo dát, ktoré máme v súčasnosti k dispozícii. Tieto dáta môžu ukrývať veľmi cenné informácie, ktoré je však nutné získať vhodnou analýzou. A práve vo veľkom module zameranom na Data Science sa naučíš, ako tieto cenné informácie vydolovať. Čo všetko sa tomto bloku zameranom na Data Science naučíš?  Programovať v jazyku R a používať ho na získavanie informácií z veľkých datasetov. Ďalej to bude jazyk Python a jeho použitie v Data Science. Na vizualizáciu dát použijeme Tableau a s veľkou pravdepodobnosťou spracujeme aj horúcu novinku v Data Science - programovací jazyk Julia. Ten je veľmi rýchly a určený predovšetkým pre vedecké výpočty, numerickú matematiku či štatistiku. Na tieto Data Science kurzy sa môžeš už teraz veľmi tešiť.[Image] Na ktorý z kurzov sa najviac tešíš a ktoré kurzy ti ešte na Learn2Code chýbajú? Napíš nám to do komentára :)