UNIVERSIDAD AUTONOMA DE NUEVO LEÓN

FACULTAD DE INGENIERIA MÉCANICA Y ELÉCTRICA

Video de investigación

Carrera: Ing. Administrador de Sistemas

Materia: Proyecto Integrador II B

Salón: 4204

Grupo: 003

Cd Universitaria, San Nicolás de los Garza, Nuevo León a 23 de agosto de 2021

Indice
Diagrama UML.......................................................................................................3
Base de datos SQL server.....................................................................................3
Campo venta..........................................................................................................4
Campo concepto....................................................................................................4
Campo producto.....................................................................................................4
Web service de venta.............................................................................................4
Realización del CRUD............................................................................................5
CRUD.....................................................................................................................5
Instalación de angular............................................................................................6
Programación de angular.......................................................................................7
Servicios en angular...............................................................................................7
Directiva ngFor.......................................................................................................8
Solicitudes http post...............................................................................................9
Ng Model..............................................................................................................10
Método put y delete..............................................................................................11
Autentificación JWT en .Net Core........................................................................12
Proteger rutas Guard............................................................................................12
Interceptors y local storage..................................................................................15
Introducción a formularios y reactivos..................................................................16
Rxjs utilizando Observables.................................................................................17
json en el backend en C#.....................................................................................18
Entity Framework en C#.......................................................................................19
Refactorización utilizando Inyección....................................................................19
Validaciones de modelos en el backend en MVC .Net........................................20
Conclusión............................................................................................................22
Bibliografía............................................................................................................23
 Programando un sistema de ventas real.

Se elabora un sistema que realice una venta de productos, que contenga clientes,
productos y toda esta información se guarde en una base de datos. El back end en
.Net core, el Front End en Angular, y otro Front End en Xamarin.

Diagrama UML

Primeramente se hace la arquitectura del software, se utiliza el diagrama de

componentes de UML, se realiza en visual studio,, esto con la finalidad de poder
entender el funcionamiento del sistema, que se conecta con que, es decir poder
identificar que nuestra base de datos en SQL server, que tenga un aplicación
hecha en angular y xiamarin.

Base de datos SQL server

Después se inicio con el diseño de la base de datos, que sirve para guardar
información que se pueda recurrir a ella en un futuro ya sea para hacer reportes o
consultarla, para poder entrar se tiene que especificar el servicio el usuario y la
contraseña.

Al ya tener SQL instalado, se crea la base y se define el nombre con el que se

quiera guardar, se crea una nueva tabla, primero analizando lo que el cliente no
esta pidiendo, la venta conceptos y productos, una tabla seria la venta y otra
conceptos y productos las cuales estarán ligadas.

Una nota importante que se tiene que considerar es que al momento de crear la
tabla, en la parte de data type, se debe considerar si se utiliza un bigint cuando mi
base de datos tiene miles de datos o si ya se habla de millones se utiliza gits.
Campo venta

Otro campo que tiene la venta es la fecha, es importante para saber en qué hora
se guardó la venta. El siguiente campo seria la venta total, para así poder tener los
totales de las ventas por si se desea hacer un reporte con todos los totales, este
es un dato que se puede llegar a necesitar.

También se agrega el campo id cliente, que es al que se le hará la venta y se liga

al concepto cliente, en el cual solo viene el campo del nombre del cliente.

Campo concepto

La tabla llamada concepto se esta ligando al campo total al igual que la Cantidad
de productos, Precio unitario, Importe

Campo producto

En esta tabla se agrego el nombre, el precio unitario de este producto, y el costo

unitario.

Estas tres tablas se van a ligar con una llave, para poder hacer la conexión o la
unión de la información.

Web service de venta

El web service es un conjunto de protocolos o reglas que ayudan a intercambiar

de datos, en este se hacen inserciones, consultas, modificaciones y eliminaciones
en la base de datos, se crea el web service con un servicio de prueba para ver
como se interactúa con el, para esto se necesita visual studio 2019.

Se tiene que dirigir a controler, un controlador es una clase, y es el que lleva la

logística de las URL en el servicio, también hay un método llamado get que entra
por un protocolo http get, post, put, delete estos son protocolos de información;
Cuando es get es porque se tendrá información, cuando es post es cuando se va
a insertar información, cuando es put, es editar, y delete eliminar, exiten más
protocolos.

Para ejecutar y probar los servicios se utiliza una herramienta llamada postman,
en esta herramienta se insertará la URL para que el controlador me la indique. Al
momento de agregar dos campos me da el servicio en el postman.

Realización del CRUD

Un Entity framework es un ORM, que sirve para mapear a una base de datos y las
construya para poder acceder a la base de datos, y usar los métodos que genera
automáticamente y manipularlos. Se instalan dos herramientas, después se crea
una carpeta que se llama models, esto viene siendo una clase que sirve de molde,
e identifica un conjunto de campos y atributos. Con la consola de visual studio se
escribe scaffool-DB contexts, en la cual se pondrá dentro de ella la base de datos.
Con esto se van a crear las clases automaticamente que se tienen en la base de
datos, para poder realizar las consultas.

En postman, se crea un nuevo método para crear un controlador para que el

servicio lo regrese a la interface, con el protocolo get.

CRUD

Hay que darle un formato a nuestra respuesta, se crea una clase en models,
dentro de la carpeta llamada reponse, sirve de molde para todas las respuestas,
un object se heredea puede meterse cualquier información, y asi se puede tener
comunicación con nuestro front end.

CRUD (Create, Read, Update, Delete) es un acrónimo para las maneras en las
que se puede operar sobre información almacenada. Es un nemónico para las
cuatro funciones del almacenamiento persistente. CRUD usualmente se refiere a
operaciones llevadas a cabo en una base de datos o un almácen de datos, pero
también pude aplicar a funciones de un nivel superior de una aplicación como soft
deletes donde la información no es realmente eliminada, sino es marcada como
eliminada a tráves de un estatus.

Para hacer la inserción en la base de datos se utiliza un public, el que que recibe
el dato será el protocolo, los datos que se insertan es la tabla de clientes, se
reciben nombre del cliente, con un solo campo. Después de ya tener esto se da de
alta este request del cliente.

El núcleo del sistema será la venta, se hace la inserción, que se une el contexto
de venta real con el contest, se utiliza el modelo clientey se crea un objeto de esa
clase para hacer la conexión.

Para hacer el eliminar, es por el protocolo delete, ahí se recibe un campo llamada
delete, se hace la búsqueda por id, se elimina con la palbara DB. remove. Esto
hace un delete en la base de datos o borrado físico. En el body se manda el id que
se borrara.

Instalación de angular

Angular es un framework basado en tipos de componente es mantenido por

Google de código abierto, se necesitan tres cosas para poderlo instalar

Se abre Google y se busca nodc 12.16 y se descarga, se da clic para ejecutar, se

aceptan los términos, una vez ya instalado, el paso numero 2 se abre la consola
nodc y se utiliza el coman npm para hacer la instalación global, se selecciona la
carpeta en la que queremos guarda, el tercer punto es realizar la aplicación.

es un framework para aplicaciones web desarrollado en TypeScript, de código

abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones
web de una sola página. Su objetivo es aumentar las aplicaciones basadas en
navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo
para hacer que el desarrollo y las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas

adicionales, entonces obedece a las directivas de los atributos personalizados, y
une las piezas de entrada o salida de la página a un modelo representado por las
variables estándar de JavaScript.

Angular se basa en clases tipo "Componentes", cuyas propiedades son las usadas
para hacer el binding de los datos. En dichas clases tenemos propiedades
(variables) y métodos (funciones a llamar).

Programación de angular

En visual studio code, y se ejecuta en la carpeta app ya generada, en angular todo

está basado en componentes, es una pieza abstracta o pieza de funcionalidad que
se resume en un bloque, por eso angular es bastante potente. Para crear un
componente se escribe engine y la palabra componente y se genera
automáticamente una carpeta llamada home. Para decirle a angular que se diriga
a home rápidamente, hay comando llamado route, en el cual se asigne
automáticamente.

Servicios en angular

Servicios en angular para poder conectarnos en nuestros servicios, ahora nos

conectaremos a nuestro proyecto de netcore, si no esta permitido el acceso
cruzado, se necesita configurar en standup un atributo de solo lectura y que sea
tipo string, y dirigiré al apartado de servicios, y se agrega la política para que la
parte del servicio se conecte a varios partes, al igual que el atribute builder, que al
igual se define a cuáles sitios se puede tener acceso.

Desde angular se hace la conexión, es importante que el backend este ejecutando

correctamente. Con visual studio core, se hace un servicio para manejar
información que será solicitada por los componentes, aquí el servicio será para los
backends, se especifica que la solicitud sea para el appi, y se creara el servicio, y
dentro se encuentran dos archivos que se pueden eliminar ya que solo es para
hacer pruebas. Lo primero que se ve en servicio en type cript Inyectable, La
inyección de dependencias es un patrón de diseño de software usado en la
Programación Orientada a Objetos, que trata de solucionar las necesidades de
creación de los objetos de una manera práctica, útil, escalable y con una alta
versatilidad del código.

En la mayoría de los frameworks actuales se aplica la Inyección de dependencias

como parte de las herramientas y modelos que facilitan al programador. Como
cualquier patrón de diseño de software trata de solucionar de una manera
elegante un problema habitual en el desarrollo de software, por lo que también es
idóneo utilizar este patrón en el desarrollo de proyectos a pequeña escala.

Se analiza que en postman tiene tres atributos éxito, mensaje y data, estos se
quieren representar en angular de modelo, para que angula ya se tenga una
carpeta de base o molde, estos atributos los tiene el objeto.

Directiva ngFor

Hay que hacer que en angular se ve la información, lo primero que se hace en

angular es refactorizar el código, en la carpeta service se tiene el código que
funciona bien, pero el response es el que tiene angular por default, y hay que
indicar que use el de nosotros, nuestros modelos de la interface. Hay que utilizar
el método para que la respuesta del método clientes nos regrese los elementos ya
guardados en nuestra clase. Se crea un variable publica any, lo que hará es
guardar el resultado de nuestra solicitud, la directiva ngFor es la que se encarga
de presentar una lista de elementos en pantalla de una forma sencilla combinando
el concepto de bucle y plantilla. Esta directiva soporta muchas opciones, permite
iterar un array, objeto, etc. normalmente con el fin de insertar cada uno de los
elementos contenidos en su interior.
Solicitudes http post

Como insertar datos desde angular al servicio, pero antes en .net se tienen que
agregar dos cosas, una nueva línea en le métodos post para que nos acepte
todos, para que se vea un poco más presentable el controlador de clientes hacer
un order by, y la forma en que se desea ordenar.

En el proyecto de angular, se corre para que este en ejecución y se compile, como

se insertaran datos, en la tabla clientes, se crea una nueva interface para darle s
los campos que tiene, sirve para interactuar con los datos, se agrega también en
el archivo appi cliente, así como también propiedad en los encabezados, se crea
una constante http option y se declara como objeto, así ya se tienen las
propiedades de htp option esto sirve que para cuando se haga la solicitud se
mandan sus encabezados y para el método que haga este trabajo es un add
objeto llamado cliente en la interface ya hecha, se hace interacción con el
método, que es la misma ruta solo que va por post, se recibe la respuesta en
donde entre paréntesis se agrega la URL, asi ya se completa la inserción.

El método HTTP POST envía datos al servidor. El tipo del cuerpo de la solicitud es
indicada por la cabecera Content-Type.

La diferencia entre PUT y POST es que PUT es idempotente: llamarlo una o varias
veces sucesivamente tiene el mismo efecto (no tiene efecto secundario //
colateral), mientras que varios POST idénticos pueden tener efectos adicionales,
como pasar una orden muchas veces.

Una solicitud POST es tipicamente enviada por un formulario HTML y resulta en

un cambio en el servidor. En este caso, el tipo de contenido es seleccionado
poniendo la cadena de texto adecuada en el atributo enctype del elemento <form>
o el atributo formenctype de los elementos <input> o <button> :

Cuando la solicitud POST es enviada por otro método distinto a un formulario

HTML — por ejemplo mediante una XMLHttpRequest — el cuerpo puede aceptar
cualquier tipo. Como se describe en la especificación HTTP 1.1, el método POST
está diseñado para permitir un método uniforme que cubra las siguientes
funciones:

Modificación de recursos existentes.

Publicar un mensaje en un tablón de anuncios, grupo de noticias, lista de correos,

o grupos similares de artículos;

Agragar un nuevo usuario a través de un modal de suscripciones;

Proveer un conjunto de datos, como resultado del envío de un formulario, a un

proceso data-handling.

Extender una base de datos a través de una operación de concatenación.

Ng Model

El modelo trabaja con los datos, así que podemos entender que el enlace creado
con ngModel permite que desde la vista pueda usar un dato. Sin embargo, con
expresiones ya se podía usar un dato, volcando su valor en la vista como {{dato}}.
La diferencia es que al usar ese dato en campos de formulario, debes aplicar el
valor mediante la directiva ngModel.

Sin embargo, el componente no funcionaría todavía, porque Angular en principio

no reconoce ngModel como propiedad de un campo INPUT de formulario. Por ello,
si se ejecuta tu aplicación con el código tal como hemos hecho hasta ahora,
obtendrás un mensaje de error como este: "Can't bind to 'ngModel' since it isn't a
known property of 'input'." La solución pasa por traernos esa propiedad, que está
en el módulo "FormsModule". Para ello tenemos que hacer la operativa tradicional
de importar aquello que necesitamos. En este caso tendremos que importar
FormsModule en el módulo donde vamos a crear aquel componente donde se
quiera usar la directiva ngModule.
La clase MatDialogConfignos permite definir muchas opciones de configuración.
Además de los dos que hemos anulado, aquí hay algunas otras opciones de
Diálogo de material de uso común: hasBackdrop: define si el cuadro de diálogo
debe tener un fondo de sombra, que impide que el usuario haga clic en el resto de
la interfaz de usuario mientras se abre el cuadro de diálogo (el valor
predeterminado es verdadero) panelClass: agrega una lista de clases CSS
personalizadas al panel de diálogo backdropClass: agrega una lista de clases CSS
personalizadas al fondo del cuadro de diálogo position: define una posición
absoluta inicial para el diálogo. Por ejemplo, esto mostraría el diálogo en la
esquina superior izquierda de la página, en lugar de en el centro

Método put y delete

Se hace el método put y delete desde angular solicitándolo al método servicie,

desde donde se tienen la políticas del corts, desde le proyecto angular de visual,
en la carpeta models y al archivo cliente, en este interface s agrega un nuevo
elemento en el id model, para que al editar tenga el mismo elementos, desde el
archivo appi, se agregan dos métodos el editar y el eliminar, se copia el mismo
métodos en ambos, pero el id eliminar en URL hace diferente el proceso, ya
teniendo eso, se cambia en la URL.

Hasta ahora con lo que sabemos podemos usar los servicios para leer y escribir
datos, pero simulados o guardados en la memoria del navegador, para leer o
escribir de una API REST tenemos que hacer llamadas HTTP.

Por cierto, una API es un conjunto de endpoints (o rutas) que provee un servidor
(backend) que permiten acceder a datos o realizar operaciones. Normalmente lo
que se suele hacer es primero generar una API en un servidor usando un lenguaje
como Java o Python (ojo porque no puedes generar una API con Angular, tiene
que estar creada en un servidor).

GET: Simplemente devuelven información.

POST: A estos endpoints se envía información normalmente para crear o ejecutar
acciones sobre recursos en bases de datos.

PUT: Se envía información al endpoint y se modifica en base de datos un recurso.

DELETE: Para borrar recursos del servidor.

Autentificación JWT en .Net Core

Ahora nos enfocaremos en el web service, pero la URL de nuestro servicio se

puede acceder a los datos, por eso hay que implementar la autentificación, se
creara una tabla de usuarios en la base de datos.

El JWT es un estándar de seguridad para peticiones HTTP incluido en el

documento RFC 7519, en el cual se define un mecanismo para poder propagar
entre dos partes de forma segura la identidad de un usuario indicando diferentes
valores asociados a él. La información está codificada en un objeto JSON que se
introduce en el cuerpo del mensaje HTTP que se envía. Actualmente las
aplicaciones están alojadas en diferentes dominios y servidores o incluso en
teléfonos inteligentes como en el caso de las aplicaciones móviles. Para poder
enviar y recibir información entre sí de forma rápida, segura y estándar, se utilizan
servicios REST que trabajan sobre el protocolo HTTP y carecen de estado.

Para poder autenticar un usuario o aplicación, este envía una petición a una
dirección URL específica informando de todos los datos necesarios para ello
(normalmente usuario y contraseña). El API recibe esa información y valida si los
datos son correctos. En caso de que la validación sea exitosa, genera un token y
lo devuelve al solicitante para que este lo guarde y posteriormente lo envíe en
cada una de sus peticiones.

Utilizar este tipo de autenticación en nuestras APIs nos abre un amplio abanico de
posibilidades a la hora de consumirla desde cualquier parte. Es utilizada en apps,
webs e incluso servicios de integración de datos.

Proteger rutas Guard

Se debe tener el servicio corriendo, principalmente el Guard son interfaces que
ayudan a decir al enrutador si debe permitir la solicitud de la URL funcionan como
true o false, hay que modificar para decir si no se tiene una credencial de acceso
te mande a login, y si se tiene te permita acceder. Los guards pueden ser
extensibles para que permitan acceder bajo las condiciones que nosotros
queramo, podemos incluso hacer peticiones a un backend antes de que el usuario
entre en la página.

Dentro de los guards hay 4 tipos principales:

CanActivate: Mira si el usuario puede acceder a una página determinada.

CanActivateChild: Mira si el usuario puede acceder a las páginas hijas de una

determinada ruta.

CanDeactivate: Mira si el usuario puede salir de una página, es decir, podemos

hacer que aparezca un mensaje, por ejemplo, de comfirmación, si el usuario tiene
cambios sin guardar.

CanLoad: Sirve para evitar que la aplicación cargue los módulos perezosamente si
el usuario no está autorizado a hacerlo.

Los guards se implementan para ser inyectandos por lo tanto tenemos que usar la
etiqueta Inyectable, como si fuera un servicio. Si necesitas saber como crear
servicios te recomiendo un artículo anterior que escribí sobre este tema

Los guards devuelven true o false para permitir el paso o no de un usuario a la

ruta. También pueden devolver un Observale o una Promise si el guard no puede
responser inmediatamente y tiene que esperar.

Lo primero que hacemos es poner la etiqueta Injectable, como hemos dicho antes,
y a continuación, creamos la clase con el nombre que queramos y implementamos
de CanActivate. LLamamos al constructor con las dependencias que necesitemos,
en este caso, el authService para recuperar el user que esté logueado, y el router,
para redirigir al usuario a la página de inicio en caso de que no esté logueado.
Después llamamos al método canActivate() y hacemos la comprobación. si el
usuario no está logueado lo llevamos a la página de inicio con router.navigate y
devolvemos false. Si esta logueado, devolvemos true.

Para que funcione, tenemos que importar el guard en el app.module.ts, en la

sección providers.

Si lo que queremos es que todas las páginas hijas de una ruta estén protegidas lo
que tenemos que hacer es cambiarle un par de cosas del guard. EL guard ahora
no implementará de CanActivate sino de CanActivateChild, y el método de dentro
de la clase, como es obvio, también cambiará a CanActivateChild(). El resto de
cosas del guard se mantienen.

Para usar este guard para todos los hijos hacemos lo mismo que antes (añadiendo
el guard en el componente padre), añadiéndolo a la ruta, pero esta vez el campo
de la ruta se llamará canActivateChild.

Cambiando lo que hemos hecho antes por CanDeactivate o por CanLoad

podemos usar este tipo de guards.

Lo bueno de los guards de Angular es que puedes crear varios para usarlos en
varias rutas. Además, si quieres usar varios guards en la misma ruta, también
puedes hacerlo, simplemente separando los guards con una coma.

Para crear el login se crea una nueva carpeta login component y dentro se crean
dos archivos, en el app routing hay que mandarlo al login component, después se
tiene que crear la clase.
Interceptors y local storage

Lo primero se hace en local storage, activar el servicio, después ir a postman y se

ejecuta el método de login, regresa un objeto, este tiene elementos, pero el
principal es el data, este se guardara en el local storage en el navegador para
tener la credencial que nos autoriza poder entrar sin necesidad de logearnos

El objeto Storage (API de almacenamiento web) nos permite almacenar datos de

manera local en el navegador y sin necesidad de realizar alguna conexión a una
base de datos. En este artículo te mostraré cómo utilizarlo mediante JavaScript.

LocalStorage y sessionStorage son propiedades que acceden al objeto Storage y

tienen la función de almacenar datos de manera local, la diferencia entre éstas dos
es que localStorage almacena la información de forma indefinida o hasta que se
decida limpiar los datos del navegador y sessionStorage almacena información
mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la
información se elimina.

Después en postman se abren los métodos y se pueden mandar todos los

servicios, pero hay una forma en donde se puedan interceptar todas las colicitudes
http y si hay un usuario logeado anexar el atributo de autorización.

inspecciona/modifica las peticiones, osea, lo que va de tu aplicación al servidor y

tambien lo que viene del servidor a tu aplicación. En pocas palabras, la petición y
respuesta. Sabiendo que son los interceptors, podemos ir al ejemplo de uso.

Para crear nuestro interceptor, tenemos que generar un servicio usando el CLI de
angular. Una vez creado el servicio implementa la interfaz HttpInterceptor y otras
clases extras que se encuentran en ‘@angular/common/http.

Una vez hecho todo eso implementaremos la parte en que nuestro interceptor
agrega la cabecera ‘Authorization’ con el token que vayamos a usar, como modo
de ejemplo, imaginemos que tenemos el token almacenado en localStorage con la
clave ‘token’ y para obtener el token tendremos que hacer lo siguiente:
localStorage.getItem(‘token’).
ahora declaramos una constante que guarde el token obteniendolo del
localStorage. El token puede o no existir en nuestro localStorage, y para no estar
enviando la cabecera ‘Authorization’ vacía, condicionamos si existe algún token,
posteriormente si existe un token, modificamos el request agregándole la
cabecera, utilizando el método clone que viene en nuestro request de tipo
HttpRequest y pasándole la cabecera con el token. una vez modificado el request
lo retornamos de nuestro método.

Ahora bien, hay que recordar que los interceptors se ejecutan en cada petición
que se realiza al servidor, siempre y cuando sean registrados. Para registrar un
interceptor se tiene que proveer en el array de providers: [] en nuestro módulo raíz,
por lo general AppModule. Importamos HTTP_INTERCEPTORS y
HttpClientModule, luego proveémos nuestro interceptor.

Otra cosa que podríamos realizar en nuestro interceptor sería redirigir al usuario a
la página de login cuando el token haya expirado o no tenga un token válido por
ejemplo.

Modificaremos nuestro interceptor un poco, importando el operador catchError de

rxjs, que recibe un método que va a revisar el status de la respuesta que el
servidor nos devuelve. Cuando detectemos que el status es 401, hacemos la
redirección a la vista de login, de igual manera el servicio Router e injectarlo en el
constructor para utilizarlo y hacer la redirección.

Introducción a formularios y reactivos

Los formularios son indispensables estos permiten tener control de los elementos
o inputs. Los formularios basados en plantillas utilizan el “FormsModule”, mientras
que los formularios reactivos se basan en “ReactiveFormsModule”. Los formularios
basados en plantillas son de naturaleza asincrónica, mientras que los formularios
reactivos son en su mayoría sincrónicos. En un enfoque basado en plantillas, la
mayor parte de la lógica se basa en la plantilla, mientras que en el enfoque basado
en reactivos, la lógica reside principalmente en el componente .

Primero ejecutamos los comandos del CLI para crear un componente para los
formularios mediante plantillas y para formularios reactivos. No hay que olvidarse
de importar los componentes y el módulo para los formularios Reactivos
(ReactiveFormsModule) en el módulo correspondiente, en este caso sin aplicar
LazyLoading lo hago en el propio app.module.ts para centrarnos en los formularios
únicamente.

Rxjs utilizando Observables

Varios Observables es una tarea habitual en RxJs ya que todo es un Observable,

y por tanto va a ser necesario trabajar con diversos Observables al mismo tiempo.
RxJs dispone de operadores pensados para mezclar, transformar y combinar
varios Observables en uno solo.

Trabajar con varios Observables al mismo tiempo, es una de las tareas más
truculentas en RxJs como veremos a lo largo del post, pero vamos por partes.
RxJs posee distintos operadores de combinación, que nos permiten coger los
valores emitidos por distintos Observables y combinarlos, dando como resultado
un único Observable, mucho más fácil de manejar.

Los operadores de combinación, es una de las partes que, en ocasiones, más

cuesta entender sobre RxJs ya que existen una amplia diversidad de operadores
de combinación, donde, además, cada uno de ellos aplica unos criterios diferentes
y, por tanto, el Observable resultante y sus valores, pueden variar de forma
drástica de un operador a otro.

Merge es un operador de combinación que combina dos o más Observables en

uno solo y no introduce ningún tipo de modificación o alteración en el orden
temporal en que los valores de cada uno de los Observables fueron emitidos.

Concat es otro operador de combinación, pero a diferencia de merge, que

combina los valores en el mismo orden que fueron emitidos, concat espera a que
el primer Observable emita su complete (representado por la línea vertical), para
suscribir al otro y comenzar a recolectar sus valores. CombineLatest es otro
operador de combinación y que combina los valores emitidos por los distintos
Observables, suscribiéndose a los distintos observables al mismo tiempo y
devolviendo todos sus valores agrupados por el último valor de cada uno de los
Observables en un Array

json en el backend en C#

Regresaremos al backend para hacer inserción de la venta, esta se compone de

una tabla maestra y un detalle, en este caso seria el total, para el momento de
requerir un reporte acceder a los datos más fácilmente.

Para tratar en C# el resultado anterior, estaremos de acuerdo en que lo mejor

sería almacenar cada uno de los datos como una propiedad en una clase. En este
caso he decidido llamar a la clase Meteorologia, pero esta clase no la vamos a
crear nosotros a mano, sino que se creará de manera automática siguiendo estos
pasos:

Vamos a realizar una petición a la API, por ejemplo desde el navegador, para
copiar la respuesta que nos da. Vamos a entrar en json2csharp y vamos a copiar
la respuesta de la API. Le damos al botón de generar, para que nos cree la clase o
clases necesarias para mapear cada uno de los campos del JSON, en
propiedades de las clases. Copiamos el código de las clases resultantes en Visual
Studio, teniendo en cuenta que renombraremos la clase RootObject, con el
nombre que nosotros queramos usar, en este caso Meteorologia. Yo normalmente
renombro las propiedades para que tengan la primera letra en mayúsculas, pero
esto es una cuestión de estilo y no es obligatorio.
Entity Framework en C#

Estas transacciones manejadas desde el backend la transacción trata de consultar

varias, y que tenga la posibilidad de que si hay errores regresar a la base de datos
para volver a estar como estaban anteriormente, las cuales se pueden utilizar en
entity framework.

Las transacciones son útiles cuando hablamos de base de datos y debemos hacer
muchas consultas en conjunto, ya que nos permiten realizar un retroceso en la
manipulación de datos si una de las consultas del conjunto falla.

Con Entity Framework es posible realizar transacciones, y no solo eso, sino que
podemos tener el poder de realizar otras funciones distintas a manipulación de
datos y decidir si fallan estas otras funciones aplicar un rollback.

Refactorización utilizando Inyección

Como se ha hecho controlador de venta, cuando se quiere esa funcionalidad en

otro controlador, si solo se copia y se pega, la consecuencia es que se tendría que
modificar en dos lugares, en .net core, se puede hacer más fácil con los principios
solid. El principio de la letra D es que los objetos no tengan dependencia entre
ellas, y para eso la inyección de dependencia.

La inversión de dependencias es un principio que describe un conjunto de técnicas

destinadas a disminuir el acoplamiento entre los componentes de una aplicación.
Es uno de los principios SOLID más populares y utilizados en la creación de
aplicaciones, frameworks y componentes por las ventajas que aporta a las
mismas.

La inversión de dependencias suele también conocerse como inversión de control.

En inglés, los términos más frecuentemente utilizados son "dependency inversion",
abreviado como "DI", e "inversion of control" o simplemente "IoC".
Muy resumidamente, el Principio de Inversión de Dependencias propone evitar las
dependencias rígidas entre componentes mediante las siguientes técnicas:

Utilizar abstracciones (interfaces) en lugar de referencias directas entre clases, lo

que facilita que podamos reemplazar componentes con suma facilidad.

Hacer que una clase reciba referencias a los componentes que necesite para
funcionar, en lugar de permitir que sea ella misma quien los instancie de forma
directa o a través de factorías.

La inyección de dependencias es una de las técnicas utilizadas para implementar

el principio de inversión de dependencias. Nos abstraemos de implementaciones
concretas mediante el uso de interfaces. No nos importarán los tipos concretos
que lleguen al constructor como dependencias, siempre que cumplan los contratos
definidos por sus interfaces. Por ejemplo, para la interfaz INotifier podría llegarnos
la clase EmailNotifier que usábamos en el ejemplo anterior, o bien una instancia
de TwitterNotifier o MobilePushNotifier; nos da igual, lo importante es que
dispongan del método NotifyAdmin(), que es lo que en realidad usamos de ellas.

Validaciones de modelos en el backend en MVC .Net

En este caso es con los data notations, son utilidades que da el framework para
validar los modelos, en este caso el principal de ventas, para que el id venga. El
estado del modelo representa errores que provienen de dos subsistemas: enlace
de modelo y validación de modelo. Los errores que se originan en el enlace del
modelo son generalmente errores de conversión de datos. Por ejemplo, se ingresa
una "x" en un campo de número entero. La validación del modelo se produce
después de la vinculación del modelo y notifica errores en los que los datos no se
ajustan a las reglas comerciales. Por ejemplo, se ingresa un 0 en un campo que
espera una calificación entre 1 y 5.

Tanto el enlace del modelo como la validación del modelo se producen antes de la
ejecución de una acción de controlador o un método de controlador de Razor
Pages. Para las aplicaciones web, es responsabilidad de la aplicación
inspeccionar ModelState.IsValidy reaccionar adecuadamente. Las aplicaciones
web suelen volver a mostrar la página con un mensaje de error

La validación es automática, pero es posible que desee repetirla manualmente.

Por ejemplo, puede calcular un valor para una propiedad y desea volver a ejecutar
la validación después de establecer la propiedad en el valor calculado. Para volver
a ejecutar la validación, llame a ModelStateDictionary.ClearValidationState para
borrar la validación específica del modelo que se está validando seguido de
TryValidateModel.
Conclusión

En este trabajo como se presentó es el proceso que se llevó a cabo para la

realización de un sistema de ventas mediante SQL server y visual studio.
Principalmente se define que es un sistema de ventas este el proceso por el cual
pasa un cliente, desde que se encuentra en la etapa de prospección hasta que se
convierte en una cliente adoptada. Puede ser considerado como un sinónimo de
proceso de ventas.
Contar con un sistema efectivo de ventas contribuye la experiencia que tiene tu
cliente al relacionarse con tu marca o producto, es decir que pierdas las ventas.
También se le puede denominar sistema de ventas, al software utilizado para
gestionar las relaciones con tus clientes, el cual sirve para organizar la información
de tus contactos en prospectos, oportunidades y clientes.
En la medida en que existan varios tipos de empresas, todas ellas requieren un
sistema de gestión de ventas designado. Por ejemplo, las instalaciones de
alimentos y bebidas tienen un sistema automatizado de ventas especializado que
no satisfará las necesidades de la organización financiera. Por eso es necesario
saber a qué industria se aplicará este software. Pero, a partir de ahora, un sistema
automatizado de ventas de este tipo solo tiene demanda en audiencias
específicas.
Bibliografía

https://www.youtube.com/watch?
v=b5iZ2cJyIi0&list=PLWYKfSbdsjJghGaiXPs3fbuZWk2EDdNZf