¡Hola buenas madrugadas! Luego de unas vacaciones, regreso con todo el power 2.0!!! bien fresh a continuar y terminar con esta serie de tutoriales que en su inicio comenzó por un solo post para colaborar con el primer calendario de adviento de C# y al darme cuenta que existen muchas más cosas para conversar, decidí hacer una serie de la cual hoy se define el capítulo de cierre. Preparen canchita / pop-corn / poporopos / palomitas de maíz / o como le llamen en su país.

Si todavía no han visto los capítulos anteriores, preparen un poco más de comida, alisten las bebidas, los refrescos, y aquí los enlaces para su deleite:

¡Hoy! en Te Lo Resumo Así No más! el blog veremos el framework progresivo de ¡VueJS! Con las actuaciones estelares de JavaScript junto con ASPnet Core 2!

Para dejar en claro y justificar las interfaces/pantallas nada trabajadas, no voy a usar bootstrap ni material design ni Foundation ni frameworks de hojas de estilo porque esto les dejo de tarea para que se encarguen de expandirse y obtener dicha experiencia por sus propios medios, ustedes sí tienen la capacidad de lograrlo.

Antes de proceder a iniciar a codificar pensemos un poco qué es lo que necesitamos:

  1. Una pantalla con la lista de todos los productos.
  2. Un formulario para crear nuevos productos.
  3. Un formulario para editar productos existentes; podríamos reutilizar el formulario del punto anterior.
  4. Eliminar productos.

Traducido a “código”:

Comenzamos con una tabla HTML con el producto y sus atributos/propiedades

¡Venga vamos! A elevar ese cosmos con todo el power 2.0!!

Para mostrar los productos necesitamos hacer una llamada al servidor, y éste nos responde con algo así: “Hola buenas madrugadas, aquí tienes tu solicitud” y traer esa respuesta de elementos que están en formato json del servidor donde está la lista de productos.

Pregunta: ¿Cómo hacemos una llamada al servidor? o dicho en el buen espanglish: ¿Cómo hacemos un request al server usando VueJS?

No, no vamos a usar jquery, jquery ya fue, GG, WP, fue una gran librería que nos ayudó muchísimo a quienes empezamos a desarrollar en web hace como 10 años, adiós jQuery, que la fuerza te acompañe xD!

vue logo

En el mundo de VueJS existe una librería que se llama vue-resource, que nos permitirá realizar peticiones al servidor de lo más fresh junto con VueJS (valga la redundancia). Para más información, hay que visitar el repositorio oficial que se encuentra en GitHub: https://github.com/pagekit/vue-resource

Vía línea de comandos para sentirnos como hackers, instalamos esta librería usando NPM:

npm install vue-resource

image

¡Instalado! ¿Y ahora, para usarlo? ¿Cómo es la nuez? Primero editamos el archivo gulpfile.js y en las dependencias agregamos lo solicitado.

Ejecutamos el comando “gulp

image

¡Con esto tenemos los ingredientes listos para seguir codificando!

image

En nuestro archivo wasap.js (léase What’s up!) Tenemos lo siguiente:

y en nuestro archivo index.cshtml

dotnet run

Vamos al navegador, F5 y nos da un error… Que no panda el cúnico cunda el pánico… F12 o click derecho, inspeccionar elemento y nos dirigimos hacia la consola para ver qué está sucediendo.

image

Entramos en modo Detective Zen, respiramos hondo y nos preguntamos: ¿Qué es CORS policy? Suena como a un rango de policía, ¿ideas? Vamos a leer nuevamente el error y nos dice que el acceso a la URL desde el origen “localhost:5000” ha sido bloqueado, ¿por qué?¿qué le hice para que me bloquee la petición?¿qué hacemos, lloramos? Nada que ver, primero lo primero, si se desconoce qué es CORS, la wikipedia nos da la solución rápida:

Intercambio de recursos de origen cruzado o CORS (Cross-origin resource sharing, en sus siglas en inglés), es un mecanismo que permite que recursos restringidos (como por ejemplo, las tipografías) de una página web puedan ser solicitados desde un dominio diferente por fuera desde el cual el primer recurso fue expuesto.

Texto extraído desde el siguiente enlace:

https://es.wikipedia.org/wiki/Intercambio_de_recursos_de_origen_cruzado

Si vamos a la versión en inglés del mismo artículo encontramos información más detallada…

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Ahora que tenemos una idea más clara de lo que es el CORS, la siguiente pregunta es: ¿Cómo lo habilitamos? ¿en dónde se habilita?¿en el servidor?¿en el cliente?¿en nuestra aplicación?

Actualizamos el startup.cs con el siguiente código:

Con esto lo que debemos realizar en los controladores es agregar el DataAttribute de:

[EnableCors("AllowSpecific")]

Ojo “AllowSpecific” es el nombre que definí para la política.

Ejecutamos el gran e ilustre comando:

dotnet run

image

Sí, se los dije, las pantallas estarán de lo más básico de lo básico para que se diviertan colocando los estilos que más les guste.

Nos quedan 3 funcionalidades más: Crear, Editar y Eliminar productos.

Formulario crear producto

Tenemos 2 campos fecha pero no los vemos en ningún lado, estos campos son útiles para hacer auditorías, suelen estar junto con “Creado por” y “Actualizado por” donde se almacena los nombre de usuario.

Una vez creado el elemento, tenemos que refrescar/actualizar la lista que tenemos, esto lo haremos mediante otra llamada al servidor.

Tengan cuidado con la cantidad de datos que van a llamar del servidor, existe un concepto llamado “paginación” donde se muestra X cantidad de elementos por página. Y aunque usted no lo crea… Hay quienes refrescan una lista con cientos, miles y hasta millones de datos… Luego se quejan que el sistema anda lento…

Para hacer que este formulario nos sea de utilidad en la edición, ¿qué tenemos que tener en cuenta? ¿qué diferencia existe entre crear y editar? Por más obvia que sea la respuesta, es necesario hacer una pausa y mencionarlo: “El ID que se pasa como parámetro en la edición se desconoce durante la creación debido a que la base de datos lo genera (autonumérico +1)”, dicho con otras palabras: necesitamos un hidden field donde definiremos el ID del producto, si este producto tiene un ID nulo, cero o –1 (menos uno), quiere decir que será inexistente de la tabla productos de nuestra base de datos y por consiguiente, crearemos dicho producto con las características (propiedades,atributos) especificadas en el formulario.

Formulario editar producto

Se llama al servidor con la ID del producto y se carga los datos en el formulario, el hidden field mencionado en el punto anterior tendrá el ID, al momento de hacer click en cancelar, borramos los datos del formulario y dejamos nulo, vació, cero o –1 (menos uno) al valor del hidden field. Si hacemos click en guardar, se envía la petición al servidor y se refresca/actualiza la lista de productos.

Eliminar producto

Ahora solo queda la eliminación del producto seleccionado ¿y después? Después refrescamos los datos de la lista, ya sea mediante la eliminación de la fila y/o una llamada al servidor que te trae la lista de productos que estabas viendo.

Código de la pantalla de Index.cshtml

Código del archivo wasap.js

¡Funciona!

vuejs-fredyfx

¿Ya vieron que no fue necesario llamar a jQuery?

Para Finalizar

Cuando se pone en producción, se utiliza los archivos minificados y el vuejs en modo “production” (lean y sigan la documentación), en este caso, se hace uso de fredyfx.min.js en lugar de wasap.js

Related image

Hahahaha! Tenía que poner la referencia de la inspiración del nombre del archivo hahahaha.

Quería hacer esto bien, por lo que me tomé un día extra días adicionales a lo del pronosticado.

Me alegra que les haya sido de utilidad esta mini-serie de “Elevando el cosmos con ASPnetCore 2, VueJS 2, Entity Framework Core 2 y PostgreSQL”, simplemente me queda expresar mi gratitud hacia ustedes por su atención y paciencia, que este nuevo año nos de mejores oportunidades en todo aspecto de la vida y que tengamos consciencia necesaria para entender dejando el ego, el miedo, los apegos, los prejuicios, las expectativas de lado, que se nos permita reflexionar, aprender y seguir con todo el power 2.0!! Me despido hasta una próxima publicación, un abrazote, que la fuerza os acompañe y ¡feliz inicio de 2019!

Con cariño, @fredyfx