Ionic mit React - Intensiv-Schulung für Einsteiger

Institut: HECKER CONSULTING
Bereich: Technik, EDV, Telekommunikation

Kurs merken

Anmelden

Kursbeschreibung

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.

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 plattformübergreifende Anwendungen mit React.js und dem Ionic-Framework. Verwenden Sie mit Ionic eine Codebasis, um drei verschiedene Apps (iOS, Android, Web) bereitzustellen.

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.

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

K…

mehrweniger lesen

Wann & Wo

Website

https://www.hco.de

Datum

auf Anfrage

Uhrzeit

09:00

Dauer

ab 1 Tag nach Vereinbarung

Ort

Virtuelles Klassenzimmer, Live-Online-Seminar

Kontakt

E-Mail

info@hco.de

Kontakt

Peter Hecker

Straße

Erkrather Str. 401

PLZ

40231

Ort

Düsseldorf

Land

Deutschland

Bundesland

---

Tel

+49 211 542 480 40

Voraussetzungen

Keine besonderen Anforderungen.

Ziele

Zielgruppe

Interessenten mit abgeschlossener Berufsausbildung oder Berufserfahrungen im Medienbereich, Kommunikationsbereich oder kaufmännischen Bereich, die sicher im Umgang mit dem PC sind sowie eine Affinität zum Internet und digitalen Medien haben und eineIonic mit React - Beratung, Coaching, Workshop, Training suchen!

Weitere Daten

Kursnummer

6173d58af1dd886284fc

Plätze