Skip to content

Instantly share code, notes, and snippets.

@Danielusuario
Last active May 27, 2024 06:47
Show Gist options
  • Save Danielusuario/5870deaf9f61ba9a465878abbc4e0450 to your computer and use it in GitHub Desktop.
Save Danielusuario/5870deaf9f61ba9a465878abbc4e0450 to your computer and use it in GitHub Desktop.

Osvaldo Daniel Ramirez Ruiz

No. 20210617

Actividad de Patrones de Diseño: Modelo-Vista-Controlador (MVC) y Mediador en C# o Python

Actividad de Patrones de Diseño: Modelo-Vista-Controlador (MVC) y Mediador en C# o Python

Descripción de la Actividad Objetivo: Implementar los patrones de diseño Modelo-Vista-Controlador (MVC) y Mediador para desarrollar una aplicación de dibujo colaborativo en línea, que permita a múltiples usuarios interactuar y modificar un lienzo compartido en tiempo real.

Escenario

Una plataforma de dibujo colaborativo que permite a usuarios remotos unirse a sesiones de dibujo, donde pueden agregar, modificar y eliminar elementos gráficos en un lienzo compartido. La aplicación necesita gestionar efectivamente la comunicación entre los distintos componentes de la interfaz de usuario y el modelo de datos, manteniendo la sincronización entre las vistas de todos los usuarios.

Tareas

Aplicar el patrón MVC para separar la lógica del programa en tres componentes interconectados: modelo, vista y controlador. Implementar el patrón Mediador para facilitar la comunicación entre los componentes del MVC, especialmente en un entorno colaborativo donde las actualizaciones son frecuentes y provienen de múltiples usuarios. Desarrollar un modelo de datos que pueda gestionar elementos gráficos como formas, líneas y textos. Crear vistas que muestren el estado actual del lienzo y permitan la interacción del usuario. Diseñar controladores para manejar las entradas de los usuarios y actualizar tanto el modelo como la vista. Implementación

1. Definición de Clases

Clase ModeloLienzo:

Almacena el estado del lienzo, incluyendo todas las formas y elementos gráficos. Métodos para añadir, modificar y eliminar elementos. Clase VistaLienzo:

Visualiza el estado actual del lienzo. Se actualiza automáticamente cuando el modelo cambia. Clase ControladorLienzo:

Interpreta las acciones del usuario (como clics y arrastres) y las traduce en cambios en el modelo. Clase MediadorSesion:

Facilita la comunicación entre múltiples controladores y sus respectivas vistas en diferentes instancias del cliente. Sincroniza el estado del modelo entre todos los usuarios conectados.


Como se uso en mi codigo:

ModeloLienzo: Representa el modelo de datos del lienzo y proporciona métodos
 para agregar elementos al lienzo y obtener la lista de elementos.

VistaLienzo: Muestra la representación visual del lienzo en la consola. 
Tiene un método para mostrar los elementos actuales del lienzo.
ControladorLienzo: Interpreta las acciones del usuario y actualiza tanto el modelo como la vista. 
Contiene referencias al modelo y la vista, así como al mediador.

MediadorSesion: Actúa como un mediador entre el controlador y la vista. 
Se encarga de coordinar la comunicación entre ellos.

2. Lógica de Interacción

Usuarios interactúan con la VistaLienzo, que captura las entradas del usuario y las envía al ControladorLienzo. El ControladorLienzo actualiza el ModeloLienzo basado en las acciones del usuario. Cualquier cambio en el ModeloLienzo notifica a todas las vistas a través del patrón observador implícito en MVC. El MediadorSesion asegura que todas las acciones se reflejen en tiempo real en todas las instancias del cliente.

Explicacion de la logica en mi codigo:
 
La aplicación comienza creando instancias del modelo, la vista y el mediador, y pasando el controlador al mediador.
Se simula la interacción del usuario agregando elementos al lienzo (círculo y cuadrado).
Cada vez que se agrega un elemento, se notifica al mediador para que actualice la vista.
El mediador llama al método MostrarVista() del controlador, 
que a su vez obtiene los elementos actuales del modelo y pide a la vista que los muestre.
La vista muestra los elementos actuales del lienzo en la consola.

Uso del mediador

El mediador actúa como un intermediario entre el controlador y la vista. Permite que el controlador notifique a la vista sobre los cambios en el modelo sin que el controlador tenga que conocer directamente la vista. Esto facilita la comunicación entre el controlador y la vista, promoviendo la separación de responsabilidades y el bajo acoplamiento entre ellos.

3. Prueba del Sistema

Simular múltiples usuarios dibujando simultáneamente para asegurar que los cambios se sincronizan correctamente. Verificar la capacidad de la aplicación para manejar entradas concurrentes sin perder datos. Evaluar la interfaz de usuario para asegurar que es intuitiva y permite una interacción fluida. Objetivo de Aprendizaje Comprender cómo el patrón MVC organiza el software en componentes manejables y promueve la separación de responsabilidades. Aprender a implementar el patrón Mediador para reducir la complejidad de la comunicación entre múltiples componentes, especialmente en aplicaciones colaborativas en tiempo real. Desarrollar habilidades en la creación de aplicaciones interactivas y colaborativas que requieren coordinación efectiva entre múltiples usuarios y componentes del sistema.

image

Codigo del Programa

using System;
using System.Collections.Generic;

// Modelo del lienzo
public class ModeloLienzo
{
    private List<string> elementos = new List<string>();

    public void AgregarElemento(string elemento)
    {
        elementos.Add(elemento);
    }

    public List<string> ObtenerElementos()
    {
        return elementos;
    }
}

// Vista del lienzo
public class VistaLienzo
{
    public void MostrarElementos(List<string> elementos)
    {
        Console.WriteLine("Elementos en el lienzo:");
        foreach (var elemento in elementos)
        {
            Console.WriteLine("- " + elemento);
        }
    }
}

// Controlador del lienzo
public class ControladorLienzo
{
    private readonly ModeloLienzo modelo;
    private readonly VistaLienzo vista;
    private readonly MediadorSesion mediador;

    public ControladorLienzo(ModeloLienzo modelo, VistaLienzo vista, MediadorSesion mediador)
    {
        this.modelo = modelo;
        this.vista = vista;
        this.mediador = mediador;
    }

    public void AgregarElemento(string elemento)
    {
        modelo.AgregarElemento(elemento);
        mediador.NotificarCambios();
    }

    public void MostrarVista()
    {
        var elementos = modelo.ObtenerElementos();
        vista.MostrarElementos(elementos);
    }
}

// Mediador de sesión
public class MediadorSesion
{
    private readonly ControladorLienzo controlador;

    public MediadorSesion(ControladorLienzo controlador)
    {
        this.controlador = controlador;
    }

    public void NotificarCambios()
    {
        controlador.MostrarVista();
    }
}

// Clase principal
class Program
{
    static void Main(string[] args)
    {
        // Crear instancias de los componentes
        var modelo = new ModeloLienzo();
        var vista = new VistaLienzo();
        var mediador = new MediadorSesion(new ControladorLienzo(modelo, vista, null));

        // Simular interacción del usuario
        Console.WriteLine("Agregando un círculo al lienzo...");
        modelo.AgregarElemento("Círculo");

        Console.WriteLine("Agregando un cuadrado al lienzo...");
        modelo.AgregarElemento("Cuadrado");

        // Mostrar vista actualizada
        vista.MostrarElementos(modelo.ObtenerElementos());
    }
}

Conclusion

El programa implementa los patrones de diseño Modelo-Vista-Controlador (MVC) y Mediador para desarrollar una aplicación de dibujo colaborativo en línea en la consola. Estos patrones permiten separar las preocupaciones en distintos componentes interconectados, lo que facilita el mantenimiento y la escalabilidad del código.

El ModeloLienzo gestiona el estado del lienzo, mientras que la VistaLienzo muestra la representación visual del lienzo en la consola. El ControladorLienzo interpreta las acciones del usuario y actualiza tanto el modelo como la vista. El MediadorSesion actúa como intermediario entre el controlador y la vista, facilitando la comunicación entre ellos.

Al simular la interacción del usuario, podemos ver cómo los cambios en el modelo se reflejan automáticamente en la vista, gracias al patrón Mediador. Esto proporciona una experiencia de usuario coherente y sincronizada en tiempo real.

@IoTeacher
Copy link

revisado

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment