¿Que vamos a aprender?

Al terminar todos estarán en capacidad de construir casi cualquier aplicación web básica, incluyendo el acceso a base de datos y la creación de vistas dinámicas con AJAX, el uso de GitHub para el manejo de repositorios, entre otras cosas interesantes que veremos.

Dependiendo del éxito que tenga la serie, continuaré con tutoriales sobre como personalizar bootstrap (css y less), como usar mongo para el desarrollo web, jQuery, React, Angular entre otros. Así que ya saben, si quieren más y les gustan estas cosas compartan y den like, es muy importante para mi saber que les interesa ver más de esto.

¿Por qué ASP.NET MVC?

Fui programador PHP y java durante un buen tiempo, pero después de conocer .NET lo he recomendado por su facilidad y potencial a todo el que puedo. Casi nadie ha seguido mi consejo, pero quiero que miren la longitud de este tutorial, ya que lo que hacen ahí en java con cientos de líneas de código, lo haremos hoy con apenas un par de instrucciones. Siempre que les muestro algo así a mis estudiantes, muchos me preguntan si no es mejor aprender primero lo difícil, dominar lo que es complejo antes que lo simple. Yo no digo que no. Recuerdo que cuando estaba aprendiendo a tocar guitarra muchas personas decían que era mejor aprender en una guitarra de poco presupuesto, de esas duras que te tallan los dedos, así luego pasar a una buena sería cosa fácil; mi maestro (y el maestro de él) decían que uno debía aprender en la mejor guitarra que pudiera comprar, ya que al ser más suave de tocar y tener un mejor sonido sería menos frustrante el proceso de aprendizaje y así las probabilidades de querer continuar serían mayores. Igual pasa con la programación, pueden empezar con algo difícil y aburrido, pero les aseguro que más de la mitad de ustedes estarán frustrados para cuando empiece la segunda lección (¿de verdad necesitamos todas esas líneas de código para que nuestro programa haga un par cosas?).

Dicho esto, la idea es mantener las cosas simples y claras. Una vez dominen los principales conceptos de la programación web, aprender otra herramienta es algo trivial. Por ejemplo, Node.js, Ruby on Rails y Django (Python) tienen muchas cosas similares a lo que veremos aquí. Eso, sin tener en cuenta toda la parte de html y jQuery que pueden usar sin problema en cualquier plataforma.

También quiero anotar que evitaré al máximo desgastarnos con teoría dejándoles hipervínculos de conceptos que pueden consultar si les surgen dudas sobre qué significa alguna palabra.

Así mismo, las herramientas que usaremos serán las que por defecto vienen con Visual Studio para el desarrollo con MVC, así evitaremos tener que realizar configuraciones adicionales. A saber: Entity Framework para la persistencia de datos, SQL Server como motor de base de datos, el motor de vistas Razor, jQuery para los scripts e Identity para la autenticación de usuarios. ¿Muchas cosas? No se preocupen, van a ver que todo viene preconfigurado para que empecemos a ser productivos desde el primer minuto.

Creando el primer proyecto

Lo primero será descargar versión 2015 de Visual Studio Community que es gratuita para equipos de hasta 5 personas. Pueden usar versiones más recientes, pero quizá puedan encontrarse con pequeñas diferencias con respecto a lo que aquí veremos, así que si es su primera vez en VS les recomiendo ceñirse a la versión en que fue escrito este tutorial, luego habrá tiempo de explorar lo nuevo; si en definitiva quieren usar una versión diferente, deben tener en cuenta crear los proyectos con ASP.Net, no con ASP CORE (eso sí, los conceptos que aquí veremos les servirán para ambas versiones). Antes de continuar, notarán que las capturas de pantalla del tutorial están en inglés, a mi me gusta trabajar las herramientas de desarrollo en ese idioma porque la mayoría de tutoriales son en inglés y porque las traducciones en español son bastante pobres, sin embargo, cualquiera sea el idioma que escogan podrán seguir sin problemas esta serie.

Por otro lado, es importante que al instalar tengan en cuenta lo siguiente:

  • Quiten TODO lo de programación móvil: pesa muchas gigas y luego cuando lo necesiten realmente lo pueden agregar abriendo otra vez el instalador.
  • Que activen las casillas Microsoft Web Developer Tools y SQL server data tools (en la versión 2015).

El programa tardará un rato descargándose y configurándose, así que pueden dejar sus máquinas prendidas en la noche. Lo importante es que al terminar la instalación automáticamente tendrán configurados los lenguajes, el entorno de desarrollo, el servidor de aplicaciones, el motor de base de datos y todo lo que necesitamos para desarrollar para la web, así que vale la pena la espera.

Una vez termine, abrimos el Visual Studio 2015 (NO el Blend for Visual Studio) y vamos a crear un nuevo proyecto como se ve en las siguientes tres imágenes.

Paso 1

Ir a File > New > Project.

Paso 2:

Escoger ASP.NET Web Application y ponerle un nombre al proyecto.

Paso 3:

Escoger MVC, asegurarse que en Authentication aparece Individual User Accounts y dejar lo demás sin chequear.

Una vez hayan hecho esto, Visual Studio generará el proyecto con la configuración básica y la estructura que se ve en la imagen. De momento las tres carpetas más importantes serán Models, Views y Controllers (MVC). Los modelos nos servirán para definir los datos con los que debemos trabajar en nuestra aplicación, las vistas nos permiten definir cómo mostrar los datos al usuario y los controladores son los encargados de recibir las peticiones de los usuarios y retornar, de momento, la vista con los datos correctos al cliente.

Empecemos por definir el modelo de datos.

El primer modelo

Vamos a crear algo sencillo en este primer tutorial, la idea es almacenar información básica de un videojuego. La parte que tocaremos hoy será únicamente programación en C#.

Paso 4:

Dar clic derecho en la carpeta Models y luego ir a Add > Class, y ponerle como nombre Videojuego. Luego de este paso se debe haber creado un archivo llamado Videojuego.cs en Models, como se ve en la imagen.

Paso 5:

Agregar las propiedades a la clase, para representar los datos de los videojuegos que vayamos a almacenar, en nuestro caso guardaremos un Id único que identificará cada uno de los juegos, su nombre, su descripción y una url con la imagen del juego (no directamente la imagen, sino la dirección de internet donde se encuentra). Por defecto la propiedad Id es la primary key.

Paso 6:

Dentro de la carpeta Models abrir el archivo IdentityModels.cs que contiene el DbContext de nuestra aplicación.

Paso 7:

Agregar la línea que aparece resaltada en amarillo, para que nuestro DbContext pueda trabajar con la representación de nuestro modelo en la base de datos.

Paso 8:

Compilamos la solución yendo al menú Build > Build Solution. Si no hay errores todo está listo para que generemos nuestros controladores y nuestras vistas (siempre se debe compilar para poder usar los generadores de código).

Generación de código

Aunque los generadores de código por defecto no van a realizarnos por arte de magia una gran aplicación, si que son una gran ayuda, ya que con un par de clics nos construirán automáticamente un CRUD para cualquier entidad de nuestro modelo. Es posible editar manualmente todo el código generado sin necesidad de meterse a cambiar los generadores de código en sí, así que si quieren poner algo en español o cambiar algún comportamiento, pueden hacerlo libremente. Esto es una gran ventaja, ya que no sólo nos ahorra tiempo, si no que mantenemos el mismo nivel de flexibilidad que al programar todo a mano.

¡Ahora, manos a la obra!

Paso 9:

Hacer clic derecho en la carpeta Controllers y en el menú desplegable ir a Add -> Controller. En la ventana que se abre escoger la opción que dice MVC Controller with views using Entity Framework.

Paso 10:

Escoger como modelo la entidad Videojuego que previamente creamos, en DataContext seleccionamos la única opción que aparece en el menú desplegable, ponemos como nombre VideojuegosController y hacemos clic en Add.

Paso 11:

Hacemos clic en ejecutar. Es posible que el botón de ustedes muestre otro navegador diferente al que aparece en la imagen, dependiendo del que hayan definido como predeterminado (o del que haya definido Windows 10 por ustedes).

Paso 12:

Modificamos la url que aparezca añadiendo "/videojuegos" al final (o el nombre que le hayan puesto al controlador -sin incluír la palabra Controller y sin importar si usaron mayúsculas o minúsculas). Es posible que su url no sea exactamente la misma mía, pero debe quedar algo así "http://localhost:xxxx/videojuegos", para ver lo que hemos generado.

¿Que hemos hecho?

Al final tenemos una aplicación que permite crear, editar y borrar videojuegos, los datos son almacenados directamente en la base de datos (y no tuvimos que ensuciarnos las manos con sql gracias al Entity Framework) y además tenemos un sistema de autenticación de usuarios que permite registrar una cuenta e iniciar sesión. Con un poco más de configuración podemos hacer que se validen las cuentas a través de emails o mensajes de texto, inicio con cuentas de facebook, twitter, google o microsoft (entre otros proveedores de identidad).

Voy a explicar brevemente como funciona el código que nos ha generado en los controladores. De momento no hablaremos de las vistas, ya que eso lo veremos en el próximo tutorial.

Sin más, abramos el en la carpeta Controllers el archivo VideojuegosController.cs y miremos qué tenemos.

En MVC todos los controladores heredan de Controller, que ya de por sí maneja un montón de cosas por nosotros. Tenemos un atributo db que es del mismo tipo que el DbContext que modificamos, de forma que puede manipular entidades de tipo Videojuego. Las acciones retornan un ActionResult.

En el código que se puede ver en la imagen está definido el Index (que es la acción que llamamos cuando pusimos "/videojuego" en la url), ésta lo único que hace es retornar una vista con un listado de los videojuegos. La instrucción db.Videojuegos.ToList() va hasta la base de datos, hace un select de todos los videojuegos y los mapea en la clase que definimos anteriormente, de forma que podemos manipular los datos como si de cualquier otra clase se tratase.

Más abajo en el controlador encontramos las acciones para crear, editar y borrar videojuegos. Miremos la opción crear (el resto quedan de tarea xD). Si observamos con atención, encontraremos dos acciones:

  • Una que no recibe ningún parámetro y funciona por Get: se ejecuta cuando el usuario hace clic en el botón crear nuevo (que lo redirige a la url "/videojuegos/create") y sólo muestra una vista vacía en la que aparecen los campos para llenar los datos del juego.
  • Otra que recibe un videojuego y que funciona por Post: se ejecuta cuando el usuario hace clic en guardar. Recibe los datos que ha ingresado el usuario para que sean almacenados en la base de datos. Si el modelo enviado es válido (luego podremos definir capos requeridos y ese tipo de cosas), añade el Videojuego al DbContext y guarda el cambio en la base de datos (aquí más info), realizando una operación insert por nosotros. Si el modelo no es válido retorna la misma vista con los datos que previamente llenó el usuario para mostrar el mensaje de error indicando qué campos debe corregir antes de poder guardar.

Como ven, todas las instrucciones son muy cortas y dicen por sí mismas qué está haciendo el programa.

Ahora, si quisieramos agregar un poco de seguridad a la aplicación y sólo permitir la edición de datos a usuario registrados, bastaría con poner el atributo [Authorize] al inicio del controlador, como se ve en la imagen. Así, si una persona que no se ha autenticado intenta acceder a alguna de las acciones del controlador, será llevada a una vista donde se le solicita iniciar sesión.

Aquí les dejo el repo del proyecto por si quieren ver algo Intro ASP.NET MVC (Commit de la lección 1)

¡Terminamos!

Hasta aquí va la primera parte de esta serie, espero que hayan aprendido algo nuevo. Si tienen dudas, si tengo un error o si me olvide poner algún enlace pueden escribirme en la caja de comentarios. Sé que hemos cubierto bastantes cosas, pero prefiero un ritmo rápido en el que podamos ver todas las posibilidades y todas las herramientas que debemos aprender, en vez de dormirlos explicando lentamente cada concepto. Recuerden que lo más importante para aprender a programar es PRACTICAR.

¡Nos vemos la próxima amigos!