Consumir API Rest de SUNAT (Consulta RUC) con angular

1. Crear proyecto en Angular

ng new consultaPeru

2. Crear componente

ng g c components/buscarRuc

3. Crear ruta en angular: Nos guiaremos de la siguiente documentación

https://docs.angular.lat/tutorial/toh-pt5

4. Agregamos el RouterOutlet en el archivo app.component.html

    <router-outlet></router-outlet>

5. Modificar el imports del archivo "app-routing.module.ts" para evitar errores.

imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      scrollPositionRestoration: 'enabled',
    }),
  ],

6. Crear Servicio

ng g s services/sunat

7. Importamos las clases HttpClient, HttpHeaders, Observable en el servicio que acabamos de crear, que nos servirán para el consumo de APIS.

import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';

8. Declaramos en el constructor del servicio una variable http de tipo "HttpClient"

constructor(

    private http: HttpClient
) { }

9. Creamos un método en el servicio donde consumimos la API de Consulta RUC

buscarRuc(_ruc: string): Observable<any>{
    let data = {
      ruc: _ruc
    };

    let url = "https://www.softwarelion.xyz/api/sunat/consulta-ruc";
    let token = "Bearer [Aquí especifica tu token]";
    let _headers = new HttpHeaders().set("Authorization", token);

    return this.http.post(url, data, {headers: _headers});
}

10. Escribimos este código en el componente "buscar-ruc"

***** Archivo HTML ******

<div>
    <input type="text" id="ruc" name="ruc" #ruc>
    <button (click)="buscarRuc(ruc.value)">Buscar</button>
</div>

<div>
    <p class="bold">Razon Social </p> 
    <span> :{{empresa.razonSocial}}</span>
</div>
<div>
    <p class="bold">Dirección</p>
    <p> : {{empresa.direccion}}</p>
</div>
<div>
    <p class="bold">Nombre Comercial</p>
    <p> : {{empresa.nombreComercial}}</p>
</div>
<div>
    <p class="bold">Estado</p>
    <p> : {{empresa.estado}}</p>
</div>
<div>
    <p class="bold">Condicion</p>
    <p> : {{empresa.condicion}}</p>
</div>
<div>
    <p class="bold">Estado</p>
    <p> : {{empresa.estado}}</p>
</div>
<div>
    <p class="bold">Fecha Inscripción</p>
    <p> : {{empresa.fechaInscripcion}}</p>
</div>
<div>
    <p class="bold">Actividades secundarias</p>
    <p *ngFor="let item of empresa.otrasActividades"> • {{item}}</p>
</div>

***** Archivo CSS ******

.bold{
    font-weight: bold;
}

11. Agregamos en los imports HttpClientModule del archivo app.module para poder consumir la API

import { HttpClientModule } from '@angular/common/http';

12. Así debe quedar el archivo .ts del componente

// Importamos el servicio
import { SunatService } from 'src/app/services/sunat.service';

// Declaramos variable pública
public empresa: any;

// Declaramos una variable del servicio importado
  constructor(
    private sSunat: SunatService
  ) { }

// Creamos metodo para ejecutar api
  buscarRuc(ruc: string){
    this.sSunat.buscarRuc(ruc).subscribe(r => {
      if(!r.success){
        alert(r.message);
        this.empresa.razonSocial = "";
      }
      else{
        this.empresa = r.result;
      }
    });
  }

No hay comentarios