Vývoj multiplatformních mobilních aplikací v Ionic 8 Počítačový Kurz

Úvod do Ionic a multiplatformního ekosystému

• Co je Ionic a kdy jej vybrat před nativním nebo Flutter vývojem
• Architektura Web Components pohánějící uživatelské rozhraní Ionic
• Podpora frameworků v ekosystémech Angular, React a Vue
• Případy použití PWA a mobilních aplikací z praxe

Nastavení vývojového prostředí

• Instalace a konfigurace Node.js a npm
• Instalace Ionic CLI
• Vytvoření a nastavení nového projektu Ionic
• Spuštění aplikace v prohlížeči a režimu připojeného zařízení

Hluboký průzkum struktury a architektury projektu

• Stránky, moduly a znovu použitelné komponenty
• Pochopení a konfigurace systému routing
• Servisy a vzory vstřikování závislostí
• Složky s assety a konfigurace prostředí

Základní uživatelské komponenty a rozvržení

• Použití ion-header, ion-toolbar a ion-content pro strukturu stránky
• Vstupní ovládací prvky: ion-input, ion-select, ion-checkbox
• Tlačítka, FAB, karty, seznamy a mřížkový systém
• Moderní konvence ovládacích prvků formulářů v Ionic
• Praktická část: vytvoření přihlašovací stránky a rozvržení hlavního panelu (dashboard)

Navigace a strategie routing

• Integrace Angular Router a React Router
• Vzory navigace mezi stránkami a hluboké odkazování (deep linking)
• Latecké načítání pro lepší výkon
• Vzory navigace záložkami a postranní menu

Stylování a motivy

• CSS proměnné a barevný systém Ionic
• Implementace podpory tmavého režimu
• Dynamická písma a přizpůsobení palety v Ionic 8
• Responzivní stylování napříč velikostmi zobrazení zařízení

Formuláře a validace

• Rámec reaktivních formulářů pro Angular
• Vlastní hooky a vzory validace pro React
• Zpracování chyb a zpětná vazba uživatelského rozhraní při validaci
• Tvorba a validace komplexních vícekrokových formulářů

Servisy a integrace API

• Konfigurace HTTP klienta a interceptory
• Volání RESTful API a zpracování odpovědí
• Osvědčené postupy pro správu stavu
• Error boundaries a obnova po selhání sítě

Capacitor a nativní funkce zařízení

• Pochopení mostu Capacitor (bridge) a ekosystému pluginů
• Instalace a konfigurace Capacitoru v existujícím projektu
• Přístup k fotoaparátu a výběru obrazů
• Určování polohy a integrace map
• Nativní úložiště a předvolby
• Praktická část: pořizování obrázků a ukládání dat do zařízení

Pokročilé uživatelské komponenty

• Modální okna, odkazy (popovers) a upozornění v moderním Ionic
• Toasty notifikace a zátěžová okna
• Zlepšení architektury událostí a překryvů v Ionic 8
• Zohlednění výkonu při složitých uživatelských překryvech

Techniky optimalizace výkonu

• Osvědčené postupy rozdělování kódu a lateckého načítání
• Snižování velikosti balíčku a vyhýbání se častým pastem
• Optimalizace vykreslování pro seznamy a velké objemy dat

Progresivní webová aplikace (PWA) a build pipeline

• Přeměna aplikace na Progresivní webovou aplikaci (PWA)
• Konfigurace service workerů a offline funkcionality
• Manifest aplikace a výzvy k instalaci PWA

Procesy sestavování a nasazení

• Sestavování a balení pro produkční Android a iOS
• Konfigurace požadavků a metadat pro odesílání do obchodů s aplikacemi
• Správa konfigurací prostředí mezi stagingem a produkcí

Závěrečný projekt: Vývoj kompletní miniaplikace

• Navržení architektury aplikace a toku navigace
• Implementace přihlašovací stránky s autentizací
• Vytvoření hlavního panelu (dashboard) s integrovanými živými daty
• Přidání nativní funkce fotoaparátu přes Capacitor
• Kódová revize, testování a příprava na nasazení