Recupera i dati da un'interfaccia API REST in un'applicazione DOM virtuale Oracle JET

Introduzione

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

Obiettivi

In 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 DOM virtuali Oracle JET che include un'installazione di Node.js
(Opzione 1) Completamento dell'esercitazione finale nel percorso di apprendimento precedente in questa serie: Gestione degli eventi di selezione in un'applicazione DOM virtuale Oracle JET
(Opzione 2) Se il percorso di apprendimento precedente non è stato completato in questa serie: è stato scaricato jet-virtual-dom-app-temp.zip

Task 1: Scarica l'app Starter Virtual DOM

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

Rinominare jet-virtual-dom-app-temp.zip come JET-Virtual-DOM-app.zip. Estrarre il contenuto nella directory JET-Virtual-DOM-app.
Passare alla directory JET-Virtual-DOM-app e ripristinare l'applicazione DOM virtuale di Oracle JET.
```
npx @oracle/ojet-cli restore
```
L'applicazione DOM virtuale è pronta per l'uso.

Task 2: Accesso 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. Dovrai comprendere questi dettagli quando crei un'istanza di RESTDataProvider in un secondo momento 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à

Passare alla directory JET-Virtual-DOM-app/src/components/ e aprire il file ParentContainer1.tsx in un editor.

All'inizio del file ParentContainer1.tsx, importare il modulo RESTDataProvider ed eliminare o commentare le istruzioni di importazione per il modulo MutableArrayDataProvider e il file store_data.json.

import { h } from "preact";
. . .
// import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
// import * as storeData from "text!./store_data.json";
import { RESTDataProvider } from "ojs/ojrestdataprovider";
. . .

Creare una variabile keyattributes e una variabile restServerURLActivities che faccia riferimento all'attributo della chiave attività e all'endpoint REST che passerai all'istanza RESTDataProvider che verrà creata nel passo successivo.
```
let keyAttributes: string = "id";
// REST endpoint that returns Activity data
const restServerURLActivities: string =
      "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";
```

Creare una nuova variabile activityDataProvider che fa riferimento al modulo RESTDataProvider ed eliminare o commentare la variabile activityDataProvider preesistente che fa riferimento al modulo MutableArrayDataProvider.

const activityDataProvider = new RESTDataProvider<Activity["id"], Activity>({
   keyAttributes: keyAttributes,
   url: 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 };
         },
      },
   },
});

// const activityDataProvider = new MutableArrayDataProvider<Activity["id"], Activity>({
. . .   

Nota: la funzione response sopra riportata, che 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 di risposta.

Salvare il file ParentContainer1.tsx.

Il file ParentContainer1.tsx dovrebbe avere un aspetto simile a ParentContainer1.tsx.txt.
Passare alla directory JET-Virtual-DOM-app/src/components/Activity e aprire il file ActivityContainer.tsx in un editor.

All'inizio del file ActivityContainer.tsx, importare il modulo RESTDataProvider e commentare o eliminare l'istruzione di importazione per il modulo MutableArrayDataProvider.

import { h, ComponentProps } from "preact";
. . .
// import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import { RESTDataProvider } from "ojs/ojrestdataprovider";
. . .

Nell'alias di tipo Props modificare la proprietà facoltativa data per fare riferimento al tipo RESTDataProvider anziché al tipo preesistente MutableArrayDataProvider<Activity["id"], Activity>.
```
type Props = {
   data?: RESTDataProvider<Activity["id"], Activity>;
   // data?: MutableArrayDataProvider<Activity["id"], Activity>;
. . .
};
```
Salvare il file ActivityContainer.tsx.

Il file ActivityContainer.tsx dovrebbe avere un aspetto simile a ActivityContainer.tsx.txt.

Task 4: Creare un provider di dati per recuperare i dati dell'elemento

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

Passare alla directory JET-Virtual-DOM-app/src/components/ e aprire il file ParentContainer2.tsx in un editor.

All'inizio del file ParentContainer2.tsx, importare il modulo RESTDataProvider ed eliminare o commentare le istruzioni di importazione per il modulo MutableArrayDataProvider e il file store_data.json.

import { h } from "preact";
. . .
import { RESTDataProvider } from "ojs/ojrestdataprovider";
// import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
// import * as storeData from "text!./store_data.json";
. . .

Dopo l'alias di tipo Item, creare una variabile baseServiceUrl per fare riferimento all'endpoint REST che passerà all'istanza di RESTDataProvider che verrà creata nel passo successivo.
```
type Item = {
   . . .
 };

const baseServiceUrl =
  "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";
```

Creare un'istanza iniziale del file RESTDataProvider che verrà passata nei passi successivi agli hook useState e useEffect di tipo Preact.

const baseServiceUrl =
  "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";

let INIT_DATAPROVIDER = new RESTDataProvider<ActivityItem["id"], ActivityItem>({
keyAttributes: "id",
url: baseServiceUrl,
transforms: {
   fetchFirst: {
      request: null,
      response: (): any => {
      return { data: [] };
      },
   },
 },
});

Commentare o eliminare il codice preesistente che ha creato una variabile per leggere i dati dal file store_data.json e che ha creato un'istanza iniziale di MutableArrayDataProvider.

// const activityData = JSON.parse(storeData);
// let activityItemsArray = activityData[0].items;

// // Create data provider instance for the array of activity items for the selected activity
// const INIT_DATAPROVIDER = new MutableArrayDataProvider<ActivityItem["id"], ActivityItem>(activityItemsArray, {
//   keyAttributes: "id",
// })

Nella funzione ParentContainer2 sostituire l'hook useEffect esistente che gestisce l'istanza di MutableArrayDataProvider con una nuova definizione che crea un RESTDataProvider per gli elementi attività che corrispondono all'ID attività selezionato.

const ParentContainer2 = (props: Props) => {
. . .
useEffect(() => {
   setactivityItemDP(
      new RESTDataProvider<ActivityItem["id"], ActivityItem>({
      keyAttributes: "id",
      url: baseServiceUrl + "/" + props.activity.id + "/items/",
      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 };
            },
         },
      },
      })
   );
 }, [props.activity]);

return (
. . .

Salvare il file ParentContainer2.tsx.

Il file ParentContainer2.tsx dovrebbe avere un aspetto simile a ParentContainer2.tsx.txt.
Passare alla directory JET-Virtual-DOM-app/src/components/ActivityItem e aprire il file ActivityItemContainer.tsx in un editor.

All'inizio del file ActivityItemContainer.tsx, importare il modulo RESTDataProvider e commentare o eliminare l'istruzione di importazione per il modulo MutableArrayDataProvider.

import { h, ComponentProps } from "preact";
. . .
// import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import { RESTDataProvider } from "ojs/ojrestdataprovider";
. . .

Nell'alias di tipo Props modificare la proprietà data per fare riferimento al tipo RESTDataProvider anziché al tipo preesistente MutableArrayDataProvider<Activity["id"], Activity>.

type Props = {
   // data?: MutableArrayDataProvider<ActivityItem["id"], ActivityItem>;
   data?: RESTDataProvider<ActivityItem["id"], ActivityItem>;
   selectedActivity?: Item;
   onItemChanged?: (item: any) => void;
}; 

Salvare il file ActivityItemContainer.tsx.

Il file ActivityItemContainer.tsx dovrebbe avere un aspetto simile a ActivityItemContainer.tsx.txt.

Task 5: Test dell'applicazione DOM virtuale

Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app ed eseguire l'applicazione DOM virtuale.
```
npx @oracle/ojet-cli serve
```
Nella finestra del browser, visualizzare le modifiche dinamiche nell'applicazione DOM virtuale.

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

Passo successivo

Per passare all'esercitazione successiva in questo percorso di apprendimento, fare clic qui.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o visita altri contenuti di formazione gratuiti sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare un Oracle Learning Explorer.

Per la documentazione sul prodotto, visitare Oracle Help Center.

Titolo e informazioni sul copyright

Fetch data from a REST API in an Oracle JET virtual DOM app

F70627-01

December 2022