Online kurz Ionic framework

Ionic framework

Erich Stark
Erich Stark
Level
Kapitol
36
Kategorie
Programování
Hodnocení
4,1 z 5
Délka
2h 11min
Jazyk
SK

Popis online kurzu

V tomto online kurzu si představíme Ionic Framework, který nám umožňuje tvořit mobilní aplikace se znalostmi webových technologií. Ionic je open source SDK na vývoj různých mobilních aplikací. Ionic je framework napsaný v JavaScriptu, který dokážeme rozběhat velmi jednoduše na Windows nebo Macu.

Pro lepší pochopení doporučuji mít alespoň základní znalosti:
  • HTML, CSS, JavaScript
  • TypeScript
  • Angular

V kurzu se snažím koncepty procházet tak, aby byly srozumitelné i bez nich. V podstatě, pokud umíš moderní JavaScript, budeš rozumět i TypeScriptu, který zde používáme.

Ionic je UI framework určený pro tvorbu mobilních aplikací, ale díky jeho souboru nástrojů umožňuje tvorbu i těch desktopových (electron) a samozřejmě klasických webových. Vzhled těchto komponentů je tak perfektně nastylovaný, že bychom téměř nerozeznali rozdíl od těch nativních v iOS, resp. Androidu. Komponenty byly vytvořeny pomocí standardu Web Components, který umožňuje využití jakéhokoli frameworku pro interakci s nimi. Poskytuje integrovanou podporu pro ty nejznámější jako Angular, React, Vue nebo i pro čistý JavaScript. My se budeme věnovat použití Ionic s Angular.

V úvodu kurzu si nejprve připravíme vývojové prostředí a nainstalujeme potřebné nástroje.

Další část kurzu bude o vygenerování první aplikace, abychom věděli, co nás čeká se základními UI prvky a uměli je později použít. Vysvětlíme si i základní strukturu projektu. Zároveň si ukážeme, jak bude probíhat vývoj mobilní aplikace (může to být v simulátoru nebo přes webový prohlížeč).

Následující část bude o ukázce UI komponentů, jak se s nimi pracuje a podobně.

V poslední části to dáme celé do kupy a ukážeme si příklady na aplikaci, kterou jsem nazval IonBank. Tam budou využity tyto komponenty, zároveň si napíšeme nějaký jednoduchý TypeScript/Angular kód. Aplikace bude obsahovat stránky jako transakce, jejich detail, profil, úprava profilu a později do tohoto kurzu přibudou ještě další zajímavé kapitoly.

Co se tedy naučíš?

  • Jak používat UI knihovnu Ionic.
  • Základní koncepty komponentů v Ionic prostřednictvím Angular.
  • Vytvořit jednoduchou aplikaci, kde tyto poznatky aplikuješ.
Pokud jsi zběhlý v nástrojích jako VSCode a NPM, tak první dvě videa můžeš s klidem přeskočit.

Co všechno dostaneš

  • certifikát o absolvování kurzu,
  • garance vrácení peněz do 14 dnů v případě nespokojenosti s kurzem,
  • zdrojové kódy a všechny materiály ke kurzu na stažení,
  • moderované diskusní fórum.

Kapitoly online kurzu

Príprava prostredia (3)

Ukázka zdarma
1:34
Ukázka zdarma
2:18
Ukázka zdarma
2:26

Prvá Ionic aplikácia (6)

04. Práca s Ionic CLI v termináli
3:01
05. Priečinky a štruktúra projektu
4:19
06. Použitie Ionic CLI
4:44
07. Spustenie a vývoj aplikácie v prehliadači
2:39
08. Spustenie a vývoj aplikácie v iOS simulátore
2:33
09. Spustenie a vývoj aplikácie v Android simulátore
2:04

Ionic UI komponenty (9)

10. Prehľad Ionic UI komponentov
1:56
11. Komponent ion-button
2:03
12. Komponent ion-list
2:29
13. Komponent ion-input
2:13
14. Komponent ion-radio
1:36
15. Komponent ion-checkbox
1:39
16. Komponent ion-select
2:49
17. Komponent ion-grid
2:26
18. Komponent ion-modal
5:32

Aplikácia IonBank (18)

19. IonBank intro
2:07
20. Stránka s transakciami
7:08
21. Zobrazenie dát v transakciách
6:43
22. Práca s dátami pomocou Angular Service konceptu
5:51
23. Stránka s detailom transakcie
2:23
24. Prenos parametrov v url pri prechode na novú stránku
10:38
25. Previazanie master/detail medzi stránkami
2:29
26. Profilová stránka
6:20
27. Úprava Ionic UI komponentov pomocou CSS
6:32
28. Práca s dátami cez service vrámci profilovej stránky
5:34
29. Stránka pre úpravu profilu
3:59
30. Kategorizácia formulárových prvkov a tlačidlá v toolbare
3:36
31. Presmerovanie medzi stránkami profile a profile-edit
2:42
32. Upráva profilu - reaktívne formuláre
4:31
33. Inicializácia dát vo formulári
1:37
34. Validácia formuláru pomocou Validators triedy
3:18
35. Vizuálne zobrazenie validačných chýb
5:57
36. Uloženie dát do service
2:05

Lektor online kurzu

Lektor Erich Stark

Erich Stark

Webové technológie
Ahojte, volám sa Erich Stark a venujem sa webu. Pomáham klientom tvoriť užívateľské rozhrania postavené na moderných technológiách. Som programátor s rokmi praxe a všeobecným prehľadom v programovacích jazykoch a technológiách. To mi umožuje vybrať správnu technológiu na aktuálny projekt. Primárne sa ale venujem frontendu. Zároveň učím webové technológie na Paneurópskej vysokej škole.
4,1 Hodnocení
1 Kurz

Hodnocení studentů

Hodnocení od studentů zapsaných v kurzu na Skillmea.

4,1 z 5 · 7 hodnocení

Lubomir N.

1

Mrzí ma to, ale napriek evidentným kvalitám a skúsenosťami lektora bolo pre mňa ukončenie tohoto kurzu kapitolou č. 36 neočakávaným sklamaním. Chýbala mi ukážka reálneho nasadenia vytvorenej aplikácie, teda v reálnom mobilnom zariadení - inými slovami reálny výsledok. Podľa mňa popisovaný príklad nie je riešený dostatočne komplexne, aby sa dalo hovoriť o plnohodnotnom kurze. Aspoň napojenie dát na backend mohlo byť ukázané, cvičných backendov existuje dosť. Ak som to dobre pochopil, Ionic nie je primárne o spúšťaní apky cez web browser. Prezentovaný školský príklad je prakticky k ničomu. Mám pocit že som zhliadol zlomok z nejakého kurzu o Angular, než o Ionic frameworku. Ale ako ÚVOD do Ionic sa mi kurz páčil, len kurz mal byť ako "úvodný" aj prezentovaný, preto hodnotím len dvomi hviezdičkami. Teraz si to pýta naviazať pokročilejšou sériou s aspoň jednou reálnejšou úlohou, výsledkom ktorej by mohla byť funkčná aplikácia na platformách spomínaných v úvodnom popise kurzu. PS: Vidím tu posledné hodnotenia staré už viac ako tri roky. Podľa toho usudzujem, že vypočutiu pripomienok platiacich frekventantov a ďalšieho pokračovania sa asi nedočkáme. Takže sorry, beriem kurzu aj tú druhú hviezdičku :(

Ľubomír S.

5

Super kurz. Uvítal by som ešte prácu s lokálnou databázou.

Štefan P.

5

IONIC som pred zapísaním kurzu nepoznal. Kurz a prednášajúci prinášajú veľmi príjemný úvod a overview do sveta ionic-u. Cez názorné ukážky inštalácie, práce v termináli, predstavenie viacerých css komponentov sa dostanete až k vytvoreniu veľmi jednoduchej aplikácie (kde sa pohráte s routingom a prácou s dátami). Zatiaľ má kurz 36 video-lekcií, podľa dostupných informácií sa bude kurz rozširovať - zišlo by sa prepojenie s API, ťahanie/posielanie dát, build/spustenie už hotovej applikácie a podobne. Verím, že sa je načo tešiť! Dobrá práca a isto sa pozriem i na budúce kurzy autora.

Erik M.

3

V aktuálnom čase písania hodnotenia ma kurz 36 videí. Netuším čí budú nové. Názov kurzu neoodpovedá očakávaniu. IONIC určite nevznikol pre potrebu používania css componentov ale pre pracu s hw mobilných zariadení. Kurz je vhodný pre ludí ktorých zaujíma uvod do angularu, jemne typescriptu, a nahľad do IONIC stylizácie použitím komponentov, routing. Kurzu naopak chýba ukažka práce s NATIVE, skutočné volanie service aspoň nejakú podstránku s realnymi datami ktoré su volne dostupne (free api), absolutné odstránenie TS : any. Mrzí ma, že som nevidel viac, ale napriek tomu 'ďakujem autorovi za jeho čas, tvorbu, chapém že to nieje jednoduché.

Doporučené online kurzy