Capacitor CLI: Projektsetup Anleitung

Wollen Sie iOS- und Android-Anwendungen mit einem Codebase erstellen? Capacitor Simplifiziert CLI den Prozess, sodass Sie native Apps mit Webtechnologien 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_KEEP_0__ : Capgo für sofortige über die Luft übertragene Updates. Häufige Reparaturen
: Beheben Sie Probleme wie Synchronisationsfehler oder Buildfehler.Schritte zur Einstellung:

__CAPGO_KEEP_0__ ist ein Produkt von __CAPGO_KEEP_0__.

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 die iOS- und Android-Plattformen mithilfe von npx cap add ios und npx cap add android.
Optional: Konfigurieren Sie Capgo für Live- Anwendungsaktualisierungen.

Diese Anleitung umfasst alles, was Sie zum Einrichten von Capacitor CLI benötigen, Plattformen konfigurieren und Ihre App bereitstellen. 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 Optional:

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

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

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 Ein neues Projekt erstellen um Ihr Anwendungsprojekt 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 bearbeiten 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 des Capacitor CLI zu installieren:

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

For iOS, stelle 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, und halten Sie Ihre native Ziele auf dem neuesten Stand, wenn sich Ihre Webanwendung ändert.

Plattformaktualisierungen

Um Ihre Plattformen mit den neuesten Webänderungen zu synchronisieren, folgen Sie diesen Schritten, nachdem Sie Ihre Webanwendung aktualisiert haben:

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-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.
Richten Sie die Signierungszertifikate ein.
Aktualisieren Sie Ihren Bundle-Identifier.

In Android Studio:

Ändern Sie die Anwendung-ID in build.gradle.
Konfigurieren Sie das Keystore für die Signierung.
Richten Sie 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. 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 Guide

Capgo Live Update Dashboard Interface

Konfigurieren Sie Capgo zum Aktivieren von Echtzeit-Updates über das Internet 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 dabei, Erfolgssätze von Updates und Nutzereinstellungen zu verfolgen.
A eine eine Rückkehrmöglichkeit auf einen Klick
Option, die es Ihnen ermöglicht, schnell von problematischen Updates zurückzukehren. Verwenden Sie das Kanal-System

Installing Capgo

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:
```
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 die Analytics, um sicherzustellen, dass Updates erfolgreich geliefert werden und die Benutzer engagiert bleiben.
Aktivieren Sie die Fehlerverfolgung, um Probleme frühzeitig erkennen und beheben zu können.
Stellen Sie sicher, dass die Rückgängigmachungsfunktion bereitsteht, 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 und Tipps

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

Umgebungseinstellungen

CLI Nicht gefunden Fehler: Die Kommandozeile npx cap fehlschlägt. Lösung: Ausführen npm install --save @capacitor/cli @capacitor/core und noch einmal versuchen.
Version von Node nicht übereinstimmen Fehler: CLI Befehle fehlschlagen aufgrund von Node.js-Versionenfehlern. Lösung: 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: Folgen Sie den Anweisungen zur IDE-Einrichtung. 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 Update-Fehler Fehler: Updates erscheinen nicht im Produktionsapp. Beheben: Überprüfen Sie noch einmal Ihre Capgo API-Schlüssel auf 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-App mit Capacitor CLI, setzen Sie die iOS- und Android-Plattformen ein und optionalen Capgo für Live-Updates ein.

Hier ist der erste Schritt:

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

Bleib weiter bei Capacitor CLI: Projektanlagenleitfaden

Wenn Sie Capgo verwenden Capacitor: Projekt-Setup-Anleitung 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 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.