Ionic Schulung für Einsteiger: Capacitor, iOS, Android und PWA

Kernkonzepte und Architektur von Ionic

• Ionic Framework, Capacitor und die Ionic CLI: wer welche Aufgabe übernimmt
• Plattformübergreifende Entwicklung: Ionic im Vergleich zu nativen Apps, Flutter und React Native
• Die WebView als Laufzeitumgebung und die Brücke zu nativen Plugins
• Ionic-Komponenten als Web Components mit Stencil und Wrappern für Angular, React und Vue
• Progressive Web-Anwendungen: Manifest, Service Worker und Installierbarkeit
• Capacitor als Nachfolger von Cordova: Unterschiede und Migration bestehender Apps

Einrichtung und erste Schritte

• Überblick über die Werkzeugkette: Node.js, Paketmanager, Ionic CLI, Xcode, Android Studio
• Ionic CLI installieren und Projekte mit ionic start aus Vorlagen erzeugen
• Ionic-Pakete aus npm und Einbindung über CDN für Prototypen ohne Build-Schritt
• Vorschau im Browser mit ionic serve und Geräteemulation in den DevTools
• Seiten, Komponenten und Services mit ionic generate anlegen
• Projektstruktur, Vite als Build-Werkzeug und capacitor.config.ts

Entwickeln für iOS und Android mit Capacitor

• iOS-Plattform hinzufügen, in Xcode öffnen, Signatur und Simulator einrichten
• Android-Plattform hinzufügen, in Android Studio öffnen und im Emulator starten
• Web-Build und native Projekte mit npx cap sync abgleichen
• Auf dem Gerät testen und Live-Reload mit ionic cap run --livereload
• Tipps zur Entwicklung: Remote-Debugging mit Safari Web Inspector und chrome://inspect
• Hardware-Zurück-Taste unter Android über das ionBackButton-Ereignis behandeln
• Bildschirmtastatur steuern: Keyboard-Plugin, Scroll-Verhalten und Eingabefelder
• App-Lebenszyklus: Seitenereignisse wie ionViewWillEnter und App-Status im Hintergrund

App-Oberflächen strukturieren

• Grundgerüst einer Seite mit ion-app, ion-header, ion-content und ion-footer
• Tabs, Seitenmenü und Split Pane für Smartphone und Tablet
• Responsive Raster mit ion-grid, Breakpoints und Spaltenangaben
• Globale Stylesheets und komponentenbezogene Styles sauber trennen
• CSS-Utilities für Abstände, Textausrichtung und Anzeige je Breakpoint
• Listen, Karten, Modals, Action Sheets und Toasts gezielt einsetzen
• Formulare mit ion-input, ion-select und Validierung im jeweiligen Framework

Theming und Dark Mode

• Grundlagen des Theming und die Plattform-Modi ios und md
• Globale und komponentenbezogene CSS-Variablen anpassen
• Komponenten im Shadow DOM über CSS Shadow Parts mit ::part() stylen
• Eigene Farben definieren: Basis-, Kontrast-, Schatten- und Tönungswerte
• Themes laden und zur Laufzeit wechseln, z. B. für Mandanten oder Marken
• Dark Mode: Paletten für Systemeinstellung, CSS-Klasse oder dauerhaft dunkel
• Fortgeschritten: High-Contrast-Paletten, Schriftgrößen und dynamische Schrift
• Farbgenerator und Themengenerator der Ionic-Dokumentation nutzen

Ionic mit Angular, React und Vue

• Erste App im gewählten Framework: Standalone Components, Hooks oder Composition API
• Navigation und Routing mit Angular Router, React Router und Vue Router
• Seitenstapel, Zurück-Navigation und Übergänge mit ion-router-outlet
• Globale Konfiguration: Modus, Animationen, Zurück-Text je Plattform
• Plattform-API: mit isPlatform und getPlatforms Code gezielt verzweigen
• Daten per HTTP laden, Ladezustände und Fehler mit Ionic-Komponenten anzeigen
• Zustandsverwaltung mit Services und Signals, Context oder Pinia

Gerätefunktionen und Datenspeicher

• Kamera und Fotogalerie mit @capacitor/camera, Berechtigungen auf iOS und Android
• Fotos mit @capacitor/filesystem speichern und Pfade für die WebView umwandeln
• Gespeicherte Fotos laden und in einer Galerie anzeigen
• Schlüssel-Wert-Daten mit @capacitor/preferences ablegen
• Größere Datenmengen offline in SQLite oder IndexedDB speichern
• Weitere Plugins: Geolocation, Netzwerkstatus, Push-Benachrichtigungen

Animationen, Gesten und Leistung

• Animationen mit createAnimation: Keyframes, Gruppen und Steuerung per Code
• Eigene Gesten mit createGesture, z. B. Wischen zum Erledigen
• Lange Listen performant darstellen: Virtual Scrolling und Infinite Scroll
• Bundle-Größe und Startzeit optimieren: Lazy Loading und Tree Shaking

Testen und Sicherheit

• Unit-Tests für Komponenten und Services mit Vitest oder Jasmine
• End-to-End-Tests im Browser mit Playwright oder Cypress
• Content Security Policy und sichere Kommunikation per HTTPS
• Tokens und Zugangsdaten sicher ablegen: Keychain und Keystore statt Preferences

Fehler finden und beheben

• Systematische Fehleranalyse: Browser, Emulator oder Gerät, Web oder nativ?
• Build-Fehler aus TypeScript, Vite, Gradle und Xcode lesen und beheben
• Laufzeitfehler mit Konsole, Breakpoints und Remote-Debugging eingrenzen
• Native Plattformfehler: Berechtigungen, Plugin-Versionen, Logcat und Xcode-Konsole
• CORS-Fehler verstehen und mit Server-Konfiguration oder CapacitorHttp lösen

Bereitstellung im Store, im Web und auf dem Desktop

• Veröffentlichung im Apple App Store: Zertifikate, Archiv, TestFlight und Review
• Veröffentlichung in Google Play: signiertes App Bundle und Testtracks
• Icons und Splashscreens für alle Plattformen mit @capacitor/assets erzeugen
• Dieselbe App als PWA bauen und auf einem Webserver bereitstellen
• Desktop-Variante mit Electron über die Capawesome-Plattform – @capacitor-community/electron ist unbetreut

Ionic-Entwicklung mit Coding-Agenten

• Projektregeln für den Agenten: Capacitor statt Cordova, Framework-Variante und Ionic-Version festlegen
• ionic build, Linting und npx cap sync als Prüfschritte nach jeder Änderung des Agenten
• Neue Capacitor-Plugins und Änderungen in ios/android nur nach Review übernehmen
• Agent erzeugt Seiten aus Ionic-Komponenten, Sichtprüfung in beiden Plattform-Modi
• Playwright-Tests im Browser als Abnahme, Gerätetest für Kamera und Dateisystem von Hand

Praxisprojekt: Inventur-App für ein Lager

• Artikel mit Foto, Menge und Lagerort erfassen, auch ohne Netzverbindung
• Lokale Speicherung in SQLite und Abgleich mit einer REST-API bei Netz
• Tabs für Erfassung, Liste und Einstellungen, Dark Mode nach Systemeinstellung
• Build für Android und iOS, Installation auf dem eigenen Gerät und PWA-Variante