Ionic 5 Tutorial für Beginner | Angular + Cordova [deutsch]

Brauchst Du ein Ionic Tutorial, um eine App zu entwickeln?

Mit Ionic kannst Du effizient und schnell mit 1x Code schreiben und für Android, IOS und Windows Phone entwickeln.

Bereit für Deine 1. App?

Dieses Tutorial gibt Dir einen Einblick in die Grundlagen des Ionic Frameworks.

Deine "freundliche" App - Ionic Tutorial mit Praxis Beispielen

Voraussetzung: Dein Wissen

Du solltest schon einmal etwas programmiert haben. z. B. Java, Python oder jede andere Sprache
HTML und / oder CSS sind Kenntnisse vorteilhaft
Admin Rechte, um Programme zu installieren und deinstallieren

Technische Voraussetzungen: Notwendige Grundlage für Ionic

Für den Beginn reicht Node.js und ein Editor aus.

Wenn Du Apps für Deine Geräte builden, willst brauchst Du Android Studio oder Xcode.

(Notwendig) Node Package Management: node.js zur Installation von Ionic
Node Package Management - Ionic Tutorial
(Notwendig) Einen beliebigen Code-Editor / Windows Editor. Ich liebe Visual Studio Code, da es für den Editor Erweiterungen gibt.
VS Code

Erweiterungen [für fortgeschritten Nutzer sinnvoll]

(Optional) installiere den Java JDK, der die Entwicklungsumgebung für Android Studio für die Erstellung eine Android App zur Verfügung stellt.
JDK
(Optional) Anmeldung bei Ionic Basic for Free: Damit wird der Build-Prozess vereinfacht. Dort kannst Du Icons und Ladebildschirme formatieren lassen.
Ionic Framework - Ionic Tutorial
(Optional) Installiere Dir Xcode, um eine iOS App auf Deinem Geräte zu installieren.
(Optional) Windows: Installiere Android Studio bzw. den Android SDK, um eine Android App für den Google Play Store hochzuladen.
(Optional) Windows: Lege die Umgebungsvariablen für Java, Gradle und Android Studio an, um einen funktionierenden Build-Prozess anzustoßen.
Umgebungsvariablen

Was ist Ionic Framework und hybride Apps?

Stell Dir vor:

Du nimmst etwas HTML, CSS und Angular und code. Du baust eine Ionic App, die in dem Apache Cordova Container auf den drei bekanntesten Plattformen IOS, Android und Windows Phone läuft.

Drifty entwickelte Ionic, wofür das Unternehmen 1 Million US-Dollar Startkapital von den Arthur Ventures im März 2014 erhalten hat. Ende November 2013 veröffentlichten die Entwickler die erste Alpha-Version von ionc.

Ressource: Angular Dokumentation

Ionic gilt als ein hybirdes App-Framework mit dem Du in sehr kurzer Zeit stabile und performante Apps bauen kannst. Ionic läuft auf Deinem Smartphone in eine Art Browser, der auf die Sensoren des Handys mit Ionic Native zugreifen kann:

Kamera
Geschwindigkeitssensor
Push-Notifikation
Kompass
...

Das macht Ionic zu einem extrem erweiterbaren und nützlichen Framework.

Ordner und Orientierung im Ionic Projekt

So findest Du Dich in der Ionic Struktur zu recht

src/app- wichtigster Ort zum Programmieren. Hier sind alle Ansichten der App gespeichert
nodes_modules - die Hintergrund-Bibliotheken von JavaScript
assets - für alle Bilder, Audio und co, die in Deine App eingebunden werden sollen
Pipes / Providers / Themes - eigene "Erweiterungen"
app-routing.module.ts gibt die URL im Browser vor
app.component.scss, global.scss und theme/variable.scss sind globale Stylesheet-Dateien, die Du modifiziest, um das Ausehen zu ändern

Wichtigste Dateitypen im Ionic Projekt

.ts - TypeScript Datei - damit läuft die Seite dynamisch und tritt in Aktion
.html - das Design Template - Struktur und Aufbau der Seite
.scss ist eine Style Sheet Datei, in der Du Designanpassung wie bei normalen Webseiten vornehmen kannst

Wichtige, spezielle Dateien

ts - Einbindung der Module des gesamten Projekts z.B. Kamera Funktion - neue Ansichten
scss - Definition der Farben, Themas und Designs, die über die gesamte App gelten sollen
html - in dieser Datei wird das untere Tab Menü dargestellt. Hier kann man Icons, Text und Verlinkung zu den Seiten anpassen
html - die erste Ansicht, wenn man die App öffnet
xml - App-spezifische Einstellungen, Autoren-Kommentare, Einbindung von Screenshots und Icons
json - Datenabsicherungsstruktur

HTML - Die Struktur Deiner App

Die HTML-Datei definiert die Struktur Diener App und verweist bei einem Aktionselement auf den TypeScript-Code (Button-Link). Viele eigene Ionic-Tags beginnen mit dem Präfix <ion- .

Ionic kann für Dich die wesentlichen Steuerungselemente nach dem Baukasten-Prinzip erstellen. Du brauchst nicht einen Button für iOS und Android erstellen. Ionic generiert für Dich beim Builden das gewünschte gestylte Endprodukt.

In die HTML-Datei kannst Du an jeder Stelle Angular Code einbauen.

Schreibst Du in die HTML-Datei {{example}}, kannst Du die Variable im TypeScript definieren mit example:string = "Hallo Welt";

Der Browser gibt Dir Hallo Welt aus.

Rufe Methoden innerhalb der doppelt geschweiften Klammern {{sayHello()}} , die Du in der passenden TypeScript-Datei definiert hast. sayHello() gibt mit dem return einen String zurück und Angular schreibt den String an die Stelle in die HTML-Datei.

sayHello(){ return "Hello"; }

Du kannst andere HTML-Tags in der Datei nutzen und diese mit CSS gestalten. Nutze die zugehörige .scss Datei für die Gestaltung der Seite mit CSS. Das dient der Übersicht. Mit ids (#header) und classes (.buttons) kannst Du die Verbindung zu dem .scss Datei herstellen.

TypeScript - Was soll Deien App machen?

Mit TypeScript, einer JavaScript-Weiterentwicklung von Microsoft, schaffen wir das Fachkonzept, die logische Struktur unserer App, die Buttons zum Leben erweckt. Wer Javascript kennt, der ist hier klar im Vorteil, weil Javascript gültiger TypeScript-Code ist.

Let's begin: Grundlagen. Warm-up

Einfache Javascript Ausgabe nach Laden der App in ionViewDidLoad()

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailPage');
  }

if-Anweisung für die Geldsorte

  getCurrencySymbol(currency) {
    if (currency == "EUR") {
      return "€";
    } else {
      return "$";
    }
  }

Typischer Konstruktor, der Module einbindet und Parameter annimmt

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private http: HttpClient,
  ) {
    this.expenseNumber = this.navParams.get("expenseNumber");
  }

eine Funktion, mit der man eine neue Ansicht "aufpoppen" lässt

  openEditPage() {
    this.navCtrl.push(EditPage);
 }

TypeScript kann Datensätze in der Form von JSON in die App laden.

Provider laden über einen relativen oder absoluten Link JSON-Dateien in die App. Ein HTTP-POST-Anfrage sendet Daten zum Server, während eine GET-Anfrage die Daten abfragt.

Einrichtung eines Ionic-Projekts

Installiere Ionic mit dem node.js Paket Manager global über Dein System über das Windows Terminal mit Admin Befehlen
npm install -g ionic cordova
Navigiere mit cd zu dem Ordner, in dem Du das Projekt einrichten willst
cd OrdnerName
Erstelle ein neues Projekt mit
ionic start myFirstApp tabs --type=angular
Wenn die Meldung kommt
"Would you like to integrate your new app with Cordova to target native iOS and Android?"
Wähle y
Die Einrichtung eines Ionic Projekts dauert einen Moment (1-10 Minuten je nach Internet und PC)

Ionic Tutorail
Bei der Meldung
"Install the free Ionic Pro SDK and connect your app?"
Wähle n
Navigiere in den neuen Projektordner mit
cd myFirstApp
Schauen wir uns mal das Ergebnis an und starten die blanke Ionic App in Deinem Browser (Vivaldi, Firefox, Chrome sind optimal).
ionic serve
Drücke F11 und wechsele in den Handy-Modus.

Für das Entwickeln ist meistens ionic serve besser, weil der Befehl schneller ist und mit dem Developer Tools von Chrome besser nutzbar ist.

ionic serve

Wenn Du alles richtig gemacht hast, sieht es so aus wie oben im Bild.

Das Programmieren der hybriden App mit Ionic

Falls Du Probleme bei der Einrichtung hattest, schreibe es bitte in den Kommentar unten. Ich werde so schnell wie möglich auf Deine Frage reagieren.
Bei erfolgreicher Einrichtung des Projekts öffne die Datei tab1.page.html und säubere die Datei so, dass wir mit arbeiten können:

Jetzt erstellen wir einen Button und ein Textfeld zur Texteingabe und einen erkennbaren Titel. Der Button ist abgerundet mit dem Attribut round und die Button-Farbe wird durch die Sekundärfarbe color="secondary" festgelegt.

Mit den ngModel speichern wir die Eingabe von der Begrüßung in die Variable greeting, die wir vorher in der TypeScript-Datei definiert haben.

tab1.page.ts - Verweis mit Angular Route

Im nächsten Schritt bearbeiten wir den zweiten Tab. Dort soll der Button Deinen Namen weiterleiten und dort anzeigen.

Dafür brauchen wir eine Angular Route. Eine Angular Route funktioniert wie eine URL. Du verweist durch die navigate-Funktion auf den Tab tabs/tab2 und fügst den Namen als einen Parameter an. Auf der anderen Seite nimmt die tabs2.page.ts den Parameter entgegen und gibt diesen aus.

tab2.page.ts - Ausgabe des Namens

Die Ausgabe in tab2.page.html über eine Angular markieren die geschweiften Klammern{{}}. Noch etwas CSS und schon begrüßt die App Dich.

tab2.page.html

Das Ergebnis: Deine Ionic App ist "freundlich"

Und so sieht das Ergebnis aus:

Fertige App Seite 1

Wichtigste Terminal-Befehle für das Ionic Framework

Bei Ionic kannst Du viel mit dem Terminal arbeiten. Das Live Reload erleichtert das Entwickeln enorm, da Du nicht immer neu starten musst.

Wenn Du ionic serve ausgeführt hast und zugleich die Datei bearbeitest, wird beim Speichern der Datei die Ionic Seite im Browser komplett neu geladen.

Das spart eine Menge Zeit.

Hier sind noch weitere interessante Befehle, die Du beim Programmieren mit Ionic gebrauchen könntest.

Ressource: Ionic CLI

ionic serve // starte die Browser Ansicht ionic lab // Starte die "schönere" Browersansicht ionic gerneate page meineNeueSeite // Generiert Seite ionig gnerate provider getMyData // neue Daten

Wesentiche Änderung von Ionic 5

Der Sprung von Ionic 4 zu 5 ist nicht riesig.

Update Dein Angular Controller und Du bist Uptodate. Ionic unterstützt Angular, React, Vue und pures JavaScript

Ionic verbessert mit Ionic 5:

Dunkleres und optisch besseres iOS Darkmode für Ionics Segment
App-Header kann in mit verschieden großen Titeln
Große Titel für den iOS Style
Wische-um-zu-schließen-Modal
Seitenmenu für iOS (wie bei Android)
Neue Ionic Animationen mit eigenen Klassen. Diese basieren auf JavaScript und viel CSS.
Neue Version von Ionic Icons 5
Einfaches Anpassen mit der Shodow DOM. Jetzt sind der Zurück-Button, Karte, Segmente und die Teilungs-Ansicht leichter veränderbar. Wenn Du Dich im Allgemeinen über die Shadow DOM informieren willst, finde weitere Informationen in den Mozilla Docs.
CSS Utilities sind anders benannt: Statt text-center tippst Du in Ionic 5 class="ion-text-center"

Die Veränderungen an den Ionic Komponenten kannst Du in GitHub unter „Wesentliche Veränderung von Ionic 4 auf 5“ nachlesen.

Ionic 5 ist kompatibel mit Angular 9.

Angulars neuste Version kommt ohne EntryComponentes aus. Starte Ionic mit ionic serve oder ng serve.

Wenn Du noch Ionic 4 nutzt, kannst Du Angular updaten mit dem Befehl

npm i @ionic/[email protected] –save

ionic serve

6. Kapitel

Fazit: Gratulation zur 1. App

Du hast es geschafft. Deine erste eigne Ionic App ist fertig. Nach all den Installationen und Code Zeilen, kannst Du Dir eine Pause gönnen.

Damit das Tutorial noch besser wird, freut es mich, wenn Du unten das Tutorial kommentierst oder mit Deinen Freunden teilst.

Schreibt von Fehlern, die auftreten ...
Textstellen, die undeutlich geschildert wurden
Kritik mit Verbesserungsvorschlägen ...
Vorschläge für neue Post ...
Installationsprobleme ...
Deine Erweiterungen der 1. Ionic App ...

Danke. Ich freue mich auf Dein Feedback

Kommentare 15

Markus Schmid
15.03.2019 um 15:33
Guten Tag
Danke für die gute Anleitung, alles scheint gut zu laufen, ausser wenn ich im Browser localhost:8100/ionic-lab eingebe, erscheint eine weisse Seite (Fehler: Verbindung fehlgeschlagen).
Noch aufgefallen:
– Unter MyApp/src habe ich eine Datei index.html und im Unterordner app app.compenent.html, aber nirgends eine home.html
Antworten
- Steffen Lippke
  15.03.2019 um 18:34
  Gebe in die Konsole zuerst ionic serve ein, um Ionic zu starten.
  Dann kannst Du die App im Browser unter localhost:8100/ aufrufen
  Antworten
joni
16.06.2019 um 19:42
Wie binde ich PHP ein?
Antworten
- Steffen Lippke
  14.08.2019 um 15:30
  Ionic ist nur JavaScript. Aber Du kannst ein PHP-Backend auf Deinem Server schreiben. Mit HTTP-GET kannst Du z. B. Datenbanken auslesen.
  Antworten
Alex Müller
14.08.2019 um 10:45
Hi,
dein Tutorial ist klasse, aber wenn ich ein Projekt mit
ionic start MyApp tabs oder
ionic start MyApp tabs –type=ionic-angular
starte, ist das niemals in ionic 4 sondern immer 3.9.x
weißt du zufällig, wie man ionic v projekte startet?
Antworten
- Steffen Lippke
  14.08.2019 um 15:29
  Hallo Alex,
  probiere mal:
  npm install -g @ionic/cli
  ionic start
  Ein Ionic-4-Projekt erkennst Du an den Tag .
  Antworten
Jasmin
14.10.2019 um 08:59
Hallo bei mir wird die Navigation nicht angezeigt bzw zeigt mir fehler…
Er sagt zu mir Router gibt es nicht: es handelt sich um diese Zeile:
export class ListPage {
name: String;
constructor(public router: Router) { }
openNextPage() {
this.router.navigate([‚page/neuinstallation-repeater‘, { name: this.name }])
}
}
Danke im Vorraus!
Gruß Jasmin
Antworten
- Steffen Lippke
  26.10.2019 um 15:00
  Hallo Jasmin,
  hast Du den Router in auch oberhalb importiert? Was ist mit der Fehlermeldung?
  Antworten
Reiner Knudsen
25.10.2019 um 18:07
Könnte es sein, dass Deine Beschreibung (z.B. „home.html“) und Deine Code-Beispiele (z.B. „tab1.page.html“) nicht ganz zusammenpassen? Scheint mir, dass Du hier zwei unterschiedliche Templates vermischt hast, oder?
Aber das Tutorial ist soweit gut. Dem kann ich (einigermaßen) folgen.
Antworten
- Steffen Lippke
  26.10.2019 um 14:59
  Hallo Reiner,
  habe die Textstellen angepasst. Danke für den Hinweis. Das Tutorial habe ich von Ionic 3 auf Ionic 4 upgeradet.
  Antworten
Oliver
19.11.2019 um 10:20
Für Alle die hinter einem Proxy hängen:
https://ionicframework.com/docs/cli/using-a-proxy
Für Alle bei denen Ionic.ps1 (Powershell-Script) blockiert wird:
https://www.borncity.com/blog/2010/02/24/powershell-skripte-lassen-sich-nicht-ausfhren/
Antworten
- Steffen Lippke
  23.11.2019 um 08:34
  Danke für die Links!
  Antworten
Meike
06.03.2020 um 08:35
Hallo, bei:
Test
erscheint folgende Fehlermeldung: Identifier ‚openNextTab‘ is not defined.
Was kann ich tun?
Danke und viele Grüße
Antworten
- Steffen Lippke
  07.03.2020 um 18:01
  Hallo Mike,
  ich kann aus Deiner kurzen Beschreibung nur ableiten, dass Du eine Ionic Page nicht richtig in app.module.ts referenziert hast. Für eine sichere Antwort brauche ich von Dir Code und die gesamte Fehlerbeschreibung. Sonst muss ich raten 🙂
  Grüße
  Steffen
  Antworten
- Steffen Lippke
  17.07.2020 um 16:08
  Kannst Du die gesamte Fehlermeldung und den Code zu openNextTab in den Kommentar schreiben. Das hilft mir weiter…
  Antworten

Schreibe einen Kommentar Antworten abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Ionic 5 Tutorial für Beginner | Angular + Cordova [deutsch]

Ionic Tutorial - Inhalt - 6 Schritte zur Hybriden App

Ziel

Coding

Konzept

Erweiterung

Grundlagen

Fazit

Herausforderung & Ziel: Wir bauen eine Ionic App