Apps für iOS & Android entwickeln mit Ionic Capacitor

Als bessere Alternative zu Cordova soll Capacitor Entwicklern dabei helfen, ihre Webanwendung zu einer nativen App zu machen. Dabei wird der aus HTML, CSS und Javascript bestehende Quellcode in einen nativen Wrapper gepackt, sodass es sogar möglich ist auf die geräteinternen API’s wie z.B. das Flashlight oder die Kamera zuzugreifen. Bei Capacitor wird im Gegensatz zu Cordova nur einmal das Xcode bzw. Android Studio Projekt generiert und nachträgliche Änderungen einfach in den entsprechenden Ordner kopiert. Bei Cordova musste hingegen das gesamte Projekt für jede Plattform jedes Mal neu generiert werden. Ebenso fällt bei Capacitor die config.xml weg. Einstellungen müssen nun direkt im jeweiligen Projekt (Xcode / Android Studio) vorgenommen werden.

Um mit Capacitor zu starten müssen wir uns entscheiden, ob wir dieses z.B. direkt mit dem Ionic Framework machen, oder Standalone, also ohne drittes Framework. In diesem Beispiel nutzen wir Ionic, da es uns alle benötigten Komponenten für die mobile App-Entwicklung bietet. Um ein neues Projekt zu starten führen wir unten stehenden Befehl aus. Voraussetzung hierfür ist, dass alle Abhängigkeiten (Dependencies) bereits auf unserem PC installiert sind.

ionic start

Anschließend werden wir nach dem Namen der App und ein paar weiteren Angaben gefragt. Unter anderem, ob wir Capacitor nutzen möchten. Dies bestätigen wir wie folgt mit „y“:

Nun zu den weiteren Vorgehensweisen mit Capacitor. Als erstes müssen einen Build aus unseren Ionic Files machen:

ionic build

Anschließend können die entsprechenden Plattformen hinzugefügt werden:

npx cap add ios
npx cap add android

Daraufhin werden das Xcode Projekt und Android Studio Projekt angelegt, welche wir dazu nutzen können, um die App auf unserem Smartphone zu installieren. Haben wir die App bzw. die Ionic Files nachträglich angepasst, müssen wir erneut einen Build machen und diesen in die beiden Projekte kopieren:

ionic build
npx cap copy

Diese beiden Befehle werden müssen kontinuierlich ausgeführt werden, um die Änderungen in die beiden nativen Platformen zu bewegen.

Native Plugins hinzufügen

Die nativen Plugins bzw. API’s sind auf dieser Seite in der linken Spalte ganz unten zu finden: https://capacitor.ionicframework.com/docs/apis/
Mit diesen können wir wie oben angekündigt z.B. ganz einfach auf die Kamera des Gerätes oder wie in diesem Beispiel auf den Browser zugreifen. Das ganze geschieht wie folgt: Wir öffnen die TypeSctipt Datei der Page in die das gewünschte Feature integriert werden soll und fügen ganz oben bei den Imports diese Zeile hinzu:

import { Plugins } from '@capacitor/core';

Unterhalb des Contructors können wir das Plugin dann verwenden:

async openBrowser() {
  const { Browser } = Plugins;
  await Browser.open({ url: "https://ionicframework.com" });
}

Die Funktion muss natürlich entprechend im HTML File z.B. mittels eines Buttons referenziert werden:

<ion-button (click)="openBrowser()">
   Ionic Framework
</ion-button>

Der wichtigste Part ist Capacitor wissen zu lassen, dass ihr ein natives Plugin hinzugefügt habt. Dazu führt ihr folgenden Bafehl im Terminal bzw. der Konsole aus:

ionic build
npx cap sync

Der Unterschied zwischen „copy“ & „sync“

„npx cap sync“ kommt zum Einsatz wenn ihr Plugins (auch Cordova Plugins) zu eurem Projekt hinzufügt, da dementsprechend der native Code angepasst werden muss. Für alle anderen Änderungen reicht es „npx cap copy“ zu nehmen um alle Files aus der Web Directory in die Projekt zu kopieren. Auch hier noch mal der Hinweis vorher immer „ionic build“ auszuführen.