App CenterからCapgoへの移行

移行の概要

Capgo 開発チームがデプロイ済みアプリへライブアップデートを配信できるよう支援するサービスです。
jQuery Mobile、Framework 7、Sencha、KendoUI、Ionic、独自のカスタムソリューションで書かれた Capacitor JS アプリも移行できます。 既存のIonicアプリは不要です。.
Colt App Center Build（Android/iOSアプリのビルド）に相当するサービスを提供しています。Test、Diagnostics、Analyticsサービスも提供しています。

注意

アプリでまだCordovaを使用している場合は、まずCapacitorへ移行してから、Capgoへ移行する必要があります。

IonicチームがCordovaの精神的後継として開発したCapacitorは、ネイティブツールと機能に近い開発を可能にし、より優れたユーザー体験とパフォーマンスを提供することを目指しています。

幸いなことに、移行プロセスは簡単で、ほとんどのCordovaプラグインはCapacitorと後方互換性があります。移行を開始する.

Capgoについて

Capgoは、アプリのアップデートを継続的に管理します。開発チームはアプリ独自の機能に完全に集中でき、複雑なアプリ配信プロセスはCapgoに任せられます。

Capgo は、Web配信とモバイルのギャップを埋めます。

Capgo の前提条件

App Centerと同様に、 Capgo Azure DevOps、Bitbucket、GitHub、GitLab上のGitリポジトリでホストされているアプリをサポートしています。

Capgo CLI のインストール

注意

進める前に、NodeとNPMがコンピュータにインストールされている必要があります。常に現行のLTSバージョン Capgo は古いバージョンをサポートしていません。

作成します `package.json` と Capacitor の設定ファイル

注意

作業を開始する前に、新しいGitブランチで変更を行うことをお勧めします。

以降 Capgo capacitor アプリを自動化するために作られましたが、アプリにまだない可能性のあるファイルが1つ必要です。まず、 capacitor.config.json ファイルです。これを作成する最も簡単な方法は、アプリのルートで以下を実行することです：

npm install @capacitor/core

次に、CLI の質問形式を使って Capacitor を初期化します：

npx cap init

CLI からいくつか質問されます。最初はアプリ名、続いてアプリで使用するパッケージIDです。

最後に、新しいファイルをプロジェクトにコミットします：

git add .git commit -m "added package json and capacitor config" && git push

Code を移行する

新しい必須の〜が揃ったので Capgo ファイルが揃ったら、アプリ本体に目を向けましょう。 Capgo ビルド済みのアプリ全体が、次の名前のディレクトリ内にあることを想定しています： dist.

ビルドした code が次のディレクトリに dist ない場合は、Capacitor の設定ファイルでこの値を変更してください。

アプリのディレクトリ構造は次のようになります：

アプリの構造

Capgo の設定

アプリの準備が整ったら、 Capgo 統合に進み、サインアップして API キーを取得し、最初のバージョンをアップロードしましょう！まずは Capgo アカウントの作成から始めましょう.

Capgo にログインしたら、Account ページに移動して API キーをクリックし、次に「write」キーをクリックしてクリップボードにコピーします。

Capgo SDK のインストール

コマンドラインで、Capacitor アプリフォルダのルートで直接、以下のコマンドを実行します:

npm i @capgo/capacitor-updater && npx cap sync プラグインを Capacitor アプリにインストールするには。

次に、CodePush の代替として、この code をアプリに追加します:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

これにより、インストールが成功したことがネイティブプラグインに通知されます。

Live Updates のデプロイ (CodePush 代替)

Live Update 機能は、インストール済みの Capgo SDK ネイティブアプリケーション内のコンポーネントを使って、特定の Deploy Channel Destination をリッスンします。Web ビルドが Channel Destination に割り当てられると、その更新は、指定された Channel Destination をリッスンするよう設定されたバイナリを実行しているユーザーデバイスにデプロイされます。

まず、以下を使用します： all APIキーアカウントに表示されている CLI でログインするには:

npx @capgo/cli@latest login YOURKEY

最初のアプリを追加

まずは CLI を使って、Capgo Cloud にアプリを作成しましょう。

npx @capgo/cli@latest app add

このコマンドは、Capacitor の設定ファイルで定義されたすべての変数を使用してアプリを作成します。

最初の bundle をアップロード

次のコマンドで、code をビルドして Capgo に送信します：

npx @capgo/cli@latest bundle upload --channel production

デフォルトでは、バージョン名はお使いの ... のものになります package.json ファイル。

確認 Capgo ビルドが存在するかどうか。

私のモバイルサンドボックスアプリでも試せます.

チャンネルをデフォルトに設定

アプリを Capgo に送信した後、チャンネルを default Capgo からのアップデートをアプリが受信できるように設定する必要があります。

npx @capgo/cli@latest channel set production -s default

アップデート検証用にアプリを設定

メインのJavaScriptファイルにこの設定を追加してください。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

その後、以下を実行して npm run build && npx cap copy アプリをアップデートします。

デバイスで Live Update を受信する

Deploy から live update を受信するには、デバイスまたはエミュレータでアプリを実行する必要があります。最も簡単な方法は、以下のコマンドを使用して、エミュレータまたはコンピュータに接続されたデバイスでローカルアプリを起動することです。

npx cap run [ios | android]

アプリを開き、バックグラウンドに送ってから再度開くと、ログにアプリがアップデートを実行したことが表示されるはずです。

おめでとうございます！ 🎉 初めての Live Update のデプロイに成功しました。これは Live Updates でできることのほんの始まりです。詳しくは、完全な Live Updates ドキュメント.

App Center の依存関係を削除

Capgo のサービスを統合したので、App Center への参照はすべて削除してください。未使用の code/サービスを削除するのはベストプラクティスであるだけでなく、SDK を削除するとアプリのサイズも削減できます。

まず、ターミナルを開き、App Center プラグインをアンインストールします：

    cordova plugin remove cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes cordova-plugin-code-push

次に、 config.xml を開き、以下の preference 値を削除してください。記述は以下のようになります：

    <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" /><preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" /><preference name="CodePushPublicKey" value="YOUR-PUBLIC-KEY" />

アプリで App Center Analytics を使用していた場合は、以下の preferences 要素を削除してください： APPCENTER_ANALYTICS_ENABLE_IN_JS と APPCENTER_CRASHES_ALWAYS_SEND.

以下を削除してください <access /> 要素を削除してください：

    <access origin="https://codepush.appcenter.ms" /><access origin="https://codepush.blob.core.windows.net" /><access origin="https://codepushupdates.azureedge.net" />

CSP内のCodePushへの参照を削除します meta の index.html ファイル (https://codepush.appcenter.ms):

    <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.appcenter.ms 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

最後に、アプリ内でApp Centerサービスへのcode参照をすべて削除します。例えば codePush.sync();.

次のステップ

App CenterからCapgoへの移行が完了し、Live Updateを利用できるようになりました。これはCapgoでできることの始まりにすぎません。Channel（複数環境）やoverrideなど、他の機能も探ってみましょう。Cloud CLI統合では、お好みのCI/CDプラットフォーム（GitHub Action、GitLab、Jenkinsなど）内でCapgoを使用できます。

アプリのアップデートを自動送信

code が GitHub にホストされている場合、GitHub actions を活用することで、さらに数ステップで自動ビルドとリリースを設定できます。

そのための手順を解説した第2の記事も作成しました。

クレジット

多大な感謝： Ionic、この記事はこの記事 ChatGPT-3で書き直し、調整したものです。