DotVVM es un marco de trabajo de código abierto de ASP.NET que nos permite crear aplicaciones web utilizando el patrón de diseño MVVM (Modelo Vista Vista-Modelo) empleando C# y HTML.
¿Deseas saber más sobre DotVVM? Para ello puedes revisar su página oficial en: www.dotvvm.com.
En este tutorial aprenderemos como trabajar con DotVVM a través del editor de código fuente de Microsoft: Visual Studio Code. Estos son los contenidos:
- DotVVM en el entorno de Visual Studio Code.
- Trabajando con DotVVM en Visual Studio Code.
- Trabajando con paquetes NuGet en Visual Studio Code.
- Plus: Despliegue de aplicaciones DotVVM con ASP.NET Core en Azure desde Visual Studio Code.
1: DotVVM en el entorno de Visual Studio Code
Para trabajar con DotVVM desde Visual Studio Code es necesario contar con las siguientes herramientas:
- .NET Core SDK 3.1 para trabajar con ASP.NET Core: https://dotnet.microsoft.com/download/dotnet-core/3.1.
- Visual Studio Code: https://code.visualstudio.com/.
- DotVVM for Visual Studio Code: https://marketplace.visualstudio.com/items?itemName=TomasHerceg.dotvvm-vscode
Para el despliegue de aplicaciones web con DotVVM también necesitaremos la siguiente extensión:
- Azure App Service: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice.
Adicionalmente también podemos agregar la extensión de C# para funcionalidades como la de IntelliSense (función de autocompletado), entre otros:
2: Trabajando con DotVVM en Visual Studio Code
Al trabajar con Visual Studio Code siempre estaremos empleando comandos para la realización de una acción determinada. Para crear una nueva terminal nos dirigimos al menú principal y creamos una nueva.
DotVVM es un entorno de trabajo que funciona sobre ASP.NET Core, por lo cual, el comando base será dotnet.
Para nuestros propósitos, emplearemos el comando dotnet para crear aplicaciones web con DotVVM, ejecutar las aplicaciones y generar los archivos necesarios para desplegarlos en Azure.
El comando de partida es aquel que nos permite obtener información sobre todas las operaciones que podemos realizar con .NET: dotnet --info.
Crear una nueva aplicación ASP.NET Core con DotVVM
Cuando instalamos el SDK de .NET Core, recibimos una gran variedad de plantillas integradas para crear proyectos y archivos, incluidas las aplicaciones de consola, bibliotecas de clases, proyectos de prueba unitaria, aplicaciones de ASP.NET Core (incluidos los proyectos Angular y React), y archivos de configuración. Para enumerar las plantillas integradas que tenemos disponibles, podemos ejecutar el comando dotnet new con la opción --list. Los resultados son los siguientes:
Para poder crear aplicaciones del tipo DotVVM debemos agregar la plantilla respectiva, para ello podemos ejecutar el siguiente comando:
dotnet new --install DotVVM.Templates::*
Al ejecutar nuevamente el comando dotnet new -- list podemos verificar que la plantilla de DotVVM ha sido agregada correctamente:
Con esto, lo que nos resta es crear un nuevo proyecto a través del comando:
dotnet new dotvvm
Este proceso tomara unos cuantos segundos:
Al finalizar, los archivos del nuevo proyecto DotVVM serán creados:
Ejecutar un proyecto DotVVM en Visual Studio Code
Ahora que hemos creado el proyecto, lo primero que podemos hacer como primera actividad es ejecutar el proyecto. Para ello empleamos el siguiente comando:
dotnet run
Al ser la primera vez en compilar y ejecutar el proyecto, este proceso puede tomar un tiempo. Las siguientes veces el tiempo será menor, todo dependerá de las dimensiones y los componentes que se empleen en el proyecto. Cuando el proceso de complicación termine, tendremos disponibles las rutas de acceso para visualizar la aplicación web:
Resultado:
3: Trabajando con paquetes NuGet en Visual Studio Code
Cuando trabajamos en el desarrollo de aplicaciones web, en muchas ocasiones necesitaremos adicionar unidades de código reutilizable, conocidos como paquetes NuGet, para la implementación de alguna funcionalidad en específico.
Pongamos un ejemplo. Como desarrolladores de soluciones web, necesitamos implementar una pagina web para el manejo de estudiantes, en el cual, se puedan agregar, modificar y eliminar a los mencionados estudiantes, en otras palabras, realizar operaciones CRUD (Crear, Leer, Actualizar y Borrar) sobre la entidad de un estudiante.
Para cumplir con los objetivos del ejemplo, es necesario instalar los siguientes paquetes NuGet para poder trabajar con la base de datos y con la elaboración de los servicios respectivos:
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.SqlServer
Para administrar los paquetes NuGet de nuestro proyecto DotVVM, es necesario utilizar los comandos (CLI) de dotnet.
Para agregar un paquete NuGet utilizaremos el siguiente comando:
dotnet add package <PACKAGE_NAME>
O el siguiente comando en caso de que deseemos especificar la versión también:
dotnet add package <PACKAGE_NAME> -v <VERSION>
Para listar los paquetes NuGet asociados al proyecto, es necesario emplear el siguiente comando:
dotnet list package
El resultado al momento de listar los paquetes NuGet asociados al proyecto en DotVVM es este:
La ejecución con dotnet run de este caso de estudio es el siguiente:
El código fuente de este ejemplo lo puedes encontrar en el siguiente repositorio en GitHub: DotVVM Sample CRUD.
4: Plus: Despliegue de aplicaciones DotVVM con ASP.NET Core en Azure desde Visual Studio Code
Como plus adicional de este artículo, aprenderemos como desplegar un proyecto DotVVM con ASP.NET Core en Visual Studio Code. Para esto, es necesario tener instalado el complemento mencionado inicialmente: Azure App Service for Visual Studio Code.
Al instalar la extensión de Azure, se nos solicitara identificarnos con nuestra cuenta de Azure.
Como primer paso para el despliegue, es necesario preparar los archivos necesarios para este proceso. Para ello empleamos el siguiente comando:
dotnet publish
El resultado es el siguiente:
En este caso, en la línea de comandos se nos indica en donde han sido creados estos archivos, en este caso en: \bin\Debug\netcoreapp3.0\publish\.
Lo que nos resta por hacer es dirigirnos a la carpeta Publish, presionar clic derecho y seleccionar la opción: Deploy to Web App.
A continuación, se presentará un pequeño cuadro emergente en el cual se nos pedirá especificar el recurso App Service para desplegar la aplicación. También se puede crear un nuevo recurso desde cero.
Una vez que el despliegue hacia Azure haya concluido, un mensaje emergente en Visual Studio Code nos indicara que el proceso ha terminado y que podemos visualizar la pagina web publicada.
En este caso, el resultado de esta publicación es similar al ejemplo del sistema de estudiantes mencionado anteriormente, pero ya en Azure:
¿Qué sigue?
Con lo aprendido en este artículo, ya podemos trabajar con el desarrollo de aplicaciones web con el entorno de trabajo DotVVM con ASP.NET Core en Visual Studio Code. A continuación, se encuentran algunos recursos adicionales que pueden ser de utilidad:
¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM en Visual Studio 2019? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.
¿Quieres dar tus primeros pasos en el desarrollo de aplicaciones web con ASP.NET Core y DotVVM? Aprende más en este tutorial: DotVVM y ASP.NET Core: Implementación de operaciones CRUD.
¿Deseas conocer todo lo necesario para el despliegue de aplicaciones web con ASP.NET Core y DotVVM en Azure? Aprende más en: Despliegue de aplicaciones web DotVVM y .NET Core en Azure.
Cualquier inquietud no dudes en escribirme.
Nos vemos en Twitter!! :)
Top comments (0)