Recupera i dati da un'API REST in un'applicazione Web Oracle JET

Introduzione

Questa esercitazione descrive come accedere a un servizio REST, integrarlo nell'applicazione Web Oracle JavaScript Extension Toolkit (Oracle JET) e associare i dati a una vista lista nell'interfaccia utente.

Obiettivi

Al termine di questa esercitazione, verrà descritto come creare istanze della classe RESTDataProvider. Questa classe rappresenta i dati disponibili dai servizi REST basati su JSON.

Prerequisiti

Un ambiente di sviluppo impostato per creare applicazioni Oracle JET con runtime JavaScript, Node.js e l'interfaccia della riga di comando della release Oracle JET più recente installata
(Opzione 1) Completamento del percorso di apprendimento precedente in questa serie: Sviluppare un'applicazione Web utilizzando le viste principali e dettagliate in Oracle JavaScript Extension Toolkit
(Opzione 2) Se il percorso di apprendimento precedente di questa serie non è stato completato: jet_web_application_temp.zip scaricato

Task 1: Scaricare l'applicazione Starter

Ignorare questo task se si continua a lavorare in un'applicazione creata nel percorso di apprendimento precedente.

Rinominare jet_web_application_temp.zip come JET_Web_Application.zip. Estrarre il contenuto nella cartella JET_Web_Application.
Nella finestra del terminale verificare di aver installato la versione più recente di Oracle JET. In caso contrario, aggiornare la versione di Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Passare alla cartella JET_Web_Application e ripristinare l'applicazione Oracle JET.
```
$ ojet restore   
```
L'applicazione è pronta per l'uso.

Task 2: accedere al servizio REST

Fare clic sul collegamento apice per visualizzare i dati REST per l'endpoint della risorsa Attività.

I dati contengono un elenco di attività con vari attributi.

{
  "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/"
      },        
      . . .
   ]
}

Acquisire familiarità con i dati e le proprietà restituite dall'endpoint. È necessario comprendere questi dettagli quando si crea un'istanza di RESTDataProvider più avanti in questa esercitazione. Si noti, ad esempio, come l'endpoint restituisce una proprietà items che fa riferimento a una serie di singole attività.

Task 3: creare un provider di dati per recuperare i dati dell'attività in ViewModel

Passare alla directory JET_Web_Application/src/ts/viewModels e aprire il file dashboard.ts in un editor.

All'inizio del file dashboard.ts, importare la classe 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 {
. . .

Nota: se non è stato completato il percorso di apprendimento precedente in questa serie, è necessario dichiarare un alias di tipo per Activity, ovvero il tipo richiesto dall'istanza activityDataProvider nel passo successivo. Specificare questo alias di tipo prima della dichiarazione di classe DashboardViewModel.

Nella classe DashboardViewModel, dichiarare le seguenti variabili e commentare o eliminare, il activityDataProvider preesistente di tipo MutableArrayDataProvider<Activity["id"], Activity>.

. . . 
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>;

Nel metodo constructor() della classe DashboardViewModel commentare o eliminare la variabile activityDataProvider preesistente dalla classe MutableArrayDataProvider e creare l'istanza 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 };   
         },
         },
      },
   });

} 
. . .

Nota: la funzione response sopra la quale estrae i dati e altre proprietà dal corpo della risposta dell'endpoint deve restituire un oggetto con una proprietà data. Poiché l'endpoint utilizzato restituisce una proprietà items, questa proprietà viene assegnata a data nella funzione response.

Task 4: creare un provider di dati per recuperare i dati degli elementi in ViewModel

Utilizzare un'altra istanza RESTDataProvider per recuperare un subset di dati, ad esempio una lista di elementi per una determinata attività. A tale scopo, fornire un nuovo URL contenente l'ID attività selezionato.

Nella classe DashboardViewModel del file dashboard.ts aperto, dichiarare i tipi per le seguenti variabili aggiuntive e commentare o eliminare sia la dichiarazione itemsDataProvider di tipo MutableArrayDataProvider<Item["id"], Item> che la variabile itemsDataProvider stessa nel metodo 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" }
   // );

Nel metodo selectedActivityChanged della classe DashboardViewModel, scrivere il codice per creare la variabile itemsDataProvider come istanza RESTDataProvider quando viene selezionata una nuova attività.

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);  
   }
}; 

L'aspetto del file deve essere simile a final-dashboard-ts.txt.

Task 5: Test dell'applicazione Web

Nella finestra del browser visualizzare le modifiche dinamiche nell'applicazione Web.

Descrizione dell'immagine fetch_records.png
Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.
Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di apprendimento gratuito sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare il sito Oracle Help Center.

Titolo e informazioni sul copyright

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

F52178-01

February 2022