OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Se agrega sección al final del curso donde se aborda la migración de la solución a Net 6
A partir de un diseño básico visual, se pretende partir para comprender como realizar peticiones al servidor bajo distintos contextos y como manipular la información de respuesta. Así como plantear diversas soluciones ante problemas comunes como es el generador de reportes.
Modelaremos una autenticación con JWT, así como la configuración de un menú en función a los roles.
Modelaremos un motor de estados para trabajar con una solicitud y estableceremos acciones para cada rol para así, darle seguimiento.
Se agrega sección al final del curso donde se aborda la migración de la solución a Net 6
A partir de un diseño básico visual, se pretende partir para comprender como realizar peticiones al servidor bajo distintos contextos y como manipular la información de respuesta. Así como plantear diversas soluciones ante problemas comunes como es el generador de reportes.
Modelaremos una autenticación con JWT, así como la configuración de un menú en función a los roles.
Modelaremos un motor de estados para trabajar con una solicitud y estableceremos acciones para cada rol para así, darle seguimiento.
Construiremos un tablero de gráficas con d3.js para consultar información
Deseando sea de tu interés, te invito a que tomes el curso y aprendas como estructurar una solución en el patrón MVC utilizando Net 5 como framework de desarrollo
Conceptos a cubrir:
- Conocer como trabajar con Chart.js e integrar a un proyecto
- Centralizar peticiones AJAX y hacer consultas al servidor de diversas maneras
- Integrar jsPDF para descarga de PDF desde la vista y generación de un visor de vista previa.
- Construir una alternativa del mapa del estado de la república, manipular cada estado y asociarle eventos y estilos
- Implementar un servicio de descarga de PDF a partir de un contenido HTML y SVG con WKHTMLTOPDF
- Utilizar domToImage para transformar un objeto del DOM en una imagen y así materializarlo en un PDF (manipulación de elementos CANVAS y SVG)
- Generar las tablas de una base de datos a partir de migraciones con Code First
- Generar las clases de una aplicación con el método Database First
- Manipulación de un elemento del ViewBag desde código JavaScript
- Utilización de íconos con Fontawesome
- Utilización de Datatables para ejemplificar un paginador de vista y contraponer sus bondades y desventajas contra un paginador de servidor
- Peticiones AJAX detonadas desde el evento change de un selector
- Creación de una bandeja principal, envío de un modelo desde una acción a una vista parcial
- Creación de una clase Paginador para generalizar la consulta al Back
- Integrar un modal con SweetAlert2, SweetAlert y Bootstrap
- CRUD de un pedido
- Construcción de un Login e integración de JWT, integración de claims, renovación de token
- Configuración del menú principal desde Base de datos
- Filtros de solicitudes con reglas de negocio asociadas a la configuración del usuario
- Generación de un archivo Excel con ClosedXML
- Generación del publicado (publish)
- Despliegue en un Administrador de Internet Information Services (IIS)
Instalación de SQL Server Management Studio
Liga de descarga: https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15
Instalación de Visual Studio 2022. Se puede trabajar desde la versión VS 2019
Liga de descarga: https://visualstudio.microsoft.com/es/
Un tip es poder utilizar la velocidad de reproducción para ir a un ritmo más acorde a nuestras necesidades
Instalación de la herramienta SQL Server 2019, se puede trabajar con cualquier otra versión
Liga de descarga: https://www.microsoft.com/es-mx/sql-server/sql-server-downloads
Explicación sobre Net Core
Explicación de Net 5
Liga de descarga: https://dotnet.microsoft.com/en-us/download/dotnet
Panorama sobre el desarrollo de la biblioteca de gráficos interactivos
Liga oficial de ChartJs:
https://www.chartjs.org/
Liga de ejemplos:
https://www.w3schools.com/ai/ai_chartjs.asp
Ejemplo de algunas gráficas comunes con ChartJs
https://www.w3schools.com/ai/tryit.asp?filename=tryai_chartjs_lines
https://www.w3schools.com/ai/tryit.asp?filename=tryai_chartjs_bars_colors_more
https://www.w3schools.com/ai/tryit.asp?filename=tryai_chartjs_pie
Objetivo: Familiarizarse con las definiciones de ChartJs
Creación de la aplicación con la plantilla Aplicación web de ASP .NET Core (Modelo-Vista-Controlador) y Framework .Net 5.0
Explicación sobre el patrón de diseño MVC
Enlace para integrar ChartJs: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js
Objetivo: Conocer como integrar ChartJs a un proyecto
Explicación sobre los tipos de objetos ViewBag, ViewData y TempData
Ejemplo sencillo de como utilizar los objetos de comunicación de información a la vista
Explicando la importancia de Ajax
Función que centraliza el envío por petición AJAX
Enviando información desde el servidor con JsonResult
Objetivo: Petición de información al Back con AJAX y utilizar ViewBag desde JavaScript
Petición completa al servidor con AJAX
Pruebas de vulnerabilidad con Postman
Liga: https://www.postman.com/
Ejemplo básico de una petición al servidor para descargar un PDF utilizando FileResult
Objetivo: Descarga de un archivo con un servicio desde el Back
Explicación sobre jsPDF
Liga: https://parall.ax/products/jspdf
Ejemplo completo con una función centralizada para la descarga del PDF
Objetivo: Integrar jsPDF para descarga de un gráfico construido en un elemento Canvas
Se anexa código con avance el proyecto
Explicación sobre lo que se pretende en esta sección
Explicación sobre d3.js
Liga: https://d3js.org/
Ejemplo sencillo de una gráfica con d3.js que presenta texto en posiciones aleatorias
Liga: http://bl.ocks.org/ericcoopey/6382449
Explorando sintaxis de d3.js
https://www.tutorialsteacher.com/d3js
https://www.tutorialsteacher.com/codeeditor?cid=d3-16
Ajustes visuales al proyecto
Ejemplo de implementación con Tooltip
Variante de gráfica con d3.js que posiciona texto en forma aleatoria
Construcción de la gráfica de totales por estado del pedido
Al terminar la lección, el alumno será capaz de construir una tabla dinámica con jQuery a partir de un arreglo de objetos en JavaScript
Construcción de la tabla dinámica de la gráfica de totales por estado del pedido
Al terminar la lección, el alumno será capaz de enlazar eventos onmouseover, onmouseout y tooltip entre distintos elementos y/o asociarlos a un elemento del DOM
Enlazando eventos en la gráfica de totales por estado del pedido
Se revisará como asociar eventos onmouseover, onmouseout y tooltip en gráfica de totales por región
Adaptaremos gráfica de la siguiente pagina: https://embed.plnkr.co/plunk/cvmKAl
Gráfica de totales por estado de la República Parte 2
Gráfica de Totales por región y estado
Gráfica de resultados por grupos
Utilizaran los mismo servicios
Construcción de la gráfica de la República Mexicana a partir de coordenadas TopoJson
Construcción de la gráfica de la República Mexicana a partir de coordenadas TopoJson Parte 2 - Agregar eventos
Reflexión y retrospectiva sobre distintas implementaciones para la construcción del mapa de la República Mexicana
Introducción al conversor WK<HTML>TOPDF
https://wkhtmltopdf.org/
Configuración del archivo appsettings.json para las rutas de WKHTMLTOPDF
Construcción de la lógica de negocio para la generación del archivo PDF a partir de la invocación de un proceso de Windows
Objetivo: Implementar un servicio de descarga de PDF a partir de un contenido HTML con WKHTMLTOPDF
Implementar un servicio de descarga de PDF a partir de un contenido HTML con WKHTMLTOPDF
Liga:
https://fontawesome.com/
Objetivo: Integración de elementos con FontAwesome
Agregar botonera para descarga de PDF y tratamiento de información en base 64
Peticiones AJAX para la descarga del PDF
Objetivo: Generar descarga de un PDF y un visor para el mismo
Generación de un visor PDF utilizando window.open
Utilizar domToImage para transformar un objeto del DOM en una imagen y así materializarlo en un PDF
Liga:
https://www.npmjs.com/package/dom-to-image
Utilizar domToImage para transformar un objeto del DOM en una imagen y así materializarlo en un PDF
Generación del archivo PDF utilizando jsPDF
Objetivo: Generar un PDF desde la capa de presentación con elementos texto e imagen
Ajustes al proyecto para que los reportes no excedan la dimensión de la pantalla
Explicación del modelo inicial en Base de Datos
Creación de la base de datos Pedidos desde la herramienta Microsoft SQL Server Management Studio
Configuración de las credenciales de conexión a Base de Datos en la aplicación:
Conexion: "Data source=server\\SQL2019;Initial Catalog=PedidoBD;user id=sa; password=XXX;MultipleActiveResultSets=true"
Configuración de los servicios para DbContext en archivo Startup
Creación del proyecto de Persistencia
Comandos de instalación para Entity Framework Core:
dotnet add Persistencia package Microsoft.EntityFrameworkCore --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.Tools --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.SqlServer --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.Design --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.Tools --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.SqlServer --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.Design --version 3.1.1
Se agrega documento en caso de que no aparezca plantillla de biblioteca Net Core para poder crear el proyecto a partir de la biblioteca de clases (Proyecto para crear una biblioteca de clases para .NET o .NET Standard) y posteriormente seleccionar el Framework .Net 5.0
Creación del proyecto de Persistencia
Comandos de instalación para Entity Framework Core:
dotnet add Persistencia package Microsoft.EntityFrameworkCore --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.Tools --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.SqlServer --version 3.1.1
dotnet add Persistencia package Microsoft.EntityFrameworkCore.Design --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.Tools --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.SqlServer --version 3.1.1
dotnet add Pedidos package Microsoft.EntityFrameworkCore.Design --version 3.1.1
Modelado de las entidades iniciales: Pedido, CatEstadoRepublica, CatEstadoPedido, CatRegion, creación del proyecto de Dominio
Para la creación de la tabla con un script: scriptTotal.sql
Migración inicial y poblado de catálogos: CatEstadoRepublica, CatEstadoPedido, CatRegion
Comandos para la generación de la migración
Add-Migration Inicial
Update-database
Objetivo: Generar las tablas de una base de datos a partir de migraciones con Code First
Explicación sobre cómo se poblará la tabla de Pedidos con datos ficticios
Generación de la aplicación de consola con Net Core e introducción al modo de trabajo con Database First
dotnet add package Microsoft.EntityFrameworkCore --version 3.1.1
dotnet add package Microsoft.EntityFrameworkCore.Tools --version 3.1.1
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 3.1.1
dotnet add package Microsoft.EntityFrameworkCore.Design --version 3.1.1
Comando: dotnet ef dbcontext scaffold "Server= DESKTOP-QT0N32M\SQL2019;Database=PedidoBD;user id=sa; password=loveAdrian; MultipleActiveResultSets=true" Microsoft.EntityFrameworkCore.SqlServer -o Models
Codificación del servicio para el guardado de solicitudes
Creación del proyecto de Servicios
Servicio para la consulta de los estados de la República, creación de la capa de Transporte
Se utiliza el objeto ViewBag para conectar el controlador con la vista
Creación del servicio para integrar los totales por estado del pedido
Objetivo: Manipulación de un elemento del ViewBag desde código JavaScript
Se utiliza peticiones AJAX para conectar el controlador con la vista
Se agrega un selector de pedidos para filtrar en el mapa de la República utilizando una vista parcial y enviando un model a dicha vista
Creación de la vista parcial para presentar el selector de estados del pedido
Servicio para la presentación del selector de estados del pedido
Objetivo: Implementar peticiones AJAX para invocar una vista parcial. La vista parcial recibe un model con la cual construye un selector
Integración del selector de estados del pedido y la vista parcial de los estados de la República Mexicana
Objetivo: conocer cómo hacer peticiones AJAX detonadas desde el evento change de un selector
Integración de las tablas DetallePedido y CatProducto
Ejecutar a nivel Persistencia
Add-Migration detallePedido
Update-Database
Objetivo: Actualizar las clases con el método Code First
Poblado de la tabla DetallePedido y Pedido
Comando: dotnet ef dbcontext scaffold "Server=nameserver;Database=Pedidos;user id=username; password=XXX; MultipleActiveResultSets=true" Microsoft.EntityFrameworkCore.SqlServer -o Models -f
Explicación de cómo obtener los scripts de los objetos de una base de datos y a partir de ellos, poblar una BD limpia. Otra alternativa al Restore y Backup
Construcción del servicio que consulta los registros para mostrar en la Bandeja Principal
Construcción de la consulta y vista parcial para presentar la bandeja de resultados
Objetivo: Creación de una bandeja principal, envío de un modelo desde una acción a una vista parcial
Ejemplo de un paginador de vista con DataTables. Todo lo que la librería ofrece como componente final, nosotros lo podemos realizar con un poco de pericia
Enlace: https://datatables.net/
Explicación de la clase Paginador y la clase ModeloPaginador
Objetivo: Creación de una clase Paginador para generalizar la consulta al Back
Construcción de un Footer de un paginador genérico para reutilizarlo en otras tablas paginadas
Objetivo: Invocar una vista parcial desde otra y enviarle un modelo, generalizar el footer para el paginado de una tabla
Creación de la función NucleoConsulta para reutilizar la consulta de la Bandeja de resultados y paginarlos
Paginador completo desde el servidor
Creación de filtros para la bandeja principal
Objetivo: Agregar filtros a la bandeja principal
Creación del servicio para la consulta de estados del pedido
Aplicación de filtros para la bandeja principal
Objetivo: Aplicar filtros de consulta a una bandeja principal con Linq
En la sección 18 se retomará el tema de renombrado de CatPerfil por CatRol
Recordemos que el Rol es el nombre que se le confiere al conjunto de perfiles que le son asignados al usuario para el ejercicio de sus funciones. ¿Qué es un Perfil? Es la descripción detallada de las posibles transacciones que puede realizar un usuario en el sistema.
Se acotó el alcance del curso y ya no hubo necesidad de meter perfiles. Por dicha razón, en la sección 18 se hará el renombrado sin tener impacto en la funcionalidad.
Este es un ejercicio interesante para revisar como realizar renombrado de tablas sin afectar la funcionalidad actual
Explicación del motor de estados que se utilizará en el transcurso del curso
Migración para la tabla MotorEstadoPed y CatPerfil (roles)
Poblado de tablas MotorEstadoPed y CatPerfil (roles) a partir de un script
Creación de la consulta de opciones para el pedido en función de su estado
Objetivo: Aplicar un motor de acciones para un pedido a partir de un motor de estados en Base de Datos
Eliminación física en Base de Datos del pedido. En la eliminación lógica, solo se marca el registro en BD con estatus inactivo (previamente creado dicho campo)
A partir de un motor de estados, actualizamos el estado de un pedido
Save
La migración a .NET 6 fue un añadido valioso.
Las explicaciones del instructor son claras y fáciles de seguir.
Cubre una variedad de herramientas y tecnologías importantes.
El curso destaca por sus ejemplos y aplicaciones reales.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
