Recuperar datos de una API de REST en una aplicación DOM virtual de Oracle JET

Introducción

En este tutorial se muestra cómo acceder a un servicio REST, integrarlo en la aplicación DOM virtual de Oracle JavaScript Extension Toolkit (Oracle JET) y enlazar datos a una vista de lista en la interfaz de usuario.

Objetivos

En este tutorial, aprenderá a crear instancias de la clase RESTDataProvider. Esta clase representa los datos disponibles de los servicios REST basados en JSON.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones DOM virtuales de Oracle JET que incluya una instalación de Node.js
(Opción 1) Finalización del tutorial final en la ruta de aprendizaje anterior de esta serie: Gestionar eventos de selección en una aplicación de DOM virtual de Oracle JET
(Opción 2) Si no ha completado la ruta de aprendizaje anterior de esta serie: jet-virtual-dom-app-temp.zip descargado

Tarea 1: Descargar la aplicación Starter Virtual DOM

Omita esta tarea si continúa trabajando en una aplicación que creó en la ruta de aprendizaje anterior.

Cambie el nombre de jet-virtual-dom-app-temp.zip por JET-Virtual-DOM-app.zip. Extraiga el contenido al directorio JET-Virtual-DOM-app.
Navegue hasta el directorio JET-Virtual-DOM-app y restaure la aplicación DOM virtual de Oracle JET.
```
npx @oracle/ojet-cli restore
```
La aplicación DOM virtual está lista para su uso.

Tarea 2: Acceso al servicio REST

Haga clic en el enlace Apex para ver los datos de REST para el punto final del recurso Actividades.

Los datos contienen una lista de actividades con varios atributos.

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

Familiarícese con los datos y las propiedades que devuelve el punto final. Tendrá que comprender estos detalles al crear una instancia de RESTDataProvider más adelante en este tutorial. Tenga en cuenta, por ejemplo, cómo el punto final devuelve una propiedad items que hace referencia a una serie de actividades individuales.

Tarea 3: Creación de un proveedor de datos para recuperar datos de actividad

Navegue al directorio JET-Virtual-DOM-app/src/components/ y abra el archivo ParentContainer1.tsx en un editor.

Al comienzo del archivo ParentContainer1.tsx, importe el módulo RESTDataProvider y suprima o comente las sentencias de importación para el módulo MutableArrayDataProvider y el archivo 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";
. . .

Cree una variable keyattributes y una variable restServerURLActivities que haga referencia al atributo de clave de actividad y al punto final de REST que transferirá a la instancia RESTDataProvider que creará en el siguiente paso.
```
let keyAttributes: string = "id";
// REST endpoint that returns Activity data
const restServerURLActivities: string =
      "https://apex.oracle.com/pls/apex/oraclejet/lp/activities/";
```

Cree una nueva variable activityDataProvider que haga referencia al módulo RESTDataProvider y suprima o comente la variable activityDataProvider preexistente que hace referencia al módulo 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 función response anterior que extrae datos y otras propiedades del cuerpo de respuesta de punto final debe devolver un objeto con una propiedad data. Dado que el punto final con el que trabajamos devuelve una propiedad items, asignamos esta última propiedad a data en la función response.

Guarde el archivo ParentContainer1.tsx.

El archivo ParentContainer1.tsx debe tener un aspecto similar a ParentContainer1.tsx.txt.
Navegue al directorio JET-Virtual-DOM-app/src/components/Activity y abra el archivo ActivityContainer.tsx en un editor.

Al comienzo del archivo ActivityContainer.tsx, importe el módulo RESTDataProvider y comente o suprima la sentencia de importación para el módulo MutableArrayDataProvider.

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

En el alias de tipo Props, modifique la propiedad opcional data para hacer referencia al tipo RESTDataProvider en lugar del tipo preexistente MutableArrayDataProvider<Activity["id"], Activity>.
```
type Props = {
   data?: RESTDataProvider<Activity["id"], Activity>;
   // data?: MutableArrayDataProvider<Activity["id"], Activity>;
. . .
};
```
Guarde el archivo ActivityContainer.tsx.

El archivo ActivityContainer.tsx debe tener un aspecto similar a ActivityContainer.tsx.txt.

Tarea 4: Creación de un proveedor de datos para recuperar datos de artículos

Utilice otra instancia RESTDataProvider para recuperar un subjuego de los datos, la lista de elementos de una actividad concreta. Para ello, proporcione una nueva URL que contenga el ID de actividad seleccionado.

Navegue al directorio JET-Virtual-DOM-app/src/components/ y abra el archivo ParentContainer2.tsx en un editor.

Al comienzo del archivo ParentContainer2.tsx, importe el módulo RESTDataProvider y suprima o comente las sentencias de importación para el módulo MutableArrayDataProvider y el archivo 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";
. . .

Después del alias de tipo Item, cree una variable baseServiceUrl para hacer referencia al punto final REST que transferirá a la instancia de RESTDataProvider que creará en el siguiente paso.
```
type Item = {
   . . .
 };

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

Cree una instancia inicial de RESTDataProvider que transferirá en pasos posteriores a los enlaces Preact useState y useEffect.

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: [] };
      },
   },
 },
});

Comente o suprima el código existente que ha creado una variable para leer datos del archivo store_data.json y que ha creado una instancia inicial de 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",
// })

En la función ParentContainer2, sustituya el enlace useEffect existente que gestiona la instancia de MutableArrayDataProvider por una nueva definición que crea RESTDataProvider para los elementos de actividad que corresponden al ID de actividad seleccionado.

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

Guarde el archivo ParentContainer2.tsx.

El archivo ParentContainer2.tsx debe tener un aspecto similar a ParentContainer2.tsx.txt.
Navegue al directorio JET-Virtual-DOM-app/src/components/ActivityItem y abra el archivo ActivityItemContainer.tsx en un editor.

Al comienzo del archivo ActivityItemContainer.tsx, importe el módulo RESTDataProvider y comente o suprima la sentencia de importación para el módulo MutableArrayDataProvider.

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

En el alias de tipo Props, modifique la propiedad data para que haga referencia al tipo RESTDataProvider en lugar del tipo preexistente MutableArrayDataProvider<Activity["id"], Activity>.

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

Guarde el archivo ActivityItemContainer.tsx.

El archivo ActivityItemContainer.tsx debe tener un aspecto similar a ActivityItemContainer.tsx.txt.

Tarea 5: Prueba de la aplicación DOM virtual

En la ventana de terminal, cambie al directorio JET-Virtual-DOM-app y ejecute la aplicación DOM virtual.
```
npx @oracle/ojet-cli serve
```
En la ventana del explorador, visualice los cambios dinámicos en la aplicación DOM virtual.

Descripción de la ilustración fetch_records.png
Cierre la ventana o el separador del explorador que muestra la aplicación DOM virtual en ejecución.
En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.

Siguiente paso

Para continuar con el siguiente tutorial de esta ruta de aprendizaje, haga clic aquí.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.

Título e Información de Copyright

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

F70627-01

December 2022