💡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

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

Capacitor im Projekt installieren und einrichten

Zuerst musst du das Projekt einmal builden:

npm run build

1. Capacitor im Projekt installieren

Nimm dein Übungsprojekt (Angular Heroes in Ionic) von gestern und installiere darin Capacitor:

Als erstes installiere Capacitor und die Capacitor CLI im Projekt:

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