Capacitor CLI: Projektsetup-Leitfaden

Möchten Sie mit einer einzigen Codebasis iOS- und Android-Apps 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_KEEP_0__ Capgo zum sofortigen Übertrag von Updates über das Internet.
Common Fixes: Fehler wie Synchronisationsfehler oder Buildfehler wie folgt beheben.

Schritte zum Starten:

Installieren Node.js, npm, JDK, Xcode, und Android Studio.
Ausführen npm install @capacitor/core @capacitor/cli und Ihre Projekt initialisieren.
iOS- und Android-Plattformen hinzufügen 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!

Einführung 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 (für iOS-Builds ab Version 12)
Android Studio (für Android-Builds)
Capacitor CLI (Version 6 oder 7)

Optional: If you want to enable live updates, check out the “Capgo Setup GuideInstallationsschritte von Capgo

CLI Installation Steps

Node.js Capgo, npm, Xcode, und Android Studioinstallieren. Sobald Sie bereit sind, können Sie das Capgo-Setup mit folgender Kommandozeilenanweisung installieren: Capacitor 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 Anwendungsprojekt zu erstellen.

Ein neues Projekt erstellen

Um mit Ihrem Projekt zu beginnen mit Capacitor CLI, folgen 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 Dokument, um die folgenden Einstellungen einzubeziehen:

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

Nachdem Sie aktualisiert haben, verwenden Sie diese Konfiguration, um Capacitor für Ihr Projekt einzurichten.

Plattform Einrichtung

Jetzt, dass das Projektgerüst fertig ist, ist es Zeit, die iOS- und Android-Ziele einzurichten.

Hinzufügen von iOS und Android

Beginnen Sie damit, die notwendigen plattform-spezifischen Pakete mithilfe der Capacitor CLI zu installieren:

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 Sie installiert haben, müssen Sie Ihre native Ziele aktualisieren, um Änderungen an Ihrer Webanwendung zu verfolgen.

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 den neuesten Änderungen gerecht zu werden
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.

Konfiguriere die Signaturzertifikate.
Aktualisiere Ihren Bundle-Identifier.
In Android Studio:

Ändere die Anwendungs-ID.

__CAPGO_KEEP_0__ build.gradle.
Konfigurieren Sie den Keystore für das Signieren.
Richten Sie sowohl die Debug- als auch die Release-Build-Varianten ein.

Wenn alles konfiguriert ist, erstellen Sie die Projekte mit npx cap build ios oder npx cap build android. Vergessen Sie nicht, npx cap sync wieder aufzurufen, um sicherzustellen, dass alle Assets aktuell sind.

Capgo Setup Guide

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

End-to-end-Verschlüsselung stellt sicher, dass Updates sicher übertragen werden.
Updates laufen im Hintergrund bei der App-Start.
Hilfsmittel zur Analyse ermöglichen das Nachverfolgen von Erfolgsraten bei Updates und der Benutzerbeteiligung.
Eine Rücksetzoption mit einem Klick lässt Sie schnell von problematischen Updates wieder herstellen.
Verwenden Sie das Kanalsystem für rollouts in der Beta-Phase.

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 Hintergrundaktualisierungsprozess auszulösen.

Gute Praktiken

Verwenden Sie Kanäle, um Updates vor der Veröffentlichung an alle Benutzer zu testen.
Überwachen Sie die Analytik, um sicherzustellen, dass Updates erfolgreich geliefert werden und die Benutzer engagiert bleiben.
Aktivieren Sie die Fehlerüberwachung, um Probleme frühzeitig zu erkennen und zu beheben.
Probleme schnell beheben, indem Sie die Rückerstattungsfunktion bereitstellen.

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

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 schlägt fehl. 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

Config Mismatch Fehler: Änderungen in capacitor.config.json nehmen nicht die gewünschte Wirkung. Fix: Stellen Sie sicher, dass die appId und webDir Werte passen Ihren Projekts an. package.json und das Web-Build-Ausgabeverzeichnis.
Plattform-Synchronisationsfehler Fehler: Ausführen npx cap sync führt zu Konflikten der Plugin-Version. Beheben: Aktualisieren Sie @capacitor/android und @capacitor/ios auf die gleiche Hauptversion, führen Sie dann den Synchronisierungsbefehl erneut aus.

Build und Bereitstellung

Buildsignierungsfehler FehleriOS- oder Android-Builds scheitern aufgrund fehlender Zertifikate oder eines Keystores. BehebenFolge den Anweisungen zur IDE-Einrichtung. Für iOS fügen Sie Ihrem Entwicklerteam in Xcode hinzu. Für Android konfigurieren Sie den Keystore in build.gradle.
Web-Verzeichnis nicht gefunden Fehler: npx cap sync Die Web-Assets können nicht gefunden werden. BehebenFühren Sie Ihren Web-Build-Befehl (z.B., __CAPGO_KEEP_0__ ) aus, bevor Sie die Plattformen synchronisieren. npm run buildLive-Update-Probleme

__CAPGO_KEEP_0__

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 den richtigen 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 ist der Einstieg:

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 iOS- und Android-Plattformen hinzu.
Installieren und konfigurieren Sie Capgo mit der folgenden Befehlszeile: npm install --save @capgo/cli && npx capgo init

Für detaillierte Anweisungen zur Konfiguration oder zur Fehlerbehebung, überprüfen Sie die offizielle Capacitor- und Capgo-Dokumentation.

Fortsetzen Sie mit Capacitor CLI: Projekt-Setup-Leitfaden

Wenn Sie Capacitor CLI: Projekt-Setup-Leitfaden zum Planen von Dashboard und API-Operationen verwenden, verbinden Sie es mit API Übersicht für die Implementierungsdetails in 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-Einrichtungsanleitung