Capacitor CLI: Projektsetup Anleitung

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

Schnelle Einrichtung: Install Capacitor CLI und initialisieren Sie Ihr Projekt in Minuten.
Plattformintegration: Fügen Sie iOS- und Android-Unterstützung mit einfachen Befehlen hinzu.
Liveaktualisierungen: Verwenden Sie Capgo zur sofortigen Übertragung von Updates über das Internet.
Gemeinsame Reparaturen: Beheben Sie Probleme wie Synchronisationsfehler oder Buildfehler.

Schritte zum Starten:

Installieren Node.jsund npm, JDK, Xcode, und Android Studio.
Run und initialisieren Sie Ihr Projekt. npm install @capacitor/core @capacitor/cli Fügen Sie iOS- und Android-Plattformen mit
und npx cap add ios Optional: Konfigurieren Sie __CAPGO_KEEP_0__ für live npx cap add android.
Optional: Set up Capgo for live Diese Anleitung umfasst alles, was Sie zum Einrichten von __CAPGO_KEEP_0__ __CAPGO_KEEP_1__, zur Konfiguration von Plattformen und zur Bereitstellung Ihrer App benötigen. Lassen Sie uns loslegen!.

This guide covers everything you need to set up Capacitor CLI, configure platforms, and deploy your app. Let’s dive in!

Introducing Capacitor Konfigurieren

Capacitor Framework Dokumentationswebsite

Setupanforderungen

Um loszulegen, stellen Sie sicher, dass die folgenden Werkzeuge installiert sind:

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 bitte die ‘Capgo Einrichtungsanleitung‘’ unten.

CLI Installationsanweisungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Node.js, npm, JDK, , undAndroid Studio Konfiguration aufzustellen. Sobald alles bereit ist, können Sie die __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ installieren, indem Sie folgendes ausführen: set up. Once ready, you can install the Capacitor CLI by running:

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

This command installs Capacitor and sets up its core components.

Ein neues Projekt erstellen um Ihr Anwendungsprojekt zu erstellen. Ein neues Projekt erstellen

Um mit Ihrem Projekt zu beginnen

Um mit Ihrem Projekt zu beginnen 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

Aktualisierung der Konfigurationsdatei

Bearbeite das capacitor.config.json Datei, um die folgenden Einstellungen zu enthalten:

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

Sobald aktualisiert, verwende diese Konfiguration, um Capacitor für dein Projekt einzurichten.

Plattformseinstellungen

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

Hinzufügen von iOS und Android

Beginne damit, die notwendigen plattform-spezifischen Pakete mithilfe von Capacitor CLI zu installieren:

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

Für iOS stelle sicher, dass du Xcode 14 oder später hast, 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 die Anwendung installiert haben, müssen Sie Ihre native Ziele mit den Änderungen an Ihrer Webanwendung aktualisieren.

Plattformaktualisierungen

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 Befehl bearbeitet zwei Aufgaben:

Kopiert aktualisierte Web-Ressourcen auf die native 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:

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

In Xcode:

Wählen Sie Ihr Entwicklungsteam.
Konfigurieren Sie die Signierungszertifikate.
Aktualisieren Sie Ihren Bundle-Identifier.

In Android Studio:

Ändern Sie die Anwendungs-ID in build.gradle.
Konfigurieren Sie das Keystore für die Signierung.
Konfigurieren Sie sowohl Debug- als auch Release-Build-Varianten.

Wenn alles konfiguriert ist, bauen Sie die Projekte mit npx cap build ios oder npx cap build androidausführen npx cap sync wieder, um sicherzustellen, dass alle Assets aktuell sind.

Capgo Setup Anleitung

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 werden im Hintergrund ausgeführt wenn die App gestartet wird.
Analysewerkzeuge Hilfe zum Erfassen von Update-Erfolgsraten und Nutzereinstiegen.
A Ein einfacher Rollover-Option ermöglicht Ihnen, schnell von problematischen Updates zurückzukehren. Verwenden Sie das
Kanal-System für rollierende Updates und Beta-Tests. Installieren Sie __CAPGO_KEEP_0__

Folgen Sie diesen Schritten, um mit Capgo zu beginnen:

Installieren Sie das Capgo-__CAPGO_KEEP_1__-Paket

Install the Capgo CLI:
```
npm install --save @capgo/cli
```
Initialize Capgo Use the
```
npx capgo init
```
Aktualisierungen erstellen und veröffentlichen:
```
npm run build
npx capgo release
```
Öffnen Sie die App, um den Hintergrundaktualisierungsprozess auszulösen.

Gute Praktiken

Verwenden Sie Kanäle, um Aktualisierungen vor der Veröffentlichung an alle Benutzer zu testen.
Überwachen Sie Analysen, um sicherzustellen, dass Aktualisierungen erfolgreich geliefert werden und Benutzer engagiert bleiben.
Fehlerverfolgung aktivieren, um Probleme frühzeitig zu erkennen und zu beheben.
Bereiten Sie die Rückschaltfunktion vor, um schnell auf Probleme reagieren zu können.

Capgo ist mit Capacitor 8 kompatibel, integriert sich reibungslos mit CI/CD-Pipelines und entspricht den Anforderungen von Apple und Google Store.

Häufige Probleme und Tipps

Nachdem Sie die Plattform und die Capgo-Einrichtung abgeschlossen 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 Fehler : Die Kommandozeile npx cap fehlt. Lösung : Führe npm install --save @capacitor/cli @capacitor/core und versuche es erneut.
Node Version Mismatch Fehler : CLI Befehle fehlschlagen aufgrund von Node.js-Version-Fehlern. Lösung : Installiere Node.js-Version 14 oder höher, wie in den Setup-Anforderungen beschrieben.

Konfigurationsprobleme

Konfigurationsschwierigkeiten Fehler: Änderungen haben capacitor.config.json keinen Einfluss. Fix: Stellen Sie sicher, dass appId und webDir Werte mit den Projekt-Einstellungen und dem Ordner für die Web-Ausgabe übereinstimmen. package.json Plattform-Synchronisationsfehler
Fehler : Ausführen__CAPGO_KEEP_0__ npx cap sync Führt zu Plugin-Versionenkonflikten. Lösung: Aktualisieren Sie @capacitor/android und @capacitor/ios zur gleichen Hauptversion, führen Sie dann den Sync-Befehl erneut aus.

Erstellung und Bereitstellung

Erstellungssignierung fehlgeschlagen Fehler: iOS- oder Android-Builds scheitern aufgrund fehlender Zertifikate oder eines Keystores. Lösung: 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 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 Produktions-App. Beheben: Überprüfen Sie Ihren Capgo API-Schlüssel Wählen Sie die richtige Zielgruppe und stellen Sie sicher, dass Sie die richtige Kanal auswählen. capacitor.config.json Für weitere Details zu plattform-spezifischen Einstellungen besuchen Sie bitte die Plattform-Einstellungen. Wenn Sie mit Live-Updates arbeiten, wenden Sie sich an die __CAPGO_KEEP_0__-Einstellungsanleitung für weitere Fehlerbehebungs-Tipps.

For more details on platform-specific setup, revisit the Platform Setup section. If you’re working with live updates, consult the Capgo Setup Guide for additional troubleshooting tips.

Einstellungsüberprüfung

Starten Sie Ihre Web-App mit __CAPGO_KEEP_0 CAPGO_KEEP_1, setzen Sie die iOS- und Android-Plattformen ein und setzen Sie optional CAPGO_KEEP_2__ für Live-Updates ein.

Start your web app with Capacitor CLI, set up iOS and Android platforms, and optionally include Capgo for live updates.

Verwenden Sie die __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ zum Initialisieren Ihres Projekts.

Use the Capacitor CLI to initialize your project.
Fügen Sie die Unterstützung für die iOS- und Android-Plattformen hinzu.
Installieren und einrichten Sie __CAPGO_KEEP_0__ mit der folgenden Befehlszeile:
Für detaillierte Einstellungsanweisungen oder Fehlerbehebungen besuchen Sie bitte die offizielle Capgo- und __CAPGO_KEEP_1__-Dokumentation. npm install --save @capgo/cli && npx capgo init

For detailed setup instructions or troubleshooting, check out the official Capacitor and Capgo documentation.

Bleiben Sie bei Capacitor CLI: Projekt-Einrichtungsanleitung

Wenn Sie "__CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Projekt-Einrichtungsanleitung" verwenden Capacitor CLI: Project Setup Guide API-Übersicht für die Implementierungsdetails in der API-Übersicht for the implementation detail in API Overview, für die Implementierungsdetails in der Einführung __CAPGO_KEEP_0__-Schlüssel für die Implementierungsdetails in den API-Schlüsseln for the implementation detail in API Keys, für die Implementierungsdetails in Geräten für die Implementierungsdetails in Geräten Pakete für die Implementierungsdetails in Paketen.

Capacitor CLI: Projektanlagenleitfaden