App Entwicklung mit Ionic 4 – Programmierung einer einfachen App für Einsteiger

App Entwicklung ist ein wirklich spannendes Thema. Mit dem Hybrid-System Ionic ist es möglich, plattformübergreifende Apps auf HTML, CSS und Typescript-Basis zu erstellen. In diesem Tutorial erstellen wir gemeinsam eine simple App, mit der man sich nach einem Klick auf den Bildschirm verschiedene, zufällig generierte Begriffe anzeigen lassen kann.

Bevor wir mit dem Programmieren der App beginnen

Bevor Du dieses Tutorial durcharbeitest, solltest Du zumindest ein grundlegendes Verständnis der Ionic Konzepte haben. Außerdem musst Du Ionic bereits auf Deinem Rechner installiert haben. Falls Du mit Ionic noch nicht vertraut bist, empfehle ich Dir, zuerst meinen Artikel Ionic App Entwicklung – Erste Schritte zu lesen, um die grundlegenden Konzepte zu verstehen.

Neues Ionic-Projekt erstellen

Wir beginnen damit, ein neues Projekt auf der Grundlage der „leeren“ Vorlage zu generieren. Dies ist meistens ein leeres Skelettprojekt, aber es gibt ein wenig Beispielcode, den wir anschließend entfernen werden.

Öffne den Terminal, bewege Dich in den Ordner, in den Du Dein neues Ionic Projekt anlegen möchtest und gib folgenden Befehl ein:

Sobald der Code generiert ist, öffne das Projekt in Deinem favorisierten Texteditor.

Im Grunde genommen befinden sich alle Komponenten (unsere Anwendung wird aus einem Bündel verschiedener Komponenten bestehen) für unsere Anwendung im Ordner src (einschließlich der Root-Komponente im Ordner app). Eine Komponente wird aus einer Vorlage (.html-Datei), einer Klassendefinition (.ts-Datei) und vielleicht einem Styling (.scss-Datei) bestehen.

Im Moment gibt es nur eine einzige HomePage-Komponente, die eine Dummy-Ansicht einrichtet. Wir werden diese so modifizieren, dass sie den Anforderungen unserer App entspricht.

Ich möchte damit beginnen, einen Blick auf die Datei src/app/app.component.ts zu werfen, die automatisch generiert wird. Je nach Ionic-Version, könnte sich diese Datei unterscheiden. Lass Dich davon nicht verwirren. 🙂

Die Datei app.component.ts definiert unsere Stammkomponente. Diese Komponente ist im Vergleich zu den übrigen Komponenten etwas Besonderes, da sie die erste Komponente ist, die der Anwendung hinzugefügt wird, und von dort aus können wir weitere Komponenten anzeigen, die dann noch mehr Komponenten hinzufügen können und so weiter. Im Grunde ist unsere Anwendungsstruktur wie ein Baum mit der Wurzelkomponente an der Wurzel dieses Baumes.

Wir sind in der Lage, Variablen oberhalb des Konstruktors (constructor) zu deklarieren, um sie zu Member-Variablen oder Klassenmitgliedern zu machen, d.h. sie sind durch Verweis auf this.myVar in der gesamten Klasse zugänglich und stehen auch Deinen Vorlagen zur Verfügung.

Nach der ersten Einrichtung sollten wir, nachdem wir im Terminal im Root-Verzeichnis ionic serve eingeben, folgendes im Browser sehen:

Die Startseite einrichten

Nun, da wir unsere Basisanwendung eingerichtet haben, sollten wir damit beginnen, unsere Logik zu erstellen. Zuerst richten wir unsere Vorlage für unsere App ein.

Ändere src/app/home/home.page.html wie folgt:

Wir setzen den Titel der entsprechenden Seite auf „App Entwicklung mit Ionic“.

Wir verwenden (click), um einen Click-Listener an ein Element anzuhängen, der die Funktion changeTitle() in home.page.ts aufruft. In einfachen Worten: Wenn jemand auf das Element klickt, wird die Funktion ausgeführt, die im (click)-Listener angegeben wird.

Außerdem fügen wir eine Variable hinzu, die title heißt. Hier wird später unser jeweiliger Begriff erscheinen.

Programmierung der Klassendefinition

Da wir in unserer home.page.html einige Angaben gemacht haben, müssen wir die jeweiligen Daten nun erstellen. Aktuell gibt es nämlich noch keine Variable title und auch keine changeTitle()-Methode. Wir möchten uns die benötigten Daten nun anlegen.

Ändere src/app/home/home.page.ts wie folgt:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  title: string;
  fruits = ['Erdbeere', 'Banane', 'Apfel', 'Birne', 'Blaubeere', 'Ananas', 'Traube', 'Kaki', 'Pfirsisch', 'Maulbeere'];

  constructor() {}

  changeTitle() {
    let randomFruit = this.fruits[Math.floor(Math.random() * this.fruits.length)];
    this.title = randomFruit;
  }

}

Was machen wir hier? Zunächst definiere ich zwei Variablen, die ich innerhalb der Klasse und im Frontend verwenden kann. Zum Einen erstelle ich die Variable title und weise ihr den Typ string zu. Ich sage ihr also, dass diese Variable nur Inhalte vom Typ String besitzen darf. Außerdem erstelle ich einen Array, den ich fruits nenne. Dort definiere ich einige Namen von Früchten, die ich gleich per Zufallsprinzip nach einem Klick auf den Bildschirm anzeigen möchte.

Kannst Du Dich daran erinnern, dass wir in der home.page.html den (click)-Eventlistener hinzugefügt haben? Hier legen wir diesen nun an und bestimmen die Funktion, die ausgeführt werden soll, nachdem auf den Bildschirm geklickt wurde. Im Detail:

Dieser Code ist dafür zuständig, den Array zu „shufflen“ bzw. durchzumischen und mir danach jeweils den ersten Wert auszugeben.

Den Wert, der mir generiert wurde, weise ich meiner Variable this.title zu. Erinnerst Du Dich? Das ist die Variable, die wir auch im Frontend angegeben haben. Dieser Variable wird also nach jedem Klick ein neuer Wert zugewiesen und aktualisiert sich automatisch.

Entwicklung des Designs

App Entwicklung funktioniert nicht ohne Design. Damit das Ganze etwas hübscher aussieht, hast Du in der src/home/home.page.scss die Möglichkeit, CSS bzw. SCSS-Code auszuführen, der sich lediglich auf diese Seite auswirkt:

Fertig! Du hast Deine eigene App entwickelt!

Nachdem wir die Seite mit ionic serve im Browser oder beispielsweise mit ionic cordova emulate ios im Emulatur öffnen, können wir auf den Bildschirm klicken und sehen, wie wir zufällig generierte Begriffe aus unserem Array angezeigt bekommen. Super!

So schnell hast Du eine App erstellt, die bereits eine gewisse Logik enthält. Wie Du die App für die verschiedenen Systeme (iOS, Android) bereitstellst und in den Store veröffentlichst, zeige ich Dir in einem anderen Artikel. Bis dahin ist dieser Link sehr nützlich: https://ionicframework.com/docs/publishing/app-store