A arquitetura escolhida para modelar o a estrutura do frontent foi a arquitetura BLoC (Business Logic Component). Este padrão foi apresentado em 2018 no evento DartConf e possui o objetivo de segmentar as lógicas de negócio da interface do usuário através de um gerenciador de estados que seja facilmente reutilizável.

Este modelo é separado em 5 unidades básicas: BLoC, Eventos, Estados, UI, Requester.

• UI: Interface ao qual o usuário interage. As interações disparam eventos;

• Eventos: Alteram os estados da aplicação;

• Estados: Definem o fluxo de informação da aplicação. e.g um estado loading define se a página está carregando;

• BLoC: Onde a lógica de negócio é aplicada, blindando a interface de conter mais informações do que o necessário para interagir com o usuário. Este componente é a principal interface entre os demais componentes da arquitetura;

• Requester: Esta unidade é responsável por realizar requisições para o backend, sendo ela a interface entre o frontend e os serviços externos.

    Podemos modelar esta arquitetura da seguinte maneira:

Foi definido o modelo de arquitetura MVCS para estruturar o backend. Este modelo consiste na criação de quatro componentes base: Model, View, Controller e Service. O MVCS permite uma separação clara entre as camadas controladora e regras de negócio, deste modo se torna simples e coerente a integração com a arquitetura BLoC. Além disto alterações na camada controladora não afetam as camadas de negócio, blindando a modelagem e as regras de negócio já definidas que não devem ser alterados conforme a expansão do projeto. A figura é um diagrama que apresenta a troca de informações entre as quatro camadas do MVCS.