チャレンジ

Constellationアプリケーションのデバッグ

6 タスク

１時間 15 分

表示の対象：All users Applies to: Pega Platform '25

中級

ユーザーエクスペリエンス

Constellation

ローコードアプリ開発

日本語

シナリオ

Constellationアプリケーションはステートレスであるため、ユーザーポータルまたはDev StudioからPega Clipboardを実行してスレッドを切り替えることによりライブデータを調査することはできません。その結果、Tracer toolとUI Inspector、さらにブラウザーのDevToolsを使用してConstellationアプリケーションをスムーズにデバッグすることが重要です。 Tracerツールは、アプリケーションルールの実行フローとパフォーマンスを追跡するのに役立ち、UI Inspectorは、ビューメタデータ、コンポーネントプロパティ、UI要素のインタラクティブな側面を調べる直感的な方法を提供します。

補足： DevToolsは、ソフトウェアの作成、テスト、デバッグを可能にするブラウザーに組み込まれたプログラムです。Chrome、Edge、Firefoxブラウザーでは、キーボードのF12キーを押すことでDevToolsにアクセスできます。

以下の表は、チャレンジに必要なログイン情報をまとめたものです。

ロール	ユーザー名	パスワード
システムアーキテクト	Author@SL	pega123!

補足： 練習環境では、複数のチャレンジの完了をサポートする場合があります。その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。

補足： このチャレンジにはデモビデオはありません。チャレンジを完了するための段階的な手順については、「詳細なタスク」を参照してください。

このチャレンジを完了するには、Pegaインスタンスを起動する必要があります。

起動には5分ほどかかることがありますので、しばらくお待ちください。

ログイン

詳細なタスク

1 Dev StudioでJSONデータを表示する

チャレンジのPegaインスタンスに、以下のログイン情報を入力します。
1. ユーザー名フィールドに「Author@SL」と入力します。
2. Passwordフィールドに「pega123!」と入力します。
App Studioのナビゲーションペインで、「Case Types > Incident」をクリックしてIncidentケースタイプを開きます。
ケースタイプのUXタブで、Other Views タブを選択し、Confirmation部分ビューに移動します。
補足： Pegaは、ケースタイプの開発に使用できるいくつかの標準ビューをご用意しています。これらのビューの一部には、通常とは異なる構成のものがあります。この一例として、Confirmationビュー（ID：pyConfirm）があります。このビューは、アサインメントの確認で情報を表示する役割を担います。
「Additional info」アイコンをクリックして、App Studioでビューのメタデータの一部を表示します。Dev Studioでは、より多くのメタデータがJSONとして表示されます。
ConfirmationビューののWhat's nextセクションを確認します。Dev StudioのJSONメタデータで強調表示されます。
「Dev Studio」に切り替えて、JSON形式のメタデータにアクセスします。
pxEnableC11nDev. という名前のルールを検索します。
補足： 検索で結果が返されない場合は、「Records > Decision > When」の順でクリックして、Name列をpxEnableC11nDevでフィルタリングしてルールを見つけます。
pxEnableC11nDev ルールを開き、「Private edit」を続行し、値を「true」に設定します。
Dev Studioの検索バーに「pyConfirm pxObjClass:Rule-UI-View」と入力して、pyConfirm ビューを検索します。
SL-TellUsMore-Work-Incidentクラスに関連付けられたpyConfirmビュールールを選択します。
JSONで、「pyWhatsNext 」への参照を探します。どのプロパティが取得され、UIに表示されているのかを確認します。

補足： 次の画像に示されているように、JSONメタデータが表示されない場合は、「Mark as custom」ボタンをクリックし、Mark View as customモーダルを送信します。

2 Tracerを使用してビュールールを調べる

App Studioに切り替え、ナビゲーションペインで「Case Types」をクリックします。
Research ケースタイプで、ケースタイプデータモデルを開きます。
「Address」という名前の新しいAddress フィールドを追加します。

補足： デフォルトでは、Addressフィールドタイプに、「pyAddressForm」という名前のデフォルトのビューがあります。
Debug ステップから、Debugビューを開き、それにAddressフィールドを追加します。
「Submit」をクリックし、「Save」をクリックします。
Previewボタンをクリックしてポータルウィンドウを開きます。
Researchケースを作成する
App Studioの右下隅にあるToggle runtime toolbarアイコンをクリックして、Tracerを開きます。
「Settings」をクリックします。EVENT TYPES TO TRACEセクションで、下にスクロールして、View Rulesを有効にします。「OK」をクリックします。
ポータルに戻り、Debug アサインメントでSubmitを押します。
Tracerに戻り、Resource: /application/v2/assignments を展開して、「View Start」を検索して、レンダリングをリクエストされたすべてのビューの名前を見つけます。
pyAddressFormに関連付けられたビューを見つけます。
「DATA-ADDRESS-POSTAL!PYADDRESSFORM」リンクをクリックして、AddressFormビューのJSONを開きます。JSONが表示されない場合はMark as customボタンをクリックします。

補足： または、Dev Studioの検索バーを使用してpyAddressForm ビューを開きます。
Tracerツールを閉じます。

3 UI Inspectorでメタデータを表示する

補足： UI Inspectorツールは、メタデータ、フィールドプロパティ、ビュープロパティなどの画面の問題をデバッグする直感的な方法を提供します。UI Inspectorは主に、アサインメントではなく、ビューやその他のUIコントロールのデバッグに使用されます。

App Studioで、Research ケースタイプを開きます。
UXタブを開き、Details 部分ビューを開きます。
Primary fieldsビューを削除し、AddressフィールドをDetails部分ビューに追加します。
Dev Studioに切り替え、Customer Portalを起動します。
Customer Portal,で、ポータルのホームページに移動します。
Announcementsバナーのコンテンツに注意します。
お使いのブラウザーでDev Toolsを開きます。多くの場合、F12（Chrome、Fire Fox、Edge）を使用します。
Consoleタブに移動して、ウィンドウをクリアします。
Dev Tools Consoleで「PCore.getDebugger().toggleInspector();」と入力し、UI Inspectorツールを起動します。

補足： メッセージ：「PCore is not defined」が表示された場合、App Studioからポータルを起動した可能性があります。PCoreメソッドとPConnectメソッドは、App Studioシェルでは使用できません。PCoreとPConnectを動作させるには、Dev Studioからポータルを起動する必要があります。 UI Inspectorを使用したアプリケーションのUIの構造の詳細については、「UI Inspectorを使用したアプリケーションのチェック」を参照してください。
ウィンドウの右側で、Open UI InspectorアイコンをクリックしてUI Inspectorウィンドウを開きます。
「Tell Us More」アナウンスメントに関連付けられたビューのメタデータを調べます。これには以下のようなものがあります。
- ビュー：pyHome
- AppAnnouncement
  
  補足： Announcementsウィジェット情報のデータソースは、D_pyAnnouncementsデータページに基づいていることに注意してください。
UI Inspectorツールを停止するには、「PCore.getDebugger().toggleInspector();」と入力します。
Dev Studio.に切り替えます。
Dev Studioの検索バーを使用して、D_pyAnnouncementsデータページを開きます。

Data Sourcesセクションで、pyInitAnnouncementsデータトランスフォームを開き、次の表に示すように手順2と2.1を追加し、変更を保存します。


	Action	Target	Relation	Source
2	Append and Map to	.pxResults	a new page
2.1	Set	.pyLabel	equal to	「Constellationの新しいオーサリングエクスペリエンス」

Customer Portal.の新しいインスタンスを起動します。ホームページで、更新された箇条書きを確認します。

4 DX API呼び出しのデバッグ

補足： DebugPegaAPIシステム設定を使用すると、DX APIのリクエストと応答に関する詳細を収集できます。DebugPegaAPIを「true」に設定すると、システムはPEGAログのAPIエラーに関する情報を記録します。 DebugPegaAPIシステム設定は、ページのインストラクションやフィールドセキュリティエラーのデバッグに特に役立ちます。

App Studioに切り替えます。 Research ケースタイプで、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」をクリックし、「Get list data view」オートメーションを開きます。
Tracerウィンドウにアクセスし、「Pega-API-DataExploration pzTranslateViewPageToJSON 」という名前のイベントを選択し、JSONとして返されるリストを確認します。
DataTransformEndイベントタイプに関連するTracerウィンドウを閉じます。

5 データページキャッシュを確認する

Customer Portal に戻り、新しいIncident ケースを作成します。
Contact Infoステップに移動します。
Developer Toolsを開き、Consoleタブに移動して、「PCore.getDataPageUtils();」と入力します。
Contact Infoステップでキャッシュされるデータページを確認します。
Developer Toolsウィンドウを閉じます。

6 Redux DevToolsで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を開き、Redux タブに移動します。
新しいIncident ケースを作成し、Determine Incident Typeステップに移動します。
フォームに入力する際に、アクション情報の変更を確認してください。
Incidentケースを続行し、Redux Dev Toolsに変更がどのように記録されるかを確認します。