Ionic 4 Tutorial für Beginner | Angular + Cordova in Deutsch

Deine "freundliche" App - Ionic Tutorial mit Praxis Beispielen

Voraussetzungen: Dein Wissen

Du solltest schon einmal etwas programmiert haben. e.B. Java, Python oder jede andere Sprache
HTML und / oder CSS sind Kenntnisse vorteilhaft
Admin Rechte / Programme 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 Dein Geräte builden willst brauchst Du mehr.

(Notwendig) Nodes Packet Managment: node.js zur Installation von Ionic
Node Packet Management
(Notwendig) Ein beliebigen Code-Editor / Windows Editor . Ich liebe Visual Studio Code, da es für das Tool extra Erweiterungen gibt.
VS Code

Erweiterungen / für fortgeschritten Nutzer sinnvoll

(Optional) Installieren vom Java JDK - die Entwicklungsumgebung für Android Studio (Für die Erstellung eine Android App)
JDK
(Optional) Anmeldung bei Ionic Basic for Free: Damit wird er Build-Prozess vereinfacht (Konvertierung von Icons und Ladebildschirme) - ist nicht zwingend notwendig
Ionic Framework - Ionic Tutorial
(Optional) nur für de Mac: Installation von XCode und von Android Studio (Nur zum Builden von Apple Apps)
(Optional) Windows: Installieren von Android Studio (Nur zum Builden von Android Apps)
(Optional) Windows: Anlegen der Umgebungsvariablen - Wichtig, 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 schreibst Code: Du baust eine Ionic App, die in dem Apache Cordova Container auf den 3 bekanntesten Plattformen IOS, Android und Windows Phone läuft.

Ressource: Angular Dokumentation

Ionic ist ein spezielles Framework mit dem Du in sehr kurzer Zeit stabile, performante starke Apps bauen kannst. Ionic läuft auf Deinem Smartphone in eine Art Browser, der durch Ionic Native auf Dein Gerät zugreifen kann: die Kamera, den Geschwindigkeitssensor, Push-Notifikation, Kompass ...

Das macht Ionic zu einem extrem erweiterbaren und gebrauchbarem 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. Das Gerüst.

In den HTML Dateien werden mit den speziellen Ionic Tags das Aussehen der App definiert und die Verknüpfung der Buttons und Kontrollelemente angelegt. Die meisten Tags beginnen mit <ion- . Diese erstellen dieSteuerungselemente in der Grund-Farbpalette mit den notwendigen Formen.

Jederzeit kannst Du hier Angular in die HTML Datei einbauen.

Diese sind direkt mit der TypeScript Datei verbunden. Schreibst Du {{example}} an einer beliebigen Stelle die HTML Datei, kannst Du den Wert im TypeScript definieren example:sting = "Hallo Welt"; . In der App wird dann nur "Hallo Welt" angezeigt.

{{category.money}}

In {{}} kannst Du auch Methodenaufrufe schrieben, die im TypeScript File näher beschreiben sind. Diese geben z.B. mit return einen String zurück und schreiben den Wert in die HTML Datei.

  categories: any;

Du kannst auch andere HTML Tag 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 id und class kannst Du die Verbindung zu dem .scss Datei herstellen.

TypeScript. Der Motor.

Mit TypeScript, einer Weiterentwicklung von Microsoft, schaffen wir das Fachkonzept, die logische Struktur unserer App, die Buttons zum Leben erweckt. Wer Javascript schon kann, der ist hier klar im Vorteil, da Javascript in TypeScript gültig ist.

Let's begin: Grundlagen. Warm-up

Einfache Javascript Ausgabe nach Laden der App.

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

if-Anweisung für 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");
  }

Und nun eine Funktion, mit der man eine Seite "aufpoppen" lässt

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

TypeScript lädt die Daten von z. B. einer JSON Datei in die App.

Provider laden über eine relativen oder absoluten Link Daten in die App. POST sendet Formulare und GET fragt Daten ab.

Einrichtung eines Ionic-Projekts

Installiere Ionic mit dem nodes.js Paket Manager global über Dein System über das Windows Terminal mit Admin Befehlen:

npm install -g ionic cordova

Dann navigiert mit cd zu dem Ordner, in dem Du das Projekt einrichten willst. Dann gebe folgendes in das Terminal ein.

ionic start myFirstApp tabs --type=angular

Wenn die Meldung "Would you like to integrate your new app with Cordova to target native iOS and Android?" wähle "y".

Die Einrichtung dauert einen Moment (1-10 Minuten je nach Internet und PC).

Bei der Meldung "Install the free Ionic Pro SDK and connect your app?" tippe "n"

- Navigiere in den neuen Projektordner:

cd myFirstApp

Schauen wir uns mal das Ergebnis an und starten die rohe Ionic App in Deinem Browser (Vivaldi, Firefox, Chrome sind optimal).

ionic serve

Dann drücke F11 und schalte den Handymodus an.

Für das Entwickeln ist meistens ionic serve besser, da es schneller ist und mit den 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

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 es 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 greeting im Typscript File.

Meine erste Ionic App

Das ist normaler HTML Text. Eine normale Webseite

Wir hauchen den Button etwas Leben ein, in dem wir den Button um einen Funktionsaufruf ergänzen:

tab1.page.ts

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 diesem aus.

tab2.page.ts

Nun zur visuellen Ausgabe in tab2.page.html über eine Angular mit {{}} deutlich erkennbar. Noch etwas CSS und schon begrüßt die App Dich.

tab2.page.html

Das Ergebnis: Deine Ionic App "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 erleichert das Entwickeln ernorm, 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

6. Kapitel

Fazit: Gratulation zu Deinem mutigen 1. Hybriden 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, freute es mich, wenn Du unten die Seite kommentierst, mit Sternen bewertest 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 ...
Eure Erweiterungen Euer ersten Ionic App ...

Danke. Ich freue mich auf Euer Feedback

(10 votes, average: 4,70 out of 5)

Kommentare 10

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

Ionic 4 Tutorial für Beginner | Angular + Cordova in Deutsch

Ionic Tutorial - Inhalt - 6 Schritte zur Hybriden App

Herausforderung und Ziel

Coding und Umsetzung

Konzept und Lösungsansatz

Erweiterungen und Weiterführendes

Theorie einfach erklärt

Ziel und Fazit

Herausforderung & Ziel: Wir bauen eine Ionic App