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?

Starten wir!

Ionic Tutorial – Das entwickelst Du heute

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

Du solltest schon einmal etwas programmiert haben. z. B. Java, Python oder jede andere Sprache. Falls nicht, kannst Du dir das Programmiern lernen Tutorial vorher ansehen. HTML und / oder CSS sind Kenntnisse vorteilhaft.

Computer vorbereiten

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.

Node Package Management: node.js zur Installation von Ionic

Einen beliebigen Code-Editor / Windows Editor. Ich liebe Visual Studio Code, da es für den Editor Erweiterungen gibt.

(Optional, wenn Du die App auf Dein Android Gerät installieren willst) installiere den Java JDK, der die Entwicklungsumgebung für Android Studio für die Erstellung eine Android App zur Verfügung stellt. Installiere Android Studio bzw. den Android SDK, um eine Android App für den Google Play Store hochzuladen.

Lege die Umgebungsvariablen für Java, Gradle und Android Studio an, um einen funktionierenden Build-Prozess anzustoßen.

(Optional, wenn Du die App auf Dein Apple Gerät installieren willst) Installiere Dir Xcode, um eine iOS App auf Deinem Geräte zu installieren.

Ionic Grundlagen – HTML, CSS, Angular

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“

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

• app.modles.ts – Einbindung der Module des gesamten Projekts z.B. Kamera Funktion – neue Ansichten
• 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
• variables.scss – Definition der Farben, Themas und Designs, die über die gesamte App gelten sollen
• tab1.page.html – die erste Ansicht, wenn man die App öffnet
• json – Datenabsicherungsstruktur

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 F12 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

Bitte kommentieren!

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