Programación

Avanzada

Carlos Arteaga Rodríguez

Adrian Villalba Lemus
Héctor Mendoza Quiroz
Graciela Sánchez Pérez
Objetivo

Conocer el desarrollo de aplicaciones web

responsivas con:
● ASP.NET Core MVC 3.1.
 Aplicación WEB

Aquellas aplicaciones que los usuarios pueden utilizar

accediendo a un servidor web a través de:

Internet ó una intranet

mediante un navegador
 Las aplicaciones web son populares
● Navegador web como cliente ligero

● Facilidad para actualizar y mantener aplicaciones

● Independencia del sistema operativo

● Sin distribuir e instalar software a

miles de usuarios potenciales.
Cliente Servidor
¿Que necesitamos en el desarrollo Web?

● Lenguaje de cliente (JS)

● Diseño (CSS)
● Marcado (HTML)
● Acceso a datos (SQL)
● Lenguaje de servidor (C#)

Actualmente el mercado solicita desarrolladores Full Stack

 Futuro

● Aplicaciones PWA (aplicaciones web

progresivas)
● JavaScript como lenguaje de moda
● Aplicaciones multi-tier (Multicapas)
Diseño Web Responsivo o “Responsive Web Design” en ingles

es un término que se refiere

a la capacidad de que un
sitio o diseño web se adapte
al tamaño de cualquier
dispositivo (smarphone,
tablet, laptop o
computadora de escritorio).
 ¿Qué es .Net Core?

 Marco de desarrollo para crear aplicaciones web en general

 .NET Core es una implementación de .NET Standard para uso general
 Modular
 Multiplataforma
 Código abierto
 Desarrollo flexible

 Contiene muchas de las API’s de .NET Framework (aunque .NET Core es un

conjunto más pequeño), e incluye componentes de entorno en tiempo de
ejecución, marco de trabajo, compilador y herramientas que admiten diversos
sistemas operativos y diferentes procesadores.
 ¿Qué es ASP.NET Core MVC 3.1 ?

ASP.NET Core es un framework iniciado por Microsoft multiplataforma

de código abierto y de alto rendimiento para crear aplicaciones
vinculadas a Internet, como App o API’s Web.

Se diseñó para el desarrollo optimizado de aplicaciones que se

implementan en la nube y/o se ejecutan en las instalaciones del cliente.
 ASP.NET Web Forms vs ASP.NET Core MVC

ASP .NET

● Nace en el 2002.
● Desarrollar aplicaciones web equivalente al de escritorio.
● Se mantiene el estado de la aplicación.
● La curva de aprendizaje es baja.

INCONVENIENTES

● Soporte solo a plataformas Windows

● Framework monolítico (en un solo lugar)
● Mayor consumo de memoria
● Ciclos de lanzamiento muy largos (+ código)
ASP.NET Web Forms vs ASP.NET Core MVC

ASP .NET Core MVC

● Usa el patrón de diseño MVC (Modelo-Vista-Controlador).

● Inyección de dependencias. (carga solo lo que requieres)
● Canalización de solicitudes a través de un middleware (asistentes).
● Licencia Apache 2.0 (código abierto).
● Multiplataforma (Linux, windows, mac).
● Mayor control sobre tu proyecto.

INCONVENIENTES

● Cambio radical al modelo Web Forms.

● Curva de aprendizaje medio en caso de no dominar POO
● Actividades sencillas en Web Forms son involucran más acciones.
 ¿Que es el patrón de arquitectura MVC?

Las siglas MVC representan las palabras “Modelo – Vista – Controlador” o (model – view –
controller en inglés). De forma simple, se trata de una estructura que define ciertos componentes
de una aplicación y la forma en la que estos se comunicarán entre ellos.

Fue diseñado en los años 70 para el lenguaje smalltalk

Este patrón recomiendo dividir la aplicación en 3 partes

Patrón.- es una forma de resolver un tipo de problema específico y que se ha demostrado como un
abuena práctica de solución.

En pocas palabrar: Utilizar las mejores prácticas que otros desarrolladores han implementado
 ¿Que es el patrón de arquitectura MVC?

Modelo: contiene los datos de la

aplicación y toda la lógica de negocio
(Clases).

Vista: Contiene información

sobre cómo debe mostrarse la Controlador: es el
información del modelo. Por componente encargado
ejemplo un archivo HTML o un
de gestionar la
archivo CSHTML (páginas de
HTML dinámicas con código presentación del modelo
c#). (datos) y las vistas
(interfaz). Es decir, el
Se limita a presentar los datos y controlador decide qué
recibir los que introduzca el modelo y que vistas se
usuario
presentarán al usuario.
(Intermediario C#)
Flujo de MVC
Aplicación típica de Internet
 Flujo de middleware para procesar un requierimiento

Una vez que el requerimiento entra al servidor es procesado por un

conjunto de componentes que se denominan “MIDDLEWARE”

Un middleware recibe toda la información de un requerimiento, lo

procesa y lo pasa al siguiente componente, esto crea un flujo de
middleware que permite aplicar todas las operaciones necesarias
¡¡¡Lo que tanto esperaban!!!
 Nuevo proyecto Visual Studio 2019

1 2

3
 Nuevo proyecto Visual Studio 2019

4 5

6
 Estructura del proyecto ASP.NET Core

Cuando creamos un proyecto utilizando la

plantilla MVC se construye la estructura del
proyecto y los archivos necesarios para el
correcto funcionamiento de la aplicación
 Estructura del proyecto ASP.NET Core
<proyecto>.csproj Representa la configuración y versiones y
librerias

Los proyectos de .NET Core son un programa de

4 consola que crea un servidor web. En este
programa se define como iniciar el servidor web.

Carpeta donde se almacenan los archivos estáticos para la aplicación, archivo tales
como archivos de estilos, scripts, etc. Se genera dentro de la raiz, tambien esta la
carpeta lib

Carpeta donde se almacenan los controladores

Carpeta donde se almacenan los modelos

Carpeta donde se almacenan las vistas Te permite configurar

aspectos básicos de tu
Archivo JSON de configuración de
dependencias, contiene variables que aplicación como la cadena
pueden ser recuperadas en tiempo de de conexión a tu base de
ejecución.
datos, log de errores,
Clase que pre-carga y configura los servicios para
dar apoyo a la aplicación, una vez ejecutados los
Clase principal de la aplicación , es el punto de seguridad, propiedades
inicio, incluye método Main se ejecuta al inicio
métodos de esta esta lista para empezar a recibir y se encarga de hacer la configuración inicial y personalizadas, etc.
requerimientso y enviar respuestas. de regustrar los servicios a utilizar
 Estructura del proyecto ASP.NET Core
1 Cada controlador (Home) tiene su propia clase
(HomeController) dentro de la carpeta Controllers

Controlador
3 El segundo parámetro es la acción (Privacy) y
este tiene su método dentro de la clase controller
5 La línea
, este devuelve return
un objeto View();y indica que se va a
IActionResult
renderizar
renderiza la vista, si no de
la vista Privacy.cshtml tiene parámetros se buscará
la carpeta
Home quede está
forma predeterminada
contenida un archivo
en la carpeta Views cshtml con el
mismo nombre, en este caso va a buscar la carpeta
Views la carpeta Home y la vista Privacy.cshtml

4 Cada controlador tiene su propia carpeta para las

vistas dentro de la carpeta Views

2 Los controladores empiezan con el nombre seguido

de la palabra Controller
 Los controladores
Son el punto central de la aplicación y los que definen lo que se ejecuta en
nuestro sitio, un controlador:

 Recibe un requerimiento
 Selecciona la acción a ejecutar
 Recupera los datos enviados
 Ejecuta lógica
 Retorna un resultado

5
 Los controladores
Desde un punto de vista funcional:

Es un punto de acceso a nuestra aplicación que recibe el requerimiento y se situa entre el modelo y la
vista y es responsable de orquestar el flujo de datos.

Desde un punto de vista de código:

Es una clase que contiene una serie de métodos que llamamos “Acciones” que reciben un
requerimiento y retornan una respuesta.

En MVC la vista y el modelo son en escencia pasivos,

el usuario NO invoca una página sino un método() dentro de un controlador

el controlador invocado ejecuta y decide la que muestra al usuario.

5
Generar nuevo controlador, acción y vista

5
Generar nuevo controlador, acción y vista
Se importa el namespace donde se incluye la clase Controller

2
4

Hereda de la clase base “Controller”

Generar nuevo controlador, acción y vista

2
4
Generar nuevo controlador, acción y vista

4
 Las Acciones
Dentro de un controlador vamos a tener una o más acciones.

Las acciones van a definir las operaciones que los usuarios podrán ejecutar contra los objetos de
nuestro modelo.

Tendra los siguientes elementos:

 Nombre
 Parametros de entrada
 Tipo de resultado (Lo habitual es que retornemos una
vista en cuyo caso el tipo sería “ViewResult”. Si el tipo a
4
devolver puede variar se utilizaran el tipo genérico
“IActionResult”)
 Cuerpo código que recibe los valores de los paramétros,
los procesa y devuelve un resultado.
 Paso de variables a las vistas

En el controlador Venta agregar la acción Bienvenido

Generar la vista de Bienvenido y modificar el cshtml con lo siguiente

4
 Tipos devuelto por las acciones
Una acción es capaz de devolver una gran cantidad de diversos resultados, lo cual las convierte
en una herramienta muy flexible para las aplicaciones.

Entre los posibles resultados de la invocación de una acción tenemos:

4
Hipervínculos en MVC
En el controlador Home agregar la acción Registro y generamos la vista correspondiente y
modificamos el código a la siguiente forma

En la vista Bienvenido.cshtml agregamos el siguiente código:

4
Hipervínculos en MVC

4
 Bootstrap v4

● Bootstrap es un framework de CSS que nos facilita y estandariza el

desarrollo de sitios y/o aplicaciones web.
● Está pensado para que se adapte tanto a las pantallas de equipos de
escritorio como a móviles y tablets.
● Bootstrap es desarrollado y mantenido por la empresa Twitter y la
ha liberado como un producto Open Source.
● Tiene una filosofía muy intuitiva para el maquetado de sitios web
que puede ser rápidamente asimilada.
● La versión estable actual es la 4.x
● El corazón de este framework es un archivo CSS que lo podemos
descargar del sitio http://getbootstrap.com.
 Bootstrap v4

Bootstrap está formado por 2 archivos (un CSS y JS) y necesita de dos librerías JS adicionales (jQuery, popper)
para funcionar, para usarlo en nuestros proyectos de desarrollo tenemos dos formas:

● Cargar Bootstrap en nuestro servidor lo cual nos da el control de la versión que estamos utilizando.
● Usar un CDN el cual nos proporciona un proveedor externo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
Sistema de grid

● Bootstrap maneja un total de 12 columnas y 4

resoluciones base: xs, sm, md, lg.
IActionResult
Operador ?