Capacitor CLI: Projektsetupanleitung

Möchten Sie mit einer einzigen Codebasis iOS- und Android-Anwendungen erstellen? Capacitor CLI vereinfacht den Prozess, indem Sie native Apps mit Web-Technologien erstellen können. Hier erfahren Sie, was Sie lernen werden:

Schnelle Einrichtung: Installieren Sie Capacitor CLI und initialisieren Sie Ihr Projekt in Minuten.
Plattformintegration: Fügen Sie iOS- und Android-Unterstützung mit einfachen Befehlen hinzu.
Live-Updates: Verwenden Sie Capgo für instantuelle über-eiszeitliche Updates.
Gemeinsame Reparaturen: Fehler wie Synchronisationsfehler oder Buildfehler wie folgt beheben.

Schritte zur Einstellung:

Installieren Node.js, npm, JDK, Xcode, und Android Studio.
Ausführen und Ihre Projekt initialisieren. npm install @capacitor/core @capacitor/cli Fehler wie Synchronisationsfehler oder Buildfehler wie folgt beheben.
iOS- und Android-Plattformen hinzufügen mit npx cap add ios und npx cap add android.
Optional: Capgo für Live-App-Updates einrichten App-Updates.

Diese Anleitung deckt alles ab, was Sie zum Einrichten von Capacitor CLI, zur Konfiguration von Plattformen und zur Bereitstellung Ihrer App benötigen. Lassen Sie uns loslegen!

Willkommen bei Capacitor Einrichten

Capacitor Framework Dokumentationswebsite

Setup-Anforderungen

Um loszulegen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:

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: If Sie live Updates aktivieren möchten, besuchen Sie bitte die „Capgo Einrichtungshandbuch“ unten.

CLI Installationsschritte

Bevor Sie beginnen, stellen Sie sicher, dass Sie Node.js, JDK, Xcode und Android Studio haben. __CAPGO_KEEP_0__, npm, installieren, indem Sie Folgendes ausführen: , __CAPGO_KEEP_0____CAPGO_KEEP_1__ __CAPGO_KEEP_0__ set up. Once ready, you can install the Capacitor CLI by running:

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

Diese Kommando installiert Capacitor und konfiguriert seine Kernkomponenten.

Nach Abschluss dieses Schritts wechseln Sie zu Ein neues Projekt erstellen um Ihr Anwendungsgerüst zu erstellen.

Ein neues Projekt erstellen

Um mit Ihrem Projekt zu beginnen mit Capacitor CLIfolgen Sie diesen Schritten:

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

Die Konfigurationsdatei aktualisieren

Bearbeiten Sie das capacitor.config.json Feld, um die folgenden Einstellungen einzubeziehen:

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

Nach der Aktualisierung verwenden Sie diese Konfiguration, um Capacitor für Ihr Projekt zu konfigurieren.

Plattform-Konfiguration

Nachdem das Projektgerüst erstellt wurde, ist es Zeit, die iOS- und Android-Ziele zu konfigurieren.

iOS und Android hinzufügen

Beginnen Sie mit der Installation der notwendigen plattform-spezifischen Pakete mit dem Capacitor CLI:

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

Für iOS stellen Sie sicher, dass Sie Xcode 14 oder neuer haben, CocoaPods 1.11 oder neuer, und macOS 12 oder höher. Für Android benötigen Sie Android Studio Giraffe (2022.3.1+), JDK 17 oder später, und Gradle 7.5 oder höher.

Sobald installiert, müssen Sie Ihre native Ziele aktualisieren, wenn sich Ihre Webanwendung ändert.

Plattformaktualisierungen

Um Ihre Plattformen mit den neuesten Webänderungen in Einklang zu bringen, folgen Sie diesen Schritten, nachdem Sie Ihre Web-App aktualisiert haben:

npm run build
npx cap sync

The Befehl verarbeitet zwei Aufgaben: cap sync Kopiert aktualisierte Web-Assets auf die nativen Plattformen

Aktualisiert native Konfigurationen und Plugins, um die neuesten Änderungen zu widerspiegeln
IDE-Einrichtung

Öffnen Sie die plattform-spezifischen Projekte in den entsprechenden IDEs:

In Xcode:

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

Wählen Sie Ihr Entwicklungsteam.

Konfigurieren Sie die Signaturzertifikate.
Aktualisieren Sie Ihren Bundle-Identifier.
In Android Studio:

Ändern Sie die Anwendungs-ID.

In Visual Studio Code: build.gradle.
Konfigurieren Sie das Keystore für das Signieren.
Konfigurieren Sie sowohl die Debug- als auch die Release-Build-Varianten.

Wenn alles konfiguriert ist, bauen Sie die Projekte mit npx cap build ios oder npx cap build androiderneut aus, um sicherzustellen, dass alle Assets aktuell sind. npx cap sync __CAPGO_KEEP_0__

Capgo __CAPGO_KEEP_0__ Live Update Dashboard Interface

Konfigurieren Sie Capgo zum Aktivieren von Instant-Over-the-Air-Updates für Ihre App.

Hauptmerkmale von Capgo

Capgo bietet mehrere Werkzeuge, um die App-Updates zu vereinfachen:

Capgo

End-to-End-Verschlüsselung sichert die sichere Lieferung von Updates.
Updates werden im Hintergrund wenn die App gestartet wird.
Analysewerkzeuge helfen dabei, Erfolgssätze von Updates und die Benutzerbeteiligung zu überwachen.
Ein Rücksetzoption mit einem Klick lässt Sie schnell von problematischen Updates wieder herstellen.
Verwenden Sie das Kanalsystem für die Auslieferung in Phasen und die Beta-Testung.

Installieren Sie Capgo

Folgen Sie diesen Schritten, um mit Capgo zu beginnen:

Installieren Sie das Capgo CLI:
```
npm install --save @capgo/cli
```
Initialisieren Sie Capgo in Ihrem Projekt:
```
npx capgo init
```
Erstellen und veröffentlichen Sie Updates:
```
npm run build
npx capgo release
```
Öffnen Sie die App, um den Hintergrund-Update-Prozess auszulösen.

Gute Praktiken

Verwenden Sie Kanäle, um Updates vor der Veröffentlichung an alle Benutzer zu testen.
Überwachen Sie Analysen, um sicherzustellen, dass Updates erfolgreich geliefert werden und Benutzer engagiert bleiben.
Aktivieren Sie die Fehleranalyse, um Probleme frühzeitig zu erkennen und zu beheben.
Die Rücksetz-Funktion bereit halten, um schnell auf Probleme reagieren zu können.

Capgo ist kompatibel mit Capacitor 8, integriert sich reibungslos in CI/CD-Pipelines und erfüllt die Anforderungen von Apple- und Google-Spielskosten.

Häufige Probleme und Tipps

Nachdem Sie die Plattform und Capgo eingerichtet haben, können Sie einige häufige Fehler erleben. Hier erfahren Sie, wie Sie sie schnell beheben können.

Probleme bei der Umgebungs-Einrichtung

CLI nicht gefunden FehlerDie Anweisung npx cap fehlschlägt. BehebungFühren Sie npm install --save @capacitor/cli @capacitor/core und versuchen Sie es erneut.
Node Version Mismatch Fehler: CLI Befehle scheitern aufgrund von Node.js-Version-Fehlern. Fix: Installieren Sie Node.js Version 14 oder höher, wie in den Setup-Anforderungen beschrieben.

Konfigurationsprobleme

Konfigurationssprung Fehler: Änderungen wirken sich nicht aus. capacitor.config.json Fix : Stellen Sie sicher, dass dieKonfiguration appId und webDir Werte passen Ihrem Projekt package.json und das Web-Build-Ausgabeverzeichnis.
Plattform-Synchronisierungsfehler Fehler: Ausführen npx cap sync führt zu Konflikten der Plugin-Version. Beheben: Aktualisieren @capacitor/android und @capacitor/ios auf die gleiche Hauptversion, führen Sie dann den Synchronisierungs-Befehl erneut aus.

Build und Bereitstellung

Signierungsfehler bei Builds Fehler: iOS- oder Android-Builds scheitern aufgrund fehlender Zertifikate oder eines Keystores. Beheben: Folge den Anweisungen zur IDE-Einrichtung. Für iOS füge deinem Entwicklerteam in Xcode hinzu. Für Android konfiguriere den Keystore in build.gradle.
Web-Verzeichnis nicht gefunden Fehler: npx cap sync kann die Web-Assets nicht finden. Beheben: Führe deinen Web-Build-Befehl (z.B. npm run build) aus, bevor du die Plattformen synchronisierst.

Probleme bei Live-Updates

Capgo Update Fehlversuche Fehler: Updates erscheinen nicht im Produktionsapp. Lösung: Überprüfen Sie Ihren Capgo API-Schlüssel in capacitor.config.json und stellen Sie sicher, dass Sie die richtige Kanal ansteuern.

Für weitere Details zu plattformabhängigen Einstellungen besuchen Sie die Plattform-Einstellungen. Wenn Sie mit Live-Updates arbeiten, wenden Sie sich an die Capgo Anleitung für weitere Fehlerbehebungs-Tipps.

Zusammenfassung

Setup-Übersicht

Starten Sie Ihre Web-App mit Capacitor CLI, konfigurieren Sie die iOS- und Android-Plattformen und optional einschließen Sie Capgo für Live-Updates.

Hier erfahren Sie, wie Sie loslegen:

Verwenden Sie die Capacitor CLI zum Initialisieren Ihres Projekts.
Konfigurieren Sie die Paket-ID Ihrer App und definieren Sie den Ausgabeverzeichnis für die Webanwendung.
Fügen Sie die Unterstützung für die Plattformen iOS und Android hinzu.
Installieren und konfigurieren Sie Capgo mit der folgenden Befehlszeile: npm install --save @capgo/cli && npx capgo init

Für detaillierte Anweisungen zur Einrichtung oder zur Fehlerbehebung besuchen Sie bitte die offizielle Capacitor-Dokumentation und die Capgo-Dokumentation.

Fortsetzen Sie mit Capacitor CLI: Projekt-Einrichtungsanleitung

Wenn Sie Capacitor CLI: Projekt-Einrichtungsanleitung zur Planung Ihres Dashboards und API-Operationen verwenden, verbinden Sie es mit API-Übersicht für die Implementierungsdetails in der API-Übersicht, Einführung für die Implementierungsdetails in Einführung, API Schlüssel für die Implementierungsdetails in API Schlüssel, Geräte für die Implementierungsdetails in Geräte, und Pakete für die Implementierungsdetails in Pakete.

Capacitor CLI: Projekt-Setup-Leitfaden