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

Introducción

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

Objetivos

Al finalizar este tutorial, habrá aprendido a crear instancias de la clase RESTDataProvider. Esta clase representa los datos disponibles de los servicios REST basados en JSON.

Requisitos

Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de la versión de Oracle JET instalada
(Opción 1) Finalización de la ruta de aprendizaje anterior en esta serie: Desarrollo de una aplicación web mediante vistas maestras y detalladas en Oracle JavaScript Extension Toolkit
(Opción 2) Si no completó la ruta de aprendizaje anterior en esta serie: jet_web_application_temp.zip descargado

Tarea 1: Descarga de la aplicación de inicio

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

Cambie el nombre de jet_web_application_temp.zip por JET_Web_Application.zip. Extraiga el contenido de la carpeta JET_Web_Application.
En la ventana de terminal, verifique que ha instalado la última versión de Oracle JET. Si no lo ha hecho, actualice su versión de Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Navegue a la carpeta JET_Web_Application y restaure la aplicación Oracle JET.
```
$ ojet restore   
```
La aplicación está lista para utilizarse.

Tarea 2: Acceso al servicio REST

Haga clic en el enlace de 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 en ViewModel

Navegue al directorio JET_Web_Application/src/ts/viewModels y abra el archivo dashboard.ts en un editor.

Al principio del archivo dashboard.ts, importe la clase 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: Si no ha completado la ruta de aprendizaje anterior en esta serie, también debe declarar un alias de tipo para Activity, que es el tipo que necesita la instancia activityDataProvider en el siguiente paso. Especifique este alias de tipo antes de la declaración de clase DashboardViewModel.

En la clase DashboardViewModel, declare las siguientes variables y comente o suprima el activityDataProvider existente del 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>;

En el método constructor() de la clase DashboardViewModel, comente o suprima la variable activityDataProvider preexistente de la clase MutableArrayDataProvider y cree la instancia 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 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.

Tarea 4: Creación de un proveedor de datos para recuperar datos de elementos en ViewModel

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

En la clase DashboardViewModel del archivo dashboard.ts abierto, declare tipos para las siguientes variables adicionales y comente o suprima tanto la declaración itemsDataProvider de tipo MutableArrayDataProvider<Item["id"], Item> como la variable itemsDataProvider en el método 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" }
   // );

En el método selectedActivityChanged de la clase DashboardViewModel, escriba el código para crear la variable itemsDataProvider como una instancia RESTDataProvider cuando se seleccione una nueva actividad.

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

El archivo debe ser similar a final-dashboard-ts.txt.

Tarea 5: Prueba de la aplicación web

En la ventana del explorador, visualice los cambios dinámicos en la aplicación web.

Descripción de la ilustración fetch_records.png
Cierre la ventana o separador del explorador que muestra la aplicación web 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.

Más recursos de aprendizaje

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

Para obtener documentación sobre los productos, visite Oracle Help Center.

Título e Información de Copyright

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

F52179-01

February 2022