gif
Documentação é o mapa para um código sustentável.
gif
Reutilizar é crescer,
documentar é garantir.
light_mode
Logo Logo

Arquitetura do Sistema

  2. Projetos
  3. PSYCS
  4. Arquitetura do Sistema
Arquitetura do Sistema

Introdução

Este documento descreve a arquitetura, a configuração e o funcionamento do projeto com backend em PHP/Yii2 e frontend React/TypeScript. O objetivo é guiar desenvolvedores na compreensão e manutenção do projeto.

Arquitetura do Sistema

Backend - PHP

  • Framework: Yii2/PHP >7.4.
  • Funções principais:
    • Gerenciamento de APIs REST para comunicação com o frontend.
    • Conexão com banco de dados PostgreSQL.
    • Implementação de regras de negócio e validação de dados.

Frontend - React

  • Framework: Next.JS/TypeScript
  • Funções principais:
    • Renderização dinâmica de componentes.
    • Consumo de APIs fornecidas pelo backend.
    • Gerenciamento de estado ContextApi.
  • Bibliotecas:
    • Shadcn:
      • UI Kit baseado em Radix UI e Tailwind CSS.
      • Componentes prontos para uso, como botões, modais, etc.
      • Documentação: https://ui.shadcn.com
    • Tailwind:
      • Framework CSS para estilização rápida e responsiva.
      • Classes utilitárias para estilização de componentes.
      • Documentação: https://tailwindcss.com/docs
  • Estrutura de Pastas - Atomic Design
    • Atoms: Componentes básicos e reutilizáveis.
    • Molecules: Combinações de átomos para formar componentes mais complexos.
    • Organisms: Componentes compostos por moléculas e átomos.
    • Templates: Estruturas de página que utilizam organismos.
    • Pages: Páginas finais que utilizam templates.
    Pasta Nível O que é Exemplo
    Atoms Átomos Elementos básicos Botão, Input, Label, Ícone
    Molecules Moléculas Combinações simples de átomos Campo com label e input
    Organisms Organismos Blocos completos com lógica e estrutura Cabeçalho, Formulário de busca
    Templates Modelos Layouts de páginas com componentes estruturais Estrutura da página Main, Index, Perfil
    Pages Páginas Versões finais com dados reais Página de perfil com dados do usuário

Configuração do Ambiente de Desenvolvimento

Requisitos

  • Backend:
    • Versão do PHP: 7.4.x
    • Composer.
    • Servidor web: Apache.
    • Banco de dados: PostgreSQL.
  • Frontend:
    • Node.js 16 ou superior.

Instalação

Backend

  1. Clone o repositório: 
                                            
                                            git clone git@github.com:uiteec/psycs.git
                                            cd psycs
  2. Instale as dependências: 
                                            
                                            cd backend
                                            composer install
  3. Configure o arquivo backend\config\ambiente\development.php com as credenciais do banco de dados.
  4. Inicie o servidor: 
    php -S localhost:9000

Frontend

  1. Instale as dependências: 
                                            
                                            cd frontend
                                            yarn install
  2. Inicie o servidor de desenvolvimento: 
    yarn start

Fluxo de Dados

  1. O frontend faz requisições HTTP para as APIs do backend.
  2. O backend processa as requisições, acessa o banco de dados e retorna a resposta.
  3. O frontend consome as respostas e atualiza a interface do usuário dinamicamente.

Boas Práticas

Backend

  • Utilize padrões de projeto como MVC.
  • Valide todas as entradas de dados.

Frontend

  • Organize os componentes e serviços de maneira modular.
  • Utilize interceptors para gerenciar requisições HTTP.
  • Implemente tratamento de erros e mensagens para o usuário.

Conclusão

Este documento fornece as bases para o entendimento e manutenção do projeto PHP com React. Para mais detalhes, consulte as documentações oficiais das tecnologias utilizadas.