Ionic 8: Entwicklung plattformübergreifender mobiler Apps Schulung

Einführung in Ionic und die Landschaft plattformübergreifender Entwicklung

• Was ist Ionic und wann sollte es gegenüber nativen Lösungen oder Flutter gewählt werden?
• Die Web-Components-Architektur, die das Ionic UI antreibt
• Framework-Unterstützung in den Angular-, React- und Vue-Ökosystemen
• Praxisnahe Anwendungsfälle für PWAs plus mobile Anwendungen

Einrichtung der Entwicklungsumgebung

• Installation und Konfiguration von Node.js und npm
• Installation des Ionic CLI
• Erstellung und Generierung eines neuen Ionic Projekts
• Ausführen der Anwendung im Browser und im Modus für verbundene Geräte

Tiefgehendes Projektstruktur- und Architekturverständnis

• Seiten, Module und wiederverwendbare Komponenten
• Verständnis und Konfiguration des Routing-Systems
• Dienste und Muster für Dependency Injection
• Assets-Verzeichnisse und Umgebungskonfiguration

Kern-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, FABs (Floating Action Buttons), Karten, Listen und das Grid-System
• Moderne Konventionen der Ionic-Formularsteuerung
• Praxisbeispiel: Erstellen einer Anmeldeseite und eines Dashboard-Layouts

Navigations- und Routingstrategien

• Integration des Angular Routers und React Router
• Muster für die Seiten-navigation und Deep Linking
• Laden von Inhalten bei Bedarf (Lazy Loading) für bessere Performance
• Navigationsmuster für Registerkarten und Seitenmenüs

Styling und Theming

• CSS-Variablen und das Ionic-Farbsystem
• Implementierung des Dark-Mode-Supports
• Dynamische Schriftarten und Palette-Anpassung in Ionic 8
• Responsives Styling über verschiedene Gerätegrößen hinweg

Formulare und Validierung

• Reactive Forms Framework für Angular
• Benutzerdefinierte Hooks und Validierungsmuster für React
• Fehlerbehandlung und visuelles Feedback bei der Validierung
• Erstellung und Validierung komplexer mehrstufiger Formulare

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-Brücke und des Plugin-Ökosystems
• Installation und Konfiguration von Capacitor in einem bestehenden Projekt
• Zugriff auf die Kamera und den Bildauswahlmechanismus
• Geolokalisierung und Kartenintegration
• Nativer Speicher und Einstellungen (Preferences)
• Praxisbeispiel: Aufnehmen von Bildern und Speichern von Daten auf dem Gerät

Erweiterte UI-Komponenten

• Modal-Fenster, Popovers und Warnungen in modernem Ionic
• Toast-Benachrichtigungen und Ladeüberlagerungen
• Verbesserungen an Events und der Overlay-Architektur in Ionic 8
• Performance-Aspekte bei komplexen UI-Overlays

Techniken zur Performance-Optimierung

• Best Practices für Code Splitting und Laden von Inhalten bei Bedarf (Lazy Loading)
• Reduzierung der Bundle-Größe und Vermeidung gängiger Fallstricke
• Rendering-Optimierung für Listen und grosse Datensätze

Progressive Web App und Build-Pipeline

• Umwandlung der Anwendung in eine Progressive Web App
• Konfiguration von Service Workern und Offline-Funktionalitäten
• App-Manifest und Installationsaufforderungen für PWA

Build-Prozesse und Bereitstellung

• Bauen und Bündeln für Produktions Android- und iOS-Versionen
• Konfiguration der Anforderungen und Metadaten für die Einreichung in App Stores
• Verwaltung der Umgebungskonfiguration über Staging- und Produktionsumgebungen hinweg

Schlussprojekt: Erstellen einer vollständigen Mini-App

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