Capacitor CLI: Projektsetupanleitung

Wollen 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 Buildfehler.
Schritte zur Einstellung:__CAPGO_KEEP_0__

für sofortige über die Luft übertragene Updates.

Installieren Node.jsnpm Xcode, und Android Studio.
Ausführen npm install @capacitor/core @capacitor/cli und initialisieren Sie Ihr Projekt.
Fügen Sie iOS- und Android-Plattformen über npx cap add ios und npx cap add android.
Optional: Konfigurieren Sie Capgo für Live- App-Updates.

Diese Anleitung deckt alles ab, was Sie zum Einrichten von Capacitor CLI benötigen, Plattformen konfigurieren und Ihre App bereitstellen.

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

Wenn Sie Live-Updates aktivieren möchten, besuchen Sie die " __CAPGO_KEEP_0__ Einrichtungshandbuch"Capgo Setup Guide__CAPGO_KEEP_0__ Installationsanweisungen

Wenn Sie Live-Updates aktivieren möchten, besuchen Sie die "CLI Einrichtungshandbuch"" unten.

Bevor Sie beginnen, stellen Sie sicher, dass Sie haben Node.js, npm, JDK, Xcodeund Android Studio eingerichtet haben. Sobald Sie bereit sind, können Sie das Capacitor CLI installieren, indem Sie folgenden Befehl ausführen:

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

Dieser Befehl installiert Capacitor und konfiguriert seine Kernkomponenten.

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

Die Konfigurationsdatei aktualisieren

Die capacitor.config.json Datei bearbeiten, 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.

iOS- und Android hinzufügen

Beginnen Sie mit der Installation der notwendigen plattform-spezifischen Pakete mithilfe des 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.

Installieren Sie diese, dann müssen Sie Ihre native Ziele mit Ä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 erledigt zwei Aufgaben:

Kopiert aktualisierte Web-Assets auf die native Plattformen
Aktualisiert native Konfigurationen und Plugins, um den neuesten Änderungen zu entsprechen

IDE-Einstellungen

Ö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 Anwendung-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 android. Vergessen Sie nicht, erneut zu starten npx cap sync um sicherzustellen, dass alle Assets auf dem neuesten Stand sind.

Capgo Setup Guide

Capgo Live Update Dashboard Interface

Konfigurieren Sie Capgo, um sofortige Übertragung von Updates für Ihre App zu ermöglichen.

Schlüsselmerkmale 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 sobald die App gestartet wird.
Analysewerkzeuge helfen dabei, Erfolgssätze bei Updates und Benutzerinteraktion zu verfolgen.
A eine Rückkehrmöglichkeit auf einen Schlag Optionen ermöglichen Ihnen, sich schnell von problematischen Updates zu erholen.
Verwenden Sie das Kanal-System für die Ausrollung von Beta-Versionen und die Testphase.

Installation von Capgo

Folgen Sie diesen Schritten, um mit Capgo zu beginnen:

Installieren Sie das Capgo-Paket CLI:
```
npm install --save @capgo/cli
```
Initialisiere Capgo in Ihrem Projekt:
```
npx capgo init
```
Build und release Updates:
```
npm run build
npx capgo release
```
Öffnen Sie die App, um den Hintergrundaktualisierungsprozess auszulösen.

Best Practices

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 Fehlerverfolgung, um Probleme frühzeitig zu erkennen und zu beheben.
Stellen Sie sicher, dass die Rückkehrfunktion bereit ist, um schnell auf Probleme zu reagieren.

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

Gemeinsame 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.

Umgebungseinstellungen

CLI nicht gefunden Fehler: Die Anweisung npx cap fehlschlägt. Lösung: Ausführen npm install --save @capacitor/cli @capacitor/core und noch einmal versuchen.
Version von Node nicht übereinstimmen : __CAPGO_KEEP_0__-Befehle fehlschlagen aufgrund von Node.js-Version-Fehlern.: CLI commands fail due to Node.js version errors. Node Version Mismatch Error: __CAPGO_KEEP_0__ commands fail due to Node.js version errors. Fix: Update Node.js to the latest version and try again.: Install Node.js version 14 oder höher, wie im Setup-Anforderungen beschrieben.

Konfigurationsprobleme

Konfiguration passt nicht Fehler: Änderungen in capacitor.config.json wirken nicht. Fix: Stellen Sie sicher, dass die appId und webDir Werte mit Ihrem Projekts package.json und dem Web-Build-Ausgabeverzeichnis übereinstimmen.
Plattform-Synchronisationsfehler Fehler: Ausführen npx cap sync führt zu Konflikten der Pluginversion. Beheben: Aktualisieren @capacitor/android und @capacitor/ios zur gleichen Hauptversion aktualisieren, dann den Sync-Befehl erneut ausführen.

Build und Bereitstellung

Build-Signierungsfehler Fehler: iOS- oder Android-Builds scheitern aufgrund fehlender Zertifikate oder eines Keystores. Beheben: Folge den Anweisungen zur IDE-Konfiguration. 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.

Live-Update-Probleme

Capgo Update-Fehler Fehler: Aktualisierungen erscheinen nicht im Produktionsapp. Beheben: Überprüfen Sie noch einmal Ihre Capgo API-Schlüssel auf capacitor.config.json und stellen sicher, dass Sie sich auf die richtige Kanal richtet.

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-Anleitung für zusätzliche Fehlerbehebungs-Tipps.

Zusammenfassung

Einstellungs-Übersicht

Starten Sie Ihre Web-Anwendung mit Capacitor CLI, setzen Sie die iOS- und Android-Plattformen ein und setzen Sie optional Capgo für Live-Updates ein.

Hier ist, wie Sie loslegen können:

Verwenden Sie die Capacitor CLI zum Initialisieren Ihres Projekts.
Stellen Sie die App-ID Ihres Projekts und definieren Sie den Web-Ausgabebereich.
Fügen Sie die Unterstützung für die iOS- und Android-Plattformen hinzu.
Installieren und einrichten Sie Capgo mit der folgenden Befehlszeile: 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: Projektanlagenleitfaden

Wenn Sie Capgo verwenden Capacitor: CLI: Projektanlagenleitfaden Um einen Dashboard und API-Betrieb zu planen, verbinden Sie es mit API Überblick für die Implementierungsdetails in API Übersicht Einleitung für die Implementierungsdetails im Einführungskapitel, API Keys für die Implementierungsdetails in API Schlüsseln, Geräte zur Implementierungsdetail in Geräte, und Pakete zur Implementierungsdetail in Pakete.