Desenvolvimento-Frontend.md•6.4 kB
### Documentação Técnica: Estrutura e Customizações no Frontend da Plataforma
#### Visão Geral
A plataforma é projetada para ser modular e extensível, permitindo que novas funcionalidades sejam adicionadas ao frontend sem alterar o core da aplicação. Isso é feito por meio de conectores, que são unidades modulares responsáveis por adicionar funcionalidades específicas. Cada conector pode implementar várias interfaces, chamadas de "features", que definem as capacidades e comportamentos que ele oferece.
#### Estrutura de Conectores
Os conectores são componentes essenciais da plataforma, e cada conector é associado a uma série de interfaces (features) que definem suas funcionalidades. Abaixo está um exemplo de JSON representando um projeto com dois conectores:
```json
{
"directory": {
"uid": "e4e89e7e-cd7b-ed11-ac20-0003ff00000",
"domain": null,
"name": "Nome do diretório",
"type": "Organization",
"created_at": "2022-12-14T16:36:45.1133445",
"updated_at": "2024-08-22T13:57:23.8206008"
},
"uid": "00000000-cd7b-ed11-ac20-0003ff3cba7d",
"name": "Nome do projeto",
"created_at": "2023-05-25T17:50:44.5393785",
"updated_at": "2024-04-19T18:09:38.4617535",
"connectors": [
{
"scope": "Project",
"uid": "49fed4fb-77fe-ee11-96f5-00224821b633",
"type": "Custom",
"name": "ProvisioningManager",
"features": [
"IConnectorProvisioningManager",
"IConnectorContextRequired",
"IConnectorDetail",
"IConnectorScheduleTaskV2",
"IConnectorScheduleTask"
]
},
{
"scope": "Project",
"uid": "98c3a5d7-c9fb-ed11-907c-002248375a43",
"type": "UserData_1",
"name": "DefaultUserData",
"features": [
"IConnectorUserData",
"IConnectorContextRequired",
"IConnectorUserContextRequired",
"IConnectorDetail"
]
}
]
}
```
Neste exemplo, o projeto possui dois conectores, cada um com diferentes features que definem suas funcionalidades.
#### Funcionamento do Frontend
##### 1. Autenticação e Autorização
O frontend utiliza um sistema de autenticação para determinar quais conectores e, consequentemente, quais funcionalidades estão disponíveis para o usuário. Com base na resposta da API, a aplicação React ajusta a interface para refletir as permissões e funcionalidades autorizadas.
##### 2. Manipulação de Conectores
Os conectores são consultados via API para verificar quais features estão disponíveis. Isso permite que o frontend decida como renderizar a interface para o usuário.
Por exemplo, se o conector retornar a feature `IConnectorGenerativeIA`, um botão de IA será habilitado no frontend.
##### 3. Carregamento Dinâmico de Componentes com Bundles
Conectores que implementam a interface `IConnectorBundle` podem fornecer componentes que são carregados dinamicamente pela aplicação React. Estes componentes são especificados em um arquivo `manifesto.json`, que é solicitado via API.
Exemplo de manifesto:
```json
{
"type": null,
"path": null,
"default_target": "edition.json",
"default_thumb": "thumbs/cover-116589.jpg",
"default_thumb_dir": "thumbs",
"last_updated": 1724265131.0,
"version": "1.3",
"metadata": {
"title": "componentes",
"type": "FACSIMILAR",
"sunflower_id": "116589"
},
"components": [
{ "type": "js", "uri": "componentes/dashboard.js", "name": "Dashboard padrão" }
],
"assets": null
}
```
- **Consulta ao Manifesto:** Para obter o manifesto, a aplicação realiza uma chamada API no seguinte formato:
```
/storage/v1.0/bundle/connector/uid/{connectorUid}/default/target
```
- **Carregamento do Componente:** Uma vez que o manifesto é obtido, a aplicação pode carregar o componente especificado (neste caso, `componentes/dashboard.js`) dinamicamente, utilizando um container previamente definido para renderizar o componente.
#### Customizações Sem Alteração no Core
Graças à arquitetura baseada em conectores e bundles, a aplicação pode ser customizada sem a necessidade de alterar o core do frontend. Novos conectores podem ser adicionados e configurados para habilitar funcionalidades adicionais, que são automaticamente reconhecidas e aplicadas pelo frontend.
##### Exemplo: Habilitação de um Botão de IA
```json
{
"directory": {
"uid": "e4e89e7e-cd7b-ed11-ac20-0003ff00000",
"domain": null,
"name": "Nome do diretório",
"type": "Organization",
"created_at": "2022-12-14T16:36:45.1133445",
"updated_at": "2024-08-22T13:57:23.8206008"
},
"uid": "00000000-cd7b-ed11-ac20-0003ff3cba7d",
"name": "Nome do projeto",
"created_at": "2023-05-25T17:50:44.5393785",
"updated_at": "2024-04-19T18:09:38.4617535",
"connectors": [
{
"scope": "Project",
"uid": "49fed4fb-77fe-ee11-96f5-00224821b633",
"type": "Custom",
"name": "ProvisioningManager",
"features": [
"IConnectorGenerativeIA",
"IConnectorContextRequired",
"IConnectorDetail"
]
},
{
"scope": "Project",
"uid": "98c3a5d7-c9fb-ed11-907c-002248375a43",
"type": "UserData_1",
"name": "DefaultUserData",
"features": [
"IConnectorUserData",
"IConnectorContextRequired",
"IConnectorUserContextRequired",
"IConnectorDetail"
]
}
]
}
```
1. **Consulta ao Conector:** O frontend consulta a API para obter os conectores associados ao projeto.
2. **Verificação de Features:** Se a feature `IConnectorGenerativeIA` estiver presente em algum conector, o botão de IA é renderizado.
3. **Renderização Dinâmica:** Se o conector também implementar `IConnectorBundle`, o frontend pode carregar dinamicamente componentes adicionais, como uma interface específica para interações de IA.
Este sistema permite uma grande flexibilidade na aplicação de customizações, mantendo a aplicação base estável e consistente.