從 Oracle JET Web App 中的 REST API 擷取資料

簡介

本教學課程示範如何存取 REST 服務、將其整合至您的 Oracle JavaScript Extension Toolkit (Oracle JET) Web 應用程式，並將資料連結至使用者介面中的清單檢視。

目標

本教學課程完成時，您將學習如何建立 RESTDataProvider 類別的執行處理。此類別代表可從 JSON 型 REST 服務使用的資料。

必要條件

• 設定使用 JavaScript 程式實際執行、Node.js 及已安裝最新 Oracle JET 版本命令行介面建立 Oracle JET App 的開發環境
• (選項 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   
   

   App 已可供使用。

作業 2：存取 REST 服務

按一下Apex 連結以檢視「活動」資源端點的 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 宣告與 itemsDataProvider 變數本身加上註解或刪除 constructor() 方法。

   
   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 App 中的動態變更。

   

   Fetch_records.png 圖解描述

2. 關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。

3. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

其他學習資源

探索 docs.oracle.com/learn 上的其他實驗室，或是存取更多免費學習內容至 Oracle Learning YouTube 通道。此外，瀏覽 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請瀏覽 Oracle Help Center。

---

標題與版權資訊

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

F52181-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.