Skip to main content

チャレンジ

Pega Web Mashupの作成

4 タスク

15 分

Visible to all users
中級 Pega Platform 8.6 ユーザーインターフェイス 日本語

シナリオ

GoGoRoadは、Uplus Autoが所有するロードサイドサポートアプリケーションです。 GoGoRoadの利害関係者は、お客様のロードサイドサポートリクエストの業務を合理化するために、会社のWebサイトから新しいサポートリクエストを作成する機能を顧客に提供したいと考えています。 Pega Web Mashupを作成し、そのマッシュアップをUplus Auto Webサイトにデプロイします。

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

ロール ユーザー名 パスワード
アプリケーションデベロッパー author@gogoroad pega123!
補足: 練習環境では、複数のチャレンジの完了をサポートする場合があります。 その結果、チャレンジのウォークスルーに表示される設定は、お客様の環境と完全に一致しない場合があります。

チャレンジ ウォークスルー

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

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

詳細なタスク

1 セルフサービスアプリケーションを作成する

補足: Pegaのベストプラクティスとして、コアアプリケーション上にアプリケーションを作成し、WebマッシュアップのUIを変更してもコアアプリケーションのUIに影響を与えないようにします。
  1. Dev Studioのヘッダーで、GoGoRoad > New Application をクリックしてNew Applicationウィザードを開きます。
    new application
  2. New Applicationウィザードでは、Search all types をクリックしてアプリケーションの種類を選択します。
    search all application types
  3. フィールドで、「GoGoRoad」と入力するか選択し、Use this application typeをクリックして現在のアプリケーションを使用します。
    built on app
  4. 「Select case types」で、すべてのケースタイプが選択されていることを確認し、Continueをクリックします。
    select all case types
  5. 「Select data type」で、すべてのデータタイプが選択されていることを確認し、Continueをクリックします。
    select all data types
  6. アプリケーションにGoGoSelf-Serviceという名前を付けます。
    name your application
  7. Create applicationをクリックします。
  8. Go to appをクリックします。
  9. Dev Studioで、GoGoSelf-Serviceアプリケーション定義を開きます。
  10. 「Built on applications」セクションのGoGoRoad 01.01.01アプリケーションで、Theme-Clarity 01.01アプリケーションを追加し、Cosmosルールを上書きし、Webセルフサービスアプリケーションでサポートリクエスト フォームをきれいに表示します。
  11. 2列目をクリックしてドラッグし、Theme-ClarityアプリケーションをGoGoRoadアプリケーションの上に移動させ、GoGoSelf-ServiceアプリケーションがTheme-Clarityアプリケーションでスキンを使用するようにします。
    app definition GoGoSelf-Service
    ヒント: GoGoSelf-Serviceアプリケーションの作成後にフロールールが見つからない場合は、フロールールを開き、Save Asボタンを使用してコピーを新しいアプリケーションに保存します。

2 アプリケーション権限の設定

  1. GoGoSelf-Serviceのアプリケーション定義で、Securityタブをクリックします。
  2. Mashup securityセクションで、Add a rowをクリックします。
    Mashup security section of the ReserveIt application definition
  3. Trusted originフィールドで、「https://pegasystems.github.io/uplus-wss/」と入力すると、アプリケーションにホストサイトからの受信メッセージを承諾させることができます。
  4. アプリケーション定義を保存します。

3 App Studioでマッシュアップチャネルを作成する

  1. App Studioのナビゲーションペインで、Channelsをクリックします。
  2. 「Request for assistance」という名前の新しいWeb mashupチャネルインターフェイスを作成します。
    Create a web mashup channel interface
  3. セキュリティーベストプラクティスへの準拠を保証するために、Use encryptionが有効になっていることを確認します。
  4. 設定セクションのAction リストでCreate a new caseが選択されたことを確認します。
  5. Case typeリストでAssistance Requestを選択します。
  6. Retain mashup state on browser refresh オプションを有効にします。
  7. Skin リストでClarity Theme - Deep Cerise を選択して、マッシュアップをすぐに使えるスキンに付与します。
  8. Initial skeleton リストでDefault Mashup Skeletonが選択されたことを確認します。
  9. Generate mashup code をクリックして、Mashup codeウィンドウを表示します。
    Generate mashup code button
  10. Mashup codeウィンドウのMashup code セクションで、Copyをクリックし、コードをテキストファイルに貼り付けてパラメーター値を参照します。
    mashup code on text file
  11. マッシュアップコードウィンドウを閉じて、Saveをクリックしてチャネルを保存します。

4 Uplusサイトにマッシュアップをデプロイする

補足: Uplusサイトでは、使いやすいフォームにマッシュアップコードの属性値を入力することで、ユーザーはサードパーティのサイトを設定することなくマッシュアップコードをプレビューすることができます。 独自のサードパーティサイトがある場合は、そのサイトを信頼できる配信元として追加し、マッシュアップ<div>コード全体をホストサイトのコードに貼り付けることで、外部サイトにマッシュアップをデプロイすることができます。
  1. https://pegasystems.github.io/uplus-wss/をクリックし、ブラウザでUplusサイトにアクセスします。
    uplus
  2. UplusサイトでAuto をクリックすると、Uplus Autoアプリケーションが開きます。
    Uplus auto tile
  3. Uplus Autoサイトのフッターで、Settingsをクリックします。
    settings
  4. 左側のナビゲーションペインでQuick Linksをクリックし、Uplus Autoサイトでマッシュアップケースを設定します。
    uplus settings menu
  5. マッシュアップコードのテキストファイルを開き、以下の表に示すとおりマッシュアップコードから属性値を使用して、Mashup Case 1フォームを完成させます。
    マッシュアップコードの属性名 フォームフィールド フォームの値
    data-pega-threadname  Case name in 'en'  Request for assistance
    data-pega-action Action createNewWork
    data-pega-URL URL 注:この値は、マッシュアップコードの生成に使用するインスタンスのURLです。
    data-pega-action-param-classname  Classname GoGo-GoGoSelf-Work-AssistanceRequest
    data-pega-applicationname Application name GoGoSelf
    data-pega-channelID Channel ID 注:この値は、マッシュアップコードで生成される一意のIDです。
     
    ヒント: 次の画像に示すように、フォームの値は、作成したマッシュアップコードの属性値と一致します。
    using mashup parameters in the uplus form
  6. 左側のナビゲーションペインで、Usersをクリックします。
  7. 「User 1」フォームのUsernameフィールドおよびPega useridフィールドに、「author@gogoroad」と入力します。
  8. PasswordフィールドおよびPega passwordフィールドに、「pega123!」と入力します。
    User 1 form
  9. 左側のナビゲーションペインで、Save をクリックして設定を保存します。

作業の確認

  1. Settingsのヘッダーで、Uplus Auto ロゴをクリックするとUplus Autoのメインサイトへ戻ります。
  2. Uplus Autoサイトの右上隅で、「User 1」フォームで入力したログイン情報を使用し、Log inをクリックしてSign inします。
  3. 右側のペイン内のQuick linksセクションで、Request for assistanceをクリックします。
    quick links request assistance
  4. サイトにPega Web Mashupが表示され、Assistance Requestケースを作成できることを確認します。
    final mashup
    補足: Mashupを機能させるにはサードパーティのクッキーを有効にする必要があるというエラーメッセージが表示された場合は、Dev Studioでクッキーを有効にします。 Configure > System > Settings > Cross-Site Request Forgeryをクリックし、Enable samesite cookie attributeオプションを有効にして、Samesite optionsリストからNoneを選択します。
  5. 「Identify vehicle」ステップにケースを進めます。
  6. ブラウザを更新し、マッシュアップの状態が保持されていることを確認します。


下記のミッションにも含まれています。

トレーニングを受講中に何か問題がありましたら、こちらをご覧ください: Pega Academy サポートのよくある質問 (FAQ).

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice