Catálogo de Productos (HTML + Angular)

En esta guía veremos un ejemplo del uso del SDK de Bind ERP para Angular con Typescript para realizar una consulta básica de todos los productos, agregar nuevos productos, ver el detalle y eliminar productos.

El código de ejemplo se encuentra en Github, da clic aquí para descargarlo.

La aplicación es una Single Page Application, para poder correr la aplicación es Necesario tener Node.JS y Angular CLI, en la consola ejecutamos el comando npm install y una vez que descargue todas las dependencias corremos el programa con el comando ng serve -o, lo que se verá al iniciar la aplicación es lo siguiente:

Para poder integrar el SKD con una aplicación nueva solamente tenemos que seguir los siguientes pasos:

Importar el SKD al proyecto

Primero hay que agregar el SDK de TypeScript Angular dentro de una carpeta del proyecto Angular, en este ejemplo se agregó en una carpeta llamada bindApi en src/app.

Para importar el Módulo de la API de Bind ERP, solo hay que agregar la referencia en el Módulo de la aplicación.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ApiModule } from './bindApi';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
	AppComponent
],
imports: [
  BrowserModule,
  ApiModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Una vez importado el Módulo se pueden crear instancias de los servicios de Bind ERP en el constructor del componente. Dentro del constructor, tambien hay que añadir la cabecera Authorization con el ApiKey de Bind ERP.

constructor(
    private productsService: ProductsService) {    
    productsService.defaultHeaders = new HttpHeaders({ 'Authorization': 'Bearer ' + this.apiKey });    
  }

Uso de la clase ProductsService

Consultar Lista de Productos

Utilizando el método productsGet de ProductsService nos regresará un objeto de tipo ProductPage. Con este obtenemos todos los productos de la empresa. Por defecto, regresa hasta un máximo de 50 registros por llamada. Para conseguir los demás registros se puede utilizar la propiedad nextLink, que regresa la llamada, o el parámetro top de la función.

this.productsService.productsGet(filter,orderby,top,skip).subscribe(data => {
      //Success
    }, error => {
      //Handle Error
		});

Al mandar llamar la función productsGet consultará todos los productos que tenga el usuario. En el ejemplo, se verá algo similar a la siguiente imagen.

El método productsGet tiene una serie de parámetros que nos ayudan para el paginado y el filtro de la misma. Los parámetros que se pueden utilizar son los siguientes (Nota: Todos los parámetros son opcionales):

filter

Realiza un filtro en la consulta. Para más información, consulta https://developers.bind.com.mx/referencia-api/filtrado

orderby

Campo por el cual se quiere ordenar el resultado.

top

Cantidad máxima de registros que se quieran recibir de la consulta (máximo 50 registros). Si se utiliza este parámetro la respuesta regresará la propiedad nextLink como nula.

skip

Cantidad de registros que se desean saltar, útil para realizar paginado de la llamada. Para más información, consulta https://developers.bind.com.mx/referencia-api/paginado

En el ejemplo, se utilizó el filtro para que consultara los productos por código. Si escribimos cualquier código, nos regresará el resultado de la siguiente manera:


Agregar un nuevo Producto

En la aplicación, al dar clic en el botón Agregar, abrirá el siguiente modal:

Para poder agregar un producto nuevo, se debe crear un objeto de tipo NewProduct. Una vez que sus datos estén correctamente llenados se mandará llamar la función productsAddProduct de ProductsService. Esta función retorna el ID del Producto agregado.

this.productsService.productsAddProduct(this.newProduct).subscribe(data => {
      //Success
    }, error => {
      //Handle Error
    });

En el ejemplo, usamos un objeto de tipo NewProduct para los modelos de los campos del modal. Una vez que estén todos los campos capturados, al dar clic en Agregar mandará llamar la función de agregar producto y retornará un mensaje de éxito.

Consultar detalle de un Producto

Para obtener toda la información disponible de un producto en específico, se manda llamar la función productsGetDetail, la cual recibe como parámetro el ID del producto a consultar. Retorna un objeto de tipo ProductDetails.

this.productsService.productsGetDetail(this.detailID).subscribe(data => {
    	//Success
    }, error => {
      //Handle Error
    });

Una vez realizada una consulta en el ejemplo, podemos dar clic en el botón Consultar Detalle a la derecha de cualquier producto. Esto abrirá un modal consultando los detalles del producto. Para fines prácticos, mostramos solamente los mismos campos de captura al Agregar, pero si se verifica el resultado de la llamada, veremos todos los datos que retorna la llamada.

Eliminar un Producto

Para eliminar un producto se debe utilizar la función productsDeleteByID, la cual recibe como parámetro el ID del producto que se va a eliminar (Nota: No retorna ningún valor).

this.productsService.productsDeleteByID(this.deleteId).subscribe(data => {
      //Success
    }, error => {
      //Handle Error
    });

Para eliminar un Producto daremos clic en el botón de eliminar a la derecha del Producto. Esto nos abrirá un modal de confirmación, al aceptarlo nos mostrará un mensaje de éxito y volverá a consultar los productos.

Manejo de Errores

Cuando una llamada del SDK falle, la llamada regresará las siguientes propiedades:

Message

Mensaje describiendo el error de la llamada.

Code

Código del error. Si esta propiedad viene vacía significa que el error es externo a Bind ERP.

Para mas información puede consultar la documentación de Productos en la documentación de la API de Bind ERP.

Recuerda que puedes descargar este proyecto donde se muestra el ejemplo funcionando con la API de Angular TS (TypeScript) desde GitHub. Da clic aquí para descargarlo.
¿Tienes dudas o comentarios? Comunícate con nosotros:
mail_equipo_desarrollo