Uso de servicios externos

Introducción

Este ejercicio mostrará como se llama y se integra un servicio externo dentro de Ontimize Web. Utilizaremos el servicio externo de SWAPI por su simpleza, no porque esté relacionado de alguna manera con una aplicación bancaria.

Creando un nuevo servicio

Los servicios los crearemos dentro de la carpeta de shared, ya que un servicio es susceptible de que sea invocado en muchas partes de una misma aplicación, por lo que, por defecto, crearemos los servicios en esta ruta con el siguiente comando

npx ng generate service --skip-tests star-wars

Para crear un nuevo servicio, es necesario crear una clase nueva que extienda de OntimizeEEService. Para toda la información relativa a los servicios de Ontimize, se puede consultar este enlace

En este caso, como es un servicio externo al que no podremos introducir datos, únicamente extenderemos el servicio de consultas. También crearemos un adaptador para poder modificar la respuesta de la consulta que se va a realizar para que encaje con la respuesta que espera obtener Ontimize Web. Configuraremos este adaptador en nuestro nuevo servicio.

star-wars.service.ts

import { Injectable, Injector } from '@angular/core';
import { OntimizeEEService } from 'ontimize-web-ngx';
import { Observable } from 'rxjs';
import { StarsWarsResponseAdapter } from './star-wars-response-adapter';

@Injectable()
export class StarsWarsService extends OntimizeEEService {

  constructor(protected injector: Injector) {
    super(injector);
  }

  public query(kv?: Object, av?: Array<string>, entity?: string, sqltypes?: Object): Observable<any> {
    const identifier = kv.valueOf()[Object.keys(kv)[0]];
    let url = '';
    if (Object.keys(kv).length === 0) {
      url = 'https://swapi.dev/api/' + entity + '/?format=json';
    } else {
      url = 'https://swapi.dev/api/' + entity + '/' + identifier + '/?format=json';
    }

    return this.doRequest({
      method: 'GET',
      url: url,
      options: {}
    });
  }

  public configureAdapter() {
    this.adapter = this.injector.get(StarsWarsResponseAdapter);
  }
}

star-wars-response-adapter.ts

import { HttpResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BaseServiceResponse, OntimizeServiceResponse, ServiceResponseAdapter } from "ontimize-web-ngx";

@Injectable({ providedIn: 'root' })
export class StarsWarsResponseAdapter implements ServiceResponseAdapter<BaseServiceResponse> {

    adapt(resp: HttpResponse<any>): BaseServiceResponse {
        let code = 1;
        let data = [];
        const message = '';

        // Adapt the data received from the service
        if (resp.body) {
            code = 0;
            if (resp.body.results) {
                data = resp.body.results;
                data.forEach(element => {
                    const urlArray = element.valueOf()['url'].split('/');
                    const uuid = urlArray[urlArray.length - 2];
                    element['uuid'] = uuid;
                }

                );
            } else {
                data = [resp.body];
            }
        }

        // Create Ontimize service response with the data adapted
        return new OntimizeServiceResponse(code, data, message);
    }
}

Creación de modulo, listado y detalle

Después de crear los servicios, debemos crear el módulo y los componentes de listado y detalle.

Nos ubicamos en la carpeta main y ejecutamos los siguientes comandos, para crear el módulo y los componentes

npx ng g module --routing service-ex
cd service-ex
npx ng g component --skip-tests service-ex-home
npx ng g component --skip-tests service-ex-details

Debemos importar el servicio que hemos creado dentro del módulo service-ex, que es dónde se utilizará, y anotarlo dentro del array de providers

service-ex.module.ts

import { Injector, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StarWarsService } from '../../shared/star-wars.service';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { ServiceExRoutingModule } from './service-ex-routing.module';
import { ServiceExHomeComponent } from './service-ex-home/service-ex-home.component';
import { ServiceExDetailsComponent } from './service-ex-details/service-ex-details.component';



@NgModule({
  declarations: [
    ServiceExHomeComponent,
    ServiceExDetailsComponent
  ],
  imports: [
    CommonModule,
    OntimizeWebModule,
    ServiceExRoutingModule
  ],
  providers: [{
    provide: 'starWars',
    useValue: StarWarsService
  }]
})
export class ServiceExModule { }

Ahora usaremos este servicio cómo si fuera un servicio más de Ontimize. El servicio será starsWars, la entidad será films y la clave primaria de la tabla será uuid

service-ex-home.component.html

<o-form-layout-manager title="{{'FILMS' | oTranslate }}" separator=" " mode="tab" label-columns="title">
    <o-table attr="films" service-type="starWars" entity="films" keys="uuid" columns="title;episode_id;director;uuid"
        visible-columns="title;director;episode_id" query-rows="20">
    </o-table>
</o-form-layout-manager>

service-ex-details.component.html

<o-form service-type="starWars" entity="films" keys="uuid" show-header="no" editable-detail="no">
    <div fxLayout="row" fxLayoutGap="8px">
        <div fxFlex="70" fxLayout="column" fxLayoutGap="8px">
            <o-text-input attr="title"></o-text-input>
            <o-text-input attr="episode_id" sql-type="INTEGER"></o-text-input>
            <o-text-input attr="director"></o-text-input>
            <o-text-input attr="producer"></o-text-input>
            <o-text-input attr="release_date"></o-text-input>
        </div>
        <o-textarea-input fxFlex="30" attr="opening_crawl" rows="25"></o-textarea-input>
    </div>
</o-form>

service-ex-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ServiceExHomeComponent } from './service-ex-home/service-ex-home.component';
import { ServiceExDetailsComponent } from './service-ex-details/service-ex-details.component';

const routes: Routes = [
  {
    path: '',
    component: ServiceExHomeComponent
  },
  {
    path: ":uuid",
    component: ServiceExDetailsComponent
  }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ServiceExRoutingModule { }

main-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from 'ontimize-web-ngx';

import { MainComponent } from './main.component';

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuardService],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
      { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
      { path: 'employees', loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule) },
      { path: 'branches', loadChildren: () => import('./branches/branches.module').then(m => m.BranchesModule) },
      { path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) },
      { path: 'serviceEx', loadChildren: () => import('./service-ex/service-ex.module').then(m => m.ServiceExModule) }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MainRoutingModule { }

app.menu.config.ts

import { MenuRootItem } from 'ontimize-web-ngx';

export const MENU_CONFIG: MenuRootItem[] = [
  { id: 'home', name: 'HOME', icon: 'home', route: '/main/home' },
  { id: 'customers', name: 'CUSTOMERS', icon: 'people', route: '/main/customers' },
  { id: 'employees', name: 'EMPLOYEES', icon: 'business_center', route: '/main/employees' },
  { id: 'branches', name: 'BRANCHES', icon: 'account_balance', route: '/main/branches' },
  { id: 'accounts', name: 'ACCOUNTS', icon: 'credit_card', route: '/main/accounts' },
  { id: 'serviceEx', name: 'SERVICEEX', icon: 'dns', route: '/main/serviceEx' },
  { id: 'logout', name: 'LOGOUT', route: '/login', icon: 'power_settings_new', confirm: 'yes' }
];

en.json

{
  ...
  "title": "Title",
  "director": "Director",
  "episode_id": "Episode",
  "producer": "Producer",
  "release_date": "Release Date",
  "opening_crawl": "Opening",
  "FILMS": "Films",
  "SERVICEEX": "External Service"
}

es.json

{
  ...
  "title": "Título",
  "director": "Director",
  "episode_id": "Episodio",
  "producer": "Productor",
  "release_date": "Fecha Lanzamiento",
  "opening_crawl": "Texto inicio",
  "FILMS": "Películas",
  "SERVICEEX": "Servicio Externo"
}

arrow_back Tutorial anterior Próximo tutorial arrow_forward