Ionic mit React - Intensiv-Schulung für Einsteiger

Ionic ist eine der besten Technologien um auf Basis einer einzigen Codebasis Apps als normale (progressive) Web-Apps sowie als echte native mobile Apps für iOS und Android zu erstellen und auszuliefern.

Lernen Sie die aktuellste Version von Ionic von Grund auf kennen, wobei keine Vorkenntnisse vorausgesetzt werden. Mit React.js können Sie fantastische Webanwendungen erstellen, die auf TypeScript oder JavaScript basieren.

Wäre es nicht toll, diese React-Kenntnisse zu nutzen, um Webanwendungen zu erstellen, die in native mobile Apps kompiliert werden können, die auf jedem iOS- oder Android-Gerät laufen? Und sie gleichzeitig als progressive Webanwendungen (PWA) zu veröffentlichen.

Mit dem Ionic-Framework können Sie genau das tun. Nutzen Sie Ihre vorhandenen React-, HTML-, JavaScript- und CSS-Kenntnisse und erstellen Sie damit Ihre native mobile App. Ionic bietet eine Menge ausgereifter UI-Komponenten mit denen Sie nativ-ähnliche Benutzeroberflächen zusammenstellen können.

Und Capacitor kümmert sich um den Rest, denn Capacitor wird verwendet, um auf der Grundlage Ihres Codes eine native mobile App für iOS und Android zu erstellen. So können Sie sich auf die Dinge konzentrieren, die Sie beherrschen und Ihre Anwendung auf unterschiedlichen Geräten (Desktop und Mobile) veröffentlichen.

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.

Die Weiterbildung "Ionic mit React - Intensiv-Schulung für Einsteiger" bieten wir Ihnen als Firmenseminar sowie Inhouse-Schulung Live-Online und Vor-Ort an!