Náš blog

Tak. Rozhodl ses naučit programovat (na learn2code jsi správně!). Je jedno, jestli chceš být Web Developer (FrontEnd, BackEnd), chceš se vzdělávat v konkrétním jazyce (PHP, JavaScript, Java, C#), nebo ses ještě nerozhodl, a chceš se jen naučit programovat. I když kniha má své kouzlo, můžeš ji číst i elektronicky, s videem to však jde nejrychleji. Tvoji rodiče si při pohledu na Tebe možná myslí, že mrháš časem, Ty však víš, že investuješ do sebe. Správně! Nad kurzy můžeš strávit dlouhé hodiny. Některé z nich mají i více modulů. Každý má však i svůj konec. Záměr autora kurzu přece nebyl získat sledovanost pro jeho videa, ale chtěl tě něco naučit. Možná ses už ocitl v tom začarovaném kruhu, kdy po ukončení jednoho kurzu hledáš hned další, který tě posune na vyšší úroveň. A pak další a další.. Na vyšší úroveň však už tutoriály a přepisování kódu z obrazovky nestačí. Ani jednoduché zadání lektorů z video kurzů nejsou dostačující. Na vyšší úroveň je třeba praxe, je třeba tvořit, pracovat na projektech, vytvářet portfolio.[Pokud se chceš opravdu posunout v programování vpřed, pusti se do zajímavého projektu.] Portfolio programátoraV zajímavém CV nemusí být mnoho projektů. Ten, kdo ho bude číst ví, jestli Tvé portfolio obsahuje zajímavé projekty, kde ses setkal s nějakými výzvami. Při absolvování kurzů si možná vytvořil jednoduchou aplikaci pro správu poznámek v Markdown formátu. Nebo sociální síť, Twitter podle tvé chuti. Všechno jsou to však projekty, které každý zná a ví, že najdeš kopec zdrojů jako takovou aplikaci napsat a tvorba takového projektu byla jen jakýmsi light fitness pro tvou hlavu. Nejdůležitější na tom však je, že ty projekty nejsou tvé. Tvůj projekt přece začíná prázdnou složkou, možná vytvořením index.html souboru, pokračuje nekonečným Google hledáním řešení tvých front-end nebo back-end problémů, implementacemi tvých vylepšení, tvých řešení, testů a refactoringu tvého kódu. V repozitáři vidět, jak dlouho jsi na projektu pracoval a jak se projekt vyvíjel. Při práci na projektech nestojíš na jednom místě, ale tvoříš, učíš se a rosteš.[Při práci na projektech nestojíš na jednom místě, ale tvoříš, učíš se a rosteš.] Na čem tedy začít makat?Každý programátor si dobré nápady na aplikace chrání. Návštěva programátorského fóra s otázkou typu “Nemáte náhodou nápad na nějaký zajímavý projekt?” bude spíše cílem posměchu než zdrojem nápadů pro tvé projekty. Nezoufej, mám pro Tebe několik rad, jak svůj mozek nenechat oddychovat příliš dlouho. Projekty jsem nevymyslel sám, většinou jsou to projekty inspirované stávajícími aplikacemi nebo všeobecně známá zadání. Přidal jsem k nim však také odkazy na dokumentaci, aby si netrávil čas hledáním kde a jak začít. Některé projekty možná nekorespondují s tvojí ideovou představou a mohou být méně zajímavé, když se však rozhodneš na něm pracovat získáš hned několik výhod: • Nestojíš na jednom místě, ale tvoříš, učíš se, rosteš, • setkáváš se s problémy (věř mi, bude jich čím dál tím méně), na které hledáš řešení, • objevuješ nové způsoby řešení problémů, tvoje stará řešení už nestačí, nebo jsou neefektivní. Level 1 - jednoduché projektyLunch picker • Taková appka již existuje, ale udělej vlastní verzi. Podstata je, že vždy když se neumíš rozhodnout, kam s kámoši půjdeš na pivo, nech to na výpočetní sílu. • Zadanie môže mať dve úrovne: První úroveň je, že databázi míst na „zábavu“ si vytvoříš sám a appka náhodně vybere některou z nich. Druhá úroveň by byla, pokud použiješ některé stávající API (Google Reviews), které tě umí lokalizovat a databázi získáš odtamtud. Collection tracker • Publikuj svou sbírku "čehokoli" ve formě katalogu. Promysli strukturu každé položky, zkus je kategorizovat, implementovat vyhledávání. Jednoduchý projektík o něčem, co tě skutečně baví. • Zadání může mít dvě úrovně: První ve formě jednoduché MVC aplikáce s Bootstrapom, napsaná v Laraveli nebo RubyOnRails. Větší skiller si může troufnout navrhnout API a design implementovat v některé JS library - VueJS, React.  Spoiler blocker pro články • Znáš to – píšeš recenzi některého oblíbeného filmu nebo knihy a nechceš čtenáře tvého textu nepříjemně překvapit vyzrazením děje, nebo klíčové informace. Podobně jako fungují "Zobrazit více" odkazy, můžeš takovou informaci ukrýt i pod "Spoiler alert" odkaz. Spoiler v textu můžeš oddělit pomocí data atributu pro tvůj <p> element: <p data-spoiler="true">Spoiler text...</p>. • Zadání může mít dvě úrovně: První ve formě jednoduchého inline javascriptu, který spustíš někde na konci svého textu pomocí <script> tagu. Druhá úroveň ve formě malé knihovny s využitím Module Pattern, kterou může použít ve svém Wordpressu kdokoli. Tax forecaster • I když politici se nás snaží přesvědčit, že si zasloužíme jistoty, jedinou jistotou v životě jsou daně. Navrhni nějakou jednoduchou appku, která bude sbírat částky tvých freelance faktur na základě vzorce, který zjistíš online (a naučíš se přitom i proč platíš tolik na daních). • Zadání může mít dvě úrovně: První úroveň je samotný jednoduchý výpočet – zadáš číslo a dostaneš hodnotu, kterou zaplatíš státu. Druhou úrovní může být databáze s historií tvých FA a implementace grafů, kde můžeš s pomocí knihovny D3.js vylíčit pěkné reporty, kolik jsi vydělal a jak se tvůj výdělek vyvíjel. Pokud tě vystrašila dokumentace D3.js, můžeš se zkusit pohrabat v knihovnách, které používání D3js zjednodušují. FlashCard generator • Pokud jsi ve stádiu učení (co bys měl být neustále) a snažíš se zapamatovat si některé důležité informace, koncepty nebo cokoli, osvědčená technika pamatování si věcí jsou FlashCards. Navrhni appku, která si z databáze nebo JSON objektu vybere pole dvojic, kde prvním prvkem dvojice bude nějaký stručný popis a druhým prvkem bude informace, kterou si máš zapamatovat. Zde je inspirace. • Zadání může mít dvě úrovně: První je implementace, jakou použili v ThoughtBot – tedy informace, kterou se snažíš naučit se jen objeví pod heslem. Druhou úrovní může být využití CSS pro zajímavou animaci, aby to vizuálně vypadalo jako opravdové „otočení karty“. Level 2 - středně náročné projektyBring your umbrella • Pokud nestíháš ráno sledovat počasí, automatizuj to. Napiš appku (nejvíce se asi hodí mobilní appka, ale užitečná může být i webová aplikace), která tě lokalizuje as využitím API ti připomene, aby sis nezapomněl vzít sebou deštník - v okolí tvé lokality bude totiž pršet. Webová appka ti může poslat e-mail oznámení. • Zadání může mít dvě úrovně: První může být aplikace bez grafického rozhraní. Druhou může být plnohodnotná weather appka přizpůsobená tvým potřebám a grafickým nárokům. Music suggestion app • Spotify má také své API. To můžeš použít k vytvoření seznamu skladeb, který budeš tvořit na základě poslouchaných skladeb, jejich žánru a jiných dostupných dat. Takhle získáš data o skladbě, kterou uživatel právě poslouchá. Tu je dokumentace, jak pracovat s playlistem. Expense tracker • Ve formě mobilní appky nebo webové aplikace můžeš vytvořit také svůj tracker příjmů a výdajů. Jejich kategorizace a kreslení grafů by mělo být samozřejmostí. Pokud se ti podaří vyřešit problém manuálního zadávání bločků, dej mi vědět – do takové aplikace rád zainvestuji. V Datamolino už vědí jak na to. • Největší challenge u tohoto projektu je asi UI/UX – aplikace by se mohla učit mé zvyky a inteligentně mi podsouvat data (kategorizaci, tagy) podle historie mých nákupů při vytváření jednotlivých položek. Na základě těchto tagů a kategorií mi oznámit, kde bych mohl příště ušetřit. Downtime tracker • Pokud máš oblíbený web, nebo plánuješ několik svých projektů, můžeš testovat, jestli náhodou tvé aplikace nemají nějaký problém. Jednoduchým scriptem přistoupíš na URL své aplikace a pokud skript nevrátí HTTP Response 200, tak tě tracker notifikuje emailem, že se něco děje. • Zadání může mít dvě úrovně: První úrovní může být notifikace emailem. Druhou úrovní může být notifikace pomocí SMS brány (Twilio), nebo web hook do tvého Slacku - pokud používáš slack. Level 3 - náročnější projektySlack bot • Znáš-li Slack a inspiruje tě automatizace, programování botů je nyní in. Některé vývojářské týmy denně absolvují "standup" - odpoví na jednoduché otázky týkající se aktuálního projektu/zadání (na čem pracují, v jakém jsou stádiu, zda se na něčem zdrželi a podobně). S pomocí Slack API můžeš vytvořit jednoduchého bota, který kontaktuje vývojáře z tvého týmu a zeptá se jich pár otázek. Jejich odpovědi můžeš sesbírat a vyhodnotit v jedné zprávě, kterou odešleš do #dev kanálu. Microlearning app • Denně bys měl věnovat nějaký čas svému vzdělávání – abys jako programátor rostl. Pokud se učíš například React nebo VueJS - můžeš zkusit použít (nebo napsat vlastní) web scrapper a získat tak jednotlivé sekce dokumentace. Denně ti tvoje microlearning aplikace může poslat jednu sekci/stránku z této dokumentace e-mailem ke studiu. Web scraper • Najdi svůj oblíbený e-shop a zkus vytvořit vlastní databázi jeho produktů, kategorií spolu s obrázky. Web scraping je zajímavým a ne jednoduchým tématem pro programátory, protože ke každému webu, který chceme scrapovat musíme přistupovat individuálně. Hint: Před tím, než se pustíš do scrapování některé domény, zkontroluj v nazev-domeny.cz/robots.txt, zda náhodou doména nemá blokovaných některých botů. Quiz Maker • Pokud se nudíš, můžeš přispět ik efektivitě našeho školství. Když jsem učil já, učitelé používali Hot Potatoes jako jejich testovací platformu. Nebo vytištěné testy s kolonkami. Vstupem do tvé quiz platformy může být JSON, který bude obsahovat vhodně zvolenou strukturu testovacích otázek, možných odpovědí a označení správné odpovědi. • Zadání může mít tři úrovně: První může být vygenerování testu z holého .json souboru. Druhou může být vytvoření administračního rozhraní, kde si testující dotazy a možné odpovědi vykliká ve formuláři. Třetí úrovní může být implementace různého typu testovací otázky (jedna správná odpověď, více správných odpovědí, dopsání správné odpovědi, seřazení do správného pořadí, vytvoření správných párů, ...) Browser extension • Nastuduj jak pracují browser pluginy a zvýš svou produktivitu blogováním distraktorů. Inspirací ti může být BlockSite – výborný extension pro blokování stránek. Blokování stránek však nemusí být jediný tip na doplněk do prohlížeče. Doplňky jsou fajn pro zvýšení produktivity, tedy různé poznámkové doplňky, časovače (pomodoro), pořízení snímku z aktuální stránky a leccos možné. Programátorské výzvy - algoritmické úkolyPokud nehledáš nápad na projekt, ale raději by ses zdokonalil v řešení algoritmických úkolů, mám tu něco i pro Tebe: 1. Advent of code • Adventní kalendář programátora (každý rok obsahuje nová zadání). Obsahuje 25 zadání orientovaných na procvičování algoritmického myšlení. Ideální pro ranní probuzení mozku, některé úkoly však mohou zabrat více času. Součástí je i leaderboard, tam se já raději ale nedívám. • Zadání můžeš řešit v kterémkoli jazyce 2. Project Euler • Podobně jako Advent of Code, i toto je sbírka zadání, která jsou však už jen archivem. To ovšem neznamená, že neobsahuje dostatek zadání - je jich tam téměř 650. Při každém zadání je uveden i počet lidí, kteří zadání vyřešili. • Zadání můžeš řešit v kterémkoli jazyce 3. Daily Coding Problem • Toto je mailinglist, který ti každý den pošle jeden programátorský problém, který můžeš rozlousknout. Problémy z této banky pocházejí z pracovních pohovorů ve firmách, jako jsou Google, AirBnB, Facebook, Apple a různé jiné. Jejich obtížnost je proto někdy dosti vysoká. Pokud se ale připravuješ na pracovní pohovor, tyto úkoly ti mohou pomoci. • Nevýhodou je, že k řešením se dostaneš až když si je předplatíš. Abychom to shrnuli. Hodnota každého programátora se ukrývá v jeho portfoliu. Jsou to právě tvé vlastní projekty, které tě budou reprezentovat na pohovoru, které tě odliší od konkurence. V článku jsme ti poskytli tipy na zajímavé projekty, které obohatí tvé CV, ale především posunou tě dál, postaví před nové výzvy a překážky. A to jako dobrý programátor určitě potřebuješ.

JPA je java persistence api specifikace. K tomu, abys mohl používat JPA ve skutečné aplikaci, potřebuješ implementaci JPA. Buď použiješ servery, které již nabízejí implementaci JPA, jako například GlassFish, nebo použiješ implementaci, kterou ti poskytuje framework Hibernate nebo EclipseLink. Pokud používáme JPA standardy, tak je v budoucnu úplně jedno, jakou implementaci JPA budeme používat. Při programování budeme používat JPA anotace, které pocházejí z balíku javax.persistence. V budoucnu můžeš nasadit aplikaci na GlassFish, který zná javax.persistence a umí s tím pracovat nebo na Tomcat s použitím Hibernate, který také zná javax.persistence a umí s tím pracovat. Co je Persistence?Pokud vytvoříš ledajaký jednoduchý objekt, co se stane? Například objekt Adresa? Vytvoří se v haldě – v paměti. Objekt může mít nasetována nějaká data – informace. Pokud se ale ztratí reference v javovském kódu na tento objekt v haldě - tak se smaže. Pokud si chceme uchovat tyto informace, tak je můžeme uložit do databáze a nejlépe, aby po vytažení z databáze měla tato data stejnou formu – tedy formu objektu Adresa. Tomu se říká, že persistujeme (uchováme stálost) objekt do databáze. Jako by tento objekt existoval i mimo java programu. Tento objekt se uchová v úložišti a znovu se vytvoří, bude-li třeba. Co je ORM?Klasické databáze jako Oracle, MySql a podobně jsou relační databáze, které mají data uložena ve formě tabulek. V jevu ukládáme data ve formě objektů, v databázi ve formě tabulek. Ale co mají podobné? V relační databázi máme sloupce, které mají názvy a v řádcích máme hodnoty. Něco jako klíč hodnota – totéž platí i pro objekty v jevu – tam máme název proměnné a hodnotu v ní uloženou. Tady přichází pod ruku ORM – tedy object relational mapping. Je to něco jako objektově relační mapování. My naše java objekty namapujeme na tabulky relační databáze. Abychom věděli, že toto pole v javovském objektu patří do tohoto sloupce.  Objekty v jevu jsou mezi sebou propojeny pomocí uložení reference na daný objekt. Například člověk má field Adresa, kde je uložena reference na objekt Adresa. Relační tabulky mají mezi sebou také vazby. Buď máme v tabulce pro člověka sloupec adresa, kde bude uložen identifikátor adresy a na základě tohoto identifikátoru najdeme danou adresu. Nebo existuje speciální tabulka, kde budou dva sloupce jeden pro identifikátor adresy a druhý pro identifikátor člověka. My pak umíme najít, jaké adresy má člověk nastaveno, nebo pro jakého člověka je nastavena daná adresa. [Image] Problém s JDBC přístupem – výhoda ORMV kurzu Java pro pokročilé , pokud jsi tento kurz viděl, jsme si ukazovali přístup k databázi přes JDBC. Co jsme udělali? Otevřeli jsme konekci na databázi, napsali jsme sql příkaz, který jsme následně poslali do databáze k provedení. Databáze nám vrátila výsledek ve formě result setu. Představ si, že máš jen 5 až 10 tabulek. Nad každou tabulkou máš například 4 různé sql příkazy - to máme přibližně 20 - 40 sql příkazů. Pokud se ti stane, že musíš změnit databázi – například změníš název sloupce v tabulce? Co musíš udělat? Musíš přepsat název tohoto sloupce na xy místech – na 20 až 40 místech – a to jsme jen v malé aplikaci – co kdyby to bylo na 100 místech?. Byl by v tom nepořádek a mohly by nastat problémy. Pokud ale použijeme ORM, tak v jevu pracujeme s naším kódem, tak jako běžně. Vytvoříme si objekty typu Clovek, nastavíme mu nějaké hodnoty. Dále si vytvoříme kolekci adres pro daného člověka. Nakonec v ORM frameworku řekneme jen persistní mi tento objekt. ORM se pak postará o veškeré uložení těchto objektů do databáze na základě mapování, které mu poskytneme. Clovek clovek = new Clovek(); clovek.setMeno("Jaro"); clovek.setPriezvisko("Beno"); Adresa adresa1 = new Adresa(); adresa1.setUlica("Nejaka 5"); adresa1.setPSC("94404"); Adresa adresa2 = new Adresa(); adresa2 = new Adresa(); adresa2.setUlica("Nejaka 5"); adresa2.setPSC("94404"); List<Adresa> adresaList = Arrays.asList(adresa1, adresa2); clovek.setAdresaList(adresaList); orm.persist(clovek); Pokud bychom nepoužili ORM, sami bychom museli napsat metodu, která nám otevře konekci na databázi, museli bychom napsat INSERT SQL příkaz pro člověka a poté i pro jeho adresy a museli bychom zajistit, abychom nastavili všude data tam, kde mají být a musíme se postarat io propojení mezi těmito dvěma objekty. Pokud ale použijeme ORM, tak se nemusíme starat o tento balast kódu, ale soustředit se zejména na to, co prodává a to je business logika aplikace. Nevýhody JDBC přístupu jsou tedy, že máme příliš mnoho SQL příkazů, velmi mnoho kopie kódu, ručně se musíme postarat o nastavení dat do správných sloupců. Výhodou ORM je, že nemusíme dělat tyto věci z předchozí věty. ORM nám umožní používat java objekty k reprezentaci relační databáze. ORM se nám postará io propojení závislostí. ORM spojí výhody relační databáze a objektového modelu v jevu plus schová veškerou komplexitu SQL příkazů. Co je Hibernate?Hibernate je ORM – object relational mapping framework, který slouží k mapování java objektů na tabulky relačních databází. Java programátoři jsou zvyklí psát kód v objektech, proč tedy potřebují další jazyk – sql – k získání dat z databáze? Hibernate na pozadí sám vytváří sql příkazy nad databází a proto nemusíme psát sql příkazy my. Pokud chceme uložit mapu objektů, například Cloveka, který má Adresu, nebo i více objektů typu Adres, tak nemusíme psát všechny sql příkazy. Stačí, když zavoláme jednoduchou metodu pro uložení objektu do databáze a hibernate se postará o zbytek. Hibernate je také implementace JPA.  [Image] Co je JPA?Zkratka JPA je Java Persistence API. Co to znamená? V jednoduchosti řečeno - je to standard. Poněkud složitěji řečeno – je to specifikace pro OR mapování a je součástí Java EE, ale můžeme ji používat i v Java SE projektech. Některé servery poskytují vlastní implementaci JPA a některé ne – v tom případě použijeme například Hibernate implementaci. Představ si, že celý tvůj kód používá věci z JPA. Nyní je na tobě, kam nasadíš svoji aplikaci. Pokud ji nasadíš na Glassfish nemusíš předělávat svůj kód, který používá JPA – Glassfish ho zná. Pokud svou aplikaci nasadíš na Tomcat, tak mu přihodíš Hibernate, který také zná JPA. Potom tvůj kód bude fungovat všude – neboť používá standardy JPA. Je možné, abychom používali jen Hibernate – tedy bychom nepoužívali nic ze standardů. Žádné anotace z javax.persistence a podobně – to ale nedoporučuji. Ptal jsem seNapadlo mě, že by nebylo od věci zeptat se kolegů developerů, co si myslí o JPA a Hibernatě. Pokud by sis chtěl přečíst jejich názory, ať se líbí – bez cenzury, cituji: Tak toto je náročné téma a navíc složité. JPA resp. ORM obecně (a tedy i Hibernate) jsou vždy složitější, než si uživatelé (tj. vývojáři) uvědomují. Výsledkem jsou často nenápadné chybičky, lazy load exceptions, které vedou k anti-patternům jako je OSIV (open session in view) nebo k výkonovým problémům (n+1 problem). Těchto problémů je typicky o to více, o co složitější je mapování – a přitom právě na řešení složitého mapování bylo ORM vymyšleno. Abychom mohli namapovat doménu do DB. K tomu se často používají i „mimojazykové“ triky jako reflection na private pole, takže objekty jsou implicitně svázány s ORM řešením, i když například. mapování je odděleno do XML namísto anotací, což samo o sobě je také nepraktické. Kromě toho mají obě hlavně implementace dost bugů na to, aby na ně člověk narazil, i když postupuje v souladu se specifikací – stačí jen chtít trosku víc a na nějaký bug určitě narazíte. Takže pak to je kličkování mezi bugy a často komplikovaná možnost vyměnit ORM providera. Co se mi na ORM líbí je lepší mapování typů, možnost customizovat mapování a podobně. Proto používám JPA i na jednoduché mapovačky namísto JDBC. Navíc s JPA používám řadu Querydsl, které je lepší/intuitivnější, než JPA standardní Criteria API. Hibernate používám dlouho ale po pravdě řečeno nikdy jsem se moc nezamýšlel nad výhodami. Zatím jsem neměl výraznější problém, který bych neuměl vyřešit, případně nějak obejít. Plusy : - snadno se provádí mapování do DB s anotacemi i pro začátečníka bez velkých znalostí databáze, zároveň ale bez znalosti DB může být mapování neefektivní - je open source, takže pokud potřebuji, umím podívat zdrojáky jak funguje Minusy : - asociace OneToOne fetch=lazy nefunguje Na používání Hibernate/JPA (celkově ORM vrstvě) se mi líbí : A) Abstrakce od fyzického datového modelu. Vývoj nad doménovým/logickým (entitně-relačním datovým modelem) - blíže k byznys vrstvě. Čili zjednodušené práce s objekty namísto tabulek. B) Možnost využívat různé pokročilejší techniky získávání dat (např. Spring Data JPA, ale také zjednodušující Hibernate Query by example) C) Agnostické od konkrétní databázové technologie (Oracle, MySql, ...) D) Cachování a optimalizace (např. lazy loading) Nevýhody : A) Někdy náročný (až nemožný) performance tuning. B) U některých technologií pomalejší křivka učení. C) I přes používání JPA/Hibernate, je téměř nezbytné, aby developer znal i (native) SQL jazyk a jeho použití. ZávěrPodařilo se ti nahlédnout do problematiky objektově relačního přístupu k databázi a pochopil jsi, co to znamená. Pokud se však chceš dostat ještě o level dál, připravili jsme pro tebe samostatný kurz Java persistence - JPA a Hibernate . Pokud chceš ještě víc, tak klikej:👍 Více o mně:  http://www.jaroslavbeno.cz/   👍 Kurzy (java, git, maven, bootstrap, Asp .Net,):  Learn2Code moje kurzy 👍 Free kurzy:  YouTube kanál JaroslavBeno

Žáci základních škol a prvního stupně osmiletých gymnázií si mohou změřit síly na jedné z nejatraktivnějších slovenských soutěží. Schopnost vymýšlet algoritmy a naprogramovat počítačovou hru dá vašemu dítěti víc než jen nové dovednosti a znalosti. ,,Programování zlepšuje kritické myšlení dítěte. I když se z něj v budoucnu nestane IT odborník, dovednosti nabyté programováním využije v práci i v praktickém životě,“ říká Marián Kristel z Learn2Code, spoluautor soutěže Galaxiáda. Galaxiáda se skládá ze dvou kategoriíTvorba her je soutěž v tvorbě počítačových her, které vytvoří žák jednotlivě nebo v týmu. Tato kategorie je určena pro žáky 2. stupně základních škol a prvních 4 ročníků 8-letých gymnázií. Hry mohou být vytvořeny v libovolném vývojářském prostředí jako Scratch, JavaScript, Unity3D, Game Maker, Python. Žáci mohou svoji hru přihlásit na webe do 14. dubna 2019, následně bude probíhat veřejné i odborné hlasování.[Image]Kategorie Programování v GalaxyCodr se skládá ze dvou kol. V prvním kole (které se uskuteční 20. března 2019) budou žáci soutěžit v deseti programovacích úrovních hry GalaxyCodr přímo na půdě vlastní školy. Do druhého kola se probojuje dvacet nejlepších z celého Slovenska, kteří nejrychleji vyřeší jednotlivá zadání.[Image]Metodik a učitel Ľuboš Jaroš vidí přínos Galaxiády v tom, že soutěž vybízí děti, aby splnily nejen didaktické cíle, ale také si vyzkoušely řešit nepovinné bonusové úrovně. Program Galaxycodr tak v první řadě vzbuzuje v dětech pocit, že si „jen“ hrají hru. ,,Tato hra je útok na mozek,“ i tak projevily nadšení děti, se kterými se GalaxyCodr věnuje dlouhodoběji. ,,Oceňují vizuální atraktivnost prostředí a to, že samotné programování úkolů je prezentováno jako zábava,” pokračuje Jaroš. Autoři nejlepších projektů a nejrychlejší řešitelé úkolů v GalaxyCodr získají digitální vybavení pro sebe a pro školy a čeká na ně zajímavý doprovodný program na slavnostním vyhlášení výsledků v květnu v Žilině. Všechny další informace naleznete na našem webu: www.galaxiada.sk

Rád si v dětství všechno rozebíral, spekuloval a škodolibost hrála v divadle tvých ranních emocí prim? Jsi tady správně. Protože přesně to jsou hlavní rysy testeru. Jen opatrně s tou škodolibostí 😉 Manuální testování není ostuda!Neexistuje nic horšího, než dělat stále to samé dokola. Naštěstí o tom manuální testování není. Ale pěkně postupně. Neznám hezčí pocit v práci (kromě pátečního fajrontu) než když já, člověk, který studoval dojivost krav a hektarový výnos pšenice, nachytá programátora s nějakou chybou. Manuální testování znamená vzít novou část aplikace, usoudit či odpovídá tomu, co si zákazník přál a přitom nachytat programátory. Při testování postupuj stejně jako při boji s mafií. Nejprve jdeš po velkých rybách - chybách, které udělají nejvíce škody, malé si nevšímáš nebo je přeskočíš, protože není čas. Ať naděláš programátorům dost roboty. Pak jdeš po těch menších, designových vychytávkách, protože mají stejnou váhu jako předvčerejší instastory každé druhé makeup artistky. Vymýšlíš, co jsi ještě nevymyslel a jedeš po chodníčcích aplikace, kudy by se normální uživatel nikdy nevydal. Ale Jožo Pročko říkal 20 let dozadu, že nikdy neříkej nikdy. Jako tester to neříkej ani ty. Rozum maká zpočátku víc než ruce, a to je fajn. Fajn to být přestane, když se karta obrátí a nedejbůh, abys musel dvakrát dělat totéž. Nebo 3krát. Nebo 4krát. Nebo furt. Jsi odsouzen k věčnosti regresně testovat celou aplikaci. Protože pokud se změní kód, je třeba to celé proklikat. A v tento moment mozek vypínáš a pracují jen ruce. Vzpomínáš si, když ti jako malému řekli, že pokud se nebudeš učit, budeš kopat kanály? Toto je totéž, akorát sedíš v byznyscentru s dalšími korporátními kopači. Naštěstí tu robotu můžeš přenechat počítači, protože na řadu přichází... Automatizované testování je programování!Nech zase mozek makat a ruce odpočívat. Automatizované testování je o tom, že ty naprogramuješ robota, aby chodil po určité dráze, cestičce v aplikaci a on to bude dělat vždy, když mu přikážeš. Nepředstavuj si robota jako terminátora, který za tebe sedí v kanclu. A ani takhle to nevypadá:[Image] Ty vidíš, že stránka se otevře, ale kliká po ní robot na pozadí, kterého NĚKDO naprogramoval. A tím někým jsi TY. Jsi programátor se vší tou pompou a slávou, píšeš kód např. v JAVĚ a vyvíjíš si vlastní aplikaci, logiku, která testuje software namísto tebe. Ze začátku je to trošku těžkopádné jako startování V3S-ky, ale když tu mašinu jednou rozjedeš, práce ti neúměrně až zázračně klesá. A o tom je automatizované testování. Robotu, která se tobě nechce nenecháš na kolegu, který se vrátil z dovolené. Ani ji nenaučíš masturbovat, aby se udělala sama. (cit. Vtipnější vyhrává 09/1994) Ale přenecháš ji počítači. A on se nesplete, nevynadá ti, nesebere se v 16:00 domů a neonemocní, když polovina kanceláře zalévá zázvor vařící vodou. Nevýhodou však je, že počítač vidí jen tolik, kolik ho ty naučíš. Není inteligentní a nevidí věci v souvislostech. Neumí si něčeho všimnout. Řekneš mu slova František a Lászlo a on se nezasměje. Ani ty se doufám nesměješ. A ještě si dávej pozor, jak píšeš kód, abys ho nemusel po sobě 30x opravovat, pokud se na stránce něco změní. Protože to je také bolest, neustále dohledávat chyby v testech. Pojďme si porovnat manuál a automat. Výhody, nevýhody, kdy které použít.Manuální testování+ hledání nových chyb v aplikaci, exploratory testing + objevení designových přešlapů + rychlá odpověď na stav softwaru + improvizace - nákladné - nevhodné pro regresní testování - časově náročné - nespolehlivé (časový stres, přehlédneš chyby) - jak aplikace roste, rostou i náklady na manuální testování Automatizované testování+ regresní testování (před vydáním do produkce, po každé změně) + rychlé + spolehlivé + práce ti postupně ubývá - vyšší vstupní náklady (dokud spustíš první test) - robot nové chyby nenajde - musíš umět programovat - údržba ZávěrManuální testování nemůže být nahrazeno automatizovaným. Pokud jsi manuální tester, klidně si vydechni. A vydechni si znovu, protože tě umím ulehčit od tortury, kterou ti způsobuje testování po každé jedné změně. Naučím tě programovat robota. Základy programování a automatizovaného testování tě naučím v kurzu s Batmanem: http://bit.ly/batmanKurz Jak psát efektivní kód, umět si postavit Maven projekt, rozběhat jenkins, to tě naučím v tomto kurzu: http://bit.ly/jokerKurz A jak ten kód pěkně zabalit do třpytivého pozlátka, aby mu každý rozuměl tě naučím v kurzu s okurkou: http://bit.ly/cucumberKurz Autorem blogu je Martin "Furby" Škarbala. Když tě zajímá oblast testování softwaru, určitě dej lajk na jeho Facebook stránku.

V prvním kvartálu 2019 pro tebe chystáme několik nových online kurzů. V tomto blogpostu představíme ty nejdůležitější novinky, na které se jistě můžeš těšit. Chystáme něco z programování, designu, ale také střihu videa. Java pro junior programátoryZavršení trilogie kurzů zaměřených na Javu od lektora Jara Beňa. Po online kurzu zdarma Java pro začátečníky jsme se podívali na zoubek Javě pro pokročilé a v tomto třetím Java kurzu se naučíš vše potřebné, abys mohl začít pracovat jako junior Java programátor.[Image] UI design ve SketchiV tomto kurzu navážeme na kurz Desig pro obrazovky a budeme se již detailněji věnovat UI designu v parádní aplikaci Sketch. Zjistíš, co všechno ve Sketchi umíš dělat, jaké má výhody oproti konkurenčním produktům od Adobe, jak navrhneš vlastní web nebo aplikaci a zjistíš, jak efektivně pracovat ve Sketchi.[Image] Linux pro začátečníky IIMůžeš se těšit i na pokračování kurzu Linux pro začátečníky. Pokročilejší techniky a práce v Linuxu už bude pro tebe malina. Plánujeme pro tebe nachystat i další kurz na téma Linux, konkrétně Scriptování v Linuxu.[Image] Spring a Spring BootCílem těchto online kurzů je poskytnout základní přehled o možnostech frameworku Spring, s důrazem na vývoj webových a REST-ful aplikací. Spring je léty odzkoušená a ověřená alternativa k JEE. Poskytuje jednoduchý, ale flexibilní programovací model, který umožňuje efektivně vyvíjet robustní aplikace v Javě. Kurz je ideálním startem pro ty, kteří chtějí začít využívat Spring ve svých projektech.[Image] Adobe Premiere RushAdobe Premiere Rush je cross-device aplikace, pomocí které umíš editovat videa. Pomocí Adobe Rush umíš nahrávat videa, upravovat je, upravovat jejich barvu, nahrávat a upravovat zvuk, přidat animované titulky a publikovat na sociálních sítích. Kromě desktopové verze aplikace je k dispozici také mobilní verze, v kurzu vysvětlíme obojí.[Image] Adobe After EffectsPro začátečníky chystáme online kurz zaměřený na Adobe After Effects, ve kterém tě naučíme efektivně pracovat. Osvojíš si práci s uživatelským prostředím a jeho nástroji, naučíš se animovat text a pracovat s hudbou, ovládáním vrstev a módami prolínání.[Image] Pokud tě zajímají nějaké dotazy na dané kurzy, směle je napiš do komentáře. Budeme vděční i za tipy na kurzy, které by si na Learn2Code chtěl vidět. A pokud chceš nějaký online kurz s námi vytvořit, určitě nás neváhej kontaktovat.   Těšíme se na tebe!

Milanovi učaroval frontend a šel tvrdě za svým cílem. Makal na sobě, vzdělával se, absolvoval několik online kurzů. Šel s kůží na trh a hledal si práci jako frontend programátor a také se mu to podařilo. Aktuálně zařezává v digitální agentuře z Liptovského Mikuláše a dělá to, co ho baví. Přinášíme ti rozhovor s Milanem a věříme, že jeho příběh tě inspiruje. Čti dál. Ahoj Milano, začněme tvou aktuální prací. Co přesně děláš, jaká je tvá pozice?Ahoj, tak že momentálně pracuji na pozici Front-end developer ve firmě Webidentity, ale pomalu se snažím vnořovat do Back-endu, a to tak, že nasazuji šablony do CMS systému drupal, nebo pokud jde o online obchody, tak do systému Prestashop.[Milan Blaško - začínající frontenďák] Jak ses k této pozici dostal?Jelikož před létem jsem skončil v bývalé práci, protože jsem se chtěl posunout zase dál, našel jsem si práci v Bratislavě. No na konci léta jsem objevil nabídku práce ve skupině Webrebeli od firmy Webidentity. Okamžitě jsme se kontaktovali a nakonec jsem tam také začal pracovat. Potěšilo mě to hlavně proto, že jsem mohl zůstat v Liptovském Mikuláši. Máš nějaký vzor, který tě inspiruje? Osobu, která je pro tebe motivátorem?Určitě můžu říct, že vážněji k tvorbě webových stránek mě dovedl Yablko se svým kurzem Webrebel HTML/CSS. Ale také je vzorem i můj šéf Juraj, který ovládá tvorbu a programování stránek na vysoké úrovni. Kde bereš inspiraci pro svou práci? Máš nějaké tipy a hacky, které zaručeně fungují?Inspiraci beru všude po internetu nebo od svých spolupracovníků. Zaručené hacky nemám, protože stále narážím na něco nového, čili nic konkrétního nemám. :D 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 říct, že odkdy pracuji, tak už je toho času méně, teď se spíše učím konkrétní věci které využívám, respektive pokud narazím na nějaký problém tak se to snažím řešit buď se šéfem nebo hledám řešení na internetu. Určitě se v nejbližší době chci více věnovat kurzom JavaScriptu, hlavně novému kurzu VUE.js.[Milan již pracoval na projektech pro několik zajímavých klientů] Čím vším sis musel projít, pokud ses vypracoval na tuto pozici?Musím přiznat, že na začátku to nebylo vůbec jednoduché, protože jsem se programovat učil vedle vysoké školy. Hlavní problém byl, že jsem si chtěl začít přivydělat vedle školy a chtěl jsem to řešit dálkově, ale Frontendistu bez relevantních referencí těžko někde příjmu, natož formou home-office. Nakonec v posledním ročníku se mi podařilo na živnost najít si práci pro jednu firmu z Prahy. Co tě nejvíc baví na tvé práci? Máš nějaký oblíbený task, který děláš nejraději?Nejvíce mě na této práci baví svoboda. Hlavně, že můžu dělat z domu, z chaty nebo v kanclu. Toto bylo pro mě vždy důležité. Ale určitě také různorodost práce. Opravdu, člověk se zde učí projekt za projektem a většinou vždy dělá něco nového, čili ta práce není stále jednotvárná. Ale jinak vždy jsem měl rád čistě Front-end neboli kódování šablon.[Milan ve volném čase rád vaří pivo] 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?Určitě doporučuji začít s kurzmi, ty dají dobrý základ a uvedou do problematiky. Potom hlavně zkoušet psát reálný kód. Mnohdy jsem něčemu nechápal, mnohdy jsem udělal práci špatně, hlavně na začátku, ale člověk se učí na vlastních chybách a čím déle člověk něco dělá, tím více získává zkušeností. Poradil bych i lidem, aby si co nejdříve začali hledat stáže nebo práci, protože člověk se programovat nejvíce naučí při reálné práci, hlavně tam má zkušenější kolegy, kteří určitě vždy rádi pomohou a posunou ho o pořádný kus dál. Co je podle tebe největší výhodou práce v IT odvětví?Jak jsem zmínil výše, především je to svoboda v práci a že vždy člověk dělá něco nového. 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?Ano, bylo to hlavně při kurzech, často jsem si myslel, že jsem asi opravdu hloupý, že mnoho věcí prostě nechápu. Mnohdy jsem to chtěl vzdát. I začátky v zaměstnání byly obtížné, také jsem dělal chyby. Ale po čase se člověk z vlastních chyb učí. Čím víc jsem tvořil webstránky, tím víc jsem všemu začal rozumět. Je to vždy o tom, že člověk se nemůže hned vzdát a musí pořád zkoušet a být vytrvalý v tom, co dělá. Jaké jsou tvé plány do budoucna?Myslím, že jediný plán je zdokonalovat se v tom, co aktuálně dělám. Určitě se chci stát senior Front-end developerem. Všechno ostatní už ukáže čas, čize nic konrétního v plánu nemám :) 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?Určitě pokračovat v tom, co začaly. Učit se postupně věci, nejlépe přejít vše od základů, krok za krokem, neučit se všechno najednou a hlavně nenechat se odradit neúspěchem. Všechno má svůj čas. Mnohdy se mi stalo, že jsem si řekl, že na tohle já hlavu nemám, neumím se to naučit. Začal jsem pracovat, díval jsem si řešení na internetu a co jednou víc se mi to dostavělo do hlavy. Hlavní je setrvat. Pokud máš na Milana nějakou otázku, směle ji napiš do komentáře k článku. Další úspěšné příběhy absolventů Learn2Code kurzů si přečti v dalších článcích na našem blogu.

Od verze 9 bude java vydávána v pravidelných intervalech. Nová java každých 6 měsíců. Takže můžeme očekávat novou funkčnost častěji, ale v menších dávkách. Nejpoužívanější Java dnes je java 8 – vydaná v roce 2014. Java 9 byla poprvé vydána v září 2017, později byly opraveny kritické chyby a lze říci, že taková lepší verze byla vydána v lednu 2018. Java 10 byla vydána v březnu 2018, Java 11 v září 2018. Takže rychlý posun ve verzích, ale ne drastický posun ve funkčnosti. Co je lepší? Najednou a mnohem nebo méně a postupně? Záleží na tom, co děláte. Pokud používáte mnoho rámců a knihoven třetích stran, může být vaše práce ovlivněna po zvýšení tohoto jevu. Prvním milníkem je java 11, která je označena jako LTS, tj. dlouhodobá podpora. Tato verze tohoto jevu bude opravena na dlouhou dobu a bude o ni postaráno v následujících letech. Co to znamená? Že společnosti s větší pravděpodobností přeskočí z jevu 8 dříve na jev 11, protože si budou jisty, že tato java bude v budoucnu opravena –, pokud bude nalezena kritická chyba. V tomto článku se zaměříme hlavně na seznam nových změn. Nebudeme se zabývat jednotlivými změnami podrobně. Budeme to udržovat i v budoucnu. InstalaceNejprve musíte stáhnout a nainstalovat nejnovější fenomén jdk. V době psaní to tak je Java 11. Nastavte proměnnou prostředí JAVA_HOME na nový jev – na kořen, nikoli do složky bin. Poté nastavte cestu k proměnné PATH pouze do složky koše nově nainstalovaného jevu. Spusťte příkazový řádek a zadejte příkaz: java – verze Pokud máte verzi, vše je v pořádku.[Image] Pokud dojde k chybě nebo se zobrazí starší verze, ujistěte se, že v PATH je cesta nového fenoménu nastavena na začátku. Je možné, že v PATH máte také nastaveno C: \ ProgramData \ Oracle \ Java \ javapath. Pokud ano, musí to být za cestou k nejnovějšímu jevu. ModulyV Javě 9 je nejpříznivější změnou projekt Jigsaw –, ale stačí, když si vzpomeneme, že se jedná o divizi modularity – velkého monolitu –, takže celá aplikace v jednom balení do menších buněk – moduly. Moduly pak řeknou, co publikují světu a co požadují pro svou správnou funkčnost. Každý modul obsahuje soubor modul-info.java a alespoň jeden balíček. Module-info.java obsahuje popis závislostí, které modul potřebuje. Každý modul je nezávislý v tom, že pokud obsahuje obrázky nebo konfigurační soubory, modul je spravuje sám. Vše v modulu je pro modul soukromé, pokud neřekneme jinak. Existují 4 typy modulů.Systémové moduly – Java SE a JDK moduly –, pokud si všimnete, jdk nainstalovaný pro novější jev postrádá složku jre. Nyní jsou jmody. Zde máme všechna výchozí nastavení poskytovaná moduly.[Image] Aplikační moduly jsou moduly, které chceme vytvořit, když se rozhodneme, že chceme moduly používat. Automatické moduly je vytvořen, když do modulu cesty přidáme soubory JAR. Název modulu je převzat z názvu souboru. Tyto automatické moduly mají plný přístup ke všem ostatním modulům načteným na cestě. Nepojmenovaný modul = pokud jsou některé třídy nebo soubory jar načteny na cestě –, tyto třídy a soubory jar jsou automaticky přidány do tohoto nejmenovaného modulu. Používá se pro zpětnou kompatibilitu s předchozím starším Javanese kódem. DistribuceModul by měl být zabalen jako jarní soubor – jeden jarní soubor by měl obsahovat maximálně jeden modul. Když provádíme projekt sestavení, musíme být opatrní, abychom každý modul v našem projektu zabalili jako samostatnou pružinu. Základní modulySlíbili jsme, že jdk má novou strukturu, která obsahuje jmoduly. Zde jsou základní moduly. Pokud zadáme příkaz, můžeme tyto moduly uvést pomocí příkazového řádku <b>java --list-modules</b>. [Image] Každý modul, který vytvoříme, použije implicitní modul java.base. Použití dalších modulů bude k dispozici po konfiguraci. Vytvoření moduluModul v podstatě vzniká, pokud definujeme soubor modul-info.java v kořenovém adresáři zdrojového kódu modulu. Tento okamžik pracuje se zdrojovým kódem jako s modulem. Moduly se navzájem nevidí – nemají přístup k sobě navzájem a ke třetímu atd. Podle toho, kolik modulů používáme. Pokud chcete použít něco zvenčí nebo chcete, aby byla viditelná vnitřek vašeho modulu nebo vnitřní čas vašeho modulu, musíte jej definovat. Pojďme mít projekt, ve kterém definujeme nový modul. V modulu máme složku src, do které vložíme veškerý zdrojový kód. Uvnitř definujeme balíček sk.jaro.demo a stále v něm vnější a vnitřní. Vytvoříme jednoduché třídy, které jen něco napíšou na konzoli.[Image] package sk.jaro.demo.external; public class HelloMainModuleExternal { public void doAction() { System.out.println ("Hello main module HelloMainModuleExternal"); } }  package sk.jaro.demo.internal; public class HelloMainModuleInternal { public void doAction() { System.out.println("Hello main module HelloMainModuleInternal"); } } Tyto třídy se liší pouze v názvu a příkazu na konzole. Později nastavíme vnitřní, aby byl viditelný pouze v hlavním modulu. Později nastavíme externí, aby byl viditelný mimo hlavní modul. Vytvořte soubor modul-info.java v src tohoto modulu. Uvnitř souboru je syntaxe, kde klíčovým slovem je nejprve modul, pak název modulu – můžete také použít tečky, a pak jsou zde složené závorky: modul nasmodule { }. Chceme, aby byl externí balíček k dispozici pro další moduly –, které budou nastaveny pro export. module main { exports sk.jaro.demo.external; }Nyní vytvoříme nový modul ve stejném projektu s názvem utils. Uvnitř budeme mít jednu třídu, ve které se pokusíme použít třídu HelloMainModuleExternal z hlavního modulu.[Image] Module-info.java musí nyní obsahovat, že v tomto modulu požadujeme hlavní modul –, protože z tohoto modulu používáme funkčnost. module utils { requires main; } Nyní můžeme použít třídy, které byly exportovány z hlavního modulu: package sk.jaro.demo; import sk.jaro.demo.external.HelloMainModuleExternal; public class UseSomethingFromMainModule { public static void main(String[] args) { HelloMainModuleExternal helloMainModuleExternal = new HelloMainModuleExternal(); helloMainModuleExternal.doAction(); } }ZávěrNakonec si s tím můžete hrát hned teď. Zkuste použít třídu, která není exportována z hlavního modulu. O modulech by bylo možné napsat a mluvit o nich, ale doufám, že pochopíte princip modularizace. Během studií na toto téma mám několik otázek, na které jsem dosud neodpověděl. Například: Maven s java modularizací? Rámce a modularizace? Pokud se vám tento článek líbil, napište něco do komentářů, budu šťastný. Zajímá vás Java? Vyzkoušejte jeden z kurzů na toto téma https://skillmea.sk. Pokud se o mně chcete dozvědět více, sledujte můj web www.jaroslavbeno.sk. jaro Zdrojové kódy ke stažení.

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.