Aplicación ASP .NET CORE
A lo largo de este post, explicaré un ejemplo de cómo crear una aplicación ASP .NET CORE ¿Que es «ASP .NET CORE?
Es una nueva plataforma, escrita desde cero con varios objetivos en mente, siendo los principales:
- Más ligera : Nuestra aplicación se distribuya exclusivamente lo que necesitemos, no la plataforma completa.
- Multi-plataforma: las aplicaciones que creemos funcionarán en Windows, Linux y Mac, no solo en el sistema de Microsoft.
- Alto rendimiento: no es que .NET tradicional no tuviese rendimiento. ASP NET Core está pensada desde el principio con esto en mente tiene un desempeño mas alto que la versión tradicional. Lo cual es muy importante para entornos Cloud, en donde esto se traduce en mucho dinero al cabo del tiempo. Compatible: NET Core es compatible con .NET Framework, Xamarin y Mono, mediante .NET Standard.
- Código abierto: la plataforma NET Core es de código abierto, con licencias de MIT y Apache 2. NET Core es un proyecto de .NET Foundation.
- Lenguajes : Se Pueden utilizar en C# ,Visual Basic y F#
- Pensada para la nube: Se diseñó a finales de los años 90 el concepto de nube ni siquiera existía para la nube.
Sabiendo que es .NET Core vamos a empezar con nuestra aplicacion.
Nos creamos un nuevo proyecto CORE para ello vamos a
Archivo-Nuevo-Proyecto
Saldrá una nueva pestaña como esta.
Seleccionamos ASP.NET CORE Web aplicación.
- Nombre – ponemos el nombre que le damos al proyecto.
- Ubicación – la ubicación donde guardaremos el proyecto.
A continuación y le damos a ok para continuar.
Nos aseguramos que en la parte de arriba pone .NET CORE y la versión con la que vamos a trabajar (cada versión dispone de una serie de características para ello mirar la documentación) y marcamos Empty (Un proyecto vacío).
Tardará un poco y nos aparecerá esta pantalla.
En la parte de la derecha tenemos una ventana Solución Explorer donde nos aparece información de la aplicación que nos ha creado.
Ahora nos creamos las siguientes Carpetas.
- Controller.
- Repository.
- View.
- Shared
Lo siguiente que haremos será crear una interface y una clase dentro de la carpeta repository.
Agregar-Nuevo Item y seleccionamos Class luego posteriormente creamos la Clase.
La llamaremos RepositoryBingo y ahora vamos con la interface. La misma operación, pero seleccionamos interface.
Nos aparecerá esta pantalla la vamos a modificar.
A continuación vamos a crear la clase RepositoryBingo y copiamos el siguiente código.
Implementamos los métodos para ello nos situamos en la bombilla, le damos a implementar interfaz.
Se genera los métodos.
Sustituimos los métodos.
Despues nos creamos un controlador, encima de la carpeta de controler le damos a Agregar-Controller.
Seleccionamos controlador en Blanco.
Y le damos un nombre en mi caso será HomeController.
Aparecerá esta pantalla.
Dentro del Controlador Agregaremos las siguientes paginas.
Crearemos las vistas con la herramienta predeterminada de Microsoft, nos vamos a al nombre y pulsamos botón derecho para que nos de las opciones y pinchamos en agregar vista.
Estructura de todas las vistas creadas.
Remplazamos el código de cada una.
Index
Cartones
Partida
Reglas
Añadiremos tres más.
- _ViewImports.
- Esta Vista sirve para definir los objetos que utilizaremos.(luego no se pondrán en las paginas)
- _ViewStart.
- Indicamos la plantilla por defecto.
Y dentro de la carpeta Shared.
- _Layout
- Es la plantilla donde cargaremos las demás paginas web manteniendo siempre la cabecera .
Para poner una plantilla nos vamos a la pagina web de https://getbootstrap.com/ y nos descargamos la ultima versión.
Nos aparecerá la abajo a la Izquierda el archivo descargado lo descomprimimos y arrastramos las carpetas a wwwroot.
Wwwroot contendrá todos los ficheros CSS, JavaScript e imágenes que visualizaremos en nuestra web.
Añadimos una carpeta nueva a wwwroot llamada images y guardaremos una imagen.(Utilizada en index)
Depués ir a la página de https://getbootstrap.com/ seleccionamos Examples para poder copiar una plantilla.
Una vez elegida la plantilla le damos a Ctrl+ U o botón derecho ver el código fuente. Copiamos todo y lo pegamos a nuestra página de Layout. Hay mas archivos que tenemos que copiar a nuestro proyecto . Pinchamos en lo amarillo y dentro de la página le damos a botón derecho guardar como y lo arrastramos a la carpeta de CSS.
Nos vamos la siguiente pagina https://jquery.com/ y nos descargamos la ultima Version
Lo guardarnos y lo arrastramos a la carpeta de js.
Añadimos un nuevo CSS a la carpeta de CSS con el siguiente código llamado site.css.
Sobre la carpeta botón derecho agregar-nuevo Item- web -hoja de estilos
Añadimos un Fichero JavaScript a la carpeta JS llamado site.js.
Sobre la carpeta botón derecho agregar-nuevo Item- web -Archivo JavaScript
Nos tiene que quedar con esta estructura en la carpeta wwwroot
Procedemos a modificamos la plantilla de Layaout de esta manera.
Procedemos a Configurar el motor Principal de la aplicación, vamos a Startup.
Configuramos los servicios.
- Utilizamos la Inyección de dependencia con services.AddTransient.
- Configura todo lo anterior.
Nota: Lo que estamos haciendo es incluir una capa middleware de comportamiento antes de cargar la aplicación.
- Le indicamos que cargue todos los ficheros que tiene la carpeta wwwroot
- Le indicamos que la pagina de inicio de la aplicación es Índex Y esta en Home
Y eso seria todo amigos. Animo y no desesperéis
Autor/a: Rubén Blázquez Camacho
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Enlace a GitHub: Aplicaion Asp Net Core