Utveckling av korsplattforms mobilappar med Ionic 8 Träningskurs

Introduktion till Ionic och landskapet för korsplattformsutveckling

• Vad är Ionic och när ska man välja det framför native- eller Flutter-utveckling
• Web Components-arkitektur som driver Ionic UI
• Ramverksstöd inom Angular-, React- och Vue-ekosystemen
• Verklighetsnära användningsfall för PWA samt mobilapplikationer

Inställning av utvecklingsmiljö

• Installation och konfiguration av Node.js och npm
• Installera Ionic CLI
• Skapa och initialisera ett nytt Ionic-projekt
• Köra applikationer i webbläsare och kopplad enhetsläge

Projektstruktur och arkitektur i djupet

• Sidor, moduler och återanvändbara komponenter
• Förståelse och konfiguration av routningssystemet
• Tjänster och beroendeinjection (dependency injection)-mönster
• Asset-mappar och miljökonfiguration

Kärnkomponenter för gränssnitt och layout

• Användning av ion-header, ion-toolbar och ion-content för sidstruktur
• Indatakontroller: ion-input, ion-select, ion-checkbox
• Knappar, FAB (Floating Action Button), kort, listor och rutnätssystemet
• Modernt Ionic-konventioner för formkontroller
• Hantering: att bygga en inloggningssida och dashboard-layout

Navigering- och routningsstrategier

• Integration av Angular Router och React Router
• Mönster för sidnavigering och deep linking
• Lättlastning (lazy loading) för prestanda
• Navigationsmönster med flikar och sidomeningar

Styling och tematisering

• CSS-variabler och Ionic:s färgsystem
• Implementera mörkt läge-stöd
• Dynamiska typsnitt och anpassning av paletter i Ionic 8
• Responsiv styling över enhetsbrytpunkter

Formulär och validering

• Reactive forms-ramverket för Angular
• Custom hooks och valideringsmönster för React
• Felhantering och användarfeedback vid validering
• Bygga och validera komplexa flerstegsformulär

Tjänster och API-integration

• Konfiguration av HTTP-klienter och interceptorer
• Göra RESTful API-anrop och hantera svar
• Best practices för tillståndshantering (state management)
• Felgränser (error boundaries) och återhämtning vid nätverksfel

Capacitor och native-enhetsfunktioner

• Förståelse av Capacitor-bridgen och plugin-ekosystemet
• Installera och konfigurera Capacitor i ett befintligt projekt
• Åtkomst till kameran och bildväljaren
• Geolokalisation och kartintegration
• Nativ lagring och preferenser
• Hantering: att ta bilder och lagra data på enheten

Avancerade UI-komponenter

• Modaler, popovers och aviseringar i modernt Ionic
• Toasts-aviseringar och lastningsöverläggning (loading overlays)
• Förbättringar i händelser och overlay-arkitektur i Ionic 8
• Prestationsaspekter för komplexa UI-overlay

Optimeringstekniker för prestanda

• Best practices för koduppdelning (code splitting) och lättlastning (lazy loading)
• Minska paketeringsstorlek och undvika vanliga fallgropar
• Prenderingsoptimering för listor och stora dataset

Progressiv Webapp och byggpipeline

• Konvertera applikationen till en Progressiv Webapp (PWA)
• Konfigurera service workers och offline-funktioner
• App-manifest och installationsprompt för PWA

Byggprocesser och lansering

• Bygga och paketera för produktionsversioner av Android och iOS
• Konfigurera krav och metadata för appbutikslansering
• Hantera miljökonfiguration över staging- och produktionsmiljöer

Avslutande projekt: Att bygga en komplett miniapp

• Designa appens arkitektur och navigationsflöde
• Implementera en inloggningssida med autentisering
• Bygga en dashboard med integration av live-data
• Lägga till en native kamerafunktion via Capacitor
• Kodgenomgång, testning och förberedelser för lansering