Arquitectura MVC: Modelo – Vista – Controlador

Arquitectura MVC en pythonEn esta entrada vamos a aprender que es la arquitectura (patrón de diseño de software) MVC (Modelo – Vista – Controlador).

Ya he hablado en el post anterior de esta arquitectura de software pero no habíamos explayado lo suficiente sobre cada uno de los componentes en que se divide un proyecto.

Esta entrada es puramente teórica, pero es necesaria para avanzar hacia la parte práctica en la próxima y comenzar a trabajar en un proyecto utilizando el framework Flask.

 

 

Atención!
Lo siguiente que vas a leer puede sonar a chino básico pero sigue leyendo aunque no entiendas, continúa adelante y asegúrate de realizar la parte práctica en la siguiente lección. Luego, más adelante acabarás comprendiendo!

 

¿Qué es un patrón de diseño de Software?

meme mvcSi tuviera que explicar los patrones de diseño de software a un niño le diría que es algo así como un molde que alguien creó para obtener formas perfectas con el mínimo esfuerzo. Claro, si estuviéramos amasando masilla de colores o jugando a hacer formas con arena. Si tienes que armar una jodida estrella manualmente llevará más tiempo y complicaciones lograr un acabado perfecto, pero si tienes un molde bastará con colocar la cantidad correcta de masilla dentro y darle un azote en una superficie plana. Y boilá!

Pues con el software sucede igual. Otras personas sufrieron dolores de cabeza al intentar programar un software funcional para resolver determinado problema y a base de su experiencia de prueba y error  nos otorgan un «patrón de diseño» que sirve como una «plantilla o molde» para que nosotros al momento de desear programar una aplicación similar tengamos a disposición una solución general, re-utilizable y aplicable a diversos problemas de diseño de software.

Existen miles de patrones de diseño de software y continuamente están apareciendo más. No nos vamos a poner aquí a detallar cada uno, ni siquiera los más comunes porque los puedes encontrar en cualquier sitio web utilizando el santo cuya estampa deberías tener pegada en la frente «San Google«. Pero si vamos a explicar ¿Por qué utilizar patrones de diseño de software?.

Como las prácticas de desarrollo de software han evolucionado ya no se requiere completar todo el software para realizar pruebas y determinar cuales son los errores. Utilizando un patrón de diseño nos aseguramos que estamos siguiendo un camino correcto en el diseño de nuestro software y aseguramos la validez de nuestro código mientras que logramos identificar los posibles errores sobre la marcha.

 

¿Qué es la arquitectura MVC?

MVCLa arquitectura MVC como podemos encontrar en cualquier sitio web referente al diseño de software es un patrón arquitectural es decir que nos dicta una arquitectura como modelo o guía para el desarrollo de aplicaciones. En realidad es bastante antiguo pero ha ido evolucionando para ser aplicable hoy en día como modelo de desarrollo de la mayoría de aplicaciones web.

Esta arquitectura nos dicta como se estructura cada uno de los componentes de nuestro software, las responsabilidades de cada uno y las relaciones entre ellos. Básicamente evitará que hagamos una ensalada de espagueti todo mezclado con las albóndigas, el jugo y el pan. Ya que nos dicta como dividir nuestro software en componentes según la finalidad de cada uno estructurando nuestro código de manera funcional y modular.

Funcional porque cada bloque de código se ubicará dentro del componente según su función o rol. Es decir, mas claramente no podrás mezclar el código de la parte visual (estilos, colores, fuentes, imágenes) con la parte de los datos (código de lenguaje SQL) ni con la parte lógica que controla la interacción entre estos otros dos componentes (Por ejemplo la función que muestra un archivo según se visite una url). Ya que según esta arquitectura nuestra aplicación está dividida en dos componentes que interactúan entre sí a través de un tercer componente «el controlador«.

Y modular porque consistirá en módulos que funcionarán tanto por separado como íntegramente en nuestro software como un sistema. Es decir que dentro del controlador por ejemplo se importará el modelo de datos que estará en un archivo o varios aparte, y lo mismo sucederá con las vistas y cualquier archivo que gestione las vistas.

Vamos a ver cada parte por separado y finalmente intentaremos entenderlas a todas juntas como un todo que da lugar a un sistema de software. Porque en sí debemos programar cada parte como si de un software se tratará, es por ello que como dijimos al principio se trata de código re-utilizable, básicamente puedes importar algunos de estos módulos para desarrollar un nuevo software.

Modelo – La lógica de datos

Como ya dijimos el patrón MVC evita que mezclemos el HTML / CSS de las vistas con el lenguaje de programación y obviamente también con las funciones que se encargan del manejo de datos. En código de software antiguo es probable que logremos encontrar el código Espagueti donde encontrábamos una mezcla de las diferentes capas lo que hacía muy complicada su interpretación y era el causante de un extremo dolor de cabeza al tener que realizar cambios.

Diagrama modelo MVC

La capa del Modelo en nuestra arquitectura MVC es aquella que se encarga de trabajar con los datos; por lo que normalmente dentro del modelo encontraremos mecanismos para acceder a la información y actualizar los datos en la fuente de almacenamiento, que bien podría ser una base de datos relacional o no relacional. (Estos conceptos los veremos más adelante pero si tienes curiosidad he escrito algunas entradas hablando de ello: Bases de datos relacionales)

Citando otro de mis post:

Tendremos por un lado un MODELO de datos, normalmente se llama ORM (en el caso de bases de datos relacionales), que es un modelo de programación que nos permitirá mapear las bases de datos. Este modelo servirá para llevar adelante la vinculación de nuestra aplicación con nuestra base de datos RELACIONAL (MySQL por ejemplo) y simplificará el tener que escribir muchas líneas de código SQL manualmente. Básicamente nos simplificará ejecutar las acciones CRUD ya que se harán a través de la consulta a un modelo mediante un controlador y no en cada linea de código de nuestra aplicación.
Para que me entiendas mejor un modelo de datos sería como un mapa donde nuestra aplicación al recibir una consulta del usuario sabe que código ejecutar automáticamente para consultar la base de datos ya sea para Crear, Leer, Actualizar, o Borrar algún dato (acciones CRUD : Create, Read, Update o Delete.)

Ejemplo real de un modelo

No hay mejor manera de entender las cosas que con ejemplos, déjame compartir un ejemplo de código de una aplicación que programé en python:

Archivo «models.py» donde se crea el modelo de datos para la tabla «Usuarios» de una base de datos Mysql:

Ejemplo modelo de datos

Como ves se trata de una clase que hereda de db.Model (método de SQLAlchemy) y de UserMixin que es una clase de la librería Flask-Login. En este caso estamos creando el modelo de usuario. Es decir, que cada vez que un usuario se registre en nuestra aplicación en la tabla «Usuarios» en la base de datos se creará un nuevo registro con los datos indicados en este modelo: Una id (que se asigna automáticamente), el Nombre que ha colocado, el Apellido que ha colocado al momento del registro, etc.

Pero, cada uno de estos campos especificados en el modelo debe coincidir exactamente con la base de datos. Es decir, que no puedo tener en el modelo el campo «Estado_Civil» si en la tabla «Usuarios» de la base de datos no existe este campo. Ya que se produciría un error de inconsistencia de datos.

Normalmente cuando programo aplicaciones en Flask la base de datos relacional es creada a partir del modelo, excepto que halla que trabajar con una base de datos existente. Por lo que luego de crear el modelo a partir de él se crea la base de datos con cada campo para cada tabla como lo especifica este, y como puedes ver en el ejemplo cada campo tiene determinados parámetros a los que nosotros le brindamos argumentos y con ello establecemos no solo el tipo de dato sino algunas limitaciones y propiedades de cada registro que serán igual en la base de datos.

Por ejemplo al momento de crear el campo «Nombre» el modelo está ordenando que dicho campo tiene un limite máximo de 45 caracteres y es nulleable = False. Lo que significa que es un campo que JAMÁS puede quedar vacío o null. Por lo que en el registro de usuario tampoco se debe permitir que el usuario se registre si no ha introducido al menos un carácter para el campo o propiedad «Nombre». Esto se denomina «Consistencia de datos«. Los requerimientos para los datos serán igual en el modelo que en la base de datos.

También usamos métodos para cada acción que se realice en esta tabla

Dentro del modelo y dentro de esta clase «Usuarios» se encuentran los métodos necesarios para por ejemplo «Obtener una lista de todos los usuarios». Es decir que si yo quiero mostrar una lista de todos los usuarios primeramente el controlador va a ordenar al modelo ejecutar el método que podría llamarse «mostrar_todos» y el modelo ordenará ejecutar una Query en la base de datos que retorne una «lista» de todos los usuarios al controlador y este la envíe a la vista para mostrarla.

CRUD

A partir de aquí es importante hacer hincapié en otro concepto llamado CRUD el cual está vinculado a la gestión de datos.

Dentro del modelo, si quieres puedes pensarlo dentro de cada clase que exista dentro de este existirán (entre otros) al menos cuatro métodos: Create, Read, Update, Delete (por sus iniciales CRUD). Que se corresponden a Crear, Leer, Actualizar y Borrar.

Estos métodos servirán para realizar estas acciones propiamente dichas en la base de datos para esa tabla en cuestión y se deben encontrar dentro del modelo de datos. Es decir que cada clase tendrá sus métodos CRUD, por lo que un modelo de datos podríamos verlo simplificando algo así:

ejemplo clase usuarios modelo

 

Traaaanquiiiiilo!

Claro que con el uso de algunas librerías no es necesario desarrollar cada método, al heredar de otra clase de alguna librería esto se nos va a facilitar muchísimo. Pero en la parte práctica de este post intentaremos aplicar el concepto CRUD con un diccionario como base de datos. Una pura simulación para más adelante comenzar a aprender a trabajar con bases de datos relacionales!

 

Vista – Interfaz de usuario

Vamos a hablar ahora de las famosas vistas, que aquí no vamos a demorar mucho como con el modelo y el controlador porque el tema de las vistas dependerá mucho del Front-end, es decir de la capa visual que elijamos cuando apliquemos esta arquitectura de Software. Hay quienes piensan que la arquitectura MVC es utilizada solo a nivel de aplicaciones web, pero  también es hoy en día aplicable a aplicaciones de escritorio. Donde claramente las vistas no serán puramente en lenguaje de etiquetado HTML y hojas de estilo CSS. Bien podría tratarse de una librería para aplicaciones de escritorio en el caso de Python como son Tkinter o PyQt.

Lo único que me gustaría explayar aquí es solo referido al HTML y CSS. No vamos a dar por sentado nada, supondré que un lector promedio de mi blog no sabe que es HTML ni CSS. Partiendo de ahí:

HTML y CSS

El lenguaje HTML es un lenguaje de etiquetado (NO DE PROGRAMACIÓN que quede bien clarito). No se puede programar en HTML porque simplemente es un lenguaje basado en etiquetas que interpreta el navegador y que le indica al mismo la organización, posición, distribución, tamaño y tipo de elementos. Por lo que solo con HTML no podemos por ejemplo modificar una base de datos, ni realizar cambios en un sistema u archivo. Necesitamos de un lenguaje Back-End que trabaje desde el lado del servidor (Python, PHP, etc.) y es este lenguaje el que origina y muestra el HTML al usuario.

Citando otro de mis post:

HTML / CSS - VistasPara que entiendas mejor, HTML es un lenguaje de etiquetado HyperText Markup Language, es decir, no es de programación, sino que son simples etiquetas que el navegador interpreta y le permite otorgar un estilo y una organización de un sitio web.
Por ejemplo podemos tener un archivo HTML con lo siguiente:
<h1>Hola esto es un título</h1>
Si ejecutas este HTML siempre mostrará en el navegador con una fuente grande “Hola esto es un título“.

En un principio si queríamos darle color a un espacio / divisorio en un sitio web lo hacíamos dentro de la etiqueta correspondiente en el mismo HTML, pero actualmente los estilos de un documento HTML se le dan mediante la inclusión en el mismo de un archivo externo llamado «Hoja de Estilos» que tiene una extensión «.css«.

Así que lo normal para crear un sitio web de tipo estático es tener algunos archivos «.html» y otro «.css«. Por su lado el HTML contendrá la disposición de un menú, una barra lateral, algunos «div’s» como divisorios, alguna que otra imagen, etc. Y el archivo CSS contendrá las clases que usa este archivo HTML para decorar como el navegador mostrará esos menús, divisorios, títulos y texto entre otras cosas. Espero entiendas esto que es realmente muy básico.

No voy a enseñar HTML ni CSS en mi blog

Aquí no voy a enseñar HTML ni CSS porque considero algo muy básico e innecesario si estamos aprendiendo Back-End ya que si no sabes nada de HTML ni CSS bastará con algunas horas de tutoriales gratuitos para que puedas crear algún sitio decente.

hasta la vista

Si no tienes noción de HTML puedes darte un repaso por aquí: Primeros pasos con HTML O bien buscar en Youtube «Aprender HTML y CSS» y encontrarás muchos vídeos explicativos.

 

Tampoco vas a encontrar nada complicado en estas lecciones porque trataré de usar siempre algún HTML y CSS manteniendome muy básico, porque aquí no interesan ahora tanto los estilos y las buenas caras.

 

Bueno veremos las vistas en las prácticas y verás que son en realidad lo menos complicado.

 

Controlador – El cerebro puente entre interfaz y modelo de datos

El controlador entre otras cosas contiene el código fuente necesario para responder a las acciones que el usuario solicita y servir como puente de interacción entre las vistas y el modelo de datos. Normalmente podemos tener más de un controlador dependiendo la organización de nuestro proyecto y la magnitud de este, pero lo cierto es que podemos definir el controlador como:

Capa que sirve de enlace entre las vistas y el modelo de datos respondiendo a los mecanismos que puedan requerirse para implementar las necesidades de nuestra aplicación.

El controlador en el caso de un framework como FLASK es el encargado de gestionar las rutas de enlace y determinar cual será la vista que se mostrará en cada url así como también la gestión de los datos que obtiene o solicita al modelo. Para ejemplificarlo podemos suponer:

Un cliente visita la url «/registro» de nuestra aplicación intentando registrarse como usuario, en ese momento está enviando una solicitud al servidor que será interpretada por el controlador que inmediatamente cargará la vista (HTML + CSS) correspondiente al «template» de dicho sitio web (colores, estructura, menús, etc y un formulario de registro con sus correspondientes campos a rellenar por el cliente). Una vez rellenado los campos el cliente dará a un botón de «registrarme» lo que inmediatamente enviará otra solicitud diferente al controlador, quien debe encargarse ahora de comparar estos datos con los requerimientos del modelo y enviar la orden al modelo de crear un nuevo registro para este cliente, finalmente recibirá la notificación del modelo que este usuario fue creado en la base de datos y el controlador cargará una nueva vista donde mostrará una alerta «Se ha registrado con éxito!».

MVC Diagrama

 

Bueno este post se ha hecho algo largo, por lo que en el siguiente haremos la parte práctica donde veremos la arquitectura MVC en acción. Realizaremos una aplicación muy sencilla sin recurrir a ningún gestor de versiones ni entornos virtuales, ni bases de datos para que no se te haga un desmadre en la mente.

 


 

 

Continúa leyendo!
Entrada anterior! Siguiente entrada!

Compartir es agradecer! :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.