| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| wiki:arquitectura_modelo-vista-controlador_o_mvc [2024/10/16 14:19] – admin | wiki:arquitectura_modelo-vista-controlador_o_mvc [2024/10/17 23:22] (current) – admin |
|---|
| A principios de los años 2000, la Web se popularizó y la interfaz de las aplicaciones migró a HTML y, posteriormente, a HTML y JavaScript. La confusión entre los términos MVC y tres capas surgió en esa época, principalmente debido a la aparición de frameworks para la implementación de sistemas web que se denominaron frameworks MVC. Como ejemplo, podemos citar Spring (para Java), Ruby on Rails, Django (para Python) y CakePHP. En realidad, estos frameworks expandieron y adaptaron el concepto de MVC para la Web. Por ejemplo, obligan a organizar un sistema web en tres partes (véase también la próxima figura): vista, compuesta por páginas HTML; controladores, que procesan una solicitud y generan una nueva vista como respuesta; y modelo, que es la capa que persiste los datos en una base de datos | A principios de los años 2000, la Web se popularizó y la interfaz de las aplicaciones migró a HTML y, posteriormente, a HTML y JavaScript. La confusión entre los términos MVC y tres capas surgió en esa época, principalmente debido a la aparición de frameworks para la implementación de sistemas web que se denominaron frameworks MVC. Como ejemplo, podemos citar Spring (para Java), Ruby on Rails, Django (para Python) y CakePHP. En realidad, estos frameworks expandieron y adaptaron el concepto de MVC para la Web. Por ejemplo, obligan a organizar un sistema web en tres partes (véase también la próxima figura): vista, compuesta por páginas HTML; controladores, que procesan una solicitud y generan una nueva vista como respuesta; y modelo, que es la capa que persiste los datos en una base de datos |
| |
| Por lo tanto, en una arquitectura MVC, la interfaz gráfica está formada por objetos de Vista y por Controladores. Sin embargo, en muchos sistemas no existe una distinción clara entre Vista y Controladores. Según Fowler (link, página 331), incluso la mayoría de las versiones de Smalltalk no separan estos dos componentes. Por eso, es más fácil entenderlo de la siguiente manera: | Por lo tanto, en una arquitectura MVC, la interfaz gráfica está formada por objetos de Vista y por Controladores. Sin embargo, en muchos sistemas no existe una distinción clara entre Vista y Controladores. Según Fowler ([[https://dl.acm.org/doi/book/10.5555/579257|Fowler, página 331]]), incluso la mayoría de las versiones de Smalltalk no separan estos dos componentes. Por eso, es más fácil entenderlo de la siguiente manera: |
| |
| MVC = (Vista + Controladores) + Modelo = Interfaz Gráfica + Modelo | MVC = (Vista + Controladores) + Modelo = Interfaz Gráfica + Modelo |
| - Instalación de Docker: La instalación dependerá del sistema operativo a ser utilizado. La documentación y los binarios para SO Windows los podrán encontrar en el siguiente link: [[https://www.docker.com/|Docker]]. En caso de utilizar SO Linux, la instalación dependerá de la distribución. | - Instalación de Docker: La instalación dependerá del sistema operativo a ser utilizado. La documentación y los binarios para SO Windows los podrán encontrar en el siguiente link: [[https://www.docker.com/|Docker]]. En caso de utilizar SO Linux, la instalación dependerá de la distribución. |
| - Creación de una red interna: Deberemos crear una red de datos interna para la comunicación entre los dos contenedores (wildfly y postgresql) con el siguiente comando; ''docker network create mired'', donde ''mired'' es el nombre de la red que crearemos. Podemos verificar la creación de la red con el comando; ''docker network ls'', y nos cercioramos que se muestre el nombre de la red creada. | - Creación de una red interna: Deberemos crear una red de datos interna para la comunicación entre los dos contenedores (wildfly y postgresql) con el siguiente comando; ''docker network create mired'', donde ''mired'' es el nombre de la red que crearemos. Podemos verificar la creación de la red con el comando; ''docker network ls'', y nos cercioramos que se muestre el nombre de la red creada. |
| - Creación del contenedor posgtresql: Para la creación del contenedor, usaremos la imagen oficial ([[https://hub.docker.com/_/postgres/|Imagen Oficial Postgresql]]. En esta página se indica el comando para realizar el despliegue del contenedor: ''docker run --network mired -it --rm -p 5432:5432 -e POSTGRES_PASSWORD=123 postgres''. En este caso le damos como parámetros la red creada, nombre de usuario y contraseña y por último el nombre de la imagen. | - Creación del contenedor posgtresql: Para la creación del contenedor, usaremos la imagen oficial ([[https://hub.docker.com/_/postgres/|Imagen Oficial Postgresql]]). En esta página se indica el comando para realizar el despliegue del contenedor: ''docker run --network mired -it --rm -p 5432:5432 -e POSTGRES_PASSWORD=123 postgres''. En este caso le damos como parámetros la red creada, nombre de usuario y contraseña y por último el nombre de la imagen. |
| - Creación del usuario ''sa'' en postgres y base de datos ''banco'': Necesitaremos crear un usuario con contraseña ''sa'' y su base de datos asociada ''banco''. Para esto ingresaremos a la consola del contenedor (por docker desktop) y ejecutamos el siguiente comando para ingresar a la consola de postgresql: ''psql -h localhost -p 5432 -U postgres -d postgres''. Ejecutar los siguientes comandos SQL. | - Creación del usuario ''sa'' en postgres y base de datos ''banco'': Necesitaremos crear un usuario con contraseña ''sa'' y su base de datos asociada ''banco''. Para esto ingresaremos a la consola del contenedor (por docker desktop) y ejecutamos el siguiente comando para ingresar a la consola de postgresql: ''psql -h localhost -p 5432 -U postgres -d postgres''. Ejecutar los siguientes comandos SQL. |
| |
| - Correr el contenedor wildfly: ''docker run --network mired -p 8080:8080 -p 9990:9990 -it jboss/wildfly-admin'' | - Correr el contenedor wildfly: ''docker run --network mired -p 8080:8080 -p 9990:9990 -it jboss/wildfly-admin'' |
| - Ingresar al sitio: http://localhost:8080/bancoapp/ | - Ingresar al sitio: http://localhost:8080/bancoapp/ |
| | |
| | |
| | También es posible obtener las imágenes creadas para postgresql y wildfly desde este enlace [[https://drive.google.com/drive/folders/1Ha8M1har6746uTKH7mqaNXbVVOCaRaUq?usp=drive_link|Imágenes Docker]]. Para cargarlas a su docker local, una vez descargadas, solo es necesario escribir el siguiente comando: ''docker load -i <ruta a la imagen descargada>''. |
| |
| |
| En este caso en particular, ''bancoapp'' es un proyecto JFaces-MVC o Jakarta Faces MVC ([[https://jakarta.ee/specifications/mvc/|Jakarta Faces]]), el cual es desplegado (deployed) en un servidor de aplicaciones wildfly. Este servidor se encarga de todo el ciclo de vida del aplicativo así como también habilita las comunicaciones del aplicativo con otros módulos externos como base de datos y sistemas de mensajería. | En este caso en particular, ''bancoapp'' es un proyecto JFaces-MVC o Jakarta Faces MVC ([[https://jakarta.ee/specifications/mvc/|Jakarta Faces]]), el cual es desplegado (deployed) en un servidor de aplicaciones wildfly. Este servidor se encarga de todo el ciclo de vida del aplicativo así como también habilita las comunicaciones del aplicativo con otros módulos externos como base de datos y sistemas de mensajería. |
| |
| | La gestión de la configuración para este proyecto está a cargo Apache - Maven ([[https://maven.apache.org/|Link]]). Maven se encargará de gestionar las dependencias, la construcción y el deployment basado en un archivo .xml llamado ''pom.xml'', el cual se encuentra en la raíz del proyecto. En la página [[wiki:maven|Explicación POM]] se explican las partes que componen el archivo ''pom.xml''. Verifique que tiene instalado maven, ejecutando en una terminal el comando ''mvn''. En caso de que este no se encuentre instalado, deberá descargar los binarios, los cuales se encuentran en [[https://dlcdn.apache.org/maven/maven-3/3.9.9/binaries/apache-maven-3.9.9-bin.zip|Instalación Maven]]. En variables de entorno, se debe crear una variable llamada ''JAVA_HOME'' y atribuirle la ruta donde se encuentre instalado '///ruta a maven/maven/bin///'. |
| | |
| | La compilación del proyecto la realizaremos en un terminal de Intellij con el siguiente comando: ''mvn clean package''. Esto creará un archivo llamado ''bancoapp.war'' en la carpeta ''target'' del proyecto. |
| |
| |
