Aplicación Practica Patrones Diseño Front End

UNIVERSIDAD MAYOR DE SAN SIMON
FACULTAD DE CIENCIAS Y TECNOLOGIA

DIRECCIÓN DE POSGRADO
“APLICACIÓN PRÁCTICA DE PATRONES DE

DISEÑO EN FRONT END”
TRABAJO FINAL PRESENTADO PARA OBTENER EL

CETIFICADO DE DIPLOMADO EXPERTO EN DESARROLLO DE
APLICACIONES EMPRESARIALES VERSION II
POSTULANTE: MAURICIO ANTONIO VARGAS LUIZAGA
TUTOR : MSc. VALENTIN LAIME ZAPATA
Cochabamba – Bolivia
2019
Agradecimientos
Agradezco a Dios por cuidarme y guiar mi camino.
A mi mamá María Isabel Luizaga Sahonero, a
Juan Ferrufino Vidal y a mis hermanos, por el
amor y cuidado siempre brindado.
A Tania Andrea Valero Malele por su apoyo
incondicional.
A Digital Harbor, por darme la oportunidad de
crecer más profesionalmente.
INDICE DE CONTENIDO
RESUMEN ................................................................................................................................... 1
INTRODUCCIÓN ......................................................................................................................... 3
1 GENERALIDADES ................................................................................................................ 6
1.1 ANTECEDENTES GENERALES ................................................................................................. 6
1.2 ANTECEDENTES ESPECÍFICOS ................................................................................................ 7
2 METODOLOGÍA ................................................................................................................... 8
3 PATRONES DE DISEÑO ........................................................................................................ 9
3.1 UTILIDAD DE LOS PATRONES DE DISEÑO ................................................................................... 9
3.2 CLASIFICACIÓN DE LOS PATRONES ........................................................................................ 10
4 APLICACIÓN DE PATRONES DE CREACIÓN....................................................................... 12
4.1 MÉTODO DE FABRICACIÓN (FACTORY METHOD) ...................................................................... 12
4.1.1 EJEMPLO DE APLICACIÓN ................................................................................................... 13
4.2 CONSTRUCTOR (BUILDER) .................................................................................................. 16
5 APLICACIÓN DE PATRONES ESTRUCTURALES ................................................................. 23
5.1 PUENTE (BRIDGE) ............................................................................................................ 23
5.2 FACHADA (FACADE) ......................................................................................................... 29
6 APLICACIÓN DE PATRONES DE COMPORTAMIENTO........................................................ 36
6.1 ORDEN (COMMAND) ......................................................................................................... 36

6.2 MÉTODO PLANTILLA (TEMPLATE METHOD) ............................................................................ 43
7 CONCLUSIONES................................................................................................................. 47
8 BIBLIOGRAFÍA .................................................................................................................. 48
TABLA DE CUADROS, GRAFICOS Y FIGURAS
TABLA 1: PATRONES DE DISEÑO ......................................................................................................... 11
FIGURA 1: ESTRUCTURA DEL PATRÓN FACTORY METHOD ........................................................................

13
FIGURA 2: DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN FACTORY METHOD ...................................... 13
FIGURA 3: ESTRUCTURA DEL PATRÓN BUILDER ..................................................................................... 16
FIGURA 4: DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN BUILDER ................................................... 17
FIGURA 5: ESTRUCTURA DEL PATRÓN BRIDGE ....................................................................................... 24
FIGURA 6: DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN BRIDGE .................................................... 25
FIGURA 7: ESTRUCTURA DEL PATRÓN FACADE ...................................................................................... 29
FIGURA 8: DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN FACADE.................................................... 30
FIGURA 9: ESTRUCTURA DEL PATRÓN COMMAND ................................................................................... 37
FIGURA 10: DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN COMMAND .............................................. 38
FIGURA 11: ESTRUCTURA DEL PATRÓN TEMPLATE METHOD ..................................................................... 43
FIGURA 12: : DIAGRAMA DEL EJEMPLO DE APLICACIÓN DEL PATRÓN TEMPLATE METHOD ................................. 44
CÓDIGO FUENTE 1: INTERFACE ARCHIVO ............................................................................................. 14

CÓDIGO FUENTE 2: CLASE ARCHIVOAUDIO .......................................................................................... 14
CÓDIGO FUENTE 3: CLASE ARCHIVOVIDEO........................................................................................... 14
CÓDIGO FUENTE 4: CLASE CREADORDEARCHIVOS ................................................................................. 15
CÓDIGO FUENTE 5: SERVICIO DIRECTOR .............................................................................................. 18
CÓDIGO FUENTE 6: CLASE CONSTRUCTOR DE AUTOS .............................................................................. 18
CÓDIGO FUENTE 7: CLASE CONSTRUCTOR AUTOS BÁSICOS ...................................................................... 19
CÓDIGO FUENTE 8: CLASE CONSTRUCTOR AUTOS EQUIPADOS ................................................................... 20
CÓDIGO FUENTE 9: CLASE AUTO ........................................................................................................ 21
CÓDIGO FUENTE 10: CLASE ENCRIPTADOR ........................................................................................... 26
CÓDIGO FUENTE 11: CLASE ENCRIPTADORIMPL ..................................................................................... 26
CÓDIGO FUENTE 12: CLASE ENCRIPTADORAES ..................................................................................... 27
CÓDIGO FUENTE 13: CLASE ENCRIPTADORDES ..................................................................................... 28
CÓDIGO FUENTE 14: CLASE ENCRIPTADORDECONTRASENIAS ................................................................... 28
CÓDIGO FUENTE 15: SERVICIO AUTENTICADOR ..................................................................................... 31
CÓDIGO FUENTE 16: SERVICIO CAJERO ................................................................................................ 32
CÓDIGO FUENTE 17: CLASE CUENTA ................................................................................................... 33
CÓDIGO FUENTE 18: CLASE FACHADACAJERO ....................................................................................... 34
CÓDIGO FUENTE 19: INTERFACE COMMAND .......................................................................................... 38
CÓDIGO FUENTE 20: CLASE LUCES ..................................................................................................... 40
CÓDIGO FUENTE 21: CLASE ENCENDERLUCES ....................................................................................... 40
CÓDIGO FUENTE 22: CLASE APAGARLUCES .......................................................................................... 41
CÓDIGO FUENTE 23: CLASE INVOCADOR .............................................................................................. 41
CÓDIGO FUENTE 24: CLASE CLIENTE .................................................................................................. 42
CÓDIGO FUENTE 25: CLASE PRODUCTO ............................................................................................... 45
CÓDIGO FUENTE 26: CLASE PRODUCTONACIONAL ................................................................................. 46
CÓDIGO FUENTE 27: CLASE PRODUCTOIMPORTADO ................................................................................ 46
Aplicación Práctica de Patrones de Diseño en Front-End
Resumen
Los patrones de diseño nacieron a medida que los sistemas evolucionaban, donde los
programadores con el paso del tiempo mejoraban sus implementaciones y soluciones a problemas
recurrentes. De esta forma esas soluciones se convirtieron en un estándar, dando así un nuevo
vocabulario de patrones para todos los desarrolladores de software.
En la actualidad las últimas tecnologías y frameworks, tales como Angular, Spring, entre otras, ya
vienen con arquitecturas bastante complejas y robustas, donde para lograr esa robustez lo hacen
mediante el uso de diferentes técnicas y conjunto de patrones de diseño relacionados.
Esto no quiere decir que al usar frameworks tenemos todo solucionado, por el contrario, debemos
tener conocimiento de los patrones más fundamentales para aplicarnos a nuestras soluciones,
permitiendo así que nuestro código sea de calidad siendo extensible y reusable.
Palabras clave: Angular, Framework, Patrones de diseño, Front End.
1
2
Introducción
Cuando uno se adentra en el mundo de la programación y el diseño de software, se llega a topar
con diferentes escenarios con múltiples funcionalidades o características que se deben analizar e
implementar, aquí suelen surgir los problemas, las dudas, de cómo afrontarlos de manera adecuada,
donde la solución que elijamos sea flexible, elegante y reusable. Puede que estos escenarios puedan
ser resueltos de manera trivial como también requieran una solución más elaborada, con una
estructura bien definida para poder ser resueltos de manera eficiente. Diseñar software orientado a
objetos es complicado, y aún más hacerlo reusable.
A medida que implementamos funcionalidades nos damos cuenta que existen escenarios con un
problema en común, pero en diferentes contextos, donde en estos casos se pueden reutilizar
soluciones pasadas.
Por tanto, nos encontraremos con patrones recurrentes de clases y comunicaciones entre objetos
en muchos sistemas orientados a objetos. Estos patrones resuelven problemas concretos de
diseño y hacen que los diseños orientados a objetos sean más flexibles, elegantes y reutilizables.
(Gamma, Helm, Johnson, & Vlissides, Patrones de diseño. Elementos de software orientado a
objetos reutilizable., 2003, p. 2)
Existen una gran variedad de patrones de diseño, donde nos brindan soluciones a diferentes tipos
de problemas, en este trabajo nos centraremos en los más útiles y usados, aplicándolos en lado de
front-end1 con Angular. “Angular es considerada como una plataforma y un framework para el
1
Término que se refieren a la capa de presentación
3
desarrollo de aplicaciones usando HTML y TypeScript.” (Angular, Angular - What is Angular?,
2018)
De esta forma se conocerá los patrones de diseño más útiles y usados, teniendo una idea más clara
de cómo y en qué momento aplicarlos cuando se está desarrollando una aplicación con un lenguaje
de POO2 tal como es TypeScript 3, definiéndonos así una estructura robusta y elegante al momento
de desarrollar software con Angular.
2
Acrónimo de programación orientada a objetos
3
Lenguaje de programación de código abierto desarrollador por Microsoft
4
5
1 GENERALIDADES
1.1 Antecedentes Generales
A medida que desarrollamos software, este con el tiempo va creciendo y nos topamos con una
variedad de funcionalidades que debemos analizar, darle una arquitectura adecuada e
implementarla, de estas funcionalidades puede que algunas se logren implementar de manera trivial
y otras requieran una implementación más elaborada.
Uno de los problemas cuando se habla de arquitectura para sistemas de software es que la
terminología se tomó de otras disciplinas (como la arquitectura de edificios) y se usa
ampliamente, de manera inconsistente, en una variedad de situaciones. Por ejemplo, el término
architecture se usa para referirse a la estructura interna de los microprocesadores, la estructura
interna de las máquinas, la organización de las redes, la estructura de las aplicaciones de
software y muchas otras cosas (Rozanski & Woods, 2012, p. 1).
Cuando se desarrolla software con algún framework4 como ser Angular, este ya nos brinda una
arquitectura robusta para iniciar, pero con el paso del tiempo y el crecimiento del software se
necesita definir otro tipo de estructuras para que nuestras soluciones sean más reusables y
escalables.
4
Estructura de software definido, sobre la cual otro proyecto de software puede ser organizado y
desarrollado
6
1.2 Antecedentes Específicos
Angular es una plataforma y un framework para la creación de aplicaciones cliente usando el
lenguaje HTML y TypeScript. Angular tiene como lenguaje base a TypeScript, que es un lenguaje
de POO, esto nos permitirá el uso de ciertas características o conceptos tales como herencia de
clases, polimorfismo 5, entre otros, dándonos así la posibilidad de implementar soluciones más
elegantes y reusables.
Existen una gran variedad de patrones de diseño según su propósito y ámbito, “Cada patrón de
diseño se centra en un problema en concreto, describiendo cuando aplicarlo y si tiene sentido
hacerlo teniendo en cuenta otras restricciones de diseño, así como las consecuencias y las ventajas
e inconvenientes de su uso (Gamma, Helm, Johnson, & Vlissides, Patrones de diseño. Elementos
de software orientado a objetos reutilizable., 2003, p. 4).
El uso de diferentes patrones de diseño en el desarrollo de tu aplicación Angular, harán que, definas
una arquitectura robusta, teniendo así reusabilidad y escalabilidad a futuro.
5
Propiedad por la que es posible enviar mensajes sintácticamente iguales a objetos de tipos distintos
7
2 METODOLOGÍA
A continuación, se mencionan los métodos de investigación que serán utilizados en el presente
trabajo:
 Método Bibliográfico, debido a que se realizara la lectura y compilación de libros
relacionados al tema de estudio.
 Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio.
8
3 PATRONES DE DISEÑO
Antes de iniciar con cualquier implementación debemos tener claro que es un patrón de diseño,
porque son útiles y como identificar cual usar.
Un patrón de diseño nomina, abstrae e identifica los aspectos clave de una estructura de diseño
común, lo que les hace útiles para crear un diseño orientado a objetos reutilizables. El patrón de
diseño identifica las clases e instancias participantes sus roles y colaboraciones, y la distribución
de responsabilidades (Gamma, Helm, Johnson, & Vlissides, Patrones de diseño. Elementos de
software orientado a objetos reutilizable., 2003, p. 4).
En resumen, un patrón de diseño es un conjunto de clases y objetos relacionados que resuelven un
problema general, en un contexto específico.
3.1 Utilidad de los patrones de diseño
Las principales utilidades que nos brindan los patrones de diseño son:
 Reusabilidad, al brindarte una solución robusta ya probada que te permitirá solucionar la
mayor parte del problema de forma directa donde las modificaciones para el contexto en el
que lo implementas son mínimas.
 Tienes código de calidad, ya que son estructuras e implementaciones probadas y
mejoradas por muchos desarrolladores a lo largo del tiempo.
9
 Establece un lenguaje de patrones común, formando así un vocabulario permitiendo a
los desarrolladores se comuniquen y entiendan mejor la estructura sin necesidad de ver la
implementación.
 Flexibilidad y extensibilidad, ya el software puede cambiar, los patrones de diseño están
orientados y preparados para el cambio.
3.2 Clasificación de los patrones
Dado que existe muchos patrones de diseño, es necesario un modo de organizarlos y separarlos por
su propósito y su ámbito.
10
Propósito
De Creación Estructurales De Comportamiento
Clase Factory Method Adapter Interpreter

Template Method
Objeto Abstract Factory Adapter Chain of Responsability
Builder Bridge Command
Prototype Composite Iterator
Ámbito Singleton Decorator Mediator
Facade Memento
Flyweight Observer
Proxy State
Strategy
Visitor
Tabla 1: Patrones de diseño
Fuente: (Gamma, Helm, Johnson, & Vlissides, 2003)
Los patrones de diseño se clasifican según dos criterios:
1. Propósito, donde refleja que hace el patrón. Pueden tener un propósito de creación,
estructural o de comportamiento.
2. Ámbito, donde especifica si el patrón se aplica principalmente a clases o a objetos.
Como pudimos ver en la Tabla 1, existe una gran cantidad de patrones de diseño que están
clasificados en diferentes grupos, veremos la aplicación de los más importantes usando Angular.
11
4 APLICACIÓN DE PATRONES DE CREACIÓN
Este tipo de patrones permiten que nuestro sistema sea independiente de cómo se crean, componen
o representan sus objetos. Donde para la creación de clases se hace uso de la herencia para cambiar
la clase de la instancia a crear, mientras que un patrón de creación de objetos delega la creación de
la instancia en otro objeto.
A medida que nuestros sistemas crecen estos patrones nos ayuda a que sean más dependientes de
la composición de objetos que de la herencia de clases.
Se trata de que el comportamiento se defina más por la composición de un conjunto pequeño de
comportamientos fundamentales que por la definición mediante herencia de todos los
comportamientos posibles.
Por tanto, la creación de objetos es algo más que instanciar una clase.
4.1 Método de Fabricación (Factory Method)
El propósito principal de este patrón de diseño es el de permitir a subclases decidan que clase
instanciar a través de una interfaz6, “Permite que una clase delegue en sus subclases la creación de
objetos.” (Gamma, Helm, Johnson, & Vlissides, 2003, p. 99)
Proporcionado así enganches para las subclases y conectando jerarquías de clases paralelas.
6
Conjunto de métodos abstractos y de constantes cuya funcionalidad es la de determinar el
comportamiento de una clase
12
Figura 1: Estructura del patrón Factory Method
4.1.1 Ejemplo de aplicación
Se tiene diferentes tipos de archivos, donde los cuales se pueden reproducir, tal reproducción es
diferente para cada uno.
Figura 2: Diagrama del ejemplo de aplicación del patrón Factory Method
Fuente: (Elaboración Propia)
Donde:
13
Archivo.ts
export interface Archivo {

reproducir(): void;
}
Código Fuente 1: Interface Archivo
ArchivoAudio.ts
export class ArchivoAudio implements Archivo {
constructor() {
}
public reproducir(): void {

console.log('Reproduciendo archivo de audio...');
}
Código Fuente 2: Clase ArchivoAudio
ArchivoVideo.ts
export class ArchivoVideo implements Archivo {
constructor() {
}
public reproducir(): void {

console.log('Reproduciendo archivo de video...');
}
Código Fuente 3: Clase ArchivoVideo
14
CreadorDeArchivos.ts
export class CreadorDeArchivos {
constructor() {
}
public getArchivo(tipoArchivo: TipoDeArchivos): void {

let archivo: Archivo = null;
switch (tipoArchivo) {
case(TipoDeArchivos.AUDIO):
archivo = new ArchivoAudio();
break;
case(TipoDeArchivos.VIDEO):
archivo = new ArchivoAudio();
break;
}
}
export enum TipoDeArchivos {

AUDIO = 'AUDIO',
VIDEO = 'VIDEO'
}
Código Fuente 4: Clase CreadorDeArchivos
De esta forma aplicamos el Factory method en la clase CreadorDeArchivos, donde según el tipo le
podremos pedir que nos cree los diferentes archivos que existen o que pueden surgir más delante,
siendo sencillo el añadido de nuevos archivos.
15
4.2 Constructor (Builder)
Permite a un cliente construir un objeto complejo especificando sólo su tipo y contenido,
ocultándole todos los detalles de la construcción del objeto.
Permite variar la representación interna, separando el código de construcción del de la
representación dando así un mayor control en el proceso de creación.
Figura 3: Estructura del patrón Builder
Se requiere construir diferentes tipos de autos, por ahora se tiene dos tipos, el básico y el full, donde
la diferencia principal está en los componentes o partes que lleva cada uno.
16
Figura 4: Diagrama del ejemplo de aplicación del patrón Builder
Donde:
17
Director.service.ts
@Injectable()
export class Director {
constructor() {
}
public construir(constructor: CostructorDeAutos): void {

constructor.crearNuevoCoche();
constructor.construirMotor();
constructor.construirCarroceria();
constructor.construirAireAcondic();
}
Código Fuente 5: Servicio Director
ConstructorDeAutos.ts
export abstract class ConstructorDeAutos {

protected auto: Auto;
constructor() {
}
public crearNuevoAuto(): void {

this.auto = new Auto();
}
public abstract construirMotor(): void;

public abstract construirCarroceria(): void;
public abstract construirAireAcondic(): void;
Código Fuente 6: Clase Constructor de Autos
18
ConstructorAutosBasicos.ts
export class ConstructorAutosBasicos extends ConstructorDeAutos {
constructor() {
super();
}
construirMotor(): void {
this.auto.motor = 'Motor de potencia mínima';
}
construirCarroceria(): void {
this.auto.carroceria = 'Carroceria con protección minima';
}
construirAireAcondic(): void {
this.auto.aireAcondic = false;
}
Código Fuente 7: Clase Constructor Autos Básicos
19
ConstructorAutosEquipados.ts
export class ConstructorAutosEquipados extends ConstructorDeAutos {
constructor() {
super();
}
construirMotor(): void {
this.auto.motor = 'Motor de potencia full;
}
construirCarroceria(): void {
this.auto.carroceria = 'Carroceria con protección full;
}
construirAireAcondic(): void {
this.auto.aireAcondic = true;
}
}
Código Fuente 8: Clase Constructor Autos Equipados
20
Auto.ts
export class Auto {

private _motor: string;
private _carroceria: string;
private _aireAcondic: boolean;
constructor() {
this._motor = '';
this._carroceria = '';
this._aireAcondic = false;
}
get motor(): string {

return this._motor;
}
set motor(value: string) {

this._motor = value;
}
get carroceria(): string {

return this._carroceria;
}
set carroceria(value: string) {

this._carroceria = value;
}
get aireAcondic(): boolean {

return this._aireAcondic;
}
set aireAcondic(value: boolean) {

this._aireAcondic = value;
}
Código Fuente 9: Clase Auto
21
De esta forma podemos inyectar el servicio 7 Director y crear nuestros diferentes Objetos auto paso
a paso, esto nos da un control más fino sobre el proceso de construcción y, por tanto, sobre la
estructura interna del auto.
7
Un Servicio en Angular es el mecanismo para compartir funcionalidad entre componentes
22
5 APLICACIÓN DE PATRONES ESTRUCTURALES
“Los patrones estructurales se ocupan de cómo se combinan las clases y los objetos para formar
estructuras más grandes”. (Gamma, Helm, Johnson, & Vlissides, 2003, p. 130) Especifican la
forma en que unas clases se relacionan con otras.
Se trata de conseguir que cambios en los requisitos de la aplicación no ocasionen cambios en las
relaciones de los objetos.
Las relaciones de uso están determinadas por las interfaces que son soportan los objetos.
5.1 Puente (Bridge)
Desacopla una abstracción de su implementación de manera que las dos puedan evolucionar
independientemente. La herencia permite que una abstracción tenga varias implementaciones.
Usado para evitar una vinculación permanente entre una abstracción y su implementación además
permite compartir una implementación entre múltiples objetos, sin que lo noten los clientes.
23
Figura 5: Estructura del patrón Bridge
Supongamos que tenemos una aplicación que se comunique con un sistema externo, dicha
comunicación deberá ser encriptada mediante diversos algoritmos, sin embargo, la implementación
concreta del algoritmo de encriptación puede cambiar y es necesario crear un adaptador que nos
permita desacoplar la implementación concreta con la forma de utilizarlo, por lo cual, utilizaremos
un adaptador que encapsule la lógica y nos exponga una interface común entre todos los métodos
de encriptación.
24
Figura 6: Diagrama del ejemplo de aplicación del patrón Bridge
Donde:
25
Encriptador .ts
export abstract class Encriptador {
constructor(private _encriptador: EncriptadorImpl) {

}
public get encriptador(): EncriptadorImpl {

return this._encriptador;
}
public set encriptador(value: EncriptadorImpl) {

this._encriptador = value;
}
public encriptar(valor: string): string {

return this._encriptador.encriptarValor(valor);
}
public desencriptar(valor: string): string {

return this._encriptador.desencriptarValor(valor);
}
}
Código Fuente 10: Clase Encriptador
EncriptadorImpl.ts
export interface EncriptadorImpl {
encriptarValor(valor: string): string;
desencriptarValor(valor: string): string;
}
Código Fuente 11: Clase EncriptadorImpl
26
EncriptadorAES.ts
export class EncriptadorAES implements EncriptadorImpl {
private _key: string;
constructor(key: string) {
this._key = key;
}
public encriptarValor(valor: string): string {

/* Algoritmo de encriptación AES usando el key*/
}
public desencriptarValor(valor: string): string {

/* Algoritmo de desencriptación AES usando el key*/
}
public get key(): string {

return this._key;
}
public set key(value: string) {

this._key = value;
}
Código Fuente 12: Clase EncriptadorAES
27
EncriptadorDES.ts
export class EncriptadorDES implements EncriptadorImpl {
constructor() {
}
public encriptarValor(valor: string): string {

/* Algoritmo de encriptación DES */
}
public desencriptarValor(valor: string): string {

/* Algoritmo de desencriptación DES */
}
Código Fuente 13: Clase EncriptadorDES
EncriptadorDeContrasenias.service.ts
@Injectable()
export class EncriptadorDeContrasenias extends Encriptador {
constructor(key: string) {
super(new EncriptadorAES('KEY'));
}
}
Código Fuente 14: Clase EncriptadorDeContrasenias
De esta forma logramos un bajo acoplamiento, esto significa que cuando sea necesario cambiar el
algoritmo de encriptado o añadir uno nuevo se lograra sin mucho esfuerzo.
28
5.2 Fachada (Facade)
El patrón Fachada oculta la complejidad de interactuar con un conjunto de subsistemas
proporcionando una interface de alto nivel, la cual se encarga de realizar la comunicación con todos
los subsistemas necesarios. Es una buena estrategia cuando requerimos interactuar con varios
subsistemas para realizar una operación concreta ya que se necesita tener el conocimiento técnico
y funcional para saber qué operaciones de cada subsistema tenemos que ejecutar y en qué orden,
lo que puede resultar muy complicado cuando los sistemas empiezan a crecer demasiado.
Figura 7: Estructura del patrón Facade
Aplicaremos este patrón a un problema bastante común de la vida real: sacar dinero de un cajero.
Para retirar efectivo de un cajero automático, se requiere una gran cantidad de funciones y
operaciones para garantizar la seguridad e integridad.
29
Para esto veremos una implementación base de las clases o subsistemas con los cuales debemos
interactuar, para luego usarlas en nuestra fachada.
Figura 8: Diagrama del ejemplo de aplicación del patrón Facade
Donde:
30
Autenticador.service.ts
@Injectable()
export class Autenticador {
/* implementación... */
public leerTarjeta(): boolean {

}
public introducirClave(): string {

}
public comprobarClave(clave: string): boolean {

}
public obtenerCuenta(): Cuenta {

}
public fallar(): void {

}
} Código Fuente 15: Servicio Autenticador
31
Cajero.service.ts
@Injectable()
export class Cajero {
public introducirCantidad(): number {

}
public tieneSaldo(): boolean {

}
public expedirDinero(): number {

}
public imprimirTicket(): string {

}
}
Código Fuente 16: Servicio Cajero
32
Cuenta.ts
export class Cuenta {
public comprobarSaldoDisponible(): number {

}
public bloquearCuenta(): boolean {

}
public desbloquearCuenta(): boolean {

}
public retirarSaldo(cantidad: number): void {

}
public actualizarCuenta(): boolean {

}
public alFallar(): void {

}
}
Código Fuente 17: Clase Cuenta
33
FachadaCajero.ts
export class FachadaCajero {
private _cuenta: Cuenta;
constructor(private _autenticador: Autenticador,

private _cajero: Cajero) {
this._cuenta = null;
}
public introducirCredenciales(): void {

const tarjeta_correcta: boolean = this._autenticador.leerTarjeta();
if (tarjeta_correcta) {
const clave: string = this._autenticador.introducirClave();
const clave_correcta: boolean = this._autenticador.comprobarClave(clave);
if (clave_correcta) {
this._cuenta = this._autenticador.obtenerCuenta();
return;
}
}
this._autenticador.fallar();
}
public sacarDinero(): void {

if (this._cuenta != null) {
const cantidad: number = this._cajero.introducirCantidad();
const tiene_dinero: number = this._cajero.tieneSaldo(cantidad);
if (tiene_dinero) {
const hay_saldo_suficiente: boolean = this._cuenta.comprobarSaldoDisponible()
>= cantidad;
if (hay_saldo_suficiente) {
this._cuenta.bloquearCuenta();
this._cuenta.retirarSaldo(cantidad);
this._cuenta.actualizarCuenta();
this._cuenta.desbloquearCuenta();
this._cajero.expedirDinero();
this._cajero.imprimirTicket();
} else {
this._cuenta.alFallar();
}
}
}
}
} Código Fuente 18: Clase FachadaCajero
34
De esta manera, se consiguió que para que un cliente use el cajero, no tenga que realizar todas las
operaciones de sus subsistemas o clases. En lugar de ello proporcionamos una interfaz mucho más
simple y amigable que facilita enormemente su uso.
35
6 APLICACIÓN DE PATRONES DE COMPORTAMIENTO
“Los patrones de comportamiento tienen que ver con algoritmos y con la asignación de
responsabilidades a objetos.” (Gamma, Helm, Johnson, & Vlissides, 2003, p. 204) Son algoritmos
de asignación de responsabilidades entre objetos y patrones de comunicación entre objetos.
Permite la distribución del comportamiento entre varias clases mediante herencia y mediante
composición de clases y el encapsulado de comportamientos.
6.1 Orden (Command)
El patrón de diseño Command nos permite ejecutar operaciones sin conocer los detalles de la
implementación de la misma. Las operaciones son conocidas como comandos y cada operación es
implementada como una clase independiente que realiza una acción muy concreta, para lo cual,
puede o no recibir parámetros para realizar su tarea.
Una de las ventajas que ofrece este patrón es la de poder crear cuántos comandos requerimos y
encapsularlos bajo una interface de ejecución.
36
Figura 9: Estructura del patrón Command
Veamos un simple ejemplo de uso del patrón Command. Para ello vamos a plantear el escenario
donde estamos implementando el control de nuestra vivienda inteligente.
37
Figura 10: Diagrama del ejemplo de aplicación del patrón Command
Donde:
Command.ts
export interface Command {
ejecutar(): void;
}
Código Fuente 19: Interface Command
38
Luces.ts
export class Luces {
constructor() {
}
public conectar(): boolean {

console.log('Conectando al sistema de iluminación...');
try {
console.log('Conexión al sistema de iluminación establecida.');
return true;
} catch (e) {
console.log('No se ha podido establecer la conexión al sistema de
iluminación. ERROR:n' + e.getMessage());
return false;
}
}
public desconectar(): boolean {

console.log('Desconectando del sistema de iluminación...');
try {
console.log('Se ha desconectado del sistema de iluminación.');
return true;
} catch (e) {
console.log('No se ha podido desconectar del sistema de iluminación.
ERROR:n' + e.getMessage());
return false;
}
}
public encender(): boolean {

console.log('Encendiendo el sistema de iluminación...');
try {
console.log('Sistema de iluminación encendido.');
return true;
} catch (e) {
console.log('No se ha podido encender el sistema de iluminación.
return false;
}
}
public apagar(): boolean {

console.log('Apagando el sistema de iluminación...');
try {
console.log('Sistema de iluminación apagado.');
return true;
} catch (e) {
console.log('No se ha podido apagar el sistema de iluminación.
ERROR:n' + e.getMessage()); 39
return false;
}
}
}
public apagar(): boolean {

console.log('Apagando el sistema de iluminación...');
try {
console.log('Sistema de iluminación apagado.');
return true;
} catch (e) {
console.log('No se ha podido apagar el sistema de iluminación.
return false;
}
}
Código Fuente 20: Clase Luces
EncenderLuces.ts
export class EncenderLuces implements Command {
private _luces: Luces;
public constructor() {
this._luces = new Luces();
}
public ejecutar(): void {

this._luces.conectar();
this._luces.encender();
this._luces.desconectar();
}
Código Fuente 21: Clase EncenderLuces
40
ApagarLuces.ts
export class ApagarLuces implements Command {
private _luces: Luces;
public constructor() {
this._luces = new Luces();
}
public ejecutar(): void {

this._luces.conectar();
this._luces.apagar();
this._luces.desconectar();
}
Código Fuente 22: Clase ApagarLuces
Invocador.ts
export class Invocador {
private _orden: Command;
public constructor(orden: Command) {

this._orden = orden;
}
public run(): void {

this._orden.ejecutar();
}
Código Fuente 23: Clase Invocador
41
Cliente.ts
export class Cliente {
private _command: Command;
private _invoker: Invocador;
constructor() {
}
public accion(accion: string): void {

if (accion === 'encender') {
this._command = new EncenderLuces();
} else if (accion === 'apagar') {
this._command = new ApagarLuces();
}
this._invoker = new Invocador(this._command);

this._invoker.run();
}
}
Código Fuente 24: Clase Cliente
De esta forma tenemos escalabilidad en cuanto a nuestro conjunto de órdenes las cuales pueden
crecer con el tiempo, las cuales podemos ejecutar y cambiar en tiempo de ejecución de nuestra
aplicación.
42
6.2 Método Plantilla (Template Method)
El patrón de diseño templete centra su funcionalidad en la reutilización de código y se utiliza para
implementar algoritmos que realizan los mismos pasos para llegar a una solución. Esto se logra
implementando clases bases que definan un comportamiento predeterminado. Usualmente es
creado un método para cada paso del algoritmo a implementar, de los cuales algunos serán
implementados y otros permanecerán abstractos hasta su ejecución por parte de las subclases.
Figura 11: Estructura del patrón Template Method
Queremos obtener el precio de diferentes productos según sean nacionales o importados, ya que
dependiendo de esto el impuesto es diferente.
43
Figura 12: : Diagrama del ejemplo de aplicación del patrón Template Method
Donde:
44
Producto.ts
export abstract class Producto {
private _precioBase: number;
constructor(precioBase) {
this._precioBase = precioBase;
}
public obtenerPrecio(): number {

return this._precioBase + this.obtenerImpuesto();
}
get precioBase(): number {

return this._precioBase;
}
set precioBase(value: number) {

this._precioBase = value;
}
public abstract obtenerImpuesto(): number;
}
Código Fuente 25: Clase Producto
45
ProductoNacional.ts
export class ProductoNacional extends Producto {
private readonly IMPUESTO: number = 5;
constructor(precioBase: number) {
super(precioBase);
}
public obtenerImpuesto(): number {

return this.IMPUESTO;
}
}
Código Fuente 26: Clase ProductoNacional
ProductoImportado.ts
export class ProductoImportado extends Producto {
private readonly IMPUESTO: number = 10;
constructor(precioBase: number) {
super(precioBase);
}
public obtenerImpuesto(): number {

return this.IMPUESTO;
}
}
Código Fuente 27: Clase ProductoImportado
De esta forma podemos reusar código y solo sobrescribir o definir el comportamiento específico
para las clases concretas.
46
7 CONCLUSIONES
Luego de aplicar los patrones de diseño vistos en este trabajo a nuestros proyectos con Angular u
otra tecnología, lo más probable es que su estructura sea elegante, extensible y reusable, donde el
código sea más entendible, donde este habla por sí solo, ya que nos basamos en patrones ya
probados y mejorados con el tiempo por diferentes programadores.
Además de esa arquitectura bien diseñada, el vocabulario de patrones para poder comunicarnos
con otros programadores habrá crecido.
Los patrones de diseño son indispensables para que el producto que se desarrolle sea robusto y fácil
de mantener, estandarizando el código y teniendo así una larga vida donde pueda ser mejorado o
modificado sin mucho problema.
47
8 BIBLIOGRAFÍA
Angular. (2018, Diciembre 13). Angular - What is Angular? Retrieved from

https://angular.io/docs
Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1997). Design Patterns: Elements of
Reusable Object-Oriented Software.
Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (2003). Patrones de diseño. Elementos de
software orientado a objetos reutilizable. Madrid: ADDISON WESLEY.
Leiva, A. (18 de Febrero de 2016). devexperto. Obtenido de https://devexperto.com/patrones-de-
diseno-software/
Mestras, J. P. (2004). Universidad complutense informática. Obtenido de
https://www.fdi.ucm.es/profesor/jpavon/poo/2.14PDOO.pdf
Rozanski, N., & Woods, E. (2012). Software Systems Architecture (Second Edition ed.).
Addison-Wesley.
48

Aplicación Practica Patrones Diseño Front End

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aplicación Practica Patrones Diseño Front End

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

“APLICACIÓN PRÁCTICA DE PATRONES DE

TRABAJO FINAL PRESENTADO PARA OBTENER EL

POSTULANTE: MAURICIO ANTONIO VARGAS LUIZAGA

TUTOR : MSc. VALENTIN LAIME ZAPATA

1.1 ANTECEDENTES GENERALES ................................................................................................. 6

1.2 ANTECEDENTES ESPECÍFICOS ................................................................................................ 7

3 PATRONES DE DISEÑO ........................................................................................................ 9

3.1 UTILIDAD DE LOS PATRONES DE DISEÑO ................................................................................... 9

3.2 CLASIFICACIÓN DE LOS PATRONES ........................................................................................ 10

4 APLICACIÓN DE PATRONES DE CREACIÓN....................................................................... 12

4.1 MÉTODO DE FABRICACIÓN (FACTORY METHOD) ...................................................................... 12

4.1.1 EJEMPLO DE APLICACIÓN ................................................................................................... 13

4.2 CONSTRUCTOR (BUILDER) .................................................................................................. 16

4.2.1 EJEMPLO DE APLICACIÓN ................................................................................................... 16

5 APLICACIÓN DE PATRONES ESTRUCTURALES ................................................................. 23

5.1 PUENTE (BRIDGE) ............................................................................................................ 23

5.1.1 EJEMPLO DE APLICACIÓN ................................................................................................... 24

5.2 FACHADA (FACADE) ......................................................................................................... 29

5.2.1 EJEMPLO DE APLICACIÓN ................................................................................................... 29

6 APLICACIÓN DE PATRONES DE COMPORTAMIENTO........................................................ 36

6.1 ORDEN (COMMAND) ......................................................................................................... 36

6.1.1 EJEMPLO DE APLICACIÓN ................................................................................................... 37

6.2.1 EJEMPLO DE APLICACIÓN ................................................................................................... 43

TABLA 1: PATRONES DE DISEÑO ......................................................................................................... 11

FIGURA 1: ESTRUCTURA DEL PATRÓN FACTORY METHOD ........................................................................

CÓDIGO FUENTE 1: INTERFACE ARCHIVO ............................................................................................. 14

vocabulario de patrones para todos los desarrolladores de software.

mediante el uso de diferentes técnicas y conjunto de patrones de diseño relacionados.

Palabras clave: Angular, Framework, Patrones de diseño, Front End.

Cuando uno se adentra en el mundo de la programación y el diseño de software, se llega a topar

objetos es complicado, y aún más hacerlo reusable.

en muchos sistemas orientados a objetos. Estos patrones resuelven problemas concretos de

objetos reutilizable., 2003, p. 2)

desarrollo de aplicaciones usando HTML y TypeScript.” (Angular, Angular - What is Angular?,

de desarrollar software con Angular.

1.1 Antecedentes Generales

variedad de funcionalidades que debemos analizar, darle una arquitectura adecuada e

y otras requieran una implementación más elaborada.

terminología se tomó de otras disciplinas (como la arquitectura de edificios) y se usa

ampliamente, de manera inconsistente, en una variedad de situaciones. Por ejemplo, el término

architecture se usa para referirse a la estructura interna de los microprocesadores, la estructura

interna de las máquinas, la organización de las redes, la estructura de las aplicaciones de

software y muchas otras cosas (Rozanski & Woods, 2012, p. 1).

1.2 Antecedentes Específicos

Angular es una plataforma y un framework para la creación de aplicaciones cliente usando el

diseño se centra en un problema en concreto, describiendo cuando aplicarlo y si tiene sentido

de software orientado a objetos reutilizable., 2003, p. 4).

una arquitectura robusta, teniendo así reusabilidad y escalabilidad a futuro.

A continuación, se mencionan los métodos de investigación que serán utilizados en el presente

 Método Bibliográfico, debido a que se realizara la lectura y compilación de libros

relacionados al tema de estudio.

 Método Analítico, debido a que se procederá a revisar y analizar ordenadamente

documentos relacionados al tema de estudio.

porque son útiles y como identificar cual usar.

de responsabilidades (Gamma, Helm, Johnson, & Vlissides, Patrones de diseño. Elementos de

software orientado a objetos reutilizable., 2003, p. 4).

En resumen, un patrón de diseño es un conjunto de clases y objetos relacionados que resuelven un

problema general, en un contexto específico.

3.1 Utilidad de los patrones de diseño

 Reusabilidad, al brindarte una solución robusta ya probada que te permitirá solucionar la

que lo implementas son mínimas.