💡App auf Gerät laufen lassen

Vorbereitungen

Um Capacitor brauchen zu können müssen folgende Punkte erfüllt sein:

• NodeJS ist installiert

• Ionic CLI ist installiert

• Android Studio wurde runtergeladen und installiert

• (für macOS-User, wenn auf iOS deployed werden soll) Xcode ist installiert

Capacitor im Projekt installieren und einrichten

Zuerst musst du das Projekt einmal builden:

npm run build

1. Capacitor im Projekt installieren

Wenn du dein Projekt mit dem ionic Generator erstellt hast, sollte Capacitor bereits mit dabei sein.

Wenn in deinem Projekt noch kein Capacitor installiert ist (check im package.json), kannst du es so installieren:

npm i @capacitor/core
npm i -D @capacitor/cli

2. Plattform(en) installieren

Jenachdem, für welche Plattform(en) du deine App entwickeln möchtest, kannst du diese nun installieren:

npm i @capacitor/android 
npm i @capacitor/ios

und hinzufügen:

npx cap add android
npx cap add ios

Dies wird deinem Projekt einen neuen Ordner ios oder android hinzufügen und darin ein natives App-Projekt (für Android Studio oder Xcode) erzeugen.

3. Web Projekt ins native Projekt syncen

Damit die neuste Version deines Web-Projekts in den nativen Container geladen wird, kannst du folgenden Befehl ausführen:

# Projekt bauen
npm run build

# Ins native Projekt syncen
npx cap sync

Diese Befehle musst du immer wieder ausführen, wenn du die neuste Version auf deinem Gerät oder im Simulator testen möchtest

5. Natives Projekt starten

Android - Android Studio

Nun kannst du mit Android Studio den android Ordner in deinem Projekt öffnen, oder dies direkt mit diesem Befehl machen:

npx cap open android

Wenn du Android neu installiert und noch nie zuvor gestartet hast, musst du es zuerst einmal ohne den Befehl starten, damit Android Studio noch alles installieren kann, was es braucht.

Mit dem Android Studio kannst du deine hybride Ionic App nun auf ein natives Gerät oder einen Simulator installieren und dort den geschrieben Code testen.

Überprüfe in (1) ob du die richtigen Permissions (2) gesetzt hast. In der Toolbar solltest du ein verbundenes Gerät (3) finden und kannst deine App darauf laufen lassen (4).

Alternativ kannst du bei (3) auch einen Simulator auswählen.

Eine detaillierte Anleitung dazu findest du hier:

Capacitor Android Documentation | Capacitor Documentation

Ähnlich wie bei iOS müssten wir für Android auch die entsprechenden Zugriff auf die nativen Komponenten freischalten. Bei Android findest du dies in der AndroidManifest.xmlDatei, du findest diese Datei unter android/app/src/main/.

Auf deinem Android-Gerät muss in den Entwicklereinstellungen USB-Debugging aktiviert sein.

iOS - Xcode

Um in Xcode die App auf ein echtes Gerät installieren zu können, benötigst du zuerst einen Apple Developer Account. Diesen kann man inzwischen kostenlos erstellen. Erst, wenn man eine App im App Store veröffentlichen möchte, muss man CHF 109.00 pro Jahr bezahlen.

Nun kannst du mit Xcode die App.xcworkspace im Ordner ios/App in deinem Projekt öffnen, oder dies direkt mit diesem Befehl machen:

npx cap open ios

Mit Xcode kannst du deine hybride Ionic App nun auf ein natives Gerät oder einen Simulator installieren und dort den geschrieben Code testen.

Oben kannst du zwischen einem angeschlossenen Gerät und einem Simulator wählen und mit wird die App installiert und gestartet.

Eine detaillierte Anleitung zu Capacitor und iOS findest du hier:

Getting Started | Capacitor Documentation