Extrair dados de uma API REST em um aplicativo Web Oracle JET

Introdução

Este tutorial mostra como acessar um serviço REST, integrá-lo ao seu aplicativo Web Oracle JavaScript Extension Toolkit (Oracle JET) e vincular dados a uma exibição em lista na interface do usuário.

Objetivos

Ao concluir este tutorial, você aprenderá a criar instâncias da classe RESTDataProvider. Esta classe representa os dados disponíveis dos serviços REST baseados em JSON.

Pré-requisitos

Um ambiente de desenvolvimento configurado para criar aplicativos Oracle JET, com o runtime JavaScript, Node.js e a interface de linha de comando da release mais recente do Oracle JET instalada
(Opção 1) Conclusão da programação de estudo anterior nesta série: Desenvolver um Aplicativo Web Usando Views de Detalhes e Mestre no Oracle JavaScript Extension Toolkit
(Opção 2) Se você não tiver concluído a programação de estudo anterior nesta série: o download do jet_web_application_temp.zip

Tarefa 1: Fazer Download do Aplicativo Inicial

Ignore esta tarefa se estiver continuando a trabalhar em um aplicativo que você criou na programação de estudo anterior.

Renomeie jet_web_application_temp.zip como JET_Web_Application.zip. Extraia o conteúdo para a pasta JET_Web_Application.
Na janela do terminal, verifique se você instalou a versão mais recente do Oracle JET. Se você não tiver feito isso, atualize sua versão do Oracle JET.
```
$ npm list -g @oracle/ojet-cli
$ npm install -g @oracle/ojet-cli
```
Navegue até a pasta JET_Web_Application e restaure o aplicativo Oracle JET.
```
$ ojet restore   
```
O aplicativo está pronto para uso.

Tarefa 2: Acessar o Serviço REST

Clique no link de Operação para exibir os dados REST do ponto final do recurso Atividades.

Os dados contêm uma lista de atividades com vários 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/"
      },        
      . . .
   ]
}

Familiarize-se com os dados e as propriedades que o ponto final retorna. Você precisará entender esses detalhes ao criar uma instância de RESTDataProvider posteriormente neste tutorial. Observe, por exemplo, como o ponto final retorna uma propriedade items que faz referência a uma série de atividades individuais.

Tarefa 3: Criar um Provedor de Dados para Obter Dados da Atividade no ViewModel

Navegue até o diretório JET_Web_Application/src/ts/viewModels e abra o arquivo dashboard.ts em um editor.

No início do arquivo dashboard.ts, importe a 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 {
. . .

Observação: Se você não concluiu a programação de estudo anterior nesta série, também precisará declarar um alias de tipo para Activity, que é o tipo exigido pela instância activityDataProvider na próxima etapa. Você especifica esse alias de tipo antes da declaração de classe DashboardViewModel.

Na classe DashboardViewModel, declare as variáveis a seguir e comente ou exclua, o activityDataProvider preexistente do 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>;

No método constructor() da classe DashboardViewModel, comente ou exclua a variável activityDataProvider preexistente da classe MutableArrayDataProvider e crie a instância 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 };   
         },
         },
      },
   });

} 
. . .

Observação: A função response acima que extrai dados e outras propriedades do corpo de resposta do ponto final deve retornar um objeto com uma propriedade data. Dado que o ponto final com o qual trabalhamos retorna uma propriedade items, designamos essa última propriedade a data na função response.

Tarefa 4: Criar um Provedor de Dados para Obter Dados do Item no ViewModel

Use outra instância RESTDataProvider para extrair um subconjunto dos dados, como uma lista de itens de uma atividade específica. Para isso, forneça um novo URL que contenha o ID da atividade selecionada.

Na classe DashboardViewModel do arquivo dashboard.ts aberto, declare tipos para as variáveis adicionais a seguir e comente ou exclua a declaração itemsDataProvider do tipo MutableArrayDataProvider<Item["id"], Item> e a própria variável itemsDataProvider no 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" }
   // );

No método selectedActivityChanged da classe DashboardViewModel, grave o código para criar a variável itemsDataProvider como uma instância RESTDataProvider quando uma nova atividade for selecionada.

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

Seu arquivo deve ser semelhante a final-dashboard-ts.txt.

Tarefa 5: Testar o Aplicativo Web

Na janela do browser, exiba as alterações dinâmicas em seu aplicativo Web.

Descrição da ilustração fetch_records.png
Feche a janela ou guia do browser que exibe seu aplicativo Web em execução.
Na janela do terminal, pressione Ctrl+C e, se solicitado, digite y para sair do job em batch de ferramentas do Oracle JET.

Mais Recursos de Aprendizagem

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal YouTube do Oracle Learning. Além disso, visite education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.

Título e Informações de Copyright

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

F52175-01

February 2022