Extraire des données à partir d'une API REST dans une application Web Oracle JET

Introduction

Ce tutoriel vous explique comment accéder à un service REST, l'intégrer à votre application Web Oracle JavaScript Extension Toolkit (Oracle JET) et lier des données à une vue de liste dans votre interface utilisateur.

Objectifs

A la fin de ce tutoriel, vous aurez appris à créer des instances de la classe RESTDataProvider. Cette classe représente les données disponibles à partir des services REST basés sur JSON.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET avec l'exécution JavaScript, Node.js et la dernière interface de ligne de commande de la version Oracle JET installée
(Option 1) Fin du parcours de formation précédent dans cette série : Développement d'une application Web à l'aide des vues maître et détail dans Oracle JavaScript Extension Toolkit
(Option 2) Si vous n'avez pas terminé le parcours de formation précédent dans cette série : le fichier jet_web_application_temp.zip téléchargé

Tâche 1 : téléchargement de l'application de démarrage

Ignorez cette tâche si vous continuez à travailler dans une application que vous avez créée dans le parcours de formation précédent.

Renommez jet_web_application_temp.zip en JET_Web_Application.zip. Extrayez le contenu dans le dossier JET_Web_Application.
Dans la fenêtre de terminal, vérifiez que vous avez installé la dernière version d'Oracle JET. Si vous ne l'avez pas fait, mettez à jour votre version d'Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Accédez au dossier JET_Web_Application et restaurez l'application Oracle JET.
```
$ ojet restore   
```
L'application est prête à être utilisée.

Tâche 2 : accès au service REST

Cliquez sur le lien APEX pour visualiser les données REST de l'adresse de ressource Activités.

Les données contiennent une liste d'activités avec divers attributs.

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

Familiarisez-vous avec les données et les propriétés renvoyées par l'adresse. Vous devrez comprendre ces détails lorsque vous créerez une instance de RESTDataProvider ultérieurement dans ce tutoriel. Par exemple, la façon dont l'adresse renvoie une propriété items qui référence une série d'activités individuelles.

Tâche 3 : création d'un fournisseur de données pour extraire les données d'activité dans ViewModel

Accédez au répertoire JET_Web_Application/src/ts/viewModels et ouvrez le fichier dashboard.ts dans un éditeur.
Au début du fichier dashboard.ts, importez 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 {
. . .
```
Remarque : si vous n'avez pas terminé le parcours de formation précédent dans cette série, vous devez également déclarer un alias de type pour Activity, qui est le type requis par l'instance activityDataProvider à l'étape suivante. Vous indiquez cet alias de type avant la déclaration de classe DashboardViewModel.

Dans la classe DashboardViewModel, déclarez les variables suivantes, et commentez ou supprimez le fichier activityDataProvider préexistant de type 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>;

Dans la méthode constructor() de la classe DashboardViewModel, mettez en commentaire ou supprimez la variable activityDataProvider préexistante de la classe MutableArrayDataProvider et créez l'instance 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 };   
         },
         },
      },
   });

} 
. . .

Remarque : la fonction response ci-dessus qui extrait des données et d'autres propriétés à partir du corps de réponse d'adresse doit renvoyer un objet avec une propriété data. Etant donné que l'adresse que nous utilisons renvoie une propriété items, nous affectons cette dernière propriété à data dans la fonction response.

Tâche 4 : créer un fournisseur de données pour extraire les données d'élément dans ViewModel

Vous utilisez une autre instance RESTDataProvider pour extraire un sous-ensemble des données, par exemple une liste d'éléments pour une activité particulière. Pour ce faire, indiquez une nouvelle URL contenant l'ID activité sélectionné.

Dans la classe DashboardViewModel du fichier dashboard.ts ouvert, déclarez les types pour les variables supplémentaires suivantes et commentez ou supprimez à la fois la déclaration itemsDataProvider de type MutableArrayDataProvider<Item["id"], Item> et la variable itemsDataProvider elle-même dans la méthode 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" }
   // );

Dans la méthode selectedActivityChanged de la classe DashboardViewModel, écrivez du code pour créer la variable itemsDataProvider en tant qu'instance RESTDataProvider lorsqu'une nouvelle activité est sélectionnée.

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

Votre fichier doit ressembler à final-dashboard-ts.txt.

Tâche 5 : test de l'application Web

Dans la fenêtre du navigateur, affichez les modifications dynamiques dans votre application Web.

Description de l'image fetch_records.png
Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.
Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez le site education.oracle.com/learning-explorer pour devenir Oracle Learning Explorer.

Pour consulter la documentation du produit, consultez le centre d'aide Oracle.

Informations relatives au titre et au copyright

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

F52176-01

February 2022