📱
M335 - Mobile-Applikation realisieren
  • ▶️Intro
  • 🗓️Kursplanung & Organisation
  • 🛠️Infrastruktur und Tools
  • ❓FAQ
  • TAG 1
    • 📖Native, Hybrid, Web
    • 📖Frameworks
    • 📖Angular
    • 🦸‍♂️Tour of Heroes
      • 📖Introduction
      • 📖Create a project
      • 📖1. The hero editor
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 1
      • 📖2. Display a list
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 2
      • 📖3. Create a feature component
        • 💡Hinweise zu Kapitel 3
      • 📖4. Add services
        • 💡Hinweise zu Kapitel 4
      • 📖5. Navigation
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 5
        • 💡Ergänzend zu Navigation
      • 💡 Debugging
    • 📖CSS / SASS / SCSS
  • Tag 2
  • 📖Ionic
  • ❓Ionic Projekt erstellen
  • 💡Ionic Übungen
  • 📖Usability
  • 📖Prototyping
  • 📖UI Elements
  • 🛠️ Projektsetup
  • Tag 3
    • 📖Native Grundlagen
    • 📖Capacitor Einführung
    • 💡App auf Gerät laufen lassen
    • 💡Native Komponente mit Capacitor verwenden
    • ❓Starten auf Gerät mit Live-Reload
  • 📖Persistenz
    • 📖Online Persistenz
    • 📖Offline Persistenz
  • Tag 4
    • 📖Testing
      • ❓Testplan: Praxisbeispiel
      • ❓Testprotokoll: Praxisbeispiel
  • Tag 5
    • 💡Build, Veröffentlichung, Ausblick
Powered by GitBook
On this page
  • Vorbereitungen
  • Capacitor im Projekt installieren und einrichten
  • 1. Capacitor im Projekt installieren
  • 2. Plattform(en) installieren
  • 3. Web Projekt ins native Projekt syncen
  • 5. Natives Projekt starten
  1. Tag 3

App auf Gerät laufen lassen

PreviousCapacitor EinführungNextNative Komponente mit Capacitor verwenden

Last updated 29 days ago

Vorbereitungen

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

  • ist installiert

  • ist installiert

  • 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

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:

Ä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.

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.

Eine detaillierte Anleitung zu Capacitor und iOS findest du hier:

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

💡
NodeJS
Ionic CLI
Android Studio
Capacitor Android Documentation | Capacitor Documentation
Getting Started | Capacitor Documentation
Logo
Logo