DEV Community

Yuri Peixinho
Yuri Peixinho

Posted on

Etapa de Projeto (Design)

É nessa etapa que vamos projetar! Essa fase é crucial para o desenvolvimento, pois é nela que definimos como o sistema será estruturado e implementado. É nessa etapa que vamos traduzir os levantamentos de requisitos e analisados feita nas etapas anteriores em uma arquitetura concreta.

Essa fase pode ser dividida em várias etapas que incluem desde a definição da arquitetura, banco de dados até o design detalhado dos componentes. Seus principais aspectos são:

Ao final desses processos, teremos a Especificação de Documento de Design (DDS), também conhecido como Especificação Técnica. Esse documento é técnico e detalha a arquitetura, componentes, interfaces e outros aspectos técnicos de um software que serve como guia para os desenvolvedores durante a etapa de implementação e também como uma referência para futuros aprimoramentos ou manutenção do sistema.

1. Definição de Arquitetura do Sistema

Definir a arquitetura do sistema envolve estruturas a aplicação de forma organizada, garantindo escalabilidade, manutencão e desempenho adequado. Existem diversas formas e metodologias para definir a arquitetura de um software, a seguir são uns dos passos fundamentais.

Levantamento de Requisitos

Antes de definir a arquitetura, precisamos entender o que o sistema deve fazer. Você pode utilizar o documento de requisitos de software (SRS) para fazer essa etapa.

Funcionais: O que o sistema faz? (Exemplo: Upload de planilha, validação, exportação de XML).

Não funcionais: Requisitos técnicos (Exemplo: Segurança, escalabilidade, tempo de resposta).

Escolha do Estilo Arquitetural

A escolha do estilo arquitetural é uma das decisões mais importantes no desenvolvimento de um sistema. Ele define como os componentes interagem, como os dados fluem e como as regras de negócios são implementadas. Nesse caso o conhecimento técnico do desenvolvedor é importantissimo, a compreensão acerca dos estilos arquiteturais aumenta o leque de possibilidades de combinações e conceitos, deixando o software mais rico arquitetonicamente falando.

A seguir exemplificando com alguns dos principais estilos arquiteturais.

Estilo Arquitetural Descrição Aplicação no Seu Caso?
Monolítica Todo o código está centralizado em um único projeto. ❌ Não ideal se o sistema crescer, mas pode ser um primeiro passo.
Camadas (Layered Architecture) Separação em camadas como API, serviço e repositório. ✅ Boa opção inicial para organizar código e facilitar manutenção.
Hexagonal (Ports & Adapters) Divide a lógica de negócio de dependências externas (como banco e APIs). ✅ Útil se quiser flexibilidade para mudar fontes de dados.
Eventos (Event-Driven Architecture) Baseado em eventos assíncronos (Kafka, RabbitMQ). ❌ Muito complexo para este projeto.
Microsserviços Cada funcionalidade é um serviço separado. ❌ Desnecessário para um MVP, mas válido para escalabilidade futura.

Para o nosso exemplo a escolha recomendada foi Arquitetura em Camadas (Layered Architecture) ou Hexagonal para modularidade.

Definir os Componentes do Sistema

Agora que estabelecemos a arquitetura geral, precisamos detalhar quais os componentes do sistema e sua organização dentro das camadas definidas. Esses componentes garantirão modularidade, testabilidade e facilidade de manutenção.

Como exemplo, vou usar a o estilo arquitetural “Arquitetura em Camadas”. Vale ressaltar que a construção das camadas variam de acordo com o projeto, não existe uma regra ou padronização específica.

1️⃣ Camada de Apresentação (API/Web API)

  • Exposição de endpoints REST.
  • Autenticação e autorização (JWT).
  • Validação de requisições.

2️⃣ Camada de Serviço (Business Logic Layer)

  • Processamento de arquivos.
  • Validação dos dados conforme regras da EFD-Reinf.
  • Geração do XML.

3️⃣ Camada de Infraestrutura (Persistence/Data Layer)

  • Se armazenar informações, usará SQL Server ou PostgreSQL.
  • Pode ser stateless se não houver armazenamento.

4️⃣ Camada Externa (Integrações)

  • Bibliotecas para manipular Excel (EPPlus, OpenXML).
  • Geração de XML (System.Xml, XmlSerializer).

Segurança e Controle de Acesso

Segurança e Controle de acesso são aspectos fundamentais em qualquer sistema, principalmente onde exista dados sensíveis como informações do usuários, documentos ou transações financeiras.

Implementar essa etapa exige um conhecimento técnico do desenvolvedor sobre segurança e controle de acesso e é necessário um levantamento eficiente do que deve ser implementado. A seguir, um exemplo simples:

🔒 Autenticação: JWT (JSON Web Token) para login seguro.

🔒 Autorização: Cada usuário acessa apenas seus documentos.

🔒 Proteção contra ataques:

  • Rate limiting para evitar DoS.
  • Validação de input para evitar injeção SQL.
  • Criptografia de senhas (bcrypt ou hashing SHA-256).

Escolha das Tecnologias

Agora, definimos as tecnologias a serem usadas.

Componente Tecnologia/Detalhes
Back-end .NET 8, ASP.NET Core, GraphQL, FluentValidation, Serilog, AutoMapper
Banco de Dados SQL Server, PostgreSQL, Entity Framework Core, Dapper, Redis
Autenticação ASP.NET Identity, JWT, OAuth 2.0, IdentityServer4
Autorização ASP.NET Core Authorization Policies, RBAC, Claims-based Authorization
Frontend React.js, Angular, Tailwind CSS, Material-UI, Chart.js
Validação de Dados Joi, React Hook Form, Formik
Hospedagem (Back-end) Azure App Service, Docker, Heroku
Monitoramento Sentry, Prometheus, Grafana
CI/CD GitHub Actions, GitLab CI/CD, Azure DevOps
Versionamento de Código Git, GitHub, GitFlow
Testes de Integração xUnit, Selenium, Postman
API Documentation Swagger, NSwag
Teste de Performance Apache JMeter, Gatling

Definir a Infraestrutura

A fase de infraestrutura envolve servidores, redes, bancos de dados, containers, automação de deploy e estratégia de segurança. Ela pode ser configurada de diferentes formas, dependendo do nível de controle, desempenho e escalabilidade desejados. Os principais componentes da infraestrutura são: Hospedagem, Containers, Banco de Dados, Proxy Reverso, Monitoramento, Segurança e Automação.

Para nossa aplicação de exemplo vamos utilizar as seguintes tecnologias:

📌 Containerização: Docker para rodar em qualquer ambiente.

📌 CI/CD: GitHub Actions ou Azure DevOps para automação de deploy.

📌 Monitoramento: Logs via Serilog e Monitoramento de erros via Sentry.

Documentação e Testes

A documentação e os testes são pilares essenciais no desenvolvimento. Executar o levantamento sobre a documentação do sistema durante o processo de definição de arquitetura também é uma boa prática. Uma documentação eficiente garante que a equipe possa compreender, manter e validar a aplicação de forma eficiente.

Para nosso exemplo, vamos utilizar:

📝Swagger para documentação da API.

🔍Testes unitários com XUnit

🔍Testes de integração para garantir que o XML gerado está no formato correto.

2. Design e Modelagem de Dados

Se refere a estrutura de informações que serão armazenadas e processadas pelo sistema. Envolve a modelagem do banco de dado, escolha dos tipos de dados, normalização e definição de relações entre tabelas.

Levantamento de Entidades e Relacionamentos

O primeiro passo no design de dados é identificar as entidades que o sistema irá manipular. Além disso, devemos considerar as relações entre essas entidades.

Modelagem Relacional

Com base nas entidades identificadas, passamos para a modelagem relacional onde criamos as tabelas que serão usadas para armazenar dados no banco de dados. Cada entidade se tornará uma tabela, e os relacionamentos entre elas serão apresentados por chaves estrangeiras (FK) para garantir que as dependências sejam corretamente manipuladas.

  • Ver exemplo de tabelas para um sistema de geração de XML
    • Usuários
      • Id (PK)
      • Nome
      • Email
      • Senha (hash)
      • DataCriacao
    • Planilhas
      • Id (PK)
      • NomeArquivo
      • Caminho
      • UsuarioId (FK → Usuários)
      • DataUpload
    • DadosPlanilha
      • Id (PK)
      • PlanilhaId (FK → Planilhas)
      • Campo1
      • Campo2
      • Campo3
      • Campo4
    • XMLGerado
      • Id (PK)
      • UsuarioId (FK → Usuários)
      • PlanilhaId (FK → Planilhas)
      • ConteudoXML
      • DataGeracao

Normalização de Dados

A normalização é o processo que visar evitar redudância e inconsistência nos dados. Durante o design de dados é importante aplicar a regra de normalização para garantir que os dados sejam armazenados de maneira eficiente e sem duplicação.

3. Design da Interface do Usuário (UI/UX)

No design do produto a etapa de Interface e Experiência do usuário no desenvolvimento de um projeto é essencial para grantir que o sistema seja funcional, intuitivo e agradável para os usuários. No contexto do design de um projeto de software, essa fase envolve várias etapas que vão desde a compreensão dos requisitos até a prototipação e teste de usabilidade.

Um UI/UX bem implementado é muito importanto para o projeto, já que um bom design: evita problemas antes da implementação, melhora conversão e adoção, fazendo os usuários interagirem mais e parmanecer na plataforma, facilita o desenvolvimento, tornando o código mais modular e até aprimora a acessibilidade, podendo atender diferentes tipos de usuários.

O fluxo de uma implementação de UI/UX pode variar de acordo com o projeto, abaixo está elencado os principais pontos:

1️⃣ Pesquisa e Levantamento de Requisitos

Antes de começar a desenhar interfaces, o profissional responsável pelo UI/UX deve entender alguns pontos:

  • Perfil dos usuários: Quem usará o sistema? Quais são seus objetivos?
  • Os problemas a serem resolvidos: O que o sistema precisa melhorar ou otiminizar?
  • Fluxos e processos: Como os usuários interagem com sistemas similares?

2️⃣ Definição de Fluxos e Arquitetura da Informação

Nessa etapa se define como a informação será organizada e como os usuários navegarão no sistema. Os métodos utilizados são: diagramas de fluxos, card sorting e wireframes iniciais

  • Criação de User Flows (fluxos dos usuários) para mapear a jornada ideal
  • Estruturação da arquitetura da informação para garantir que o usuário encontre o que precisa com facilidade

3️⃣ Wireframes e Prototipação

Agora começa o esboço das telas:

  • Wireframes: Versões simplificadas da interface para definir a estrutura antes do design visual.
  • Protótipos: Modelos interativos que simulam a navegação no sistema.

4️⃣ Design Visual

Com os Wireframes validados, inicia-se a parte visual:

  • Definição de paleta de cores, tipografia e estilo visual
  • Criação de componentes reutilizáveis (botões, inputs cards)
  • Aplicação de princípio de design responsivo para diferentes telas (desktop, mobile)

5️⃣ Teste de Usabilidade e Validação

Antes da implementação final, é importante testar:

  • Testes de usabilidade: Aplicação prática com usuários reais para avaliar a facilidade de uso
  • A/B Testing: Comparação de versões para medir qual funciona melhor
  • Feedback contínuo: ajustes com base nas informaçõe reais

4. Planejamento de Implementação

O planejamento de implementação é a última etapa e é crucial para garantir que a arquitetura projetada será colocada em prática de forma eficiente, controlada e alinhada aos objetivos do projeto. O foco é traduzir o design da arquitetura em um plano de ação claro e específico para a implementação do sistema.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay