Ionic framework

Zpět na kurzy

Všechny ONLINE kurzy

od 1 299,00 KČ

Všechny online kurzy od 1 299 KČ

Více info

Course duration 2h 11m 51s
Course chapters 36 kapitol
Course difficulty Začátečník

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.

Osnova kurzu

  • Príprava prostredia   
    •  01. Prostredie Visual Studio Code  
    •  02. Inštalácia Node.js a NPM pre použitie v termináli  
    •  03. Inštalácia Ionic CLI  
  •  Prvá Ionic aplikácia  
    •  04. Práca s Ionic CLI v termináli  
    •  05. Priečinky a štruktúra projektu  
    •  06. Použitie Ionic CLI  
    •  07. Spustenie a vývoj aplikácie v prehliadači  
    •  08. Spustenie a vývoj aplikácie v iOS simulátore  
    •  09. Spustenie a vývoj aplikácie v Android simulátore  
  •  Ionic UI komponenty   
    •  10. Prehľad Ionic UI komponentov  
    •  11. Komponent ion-button  
    •  12. Komponent ion-list  
    •  13. Komponent ion-input  
    •  14. Komponent ion-radio  
    •  15. Komponent ion-checkbox  
    •  16. Komponent ion-select  
    •  17. Komponent ion-grid  
    •  18. Komponent ion-modal  
  •  Aplikácia IonBank     
    •  19. IonBank intro  
    •  20. Stránka s transakciami  
    •  21. Zobrazenie dát v transakciách  
    •  22. Práca s dátami pomocou Angular Service konceptu  
    •  23. Stránka s detailom transakcie  
    •  24. Prenos parametrov v url pri prechode na novú stránku  
    •  25. Previazanie master/detail medzi stránkami  
    •  26. Profilová stránka  
    •  27. Úprava Ionic UI komponentov pomocou CSS  
    •  28. Práca s dátami cez service vrámci profilovej stránky  
    •  29. Stránka pre úpravu profilu  
    •  30. Kategorizácia formulárových prvkov a tlačidlá v toolbare  
    •  31. Presmerovanie medzi stránkami profile a profile-edit  
    •  32. Upráva profilu - reaktívne formuláre  
    •  33. Inicializácia dát vo formulári  
    •  34. Validácia formuláru pomocou Validators triedy  
    •  35. Vizuálne zobrazenie validačných chýb  
    •  36. Uloženie dát do service
Online kurz Ionic framework je možné vyzkoušet i zdarma!

Instruktor

Erich Stark

Erich Stark