Ionic 8 – Cross-Plattform-Mobilappentwicklung Schulung

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

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

Einrichtung der Entwicklungsumgebung

• Installation und Konfiguration von Node.js und npm
• Installation der Ionic CLI
• Erstellung und Generierung eines neuen Ionic-Projekts
• Ausführen von Anwendungen im Browser und im verbundenen Gerätmodus

Tiefgreifender Einblick in Projektstruktur und Architektur

• Seiten, Module und wiederverwendbare Komponenten
• Verstehen und Konfigurieren des Routersystems
• Dienste und Muster der Abhängigkeitsinjektion
• Asset-Verzeichnisse und Umgebungskonfiguration

Kern-UI-Komponenten und Layout

• Nutzung von ion-header, ion-toolbar und ion-content für die Seitenstruktur
• Eingabesteuerelemente: ion-input, ion-select, ion-checkbox
• Schaltflächen, FAB (Floating Action Button), Karten, Listen und das Grid-System
• Moderne Konventionen für Ionic-Formularsteuerelemente
• Praxis: Erstellen einer Anmeldeseite und eines Dashboard-Layouts

Navigations- und Routing-Strategien

• Integration von Angular Router und React Router
• Muster zur Seitenavigation und Deep Linking
• Lazy Loading zur Leistungssteigerung
• Pattens für Tabs-Navigation und seitliche Menüs

Styling und Theming

• CSS-Variablen und das Ionic-Farbsystem
• Implementierung der Dark-Mode-Unterstützung
• Dynamische Schriften und Palettenanpassung in Ionic 8
• Responsives Styling über verschiedene Geräte-Breakpoints hinweg

Formulare und Validierung

• Reaktive Formulare im Framework für Angular
• Benutzerdefinierte Hooks und Validierungsmuster für React
• Fehlerbehandlung und UI-Feedback bei Validierung
• Erstellung und Validierung komplexer, mehrstufiger Formulare

Dienste und API-Integration

• Konfiguration des HTTP-Clients und Interzeptoren
• Ausführen von RESTful-API-Aufrufen und Verarbeiten der Antworten
• Bewährte Verfahren zum State Management
• Error Boundaries und Wiederherstellung bei Netzwerkfehlern

Capacitor und native Gerätefunktionen

• Verständnis des Capacitor-Bridges und des Plugin-Ökosystems
• Installation und Konfiguration von Capacitor in einem bestehenden Projekt
• Zugriff auf die Kamera und den Bildauswahldialog
• Geolokalisierung und Kartenintegration
• Nativer Speicher und Voreinstellungen
• Praxis: Erfassen von Bildern und Speichern von Daten auf dem Gerät

Erweiterte UI-Komponenten

• Modals, Popovers und Alerts in modernem Ionic
• Toast-Benachrichtigungen und Ladeüberlagerungen
• Verbesserungen an Events und Overlay-Architektur in Ionic 8
• Leistungsaspekte bei komplexen UI-Overlays

Techniken zur Leistungsoptimierung

• Bewährte Verfahren zum Code Splitting und Lazy Loading
• Reduzierung der Bundle-Größe und Vermeidung häufiger Fallstricke
• Rendering-Optimierung für Listen und große Datenmengen

Progressive Web App und Build-Pipeline

• Umwandlung der Anwendung in eine Progressive Web App
• Konfiguration von Service Workern und Offline-Fähigkeiten
• App-Manifest und PWA-Installationsaufforderungen

Build-Prozesse und Bereitstellung

• Bauen und Bündeln der Produktion für Android und iOS
• Konfiguration der Anforderungen und Metadaten für die App-Store-Einreichung
• Verwaltung der Umgebungskonfiguration über Staging und Produktion hinweg

Capstone-Projekt: Erstellung 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 über Capacitor
• Code-Review, Tests und Vorbereitung auf die Bereitstellung