|
|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) | [Analytics](analytics)
|
|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) | [Analytics](analytics)
|
|
|
| :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :---------------: | :--------------------: | ------------: |
|
|
| :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :---------------: | :--------------------: | ------------: |
|
|
|
|
|
|
|
|
# Estrutura da Aplicação Frontend em React NextJs
|
|
|
|
|
|
|
|
## Tecnologias Principais
|
|
|
|
|
|
|
|
- **React:** Biblioteca JavaScript para construir interfaces de usuário.
|
|
|
|
- **Next.js:** Framework para React que permite renderização no lado do servidor (SSR) e otimização de desempenho.
|
|
|
|
- **JavaScript/TypeScript:** Linguagens de programação para escrever a lógica da aplicação.
|
|
|
|
|
|
|
|
## Bibliotecas e Ferramentas Específicas
|
|
|
|
|
|
|
|
- **Axios:** Biblioteca para fazer requisições HTTP.
|
|
|
|
- **Keycloak:** Sistema de gerenciamento de identidade e acesso para autenticação e autorização.
|
|
|
|
- **React Router (se necessário em Next.js):** Biblioteca para roteamento em aplicações React.
|
|
|
|
|
|
|
|
## Padrões e Arquiteturas
|
|
|
|
|
|
|
|
- **Arquitetura Limpa:** Princípios para estruturar aplicações de forma a separar claramente as preocupações.
|
|
|
|
|
|
|
|
## Estrutura de Pastas
|
|
|
|
|
|
|
|
```plaintext
|
|
|
|
/src
|
|
|
|
/core
|
|
|
|
/domain
|
|
|
|
- User.js
|
|
|
|
- Doctor.js
|
|
|
|
- Administrator.js
|
|
|
|
- ...
|
|
|
|
/useCases
|
|
|
|
/common
|
|
|
|
- LoginUseCase.js
|
|
|
|
- ...
|
|
|
|
/doctor
|
|
|
|
- ViewPatientRecordsUseCase.js
|
|
|
|
- ...
|
|
|
|
/administrator
|
|
|
|
- ManageDoctorsUseCase.js
|
|
|
|
- ...
|
|
|
|
/adapters
|
|
|
|
/presenter
|
|
|
|
- DoctorPresenter.js
|
|
|
|
- AdminPresenter.js
|
|
|
|
- ...
|
|
|
|
/repository
|
|
|
|
- UserRepository.js
|
|
|
|
- DoctorRepository.js
|
|
|
|
- AdminRepository.js
|
|
|
|
- ...
|
|
|
|
/frameworks
|
|
|
|
/ui
|
|
|
|
/components
|
|
|
|
- LoginForm.jsx
|
|
|
|
- ...
|
|
|
|
/pages
|
|
|
|
- LandingPage.jsx
|
|
|
|
/doctor
|
|
|
|
- DoctorDashboardPage.jsx
|
|
|
|
- ...
|
|
|
|
/administrator
|
|
|
|
- AdminDashboardPage.jsx
|
|
|
|
- ...
|
|
|
|
/services
|
|
|
|
- AuthService.js
|
|
|
|
- DoctorService.js
|
|
|
|
- AdminService.js
|
|
|
|
- ...
|
|
|
|
/utils
|
|
|
|
- AuthUtils.js
|
|
|
|
- ...
|
|
|
|
```
|
|
|
|
|
|
|
|
# Explicação da Estrutura:
|
|
|
|
|
|
|
|
- **core/domain:** Contém as entidades principais da sua aplicação, como usuários, médicos e administradores.
|
|
|
|
|
|
|
|
- **core/useCases:** Divide a lógica de negócios em casos de uso comuns (como login) e específicos para cada tipo de usuário (médico e administrador).
|
|
|
|
|
|
|
|
- **adapters/presenter:** Inclui os "presenters" que adaptam os dados da camada de caso de uso para a camada de interface do usuário, mantendo a separação entre a lógica de negócios e a apresentação.
|
|
|
|
|
|
|
|
- **adapters/repository:** Contém os repositórios que abstraem a comunicação com fontes de dados externas, como APIs ou bancos de dados. Eles são usados pelos casos de uso para acessar e manipular dados.
|
|
|
|
|
|
|
|
- **frameworks/ui:** Organiza os componentes e páginas da interface do usuário, incluindo a página de destino (landing page) e as páginas específicas para médicos e administradores.
|
|
|
|
|
|
|
|
- **frameworks/services:** Contém serviços que encapsulam a lógica de comunicação com APIs externas, como o serviço de autenticação e os serviços específicos para médicos e administradores.
|
|
|
|
|
|
|
|
- **utils:** Contém funções utilitárias, como aquelas relacionadas à autenticação e à verificação do tipo de usuário.
|
|
|
|
|
|
|
|
## Fluxo de Autenticação e Redirecionamento:
|
|
|
|
|
|
|
|
- **LandingPage.jsx:** Apresenta o formulário de login e utiliza o AuthService.js para autenticar o usuário via Keycloak.
|
|
|
|
|
|
|
|
- **AuthService.js:** Comunica-se com o Keycloak para autenticar o usuário e determinar seu tipo (médico ou administrador).
|
|
|
|
|
|
|
|
- **AuthUtils.js:** Contém funções para verificar o tipo de usuário e realizar o redirecionamento apropriado para a página de dashboard do médico (DoctorDashboardPage.jsx) ou do administrador (AdminDashboardPage.jsx).
|
|
|
|
|
|
|
|
- **DoctorDashboardPage.jsx e AdminDashboardPage.jsx:** São as páginas principais para médicos e administradores, respectivamente, e utilizam os casos de uso e serviços relevantes para buscar e exibir informações específicas para cada tipo de usuário.
|
|
|
|
|
