Ionic mit React - Intensiv-Schulung für Einsteiger - Inhouse von HECKER CONSULTING

Erstellen Sie plattformübergreifende Anwendungen mit React.js und dem Ionic-Framework. Verwenden Sie mit Ionic eine Codebasis, um drei verschiedene Apps (iOS, Android, Web) bereitzustellen.

Einstieg in das Ionic Framework

• Was ist Ionic?
• Warum Ionic?
• Warum React?
• Die Entwicklung von Ionic
• Ionic-Alternativen
• Die Anatomie eines Ionic-Projekts

Ionic - Die Grundlagen

• Ionic Überblick
• Ionic-Komponenten verwenden
• Weitere Ionic-Komponenten
• Hinzufügen von JavaScript
• Styling und das Oberflächen-Raster
• Über Icons und Slots

Kombinieren von Ionic und React.js

• Ein Projekt erstellen
• Analyse des erstellten Projekts
• TypeScript und React
• Ionic-Komponenten und React-Komponenten
• Erstellen der ersten Benutzeroberfläche
• Hinzufügen von React-Logik
• Zustandsverwaltung
• Aufteilung der App in Komponenten
• Eine Warnung anzeigen
• Hinzufügen von Segment-Schaltflächen
• Verbinden von Komponenten

Erstellen von nativen mobilen Apps mit Capacitor

• Erstellen einer Web-App
• Erstellen einer Android-App
• Ausführen der App auf einem echten Android-Gerät
• Ausführen von Apps als mobile Apps
• Erstellen einer iOS-App

Fehlersuche und Debugging von Ionic-Anwendungen

• Verstehen von Fehlermeldungen
• Browser DevTools und Haltepunkte
• UI-Fehlersuche
• Debugging von nativen Anwendungen

Styling + Theming

• Wie Styling funktioniert
• Mit Theming und Variablen vertraut werden
• Verwendung des Ionic-Farbgenerators
• Plattformspezifische Stile
• Komponentenspezifische Variablen
• Das Responsive Ionic Grid
• Anwenden des Grids auf die App
• Konfigurieren einer Komponente über Props
• Hinzufügen eigener CSS-Stile

Navigation in Ionic mit Stack-Navigation, Tabs, Side Drawers

• Eine erste Seite und Routing
• Hinzufügen einer zweiten Route
• Push-Pop-Navigation
• Programmatische Navigation
• Hinzufügen von Tabs
• App-weite Komponentenstil-Variablen
• Arbeiten mit dynamischen Routes
• Den "Zurück-Button" stylen
• Hinzufügen eines Seitenmenüs
• Weitere Styling- und Animationskorrekturen
• Tabs und Side Drawer kombiniert

Vertiefung der Ionic-Komponenten

• Mehr über die Kartenkomponente
• Rendering einer Liste mit Elementen
• Hinzufügen von Aktionen zu Listenelementen
• Elemente „swipen“
• Symbolleisten-Schaltflächen und schwebende Aktions-Schaltflächen
• Eine Warnung anzeigen
• Präsentieren einer Toastnachricht
• Ein Modal anzeigen
• Hinzufügen von modalem Inhalt
• Schiebeelemente schließen

Behandlung von Benutzereingaben und Anwendungsstatus

• Abrufen und Validieren von Benutzereingaben
• Übergabe von Daten an die modale Seite
• Einrichten des Anwendungskontextes
• Hinzufügen eines Ziels
• Löschen und Aktualisieren von Zielen
• Alle Ziele behandeln + Warnungen beheben
• Ziele filtern

Verwendung nativer Gerätefunktionen

• Hinzufügen von Tabs zur Navigation
• Hinzufügen von Symbolleisten-Schaltflächen + Fabs
• Theming der App
• Capacitor-Framework hinzufügen
• Verwenden der Gerätekamera
• Verwenden der Dateisystem-API
• Sammeln von Benutzereingaben
• Speichern von Daten im Kontext
• Bilder über den Kontext abrufen
• Speichern und Laden von Daten über Gerätespeicher
• Code-Refactoring
• Native APIs im Browser
• Einen Fallback einrichten
• Ausführen auf einem echten Gerät

Ionic - Apps optimieren

• Gemeinsame Nutzung einer Seiteninhaltskomponente
• Aufteilung der App in mehrere Komponenten
• Wiederverwendung von Typen
• App-Logik zentralisieren
• Hinzufügen von Lazy Loading

Veröffentlichen der Ionic-Apps

• Konfigurieren der Apps
• Hinzufügen von Icons und Splash Screens
• Veröffentlichen einer Web-App
• Veröffentlichen einer Android-App
• Veröffentlichen einer iOS-App

Erstellen Sie realistische Anwendungen und lernen dabei die Grundlagen des Ionic Framework, die umfangreiche Ionic-Komponentenbibliothek, das Abrufen und Verarbeiten von Benutzereingaben, das Speichern von Daten und den Zugriff auf native Gerätefunktionen und vieles mehr kennen. Sie werden in alle wichtigen Ionic-Komponenten eintauchen sowie in Konzepte wie Navigation (Tabs, Sidemenus), Benutzereingaben, native Gerätefunktionen (z.B. Kamera etc.), Speicherung, HTTP-Zugriff, Authentifizierung. Erfahren Sie auch, wie Sie Ihre Apps entweder im Browser, auf einem Emulator oder auf Ihrem eigenen Gerät ausführen können.