# App auf Gerät laufen lassen

## Vorbereitungen

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

* [NodeJS](https://nodejs.org) ist installiert
* [Ionic CLI](https://ionicframework.com/docs/cli) ist installiert
* [Android Studio ](https://developer.android.com/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:

```bash
npm run build
```

### 1. Capacitor im Projekt installieren

{% hint style="info" %}
Wenn du dein Projekt mit dem ionic Generator erstellt hast, sollte Capacitor bereits mit dabei sein.
{% endhint %}

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

```bash
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:

```bash
npm i @capacitor/android 
npm i @capacitor/ios
```

und hinzufügen:

```sh
npx cap add android
npx cap add ios
```

{% hint style="info" %}
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.
{% endhint %}

### 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:

```sh
# Projekt bauen
npm run build

# Ins native Projekt syncen
npx cap sync
```

{% hint style="info" %}
Diese Befehle musst du immer wieder ausführen, wenn du die neuste Version auf deinem Gerät oder im Simulator testen möchtest
{% endhint %}

### 5. Natives Projekt starten

{% tabs %}
{% tab title="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
```

{% hint style="warning" %}
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.
{% endhint %}

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.

<figure><img src="/files/ewzEM0lOoWFOx719g769" alt=""><figcaption></figcaption></figure>

Ü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:

{% embed url="<https://capacitorjs.com/docs/android>" %}

{% hint style="warning" %}
Ä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.xml`Datei, du findest diese Datei unter `android/app/src/main/`.
{% endhint %}

{% hint style="warning" %}
Auf deinem Android-Gerät muss in den Entwicklereinstellungen USB-Debugging aktiviert sein.
{% endhint %}
{% endtab %}

{% tab title="iOS - Xcode" %}
{% hint style="info" %}
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.
{% endhint %}

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.

<figure><img src="/files/10XSjTmmvWVBRuhSIuw9" alt=""><figcaption></figcaption></figure>

Oben kannst du zwischen einem angeschlossenen Gerät und einem Simulator wählen und mit ![](/files/caU9Umya6OjgI0woAqdP) wird die App installiert und gestartet.

Eine detaillierte Anleitung zu Capacitor und iOS findest du hier:

{% embed url="<https://capacitorjs.com/docs/ios>" %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://m335.ict-bz.ch/tag-3/app-auf-gerat-laufen-lassen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.