Ionic 8 Cross-Platform Mobile App Development Schulung

Einführung in Ionic und die plattformübergreifende Landschaft

• Was ist Ionic und wann sollte man es gegenüber nativen Lösungen oder Flutter wählen?
• Web-Components-Architektur, die die Ionic-Benutzeroberfläche antreibt
• Framework-Unterstützung in Angular-, React- und Vue-Ökosystemen
• Reale Anwendungsbeispiele für Progressive Web Apps und mobile Anwendungen

Einrichtung der Entwicklungsumgebung

• Installation und Konfiguration von Node.js und npm
• Installation des Ionic CLI
• Erstellung und Scaffolding eines neuen Ionic-Projekts
• Ausführen von Anwendungen im Browser und im verbundenen Gerät-Modus

Tiefgang in Projektstruktur und Architektur

• Seiten, Module und wiederverwendbare Komponenten
• Verständnis und Konfiguration des Routersystems
• Dienste und Muster der Dependency Injection
• Asset-Verzeichnisse und Umgebungskonfiguration

Core UI-Komponenten und Layout

• Nutzung von ion-header, ion-toolbar und ion-content für die Seitenstruktur
• Eingabesteuerungen: ion-input, ion-select, ion-checkbox
• Schaltflächen, FAB, Karten, Listen und das Rastersystem
• Neue Konventionen für Ionic-Formularsteuerungen
• Praxisaufgabe: Erstellen einer Anmeldeseite und eines Dashboard-Layouts

Strategien für Navigation und Routing

• Integration von Angular Router und React Router
• Muster für die Seitenavigation und Deep Linking
• Lazy Loading für bessere Leistung
• Navigationsmuster für Tabs und seitliche Menüs

Styling und Theming

• CSS-Variablen und das Ionic-Farbsystem
• Implementierung der Dunkelmodus-Unterstützung
• Dynamische Schriftarten und Anpassung der Farbpalette in Ionic 8
• Responsives Styling über verschiedene Geräte-Breakpoints hinweg

Formulare und Validierung

• Reaktive Formular-Engine für Angular
• Benutzerdefinierte Hooks und Validierungsmuster für React
• Fehlerbehandlung und visuelles Feedback bei der Validierung
• Erstellung und Validierung komplexer Mehrschrittformulare

Dienste und API-Integration

• Konfiguration des HTTP-Clients und Interceptors
• Ausführen von RESTful-API-Aufrufen und Verarbeiten der Antworten
• Best Practices für das State-Management
• Error Boundaries und Wiederherstellung nach Netzwerkfehlern

Capacitor und native Gerätefunktionen

• Verständnis der Capacitor-Bridge und des Plugin-Ökosystems
• Installation und Konfiguration von Capacitor in einem bestehenden Projekt
• Zugriff auf Kamera und Bildauswahl
• Geolokalisierung und Kartenintegration
• Nativer Speicher und Einstellungen (Preferences)
• Praxisaufgabe: Aufnehmen von Bildern und Speichern von Daten auf dem Gerät

Erweiterte UI-Komponenten

• Modals, Popovers und Alerts in modernem Ionic
• Toast-Benachrichtigungen und Ladeoverlays
• Verbesserungen der Ereignis- und Overlay-Architektur in Ionic 8
• Leistungsaspekte bei komplexen UI-Overlays

Techniken zur Leistungsoptimierung

• Code-Splitting und Best Practices für Lazy Loading
• Reduzierung der Bundle-Größe und Vermeidung häufiger Fallstricke
• Rendering-Optimierung für Listen und große Datensätze

Progressive Web Apps und Build-Pipeline

• Konvertierung der Anwendung in eine Progressive Web App
• Konfiguration von Service Workern und Offline-Funktionen
• App-Manifest und PWA-Installationsaufforderungen

Build-Prozesse und Deployment

• Erstellung und Bündelung für produktionsreife Android- und iOS-Versionen
• Konfiguration der Anforderungen und Metadaten für die App-Store-Einreichung
• Verwaltung der Umgebungskonfiguration über Staging- und Produktionsumgebungen hinweg

Capstone-Projekt: Erstellung einer vollständigen Mini-App

• Design der App-Architektur und des Navigationsflusses
• Implementierung einer Anmeldeseite mit Authentifizierung
• Erstellung eines Dashboards mit Live-Datenintegration
• Hinzufügen einer nativen Kamerafunktion über Capacitor
• Code-Review, Tests und Vorbereitung des Deployments