Arquitetura As Is
O software Projeto Pizza & Beer DUKAHRIOCA utiliza o estilo arquitetural client-server e o padrão de projeto REST API.
Para entender melhor a função de cada um desses módulos observe a tabela de responsabilidades abaixo:
| Componente | Responsabilidade |
|---|---|
| Pages | Esse módulo é responsável pela exibição das páginas da aplicação de forma interativa com o usuário. Existem páginas de início, pedido e carrinho. |
| Components | Os componentes da aplicação são responsáveis por exibir elementos de uma página que é comum entre diversas páginas ou que aparece várias vezes na mesma página. Existem os componentes de cabeçalho e rodapé da página; botão; item do carrinho; exibir categorias; ordenar pizzas por avaliação, preço ou nome; e para exibir uma pizza junto de seus detalhes |
| Redux | O redux é responsável de gerenciar o estado global em aplicações, facilitando compartilhamento e atualização de dados entre os componentes (adicionar, excluir, remover, editar, diminuir quantidade, filtrar) |
| Componente | Responsabilidade |
|---|---|
| Routes | É responsável por definir e gerenciar as rotas (ou endpoints) de uma aplicação Express. O Express é um framework web para Node.js que facilita a criação de aplicativos e APIs. |
| Database | É responsável por estabelecer a conexão com um banco de dados MongoDB e retornar a instância do banco de dados para que possa ser usada em outras partes do código. |
| Componente | Descrição |
|---|---|
| CartItem.jsx | A função desse componente é renderizar as informações de um item específico do carrinho, como o nome do produto, a quantidade e preço. Ele exibe esses detalhes em uma interface de usuário para que os usuários possam ver facilmente o que está no carrinho e fazer ajustes, como alterar a quantidade do item ou removê-lo completamente. |
| Categories.jsx | Lida com a exibição e manipulação de categorias e é responsável por exibir uma lista de categorias, permitindo que o usuário interaja com elas. |
| SortPopup.jsx | Permite ao usuário selecionar um critério de ordenação para uma lista de itens. |
| Button.jsx | Renderiza um botão na interface do usuário, permitindo que os usuários interajam com ele por meio de cliques. |
Durante a análise de arquitetura as-is alguns padrões de projeto foram encontrados são eles:
- Builder: No projeto uma página é renderizada de forma que uma uma página complexa é construída a partir de componentes que se preocupam apenas com a respectiva renderização do componente. Isso é feito por exemplo na página “Home” que é construída por vários componentes como o “Pizza Block”, “Categories”, “SortPopup” e “LoadingBlock”, note que o “Pizza Block” por sua vez também chama o componente “Button” em sua renderização. Portanto, é utilizado o padrão de design criacional builder no qual que permite construir objetos complexos passo a passo, uma vez que o Builder sugere que você extraia o código de construção do objeto de sua própria classe e o mova para objetos separados.
- Observer: O código utiliza o padrão de projeto observer, esse padrão permite definir um mecanismo de inscrição para notificar vários objetos sobre quaisquer eventos que ocorram com o objeto que estão observando. No código é utilizado o hook useState, quando ocorre uma atualização no conteúdo desse hook, os componentes que o utilizam/renderizam novamente para apresentar a DOM atualizada.
- Facade: No código deles é utilizado o facade, existem arquivos “index.js” na pasta “pages” e na pasta “components” que são utilizados como uma fachada para exportar todos os módulos daquele pacote, os pacotes importam os módulos desejados chamando o arquivo index.js daquele pacote.