Capacitor: CLI: Projektanlagenleitfaden

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

Rasche EinrichtungInstallieren Sie Capacitor und CLI und initialisieren Sie Ihr Projekt in Minuten.
PlattformintegrationFügen Sie iOS- und Android-Unterstützung mit einfachen Befehlen hinzu.
Live Updates: Verwenden Capgo für sofortige über-der-luft-Updates.
Live UpdatesFehler wie Synchronisationsfehlern oder Buildfehlern aufspüren.

: Fehler wie Synchronisationsfehler oder Buildfehler wie folgt beheben.

Install Installieren, npm, JDK Xcode, Xcode und Android Studio.
Ausführen npm install @capacitor/core @capacitor/cli Optional: Konfigurieren Sie __CAPGO_KEEP_0__ für Live-
Fügen Sie iOS- und Android-Plattformen hinzu npx cap add ios and npx cap add android.
Optional: Konfigurieren Sie Capgo für Live __CAPGO_KEEP_0__.

Dieses Leitfaden deckt alles ab, was Sie zum Einrichten von Capacitor CLI, Konfigurieren von Plattformen und Bereitstellen Ihrer App benötigen. Lassen Sie uns loslegen!

Introducing Capacitor Configure

Capacitor Framework Documentation Website

Anforderungen für die Einrichtung

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: Wenn Sie Live-Updates aktivieren möchten, besuchen Sie die "Capgo Einrichtungsanleitung"" unten.

CLI Installationsanweisungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Node.js, npm, Xcode, Node.js, und Android Studio Einrichten. Sobald Sie bereit sind, können Sie das Capacitor CLI mit dem Befehl installieren.

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

Mit diesem Befehl wird Capacitor installiert und die grundlegenden Komponenten konfiguriert.

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 Verwenden Sie Capacitor CLIUpdating the Configuration File

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 capacitor.config.json 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.

Plattformseinstellungen

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

iOS und Android hinzufügen

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.

Nach der Installation müssen Sie Ihre native Ziele regelmäßig aktualisieren, um Änderungen an Ihrer Webanwendung zu berücksichtigen.

Sicherheitsupdates

Um Ihre Plattformen mit den neuesten Webänderungen zu synchronisieren, folgen Sie diesen Schritten nach der Aktualisierung Ihrer Webanwendung:

npm run build
npx cap sync

Der cap sync Kommandozeilenbefehl erledigt zwei Aufgaben:

Kopiert aktualisierte Webressourcen auf die native Plattformen
Aktualisiert native Konfigurationen und Plugins, um die neuesten Änderungen zu berücksichtigen

IDE-Konfiguration

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

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

In Xcode:

Wählen Sie Ihr Entwicklungsteam.
Konfigurieren Sie die Signierungszertifikate.
Dein Bundle-Identifier aktualisieren.

In Android Studio:

Den Anwendungs-Id in build.gradle.
Konfiguriere das Keystore für die Signierung.
Stelle sowohl Debug- als auch Release-Build-Varianten ein.

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

Capgo Setup-Leitfaden

Capgo Live Update Dashboard-Interface

Konfigurieren Sie Capgo zum Aktivieren von Echtzeit-Über-Air-Updates für Ihre App.

Hauptmerkmale von Capgo

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

End-to-end-Verschlüsselung sichert die sichere Lieferung von Updates.
Updates laufen im Hintergrund wenn die App gestartet wird.
Analysewerkzeuge helfen bei der Erfassung von Erfolgsraten für Updates und Nutzerinteraktion.
Ein Rücksetzen auf einen Klick Option ermöglicht Ihnen, schnell von problematischen Updates zurückzukehren.
Verwenden Sie Kanalsystem für die Ausführung von staged Rollouts und Beta-Tests.

Installation von 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 Hintergrundupdateprozess 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 Benutzer engagiert bleiben.
Error tracking aktivieren, um Probleme frühzeitig zu erkennen und zu beheben.
Die Rückkehrfunktion bereitstellen, um schnell auf Probleme reagieren zu können.

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

Gemeinsame Probleme und Tipps

Einmal die Plattform und die Capgo-Einrichtung abgeschlossen, treten Ihnen möglicherweise einige häufige Fehler entgegen. Hier erfahren Sie, wie Sie diese schnell beheben können.

Einstellungen für die Umgebung

CLI nicht gefunden Fehler: Die Anweisung npx cap fehlschlägt. Behebung: Ausführen npm install --save @capacitor/cli @capacitor/core und versuchen Sie es erneut.
Version von Node nicht übereinstimmen Fehler: CLI Befehle scheitern aufgrund von Node.js-Version-Fehlern. Behebung: Installieren Sie Node.js-Version 14 oder höher, wie im Setup-Anforderung beschrieben.

Konfigurationsprobleme

Konfiguration nicht übereinstimmen Fehler: Änderungen in capacitor.config.json gelten nicht. Fixieren: Stellen Sie sicher, dass der appId und webDir Werte passen zu Ihrem Projekt package.json und das Web-Build-Ausgabeverzeichnis.
Plattform-Synchronisationsfehler : Durchführen: Running npx cap sync Führt zu Konflikten zwischen Pluginversionen. FixierenUpdate @capacitor/android und @capacitor/ios to the same major version, then rerun the sync command.

Erstellung und Bereitstellung

Erstellungssignierungsfehler Fehler: iOS- oder Android-Builds scheitern aufgrund fehlender Zertifikate oder eines Keystores. Beheben: Führen Sie die IDE-Einrichtungsanweisungen aus. 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 man kann die Web-Assets nicht finden. Beheben: Führen Sie Ihren Web-Build-Befehl (z.B. npm run build) aus, bevor Sie die Plattformen synchronisieren.

Live Update Probleme

Capgo Aktualisierungsfehler Fehler: Aktualisierungen erscheinen nicht im Produktionsapp. Fix: Überprüfen Sie Ihren Capgo API-Schlüssel im capacitor.config.json und stellen Sie sicher, dass Sie die richtige Kanal ansteuern.

Für weitere Details zu plattform-spezifischen Einstellungen besuchen Sie die Plattform-Einstellungen. Wenn Sie mit Live-Updates arbeiten, wenden Sie sich an die Capgo-Anleitung für weitere Troubleshooting-Tipps.

Zusammenfassung

Setup-Übersicht

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

Hier erfahren Sie, wie Sie loslegen können:

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

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

Fortsetzen Sie mit Capacitor CLI: Projekt-Setup-Leitfaden

Wenn Sie __CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Projekt-Setup-Leitfaden verwenden Capacitor: CLI: Projektanlagenleitfaden um das Dashboard und API-Operationen zu planen, verbinden Sie es mit API-Übersicht zur Implementierungsdetail in API-Übersicht Einführung zur Implementierungsdetail in Einführung API-Schlüssel zur Implementierungsdetail in API-Schlüssel Geräte für die Implementierungsdetails in Devices, und Bundles für die Implementierungsdetails in Bundles.

Capacitor CLI: Projektanlagenleitfaden