índice

Lista de figuras 2

Introducción 3

Participantes en el proyecto 3

Alcance De La Arquitectura 3

Objetivos De La Arquitectura 4

Interfaz Gráfica (Mokups) 4

Diagrama De Clases 11

Diagrama De Secuencia 12

Vista de Datos (Diagrama Relacional) 13

Modelo Vista Controlador 15

Resultado 17

Conclusión 18

Bibliografía 18

Lista de figuras

Ilustración 1 --------------------------------Página principal 4

Ilustración 2---------------------------------Login de usuario 5

Ilustración 3--------------------------------Registro de usuario 6

Ilustración 4--------------------------------Categoria de sistema 6

Ilustración 5--------------------------------Búsqueda por filtros 7

Ilustración 6 -------------------------------Apartado de rommies 8

Ilustración 7--------------------------------Información de Roomie 8

Ilustración 8--------------------------------Sección de favoritos 9

Ilustración 9 -------------------------------Sección de búsqueda de cuarto 9

Ilustración 10 ------------------------------Publicación de habitación 10

Ilustración 11 ------------------------------Opción de usuario 10

Ilustración 12--------------------------- ---Detalles de administración 11

Ilustración 13---------- --------------------Diagrama de clases o modelo de dominio del sistema. 11

Ilustración 14-------------------------------Diagrama de secuencias de la clase Arrendador. 12

Ilustración 15-------------------------------Diagrama de secuencia de la clase Arrendatario. 12

Ilustración 16-------------------------------Diagrama Relacional 13

Ilustración 17-------------------------------Diagrama de componentes 13

Ilustración 18-------------------------------Diagrama de casos Usuario-Arrendador -uso 14

Ilustración 19-------------------------------Diagrama de estados de Administrador 14

Ilustración 20-------------------------------Diagrama de despliegue 15

Ilustración 21-------------------------------modelo vista 15

Ilustración 22-------------------------------Resultado 17

Índice de tablas

Tabla 1------------ integrantes de equipo 3

Introducción

En este trabajo se presentará la documentación detallada de la arquitectura, en la cual se pondrán todos los factores importantes para nosotros en el desarrollo de proyecto basándonos en los requisitos y la validación por parte del cliente y líder del proyecto, para que así nuestro proyecto tenga una funcionalidad, eficacia y diseño adecuado de acuerdo a la necesidad que se tiene.

Participantes en el proyecto

Tabla 1 integrantes de equipo

Alcance De La Arquitectura

El sistema será inicialmente implementado en la web para así posteriormente se pueda generar una aplicación móvil multiplataforma (iOS Android), en esto cabe recalcar para poder usar la plataforma debe haber un registro para almacenarla en la base de datos. La arquitectura se empleará en un ambiente cliente/servidor, en un modelo de aplicación distribuida, en la cual consiste en que las tareas fijadas anteriormente se reparten entre los arrendadores, servidores que demandan el sistema.

Objetivos De La Arquitectura

• Funcionalidad: Ha sido diseñado de que satisfagan las necesidades implícitas o explícitas de los usuarios, al ser utilizado bajo condiciones específicas
• Mantenible: Que cumpla con su función y permitir futuras mejoras.
• Confiablidad: No debe causar conflictos entre administrador arrendatario.
• Eficiencia: El sistema debe solo ocupar recursos necesarios del sistema.
• Portabilidad: Por el diseño en MYSQL, PHP Y CSS, ocupa muy poco espacio en la memoria, lo cual es eficiente.

Interfaz Gráfica (Mokups)

La página principal donde muestra las opciones en este caso buscar o publicar un cuarto el inicio de sesión y la región en la que nos ubicamos

Para poder arrendar o renta un cuarto se necesita crear una cuenta puede vincularse a la de Facebook o la de Google

Posteriormente se procede a llenar el formulario para poder registrarse en el sistema entre ellos el nombre apellidos edad sexo correo contraseñas.

Se presenta la tabla donde podemos visualizar los apartados de filtros cuartos roomies favoritos y el usuario con sus opciones

Ilustración 4 categoria de sistema

Se muestra la busqueda por filtros uno de ellos que se busca cuarto y el presupuesto con el que se cuenta ademas de que tipo de cuartos se encuentran y si se aceotan mascotas

Ilustración 5 búsqueda por filtros

Ahora se muestra el apartado de roomies donde se encuentra disponible el precio ubicación y junto con ello el costo

Ilustración 6 apartado de rommies

En el apartado de los cuartos se selecciona y se muestra la descripción del roomie lo servicios que tiene el cuarto su ubicación y la opción de llamar o mandar mensaje

Ilustración 7 información de Roomie

Se muestra la opción de favoritos estos van alojados en los mas vistos por el usuario o recomendaciones que se tiene por el publico

Ilustración 8 sección de favoritos

Se muestra el apartado de buscar donde se selecciona la zona y el pago máximo por mes además de selección de que quiere que contenga la habitación normas entre otras cosas

Ilustración 9 Sección de búsqueda de cuarto

Se muestra la opción de publicar habitación donde y se registra la ubicación que características y normas tiene y alguna descripción extra

Ilustración 10 publicación de habitación

Se muestra las opciones de usuario que se tiene una de ella los mensajes publicaciones siguiendo ayuda y salir

Ilustración 11 opción de usuario

Aquí se puede acceder el administrador para previas modificaciones del cuarto los inquilinos y usuarios arrendadores que se tienes quejas costos y las utilidades del propietario

Aquí se puede acceder el administrador para previas modificaciones del cuarto los inquilinos y usuarios arrendadores que se tienes quejas costos y las utilidades del propietario

Ilustración 12 detalles de administración

Diagrama De Clases

Ilustración 13 Diagrama de clases o modelo de dominio del sistema.

Diagrama De Secuencia

Ilustración 14 Diagrama de secuencias de la clase Arrendador.

Ilustración 15 Diagrama de secuencia de la clase Arrendatario.

Vista de Datos (Diagrama Relacional)

Ilustración 16 Diagrama Relacional

Diagrama De Componentes

Ilustración 17 Diagrama de componentes

Diagrama De Estados

Ilustración 18 Diagram de casos Usuario-Arrendador -uso

Ilustración 19 Diagrama de estados de Administrador

Diagrama De Despliegue

Ilustración 20 Diagrama de despliegue

Modelo Vista Controlador

Ilustración 21 modelo vista

Se trata de un modelo muy maduro y que ha demostrado su validez a lo largo de los años en todo tipo de aplicaciones, y sobre multitud de lenguajes y plataformas de desarrollo.

El Modelo que contiene una representación de los datos que maneja el sistema, su lógica de negocio, y sus mecanismos de persistencia. La Vista, o interfaz de usuario, que compone la información que se envía al cliente y los mecanismos interacción con éste. El Controlador, que actúa como intermediario entre el Modelo y la Vista, gestionando el flujo de información entre ellos y las transformaciones para adaptar los datos a las necesidades de cada uno.

En TroopSF queremos crear procesos que aseguren calidad en los programas que realizamos y esa calidad atiende a diversos parámetros que son deseables para todo desarrollo, como la estructuración de los programas o reutilización del código, lo que debe influir positivamente en la facilidad de desarrollo y el mantenimiento. El modelo, que se encarga de los datos de la app, consulta la base de datos y digamos, obtiene todos los vídeos del curso de AngularJS, la información del curso y el título, el modelo responde al controlador con los datos que pidió (nota como en la imagen las flechas van en ambos sentidos, porque el controlador pide datos, y el modelo responde con los datos solicitados).

Una vez el controlador tiene los datos del curso de AngularJS, se los manda a la vista, la vista aplica los estilos, organiza la información y construye la página que vez en el navegador.

1. El usuario interactúa con la interfaz de usuario de alguna forma (por ejemplo, el usuario pulsa un botón, enlace, etc.)
2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificación de la acción solicitada por el usuario. El controlador gestiona el evento que llega, frecuentemente a través de un gestor de eventos (handler) o callback.
3. El controlador accede al modelo, actualizándolo, posiblemente modificándolo de forma adecuada a la acción solicitada por el usuario (por ejemplo, el controlador actualiza el carro de la compra del usuario). Los controladores complejos están a menudo estructurados usando un patrón de comando que encapsula las acciones y simplifica su extensión.
4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de usuario. La vista obtiene sus datos del modelo para generar la interfaz apropiada para el usuario donde se refleja los cambios en el modelo (por ejemplo, produce un listado del contenido del carro de la compra). El modelo no debe tener conocimiento directo sobre la vista. Sin embargo, se podría utilizar el patrón Observador para proveer cierta indirección entre el modelo y la vista, permitiendo al modelo notificar a los interesados de cualquier cambio. Un objeto vista puede registrarse con el modelo y esperar a los cambios, pero aun así el modelo en sí mismo sigue sin saber nada de la vista. El controlador no pasa objetos de dominio (el modelo) a la vista aunque puede dar la orden a la vista para que se actualice. Nota: En algunas implementaciones la vista no tiene acceso directo al modelo, dejando que el controlador envíe los datos del modelo a la vista.

5.La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo nuevamente. Resultado

Ilustración 22 Resultado

Al final de aplicar los elementos necesarios que se necesita para una buena interfaz, los botones, barras de desplazamiento, imágenes, paleta de colores, un estilo de letra para toda la interfaz.

Conclusión

Una vez de haber desarrollado la documentación de la arquitectura de software, podemos concluir con una buena interfaz, con la definición y el alcance que tendrá, además se presentan los componentes necesarios para tener una buena interfaz con funcionalidad de sus botones como búsqueda por filtros, los cuartos, roomie favoritos y la cuenta del usuario también se relacionado un gestor de base de datos, con sus componentes, las vista de casos de uso generados en Enterprise Architec, en el cual se trabajaron el registro del usuario, el perfil del mismo, diagramas de clases.

En este trabajo cabe mencionar la eficiencia de ambiente clientes, arrendador y clientes servidor que en el momento solo es una aplicación en internet y posteriormente será multiplataforma en la cual se hizo una combinación de colores, barras, secciones. Junto con ellos ira conectada una base de datos en MySQL y el lenguaje de PHP que sería un modelo de vista en conjunto de un estilo en CSS.

Bibliografía

Modelo vista controlador (MVC). (2021). Obtenido de https://www.troopsf.com/mvc/

Universidad de Alicante. (2020). Obtenido de https://si.ua.es/es/documentacion/asp-net-mvc-3/1-dia/modelo-vista-controlador-mvc.html