Ionic 6 Tutorial für Anfänger | 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.

Herausforderung & Ziel: Wir bauen eine Ionic App

Wir bauen eine „freundliche, anständige“ Ionic App, die Dich mit Deinem Lieblingsgruß begrüßt.

„Mehr als ein Hello-World-Projekt – einfach erklärt“

Das Tutorial gibt Dir eine Einführung in das Entwickeln einer App mit dem Ionic Framework.

Mit Ionic entwickelst Du für IOS, Android und Windows Phone zu gleich. Hört sich das gut an?

Deine „freundliche“ App – Ionic Tutorial mit Praxisbeispielen

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.

1. (Notwendig) Node Package Management: node.js zur Installation von Ionic

Erweiterungen [für fortgeschritten Nutzer sinnvoll]

1. (Optional) installiere den Java JDK, der die Entwicklungsumgebung für Android Studio für die Erstellung eine Android App zur Verfügung stellt.

(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.

Konzept: HTML, CSS, Angular 9

Um eine universelle Ionic App zu erstellen, schreiben wir die Ionic App mit HTML, CSS und Angular als TypeScript.

Das klingt im ersten Moment viel – wir brauchen ein paar Konzepte uns anzusehen.

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

Grundlagen: Wie funktioniert Ionic?

In diesem Abschnitt des Ionic Tutorials klären wir zum besseren Verständnis, wie die Sprachen in dem Ionic Framework zusammenarbeiten.

Du erfährst, auf welchen Grundlagen Ionic aufbaut und wie es die verschiedenen Sprachen verwendet.

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.

Coden: Jetzt wird’s ernst.

Ich hoffe, Du konntest npm und ionic  installieren, um einen schnellen und guten Start mit Ionic zu haben.

Jetzt wollen wir zusammen den ersten Code Zeilen für Ionic schreiben.

(Wenn nicht, schreibe in die Kommentare Deine Installations-Probleme)

Einrichtung eines Ionic-Projekts

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

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:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  name: String;

  constructor(public router: Router) { }


  openNextTab() {
    this.router.navigate(['tabs/tab2', { name: this.name }])
  }
}

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

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  name;

  constructor(private router: ActivatedRoute) {

    this.name = this.router.snapshot.paramMap.get('name');
  }
}

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

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  name;

  constructor(private router: ActivatedRoute) {

    this.name = this.router.snapshot.paramMap.get('name');
  }

}

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

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Two
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h1>Guten Tag, {{name}}!</h1>
</ion-content>

Das Ergebnis: Deine Ionic App ist „freundlich“

Und so sieht das Ergebnis aus:

Fertige App Seite 1

Erweiterungen: Wie kann ich die App erweitern?

Hast Du noch nicht genug von dem Ionic Tutorial?

Oder möchtest Du noch mehr von Ionic kennenlernen?

Dann zeige ich Dir in diesem Abschnitt, wie Du Deine App und Dein Wissen ausbauen kannst.

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

Wesentliche Ä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/angular@latest –save

ionic serve

Fazit: Deine Erste 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

Credits zu den verwendeten Bildern Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY