Skip to main content

Pega Web Mashupの作成

4 タスク

15 分

Visible to: All users
中級 Pega Platform 8.7 ユーザーエクスペリエンス 日本語

シナリオ

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

このチャレンジは、下記のモジュールで学習したことを実践するための内容です。


このモジュールは、下記のミッションにも含まれています。

If you are having problems with your training, please review the Pega Academy Support FAQs.

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

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

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