Expoを使用して、iOSとAndroidの両方に対応するReact Navigationアプリを簡単に開発してデプロイします。
注：Pendoは、Expo SDK 41以降とのインテグレーションをサポートしています。
ステップ1：Pendo SDKのインストール
1.アプリケーションフォルダで次のコマンドを実行します。
NPMを使用する場合：
npm install --save rn-pendo-sdk
YARNを使用する場合：
yarn add rn-pendo-sdk
2. アプリケーションフォルダーでapp.jsonを開き、rn-pendo-sdkプラグインをPluginsセクションに追加します。
{
"expo": {
...
"plugins": [
...
[
"rn-pendo-sdk",
{
"ios-scheme": "COPY YOUR IOS SCHEME HERE",
"android-scheme": "COPY YOUR ANDROID SCHEME HERE",
}
],
]
}
}
3. Javascriptの難読化を変更します。
本番用にバンドルする際、React Nativeでは、クラス名と関数名を縮小してバンドルのサイズを縮小します。つまり、コードレスソリューションに使用される元のコンポーネント名にはアクセスできなくなります。
アプリケーションmetro.config.jsファイルで、トランスフォーマーに以下のステートメントを追加します。
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierConfig = {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
mangle: {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
}
}
module.exports = config;
ステップ2：Pendo SDKのインテグレーション
1.アプリケーションのメインファイル（App.js/.ts/.tsx）に、以下のコードを追加します。
import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';
function initPendo (){
const navigationOptions = {library: NavigationLibraryType.ReactNavigation, navigation: null};
const pendoKey = "ここにアプリキーをコピーしてください";
PendoSDK.setup(pendoKey, navigationOptions);
}
initPendo();
2. ログイン、登録など、訪問者が識別されるPendoを初期化します。
const visitorId = 'VISITOR-UNIQUE-ID';
const accountId = 'ACCOUNT-UNIQUE-ID';
const visitorData = {'Age': '25', 'Country': 'USA'};
const accountData = {'Tier': '1', 'Size': 'Enterprise'};
PendoSDK.startSession(visitorId, accountId, visitorData, accountData);
3. NavigationContainerを作成したファイルで、ファイルの先頭に以下のインポートの記述を追加します。
import { withPendoRN } from 'rn-pendo-sdk'
import { useRef } from 'react';
4. NavigationContainer（RootNavigatorなど）を作成し、withPendoRNを使用してラップされたNavigationContainerを返すメソッドに次のコードを追加します。
重要：この関数は、PendoSDK.setupが完了した後で実行する必要があります。
function RootNavigator(props) {
const navigationRef = useRef();
return (
<NavigationContainer
ref={navigationRef}
onStateChange={()=> {
const state = navigationRef.current.getRootState()
props.onStateChange(state);
}}
onReady ={()=>{
const state = navigationRef.current.getRootState()
props.onStateChange(state);
}}>
{MainStackScreen()}
</NavigationContainer >
)
};
備考
- visitorId：ユーザーの識別子（例：John Smith）
- visitorData：ユーザーのメタデータ（例：メール、電話、国）
- accountId：ユーザーの特定の企業やグループの所属（例：Acme Inc.）
- accountData : アカウントのメタデータ（例：種別、レベル、ARR）
nullまたは""をvisitorIdに渡す、もしくはinitParams.visitorIdを設定しないと、匿名の訪問者IDが生成されます。
ステップ3：インストールの検証
- EASを使用するかローカルでアプリケーションを開発し、シミュレーターまたは実際のデバイスでアプリケーションを実行します。
- デバイスログを確認し、次のメッセージを探します。
Pendo Mobile SDK was successfully integrated and connected to the server.
（PendoモバイルSDKは正常に統合され、サーバーに接続されました。） - Pendo UIを使用してテストを行います。
- ［サブスクリプション設定（Subscription Settings）］に、［インテグレーション済（Integrated）］と示されたアプリが表示されていることを確認します。
開発者向けドキュメント