Capacitor CLI: プロジェクトセットアップガイド

Capgoの1つのコードベースでiOSとAndroidアプリをビルドしたい Capacitor CLIはプロセスを簡素化し、ウェブ技術を使用してネイティブアプリを作成できるようにします。ここでは、学びます:

クイックセットアップ: CapacitorとCLIをインストールし、プロジェクトを数分で初期化します。
プラットフォーム統合: iOSとAndroidのサポートを簡単なコマンドで追加します。
: __CAPGO_KEEP_0__を使用して即時オーバー・ザ・エア更新を実行します。: __CAPGO_KEEP_0__を使用します。 Capgo : 同期エラーやビルド失敗などの問題をトラブルシューティングします。
始めるための重要なステップ:__CAPGO_KEEP_0__

for instant over-the-air updates.

インストール Node.js, npm, JDK Xcode, および Android Studio.
実行 npm install @capacitor/core @capacitor/cli およびプロジェクトを初期化する
iOSおよびAndroidプラットフォームを使用して追加 npx cap add ios および npx cap add android.
オプション: Capgoを使用してライブアプリの更新を設定 iOSおよびAndroidプラットフォームを使用して追加する.

このガイドでは、Capacitor CLI を設定し、プラットフォームを構成し、アプリをデプロイする必要があるすべての内容をカバーします。始めましょう!

紹介 Capacitor 構成

Capacitor Framework Documentation Website

セットアップ要件

始めるには、以下のツールがインストールされていることを確認してください:

Node.js (バージョン 14 またはそれ以降) と npm
Java JDK (バージョン 11 または新しい)
Xcode (バージョン 12 または新しい iOS ビルド用)
Android Studio (Android ビルド用)
Capacitor CLI オプション:

ライブ更新を有効にするには、「 __CAPGO_KEEP_0__ セットアップガイド」Capgo Setup Guide__CAPGO_KEEP_0__ インストールステップ

Optional: If you want to enable live updates, check out the “CLI Setup Guide” below.

開始する前に、 Node.js, npm, JDK, Xcode、 Android Studio set up. Once ready, you can install the Capacitor CLI by running:

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

Capacitor

__CAPGO_KEEP_1__ をインストールできます。 このコマンドは、

新しいプロジェクトの作成

プロジェクトを始めるには Capacitor CLI を使用これらのステップに従ってください

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

設定ファイルの更新

設定ファイルを編集して、以下の設定を含める capacitor.config.json 更新後、この設定を使用して __CAPGO_KEEP_0__ をプロジェクトに設定

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

Once updated, use this configuration to set up Capacitor for your project.

プロジェクトの骨組みができたので、iOSとAndroidのターゲットを設定する時です

iOSとAndroidの追加

必要なプラットフォーム固有のパッケージを __CAPGO_KEEP_0 CAPGO_KEEP_1__ を使用してインストールする

Start by installing the necessary platform-specific packages using the Capacitor CLI:

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

iOSの場合、Xcode 14 またはそれ以降を確実にインストールしてください。 CocoaPods 1.11 またはそれ以降、macOS 12 またはそれ以降が必要です。Androidの場合、Android Studio Giraffe (2022.3.1+)、JDK 17 またはそれ以降、Gradle 7.5 またはそれ以降が必要です。 Gradle Capacitor CLIをインストールした後、ウェブアプリケーション内の変更を反映するために、ネイティブのターゲットを最新の状態に保つ必要があります。

プラットフォームの更新

ウェブアプリケーションを更新した後、最新のウェブ変更と同期するには、次の手順に従ってください。

コマンドは2つのタスクを処理します。

npm run build
npx cap sync

ウェブアセットをネイティブプラットフォームにコピーします。 cap sync ネイティブの構成とプラグインを最新の変更に合わせて更新します。

The
command handles two tasks:

IDE セットアップ

適切なIDEでプロジェクトを開きます:

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

Xcodeで:

開発チームを選択してください。
署名証明書を設定してください。
バンドル識別子を更新してください。

Android Studioで:

アプリケーションIDを変更してください。 build.gradle.
署名用のキーストアを設定してください。
デバッグとリリースのビルドバリアントを両方設定してください。

設定が完了したら、プロジェクトを npx cap build ios または npx cap build android .Capgoを再実行してください npx cap sync すべてのアセットが最新であることを確認するために

Capgo Capacitor CLIプロジェクト設定ガイド

Capgo Live Update Dashboard インターフェイス

Set up Capgo to enable instant over-the-air updates for your app.

Key Features of Capgo

Capgo offers several tools to streamline app updates:

エンドツーエンド暗号化 更新の配信が安全に実行されます。
更新は バックグラウンドで実行されます アプリが起動するとき。
分析ツール 更新の成功率とユーザーの関与を追跡するのに役立ちます。
A 一回のクリックでロールバック 問題のある更新から迅速に回復するためのオプションがあります。
ステージドロールアウトやベータテストに使用するチャンネルシステム Capgoのインストール Capgoを始めるための手順を以下に示します。

Installing Capgo

Capgo

Install the Capgo CLI:
```
npm install --save @capgo/cli
```
Capgoを初期化プロジェクト内で
```
npx capgo init
```
更新をビルドおよびリリース:
```
npm run build
npx capgo release
```
アプリを開いてバックグラウンドの更新プロセスをトリガー

ベストプラクティス

チャンネルを使用して、すべてのユーザーにロールアウトする前にアップデートをテスト
分析を監視して、更新が正常に配信され、ユーザーが関与していることを確認
エラー追跡を有効にして、問題を早期に発見して修正
ロールバック機能を準備して、迅速に対応

CapgoはCapacitor 8と互換性があり、CI/CDパイプラインとSmoothに統合され、AppleおよびGoogleストアの要件に準拠

一般的な問題とアドバイス

プラットフォームおよびCapgoのセットアップが完了したら、一般的なエラーに直面する可能性があります。ここでは、迅速に対応する方法を紹介します

環境設定の問題

CLI が見つかりません エラー: コマンド npx cap が失敗します。 解決策: 以下のコマンドを実行し、再試行してください。 npm install --save @capacitor/cli @capacitor/core Node のバージョンが一致しない
エラー : __CAPGO_KEEP_0__ コマンドが失敗するのは、Node.js のバージョンが一致していないためです。: CLI commands fail due to Node.js version errors. Environment Setup Issues: Node.js 14 以上をインストールしてください。

設定問題

構成不一致 エラー: capacitor.config.json 変更は反映されません。修正: プロジェクトの設定値と appId とウェブビルド出力フォルダの値が一致していることを確認してください。 webDir プラットフォーム同期エラー package.json and
and エラー: 実行 npx cap sync 結果はプラグインバージョンコンフリクトになります。修正: バージョンを同じメジャーバージョンにアップデートし、再度syncコマンドを実行してください。 @capacitor/android ビルドとデプロイ @capacitor/ios ビルドと署名のエラー

エラー

: iOSまたはAndroidのビルドが失敗する場合、証明書またはキーストアが欠けている可能性があります。 修正and to: IDEのセットアップ手順に従ってください。iOSの場合、Xcodeで開発チームを追加してください。Androidの場合、キーストアを設定してください。 build.gradle.
Webディレクトリが見つかりません。 エラー: npx cap sync 修正 : Webビルドコマンドを実行してください(例えば、) その後、プラットフォームを同期してください。 npm run buildライブ更新の問題

__CAPGO_KEEP_0__ 更新の失敗

Capgo Update Failures : 生産用アプリで更新が表示されません。修正 protectedTokens: Double-check your Capgo APIキーの capacitor.config.json と

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.

プラットフォーム固有のセットアップに関する詳細については、Platform Setup セクションを参照してください。ライブ更新を使用している場合は、__CAPGO_KEEP_0__ セットアップガイドを参照してください。

概要

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

Capacitor CLI を使用して Web アプリを起動し、iOS と Android プラットフォームをセットアップし、ライブ更新を含めることもできます。

Use the Capacitor CLI to initialize your project.
Capacitor CLI を使用してプロジェクトを初期化します。
アプリのパッケージ ID を設定し、Web 出力ディレクトリを定義します。
Install and set up Capgo with the following command: npm install --save @capgo/cli && npx capgo init

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

Keep going from Capacitor CLI: Project Setup Guide

Capacitor CLI を使用している場合、プロジェクトのセットアップは簡単です。 Capacitor CLI: プロジェクトセットアップガイド Capacitor CLIのプロジェクト設定ガイドを読んで、ダッシュボードとAPIのオペレーションを計画し、 API まとめ APIの実装詳細については、概要を参照してください。 Capacitor CLI プロジェクト設定ガイドの導入導入の実装詳細について API キー API キーの実装詳細についてデバイスデバイスの実装詳細についてバンドルバンドルの実装詳細について。

Capacitor CLI: Project Setup Guide