Capacitor CLI: Projekt-Setup-Guide

Möchtest du iOS- und Android-Apps mit einer einzigen Codebase erstellen? Capacitor CLI vereinfacht den Prozess und ermöglicht dir, native Apps mit Web-Technologien zu erstellen. Das lernst du hier:

Schnelles Setup: Installiere Capacitor CLI und initialisiere dein Projekt in wenigen Minuten.
Plattform-Integration: iOS- und Android-Support mit einfachen Befehlen hinzufügen.
Capgo Live Updates: Nutze Capgo für sofortige Over-the-Air-Updates.
Häufige Lösungen: Fehler wie Sync-Probleme oder Build-Fehler beheben.

Wichtige Schritte für den Start:

Installieren Node.js, npm, JDK, Xcode, und Android Studio.
Ausführen npm install @capacitor/core @capacitor/cli und initialisiere dein Projekt.
Füge iOS- und Android-Plattformen hinzu mit npx cap add ios und npx cap add android.
Optional: Richte Capgo für Live- App-Updates.

Dieser Guide zeigt dir alles, was du für das Setup von Capacitor CLI, die Plattform-Konfiguration und das Deployment deiner App benötigst. Los geht's!

Wir präsentieren Capacitor Konfigurieren

Capacitor Framework-Dokumentations-Website

Voraussetzungen für das Setup

Um loszulegen, stelle sicher, dass du die folgenden Tools installiert hast:

Node.js (Version 14 oder neuer) und npm
Java JDK (Version 11 oder neuer)
Xcode (Version 12 oder neuer für iOS-Builds)
Android Studio (für Android-Builds)
Capacitor CLI (Version 6 oder 7)

Optional: Wenn du Live Updates aktivieren möchtest, schau dir den „Capgo Setup-Guide“ unten an.

CLI Installationsschritte

Stelle vor dem Start sicher, dass du Node.js, npm, JDK, Xcode, und Android Studio einrichten. Sobald alles bereit ist, kannst du das Capacitor CLI mit diesem Befehl installieren:

npm install --save @capacitor/core @capacitor/cli
npx cap init

Dieser Befehl installiert Capacitor und richtet die Kernkomponenten ein.

Nach diesem Schritt geht es weiter mit Ein neues Projekt erstellen um deine App zu scaffolden.

Ein neues Projekt erstellen

So startest du dein Projekt mit Capacitor CLI, folge diesen Schritten:

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

Konfigurationsdatei aktualisieren

Bearbeite die capacitor.config.json Datei, um folgende Einstellungen hinzuzufügen:

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Nach der Aktualisierung kannst du diese Konfiguration nutzen, um Capacitor für dein Projekt einzurichten.

Plattform-Setup

Nachdem das Projekt-Scaffolding abgeschlossen ist, geht es an das Setup der iOS- und Android-Targets.

iOS und Android hinzufügen

Installiere zuerst die benötigten plattformspezifischen Pakete mit Capacitor CLI:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

Für iOS benötigst du Xcode 14 oder neuer, CocoaPods Version 1.11 oder neuer sowie macOS 12 oder höher. Für Android benötigst du Android Studio Giraffe (2022.3.1+), JDK 17 oder neuer und Gradle- 7.5 oder höher.

Nach der Installation musst du deine nativen Targets bei Änderungen an deiner Web-App aktuell halten.

Plattform-Updates

Um deine Plattformen mit den neuesten Web-Änderungen zu synchronisieren, folge diesen Schritten nach dem Web-App-Update:

npm run build
npx cap sync

Der cap sync Der Befehl übernimmt zwei Aufgaben:

Kopiert aktualisierte Web-Assets auf die nativen Plattformen
Aktualisiert native Konfigurationen und Plugins passend zu den neuesten Änderungen

IDE-Setup

Öffne die plattformspezifischen Projekte in den jeweiligen IDEs:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

In Xcode:

Wähle dein Development Team aus.
Richte die Signaturzertifikate ein.
Aktualisiere deine Bundle-Bezeichner.

In Android Studio:

Ändere die Anwendungs-ID in build.gradle.
Konfiguriere das Keystore für die Signatur.
Richte sowohl Debug- als auch Release-Build-Varianten ein.

Wenn alles konfiguriert ist, baue die Projekte mit npx cap build ios oder npx cap build android. Vergiss nicht, npx cap sync noch einmal, um sicherzustellen, dass alle Assets aktuell sind.

Capgo Setup-Guide

Capgo Live Update Dashboard-Interface

Richte Capgo ein, um sofortige Over-the-Air-Updates für deine App zu ermöglichen.

Kernfunktionen von Capgo

Capgo bietet mehrere Tools, um App-Updates zu vereinfachen:

Ende-zu-Ende-Verschlüsselung stellt die sichere Auslieferung von Updates sicher.
Updates laufen im Hintergrund wenn die App startet.
Analytics-Tools helfen, Update-Erfolgsquoten und User-Engagement zu tracken.
Ein One-Click-Rollback Die Option lässt dich schnell von problematischen Updates erholen.
Nutze das Channel-System für gestaffelte Rollouts und Beta-Tests.

Installation von Capgo

Folge diesen Schritten, um mit Capgo zu starten:

Installiere Capgo CLI:
```
npm install --save @capgo/cli
```
Initialisiere Capgo in deinem Projekt:
```
npx capgo init
```
Updates bauen und releasen:
```
npm run build
npx capgo release
```
Öffne die App, um den Background-Update-Prozess auszulösen.

Best Practices

Nutze Channels, um Updates vor dem Rollout an alle Nutzer zu testen.
Überwache Analytics, um sicherzustellen, dass Updates erfolgreich ausgeliefert werden und Nutzer engagiert bleiben.
Aktiviere Error Tracking, um Probleme frühzeitig zu erkennen und zu beheben.
Halte die Rollback-Funktion bereit, um Probleme schnell zu beheben.

Capgo ist mit Capacitor 8 kompatibel, lässt sich nahtlos in CI/CD-Pipelines integrieren und erfüllt die Anforderungen von Apple- und Google-Store.

Häufige Probleme und Tipps

Nachdem du die Plattform- und Capgo-Einrichtung abgeschlossen hast, können dir einige häufige Fehler begegnen. So behebst du sie schnell.

Probleme beim Environment-Setup

CLI Nicht gefunden Fehler: Der Befehl npx cap schlägt fehl. Lösung: Führe npm install --save @capacitor/cli @capacitor/core und versuche es erneut.
Node-Versionskonflikt Fehler: CLI Befehle schlagen wegen Node.js-Versionsfehlern fehl. Lösung: Installiere Node.js Version 14 oder höher, wie in den Setup-Anforderungen beschrieben.

Konfigurationsprobleme

Konfigurationskonflikt Fehler: Änderungen an capacitor.config.json werden nicht übernommen. Lösung: Stelle sicher, dass die appId und webDir Werte mit der Projektkonfiguration package.json und dem Web-Build-Ordner übereinstimmen.
Plattform-Sync-Fehler Fehler: Läuft npx cap sync führt zu Plugin-Versionskonflikten. Lösung: Update @capacitor/android und @capacitor/ios auf dieselbe Major-Version, dann den Sync-Befehl erneut ausführen.

Build und Deployment

Fehler beim Build Signing Fehler: iOS- oder Android-Builds schlagen fehl, weil Zertifikate oder ein Keystore fehlen. Lösung: Befolgen Sie die IDE-Einrichtungsanweisungen. Für iOS fügen Sie Ihr Entwicklungsteam in Xcode hinzu. Für Android konfigurieren Sie den Keystore in build.gradle.
Web-Verzeichnis nicht gefunden Fehler: npx cap sync kann die Web-Assets nicht finden. Lösung: Führen Sie Ihren Web-Build-Befehl aus (z. B. npm run build) vor dem Synchronisieren der Plattformen.

Live Update Probleme

Capgo Update-Fehler Fehler: Updates werden in der Produktions-App nicht angezeigt. Lösung: Double-check your Capgo API Key ein in einem capacitor.config.json und stelle sicher, dass du den richtigen Channel ansprichst.

Für weitere Details zur plattformspezifischen Einrichtung schau dir noch mal den Abschnitt Plattform-Setup an. Wenn du mit Live Updates arbeitest, findest du im Capgo Setup Guide zusätzliche Troubleshooting-Tipps.

Zusammenfassung

Setup-Review

Starte deine Web-App mit Capacitor CLI, richte die iOS- und Android-Plattformen ein und füge optional Capgo für Live Updates hinzu.

Here’s how to get started:

Nutze die Capacitor CLI, um dein Projekt zu initialisieren.
Lege die Package ID deiner App fest und definiere das Web-Output-Verzeichnis.
Füge Support für iOS- und Android-Plattformen hinzu.
Installiere und richte Capgo mit folgendem Befehl ein: npm install --save @capgo/cli && npx capgo init

Detaillierte Setup-Anleitungen oder Troubleshooting findest du in der offiziellen Dokumentation zu Capacitor und Capgo.

Weiter geht’s mit Capacitor CLI: Projekt-Setup-Guide

Wenn du es nutzt Capacitor CLI: Projekt-Setup-Guide um Dashboard- und API-Operationen zu planen, verbinde es mit API Übersicht für Details zur Implementierung im API Overview, Einführung für die Implementierungsdetails in der Einleitung, API Schlüssel für die Implementierungsdetails in API Keys, Geräte für die Implementierungsdetails in Devices und Bundles für die Implementierungsdetails in Bundles.