Ionic und Capacitor - Kernkonzepte
Grundlagen von Ionic
Grundlagen von Capacitor
Zusammenspiel von Ionic und Capacitor
Plattformübergreifende Entwicklung mit Webtechnologien
Architektur einer Ionic-/Capacitor-Anwendung
WebView als Basis nativer Apps
Native App vs. Web-App vs. Progressive Web App (PWA)
Unterstützte Plattformen: iOS, Android und Web/PWA
Ionic und Capacitor - Erste Schritte
Übersicht
Einrichtung der Entwicklungsumgebung
Node.js und npm
Installation der Ionic CLI
Erstellen eines neuen Ionic-Projekts
Auswahl des Webfrontend-Frameworks
Einrichtung von Capacitor
Projektstruktur einer Ionic-/Capacitor-Anwendung
Pakete und Abhängigkeiten
Ionic über npm und CDN
Ionic - Grundlagen der Entwicklung
Start eines Projekts
Vorschau einer App im Browser
Scaffolding von Seiten und Komponenten
Ionic-Komponenten verwenden
Entwickeln mit Angular, React oder Vue.js
Optional: Einsatz anderer Webframeworks wie Svelte
Navigation und Routing
Konfiguration einer Ionic-Anwendung
Ionic Platform API
App-Lebenszyklus
Hardware-Zurück-Taste unter Android
Umgang mit der Bildschirmtastatur
Live-Reload während der Entwicklung
Capacitor - Native Plattformintegration
Architektur und Funktionsweise von Capacitor
Hinzufügen von iOS und Android zu einem Webprojekt
Native Projekte für iOS und Android
Zusammenspiel zwischen Webanwendung und nativer Plattform
Build, Copy und Sync mit der Capacitor CLI
Öffnen und Bearbeiten der nativen Projekte
Entwicklung mit Xcode
Entwicklung mit Android Studio
Live-Reload auf Emulatoren und realen Geräten
Plattformspezifische Konfiguration
App-ID, App-Name und weitere App-Einstellungen
Umgebungs- und Build-Konfigurationen
Capacitor - Zugriff auf Gerätefunktionen
Grundlagen des Capacitor-Plugin-Modells
Offizielle Capacitor Plugins
Community Plugins
Kompatibilität mit Cordova Plugins
Installation und Konfiguration von Plugins
Berechtigungen unter iOS und Android
Zugriff auf die Kamera
Dateisystemzugriff
Preferences und lokale Einstellungen
Geolocation
Netzwerkstatus
Zwischenablage und Teilen-Funktion
Haptisches Feedback
Status Bar und Splash Screen
Push Notifications und Local Notifications
App- und Device-Informationen
Deep Links und App Links
Capacitor - Eigene native Erweiterungen
Aufbau eines Capacitor Plugins
Kommunikation zwischen JavaScript/TypeScript und nativer Plattform
Eigene native Funktionen integrieren
Native Implementierung für Android mit Java/Kotlin
Native Implementierung für iOS mit Swift
Plattformspezifischen Code kapseln
Ionic - Gestaltung von App-Oberflächen
Strukturierung einer App
Ionic UI Components
Layouts und responsive Gestaltung
Einsatz von responsiven Rastern
Verwendung globaler Stylesheets
CSS Utilities
Plattformspezifische Darstellung
Adaptive Oberflächen für Smartphone, Tablet und Web
Ionic - Theming von App-Oberflächen
Grundlagen des Theming
Plattform-Stile für iOS und Material Design
CSS Custom Properties
Shadow DOM und CSS Shadow Parts
Farben gestalten
Globale und komponentenspezifische Themes
Dark Mode
Systemeinstellungen für Hell-/Dunkelmodus berücksichtigen
Fortgeschrittene Styling-Techniken
Nutzung des Ionic Color Generator
Ionic - Programmierung mit einem Webfrontend-Framework
Angular, React oder Vue.js nach Absprache
Ionic-Architektur und -Konzeption
Erstellen einer App
Komponenten und Seiten entwickeln
Datenbindung und Zustandsverwaltung
Navigation und Routing
App-Lebenszyklus
Konfiguration
Nutzung der Ionic Platform API
Animationen
Gesten
Formulare und Validierung
HTTP-Kommunikation und REST-APIs
Lokale Datenspeicherung
Testen der Anwendung
Optimierung der App-Leistung
Sicherheit von Web- und Hybrid-Anwendungen
Progressive Web Apps (PWA)
Grundlagen von Progressive Web Apps
Abgrenzung PWA, native App und Hybrid-App
Web App Manifest
Service Worker
Installation einer PWA
Offline-Fähigkeit
Caching-Strategien
Responsive und adaptive Gestaltung
Capacitor-Funktionen im Web
PWA Elements
Grenzen nativer Gerätefunktionen im Browser
Bereitstellung einer PWA
Ionic und Capacitor - Testen und Debugging
Debugging im Browser
Chrome DevTools und Safari Web Inspector
Debugging auf Emulatoren und Simulatoren
Debugging auf realen Geräten
Unit Tests
Komponententests
End-to-End-Tests
Analyse von Performanceproblemen
Ionic und Capacitor - Problembehebung
Fehleranalyse und Fehlerbehebung
Build-Fehler interpretieren und lösen
Laufzeitfehler interpretieren und lösen
Fehler der nativen Plattformen interpretieren und lösen
Probleme mit Capacitor Plugins analysieren
Versions- und Abhängigkeitskonflikte lösen
CORS-Fehler interpretieren und lösen
Probleme mit iOS-Berechtigungen
Probleme mit Android-Berechtigungen
Fehler bei Gradle- und Xcode-Builds
Ionic und Capacitor - App-Bereitstellung
Erstellen eines produktiven Web-Builds
Synchronisieren des Web-Builds mit Capacitor
Erstellen eines Android-Release-Builds
Signieren von Android-Anwendungen
Veröffentlichung im Google Play Store
Erstellen eines iOS-Release-Builds
Code Signing und Provisioning unter iOS
Veröffentlichung im Apple App Store
Versionierung und App-Updates
Erstellen und Bereitstellen einer Progressive Web App (PWA)
Optional - Desktop-Anwendungen
Möglichkeiten zur Nutzung einer Ionic-Weboberfläche in Desktop-Anwendungen
Kombination mit Electron oder Tauri
Unterschiede zwischen Mobile-, Web- und Desktop-Deployment
Grenzen und zusätzliche Anforderungen einer Desktop-Anwendung