Videa
Natočil jsem a publikoval další videa (česky), týkající se programování s využitím Ionicu.
Od čísla 19 jsem snížil rozlišení videí z původních 1920x1080 na 1280x720 - zejména kvůli větší čitelnosti.
Celý seriál je dostupný na Youtube
neděle 16. srpna 2015
pátek 14. srpna 2015
Boolean lab - video
Boolean lab
Jak jsem psal v minulém příspěvku, naprogramoval jsem mobilní aplikaci Boolean lab - laboratoř s logickými funkcemi.
Tady je krátké video o aplikaci:
čtvrtek 13. srpna 2015
Boolean lab - android aplikace (logické obvody)
Boolean lab
Asi před rokem jsem publikoval svou aplikaci Boolean lab. Teď jsem ji kompletně přepracoval a zveřejnil ji jako verzi 2.0
Co je změněno nebo nové:
1) Kompletní změna ovládání
2) Funguje tlačítko zpět (back button)
3) K původním asynchr. hradlům RS a JK jsem přidal synchronní hradla RS, JK, D
4) Obsahuje 24 interaktivních zapojení logických obvodů
5) Log. hodnoty lze zobrazit jako 1-0, H-L nebo T-F
6) Log. funkci lze zobrazit jako F nebo Y
7) Hodinový signál lze zobrazit jako T, C nebo E
Boolean lab je malá laboratoř v mobilu či tabletu. Obsahuje základní logická hradla (log. členy), základní logické operátory a základní logické funkce.
Menu vypadá takhle:
Všechno je interaktivní - jakákoli změna na vstupu se automaticky a okamžitě promítne na výstup.
¨
Obsahuje široké možnosti nastavení, např. logické hodnoty jako H-L, 1-0, T-F, logické funkce jako F nebo Y, hodinový impuls jako T, C nebo E.
Aplikace je lokalizována do čtyř jazyků: angličtina, španělština, čeština, portugalština.
Samozřejmě se jedná o hybridní aplikaci (HTML+CSS+JS), která je převedena do podoby .apk. Pro její naprogramování jsem použil výborný framework (knihovnu) Ionic.
Boolean lab je dostupná na Google Play
sobota 8. srpna 2015
AngularJS: provázání HTML s JS (two way data binding)
Provázání HTML s JS
Angular umí fantastickou věc: oboustranné provázání (two way data binding) mezi HTML a JS. Celá krása je v tom, že Angular automaticky reaguje na změnu hodnoty proměnné (záležitost JS kódu) a tuto změnu okamžitě vizuálně promítne do HTML.
Díky Angularu se obsah proměnné promítne z JS do HTML. Ovšem, Angular toho umí mnohem víc. Pokud se hodnota proměnné změní v HTML části (např. vstupem uživatele), Angular zajistí zobrazení její aktualizované hodnoty všude tam, kde je tato proměnná v HTML kódu použita.
Mějme v HTML části dva inputy; jeden pro vložení jména a druhý pro vložení příjmení. Přidáme k nim direktivu ng-model, která definuje název proměnné; obsah proměnné pak vypíšeme ve dvojitých složených závorkách.
V controlleru (v JS části) tyto dvě proměnné nadeklarujeme a přiřadíme jim výchozí hodnoty.
Všechno objasní následující video (bez zvuku).
Proměnná v HTML a v JS
Proměnnou máme deklarovanou v controlleru, v JS části naší aplikace. Můžeme jí přiřadit výchozí hodnotu či ji ponechat bez hodnoty. Obsah proměnné pak zobrazujeme ve vizuální části naší aplikace, tj. v HTML kódu - zapsáním do dvojitých složených závorek.Díky Angularu se obsah proměnné promítne z JS do HTML. Ovšem, Angular toho umí mnohem víc. Pokud se hodnota proměnné změní v HTML části (např. vstupem uživatele), Angular zajistí zobrazení její aktualizované hodnoty všude tam, kde je tato proměnná v HTML kódu použita.
Mějme v HTML části dva inputy; jeden pro vložení jména a druhý pro vložení příjmení. Přidáme k nim direktivu ng-model, která definuje název proměnné; obsah proměnné pak vypíšeme ve dvojitých složených závorkách.
V controlleru (v JS části) tyto dvě proměnné nadeklarujeme a přiřadíme jim výchozí hodnoty.
Všechno objasní následující video (bez zvuku).
pátek 7. srpna 2015
AngularJS: z čeho se skládá aplikace
Angular
Angular je framework, který velmi usnadňuje práci programátora. Je to JS knihovna, kterou jednoduchým způsobem přidáme do naší aplikace a pak s výhodou používáme její schopnosti.
Aplikace
Mám na mysli hybridní aplikaci pro chytrý telefon, tablet či podobné zařízení.
Zatímco nativní aplikace pro Android se programují v Javě, u hybridních si vystačíme pouze s trojkombinací HTML + CSS + JS. Pro použití v zařízení s Androidem se provede "překlad" do souboru s příponou apk.
Aplikace se obvykle skládá ze tří souborů (může jich být podstatně více), typicky jde o:
- index.html - HTML stránka
- style.css - definice kaskádových stylů
- app.js - JS kód aplikace
HTML spolu s CSS tvoří vizuální podobu aplikace (to co vidí uživatel) a JS má na starosti chování aplikace (reakce na vstup uživatele, ...).
Výchozím souborem je HTML stránka index.html, ve které jsou uvedeny odkazy na CSS soubor s definicí kaskádových stylů a JS knihovny. Typicky vypadá (zatím ještě prázdná) HTML část aplikace takto:
Na 3. až 8. řádku je hlavička <head>...</head>, na 9. až 11. řádku je tělo <body>...</body>. V hlavičce jsou uvedeny odkazy na CSS soubor ionic.min.css (ř. 6) a JS soubor ionic.bundle.js (ř. 7). V tomto případě se jedná o Ionic, který je založen na Angularu. Náš vlastní JS kód by byl v souboru app.js, na který by byl opět odkaz v hlavičce (podobně jako na ř. 7).
Pro využití funkcí Angularu je nezbytné použít na správném místě direktivu (atribut) ng-app. Může být uvedena v tagu <html> (ř. 2) nebo až v tagu <body> (ř. 9).
HTML + CSS
Mezi tagy <body> a </body> doplníme obsah naší aplikace v HTML kódu, tj. vizuální podobu; v případě potřeby upravíme vzhled použitím kaskádových stylů CSS.
Část HTML stránky mezi tagy <body>...</body> obsluhuje jeden nebo více controllerů. Je to JS funkce, kterou Angular propojí JS kód s HTML kódem. V controlleru typicky deklarujeme proměnné a funkce.
Controller má svůj název a alias. Obojí použijeme v HTML kódu. Potřebujeme-li zobrazit obsah proměnné, zapíšeme její název do dvojitých složených závorek {{}}, ale před název proměnné předřadíme alias controlleru:
JS
V JS části umístíme deklarace proměnných a funkcí do controlleru. Proměnné se uvedou s předřazením this. Controller má v JS části název (ale už ne alias).
čtvrtek 6. srpna 2015
AngularJS: co to je?
Ionic
Ionic je framework založený na Angularu. O Ionicu by se velmi zjednodušeně dalo říct, že je to (grafická) nadstavba nad Angularem.
jQuery
Stále známý a v současné době používaný způsob programování v javascriptu je s využitím knihovny jQuery. Tato knihovna řeší za programátora mnohé z toho, co by musel zdlouhavě a ručně programovat.
Angular
Je velmi populární javascriptová knihovna (framework), kterou vyvinul Američan slovenského původu Miško Hevery.
Při programování mobilních aplikací se dá použít "čistý" javascript; ovšem nevýhodou je velký rozsah kódu. Ne každý začínající programátor dokáže úspěšně vyvinout aplikaci v "čistém" javascriptu, tj. bez použití externích knihoven. Angular sníží množství programového kódu zhruba na desetinu (!).
Angular umožní ještě elegantnější způsob programování v javascriptu než s použitím jQuery. Navazuje na jQuery a podstatným způsobem řeší součinnost mezi javascriptovou částí aplikace (logika) a HTML částí aplikace (grafické rozhraní).
Výchozím webem je AngularJS (anglicky), kde je odkaz na stažení, základní informace, krátké příklady použití a rozsáhlá a dobře zpracovaná nápověda.
V současné době (srpen 2015) je aktuální verze 1.4.3, vývojový tým už dlouhou dobu pracuje na verzi 2, která se bude od současné 1.x významným způsobem lišit. Nicméně: dnes je k dispozici neuvěřitelné množství článků, návodů, tutoriálů, knih, ... o současné aktuální verzi 1.x - nevidím tedy jako problém naučit se pracovat s Angularem ve verzi 1.x (s tím, že verze 2.x bude zásadně odlišná). Nic nám totiž nebrání v používání Angularu 1.x i v příštích několika letech.
Angular, ukázka kódu
Mějme v JS části aplikace proměnnou this.name, ve které máme uloženo jméno a proměnnou this.surname, ve které je příjmení:
Obsah proměnné budeme chtít vypsat v HTML kódu. K tomu Angular používá dvojité složené závorky, do kterých umístíme název proměnné (pozor, je nutné předřadit ještě alias controlleru!):
Tohle je kód, který napíše programátor. Angular projde celý HTML kód před tím, než se poprvé zobrazí, a kde najde zápis (proměnnou, výraz, ...) ve dvojitých složených závorkách {{}}, tam zjistí (vypočítá) hodnotu a vloží ji na místo {{}}.
Tento jednoduchý příklad použití (uvedený pro představu) sestává ze dvou souborů: index.html a app.js. Jejich obsah je následující:
Ta část, kterou "má Angular na starosti" se v HTML kódu označí direktivou (atributem) ng-controller. Uvede se název controlleru (je definován v JS části) a jeho alias. V našem případě
je název controlleru personController a jeho alias je person. Proměnná deklarovaná v JS části (v controlleru) jako this.name se zapíše v HTML kódu do dvojitých složených závorek jako {{person.name}}. Dá se říct, že proměnná name vystupuje v JS části jako this.name a v HTML části jako person.name.
středa 5. srpna 2015
Prezentace o Ionicu
Přímo od vývojářského týmu Ionicu je dostupná online prezentace (anglicky). Obsahem je základní seznámení s hybridními aplikacemi, o pozadí vzniku Ionicu, několik ukázek z uživatelského rozhraní aplikací v Ionicu, ...
úterý 4. srpna 2015
Ionic framework, video návody v češtině
Video návody česky
Připravil jsem několik (v době psaní článku 19) videí v češtině zaměřených na programování mobilní aplikace s využitím Ionicu. Všechna videa jsou umístěna na Youtube v HD kvalitě (nahráno z pracovní plochy v rozlišení 1920 x 1080).
Úvodní video (je formou prezentace a mluveného slova) se zabývá obecně hybridními aplikacemi, se zaměřením na Ionic framework.
Další videa jsou formou nahrávané pracovní plochy, kde píši kód aplikace a vše komentuji. Jedná se o praktický příklad aplikace (a není to Hello world).
Všechna videa jsou dostupná na Youtube
pondělí 3. srpna 2015
Ionic framework
Ionic
V minulém článku jsem zmínil několik frameworků vhodných pro programování mobilních aplikací. Velmi známé a často používané jsou Ionic a Bootstrap. Já používám Ionic.
Je primárně vyvíjen jako mobilní framework; se zaměřením na iOS a Android. Součástí webu je fórum, na kterém jsou aktivní i členové vývojářského týmu Ionicu.
Zejména pro začátečníky má Ionic připravenu sekci Learn, webovou službu Play pro psaní kódu umožňující rychlý náhled aplikace a webovou službu pro vizuální návrh aplikace Creator.
Zejména pro začátečníky má Ionic připravenu sekci Learn, webovou službu Play pro psaní kódu umožňující rychlý náhled aplikace a webovou službu pro vizuální návrh aplikace Creator.
neděle 2. srpna 2015
Frameworky pro mobilní aplikace
Framework
Jedná se o knihovnu funkcí, která se dá použít při programování. Není tedy nutné psát aplikaci na zelené louce a úplně všechen kód psát sám; to by bylo pomalé a neefektivní. Naopak, s využitím frameworku jde práce lépe od ruky a programátor se může soustředit přímo na podstatu své aplikace.
Takový doktor si taky nevyrábí léky a lékařské pomůcky sám, ale použije hotové řešení specializovaného výrobce. Obdobná situace je při programování.
Frameworky pro mobilní aplikace
Jsou to knihovny CSS, určené pro mobilní aplikace. Často přidávají ještě JS funkce, které usnaďňují jejich použití nebo řeší jiné úkoly, se kterými se programátor běžně setká.
Mobilních frameworků je celá řada, např:
Na webových stránkách frameworků jsou kromě odkazů na stažení a dokumentace často i příklady použití, které ukazují vhodné způsoby použití.
Na otázku jaký framework použít není jednoduchá odpověď; záleží na spoustě okolností. Je dobré se podívat na několik nejpoužívanějších a vyzkoušet si je.
Já používám Ionic, který považuji (zejména díky skvělé práci vývojářského týmu) za jeden z nejlepších.
sobota 1. srpna 2015
HTML, CSS, JS: Kde se učit a kde se zeptat
Kde se naučit
Dobrým zdrojem v češtině je jakpsatweb. Obsahuje informace o HTML, CCS i JS. Dalším skvělým zdrojem je anglicky psaný web w3schools, na kterém jsou skvělé možnosti vyzkoušení napsaného kódu HTML, CSS, JS (kromě toho nabízí i tutoriály nejen pro zmínění tři jazyky). Dobrým zdrojem infomací je i CodePen, který nabízí možnost přímo editovat již vytvořený zdrojový kód a sledovat v náhledu výsledek (nejprve je vhodné provést tzv. fork).
Další možností je najít si na Youtube videa, zabývající se konkrétním tématem.
Kde se zeptat
Pokud je něco nejasného, nedaří se, nefunguje jak by mělo, je dobré se zeptat a nechat si poradit na nějakém fóru pro vývojáře. Typickým představitelem takového fóra je StackOverflow.
Přihlásit se k odběru:
Příspěvky (Atom)