Ionic 8: Entwicklung plattformübergreifender mobiler Apps Schulung

Einführung in Ionic und die Plattformlandschaft

• Was ist Ionic – und wann sollte es gegenüber nativen Lösungen oder Flutter gewählt werden
• Die Architektur der Web Components, auf der die Ionic-UI basiert
• Unterstützte Frameworks: Angular, React sowie Vue
• Praktische Anwendungsbeispiele für Progressive Web Apps und mobile Anwendungen

Einrichtung der Entwicklungsumgebung

• Installation und Konfiguration von Node.js sowie npm
• Installation des Ionic CLI-Tools
• Erstellen und Strukturieren eines neuen Ionic-Projekts
• Ausführen der Anwendung im Browser sowie im Testmodus für mobile Geräte

Tiefgehende Betrachtung der Projektstruktur und Architektur

• Seiten, Module sowie wiederverwendbare Komponenten
• Verständnis und Konfiguration des Routenmanagements
• Dienstkomponenten sowie Muster zur Dependency Injection
• Verwaltung von Ressourcenordnern und Umgebungskonfigurationen

Grundlegende UI-Komponenten und Layoutgestaltung

• Einsatz von ion-header, ion-toolbar und ion-content zur Strukturierung von Seiten
• Eingabefelder: ion-input, ion-select sowie ion-checkbox
• Schaltflächen, Floating Action Buttons, Karten, Listen und das Grid-System
• Aktuelle Konventionen bei der Gestaltung von Formularen in Ionic
• Praxisübung: Erstellung einer Anmelde-Seite samt Dashboard-Layout

Strategien zur Navigation und zum Routenmanagement

• Integration von Angular Router bzw. React Router
• Möglichkeiten der Seitennavigation sowie Verwendung von Deep Links
• Lazy Loading zur Optimierung der Leistungsfähigkeit
• Einsatz von Reiternavigation sowie Seitenmenüs

Styling und Themenanpassung

• Nutzung von CSS-Variablen sowie des Ionic-Farbsystems
• Einrichtung eines Dark Mode-Designs
• Dynamische Anpassung von Schriftarten und Farbpaletten in Ionic 8
• Anpassung des Designs an verschiedene Geräteformate

Formulargestaltung und Validierung

• Einsatz des Reaktiven Formularsystems in Angular
• Benutzerdefinierte Hooks sowie Validierungsmethoden für React
• Handhabung von Fehlermeldungen und Rückmeldungen im UI bei ungültigen Eingaben
• Erstellung komplexer, mehrstufiger Formulare mit Validierungselementen

Dienste und Integration von APIs

• Einrichten sowie Konfiguration des HTTP-Clients inklusive Interceptoren
• Aufruf von RESTful APIs samt Verarbeitung der Antworten
• Beste Praktiken zur Zustandsverwaltung innerhalb der App
• Behandlung von Netzwerkfehlern sowie Implementierung von Fehlerbegrenzungsmechanismen

Capacitor und native Gerätefunktionen

• Einführung in das Konzept der Capacitor-Bridge sowie das Plugin-Ökosystem
• Installation und Einrichtung von Capacitor in bestehenden Projekten
• Nutzung der Kamera sowie des Bildauswahl-Werkzeugs
• Standortbestimmung via Geolocation und Integration von Kartenfunktionen
• Nutzung nativer Speicher- und Einstellungsmechanismen auf dem Gerät
• Praxisübung: Aufnahme von Bildern sowie Speichern dieser Daten auf dem Endgerät

Fortgeschrittene UI-Komponenten

• Einsatz von Modals, Popovers sowie Alert-Dialogs in aktuellen Ionic-Versionen
• Anzeige von Benachrichtigungen via Toast und Statusanzeigen bei Ladevorgängen
• Verbesserungen an der Ereignisverarbeitung sowie Overlay-Architektur in Ionic 8
• Optimierungsmöglichkeiten für komplexe UI-Überlagerungen hinsichtlich Performance

Techniken zur Leistungsoptimierung

• Beste Praktiken beim Code-Splitting und Lazy Loading
• Verringerung der Paketgröße sowie Vermeidung typischer Fehlerquellen
• Optimierung des Renderverhaltens bei Listen mit großen Datenmengen

Progressive Web Apps und Build-Prozesse

• Umwandlung der Anwendung in eine Progressive Web App
• Konfiguration von Service Workers zur Offline-Nutzbarkeit
• Einrichtung des App-Manifests sowie Ermöglichung der Installation der App als PWA

Build-Prozesse und Deployment-Methoden

• Erstellung sowie Paketierung für die Veröffentlichung auf Android und iOS
• Einhalten der technischen Anforderungen der App Stores samt Konfiguration relevanter Metadaten
• Gewährleistung korrekter Umgebungskonfigurationen in Test- und Produktionsumgebungen

Abschlussprojekt: Erstellung einer kompletten Mini-Anwendung

• Ausarbeitung der Architektur sowie Planung der Navigationsabläufe
• Implementierung einer Anmelde-Seite inklusive Authentifizierungslogik
• Entwicklung eines Dashboards mit aktuellen Datensätzen
• Einbindung der Kamera-Funktionalität mittels Capacitor
• Durchführung einer Code-Überprüfung sowie Vorbereitung zur Veröffentlichung der App