Beispiel #1
0
        static void Banking()
        {
            const long   workspaceId = 0;
            const string apiKey      = "";
            const string apiSecret   = "";

            StructurizrClient structurizrClient = new StructurizrClient(apiKey, apiSecret);
            Workspace         workspace         = new Workspace("C4 Model Microservices - Sistema de Monitoreo", "Sistema de Monitoreo del Traslado Aéreo de Vacunas SARS-CoV-2");
            Model             model             = workspace.Model;
            ViewSet           viewSet           = workspace.Views;

            // 1. Diagrama de Contexto
            SoftwareSystem monitoringSystem = model.AddSoftwareSystem("Monitoreo del Traslado Aéreo de Vacunas SARS-CoV-2", "Permite el seguimiento y monitoreo del traslado aéreo a nuestro país de las vacunas para la COVID-19.");
            SoftwareSystem googleMaps       = model.AddSoftwareSystem("Google Maps", "Plataforma que ofrece una REST API de información geo referencial.");
            SoftwareSystem aircraftSystem   = model.AddSoftwareSystem("Aircraft System", "Permite transmitir información en tiempo real por el avión del vuelo a nuestro sistema");

            Person ciudadano  = model.AddPerson("Ciudadano", "Ciudadano peruano.");
            Person periodista = model.AddPerson("Periodista", "Periodista de los diferentes medios de prensa.");
            Person developer  = model.AddPerson("Developer", "Developer - Open Data.");

            ciudadano.Uses(monitoringSystem, "Realiza consultas para mantenerse al tanto de la planificación de los vuelos hasta la llegada del lote de vacunas al Perú");
            periodista.Uses(monitoringSystem, "Realiza consultas para mantenerse al tanto de la planificación de los vuelos hasta la llegada del lote de vacunas al Perú");
            developer.Uses(monitoringSystem, "Realiza consultas a la REST API para mantenerse al tanto de la planificación de los vuelos hasta la llegada del lote de vacunas al Perú");
            monitoringSystem.Uses(aircraftSystem, "Consulta información en tiempo real por el avión del vuelo");
            monitoringSystem.Uses(googleMaps, "Usa");

            SystemContextView contextView = viewSet.CreateSystemContextView(monitoringSystem, "Contexto", "Diagrama de contexto");

            contextView.PaperSize = PaperSize.A4_Landscape;
            contextView.AddAllSoftwareSystems();
            contextView.AddAllPeople();

            // Tags
            monitoringSystem.AddTags("SistemaMonitoreo");
            googleMaps.AddTags("GoogleMaps");
            aircraftSystem.AddTags("AircraftSystem");
            ciudadano.AddTags("Ciudadano");
            periodista.AddTags("Periodista");
            developer.AddTags("Developer");

            Styles styles = viewSet.Configuration.Styles;

            styles.Add(new ElementStyle("Ciudadano")
            {
                Background = "#0a60ff", Color = "#ffffff", Shape = Shape.Person
            });
            styles.Add(new ElementStyle("Periodista")
            {
                Background = "#08427b", Color = "#ffffff", Shape = Shape.Person
            });
            styles.Add(new ElementStyle("Developer")
            {
                Background = "#facc2e", Shape = Shape.Robot
            });
            styles.Add(new ElementStyle("SistemaMonitoreo")
            {
                Background = "#008f39", Color = "#ffffff", Shape = Shape.RoundedBox
            });
            styles.Add(new ElementStyle("GoogleMaps")
            {
                Background = "#90714c", Color = "#ffffff", Shape = Shape.RoundedBox
            });
            styles.Add(new ElementStyle("AircraftSystem")
            {
                Background = "#2f95c7", Color = "#ffffff", Shape = Shape.RoundedBox
            });

            // 2. Diagrama de Contenedores
            Container mobileApplication        = monitoringSystem.AddContainer("Mobile App", "Permite a los usuarios visualizar un dashboard con el resumen de toda la información del traslado de los lotes de vacunas.", "Flutter");
            Container webApplication           = monitoringSystem.AddContainer("Web App", "Permite a los usuarios visualizar un dashboard con el resumen de toda la información del traslado de los lotes de vacunas.", "Flutter Web");
            Container landingPage              = monitoringSystem.AddContainer("Landing Page", "", "Flutter Web");
            Container apiGateway               = monitoringSystem.AddContainer("API Gateway", "API Gateway", "Spring Boot port 8080");
            Container flightPlanningContext    = monitoringSystem.AddContainer("Flight Planning Context", "Bounded Context del Microservicio de Planificación de Vuelos", "Spring Boot port 8081");
            Container airportContext           = monitoringSystem.AddContainer("Airport Context", "Bounded Context del Microservicio de información de Aeropuertos", "Spring Boot port 8082");
            Container aircraftInventoryContext = monitoringSystem.AddContainer("Aircraft Inventory Context", "Bounded Context del Microservicio de Inventario de Aviones", "Spring Boot port 8083");
            Container vaccinesInventoryContext = monitoringSystem.AddContainer("Vaccines Inventory Context", "Bounded Context del Microservicio de Inventario de Vacunas", "Spring Boot port 8084");
            Container monitoringContext        = monitoringSystem.AddContainer("Monitoring Context", "Bounded Context del Microservicio de Monitoreo en tiempo real del status y ubicación del vuelo que transporta las vacunas", "Spring Boot port 8085");
            Container messageBus               =
                monitoringSystem.AddContainer("Bus de Mensajes en Cluster de Alta Disponibilidad", "Transporte de eventos del dominio.", "RabbitMQ");
            Container flightPlanningContextDatabase     = monitoringSystem.AddContainer("Flight Planning Context DB", "", "Oracle");
            Container airportContextDatabase            = monitoringSystem.AddContainer("Airport Context DB", "", "Oracle");
            Container aircraftInventoryContextDatabase  = monitoringSystem.AddContainer("Aircraft Inventory Context DB", "", "Oracle");
            Container vaccinesInventoryContextDatabase  = monitoringSystem.AddContainer("Vaccines Inventory Context DB", "", "Oracle");
            Container monitoringContextDatabase         = monitoringSystem.AddContainer("Monitoring Context DB", "", "Oracle");
            Container monitoringContextReplicaDatabase  = monitoringSystem.AddContainer("Monitoring Context DB Replica", "", "Oracle");
            Container monitoringContextReactiveDatabase = monitoringSystem.AddContainer("Monitoring Context Reactive DB", "", "Firebase Cloud Firestore");

            ciudadano.Uses(mobileApplication, "Consulta");
            ciudadano.Uses(webApplication, "Consulta");
            ciudadano.Uses(landingPage, "Consulta");
            periodista.Uses(mobileApplication, "Consulta");
            periodista.Uses(webApplication, "Consulta");
            periodista.Uses(landingPage, "Consulta");
            mobileApplication.Uses(apiGateway, "API Request", "JSON/HTTPS");
            webApplication.Uses(apiGateway, "API Request", "JSON/HTTPS");
            developer.Uses(apiGateway, "API Request", "JSON/HTTPS");
            apiGateway.Uses(flightPlanningContext, "API Request", "JSON/HTTPS");
            apiGateway.Uses(airportContext, "API Request", "JSON/HTTPS");
            apiGateway.Uses(aircraftInventoryContext, "API Request", "JSON/HTTPS");
            apiGateway.Uses(vaccinesInventoryContext, "API Request", "JSON/HTTPS");
            apiGateway.Uses(monitoringContext, "API Request", "JSON/HTTPS");
            flightPlanningContext.Uses(messageBus, "Publica y consume eventos del dominio");
            flightPlanningContext.Uses(flightPlanningContextDatabase, "", "JDBC");
            airportContext.Uses(messageBus, "Publica y consume eventos del dominio");
            airportContext.Uses(airportContextDatabase, "", "JDBC");
            aircraftInventoryContext.Uses(messageBus, "Publica y consume eventos del dominio");
            aircraftInventoryContext.Uses(aircraftInventoryContextDatabase, "", "JDBC");
            vaccinesInventoryContext.Uses(messageBus, "Publica y consume eventos del dominio");
            vaccinesInventoryContext.Uses(vaccinesInventoryContextDatabase, "", "JDBC");
            monitoringContext.Uses(messageBus, "Publica y consume eventos del dominio");
            monitoringContext.Uses(monitoringContextDatabase, "", "JDBC");
            monitoringContext.Uses(monitoringContextReplicaDatabase, "", "JDBC");
            monitoringContext.Uses(monitoringContextReactiveDatabase, "", "");
            monitoringContextDatabase.Uses(monitoringContextReplicaDatabase, "Replica");
            monitoringContext.Uses(googleMaps, "API Request", "JSON/HTTPS");
            monitoringContext.Uses(aircraftSystem, "API Request", "JSON/HTTPS");

            // Tags
            mobileApplication.AddTags("MobileApp");
            webApplication.AddTags("WebApp");
            landingPage.AddTags("LandingPage");
            apiGateway.AddTags("APIGateway");
            flightPlanningContext.AddTags("FlightPlanningContext");
            flightPlanningContextDatabase.AddTags("FlightPlanningContextDatabase");
            airportContext.AddTags("AirportContext");
            airportContextDatabase.AddTags("AirportContextDatabase");
            aircraftInventoryContext.AddTags("AircraftInventoryContext");
            aircraftInventoryContextDatabase.AddTags("AircraftInventoryContextDatabase");
            vaccinesInventoryContext.AddTags("VaccinesInventoryContext");
            vaccinesInventoryContextDatabase.AddTags("VaccinesInventoryContextDatabase");
            monitoringContext.AddTags("MonitoringContext");
            monitoringContextDatabase.AddTags("MonitoringContextDatabase");
            monitoringContextReplicaDatabase.AddTags("MonitoringContextReplicaDatabase");
            monitoringContextReactiveDatabase.AddTags("MonitoringContextReactiveDatabase");
            messageBus.AddTags("MessageBus");

            styles.Add(new ElementStyle("MobileApp")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.MobileDevicePortrait, Icon = ""
            });
            styles.Add(new ElementStyle("WebApp")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = ""
            });
            styles.Add(new ElementStyle("LandingPage")
            {
                Background = "#929000", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = ""
            });
            styles.Add(new ElementStyle("APIGateway")
            {
                Shape = Shape.RoundedBox, Background = "#0000ff", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("FlightPlanningContext")
            {
                Shape = Shape.Hexagon, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("FlightPlanningContextDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("AirportContext")
            {
                Shape = Shape.Hexagon, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("AirportContextDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("AircraftInventoryContext")
            {
                Shape = Shape.Hexagon, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("AircraftInventoryContextDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("VaccinesInventoryContext")
            {
                Shape = Shape.Hexagon, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("VaccinesInventoryContextDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringContext")
            {
                Shape = Shape.Hexagon, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringContextDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringContextReplicaDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringContextReactiveDatabase")
            {
                Shape = Shape.Cylinder, Background = "#ff0000", Color = "#ffffff", Icon = ""
            });
            styles.Add(new ElementStyle("MessageBus")
            {
                Width = 850, Background = "#fd8208", Color = "#ffffff", Shape = Shape.Pipe, Icon = ""
            });

            ContainerView containerView = viewSet.CreateContainerView(monitoringSystem, "Contenedor", "Diagrama de contenedores");

            contextView.PaperSize = PaperSize.A4_Landscape;
            containerView.AddAllElements();

            // 3. Diagrama de Componentes
            Component domainLayer                  = monitoringContext.AddComponent("Domain Layer", "", "Spring Boot");
            Component monitoringController         = monitoringContext.AddComponent("Monitoring Controller", "REST API endpoints de monitoreo.", "Spring Boot REST Controller");
            Component monitoringApplicationService = monitoringContext.AddComponent("Monitoring Application Service", "Provee métodos para el monitoreo, pertenece a la capa Application de DDD", "Spring Component");
            Component flightRepository             = monitoringContext.AddComponent("Flight Repository", "Información del vuelo", "Spring Component");
            Component vaccineLoteRepository        = monitoringContext.AddComponent("VaccineLote Repository", "Información de lote de vacunas", "Spring Component");
            Component locationRepository           = monitoringContext.AddComponent("Location Repository", "Ubicación del vuelo", "Spring Component");
            Component aircraftSystemFacade         = monitoringContext.AddComponent("Aircraft System Facade", "", "Spring Component");

            apiGateway.Uses(monitoringController, "", "JSON/HTTPS");
            monitoringController.Uses(monitoringApplicationService, "Invoca métodos de monitoreo");
            monitoringController.Uses(aircraftSystemFacade, "Usa");
            monitoringApplicationService.Uses(domainLayer, "Usa", "");
            monitoringApplicationService.Uses(flightRepository, "", "JDBC");
            monitoringApplicationService.Uses(vaccineLoteRepository, "", "JDBC");
            monitoringApplicationService.Uses(locationRepository, "", "JDBC");
            flightRepository.Uses(monitoringContextDatabase, "", "JDBC");
            vaccineLoteRepository.Uses(monitoringContextDatabase, "", "JDBC");
            locationRepository.Uses(monitoringContextDatabase, "", "JDBC");
            locationRepository.Uses(monitoringContextReactiveDatabase, "", "");
            locationRepository.Uses(googleMaps, "", "JSON/HTTPS");
            aircraftSystemFacade.Uses(aircraftSystem, "JSON/HTTPS");

            // Tags
            domainLayer.AddTags("DomainLayer");
            monitoringController.AddTags("MonitoringController");
            monitoringApplicationService.AddTags("MonitoringApplicationService");
            flightRepository.AddTags("FlightRepository");
            vaccineLoteRepository.AddTags("VaccineLoteRepository");
            locationRepository.AddTags("LocationRepository");
            aircraftSystemFacade.AddTags("AircraftSystemFacade");

            styles.Add(new ElementStyle("DomainLayer")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringController")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringApplicationService")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("MonitoringDomainModel")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("FlightStatus")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("FlightRepository")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("VaccineLoteRepository")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("LocationRepository")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });
            styles.Add(new ElementStyle("AircraftSystemFacade")
            {
                Shape = Shape.Component, Background = "#facc2e", Icon = ""
            });

            ComponentView componentView = viewSet.CreateComponentView(monitoringContext, "Components", "Component Diagram");

            componentView.PaperSize = PaperSize.A4_Landscape;
            componentView.Add(mobileApplication);
            componentView.Add(webApplication);
            componentView.Add(apiGateway);
            componentView.Add(monitoringContextDatabase);
            componentView.Add(monitoringContextReactiveDatabase);
            componentView.Add(aircraftSystem);
            componentView.Add(googleMaps);
            componentView.AddAllComponents();

            structurizrClient.UnlockWorkspace(workspaceId);
            structurizrClient.PutWorkspace(workspaceId, workspace);
        }
        static void Banking()
        {
            const long   workspaceId = 0;
            const string apiKey      = "";
            const string apiSecret   = "";

            StructurizrClient structurizrClient = new StructurizrClient(apiKey, apiSecret);
            Workspace         workspace         = new Workspace("Banking", "Banking - C4 Model");
            Model             model             = workspace.Model;

            SoftwareSystem internetBankingSystem  = model.AddSoftwareSystem("Internet Banking", "Permite a los clientes consultar información de sus cuentas y realizar operaciones.");
            SoftwareSystem mainframeBankingSystem = model.AddSoftwareSystem("Mainframe Banking", "Almacena información del core bancario.");
            SoftwareSystem mobileAppSystem        = model.AddSoftwareSystem("Mobile App", "Permite a los clientes consultar información de sus cuentas y realizar operaciones.");
            SoftwareSystem emailSystem            = model.AddSoftwareSystem("SendGrid", "Servicio de envío de notificaciones por email.");

            Person cliente = model.AddPerson("Cliente", "Cliente del banco.");
            Person cajero  = model.AddPerson("Cajero", "Empleado del banco.");

            mainframeBankingSystem.AddTags("Mainframe");
            mobileAppSystem.AddTags("Mobile App");
            emailSystem.AddTags("SendGrid");

            cliente.Uses(internetBankingSystem, "Realiza consultas y operaciones bancarias.");
            cliente.Uses(mobileAppSystem, "Realiza consultas y operaciones bancarias.");
            cajero.Uses(mainframeBankingSystem, "Usa");

            internetBankingSystem.Uses(mainframeBankingSystem, "Usa");
            internetBankingSystem.Uses(emailSystem, "Envía notificaciones de email");
            mobileAppSystem.Uses(internetBankingSystem, "Usa");

            emailSystem.Delivers(cliente, "Envía notificaciones de email", "SendGrid");

            ViewSet viewSet = workspace.Views;

            // 1. Diagrama de Contexto
            SystemContextView contextView = viewSet.CreateSystemContextView(internetBankingSystem, "Contexto", "Diagrama de contexto - Banking");

            contextView.PaperSize = PaperSize.A4_Landscape;
            contextView.AddAllSoftwareSystems();
            contextView.AddAllPeople();
            //contextView.EnableAutomaticLayout();

            Styles styles = viewSet.Configuration.Styles;

            styles.Add(new ElementStyle(Tags.Person)
            {
                Background = "#0a60ff", Color = "#ffffff", Shape = Shape.Person
            });
            styles.Add(new ElementStyle("Mobile App")
            {
                Background = "#29c732", Color = "#ffffff", Shape = Shape.MobileDevicePortrait
            });
            styles.Add(new ElementStyle("Mainframe")
            {
                Background = "#90714c", Color = "#ffffff", Shape = Shape.RoundedBox
            });
            styles.Add(new ElementStyle("SendGrid")
            {
                Background = "#a5cdff", Color = "#ffffff", Shape = Shape.RoundedBox
            });

            // 2. Diagrama de Contenedores
            Container webApplication = internetBankingSystem.AddContainer("Aplicación Web", "Permite a los clientes consultar información de sus cuentas y realizar operaciones.", "ReactJS, nginx port 80");
            Container restApi        = internetBankingSystem.AddContainer("RESTful API", "Permite a los clientes consultar información de sus cuentas y realizar operaciones.", "Net Core, nginx port 80");
            Container worker         = internetBankingSystem.AddContainer("Worker", "Manejador del bus de mensajes.", "Net Core");
            Container database       = internetBankingSystem.AddContainer("Base de Datos", "Repositorio de información bancaria.", "Oracle 12c port 1521");
            Container messageBus     = internetBankingSystem.AddContainer("Bus de Mensajes", "Transporte de eventos del dominio.", "RabbitMQ");

            webApplication.AddTags("WebApp");
            restApi.AddTags("API");
            worker.AddTags("Worker");
            database.AddTags("Database");
            messageBus.AddTags("MessageBus");

            cliente.Uses(webApplication, "Usa", "https 443");
            webApplication.Uses(restApi, "Usa", "https 443");
            worker.Uses(restApi, "Usa", "https 443");
            worker.Uses(messageBus, "Usa");
            worker.Uses(mainframeBankingSystem, "Usa");
            restApi.Uses(database, "Usa", "jdbc 1521");
            restApi.Uses(messageBus, "Usa");
            restApi.Uses(emailSystem, "Usa", "https 443");
            mobileAppSystem.Uses(restApi, "Usa");

            styles.Add(new ElementStyle("WebApp")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
            });
            styles.Add(new ElementStyle("API")
            {
                Background = "#929000", Color = "#ffffff", Shape = Shape.RoundedBox, Icon = "https://dotnet.microsoft.com/static/images/redesign/downloads-dot-net-core.svg?v=U_8I9gzFF2Cqi5zUNx-kHJuou_BWNurkhN_kSm3mCmo"
            });
            styles.Add(new ElementStyle("Worker")
            {
                Icon = "https://dotnet.microsoft.com/static/images/redesign/downloads-dot-net-core.svg?v=U_8I9gzFF2Cqi5zUNx-kHJuou_BWNurkhN_kSm3mCmo"
            });
            styles.Add(new ElementStyle("Database")
            {
                Background = "#ff0000", Color = "#ffffff", Shape = Shape.Cylinder, Icon = "https://4.bp.blogspot.com/-5JVtZBLlouA/V2LhWdrafHI/AAAAAAAADeU/_3bo_QH1WGApGAl-U8RkrFzHjdH6ryMoQCLcB/s200/12cdb.png"
            });
            styles.Add(new ElementStyle("MessageBus")
            {
                Width = 850, Background = "#fd8208", Color = "#ffffff", Shape = Shape.Pipe, Icon = "https://www.rabbitmq.com/img/RabbitMQ-logo.svg"
            });

            ContainerView containerView = viewSet.CreateContainerView(internetBankingSystem, "Contenedor", "Diagrama de contenedores - Banking");

            contextView.PaperSize = PaperSize.A4_Landscape;
            containerView.AddAllElements();
            //containerView.EnableAutomaticLayout();

            // 3. Diagrama de Componentes
            Component transactionController        = restApi.AddComponent("Transactions Controller", "Allows users to perform transactions.", "Spring Boot REST Controller");
            Component signinController             = restApi.AddComponent("SignIn Controller", "Allows users to sign in to the Internet Banking System.", "Spring Boot REST Controller");
            Component accountsSummaryController    = restApi.AddComponent("Accounts Controller", "Provides customers with an summary of their bank accounts.", "Spring Boot REST Controller");
            Component securityComponent            = restApi.AddComponent("Security Component", "Provides functionality related to signing in, changing passwords, etc.", "Spring Bean");
            Component mainframeBankingSystemFacade = restApi.AddComponent("Mainframe Banking System Facade", "A facade onto the mainframe banking system.", "Spring Bean");

            restApi.Components.Where(c => "Spring Boot REST Controller".Equals(c.Technology)).ToList().ForEach(c => webApplication.Uses(c, "Uses", "HTTPS"));
            signinController.Uses(securityComponent, "Uses");
            accountsSummaryController.Uses(mainframeBankingSystemFacade, "Uses");
            securityComponent.Uses(database, "Reads from and writes to", "JDBC");
            mainframeBankingSystemFacade.Uses(mainframeBankingSystem, "Uses", "XML/HTTPS");

            ComponentView componentViewForRestApi = viewSet.CreateComponentView(restApi, "Components", "The components diagram for the REST API");

            componentViewForRestApi.PaperSize = PaperSize.A4_Landscape;
            componentViewForRestApi.AddAllContainers();
            componentViewForRestApi.AddAllComponents();
            componentViewForRestApi.Add(cliente);
            componentViewForRestApi.Add(mainframeBankingSystem);
            //componentViewForRestApi.EnableAutomaticLayout();

            structurizrClient.UnlockWorkspace(workspaceId);
            structurizrClient.PutWorkspace(workspaceId, workspace);
        }
Beispiel #3
0
        static void Banking()
        {
            const long   workspaceId = 65772;
            const string apiKey      = "60814d99-843f-4209-aaf8-5543b56f7d22";
            const string apiSecret   = "3ee20c69-c531-4ae7-80ec-fdf71168069c";

            StructurizrClient structurizrClient = new StructurizrClient(apiKey, apiSecret);
            Workspace         workspace         = new Workspace("Ezlabor", "Ezlabor - C4 Model");
            Model             model             = workspace.Model;

            SoftwareSystem EzLaborystem = model.AddSoftwareSystem("Ezlabor System", "Ofrece el contenido estático y la aplicación desde una página de red de freelancers y empleadores");
            SoftwareSystem gmailSystem  = model.AddSoftwareSystem("Gmail System", "Sistema de correos electrónicos interno de google");
            SoftwareSystem stripeSystem = model.AddSoftwareSystem("Stripe System", "Sistema de pagos por internet ");
            SoftwareSystem TwilioSystem = model.AddSoftwareSystem("Twilio System", "Sistema de verificiación de cuenta mediante SMS ");
            //SoftwareSystem googleMapsApi = model.AddSoftwareSystem("Google Maps API", "Permite a los clientes consultar información de sus cuentas y realizar operaciones.");

            Person Empresa    = model.AddPerson("Empresa", "Compañia que busca los servicios de un freelancer");
            Person Freelancer = model.AddPerson("Freelancer", "Personas especializadas en ciertos rubros que buscan trabajar de manera independiente");
            Person Empleador  = model.AddPerson("Empleador", "Persona con una microempresa o emprendimiento que necesita del servico de un freelancer");

            EzLaborystem.AddTags("Main System");
            gmailSystem.AddTags("Gmail API");
            //googleMapsApi.AddTags("Google Maps API");

            Empresa.Uses(EzLaborystem, "Visita el sitio usando", "[HTTPS]");
            Freelancer.Uses(EzLaborystem, "Visita el sitio usando", "[HTTPS]");
            Empleador.Uses(EzLaborystem, "Visita el sitio usando", "[HTTPS]");

            EzLaborystem.Uses(gmailSystem, "Enviar mensajes de correos electrónicos interno de google");
            EzLaborystem.Uses(stripeSystem, "Realiza peticiones a la API");
            EzLaborystem.Uses(TwilioSystem, "Realiza peticiones a la API");
            gmailSystem.Delivers(Empresa, "Envia mensajes de correo electrónico");
            gmailSystem.Delivers(Freelancer, "Envia mensajes de correo electrónico");
            gmailSystem.Delivers(Empleador, "Envia mensajes de correo electrónico");


            ViewSet viewSet = workspace.Views;

            // 1. Diagrama de Contexto
            SystemContextView contextView = viewSet.CreateSystemContextView(EzLaborystem, "Contexto", "Diagrama de contexto - Ezlabor");

            contextView.PaperSize = PaperSize.A4_Landscape;
            contextView.AddAllSoftwareSystems();
            contextView.AddAllPeople();

            Styles styles = viewSet.Configuration.Styles;

            styles.Add(new ElementStyle(Tags.Person)
            {
                Background = "#0a60ff", Color = "#ffffff", Shape = Shape.Person
            });
            styles.Add(new ElementStyle("Gmail API")
            {
                Background = "#90714c", Color = "#ffffff", Shape = Shape.RoundedBox
            });
            styles.Add(new ElementStyle("Google Maps API")
            {
                Background = "#a5cdff", Color = "#ffffff", Shape = Shape.RoundedBox
            });

            // 2. Diagrama de Contenedores
            Container webApplication = EzLaborystem.AddContainer("Aplicación Web Responsive", "Permite alos usuarios administrar el perfil, ver los mensajes, ver ofertas laboraler, etc", "Angular, nginx port 80");
            Container restApi        = EzLaborystem.AddContainer("RESTful API", "Proporciona funcionalidad de red entre freelancers de perros y dueños", "SpringBoot, nginx port 5000");
            Container database       = EzLaborystem.AddContainer("Base de Datos", "Repositorio de información de los usuarios", "Mysql");
            Container LandingPage    = EzLaborystem.AddContainer("Landing Page", "Página con información de la StartUp", "Html, CSS y JS");

            webApplication.AddTags("WebApp");
            restApi.AddTags("API");
            database.AddTags("Database");
            LandingPage.AddTags("LandingPage");

            Empresa.Uses(webApplication, "Usa", "https 443");
            Empresa.Uses(LandingPage, "Usa", "https 443");
            Freelancer.Uses(webApplication, "Usa", "https 443");
            Freelancer.Uses(LandingPage, "Usa", "https 443");
            Empleador.Uses(webApplication, "Usa", "https 443");
            Empleador.Uses(LandingPage, "Usa", "https 443");
            webApplication.Uses(restApi, "Usa", "https 443");
            webApplication.Uses(stripeSystem, "https 443");
            webApplication.Uses(gmailSystem, "https 443");
            webApplication.Uses(TwilioSystem, "https 443");
            restApi.Uses(database, "Persistencia de datos");
            LandingPage.Uses(webApplication, "Redirige");

            styles.Add(new ElementStyle("WebApp")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjM1MyIgaGVpZ2h0PSIyNTAwIiB2aWV3Qm94PSIwIDAgMjU2IDI3MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PHBhdGggZD0iTS4xIDQ1LjUyMkwxMjUuOTA4LjY5N2wxMjkuMTk2IDQ0LjAyOC0yMC45MTkgMTY2LjQ1LTEwOC4yNzcgNTkuOTY2LTEwNi41ODMtNTkuMTY5TC4xIDQ1LjUyMnoiIGZpbGw9IiNFMjMyMzciLz48cGF0aCBkPSJNMjU1LjEwNCA0NC43MjVMMTI1LjkwOC42OTd2MjcwLjQ0NGwxMDguMjc3LTU5Ljg2NiAyMC45MTktMTY2LjU1eiIgZmlsbD0iI0I1MkUzMSIvPjxwYXRoIGQ9Ik0xMjYuMTA3IDMyLjI3NEw0Ny43MTQgMjA2LjY5M2wyOS4yODUtLjQ5OCAxNS43MzktMzkuMzQ3aDcwLjMyNWwxNy4yMzMgMzkuODQ1IDI3Ljk5LjQ5OC04Mi4xNzktMTc0LjkxN3ptLjIgNTUuODgybDI2LjQ5NiA1NS4zODNoLTQ5LjgwNmwyMy4zMS01NS4zODN6IiBmaWxsPSIjRkZGIi8+PC9zdmc+"
            });
            styles.Add(new ElementStyle("API")
            {
                Background = "#929000", Color = "#ffffff", Shape = Shape.RoundedBox, Icon = "data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNzY3LjggNzY4IiB3aWR0aD0iMjQ5OSIgaGVpZ2h0PSIyNTAwIj48c3R5bGU+LnN0MHtmaWxsOiM3N2JjMWZ9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjk4LjMgNDBjLTEwLjggMjUuOC0yNC41IDUwLjMtNDEgNzIuOEM1ODUuMSA0MC42IDQ4Ny4xIDAgMzg1IDAgMTczLjggMCAwIDE3NCAwIDM4NS41IDAgNDkxIDQzLjIgNTkyIDExOS42IDY2NC44bDE0LjIgMTIuNmM2OS40IDU4LjUgMTU3LjMgOTAuNyAyNDggOTAuNyAyMDAuOCAwIDM2OS42LTE1Ny40IDM4My45LTM1OCAxMC41LTk4LjItMTguMy0yMjIuNC02Ny40LTM3MC4xem0tNTI0IDYyN2MtNi4yIDcuNy0xNS43IDEyLjItMjUuNiAxMi4yLTE4LjEgMC0zMi45LTE0LjktMzIuOS0zM3MxNC45LTMzIDMyLjktMzNjNy41IDAgMTQuOSAyLjYgMjAuNyA3LjQgMTQuMSAxMS40IDE2LjMgMzIuMyA0LjkgNDYuNHptNTIyLjQtMTE1LjRjLTk1IDEyNi43LTI5Ny45IDg0LTQyOCA5MC4xIDAgMC0yMy4xIDEuNC00Ni4zIDUuMiAwIDAgOC43LTMuNyAyMC04IDkxLjMtMzEuOCAxMzQuNS0zOCAxOTAtNjYuNSAxMDQuNS01My4yIDIwNy44LTE2OS42IDIyOS4zLTI5MC43QzYyMS45IDM5OC4yIDUwMS4zIDQ5OC4zIDM5MS40IDUzOWMtNzUuMyAyNy44LTIxMS4zIDU0LjgtMjExLjMgNTQuOGwtNS41LTIuOUM4MiA1NDUuOCA3OS4yIDM0NS4xIDI0Ny41IDI4MC4zYzczLjctMjguNCAxNDQuMi0xMi44IDIyMy44LTMxLjggODUtMjAuMiAxODMuMy04NCAyMjMuMy0xNjcuMiA0NC44IDEzMy4xIDk4LjcgMzQxLjUgMi4xIDQ3MC4zeiIvPjwvc3ZnPg=="
            });
            styles.Add(new ElementStyle("Database")
            {
                Background = "#ff0000", Color = "#ffffff", Shape = Shape.Cylinder
            });
            styles.Add(new ElementStyle("LandingPage")
            {
                Background = "#d1c07b", Color = "#ffffff", Shape = Shape.WebBrowser
            });
            ContainerView containerView = viewSet.CreateContainerView(EzLaborystem, "Contenedor", "Diagrama de contenedores - EzLabor");

            contextView.PaperSize = PaperSize.A4_Landscape;
            containerView.AddAllElements();

            // 3. Diagrama de Componentes

            //Controllers
            Component signinController            = restApi.AddComponent("Sign in Controller", "Permite a los usuarios ingresar al sistema de Ezlabor", "SpringBoot REST Controller");
            Component notificaionSystemController = restApi.AddComponent("Notification System Controller", "Permite al usuario recibir notificaciones", "SpringBoot REST Controller");
            Component subscriptionController      = restApi.AddComponent("Subscription System Controller", "Permite al usuario recibir notificaciones", "SpringBoot REST Controller");
            Component MessageSystemController     = restApi.AddComponent("Message System Controller", "Permite a los usuarios comunicarse mediante mensajes det texto", "SpringBoot REST Controller");
            Component LocationsController         = restApi.AddComponent("Location System Controller", "Permite a los usuarios ver los distintos tipos de localidades", "SpringBoot REST Controller");
            Component UserProfileController       = restApi.AddComponent("User profile System Controller", "Permite a los usuarios editar su perfil", "SpringBoot REST Controller");
            Component HiringController            = restApi.AddComponent("Hiring System Controller", "Permite usar los servicios de contratación y reunión que estan disponibles", "SpringBoot REST Controller");

            //Services
            Component signinService            = restApi.AddComponent("Sign in Service", "Permite usar los servicios de sign in que se encuentra en la API");
            Component notificaionSystemService = restApi.AddComponent("Notification System Service", "Permite usar el servicio de notificación de la API");
            Component subscriptionService      = restApi.AddComponent("Subscription System Service", "Permite usar los servicios de subscripción de la API");
            Component MessageSystemService     = restApi.AddComponent("Message System Service", "Permite usar el servicio de mensajería de la API");
            Component LocationsService         = restApi.AddComponent("Locations System Service", "Permite usar el servicio de localización de la API");
            Component UserProfileService       = restApi.AddComponent("User profile System Service", "Permite usar el servicio de perfil de usuario de la API");
            Component HiringService            = restApi.AddComponent("Hiring System Service", "Permite usar el servicio de contratación  de la API");

            //Repositories
            Component signinRepository            = restApi.AddComponent("Sign in Repository", "Permite la comunicación entre el servicio de sign in  y la base de datos");
            Component notificaionSystemRepository = restApi.AddComponent("Notification System Repository", "Permite la comunicación entre el servicio de notificación y la base de datos");
            Component subscriptionRepository      = restApi.AddComponent("Subscription System Repository", "Permite la comunicación entre el servicio de subscripción y la base de datos");
            Component MessageSystemRepository     = restApi.AddComponent("Message  System Repository", "Permite la comunicación entre el servicio de mensajería  y la base de datos");
            Component LocationsRepository         = restApi.AddComponent("Location System Repository", "Permite la comunicación entre el servicio localización y la base de datos");
            Component UserProfileRepository       = restApi.AddComponent("User profile System Repository", "Permite la comunicación entre el servicio de perfil de usuario y la base de datos");
            Component HiringRepository            = restApi.AddComponent("Hiring System Repository", "Permite la comunicación entre el servicio de contratación  y la base de datos");

            // Uses
            restApi.Components.Where(c => "SpringBoot REST Controller".Equals(c.Technology)).ToList().ForEach(c => webApplication.Uses(c, "Uses", "HTTPS"));

            signinController.Uses(signinService, "Uses");
            notificaionSystemController.Uses(notificaionSystemService, "Uses");
            subscriptionController.Uses(subscriptionService, "Uses");
            MessageSystemController.Uses(MessageSystemService, "Uses");
            LocationsController.Uses(LocationsService, "Uses");
            UserProfileController.Uses(UserProfileService, "Uses");
            HiringController.Uses(HiringService, "Uses");


            signinService.Uses(signinRepository, "Uses");
            notificaionSystemService.Uses(notificaionSystemRepository, "Uses");
            subscriptionService.Uses(subscriptionRepository, "Uses");
            MessageSystemService.Uses(MessageSystemRepository, "Uses");
            LocationsService.Uses(LocationsRepository, "Uses");
            UserProfileService.Uses(UserProfileRepository, "Uses");
            HiringService.Uses(HiringRepository, "Uses");


            signinRepository.Uses(database, "Lee y escribes datos");
            notificaionSystemRepository.Uses(database, "Lee y escribes datos");
            subscriptionRepository.Uses(database, "Lee y escribes datos");
            MessageSystemRepository.Uses(database, "Lee y escribes datos");
            LocationsRepository.Uses(database, "Lee y escribes datos");
            UserProfileRepository.Uses(database, "Lee y escribes datos");
            HiringRepository.Uses(database, "Lee y escribes datos");



            ComponentView componentViewForRestApi = viewSet.CreateComponentView(restApi, "Components", "The components diagram for the REST API");

            componentViewForRestApi.PaperSize = PaperSize.A4_Landscape;
            componentViewForRestApi.AddAllContainers();
            componentViewForRestApi.AddAllComponents();
            componentViewForRestApi.Add(Empleador);
            componentViewForRestApi.Add(Empresa);
            componentViewForRestApi.Add(Freelancer);

            structurizrClient.UnlockWorkspace(workspaceId);
            structurizrClient.PutWorkspace(workspaceId, workspace);
        }
Beispiel #4
0
        static void Banking()
        {
            const long   workspaceId = 54351;
            const string apiKey      = "c289e1d0-d703-4114-bd20-0c57e2e3c18f";
            const string apiSecret   = "5795af71-0e72-4b66-a286-ac801015b755";

            StructurizrClient structurizrClient = new StructurizrClient(apiKey, apiSecret);
            Workspace         workspace         = new Workspace("Inventory", "Inventory - C4 Model");
            Model             model             = workspace.Model;

            SoftwareSystem internetBankingSystem = model.AddSoftwareSystem("Inventory", "Permite a los clientes consultar información de sus inventarios.");

            Person cliente = model.AddPerson("Cliente", "Cliente de Inventory.");

            cliente.Uses(internetBankingSystem, "Realiza consultas sobre sus inventarios.");

            ViewSet viewSet = workspace.Views;

            // 1. Diagrama de Contexto
            SystemContextView contextView = viewSet.CreateSystemContextView(internetBankingSystem, "Contexto", "Diagrama de contexto - Banking");

            contextView.PaperSize = PaperSize.A4_Landscape;
            contextView.AddAllSoftwareSystems();
            contextView.AddAllPeople();
            //contextView.EnableAutomaticLayout();

            Styles styles = viewSet.Configuration.Styles;

            styles.Add(new ElementStyle(Tags.Person)
            {
                Background = "#0a60ff", Color = "#ffffff", Shape = Shape.Person
            });
            styles.Add(new ElementStyle("Mobile App")
            {
                Background = "#29c732", Color = "#ffffff", Shape = Shape.MobileDevicePortrait
            });
            styles.Add(new ElementStyle("Mainframe")
            {
                Background = "#90714c", Color = "#ffffff", Shape = Shape.RoundedBox
            });
            styles.Add(new ElementStyle("SendGrid")
            {
                Background = "#a5cdff", Color = "#ffffff", Shape = Shape.RoundedBox
            });

            // 2. Diagrama de Contenedores
            Container webApplication        = internetBankingSystem.AddContainer("Aplicación Web React", "Permite a los clientes consultar información de sus inventarios", "ReactJS, nginx port 80");
            Container webApplicationVue     = internetBankingSystem.AddContainer("Aplicación Web Vue", "Permite a los clientes consultar información de sus inventarios", "Vue, nginx port 80");
            Container webApplicationAngular = internetBankingSystem.AddContainer("Aplicación Web Angular", "Permite a los clientes consultar información de sus inventarios", "Angular, nginx port 80");
            Container restApi    = internetBankingSystem.AddContainer("RESTful API", "Permite a los clientes consultar información de sus inventarios", "Nest, nginx port 80");
            Container root       = internetBankingSystem.AddContainer("ROOT", "Permite integrar los micro-frontends", "Single SPA, nginx port 80");
            Container database   = internetBankingSystem.AddContainer("Base de Datos", "Repositorio de información de inventarios.", "Postgres port 5432");
            Container hearthbeat = internetBankingSystem.AddContainer("HearthBeat", "Verifica cada 10 segundos que el API se este ejecutando", "Nodejs, ngix");

            webApplication.AddTags("WebAppReact");
            webApplicationVue.AddTags("WebAppVue");
            webApplicationAngular.AddTags("WebAppAngular");
            restApi.AddTags("API");
            database.AddTags("Database");
            root.AddTags("Root");
            hearthbeat.AddTags("HearthBeat");

            cliente.Uses(root, "Usa", "https 443");
            root.Uses(webApplicationVue, "Usa", "https 443");
            root.Uses(webApplicationAngular, "Usa", "https 443");
            root.Uses(webApplication, "Usa", "https 443");
            webApplication.Uses(restApi, "Usa", "https 443");
            webApplicationVue.Uses(restApi, "Usa", "https 443");
            webApplicationAngular.Uses(restApi, "Usa", "https 443");
            restApi.Uses(database, "Usa", "typeorm 5432");
            hearthbeat.Uses(restApi, "Petición", "https 443");

            styles.Add(new ElementStyle("WebAppReact")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = "data:image/png;base64,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"
            });
            styles.Add(new ElementStyle("WebAppVue")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = "data:image/png;base64,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"
            });
            styles.Add(new ElementStyle("WebAppAngular")
            {
                Background = "#9d33d6", Color = "#ffffff", Shape = Shape.WebBrowser, Icon = "data:image/png;base64,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"
            });
            styles.Add(new ElementStyle("API")
            {
                Background = "#929000", Color = "#ffffff", Shape = Shape.RoundedBox, Icon = "data:image/png;base64,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"
            });
            styles.Add(new ElementStyle("Root")
            {
                Background = "#929000", Color = "#ffffff", Shape = Shape.RoundedBox, Icon = "data:image/png;base64,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"
            });
            styles.Add(new ElementStyle("Database")
            {
                Background = "#ff0000", Color = "#ffffff", Shape = Shape.Cylinder
            });

            ContainerView containerView = viewSet.CreateContainerView(internetBankingSystem, "Contenedor", "Diagrama de contenedores - Banking");

            contextView.PaperSize = PaperSize.A4_Landscape;
            containerView.AddAllElements();
            //containerView.EnableAutomaticLayout();

            // 3. Diagrama de Componentes
            Component transactionController     = restApi.AddComponent("Products Controller", "Permite a los usuarios manejar sus productos.", "Nest REST Controller");
            Component signinController          = restApi.AddComponent("Auth Controller", "Permite a los usuarios iniciar sesión en Inventory.", "Nest REST Controller");
            Component accountsSummaryController = restApi.AddComponent("Customers Controller", "Proporciona a los clientes un resumen de sus cuentas.", "Nest REST Controller");
            Component qualityController         = restApi.AddComponent("Quality Controller", "Permite diagnosticar el estado del sistema.", "Nest REST Controller ");

            restApi.Components.Where(c => "Nest REST Controller".Equals(c.Technology)).ToList().ForEach(c => webApplication.Uses(c, "Uses", "HTTPS"));
            restApi.Components.Where(c => "Nest REST Controller".Equals(c.Technology)).ToList().ForEach(c => webApplicationVue.Uses(c, "Uses", "HTTPS"));
            restApi.Components.Where(c => "Nest REST Controller".Equals(c.Technology)).ToList().ForEach(c => webApplicationAngular.Uses(c, "Uses", "HTTPS"));
            // accountsSummaryController.Uses(mainframeBankingSystemFacade, "Uses");
            transactionController.Uses(database, "Lee y escribe en", "Typeorm");
            signinController.Uses(database, "Lee y escribe en", "Typeorm");
            accountsSummaryController.Uses(database, "Lee y escribe en", "Typeorm");
            hearthbeat.Uses(qualityController, "Usa", "https");

            ComponentView componentViewForRestApi = viewSet.CreateComponentView(restApi, "Components", "The components diagram for the REST API");

            componentViewForRestApi.PaperSize = PaperSize.A4_Landscape;
            componentViewForRestApi.AddAllContainers();
            componentViewForRestApi.AddAllComponents();
            componentViewForRestApi.Add(cliente);
            //componentViewForRestApi.EnableAutomaticLayout();

            structurizrClient.UnlockWorkspace(workspaceId);
            structurizrClient.PutWorkspace(workspaceId, workspace);
        }