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 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__ für sofortige über die Luft übertragene Updates. Capgo : Beheben Sie Probleme wie Synchronisationsfehler oder Build-Fehler.
Schritte zum Starten: __CAPGO_KEEP_0__ vereinfacht den Prozess, indem Sie native Apps mit Web-Technologien erstellen können. Hier erfahren Sie, was Sie lernen werden:

__CAPGO_KEEP_0__ vereinfacht den Prozess, indem Sie native Apps mit Web-Technologien erstellen können. Hier erfahren Sie, was Sie lernen werden:

Installiere Node.js, npm, JDK, Xcode, und Android Studio.
Führe und initialisiere dein Projekt aus. npm install @capacitor/core @capacitor/cli Füge iOS- und Android-Plattformen mit
und npx cap add ios Optional: Konfiguriere __CAPGO_KEEP_0__ für Live- npx cap add android.
Optional: Set up Capgo for live Optional: Set up __CAPGO_KEEP_0__ for live app updates.

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

Einführung Capacitor Konfigurieren

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

CLI Installationsanweisungen

Stellen Sie sicher, dass Sie vor dem Starten Node.js, npm, JDK, Xcodeund Android Studio sind eingerichtet. Sobald Sie bereit sind, können Sie das Capacitor CLI installieren, indem Sie folgende Kommando ausführen:

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

Mit diesem Befehl werden Capacitor und seine Kernkomponenten eingerichtet.

Nachdem Sie diesen Schritt abgeschlossen haben, wechseln Sie zu Eine neue Anwendung erstellen um Ihre Anwendung aufzubauen.

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

Aktualisierung der Konfigurationsdatei

Bearbeiten Sie das capacitor.config.json Datei, 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 einzurichten.

Plattformseinstellungen

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, CocoaPods 1.11 oder neuer und macOS 12 oder höher 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 mit den Änderungen an Ihrer Webanwendung aktualisieren.

Plattformaktualisierungen

Um Ihre Plattformen mit den neuesten Webänderungen in Einklang zu bringen, 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.
Einrichten 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.
Einrichten 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 android. Vergessen Sie nicht, erneut zu starten, um sicherzustellen, dass alle Assets auf dem neuesten Stand sind. npx cap sync wieder, um sicherzustellen, dass alle Assets auf dem neuesten Stand sind.

Capgo Setup-Leitfaden

Capgo Live-Update-Dashboard-Interface

Konfigurieren Sie Capgo zum Aktivieren von Echtzeit-Übertragungen 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.
Analytics-Werkzeuge helfen dabei, Erfolgsmessungen für Updates und die Beteiligung der Benutzer zu verfolgen.
A eine Rückkehrmöglichkeit mit einem Klick lässt Sie schnell von problematischen Updates wieder zurückkehren.
Verwenden Sie das Kanal-System für rollierende Updates 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
```
Initialisiere Capgo in Ihrem Projekt: 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 Analysen, um sicherzustellen, dass Updates erfolgreich geliefert werden und Benutzer engagiert bleiben.
Aktivieren Sie die Fehlerüberwachung, um Probleme frühzeitig zu erkennen und zu beheben.
Bereiten Sie den Rollback-Feature vor, um schnell auf Probleme reagieren zu können.

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.

Umgebungsrichtlinien Probleme

CLI Nicht gefunden Fehler: Die Kommandozeile npx cap scheitert. Behebung: Ausführen npm install --save @capacitor/cli @capacitor/core und noch einmal versuchen.
Node Version Mismatch Fehler: CLI Kommandos scheitern aufgrund von Node.js Version-Fehlern. Behebung: Install Node.js Version 14 oder höher, wie in den Anforderungen für die Einrichtung beschrieben.

Konfigurationsprobleme

Konfiguration passt nicht Fehler: Änderungen capacitor.config.json wirken nicht. Fix: Stellen Sie sicher, dass die appId und webDir Werte Ihren Projekts package.json und das Ausgabeverzeichnis für die Webanwendung übereinstimmen.
Plattform-Synchronisationsfehler Fehler: Ausführen npx cap sync führt zu Konflikten zwischen Pluginversionen. Fix: Aktualisiere @capacitor/android und @capacitor/ios auf die gleiche Hauptversion, führe dann den Sync-Befehl erneut aus.

Build und Deployment

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

Live-Update-Probleme

Capgo Update-Fehler Fehler: Updates erscheinen nicht im Produktions-App. Fix: Überprüfen Sie Ihre Capgo API Schlüssel im capacitor.config.json und stellen Sie sicher, dass Sie den richtigen Kanal ansteuern.

Für weitere Details zu plattform-spezifischen Einrichtungen besuchen Sie bitte die Plattform-Einrichtung-Sektion. Wenn Sie mit Live-Updates arbeiten, wenden Sie sich an die Capgo Einrichtungsanleitung für zusätzliche Fehlerbehebungs-Tipps.

Zusammenfassung

Einrichtungsüberprüfung

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

Hier ist der erste Schritt:

Verwenden Sie das Capacitor CLI zum Initialisieren Ihres Projekts.
Einstellen Sie die Paket-ID Ihrer App und definieren Sie den Web-Ausgabebereich.
Hinzufügen von Unterstützung für die iOS- und Android-Plattformen.
Installieren und Capgo einrichten Sie mit der folgenden Befehl: npm install --save @capgo/cli && npx capgo init

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

Fortsetzen Sie mit Capacitor CLI: Projekt-Einrichtungsanleitung

Wenn Sie "__CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Projekt-Einrichtungsanleitung" verwenden, um das Dashboard und __CAPGO_KEEP_0__-Operationen zu planen, verbinden Sie es mit Capacitor CLI: Project Setup Guide Für die Implementierungsdetails in der API-Übersicht, API Overview for the implementation detail in API Overview, __CAPGO_KEEP_0__-Schlüssel Für die Implementierungsdetails in den __CAPGO_KEEP_0__-Schlüsseln, Wenn Sie "API __CAPGO_KEEP_1__: Projekt-Einrichtungsanleitung" verwenden, um das Dashboard und API-Operationen zu planen, verbinden Sie es mit API-Übersicht Geräte für die Implementierungsdetails in Geräte, und Bündel für die Implementierungsdetails in Bündel.

Capacitor CLI: Projektanlagenleitfaden