Constellationアプリケーションのデバッグ
8 タスク
１時間 15 分
中級
ユーザーエクスペリエンス
Constellation
ローコードアプリ開発
日本語
シナリオ
Constellationアプリケーションはステートレスであるため、ユーザーポータルまたはDev StudioからPega Clipboardを実行してスレッドを切り替えることによりライブデータを調査することはできません。その結果、Tracer tool、ブラウザーのDevToolsを使用してConstellationアプリケーションをスムーズにデバッグすることが重要です。
補足： DevToolsは、ソフトウェアの作成、テスト、デバッグを可能にするブラウザーに組み込まれたプログラムです。Chrome、Edge、Firefoxブラウザーでは、キーボードのF12キーを押すことでDevToolsにアクセスできます。
以下の表は、チャレンジに必要なログイン情報をまとめたものです。
| ロール | ユーザー名 | パスワード |
|---|---|---|
| System Architect | Author@SL | pega123! |
補足： 練習環境では、複数のチャレンジの完了をサポートする場合があります。その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。
チャレンジ ウォークスルー
詳細なタスク
1 Dev StudioでJSONデータを表示する
- チャレンジのPegaインスタンスに、以下のログイン情報を入力します。
- ユーザー名フィールドに「Author@SL」と入力します。
- Passwordフィールドに「pega123!」と入力します。
- App Studioのナビゲーションペインで、「Case Types > Incident」をクリックしてケースタイプを開きます。
- ケースタイプのUXタブで、 タブを選択し、Confirmation部分ビューに移動します。
補足： Pegaは、ケースタイプの開発に使用できるいくつかの標準ビューをご用意しています。これらのビューの一部には、通常とは異なる構成のものがあります。この一例として、Confirmationビュー（ID：pyConfirm）があります。このビューは、アサインメントの確認で情報を表示する役割を担います。
- ビューのメタデータを表示するには、Informationアイコンの上にカーソルを合わせます。
- ConfirmationビューのWhat's nextのセクションを確認します。
- Dev Studioに切り替えます。
- 「pxEnableC11nDev. 」という名前のルールを検索します。Dev Studioの検索メニューでルールが見つからない場合は、「をクリックし、Name列を「pxEnablec11nDev」でフィルタリングしてルールを見つけます。
- pxEnableC11nDev ルールを開き、「」を続行し、値を「true」に設定します。
- Dev Studioの検索バーに「pyConfirm pxObjClass:Rule-UI-View」と入力して、pyConfirm ビューを開きます。
- SL-TellUsMore-Work-Incidentクラスに関連付けられたpyConfirmビュールールを選択します。
- JSONで、「pyWhatsNext 」への参照を探します。どのプロパティが取得され、UIに表示されているのかを確認します。
2 Researchケースタイプを作成する
- App Studioに切り替え、ナビゲーションペインで「」をクリックします。
- を使用して、「Research」という名前の新しいケースタイプを作成します。
- Research ケースタイプで、追加の2つのステージを作成します。デバッグし、完了します。
- Resolve ステージのコンテキスチャルプロパティパネルで、「Resolve the Case」を選択します。
- Debug ステージで、「Debug」というラベルの付いたCollect informationステップを作成します。
- 「Save」をクリックします。
3 Tracerを使用してビュールールを調べる
- Research ケースタイプで、ケースタイプデータモデルを開きます。
- 「Address」という名前の新しいAddress フィールドを追加します。
補足： デフォルトでは、Addressフィールドタイプに、「pyAddressForm」という名前のデフォルトのビューがあります。 - Debug ステップから、Debugビューを開き、それにAddressフィールドを追加します。
- 「」をクリックし、「」をクリックします。
- ボタンをクリックしてポータルウィンドウを開きます。
- App Studioの右下隅にあるTracerを開きます。
-
- 「Settings」をクリックします。EVENT TYPES TO TRACEセクションで、下にスクロールして、View Rulesを有効にします。「」をクリックします。
- ポータルに戻り、Debug アサインメントでを押します。
- App Studioに戻り、Research ケースタイプを作成します。Create Researchビューで、「」をクリックします。
- Tracerに戻り、Resource: /application/v2/assignments を展開して、「View Start」を検索して、レンダリングを要求されたすべてのビューの名前を見つけます。
- pyAddressFormに関連付けられたビューを見つけます。
- 「DATA-ADDRESS-POSTAL!PYADDRESSFORM」リンクをクリックして、AddressForm ビューのJSONを開きます。
補足： または、Dev Studioの検索バーを使用してpyAddressForm ビューを開きます。 - Tracerツールを閉じます。
4 X-Rayを使用してメタデータを調べる
補足： X-Rayツールは、メタデータ、フィールドメタデータ、状態プロパティなどの画面の問題をデバッグするための直感的な方法を提供します。X-Rayは主に、アサインメントではなく、ビューやその他のUIコントロールのデバッグに使用されます。
- App Studioで、Research ケースタイプを開きます。
- UXタブを開き、Details 部分ビューを開きます。
- Primary fieldsビューを削除し、AddressフィールドをDetails部分ビューに追加します。
- Dev Studioに切り替え、Customer Portalを起動します。
- 新しいResearch ケースを作成する。
- Debugアサインメントに移動します。
- Dev Toolsをお使いのブラウザーで開きます。多くの場合、F12（Chrome、Fire Fox、Edge）を使用します。
- Consoleタブに移動して、ウィンドウをクリアします。
- Dev Tools Consoleで次を入力します。 PCore.getDebugger().toggleXRay(true); to start the X-Ray tool.
補足： メッセージ：「PCore is not defined」が表示された場合、App Studioからポータルを起動した可能性があります。PCoreメソッドとPConnectメソッドは、App Studioシェルでは使用できません。PCoreとPConnectを動作させるには、Dev Studioからポータルを起動する必要があります。 - Detailsタブに移動し、Address プロパティに関連する部分ビューを見つけます。
- 「Information」アイコンの横にあるAddressセクションで、Addressプロパティに関連するメタデータを検索します。
- ビューに関連するメタデータを見つけるには、View:pyAddressFormセクションの横にある「Information」アイコンをクリックします。
- Consoleに戻り、「$pConnect;」と入力します。
- pyAddressFormビューに関連するコンソールで提供される情報を調べます。
- X-Rayツールを停止するには、「PCore.getDebugger().toggleXRay(false);」と入力します。
5 ポータルホームページのアプリのアナウンスメントセクションを確認する
- Customer Portal,で、ポータルのホームページに移動します。
- バナーのコンテンツに注意します。
- Dev Tools（F12）を有効にして、コンソールで「PCore.getDebugger().toggleXRay(true);」と入力します。
- 「Tell Us More」アナウンスメントに関連付けられたビューのメタデータを調べます。これには以下のようなものがあります。
- ビュー：pyHome
- AppAnnouncement
- ビュー：pyHome
- X-Rayツールを停止するには、「PCore.getDebugger().toggleXRay(false);」と入力します。
- Dev Studio.に切り替えます。
- Appエクスプローラーを使用して、「Rule-UI-View」と入力します。
- ビューのリストから、pyHomeビューを開いて、JSONデータを確認します。
- 「pyHome Announcements」のためのデータソースは、D_pyAnnouncementsデータページに基づいていることに注意します。
- Dev Studioの検索バーを使用して、D_pyAnnouncementsデータページを開きます。
- データソースセクションで、pyInitAnnouncementsデータトランスフォームを開きます。
- ソースフィールドのテキストを更新して「New authoring experience with Constellation」に変更します。
- Customer Portal.の新しいインスタンスを起動します。ホームページで、更新された箇条書きを確認します。
6 DX API呼び出しのデバッグ
補足： DebugPegaAPIシステム設定を使用すると、DX APIのリクエストと応答に関する詳細を収集できます。DebugPegaAPIを「true」に設定すると、システムはPEGAログのAPIエラーに関する情報を記録します。 DebugPegaAPIシステム設定は、ページのインストラクションやフィールドセキュリティーエラーのデバッグに特に役立ちます。
- App Studioに切り替えます。 Research ケースタイプデータモデルで、「User Reference Test」という名前のUser referenceのタイプのフィールドを作成します。
- User Reference Test フィールドをDebugステップビューに追加します。
- Dev Studioに切り替え、DebugPegaAPI動的システム設定を検索し、「true」に設定します。
- ナビゲーションペインで、「Records > Integration-Services > Service Rest > data_views/{data_view_ID}」をクリックして、データビューを処理するService Restを開きます。
- 「Actions > Trace」を選択して、サービスのトレースを開始します。
- カスタマーポータルを起動して、新しいResearch ケースを作成します。
- Debugアサインメントに移動し、User Reference Testフィールドで、「Author@SL」を選択します。
- Tracerタブに戻ります。
- 「Resource: /application/v2/data_views/D_pyC11nOperatorsList」を展開し、オートメーション「pxGetData」を検索します。
- 「pxGetData」をクリックし、「」オートメーションを開きます。
- Tracerウィンドウにアクセスし、DataTransformEndイベントタイプを選択し、JSONとして返されるリストを確認します。
- DataTransformEndイベントタイプに関連するTracerウィンドウを閉じます。
7 データページキャッシュを確認する
- Customer Portal に戻り、新しいIncident ケースを作成します。
- Contact Infoステップに移動します。
- Dev Tools（F12）を開き、Consoleタブに移動して、「PCore.getDataPageUtils();」と入力します。
- Contact Infoステップでキャッシュされるデータページを確認します。
- Developer Toolsウィンドウを閉じます。
8 Redux Dev ToolsでReactの変更を確認する
- ブラウザーで「Redux DevTools」を検索してRedux-DevTools をインストールするか、以下の方法も可能です。
- Chromeの場合は、次のリンクからRedux DevToolsを追加できます。Google Chrome Store Redux DevTools
- Firefoxの場合は、次のリンクからRedux DevToolsを追加できます。 Firefox Redux DevTools
- Edgeの場合は、次のリンクからRedux DevToolsを追加できます。Edge Redux DevTools
- Dev Tools（F12）を開き、Redux タブに移動します。
- 新しいIncident ケースを作成し、Determine Incident Typeステップに移動します。
- フォームに入力する際に、アクション情報の変更を確認してください。
- ケースを続行し、Redux Dev Toolsに変更がどのように記録されるかを確認します。
このチャレンジは、下記のモジュールで学習したことを実践するための内容です。
このモジュールは、下記のミッションにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。