Capacitor CLI: Projektsetupanleitung

Wollen Sie iOS- und Android-Anwendungen mit einer einzigen Codebasis erstellen? Capacitor Simplifiziert CLI den Prozess, indem Sie native Apps mit Web-Technologien erstellen können. Hier erfahren Sie, was Sie lernen werden:

Rasche 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 : für sofortige über die Luft übertragene Updates.
Häufige Reparaturen: Beheben Sie Probleme wie Synchronisationsfehler oder Buildfehler.

Schritte zur Einstellung:

Installieren Node.js, npm, JDK 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 und 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__ Einrichtungsanleitung"Capgo Setup Guide__CAPGO_KEEP_0__ Installationsanweisungen

CLI __CAPGO_KEEP_1__

Bevor Sie beginnen, stellen Sie sicher, dass Sie haben Node.js, npm, JDK, Xcodeund Android Studio sich 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.

Hinzufügen von iOS und Android

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

For iOS stell sicher, dass du Xcode 14 oder neuer hast, CocoaPods 1.11 oder neuer und macOS 12 oder höher. Für Android benötigst du Android Studio Giraffe (2022.3.1+), JDK 17 oder später und Gradle 7.5 oder höher.

Installieren Sie die Software, müssen Sie Ihre nativen 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 nativen Plattformen
Aktualisiert die nativen Konfigurationen und Plugins, um den neuesten Änderungen zu entsprechen

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.
Einstellen Sie die Signierungszertifikate.
Ändern Sie Ihren Bundle-Identifier.

In Android Studio:

Ändern Sie die Anwendung-ID in build.gradle.
Konfigurieren Sie das Keystore für die Signierung.
Einstellen 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 Übertragungen von über dem Luftweg für Ihre App zu ermöglichen.

Schlüsselmerkmale von Capgo

Capgo bietet mehrere Werkzeuge, um die Aktualisierung von Apps zu erleichtern:

End-to-end-Verschlüsselung sichert die sichere Lieferung von Updates.
Updates laufen im Hintergrund wenn die App gestartet wird.
Analysewerkzeuge helfen dabei, Erfolgssätze von Updates und Benutzerinteraktionen zu verfolgen.
A eine Rückkehrmöglichkeit auf einen Schlag ermöglicht Ihnen, sich schnell von problematischen Updates zu erholen.
Verwenden Sie das Kanal-System für die Durchführung von Phasenrollouts und Beta-Tests.

Installieren Sie Capgo

Folgen Sie diesen Schritten, um mit Capgo zu beginnen:

Installieren Sie das Capgo-Paket CLI:
```
npm install --save @capgo/cli
```
Initialisiere Capgo auf Ihrem Projekt:
```
npx capgo init
```
Build und veröffentliche 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 die Analytik, um sicherzustellen, dass Updates erfolgreich geliefert werden und Benutzer engagiert bleiben.
Aktivieren Sie die Fehlerüberwachung, um Probleme frühzeitig erkennen und beheben zu können.
Stellen Sie den Rückgängigmachungsmechanismus bereit, 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.

Common Issues and Tips

Nachdem Sie die Plattform- und Capgo-Einrichtung abgeschlossen haben, können Sie möglicherweise einige häufige Fehler erleben. Hier erfahren Sie, wie Sie sie schnell beheben können.

Umgebungsrichtlinien-Probleme

CLI nicht gefunden Fehler: Die Anweisung npx cap fehlschlägt. Fix: Ausführen npm install --save @capacitor/cli @capacitor/core und versuchen Sie es erneut.
Node-Versionen nicht übereinstimmen Fehler: CLI-Befehle fehlschlagen aufgrund von Node.js-Versionenfehlern. Fix: Install Node.js version 14 oder höher, wie in den Anforderungen für die Einrichtung beschrieben.

Konfigurationsprobleme

Konfigurationsmismatch Fehler: Änderungen in capacitor.config.json wirken nicht. Fix: Stellen Sie sicher, dass die appId und webDir Werte mit den Werten Ihres Projekts und dem Ordner für die Web-Ausgabe übereinstimmen. package.json Plattform-Synchronisationsfehler
und Fehler: Ausführen npx cap sync führt zu Konflikten der Pluginversion. Fix: 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. Fix: 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: Updates erscheinen nicht im Produktionsapp. Beheben: Überprüfen Sie noch einmal Ihre 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 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überprüfung

Starten Sie Ihre Web-Anwendung mit Capacitor CLI, konfigurieren Sie die iOS- und Android-Plattformen und optional einschließen Sie Capgo für Live-Updates.

Hier ist der erste Schritt:

Verwenden Sie die Capacitor CLI zum Initialisieren Ihres Projekts.
Konfigurieren Sie die App-ID Ihres Projekts und definieren Sie den Ausgabeverzeichnis für die Web-Anwendung.
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

Für detaillierte Einrichtungsanweisungen oder zur Fehlerbehebung, besuchen Sie bitte die offizielle Capacitor und Capgo Dokumentation.

Bleiben Sie bei Capacitor CLI: Projektanlagenleitfaden

Wenn Sie diese verwenden Capacitor: Projektanlagenleitfaden CLI: 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 in der Einführung, API Keys für die Implementierungsdetails in API Schlüsseln, Geräte zur Implementierungsdetail in Geräte, und Pakete zur Implementierungsdetail in Pakete.