Náš blog

Ludvík Nastišin a Michal Gazdík společně vytvořili náš nový grafický online kurz zaměřený na Adobe InDesign . V tomto kurzu se naučíš dělat různé dokumenty jako například plakáty, brožury, vizitky a mnoho dalšího.  Lido se grafickému designu věnuje již více než 10 let jako freelancer. Nasbíral mnoho zkušeností s tvorbou obalového designu, printů, digitálních bannerů či animací. Své zkušenosti ti může předat i na prezenčním kurzu Visual Design v Olomouci. Kromě samotné grafiky se rád podělí io zkušenosti z oblasti komunikace s klientem, freelancerskou prací na dálku či jeho pohledem na to, jak se v grafickém designu kontinuálně vzdělávat a postupovat. Michal se grafickému designu začal věnovat během gymnázia, protože ho to tam moc nebavilo. Začínal s úpravou fotek svých spolužáků a následně se mu zalíbila myšlenka a možnost, že umí upravit jakýkoli obrázek, podle vlastních představ. Tyhle dva kluky jsme vyzpovídali a ty si právě teď můžeš přečíst rozhovor s nimi. Na začátek nejprve začněme vaší prací. Co přesně děláte?L.N. (Ludvík Nastišin): Už dlouhá léta se věnuji grafickému designu jako freelancer a současně působím i na Prešovské univerzitě na Katedře marketingu a mezinárodního obchodu. Oba tyto světy se vzájemně velmi dobře doplňují, často dokážu využít v jedné oblasti právě pohledu na věc iz té druhé, co mou práci obohacuje.   MG (Michal Gazdík): Momentálně se nacházím v Manchesteru a pracuji také na volné noze. Věnuji se grafickému designu a tvorbě webstránek a snažím se najít svoji cestu v životě. [Ludvík a Michal, lektoři Learn2Code] Na jakých projektech jste pracovali?Ľ.N.: Několik let jsem spolupracoval s firmou Powerlogy a Dušanem Plichtem, jehož mnozí biohackeři či vyznavači kvalitní stravy a kávy určitě znají. Řešili jsme široké spektrum věcí od packagingu produktů, bannerů, brožur a celkovou vizuální identitu. Uplynulé léto jsem spolupracoval shodou okolností is KOCR Severovýchod Slovenska na jejich kampani "Kraj kulturních památek", to je tak nejčerstvější. Nemohu nezmínit i moji účast na budování portálu sketcher.sk pod skupinou Startitup, kde jsem několik let stál v jeho čele a řešil tam asi úplně všechno, co se vyskytlo. A samozřejmě je zde ještě několik menších klientů, se kterými pracuji na pravidelné bázi, ale nejsou to žádné megalomanské projekty, spíše řešení běžných zadání, která nezní až tak sexy, ale musí se jednoduše udělat.).  MG: Pracoval jsem už na více projektech, ale asi největší projekt dosud je kurz InDesignu, který jsme připravili spolu s Lidem. A jak jste se k designování a grafice vůbec dostali?L.N.: Můj první kontakt s Photoshopem byl více než 15 let dozadu, kdy jsem mého souseda viděl dělat si covery na CD-čka. Čmáral si tam s brushem a několika barvami a nakonec na to dal efekt "Twirl". Nic jiného v tom asi ani nevěděl, ale pro mě to bylo v té době wau. Pak jsem zkoušel tutoriály, pokus omyl, ale když jsem narazil na kouzlo YouTube, už to šlo samo.  MG: Ke grafice jsem se dostal kvůli potřebě upravovat fotky spolužáků na střední škole. Snažil jsem se vytvořit nějaké zábavné meme, které by je pobavilo. Zjistil jsem, že to není až tak náročné a tak jsem se začal učit sám po škole. Proč jste se rozhodli dělat lektory v Learn2Code?Ľ.N.: U mě to byl přirozený vývoj událostí. Grafiku jsem řešil už dlouho, poté se přidala univerzita, kde jsem začal i učit. Přišlo mi to jako logické spojení toho, že mi učení (myslím si) docela jde a grafiku také ovládám. Tak jsem to tedy zkusil. MG: Viděl jsem příležitost nabrat nové zkušenosti a také možnost se zviditelnit. Také jsem si už i pár kurzů od Learn2Code podíval a chtěl jsem i já přispět nějak do komunity učení chtivých lidí. Co všechno se člověk naučí ve vašem kurzu Adobe InDesign? Kde najde po kurzu s těmito novými vědomostmi uplatnění?MG: Člověk se naučí jak používat mnoho základních nástrojů, k čemu slouží a jak je využít v praxi. Dozví se také jak si vytvářet různé objekty, rychlejší techniky pořizování některých věcí a také to, jak manipulovat s objekty a šetřit čas při práci s InDesignem . Také doporučuji proto, že když si člověk zapne InDesign nebo jakýkoli jiný program, může to na něj působit odstrašujícím způsobem. Tolik tlačítek? K čemu všechny slouží? Po shlédnutí kurzu, bude člověk jistější v prostředí a bude vědět co kde najde a co k čemu slouží. Kde bereš inspiraci pro svou práci? Máš nějaké tipy, které zaručeně fungují?L.N.: Inspiraci nejvíce čerpám na Behance či Dribbble, ale častokrát mě něco osloví i na těch nejneočekávanějších místech. Můžu sedět v kavárně a najednou si všimnu na stěně krásného retro plakátu či něčeho podobného, ​​ihned to cvakám do mobilu.  Zaručené tipy nemám, každému podle mě funguje něco jiného. Třeba se ale připravit na to, že někdy vás to „kopne“ ihned, někdy budete dva týdny hledat a zkoušet, než budete spokojeni. Třeba si ale vždy ptát feedback, od klienta nebo alespoň od vašeho spolubydlícího. Někdy totiž, když na grafiku dívám hodiny, už ji nevidím tak, jako ten, co se na ni podívá poprvé. Tehdy je třeba dát pauzu, jít na jiný projekt nebo dělat něco jiného a vrátit se k tomu s odstupem času. To pomáhá.  MG: Někdy je náročné vytvořit něco jen tak z hlavy a proto okamžitě běžím na internet. Je tam neskutečné množství informací a proto je třeba je využívat. Při nějakém zadání nebo problému si udělám takový "brainstorming." Napíšu několik modifikací klíčového slova do Googlu a otevřu si 15-20 různých stránek, které mi vyhodí a pak začínám scrollovat každou jednu z nich a třídit, co se mi líbí. Na konci mám jasnější myšlenky v tom, co chci vytvořit a díky tomu se umím hýbat dál. Je v této oblasti designu třeba sledovat aktuální trendy a inovace? Jak jsi na tom ty?L.N.: Určitě je dobré sledovat trendy. Snažit se zakomponovat je do své práce, pokud zrovna na takové něco nejsi zvyklý a děláš si pokaždé jen „svůj styl“ může být obohacující a nutí to člověka rozvíjet se. Bez toho bude tvoje práce časem neatraktivní a to nechce nikdo. Netvrdím, že ty trendy jsou nějaká mantra, kterou je třeba slepě následovat. Je ale dobré minimálně o nich vědět a následně alespoň zhodnotit, jestli je to něco pro tebe, jestli tě to umím někam posunout, nebo tvou práci. MG: Samozřejmě je to nutné. Pokud ti zákazník řekne, že minulý týden viděl nějaký super design a přesně takový chce také on, ty následně víš o co jde a dokážeš uspokojit jeho potřeby. Stejně jako v přírodě. Co se nehýbe, umírá. Třeba sledovat trendy a posouvat se dál, protože jinak je to pro grafika obtížnější.  Co tě nejvíc baví na tvé práci? Máš nějaký oblíbený task, který děláš nejraději?Ľ.N.: Oblíbený task je - Save As “ProjectName_Final.psd” :) . I když všichni víme, že to slovo Final je často jen iluze a přesto to ještě 4 krát upravuji. Na práci mě nejvíc baví právě variabilita zadání, nerad dělám stále tentýž typ výstupu. MG: Nejraději na této práci mám to, že nejsem vázán na jedno místo, ale když člověk pracuje jako freelancer může chodit kam chce. Toto se mi na tom nejvíc líbí a neumím si to vynachválit. Pracovní doba není 9-5. Ale může být úplně jiný. Jsem nemocný? Okej. Zůstanu dnes ležet v posteli :D [Ludvíková přednáška] V čem vidíš výhodu své práce? Je v něčem výhodnější než jiná zaměstnání?Ľ.N.: Grafiku potřebuje člověk téměř ve všem. Pokud má člověk alespoň nějaké základy, drtivou většinu projektů si ve své firmě umí udělat i sám. A tom šetří čas i náklady. Takže vědět to je opravdu výhoda. V mém případě je to ale hlavně o tom, že jako freelancer dělám z domu a podle sebe. Když se mi nechce ráno, tak to nedělám. Deadline je svatý, ale to, jak se k němu dostanu je jen na mně a to je velká výhoda (avšak i zodpovědnost, na to nezapomínat). Mohu se věnovat jiným věcem, rodině, čemukoli, protože to mám v rukou. MG: Stejně jako jsem už i výše zmínil. Je to volnost rozhodnout se. To si myslím, že je velmi důležité pro dnešní mladé lidi. Nebýt za pasem, ale tvořit hýbat se a poznávat nové věci. Co bys poradil všem, kdo nemají žádné zkušenosti s designem a grafikou, ale chtěli by začít?Ľ.N.: Na základy si najděte nějaký kurz, nebo osobu co vám to dokáže vysvětlit. Ušetříte mnoho času a energie, protože právě v absolutních začátcích se umíte v grafice skutečně ztratit. Takto vás tím někdo provede.  Jakmile máte zvládnuté základy a chápete, o čem ten který software je, už to dokážete i sami, mně se nejvíc osvědčilo opakovat si tutoriály z youtube, zkusit si převytvořit nějaký plakát, co se vám líbil a pod. Potom je to už jako sněhová koule, každý další krok je jednodušší, protože vaše poznání softwaru je stále lepší.  MG: Důležité je začít. Je jedno jako. Nejlepší je si prohlédnout nějaký kurz nebo YouTube videa. Potom už jen zkoušet. Zeptat se uja, který má firmu, jestli nepotřebuje nové logo nebo plakát a pomalu to už půjde. Zkoušet a nepřestávat. [Ludove mudrovačky] Jaké máš plány do budoucna?Ľ.N.: Konkrétní plány nemám, momentálně jsem spokojen s tím, jak to u mě vypadá, ale chci si trochu rozšířit znalosti do 3D, vyjít z komfortní zóny, postupovat. Možná právě to u mě vzbudí nějaký plán, kdo ví. MG: Plány jsou velké a momentálně na nich pracuji. Je to dlouhý proces, takže o nich budu mluvit až když budou splněny. Samozřejmě, chci se držet grafiky. Krátký odkaz všem čtenářům na závěrĽ.N.: Grafika se hodí vždy, tato investice se určitě vrátí. Třeba k tomu ale přistupovat zodpovědně a výsledky se dostaví.  PS Pokud by ses chtěl ohledně designově grafických věcí zeptat, napiš mi do diskuse pod kurzem na Learn2Code. Pokud budu vědět, rád odpovím něco moudré. Čau. MG: Nejlepší doba pro zasazení stromu byla před třiceti lety. Druhý nejlepší čas je teď! Máš na kluky nějaké otázky? Neváhej je napsat do komentáře.

V tomto článku se spolu podíváme na základy práce s čísly a znaky v programovacím jazyce Java.  Čísla[Image]Proč používat Numbers a ne primitivní datové typy? Pokud nějaká metoda přijímá jako parametr Object, tak jí neumím podsunout primitivní datový typ. Můžeš použít konstanty, jako například MIN_VALUE nebo MAX_VALUE. Můžeme používat metody pro konverzi do a z primitivních datových typů i ze String. Byte b = 127; Byte b2 = 128; //error Byte len do 127Pro všechny typy máme metody, které z textu umí vylovit daný typ. Zde je třeba si dát pozor, protože pokud chci ze Stringu dostat 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 Když mluvíme o číslech, tak nemůžeme nezmínit modulo. Plus, minus známe, ale modulo by nám mohlo dělat 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 příkladu výsledek modulu nebude nikdy více než 3 a méně než 0. Tedy se karty rozdají mezi všechny hráče ve hře. Zkus si to poměnit sám. Matematické operácePro mnoho matematických operací máme třídu Math, která obsahuje řadu statických metod. Názvy jsou samo vysvětlující, nebo si viz níže komentáře: 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í čísloV Math třídě máme metodu random. Vrací hodnotu od 0.0 do 1.0 . Krácením umíš zvětšit a musíš přetypovat na int pokud chceš celá čísla. private static void randomNumbers() { int number = (int)(Math.random() * 100); System.out.println(number); }ZnakyPrimitivní datový typ char se používá k uchování jednoho znaku. U char máme také možnost použít jeho alternativu objektovou a to Character V jevu existují escape sekvence. To jsou znaky, tedy char, před kterým je zpětné lomítko. Tyto sekvence mají pro kompilátor zvláštní smysl. Neberou se jako nějaký jednoduchý text. \t - vloží tab \b - vloží backspace \n - vloží nový řádek \r - vloží carriage return \f - vloží formfeed \' - vloží jednu uvozovku \" - vloží dvojitou uvozovku \\ - vloží zpětné lomítko Máme řadu pomocných metod: 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));Tímto způsobem umíš vložit také speciální 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. ");Pokud chceš zadat speciální hodnotu, tak musíš zadat před daný speciální 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ávěrPokud tě zajímá Java, tak jsi tady na https://skillmea.\cz pohledej kurzy, které se věnují programování v Javě a nauč se víc. Já jsem Jaro a doufám se vidíme při dalším článku nebo videu.

Jelikož Dárek roku od Learn2Code je zde vůbec poprvé, přinášíme ti jednoduchý přehled toho, co o Dárku roku potřebuješ vědět. V tomto článku najdeš všechny odpovědi, které by tě mohly zajímat. Ve zkratce, Dárek roku je kombinace těchto 3 věcí:  • předplatné Learn2Code online kurzů (přístup do 31.12.2019), • benefity od partnerů (v hodnotě více než 200 Eur), • soutěž od Apple zařízení (iPhone Xs, iPad, Apple Watch). Předplatné online kurzůV případě, že se rozhodneš koupit si Dárek roku , tak získáš neomezený přístup do všech online kurzů a to nejen těch současných, ale i připravovaných až do 31.12.2019 . Aktuálně najdeš na našem webu téměř 60 online kurzů, které obsahují více než 500 hodin videomateriálu (videotutoriálů). To je pořádná nálož informací, znalostí a know-how. Ber to jako investici do sebe a do svého rozvoje. Pomocí těchto kurzů se můžeš naučit dělat webstránky, programovat , dělat design a ovládat grafický software , zvládneš online marketing , práci s fotoaparátem či videem , nebo MS Office . Následně se můžeš uchytit v různých IT firmách nebo rozjet vlastní online či offline byznys. Na co čekat? Začni už dnes 💪 [Naše online kurzy] Benefity od partnerůKromě kvalitních online kurzů získáváš také lákavé benefity od našich top partnerů. Pojďme si o nich říct trochu víc. SuperFaktura  Pokud se chystáš k podnikání, nebo už podnikáš, kvalitní služba pro vystavování faktur, kterou lze propojit s účetnictvím je nutnost. SuperFaktura je jednoduchá a přehledná a při tom nabízí řadu funkcí pro živnostníky a firmy. V rámci benefitů máš 3 měsíce premium členství v SuperFaktuře od Learn2Code zdarma. Firmárna.cz Založit si živnost, firmu, občanské sdružení lze pohodlně, online a bez starostí. Portál pro zakládání firem firmaren.cz je nástroj, díky kterému si dokážeš firmu založit již za 15 minut. Všechno přes internet a bez rad drahých právníků. V rámci benefitů v Dárku roku získáváš kupón na 15 Eur . WebSupport Lídr slovenského webhostingového trhu, který na trhu působí od roku 2002 a aktivně se podílí na vytváření zdravého podnikatelského prostředí, podporuje startupy, neziskovky a je tak nedílnou součástí slovenské IT komunity. Tvůj web musí být někde uložen a my ti dáváme hosting The Hosting 3 GB na 3 měsíce zdarma . ESET ESET již více než 30 let vyvíjí přední bezpečnostní software pro firmy i domácí uživatele na celém světě. V ESETu věří v technologie a chtějí zajistit, aby si je uživatelé mohli vychutnávat bezpečně. Měj svá data v bezpečí s 30% slevou na produkty Eset Internet Security nebo Eset Smart Security Premium. Profit Inspirativní magazín pro aktivní lidi, kteří chtějí žít naplno a měnit svět. Profit je měsíčník, ve kterém najdeš informace o nových trendech, výrazných osobnostech, inspirující příběhy, osobní finance či zajímavé investice. S Dárkem roku získáváš roční předplatné se slevou 50% . Bux.sk Internetové knihkupectví Bux.sk nabízí tisíce knih skladem, novinky světových i domácích autorů. Nakup knihy pro sebe nebo blízké v internetovém knižním eshopu bux.cz a získej slevu 10 Eur . Powerlogy Inovativní produkty pro aktivní lidi, zdravé potraviny, káva a další produkty, které ti už i v malém množství dodají zdravou energii pro každý den. Od Learn2Code získáváš 20% slevu na nákup . Forbes Návod na úspěch najdeš v celosvětově známém magazínu Forbes. Pokud hledáš inspiraci na celý rok, Forbes předplatné musíš mít. Kromě tištěného magazínu získáš i jeho elektronickou verzi a můžeš tedy Forbes číst v tabletu nebo mobilu. V rámci Dárek roku od nás dostáváš slevu 25% na nákup ročního předplatného . [Naši Partneři pro Dárek roku] Soutěž o Apple produktyKaždý, kdo si objedná Dárek roku, je automaticky zařazen do soutěže o Apple produkty od partnera akce Dárek roku společnosti iStores . Konkrétně můžeš vyhrát nový iPhone Xs, iPad 2018 nebo Apple Watch series 3 GPS. Výherce budeme losovat 1.1.2019 ve 20:00 v livestreamu na našem Facebooku a jejich jména zveřejníme i na webu v sekci soutěž. [Společnost iStores][Vyhraj iPhone, iPad nebo Apple Watch] Tip na dárekNevíš, čím obdarovat sebe nebo své blízké na Vánoce? Máme pro tebe super tip - Dárek roku od Learn2Code . Vzdělávání je ta nejlepší investice do budoucnosti pro tebe nebo tvé blízké. A proto nám napiš email a vystavíme ti dárkový poukaz.

 Ahoj, naposledy jsme mluvili o websocketech ve flasku. Používali jsme knihovnu flask-socketio a prošli jsme základní funkcionalitu. Tato knihovna používá koncept místností nebo rooms, který slouží k tomu, abychom uměli adresovat klienty v nějakých skupinách. Tento koncept se používá v chatových aplikacích, kde uživatelé vidí zprávy jen v místnosti, ve které se nacházejí. Nedostanou zprávy z žádné jiné. Podíváme se tedy na tento koncept a abychom udělali i nějaký reálný příklad, uděláme vlastní chatovací appku. Uživatelé se budou moci přidat do stávající místnosti, chatovat s ostatními, vytvářet nové místnosti a podobně. Bude to velice jednoduchý message board. 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/activateInstalujeme závislosti. Budeme používat totéž, co v předchozím článku. (venv)$ pip install flask, flask-socketioJedeme na boilerplatě pro naši appku. Struktura vypadá asi takto: ▾ websockets_message_board/ ▾ static/ ▾ css/ main.css ▾ js/ main.js ▾ templates/ board.jinja ▸ venv/ server.pySoubory main.css a main.js jsou zatím prázdné, slouží pouze jako placeholder. Pokračujeme tedy se souborem server.py a lze jej naplnit kódem. 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)Rozdíl oproti minimální flask appke je ten, že ji jinak spouštíme. Nepoužijeme if __name__ == '__main__': app.run()ale budeme ji spouštět přes socketIO. if __name__ == '__main__': socketio.run(app, debug=True)To proto, aby aplikace uměla spustit více vláken pro každého uživatele. Stejně tak je dobré vědět, že deployment na produkční server takové aplikace je trošku komplikovanější než když máme klasickou flask appku. Obsah základního templejtu board.jinja (i jediného, který budeme používat) je následující: <!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 pár důležitých importů jako socket.io, jquery a také css a js soubory naší appky. Takový jednoduchý základ můžeme spustit a uvidíme, jestli všechno šlape jak 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 není vůbec potřebný, ale jelikož všichni mají rádi hezké věci, nainstalujeme si css framework zvaný semantic-ui. Je to fajn framework, mám s ním dobré zkušenosti. Dokumentace je možná trošku těžší na pochopení, ale kromě toho to funguje a hlavně vypadá moc hezky. [Image] Stačí stáhnout toto zipko a integrovat do svého projektu. Je to velmi jednoduché. Zip rozbalíme a překopírujeme následující soubory • themes -> websockets_message_board/static/css/ • semantic.min.css -> websockets_message_board/static/css/ • semantic.min.js -> websockets_message_board/static/js/ Soubory semantic.min.js a semantic.min.css musím includnout na svou stránku, takže běžím do board.jinja a přihodím do hlavičky další řádky: <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é dát si pozor, abychom nejprve přidali jquery a až pak semantic.min.js, jinak se mi semantic-ui bude stěžovat, že neví najít jquery knihovnu. Ve složce themes jsou hlavně ikony a nějaké obrázky, které semantic-ui poskytuje. Po instalaci css frameworku můžu hned vidět změnu v podobě jiného fontu na mé smutné stránce. Nic jiného tam ještě není. UIUděláme nyní přibližný náčrt UI, abych věděl, jak appka asi bude vypadat a jaké funkce jí vlastně uděláme. Nebude to nic světoborného. Budeme mít jednu stránku kterou rozdělím na 3 sekce. Hlavní bude obsahovat zprávy, takže to bude můj message board. Boční panel bude obsahovat seznam místností, do kterých se budu umět přepínat. No a na spodní liště bude input pro moji zprávu.[Image] Zhmotním tuto svou představu do kódu. Otevřu board.jinja a naházím tam nějaké <div> elementy. Jelikož používáme semnatic-ui jako náš css framework, budu rovnou používat třídy v html. Použijeme grid systém, který nám usnadní práci při ukládání ui elementů. <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ůžu zkusit naplnit tyto části i nějakým obsahem. Jen tak ze zvědavosti, jak to bude vypadat. Všechno bude zatím jen tak naoko (prototypování). Začneme tím nejhlavnějším: message boardem <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šechny zprávy jsem obalil do div s id msg_board, abych pak jednoduše uměl přidávat nové zprávy do tohoto elementu.[Image] Uděláme totéž pro seznam místností. Rozhodl jsem se, že do tohoto postranního panelu strčíme i formulář pro změnu jména uživatele. Ten by měl mít možnost změnit své jméno. Bude to vypadat 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é jsem přidal <input /> na vytváření nových místností. Myslím, že takovou možnost by uživatel mohl mít. Poslední skládačkou bude input pro naše zprá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álně mi nebudou fungovat radio buttony, protože semantic-ui potřebuje tyto inicializovat v javascriptu. Pome tedy na to. Otevřeme main.js a píšeme $(document).ready(function(){ // UI HANDLERS $('.ui.radio.checkbox').checkbox(); });Stejně tak můžeme rovnou vybavit iniciální spojení přes websockety mezi klientem a serverem. $(document).ready(function(){ var url = location.protocol + "//" + document.domain + ":" + location.port; socket = io.connect(url); // UI HANDLERS $('.ui.radio.checkbox').checkbox(); });Posílání zpráv mohu rovnou i vyzkoušet v konzoli prohlížeče. Stačí otevřít developer tools, přejít na záložku console a tam už můžeme psát socket.emit("test", "hello there")[Image] Nicméně, nic se neděje, protože můj backend dosud není vůbec připraven. Vrhneme se tedy na server side a implementujeme místnosti – room. RoomsPřesuneme se do souboru server.py a přidáme handler pro základní eventy které budeme používat: 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í velmi jednoduše. Pokaždé se podívám na data, která mi přišla (proměnná data) a vytvořím jednoduchou zprávu, kterou pak broadcastuji na všechny uživatele v té dané místnosti. Pokud si už pořádně nepamatuješ, co dělal ten broadcast, vzpomínej z minulého blogu. Důležité je použití funkcí join_room a leave_room. Tyto pocházejí z knihovny flask-socketio, kterou jsme instalovali na začátku. Slouží k tomu, abychom přiřadili danou session do nějaké místnosti. Potom, když pošlu zprávu do místnosti, dostanou ji všichni v té místnosti. Je to fajn mechanismus jak kontaktovat jiné klienty a uspořádat si je do nějakých kategorií. rooms nemusím nutně používat jen na chatovou funkcionalitu. Mohu to použít k tomu, abych si seřadil uživatele do nějaké společné skupiny, které posílám barsjaká data. Dejme tomu, že bych měl appku o počasí, a nějaká skupina uživatelů by měla zájem o notifikace, jestli bude pršet. Tak tyto bych hodil do společné skupiny - místnosti - a notifikace bych posílal jen jim. Využití je tedy všelijaké. JavaScriptBackend byl v tomto případě docela jednoduchý a nepotřebovali jsme toho mnoho implementovat. Zprávy se od našeho backendu jen odrážejí jako od relátka, který je dále rozesílá klientům. Na straně klienta toho bude trošku více. Pokračujeme v souboru main.js. Nyní se pokusíme implementovat posílání zprávy a zobrazení příchozí zprá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čátek vytvoříme nějaké random uživatelské jméno a zvolíme default místnost "Lobby". To abychom s tímto neměli starosti zatím. Používáme k tomu pomocné funkce, které si implementujeme stranou, aby nám nezavazovaly. Jméno uživatele a název aktuální místnosti si udržuji v sessionStorage, což je fajn dočasné úložiště v prohlížeči. Přežije také reload stránky a navíc se mi tento způsob více líbí jak udržovat informaci v cookies. Když máme potřebná data, můžeme se hned na začátku bouchnout do nějaké místnosti. V javascriptu používáme knihovnu socket.io, která ale žádný koncept místností nezná. Pokud se podíváš do dokumentace(pozor! otevři si client api), zjistíš, že nic takového jako rooms se tam nezmiňuje. Takže to je věcička knihovny flask-socketio. Použijeme tedy klasický emit na handler join, který existuje na serveru. Tento řádek $("form#send_msg_to_room").submit( se pomocí jquery napíchne na formulář a zachytí odeslání formuláře. Pak můžu dělat co se mi zachce a nakonec vrátím false, takže formulář se reálně ani neodešle. Odeslání zprávy je přímočaré. Zjistím UserName, zjistím RoomName, vytáhnu si text zprávy a vše pošlu do funkce sendMessage. Tato již zajistí zabalení informací do jsonu a posílám pomocí funkce emit. Posílám na handler msg_board, který jsem si udělal před chvilkou. Zbývá mi vyřešit přijetí zprávy. To dělám pomocí funkce socket.on, kde dám kód, který bude proveden při přijetí zprávy. Tady si jednoduše (ale zato strašně ošklivě) slepím kus HTML, které pak strčím na konec elementu s id msg_board. Než to budeš zkoušet, je fajn si ještě vymazat ty fejkové zprávy, které jsme tam dali natvrdo do HTML. Takže mažeme tyto řádky <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 tedy jako další věc vybavit změnu uživatelského jména. $(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 jako při posílání zprávy, napíchnu se na HTML formulář a zpracuji ho ještě před odesláním. Změny uložím do sessionStorage. Přidal jsem ještě 2 vychytávky. • funkce updateHeading nastaví aktuální název místnosti a uživatele jako hlavičku stránky, • notifyNameChange dá všem uživatelům vědět, že si někdo změnil jméno. Jméno si už můžu měnit, ale oznámení o změně jsem nedostal. Na to ještě musíme doplnit 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); }); }); ...Nyní se nám začnou zobrazovat i systémové notifikace o tom, co se děje. Kdo vešel do místnosti, kdo ji opustil nebo kdo si změnil jméno. Poslední věcí, kterou musíme udělat, je selekce místností. Toto bude vyžadovat trošku více práce. Seznam stávajících místností si musíme udržovat na backendu. Ani na klientské části ani na backendu z knihovny flask-socketio neumím získat seznam všech místností. Musím si ho tedy udržovat 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 jsem si začal posílat nějaká data. Vyhodím tedy ty fejkové, které jsou tam natvrdo, a uděláme loop, ve kterém přidám všechny stávající místnosti. <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čuji v souboru main.js, kde si vytvořím funkce, které se postarají o změnu místnosti + pokud byla vytvořena nová, tak ji přidám do seznamu. $(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 zde několik pomocných funkcí, které mi pomáhají při výběru místnosti nebo při vytváření nové. Problematické části nastávají právě tehdy, když chci místnost i vytvářet. V podstatě ale nejde o žádné komplikované věci. Funkce selectCurrentRoom mi pomůže přehodit radio button při změně místnosti. Tím, že používáme semantic-ui, tak se nám to také trošku zkomplikovalo, ale výsledek stojí za to.[Image] ZávěrPostavili jsme takzvaný proof of concept, udělali jsme chatovací appku jen pomocí websocketů. Není to dokonalé a určitě je tam spousta much, to nám však nebránilo pochopit jak fungují websockety. Všechny zprávy žijí pouze v prohlížeči uživatele a nejsou uloženy na žádném serveru. Někdo to může považovat za chybu, někdo za fičúru. To už nechám na vás. Celý projekt se dá stáhnout zde. Zanedlouho se opět vrhneme na nějaké zajímavé téma ;)

Co je Evropský týden programování? Evropský týden programování je nezávislé hnutí dobrovolníků, kteří ve své vlasti propagují programování v roli velvyslanců týdne programování. Všichni organizátoři akcí zaměřených na programování (školy, učitelé, programátorské kluby a kroužky, knihovny, podniky, veřejné orgány) se vyzývají, aby doplnili svou akci na mapu na stránce codeweek.eu . K čemu slouží týden programování?• Oslavuje programování jako tvůrčí činnost • Dává lidem svobodu • Spojuje lidi • Nadchne více lidí pro vědu, techniku, inženýrství a matematiku Co si mohu z této akce odnést já?• Programování je zábava! • Programování je tvůrčí! Lidstvo se od nepaměti věnuje tvorbě – nejprve s pomocí hlíny, kamene, cihel, papíru či dřeva, dnes už i díky počítačovému kódu. • Programování dává lidem svobodu! Digitální obsah nemusíte jen pasivně přijímat. Díky programování můžete věci i sami tvořit a zpřístupňovat je milionům lidí. Můžete vytvářet webové stránky či hry nebo kontrolovat počítač nebo robota kódem. • Je to možnost pochopit svět. Stále více věcí je vzájemně propojeno. Pokud víme, co se děje v zákulisí, pochopíme, jak funguje svět! • Programování nás učí algoritmickému myšlení, řešení problémů, kreativitě, kritickému myšlení, analytickému myšlení a týmové práci. • Až 90 % pracovních míst dneška vyžaduje digitální dovednosti včetně programování.[Image] Jak se mohu zapojit do Evropského týdne programování?• Programátoři mohou pořádat semináře v místních školách, co-workingových prostorách, komunitních střediscích nebo knihovnách. • Učitelé, kteří mají zkušenosti s programováním, mohou vést hodiny programování, vyměňovat si učební osnovy či pořádat semináře pro kolegy. • Učitelé, kteří (zatím) nemají zkušenosti s programováním, mohou zorganizovat semináře nebo pozvat rodiče či studenty, aby se navzájem naučili programovat. • Rodiče mohou podpořit své děti, aby navštívili seminář věnovaný programování. • Podniky a neziskové organizace mohou vést semináře o programování, poskytnout své zaměstnance jako školitele v rámci aktivity „staň se školitelem“, organizovat pro studenty zábavné programátorské soutěže nebo takové akce sponzorovat. • Veřejné instituce mohou pořádat semináře o programování nebo diskuse u kulatého stolu ve vlastních prostorách. • Každý, kdo se účastní akce zaměřené na programování, se o zkušenosti může podělit na webové stránce Evropského týdne programování a inspirovat ostatní! Nezapomeňte přidat své akce na stránce CodeWeek  a používat hashtagy #CodeEU a #CodeWeek.

Juraj Šarišský je zkušený frontenďák, který tě bude učit, jak se dělají pořádné webstránky. Má za sebou léta zkušeností s frontendem, momentálně pracuje s React/React Native/Redux a dalšími top technologiemi. Pracoval na projektu v ECB ve Frankfurtu, kde byl UI app developer / React / Redux / UX / UI. Navíc 7 let doučoval matematiku a nyní tě bude učit kódovat webové stránky na kurzu v Bratislavě. [Image] Juraj Šarišský Kde teď pracuješ? Představ se nám i po pracovní stránce.Momentálně pracuji na pozici React a Redux developer pro německého nadnárodního klienta. Vzdělávám a učím ostatní kolegy Front-End development. Co se ti na tvé práci líbí nejvíc?Moje současná práce mi přináší kromě programování také příležitost sdílet své znalosti a zkušenosti s ostatními kolegy. U nás v práci aktivně buduji front-endovou kulturu. Snažím se poskytnout mým kolegům způsob vnímání a myšlení, který je potřebný pro kvalitní development a který je odlišný od myšlení, které se používá k back-endu. U nás si lektorem kurzu Web Designer. Jak ses k programování, tvorbě webstránek a učení dostal?K tvorbě webových stránek jsem se dostal během studia na vysoké škole, kde jsem měl možnost vidět práci mého spolužáka. Byly to velmi pěkné a kvalitní stránky, tak jsem si řekl, že by mě taky bavilo dělat to co on. Pořídil jsem si kvalitní knihy a online kurzy. Začal jsem s responzivním designem a Javascriptem. Potom přišlo jQuery. S učením jsem začal souběžně s tím, jak jsem pomáhal ostatním studentům a spolužákům se školními zadáními. [Image] Juraj pracoval na několika zajímavých projektech Co všechno může dát kurz Web Designer někomu, kdo se rozhodne jej absolvovat?Určitě je to potřebná zkušenost s čistým HTML, CSS a Javascriptem. Jelikož se dnes mnoho front-endových developerů učí pracovat rovnou s Angularem a Reactem a následně neprojdou přes DOM manipulaci a Vanilla Javascript, chybí jim zkušenosti a modely pro řešení UI problémů. Každý front-end developer je v první řadě HTML, CSS a Javascript developer, a proto by měl ovládat i tyto technologie. Sleduješ i konkurenci, aktuální trendy, inovace? Jak jsi na tom v tomto směru?V naší branži nastal obrovský boom, přicházejí nové knihovny a frameworky. A já vůbec nelením a každý den se podívám na něco nového. Zkouším nové techniky, snažím se diskutovat s developery a zjistit, co preferují oni a proč. Je však nutná určitá rezervovanost, jelikož ne každá technologie přežije. Hlavní focus (proto) vidím v poznávání Javascriptu a HTML5 api, případně je dobré napojit se na komunitu, od které se může developer hodně naučit. D nes je hodně pracovních nabídek v oblasti programování a tvorby webstránek. Vnímáš to tak i ty?Ano, určitě. Velké i menší společnosti chtějí desktopové aplikace nahradit webovými verzemi. Když si představíme, že desktopové aplikace, které zde byly přibližně 20 let se přesouvají na web, otevírá to možnosti pro webové developery, kteří jsou opravdu velmi žádaní. Je tato práce dobře zaplacena? :)Určitě ano :). Dnes si i junior, který přijde do větší či menší společnosti, kde začne získávat své první zkušenosti a kde bude řešit méně náročné úkoly, může přijít k platu, který převýší návrh: převyšující průměrný plat na Slovensku. Když se zdokonalí v technologiích a je k tomu navíc i flexibilní, můžeme mluvit io 3 až 5 násobně vyšší mzdě, než je tomu v případě juniorských pozic.  Je na Slovensku a v Čechách podle tebe dost kvalifikovaných lidí právě na tyto vývojářské pozice?Hodně kvalitních lidí asi odešlo do zahraničí, to je dnes všeobecně známý problém. Ale také nároky firem bývají často vyšší než byly před časem. To podle mě otevírá možnost k interpretování toho, co znamená kvalitní developer.  Já si myslím, že je dobré specializovat se na vybranou oblast a dosahovat v této oblasti vynikajících výsledků, ale zároveň mít i znalosti z jiných oblastí, aby byl developer flexibilní. Pokud bych to měl říci zjednodušeně, pak ano, obecně na trhu chybí developeři. Proto jsem se rozhodl, že začnu vzdělávat další developery, abychom získali náskok před ostatními zeměmi :) Co bys poradil všem, kdo nemají žádné zkušenosti s programováním a tvorbou webstránek, ale chtěli by nějak začít?Určitě bych jim poradil, aby v první řadě začaly zkoumat běžné webové a mobilní aplikace a zjistit jak fungují z pohledu business logiky, jaké komponenty a funkce obsahují. Toto vede ke správnému kontextu pro praktické programování. Je důležité vybrat si kvalitní kurz, kde se naučí kromě programování také něco z developerských a firemních kultur. Také je důležité neztrácet chuť učit se a na začátek vyřešit mnoho snazších problémů. Vždyť i ty složitější problémy jsou přece složeny z jednoduchých. A ještě nám prozraď tvé plány do budoucnosti.V pracovní oblasti bych ještě chtěl zvládnout programování nativních aplikací pro iOS. Momentálně se věnuji zejména React a React Native, ale jaksi cítím, že pro univerzálnější přístup je dobré ovládat i nativní iOS programování. Také bych chtěl navštívit zajímavá místa jako jsou Španělsko a Portugalsko, a to hlavně pro jejich exotickou kulturu. Pokud máš na Juraje nějaké otázky, napiš je do komentářů. Pokud tě zajímá tvorba webstránek a jsi z Bratislavy a okolí, přihlas se na Jurajův kurz.

Java 8 je velký balíček nové funkcionality oproti Java 9 a java 10. Ty jsou menší a odrážejí taktiku tvůrců jevy vydávat nové verze častěji s menším balíkem nové funkcionality. V tomto článku si řekneme nejvýraznější změny z Java 8. Funkcionální rozhraníRozhraní, které má jen jednu abstraktní metodu je považováno za funkcionální rozhraní. Pro lepší nastínění v kódu můžeme a je doporučeno přidat anotaci @FunctionalInterface. import java.lang.FunctionalInterface;   @FunctionalInterface public interface FunctionalInterfaceExample { void print(); } Lambda výrazyOk, chceme přidat do jevy možnost definovat funkcionalitu, aniž by patřila specificky pod nějakou třídu. Tyto funkce chceme vkládat do metod jako parametry. Co uděláme? Tvůrci jevy se asi takhle nezamýšleli, ale my jsme se takto zamysleli a odpověď je – použijeme lambda výrazy. Každá lambda má jako typ funkcionální rozhraní s její odpovídající metodou. V příkladu výše máme rozhraní s metodou print. Tato metoda nevrací nic a nepřijímá žádné parametry. Musíme vytvořit i takový lambda výraz – tedy nebude obsahovat return a nebudeme mít žádné návratové hodnoty. () -> System.out.println("Hello Word")Takto vložíš lambda výraz do metody: printHelloWord(() -> System.out.println("Hello Word"));Samotná metoda přijímá na vstupu právě dané funkcionální rozhraní: public void printHelloWord2(FunctionalInterfaceExample printHello)Více o lambda výrazech se dozvíš z mého online kurzu Java pro pokročilé, videa o lambda výrazech jsou zdarma. StreamsStreamy poskytují zjednodušenou práci s datovými kolekcemi. Poskytují několik užitečných metod jako jsou filtr, sorted, map a jiné. Pokud stream přejede přes všechny elementy v kolekci, tak bude prázdný. Tedy pokud chci znovu použít tentýž stream, tak zbytečně, neboť tam už nebudou data. Musíš si vytvořit nový stream. Nový stream vytvoříš například pomocí stream metody nad kolekcemi.  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áš seznam osob a chceš z daného seznamu získat všechny věky osob starších 50 let a mají být seřazeny podle věku. Co uděláš? Použiješ stream a jeho metody – tyto metody akceptují funkcionální rozhraní, tedy 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());Kolekce, které jsou iterovatelné, mají metodu forEach – která získá stream a projde všechny elementy. veky.forEach(System.out::println);   Method referenceČesky reference na metodu. Všimni si příkladu shora: Osoba::getVěk. Znamená to, že ze třídy Osoba použij metodu getVek. Totéž lze zapsat i pomocí lambda výrazu takto osoba -> osoba.getVek(). Ale pomocí reference si to zjednodušíme neboť java ví, jaký je vstupní parametr – je to osoba a ví, že voláš getVek. Tak stačí napsat Osoba::getVek. Metodu voláš bez závorek. Další článek o Javě již brzy. Přihlas se k odběru novinek a nezmeškej žádný nový blog.

Roman Podskuba studoval na FRIčce Žilinské univerzity a během psaní diplomovky si uvědomil, že právě weby jsou oblast, která ho baví. Rozhodl se tomu věnovat maximum, absolvoval náš 3měsíční kurz Web Designer a poté ještě vzdělávací program Azet akademie. A teď už zařezává v týmu Bistro.sk jako full-stack webdeveloper. Přečti si jeho příběh, programátorské začátky a rady, které dává začínajícím kodérům. Začněme tvou aktuální prací. Co přesně děláš, jaká je tvá pozice? Pracuji jako webdeveloper v Ringier Axel Springer SK. Pro někoho bude firma možná známější pod značkou Azet. Dostal jsem se do týmu Bistra, takže mým úkolem je podílet se na vývoji bistro.sk . Kromě toho vyvíjíme i platformu pro zákaznický servis a spravujeme i Azeťácký katalog či slovník. Všichni webdevelopeři v týmu jsme fullstack, takže pracujeme jak na frontendu, tak i na backendu. Nastoupil jsem jen koncem července 2018, takže momentálně se více rozhlížím, než dělám :D [Roman Podskuba - fullstack webdeveloper] Jak jsi k této pozici dostal?  Vždy jsem chtěl dělat něco, kde budu moci používat hlavu a bude mě to i bavit. Po střední škole jsem zkusil jít studovat informatiku. Tam mě to občas bavilo a občas ne. Až při diplomové práci jsem se dostal k tvorbě webů a začal jsem tušit, že by to mohlo být něco, o co bych se měl zajímat. Po škole jsem šel na tříměsíční kurz do Žiliny a po něm jsem měl už jasno, že tohle bude ta správná cesta pro mě. Máš nějaký vzor, ​​který tě inspiruje? Osobu, která je pro tebe motivátorem? Momentálně jsem obklopen lidmi, kteří toho vědí několikrát více než já. Takže o inspirativních lidí nouzi nemám. Zmínil bych však jedno jméno - Ernest Sawyer - kluk, který vedl kurz v Žilině. On byl asi první osoba, díky které jsem si řekl, že to se mnou nemusí být až tak marné, jak jsem si někdy myslel. Dal mi přesně to, co jsem tehdy potřeboval – ukázal mi, že jen tím, že budu kódovat stránky, se naučím kódovat stránky. Díky němu jsem cítil, že každým týdnem dělám pokroky. Jeho přístup byl fantastický. Motivuje mě zejména přítelkyně a nejbližší rodina. Prošli si se mnou od doby, kdy jsem byl na úřadu práce až dosud. Vždy jsem cítil jejich podporu a velmi se zajímají o to, jak se mám v práci a co tam vlastně dělám. Díky nim se cítím vnitřně v pohodě a to mě dobíjí energií. Kde bereš inspiraci pro svou práci? Máš nějaké tipy, které zaručeně fungují? Od kolegů. Dostal jsem se do týmu, kde je 10 programátorů a ještě spousta dalších lidí, kteří se o bistro.sk starají. U tolika lidí se každý den dozvím něco nového. Na internetu je kopec článků, stránek, tutoriálů, fór apod., ale nic není lepšího než osobní kontakt s lidmi, kteří se ve věcech vyznají do hloubky. V této oblasti je třeba sledovat aktuální trendy, inovace. Jak jsi na tom ty? Stíháš to všechno při práci? Musím se přiznat, že pokud se v osobním čase věnuji nějakým věcem, tak jsou to věci, které nemusí být „trendové“, ale pomohou mi v práci. Momentálně však v práci ještě doznívá Azet akademie a míváme jednou týdně workshopy na různá témata, kde se vždy řeší i aktuální trendy. Takže tyto věci se mi dostávají v práci a ve volném čase se tak můžu věnovat zejména věcem mimo IT. Čím vším sis musel projít, pokud ses vypracoval na tuto pozici? Mám vystudované počítačové inženýrství na fakultě řízení a informatiky na Žilinské univerzitě. Odbor byl zaměřen spíše do oblasti hardwaru, robotiky a podobných věcí. Tvorbu webů tento obor nepokrývá. Mně se naštěstí podařilo dostat se k diplomu, kde jsem měl dělat webovou aplikaci pro zobrazování stavu senzorů na platformě Yrobot. Při tvorbě aplikace jsem se dostal ke kurzu Webrebel 1, zíral jsem videa a vedle toho využil toho, co se mi hodilo do mé práce. Tady jsem si uvědomil, že web by mohla být cesta a proto jsem po ukončení školy šel na prezenční kurz od Learn2Code, který vedl Ernest Sawyer. Tady jsem se naučil velmi mnoho. Kdybych se učil tyto věci sám, ještě teď bych určitě nebyl tam, kde jsem byl po kurzu. Kurz mi dal základy, na kterých jsem mohl později stavět. Po kurzu jsem pomáhal při dvou projektech s HTMLkem a CSSkem Námestovské firmě Neonus, kde jsem se také hodně naučil. A pak jsem se výrazným krokem posunul k mé nynější pozici. Přihlásil jsem se na Azet Akademii, kde jsem se téměř 3 měsíce učil na různých cvičných projektech. Většina věcí byla zaměřena na PHP, ale vyskytly se tam samozřejmě také HTML a CSS. Kromě toho také něco z JavaScriptu či mysql. Během těchto tří měsíců jsem dal do toho hodně úsilí i ve volném čase, což mi v konečném důsledku hodně pomohlo. Při studiu mimo akademii, ale i v ní, jsem zase využíval kurzy odLearn2Code - Webrebel 1 a 2, Sass, Git a databáze . No, a po akademii jsem se už dostal do týmu Bistra :) [Účastníci Web Designer kurzu v Žilině (Roman ve středu :))] Co tě nejvíc baví na tvé práci? Máš nějaký oblíbený task, který děláš nejraději? Zatím mě baví všechno. Uvidím, jak to bude vypadat, když opadne to úvodní nadšení :) No úplně nejvíc mě baví věci, kde mohu použít dosud naučené věci a postupně k tomu přidávat nějaké nové poznatky. Momentálně dostávám v práci tasky, které nejsou příliš složité a jsou založeny na tom, že každým jedním se naučím něco nového, takže na téměř každém tasku si najdu něco, co mě zaujme. Kdyby však mám vypíchnout jednu věc, tak moc rád spekuluji s CSSkem. Na kurzu jsem dostal výborné základy, na které se mi poměrně lehce nabalují nové věci. Dnes je obrovská poptávka po programátorech a designérech. Co bys poradil všem, kdo nemají žádné zkušenosti, ale chtěli by nějak začít? Aby se nebáli a začali. Strach byl mou asi největší překážkou. Ještě donedávna jsem měl pocit, že když něco nevím alespoň na 110%, tak nemá význam s tím něco řešit, ale je třeba se ještě učit. Postupem času mi však došlo, že takhle se nikam nedostanu. Kodil jsem si nějaké weby sám pro sebe, což mi určitě něco dalo, ale nic mě neposouvalo vpřed tak, jako když jsem byl mezi lidmi, kteří věcem rozumějí a mohl jsem se jich ptát. Jednoznačně je třeba hledat nové výzvy a zkoušet. Každý, kdo má snahu, je v tomto odvětví vítán a časem si jistě najde to, co ho bude bavit. Takže nejdůležitější, tedy alespoň u mě, je mít odvahu skočit do neprobádaných vod a snažit se naučit plavat. Co je podle tebe největší výhodou práce v IT odvětví? Je to odvětví, které nabízí nespočet možností. Stále je prostor pro učení a zlepšování a úkoly většinou nejsou stereotypní. Mnohým lidem, včetně mě, určitě musí vyhovovat to, že práce v IT odvětví si v mnoha případech nevyžaduje fixní pracovní dobu. Výhod je mnoho, každý si určitě najde tu svoji. Úplně největší výhodou pro mě je ovšem to, že mě to baví. A to je podle mě nejdůležitější, aby lidé dělali to, co je baví a měli z práce radost. Měl jsi někdy pocit, že to nezvládneš? Bylo období, kdy jsi chtěl skončit a dělat něco úplně jiného? Během kurzu se nic takového nestalo, tam jsem pomalu přicházel na to, že tohle je to co chci určitě dělat av čem můžu být dobrý. Až v Azet akademii jsem měl občas pocit, že je něco nad mé síly. Začínalo nás 12 a věděli jsme, že práci dostanou jen někteří. To mi občas tlačilo do hlavy myšlenky, že zrovna já bych mohl být ten, kdo půjde další den domů. Ale nikdy jsem si neřekl, že chci dělat něco úplně jiného a vždy, když se už k tomu mohlo schylovat, jsem zapnul i ve volném čase a dal tomu trošku víc, než by se možná ode mě očekávalo. [Účastníci Azet academy] Jaké jsou tvé plány do budoucna? Jsem člověk, který upřednostňuje stabilitu před častými velkými změnami. Co se týče práce, tak dokud mě to bude bavit, budu pokračovat a budu celkově spokojen, tak bych rád zůstal v Azetě. Jelikož momentálně toto všechno práce v týmu Bistra splňuje, nemám důvod byť jen uvažovat nad změnou. Spíš mám nějaké plány v osobním životě, protože nová práce mi nabídla i nové možnosti :) Máš nějakou radu, kterou bys chtěl sdílet se studenty, kteří teprve začínají s designem, tvorbou web stránek a programováním nebo se svým vzděláváním v IT oblasti? Každý člověk je jiný. Každý potřebuje něco jiného. Někomu vyhovuje jít do toho po hlavě a učit se od rána do večera. Někomu zase nabalovat znalosti v menších dávkách. Jednu věc si však musí uvědomit každý jeden člověk, který chce začít (a ne jen začít). Pokud někdo čeká, že mu někdo nalije znalosti do hlavy, tak by se měl nad tím zamyslet nebo pouvažovat o jiném zaměření. IT oblast vyžaduje mnoho úsilí, které vychází od člověka, který se touto cestou rozhodl jít. Kromě toho je fajn být trpělivý – na začátku jdou věci pomalu a to je občas frustrující. Ale s dostatečnou dávkou trpělivosti má každý šanci na to, aby se uplatnil v tom, co ho baví. Romanovi děkujeme za super rozhovor a parádní motivaci i pro ostatní začínající programátory. 

Martin se již více než 8 let věnuje programování. Vybudoval vlastní firmu, která poskytuje komplexní IT služby na míru a působí na slovenském i zahraničním trhu. Klientům se snaží přinést kvalitní a detailně vypracovaný produkt. Martin navrhl vlastní systémy, se kterými pracují při tvorbě webů, eshopů či aplikací. Vedle toho studuje informatiku na Univerzitě T. Bati ve Zlíně. Martin se vždy snaží o jedinečnost toho, co dělá, a to naučí i vás v připravovaných kurzech. Martin povede prezenční kurz tvorby webstránek pro začátečníky Web Designer v Banské Bystrici. Ahoj Martine, vítáme tě u nás v Learn2Code. Jsi naším novým lektorem, tak se nám na začátek trochu představ.Pocházím z Banské Bystrice. Již více než 8 let se věnuji programování a také grafice a marketingu. Kromě toho kombinovaně (externě) dokončuji studium. K překvapení jsem si vybral obor informační technologie na Univerzitě Tomáše Bati ve Zlíně. Ve volném čase velmi rád cestuji, sportuji a studuji. [Martin Rumanovský - lektor Learn2Code] Kde teď pracuješ? Představ se nám i po pracovní stránce.Aktuálně pracuji ve firmě, kterou jsem sám založil a vybudoval. Firma má název MR Studio WEB & APP Development ( mrstudio.eu ) a poskytujeme komplexní IT služby na míru. Snažíme se přinést kvalitní a detailně vypracovaný produkt. Navrhl a vytvořil jsem vlastní systémy, se kterými pracujeme při tvorbě webových stránek, webových aplikací, portálů, eshopů a marketingu. Primárně působíme na slovenském a českém trhu. Co se ti na tvé práci líbí nejvíc?Na mé práci se mi nejvíce líbí flexibilita z hlediska času i místa práce. Také velmi rád komunikuji s klienty a hledám pro ně inovativní a efektivní řešení. Samozřejmě nejvíc se mi líbí, když je klient s vyvinutým produktem spokojen. V Learn2Code si lektorem kurzu Web Designer. Jak ses k programování, tvorbě webstránek a učení dostal?K programování jsem se dostal ještě jako student střední školy. S kamarády jsme ve volném čase hrávali online hry, jako je NHL nebo FIFA. Časem jsme se shodli, že potřebujeme webovou stránku pro zapisování výsledků, tabulek a podobně. Tehdy jsem se dostal k programování a tvorbě webových stránek. K učení jsem se dostal díky mé přítelkyni. Častokrát jsem jí říkal, že někteří programátoři nemají dostatečné znalosti z praxe, které firmy vyžadují. A já bych je chtěl naučit právě něco z praxe, nejen tu teoretickou rovinu. No a ona mě později přihlásila ik vám do Learn2code na pozici lektora (smích). Co všechno může dát kurz Web Designer někomu, kdo se rozhodne jej absolvovat?Určitě mu dá přehled a znalosti o tom, jak vytvořit moderní webovou prezentaci. Absolvent bude umět pracovat s HTML, CSS, jQuery a používat různé knihovny. Doporučuji tento kurz každému, kdo chce začít tvořit moderní webové prezentace. Sleduješ i konkurenci, aktuální trendy, inovace? Jak jsi na tom v tomto směru?Samozřejmě sleduji i konkurenci a aktuální trendy, aniž by to nešlo. Myslím, že základem v této oblasti je, aby byl člověk dynamický, flexibilní a co nejvíce informován. Vždy se snažím inspirovat. Doba a technologie se posouvají velkou rychlostí dopředu. Ve volném čase hodně studuji nové programovací jazyky, technologie, design a podobně. [Jeden z Martinových projektů] Dnes je hodně pracovních nabídek v oblasti programování a tvorby webstránek. Vnímáš to tak i ty?Samozřejmě vnímám. Každým rokem je na trhu více a více firem v oblasti IT a marketingu. Pracovních příležitostí je množství. Každý, nicméně, musí na sobě neustále pracovat. Firmy nehledají kvantitu, ale kvalitu. Je tato práce dobře zaplacena? :)Zda je tato práce dobře zaplacena? Já osobně si myslím, že pokud je zaměstnanec dostatečně kvalifikovaný, měl by být i náležitě odměněn, ale to už záleží na postoji firmy. V globálu si myslím, že ano, je dobře placená. Je na Slovensku a v Čechách podle tebe dost kvalifikovaných lidí právě na tyto vývojářské pozice?Podle mého názoru kvalifikovaných lidí není dostatek. Firmy mají problém najít lidi, kteří ovládají požadované programovací jazyky nebo technologie alespoň na základní úrovni. Některé firmy pracují se zaměstnanci, takříkajíc, někdy od nuly. Proto, jak jsem uvedl výše, je třeba neustále se vzdělávat, snažit se pokračovat a mít chuť angažovat se. Jednoduše řečeno je třeba být aktivní a cílevědomý. Naše firma například aktuálně spolupracuje zejména s lidmi z České republiky. [Martin Rumanovský] Co bys poradil všem, kdo nemají žádné zkušenosti s programováním a tvorbou webstránek, ale chtěli by nějak začít?Ať navštíví kurz Web Designer :). Dnes je na internetu spousta návodů a tutoriálů, jak začít programovat. Stejně tak jsem začínal i já. Ne všechny techniky programování jsou správně prezentovány, právě proto je velmi důležité vybrat si kvalitní kurz či návod. A samozřejmě to nejdůležitější je vytrvalost, vytrvalost, vytrvalost a výsledek se dostaví. A ještě nám prozraď tvé plány do budoucnosti.S přítelkyní máme spoustu business plánů do budoucna jak rozšířit firmu lze i na jiné, než je slovenský a český trh, vytvořit nové webové projekty, ale uvidíme jak nám to všechny okolnosti a čas dovolí. Pokud máš na Martina nějaké dotazy, napiš je do komentáře. Pokud se chceš naučit dělat webové stránky, přihlas se na Martinův kurz v Banské Bystrici.

Websockety ve Flasku Pokud ses někdy setkal s výrazem websocket a chtěl by ses dozvědět, co to vlastně je a jak se to používá v Python aplikaci, tak tento článek je právě pro tebe. Standardně tvůj prohlížeč komunikuje na webu pomocí http protokolu. Klasický http protokol nabízí jednoduchou komunikaci. Pošle se request a jako odpověď dostanu response. Tento klasický komunikační způsob nebyl dostačující pro dnešní moderní aplikace. Byla potřeba pro komunikační kanál, který bude sloužit k obousměrné komunikaci. HTTP by měl být víceméně bezstavový a klient a server mezi sebou komunikují jen když je třeba, jinak je spojení mezi nimi uzavřeno. Navíc, prohlížeč (klient) musí požádat server o komunikaci a server může na tuto žádost odpovědět. Ta žádost, to je ten http request. Jinak server neumí kontaktovat klienta jen tak sám od sebe. U websocketů je tomu jinak. Jedná se o komunikační kanál, který se otevře jednou, na začátku a poté se používá ke komunikaci klienta a serveru v obou stranách. To znamená, že server může posílat data zároveň co klient posílá data na server. Toto se odborně jmenuje full-duplex. Web socket má menší overheat přenosu dat, umí být real-time a hlavně, server může posílat data na klienta, aniž by si je klient musel explicitně vyžádat requestem. Toto je užitečné například u aplikací, které zobrazují real time data a server posílá tato data klientovi. Takže pokud nastane nějaká změna dat, server je prostě pošle na klienta. Toto dříve nebylo možné provést pouze pomocí http protokolu. Minimální pří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: Nejlepší je vyzkoušet si tyto koncepty v praxi. Dnes budeme pracovat s Flaskem, knihovnou SocketIO a javascript knihovnami socket.io a jQuery. Budu předpokládat, že Flask aplikace alespoň trochu znáš. Začneme tím, že si vytvoříme nové virtuální prostředí: $ mkdir websockets_primer $ cd websockets_primer $ virtualenv venv $ . venv/bin/activate (venv) $Nainstalujeme závislosti, které budeme potřebovat: (venv)$ pip install flask, flask-socketioV době psaní tohoto článku jsem používal verze Flask==1.0.2 a Flask-SocketIO=3.0.1. Když už máme připravené prostředí a nainstalované závislosti, uděláme nový soubor 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čátku máme importy jako pro každou jinou Flask aplikaci, avšak přibylo nám tam  from flask_socketio import SocketIO. Tento naimportovaný modul je v podstatě totéž jako jiné  Flask rozšíření . Inicializaci websocketů ve Flask aplikací provedeme pomocí řádku  socketio = SocketIO(app). Pomocí tohoto objektu  socketio budeme přijímat a odesílat zprávy. Minimální aplikace by měla mít alespoň jednu stránku. V našem případě to bude  index.jinja. Toto je třeba, protože musíme poskytnout i klientskou část naší aplikace. Tam bude javascript knihovna  socketio  a nějaké další funkce. Websockety umí přijímat a posílat zprávy. Provedeme zatím jen přijímání zpráv. Pomocí řádku  socketio.on("event")definuji handler pro událost  event. V tomto případě jednoduše vypíšu data na konzoli. @socketio.on("event") def handle_event(data): print(data) Posílání a přijímání dat na obou stranách (klient a server) probíhá jako event. Toto je důležitý fakt, protože architektura aplikace založené na eventech ( event driven architecture ) funguje trošku jinak než klasické volání funkce. Neříkám, abys měl z toho paniku teď, ale měj to na paměti. Pokud znáš Flask aplikace, tak spuštění appky vypadá většinou takto if __name__ == "__main__": app.run("0.0.0.0", debug=True) My ale musíme appku spustit jinak, jelikož používáme websockety. Spustíme ji pomocí objektu socketio, který jsme si vytvořili na začátku. if __name__ == '__main__': socketio.run(app, debug=True) Nyní musíme ještě vytvořit 2 soubory. Snažíme se renderovat  index.jinja a také musíme vytvořit hlavní javascript soubor, do kterého budeme psát klientskou část naší websocketové ukázky. Vytvořím složku  templates a do ní soubor 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é jsou 3 importy v hlavičce html dokumentu. První importuje  jQuery , druhý importuje knihovnu pro práci se sockety  socketio  a poslední import je pro náš  main.js  soubor, který musíme ještě vytvořit. Jinak tento html dokument obsahuje pouze jeden formulář s jedním tlačítkem. To budeme používat k posílání zprávy přes websocket. Vytvoříme složku  static v ní  js a v ní už konečně soubor main.js Obsah bude vypadat 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 klientské části. Z tadeto budeme přijímat a posílat zprávy přes websockety stejně jako na serverové části. Pomocí řádku  var socket = io.connect(url); se připojím na můj server. Následně pomocí  jQuery  upravím chování buttonu, aby při stisku poslal zprávu. K tomu slouží funkce socket.emit() Okej, základ máme hotový a můžeme nyní zkoušet posílat zprávy. Aplikaci spustím pomocí pří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-530Otevřu prohlížeč na  http://localhost:5000  a zobrazí se mi jeden button. Když ho zmáčknu na konzole mi vyskočí: test messagePojďme tedy prozkoumat, jaké možnosti nám poskytuje tato knihovna  socketio. Přijímání zprávJak jsem již zmiňoval, přijímání zpráv na obou stranách probíhá jako event. V Pythonu musíme pro takovýto event definovat handler. V javascriptu používáme tvz. callbacky. V principu jde o totéž, ale každý jazyk má své vlastní technické řešení a my si toho musíme být vědomi. Každý event, který chci přijmout musím mít nějaké jméno. V příkladu jsme měli název  event. Mohu ale použít cokoli @socketio.on("foobar") def handle_data(data): print(type(data)) print(data)Také data se automaticky mění na příslušný typ. Pokud v javascriptu pošlu string, tak string dostanu i na serveru. Totéž platí pro jiné datové 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 odeslání událostí dostanu výpis na serveru <class 'str'> message <class 'list'> [1, 2, 3] <class 'dict'> {'data': 'message'}Handler také může mít několik argumentů @socketio.on("sum") def handle_sum(arg1, arg2): print(arg1 + arg2)Upravíme javascriptovou část a zavoleme event s více argumenty ... $("form#emit_event").submit(function(event) { socket.emit("sum", 23, 47); return false; }); ...Namespace patří mezi další funkce, které mám knihovna SocketIO nabízí. Každý event si můžeme rozdělit podle namespace. To nám dává další možnosti organizace eventov. @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): print(arg1 + arg2)Ovšem pozor! Na straně klienta se musíme nyní připojit na jinou 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; }); });Další vychytávka je to, že každý event, který pošleme, umí zavolat callback poté, co byl proveden. Například z javascriptu pošlu nějaká data na server a server mi ještě dodatečně potvrdí, že data byla zpracována. Aha takhle ... $("form#emit_event").submit(function(event) { var ack = function(arg){console.log(arg)}; socket.emit("sum", 23, 47, ack); return false; }); ...Pokud chci, aby se callback zavolal, musím v Pythonu vrátit nějakou hodnotu z provedeného handleru => return True @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): print(arg1 + arg2) return TrueMusím si otevřít v prohlížeči konzoli (já používám chrome) a když zmáčknu tlačítko, dostanu výpis na konzoli[Image] Posílání zprávZasílat eventy jsme již posílali, ale pouze z javascriptu. V Pythonu to vypadá velmi podobně. Používáme 2 funkce  send a  emit mezi nimiž je zásadní rozdíl. Nejprve musíme importovat z knihovny flask-socketio from flask_socketio import send from flask_socketio import emitupravíme funkci na sčítání @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): value = arg1 + arg2 print("{} + {} = {}".format(arg1, arg2, value)) send(value)a přidáme handler v javascriptu abychom mohli tento event zachytit. ... $("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 teď jsem použil handler, který zpracovává event s názvem  message. Není to náhoda. Jde totiž o to, že funkce  send posílá tvz. unnamed event . Tyto eventy se vždy posílají na handler, který zpracovává  message. Narozdíl od funkce  send, funkce  emit posílá již konkrétní event a musíš mu dát název. Zkusme tedy pozměnit náš pří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) }); ...BroadcastingVelmi užitečná funkce je broadcastování, což už z názvu vyplývá, že eventy se budou vysílat na všechny připojené klienty. Dejme tomu, že změníme funkci  emit na broadcastování @socketio.on("sum", namespace="/math") def handle_sum(arg1, arg2): value = arg1 + arg2 print("{} + {} = {}".format(arg1, arg2, value)) emit("result", value, broadcast=False)Nyní, když si otevřeš 2 prohlížeče a v jednom zmáčkneš button, výsledek součtu se ukáže ve všech prohlížečích[Image] note: callbacky se při broadcastování nebudou provádět ZávěrWebsockety mají mnoho využití. Tento článek byl jen úvod a přehled některých základních funkcí. V příštím blogu uděláme malou aplikaci postavenou na websocketech. Máš nějaké dotazy k článku? Napiš ji do komentáře.

Dominik Palla je autorem našeho nového online kurzu Android Developer , ve kterém tě naučí programovat mobilní aplikace pro platformu Android. Dominik má za sebou více než 5letou praxi jako androidový vývojář, podniká v oblasti vývoje softwaru na zakázku, je autorem projektu české hlasové asistentky s umělou inteligencí pro OS Android a je držitelem Java certifikátu od Oraclu. Aktivně se také věnuje tvorbě webových a desktopových aplikací. Jelikož Dominika asi neznáš, vyzpovídali jsme ho a teď ti přinášíme tento rozhovor. Čti a když budeš mít nějaké dotazy na Dominika, neváhej je napsat do komentáře. Kde teď pracuješ? Představ se nám i po pracovní stránce.Momentálně podnikám na vlastní pěst, nedělám to však sám, ale zaměstnávám dalších 5 kolegů. Společně vyvíjíme mobilní aplikace , převážně pro platformu Android, ale sem tam se najde i projekt pro iOS. Klasicky vytváříme také webové stránky nebo aplikace, ke kterým poskytujeme také vlastní hostingové služby. Občas je předmětem našich projektů také vývoj desktopových aplikací. Kromě těchto komerčních zakázek také pracujeme na jednom vlastním projektu - České hlasové asistentce s umělou inteligencí ClaraSys. Projekt je zaměřen především na nevidomé lidi, ale přesto většina našich uživatelů jsou vidící lidi. Jedná se vlastně o aplikaci na způsob Siri pro iOS, ale je kompletně v češtině a má větší spektrum funkcí. Momentálně pracujeme na implementaci inteligentního sluchátka (Smart Ear), které umožňuje vybavit všechny úkoly na mobilním telefonu pomocí rozhovoru s asistentkou přes bluetooth sluchátko be toho, abyste museli mobil vyjmout z kapsy či tašky. Sluchátko bude cca do měsíce hotovo a dostupně v našem eshopu. No a samozřejmě lektorujeme začínající Android programátory.[Dominik Palla - autor online kurzu Android Developer] Co se ti na tvé práci líbí nejvíc?Na mé práci se mi nejvíc líbí svoboda, že můžu vytvořit v podstatě cokoliv, co se mi zlíbí. Když si potřebuji nějakým způsobem usnadnit nebo ozvláštnit svou práci, nemusím si vybírat jen z veřejně dostupných aplikací, ale můžu si vytvořit aplikaci přímo pro své potřeby. Google umožňuje androidovým vývojářům vytvořit v podstatě cokoli. Není třeba sestavovat vlastní hardware, protože to někdo již učinil za vás. Mobilní telefon nebo tablet, případně i chytré hodinky či smart televize mají kompletní výbavu (bluetooth, WiFi, NFC, GPS apod.) a vy sami určíte, jak se daný hardware bude používat (naprogramujete jej tak). Pokud něco vytvořím, mám to pořád všude s sebou a dokonce se o to můžu podělit se svou rodinou nebo přáteli. Co víc si přát?[Dominik pracuje na více Android aplikacích] U nás jsi lektorem online kurzu Android Developer. Jak ses k programování, Androidu a učení dostal?Začínal jsem klasicky jako mnoho jiných programátorů tvorbou webstránek. Stále jsem se učil další a další programovací jazyky, ale mým skutečným snem bylo vytvořit aplikaci na svůj mobilní telefon (jak jinak než na Android). Dvakrát jsem to zkoušel (poprvé cca ve 14 letech a pak v 15ti), ale vždy neúspěšně. Bylo to na mě velmi obtížné a nerozuměl jsem tomu. Vždy jsem to nakonec odložil a začal se učit jiný jazyk. Problém při mých začátcích s Android programováním byl iv tom, že v té době neexistoval téměř žádný český návod, vše bylo v angličtině, se kterou jsem měl trochu problémy. Na třetí pokus asi v 16 letech se mi podařilo záhadné androidové programování konečně přelomiž. Bylo to také tím, že jsem se zdokonalil v angličtině a že jsem už znal jiné programovací jazyky. Na začátcích je nejhorší to, že začínající programátor se nemá koho zeptat, když řeší nějaké problémy ve svých začátcích. Jednou jsem byl dokonce tak zoufalý, že jsem kontaktoval jednoho českého vývojáře, jestli by mi nepomohl, že pro něj je to otázka 30 minut. Zaptal si za tuto radu 10 tisíc ČK a tak jsem raději odpověď na svůj problém řešil sám. Ze začátku to trvalo, problémy jsem řešil pomocí webů jako Stack Overflow jako asi většina programátorů. Nejprve jsem dělal věci jen proto, že to tak prostě mělo být, ale nepochopil jsem proč, nikdo mi to nevysvětlil. Proto si myslím, že mít člověka, na kterého se člověk může obrátit při svých problémech v začátcích (ideálně v jazyce, kterému dobře rozumí), je docela důležité. To nabízím právě účastníkům svého kurzu. že jsem kontaktoval jednoho českého vývojáře, jestli by mi nepomohl, že pro něj je to otázka 30 minut. Zaptal si za tuto radu 10 tisíc ČK a tak jsem raději odpověď na svůj problém řešil sám. Ze začátku to trvalo, problémy jsem řešil pomocí webů jako Stack Overflow jako asi většina programátorů. Nejprve jsem dělal věci jen proto, že to tak prostě mělo být, ale nepochopil jsem proč, nikdo mi to nevysvětlil. Proto si myslím, že mít člověka, na kterého se člověk může obrátit při svých problémech v začátcích (ideálně v jazyce, kterému dobře rozumí), je docela důležité. To nabízím právě účastníkům svého kurzu. že jsem kontaktoval jednoho českého vývojáře, jestli by mi nepomohl, že pro něj je to otázka 30 minut. Zaptal si za tuto radu 10 tisíc ČK a tak jsem raději odpověď na svůj problém řešil sám. Ze začátku to trvalo, problémy jsem řešil pomocí webů jako Stack Overflow jako asi většina programátorů. Nejprve jsem dělal věci jen proto, že to tak prostě mělo být, ale nepochopil jsem proč, nikdo mi to nevysvětlil. Proto si myslím, že mít člověka, na kterého se člověk může obrátit při svých problémech v začátcích (ideálně v jazyce, kterému dobře rozumí), je docela důležité. To nabízím právě účastníkům svého kurzu. problémy jsem řešil pomocí webů jako Stack Overflow jako asi většina programátorů. Nejprve jsem dělal věci jen proto, že to tak prostě mělo být, ale nepochopil jsem proč, nikdo mi to nevysvětlil. Proto si myslím, že mít člověka, na kterého se člověk může obrátit při svých problémech v začátcích (ideálně v jazyce, kterému dobře rozumí), je docela důležité. To nabízím právě účastníkům svého kurzu. problémy jsem řešil pomocí webů jako Stack Overflow jako asi většina programátorů. Nejprve jsem dělal věci jen proto, že to tak prostě mělo být, ale nepochopil jsem proč, nikdo mi to nevysvětlil. Proto si myslím, že mít člověka, na kterého se člověk může obrátit při svých problémech v začátcích (ideálně v jazyce, kterému dobře rozumí), je docela důležité. To nabízím právě účastníkům svého kurzu. Co všechno může dát zmiňovaný online kurz tomu, kdo se rozhodne jej absolvovat?Určitě získá potřebné základy, na kterých se dá dále stavět. V rámci kurzu přebereme všechny nejpoužívanější widgety, jako jsou Buttony, CheckBoxy, EditTexty, TextViewy atp. Vždy si ukážeme na praktickém příkladu jejich použití. Další část kurzu je zaměřena na funkční prvky aplikací. Zde si probereme životní cyklus aplikací, naučíme se obsluhovat různé události a dělat nejčastěji prováděné akce. Úplně v poslední části kurzu si vyrobíme vlastní webový prohlížeč. V rámci tohoto kurzu se příliš nebudeme soustředit na grafickou stránku aplikací, nejprve je totiž třeba pochopit princip a poté je možno designovat. Účastníky kurzu určitě potěší sekce Publikace aplikace na Google Play, kde se podíváme na to, jakým způsobem je možné publikovat vaši aplikaci. Po absolvování kurzu budou účastníci schopni vytvořit si jednoduchou až mírně složitou androidovou aplikaci a většinu věcí, kterou nebudou vědět, si dokážou sami aktivně vyhledat na internetu. Pokud se ale přesto vyskytne nějaký problém, mohou mě kontaktovat a rád poradím. Pro pokročilejší vývojáře připravujeme pokračování v podobě druhého online kurzu pro tvorbu Android aplikací. Sleduješ i konkurenci, aktuální trendy, inovace? Jak jsi na tom v tomto směru?Nové trendy samozřejmě sleduji, v podstatě všechny je určuje společnost Google. Každou aplikaci, kterou vyvíjím, musím vytvořit tak, aby byla kompatibilní s co nejvíce zařízeními a to včetně těch naprosto nejnovějších. Google rád přidává nové věci, které je třeba se za chodu naučit, ale které jsou také velmi efektivní nebo v některých případech i nevyhnutelné. Příkladem mohou být nové adaptive icons v Androidu 8 nebo odlišný způsob tvorby notifikací a časování událostí napříč různými verzemi Androidu. Dnes je hodně pracovních nabídek v oblasti programování a tvorby mobilních aplikací. Vnímáš to tak i ty?Ano, být vývojářem mobilních aplikací je momentálně „cool“. Pracovních pozic je mnoho a podle mého názoru budou přibývat, zvláště v dnešní době, kdy se vše automatizuje. Je tato práce dobře zaplacena? :)To tedy je, průměrný plat programátora v ČR je kolem 40 000 Kč. To platí, když jste zaměstnanec v nějaké firmě. Pokud vytvoříte nějaký zajímavý projekt nebo aplikaci, můžete se dostat na úplně jinou částku. Mnoho mladých lidí vydělalo pěkné peníze tak, že vytvořily aplikaci, kterou od nich koupila nějaká velká firma (typu Facebook, Google). Je na Slovensku a v Čechách podle tebe dost kvalifikovaných lidí právě na tyto vývojářské pozice?Podle mě je jich spíše nedostatek. Mnoho lidí dnes vyhledává spíše práci v zahraničí, je to finančně lukrativnější. V Čechách a myslím, že i na Slovensku je poptávka po kvalitních programátorech vysoká. Stále někde vidím inzeráty, kde se různé firmy snaží najít programátory a to klidně i bez praxe s tím, že si je sami vychovají a zaučí. Co byste poradili všem, kdo nemají žádné zkušenosti s programováním a tvorbou mobilních aplikací, ale chtěli by nějak začít?Takovým lidem vždy radím, aby začali s něčím jednodušším. s webovými stránkami. Další krok se odvíjí od cílů daněhé člověka. Pokud je vaším cílem stát se vývojářem androidových aplikací, vaším dalším krokem by měla být Java. Hned poté se na vývoj Android aplikací můžete vrhnout. Doporučuji nějaký kurz na základy Java, postačovat by měl i online kurz zde na Learn2Code , který je dokonce zcela zdarma. A ještě nám prozraď tvé plány do budoucnosti.Mým plánem do budoucna je posunout se zase o krok, nebo spíše o skok ;), projekt ClaraSys, své podnikání povýšit na etablovanou firmu, no a samozřejmě vytvořit pokročilý kurz Android Developer 2 zde na Learn2Code .

Po úspěšném loňském nultém ročníku soutěže RECfruit přišel ještě úspěšnější první ročník, který s sebou přinesl spoustu nových video talentů. Oproti loňskému roku nevzrostl jen počet videí, ale i jejich kvalita. Odborná porota složená z profesionálů z praxe měla těžký úkol, ale tři nejlepší videa nakonec úspěšně vybrala. Vysoká úroveň a originalita soutěžních příspěvků pomohla organizátorům k rozhodnutí udělit i letos speciální cenu a cenu ContentFruiter . Velké poděkování patří odborné porotě i partnerům soutěže RECfruit. Bez nich by nebylo možné dostatečně ocenit nápady, snahu, věnovaný čas a odvahu soutěžících, podpořit jejich rozvoj a motivovat je k další práci videomakerů. Výsledky prvního ročníku Bronzová příčka Třetí místo obsadil David Bartoš se svým videem Právě teď . Ukazuje potřebu vychutnat si život v přítomnosti. Svou práci popsal slovy: „Myšlenka videa je být v přítomnosti a nacházet potěšení v přítomném okamžiku. I když nás stále ženou nějaké povinnosti a deadliny, je třeba si najít čas a vychutnat si ho.“ Stříbrná příčka Na druhém místě se umístilo video s názvem Lovec , které do soutěže poslal 19-letý Košičan Šimon Šebo . Video s poutavou myšlenkou „kradení duší“ zanechává v příjemci silnou emoci. Překvapením Šimonova videa byly vynikající herecké výkony dvou malých dívek, pěkné záběry a skvělá práce se zvukem. „Video, které začíná jako dětská pohádka a končí jako horor.“ Takový dojem vzbudilo zpracování v organizátorech soutěže. Nejednoznačný konec videa ve vás zaručeně vyvolá husí kůži. Vítěz První místo v soutěži RECfruit získalo video s názvem Again , ve kterém si 18letý Tomáš Biely z obce Hrochoť velmi originálně pohrál s myšlenkou času. V černobílém videu je hlavní hrdina zachycen v jakési časové smyčce. Poutavé zpracování porotu natolik oslovilo, že vyhrálo se značným bodovým náskokem. Tomáš své video popsal těmito slovy: „Again je krátký hraný film, který zachycuje nadpřirozenou událost související s časovým paradoxem. Celý děj se odehrává v jistém momentě, ve kterém je hlavní hrdina „uvězněn“, proto tedy Právě včas.“ Organizátor opět přidal další motivační cenySpeciální cena Organizátoři se rozhodli udělit speciální cenu videu, které natočil 17letý Patrik Hrabovec z Bratislavy. Své video nazval podle tématu letošního ročníku, a to Právě včas . Při hodnocení videí ale bylo známo pod názvem Smrťák . Patrikovo video si vybojovalo speciální cenu kvůli své odvaze pohrát si s tématem smrti humorně, ale také díky odlišnosti od ostatních videí. Letos takříkajíc „vyčuhovalo z davu“. Krátkou komedii o konkurzu na smrtku geniálně zakončil titulky, ve kterých hlavní aktér tančí se svým „vraždícím“ nástrojem. Speciální cena je udělena také jako povzbuzení nebát se začít as odhodláním experimentovat. Cena ContentFruiter Cenou ContentFruiter se organizátoři rozhodli ocenit přínos Tomáše Bílého . Ten předvedl své mistrovství ve videu Again. Tuto cenu organizátoři udělují za mimořádné dílo. V tom letošním je to za originalitu, za odvahu podívat se na věci jinak, za osobité uchopení atmosféry, podání, ale i za vtažení do děje od začátku až do konce. V soutěži se ocitlo několik videí, které si zaslouží pozornost. Bohužel ne všechny se dají ocenit. Zmiňovaná vítězná videa, ale i shortlist finalistů si však můžete prohlédnout na recfruit.sk . Vítězové získávají zajímavé ceny, mezi nimiž nesmí chybět online kurzy od Learn2Code .