En esta octava entrega continuaremos con nuestro demo de TypeScript junto a Jquery. Recordemos que utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. En nuestro post anterior habíamos dejado todo listo para comenzar nuestra aplicación.
Nuestra aplicación tendrá unas funcionalidades bastantes simples. Será un ABM de clientes los cuales consumen servicios rest para almacenar y actualizar la información. No voy a entrar en detalle de la interfaz gráfica. Usaremos AdminLTE que está basada en Bootstrap como interfaz gráfica. Les dejaré el demo completo en github para que puedan consultarlo cuando lo necesiten.
Crearemos un carpeta que se llame customers. Dentro tendremos la página web inicio de nuestro ABM que se llamará customer-index.html.
Crearemos otra carpeta llamada src donde tendremos el archivo app.ts que creamos en el post anterior. Agregaremos: customers.ts, customerTypes.ts y GenericRepository.ts.
En nuestro archivo customer-index.html deberemos agregar una línea que código la cual hará referencia a bundle creado por webpack y que es el que realmente ejecutará nuestra aplicación.
<script src="/dist/app.js"></script>
Empezaremos por nuestro archivo GenericRepository.ts. Este archivo contendrá un interfaz junto a una clase repositorio. Esta clase repositorio la utilizaremos como clase genérica para cualquier acceso a datos que necesitemos. Veamos el código:
import * as $ from 'jquery'
export interface IRepository<T>{
GetAll(): JQueryPromise< Array<T> >;
GetById(id: number): JQueryPromise<T>;
Delete(id: number) : JQueryPromise<void>;
Save(entity: T) : JQueryPromise<T>;
Update(id:number, entity: T) : JQueryPromise<void>;
}
export class Repository<T> implements IRepository<T>{
constructor(public serviceUrl: string){}
getServiceUrl():string {
return this.serviceUrl;
}
GetById(id: number): JQueryPromise<T> {
return <JQueryPromise<T>>$.ajax({
type: "GET",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
GetAll(): JQueryPromise< Array<T> > {
$.support.cors=true;
return <JQueryPromise<Array<T>>>$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl
});
}
Delete(id: number): JQueryPromise<void> {
return <JQueryPromise<void>>$.ajax({
type: "DELETE",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
Save(entity: T): JQueryPromise<T>{
return <JQueryPromise<T>>$.ajax({
type: "POST",
url: this.serviceUrl,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}
Update(id:number, entity: T): JQueryPromise<void> {
return <JQueryPromise<void>>$.ajax({
type: "PUT",
url: this.serviceUrl + "/" + id ,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}
};
La primera línea que podemos ver es muy importante. Esta línea hace que podamos importar y tener disponible JQuery. Automáticamente como instalamos el archivo de tipos específicos para JQuery tendremos intellisense disponible:
La segunda línea también muy importante importara nuestra clase base repository para que podamos extenderlas en nuestras clases de negocio.
En nuestra interfaz Repository declaramos los métodos básicos y necesarios de cualquier Repositorio con una base de tipos de Datos genéricos que podemos ver representado por <T>. Este contrato obligará a las clases que lo implementen tengan estos métodos.
Más adelante, en el mismo archivo, podemos ver la implementación de nuestra interface en una clase también genérica llamada Repository. Esta clase implementa los métodos y la funcionalidad de nuestro repositorio. Veamos el método GetByID.
En este método o como el de los demás podemos ver que el método devolverá un JQueryPromise genérico como también que está usando el método de Jquery $.ajax. El cual es encargado de invocar los servicios Rest.
Dentro de nuestro archivo customer.ts implementaremos nuestra clase RepositoryCustomers la cual extenderá Repository<T>. Aqui esta la clase completa:
import * as $ from 'jquery'
import { Repository } from './GenericRepository'
export class ModelCustomer {
customerId: number;
firstName: string;
middleName: string;
surName: string;
emailAddress: string;
customerTypeId: number;
notes: string;
}
export class ModelPageCustomer {
countPages: number;
countCustomers: number;
actualPage : number;
customers : Array<ModelCustomer>;
}
export class RepositoryCustomers extends Repository<ModelCustomer>{
constructor(){
super("http://localhost:8044/api/customers");
}
GetPage(page: number): JQueryPromise< ModelPageCustomer > {
return <JQueryPromise<ModelPageCustomer>>$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
url: super.getServiceUrl() + "/" + page + "/30"
});
}
}
Podemos ver en nuestra archivo 2 clases más: ModelCustomer y ModelPageCustomer. La primera es un modelo para nuestros datos de clientes y la segunda es un modelo para paginar en nuestra vista de listado.
En el archivo customerTypes.ts tendremos una implementación similar, pero, para los tipos de nuestros clientes. La clase RepositoryCustomersTypes igualmente que nuestra clase anterior extenderá Repository<T> pero para el modelo ModelCustomerType.
Por último, veamos nuestro archivo app.ts. En este archivo tendremos la implementación de las funcionalidades de nuestra interfaz gráfica. Estas funcionalidades consumen nuestros repositorios. Lo más importante son las 3 primeras líneas.
import { RepositoryCustomers, ModelCustomer, ModelPageCustomer } from './customers';
import { RepositoryCustomersTypes, ModelCustomerType } from './customersTypes';
import * as $ from 'jquery';
en estas líneas importamos todo lo necesario para nuestra vista y sus funcionalidades.
Conclusión
En este post hemos visto un acercamiento al demo hecho en javascript. Pueden descargar el proyecto desde la dirección de github https://github.com/withoutdebugger/DemoTypeScript.
