¡Hola buenas madrugadas! ¡Antes de empezar quisiera desearles unas felices fiestas! En segundo lugar, el presente tutorial va para nuevos desarrolladores que inician con éstas tecnologías como también para desarrolladores con algo de experiencia en el tema a quienes espero poder compartir algo nuevo. Como el tema es amplio, lo he dividido en 3-4 bloques, que será publicados entre hoy 24 de diciembre 2018 y mañana, tan pronto como los finalice.

Este post va para colaborar al primer calendario de adviento de C# en español:

https://aspnetcoremaster.com/c%23/advientocsharp/2018/11/16/Calendario-adviento-csharp.html 

Quisiera dejar en claro que este post está fuera de “CosmosDB” y de Azure por lo que vamos a jugar de manera local.

Herramientas

  • Base de Datos: PostgreSQL, si nunca habían escuchado de esta base de datos, les recomiendo averiguar y dejarse sorprender por su poder. Datos de vital importancia: es Open Source, tiene más de 30 años en desarrollo y corre sobre Windows, GNU/Linux y Mac OS. Ahora bien, para administrar PostgreSQL, existen varias herramientas como la que trae by default, HeidiSQL, en este caso optamos por Dbeaver.
  • DotNetCore 2, vamos a usar el gran e ilustre SDK y el runtime.
  • Entity Framework Core 2
  • NodeJS que trae NPM y con esto instalaremos VueJS.
  • Visual Studio Code, sí, esta vez vamos a jugar con los comandos como buenos informáticos que somos. ¿Sale? Si adoran Visual Studio, también les va a funcionar, anímense a experimentar si no lo han hecho antes.
  • POSTman, esta es una gran herramienta que todo desarrollador web debe conocer sí o sí, en caso sea la primera vez que la escuchas (o lees), te presento la manera en que vamos a probar nuestras peticiones al servidor, dicho en el buen spanglish: vamos a ver las request al server mediante GET/POST/PUT/PATCH/DELETE y demás verbos HTTP.

Una recomendación que les doy, es utilizar ConEMU, es una terminal para Windows, es el CMD con algunas características adicionales, lo pueden descargar desde aquí: https://conemu.github.io/ Puede ser instalada o simplemente ejecutada como App Portable.

Descargamos e instalamos

¡Iniciamos!

Versión instalada del dotnetcore: 2.2.101

image

Versión del nodeJS: 10.14.2 y el npm: 6.5.0 aquí tuve que actualizar la versión que tenía (6.4.1) mediante el comando:

npm install npm -g

image

¿Y qué vamos a desarrollar?

Haremos un mantenedor (CRUD) vía WebAPI

¡Manos a la obra!

Como buenos desarrolladores, tenemos una carpeta llamada “Dev” en la raíz de la partición del disco duro de nuestra preferencia, esto para evitar rutas demasiado largas que potencialmente podrían generar problemas… (Quien lleve tiempo desarrollado lo entenderá perfectamente). En este caso “C:\Dev” tengo una carpeta llamada “AdvientoCsharpDic2018”.

Ejecutamos el comando

dotnet new –l

Este comando nos muestra todas las plantillas que tenemos disponibles

image

Como disfruto mucho enseñar desde cero, vamos creando una plantilla vacía (ASP.net Core Empty) mediante el comando:

dotnet new web

En versiones anteriores se tenía que realizar un restore, ¿recuerdan? Microsoft, el equipo de DotNet y la comunidad nos facilitan la vida. Cabe mencionar que desde que MS lanzó DotNet como Open Source, desarrolladores a nivel mundial han colaborado con la mejora y evolución del framework.

image

Ahora vamos con todo el power de ASP.net Core 2!! Gracias al nuget

https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.Core/

Usamos el comando:

dotnet add package Microsoft.AspNetCore.Mvc.Core --version 2.2.0

image

Esto es lo que tenemos en nuestro archivo Startup.cs:

Antes de continuar, vamos ejecutando nuestra aplicación mediante el comando:

dotnet run

Dando como resultado:

image

Se ejecuta en localhost con HTTPS en el puerto 5001 y en HTTP en el puerto 5000.

Consideren que utilizo Firefox Developer Edition:

image

Y si vemos lo que hay en nuestro

image

El siguiente paso es agregar una carpeta llamada wwwroot donde colocaremos la carpeta css con nuestras hojas de estilo, la carpeta scripts con sus archivos .js

En esta ubicación creamos un index.html y le colocamos lo que queramos:


Ejecutamos nuevamente con dotnet run, vamos a http://localhost:5000/index.html y… ¿seguimos viendo el Hello World? ¡Verdad pues! tengo que eliminar del archivo startup.cs esas 3 líneas, quedando de esta manera:

Le damos otro dotnet run ¡ahora que seguro funciona! Vamos a ver qué onda, qué sale al ir a http://localhost:5000/index.html

¿Generando una pantalla blanca?

image

Como esto no parece funcionar, las preguntas a pensar son: ¿Por qué? ¿Qué le hace falta? ¿Sobra algo? Sea como sea, entramos en modo Sherlock Holmes, vamos a las developer tools (F12) o click derecho en la pantalla, inspeccionar elemento y nos dirigimos a network

image

Ahora tiene sentido, el archivo no se encuentra (Error 404). Momento, ¿acaso no habíamos colocado ese archivo index.html en el wwwroot de donde se supone que debería funcionar? Esto nos genera otra pregunta “¿Falta algo en la configuración del startup.cs?” ¡AFIRMATIVO! ¿Cómo le decimos al framework que haga uso de archivos estáticos? Así:

app.UseStaticFiles();

Le damos otra vez: dotnet run y obtenemos:

image

¡Bien! ¡Ahora vamos por MVC! Teoría super compacta:

  • Model: Los datos, es una clase con atributos/propiedades.
  • View: Donde podremos ver el resultado.
  • Controller: Responsable de manejar la petición al servidor y aplicar la lógica.

Creamos 3 carpetas en la raíz de nuestro proyecto, al mismo nivel de startup.cs:

  • Controllers
  • Models
  • Views

Dentro de Controllers, creamos HomeController.cs quedando de esta manera:

image

En el index.cshtml y en about.cshtml, contienen un “<p>Index!<p>” y “<p>About!</p>” respectivamente, esto es sólo para darles una idea cómo se generan las vistas.

Ojo, es importante que los nombres de las acciones se encuentren dentro de la carpeta Views/<nombre del controlador>/<nombre de la acción>.cshtml ésta extensión .cshtml es de Razor, un motor de vistas. Hace unos años redacté sobre el tema junto con el mítico WebMatrix, quienes deseen darle una lectura, aquí el link: http://fredyfx.com/post/tutorial-microsoft-webmatrix-sintaxis-razor/

Regresando al tema, una vez hecho lo anterior mencionado, agregamos en nuestro startup.cs, justo después de la línea app.UseStaticFiles();

app.UseMvc();

Le damos nuevamente dotnet run:

image

Respiramos hondo, dejamos de lado el ego, mantemos la buena vibra con nosotros, evitamos maldecir, evitamos golpear el teclado, respiramos hondo y nos preguntamos ¿qué faltó? ¡Ya sé! Hay que dar un “build” y luego un “run”:

image

Excelente, Build succeeded! Vamos por: dotnet run

image

Uno de los errores más comunes de todo programador es ignorar lo que dice el error…

Aquí nos está diciendo que tenemos que agregar todos los servicios requeridos llamando ‘IServiceCollection.AddMVC’ dentro de la llamada hacia “ConfigureServices(…)” en el código inicial de la aplicación, en este caso el ilustre startup.cs //El inglés abre muchas puertas, portones, ventanas y hasta nos dice dónde está la salida en caso de emergencia “Exit”, por eso apréndelo, usa Duolingo, EngVid.com, Memrise.com y clases gratis en YouTube, haz que YouTube te eduque en tus ratos libres. Sí se puede.

Entonces, para solucionar esto, necesitamos ir al Startup.cs y colocar lo que menciona, de esta manera:

Ahora sí, en teoría ya debería funcionar, sí, tal y como estás pensando, dotnet run a éstas alturas, es muy probable que tengas ciertas dudas con respecto a que si saldrá o no, este tutorial es muy particular, aparte de ayudar a entrenar tu paciencia y pulir tus habilidades de detective, hay algo que debo preguntarte: ¿Sabes cómo funciona el “ruteo”, ”routing” en ASP.net MVC?

Si conoces la respuesta, dame un momento mientras explico a quienes se quedaron en silencio y/o dijeron que desconocen:

En cada petición que se realiza con este framework, se tiene la siguiente URL de manera general: Controlador/Acción/Parámetros donde los parámetros son opcionales dependiendo si mandas vía querystring o si están en el body.

¿Y dónde se realiza la configuración del “routing”?  ¡En el startup.cs por supuesto! Ese archivo es vital para nuestra aplicaciones ASP.net (core) MVC.

Ejecutamos y veamos qué onda resulta en el localhost:5000/

image

image

¿Y si vamos al about? http://localhost:5000/home/about

image

¡La primera parte de este tutorial ha sido completada! En la parte 2 veremos cómo agregar un modelo, al cual le haremos un CRUD vía Entity Framework Core 2 con la base de datos PostgreSQL. Usando POSTman enviaremos las peticiones a la aplicación y en la parte 3 de este tutorial le agregaremos VUEjs.

Otro detalle que quisiera compartir con ustedes, si están buscando más información de ASP.net MVC, hice un maratónico workshop en vivo de 4 horas de la versión 5 (con .net framework full) y Entity Framework 6, que lo pueden encontrar en: http://fredyfx.com/post/material-workshop-aspnet-mvc-5/

De la misma manera, quisiera invitarlos a darle play a este webcast que se realizó el pasado 15 de diciembre, sobre la mentalidad del buen desarrollador de software y cómo los fundamentos nos permiten evolucionar rápidamente, link:  http://fredyfx.com/post/webcast-en-vivo-mentalidad-del-buen-desarrollador-de-software/

Si tienen dudas, sugerencias, quejas o ganas de compartir la buena vibra de diciembre, estaré contento de leer sus comentarios. ¡Que tengan una buena madrugada! Felices fiestas, gracias por su atención y paciencia. Hasta más tarde, tengo que completar las 2 partes siguientes de esta serie de tutoriales Open-mouthed smile