Oracle JET WebアプリケーションでREST APIからデータをフェッチします

イントロダクション

このチュートリアルでは、RESTサービスへのアクセス、Oracle JavaScript Extension Toolkit (Oracle JET) Webアプリケーションへの統合、ユーザー・インタフェースのリスト・ビューへのデータのバインド方法について説明します。

目的

このチュートリアルの完了時に、RESTDataProviderクラスのインスタンスの作成方法を学習しました。このクラスは、JSONベースのRESTサービスで使用可能なデータを表します。

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETリリース・コマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
• (オプション1)このシリーズの前の学習パスの完了: Oracle JavaScript Extension Toolkitのマスター・ビューと詳細ビューを使用したWebアプリケーションの開発
• (オプション2)このシリーズで前の学習パスを完了していない場合:ダウンロードされたjet_web_application_temp.zip

タスク1:スタータ・アプリケーションのダウンロード

前の学習パスで作成したアプリケーションで作業を続ける場合は、このタスクをスキップします。

1. jet_web_application_temp.zipの名前をJET_Web_Application.zipに変更します。コンテンツをJET_Web_Applicationフォルダに抽出します。

2. ターミナル・ウィンドウで、最新バージョンのOracle JETがインストールされていることを確認します。更新していない場合は、Oracle JETのバージョンを更新します。

   $ npm list -g @oracle/ojet-cli
   $ npm install -g @oracle/ojet-cli
   

3. JET_Web_Applicationフォルダに移動し、Oracle JETアプリケーションをリストアします。

   $ ojet restore   
   

   アプリケーションを使用する準備ができました。

タスク2: RESTサービスへのアクセス

Apexリンクをクリックして、Activitiesリソース・エンドポイントのRESTデータを表示します。

データには、様々な属性を持つアクティビティのリストが含まれます。

{
  "items": [
      {
      "id": 1,
      "name": "Baseball",
      "short_desc": "Equipment we carry for baseball players.",
      "image": "css/images/product_images/baseball.jpg"
      },
   . . .
   ],
   "hasMore": false,
   "limit": 25,
   "offset": 0,
   "count": 4,
   "links": [
      {
      "rel": "self",
      "href": "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/"
      },        
      . . .
   ]
}

エンドポイントが返すデータおよびプロパティについて理解します。このチュートリアルの後半でRESTDataProviderのインスタンスを作成する場合は、これらの詳細を理解する必要があります。たとえば、エンドポイントが一連の個々のアクティビティを参照するitemsプロパティをどのように返すかなどです。

タスク3: ViewModelのアクティビティ・データをフェッチするデータ・プロバイダの作成

1. JET_Web_Application/src/ts/viewModelsディレクトリに移動し、エディタでdashboard.tsファイルを開きます。

2. dashboard.tsファイルの先頭で、RESTDataProviderクラスをインポートします。

   import * as AccUtils from "../accUtils";
   . . .
   import { RESTDataProvider } from "ojs/ojrestdataprovider";
   . . .   
   type Activity = {
      id: number;
   };
   . . .
   type ActivityItems = {
      id: number;
      name: string;
      items: Array<Item>;
      short_desc: string;
      image: string;
   };
   
   class DashboardViewModel {
   . . .
   

   ノート:このシリーズの前の学習パスを完了していない場合は、Activityのタイプ別名も宣言する必要があります。これは、次のステップのactivityDataProviderインスタンスに必要なタイプです。このタイプの別名は、DashboardViewModelクラス宣言の前に指定します。

3. DashboardViewModelクラスで、次の変数を宣言し、MutableArrayDataProvider<Activity["id"], Activity>型の既存のactivityDataProviderをコメント・アウトまたは削除します。

   . . . 
   class DashboardViewModel {
   
    // Activity key attribute that you'll pass as a parameter when creating 
    // RESTDataProvider instance
    keyAttributes = "id";
    // REST endpoint that returns Activity data
    restServerURLActivities = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";
    // RESTDataProvider instance
    activityDataProvider: RESTDataProvider<Activity["id"], Activity>;
    // MutableArraryDataProvider that we no longer use, and
    // so we comment it out.
    // activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
   

4. DashboardViewModelクラスのconstructor()メソッドで、MutableArrayDataProviderクラスから既存のactivityDataProvider変数をコメント・アウトまたは削除し、RESTDataProviderインスタンスを作成します。

   . . .
   class DashboardViewModel {
   . . .
   restServerURLActivities = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";
      . . .
   
      constructor() {
      . . .
      this.pieSeriesValue = ko.observableArray([]);  //holds data for pie chart
   
      // this.activityDataProvider = new MutableArrayDataProvider<Activity["id"], 
      //                      Activity>(JSON.parse(storeData), {
      //   keyAttributes: "id",
      // });
   
         this.activityDataProvider = new RESTDataProvider({
         keyAttributes: this.keyAttributes,
         url: this.restServerURLActivities,
         transforms: {
            fetchFirst: {
            request: async (options) => {
               const url = new URL(options.url);
               const { size, offset } = options.fetchParameters;
               url.searchParams.set("limit", String(size));
               url.searchParams.set("offset", String(offset));
               return new Request(url.href);
            },
            response: async ({ body }) => {
               const { items, totalSize, hasMore } = body;
               return { data: items, totalSize, hasMore };   
            },
            },
         },
      });
   
   } 
   . . .
   

   ノート:上のresponse関数は、エンドポイント・レスポンス本文からデータを抽出してdataプロパティを持つオブジェクトを返す必要があります。作業しているエンドポイントがitemsプロパティを返した場合、この後者のプロパティをresponse関数のdataに割り当てます。

タスク4: ViewModelでアイテム・データをフェッチするデータ・プロバイダの作成

特定のアクティビティのアイテムのリストなど、データのサブセットをフェッチするには、別のRESTDataProviderインスタンスを使用します。これを行うには、選択したアクティビティIDを含む新しいURLを指定します。

1. 開いているdashboard.tsファイルのDashboardViewModelクラスで、次の追加変数の型を宣言し、MutableArrayDataProvider<Item["id"], Item>型のitemsDataProvider宣言とconstructor()メソッド内のitemsDataProvider変数自体の両方をコメント・アウトまたは削除します。

   
   class DashboardViewModel {
      . . .
      // Initialize activityKey to 3 to construct an initial REST call
      activityKey: number = 3;
      // itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
      itemsDataProvider: RESTDataProvider<Item["id"], Item>;
   
      // REST endpoint that returns Item data
      restServerURLItems = "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" + this.activityKey + "/items/";
      . . .
   
      constructor() {
      . . .
      // this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
      //    itemsArray,
      //    { keyAttributes: "id" }
      // );
   

2. DashboardViewModelクラスのselectedActivityChangedメソッドで、新しいアクティビティが選択されたときにitemsDataProvider変数をRESTDataProviderインスタンスとして作成するコードを記述します。

   selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
      /**
      *  If no items are selected then the firstSelectedItem property  
      *  returns an object with both key and data properties set to null.
      */
      let itemContext = event.detail.value.data;
   
      if (itemContext != null) {    
      // Deselect currently-selected activity item 
      this.activitySelected(false);
   
      // Comment out or delete this code used to populate and display a list
      // let itemsArray = itemContext.data.items;
      // this.itemsDataProvider.data = itemsArray;
   
      this.activityKey = event.detail.value.data.id;
      this.restServerURLItems = 
         "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/" 
                              + this.activityKey + "/items/";
   
      // Create the itemsDataProvider instance of RESTDataProvider
      this.itemsDataProvider = new RESTDataProvider({
      keyAttributes: this.keyAttributes,
      url: this.restServerURLItems,
      transforms: {
      fetchFirst: {
            request: async (options) => {
            const url = new URL(options.url);
            const { size, offset } = options.fetchParameters;
            url.searchParams.set("limit", String(size));
            url.searchParams.set("offset", String(offset));
            return new Request(url.href);
            },
            response: async ({ body }) => {
            const { items, totalSize, hasMore } = body;
            return { data: items, totalSize, hasMore };
            },
         },
      },
      });   
   
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      // Clear item selection
      this.selectedItem();
      this.itemData();
      } 
      else {
      // If deselection, hide list        
      this.activitySelected(false);
      this.itemSelected(false);  
      }
   }; 
   
   

   このファイルは、final-dashboard-ts.txtのようになります。

タスク5: Webアプリケーションのテスト

1. ブラウザ・ウィンドウで、Webアプリケーションの動的な変更を表示します。

   

   図fetch_records.pngの説明

2. 実行中のWebアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

3. 端末ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。

その他の学習リソース

docs.oracle.com/learnの他のラボを調べるか、Oracle Learning YouTubeチャネルでさらに無料の学習コンテンツにアクセスします。さらに、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerにします。

製品ドキュメントは、Oracleヘルプ・センターを参照してください。

---

タイトルおよび著作権情報

Fetch data from a REST API in an Oracle JET web app

F52182-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.