PA - WebApp Forms Extension

Uma extensão para VS Code/Cursor que permite gerenciar recursos do WebApp através de integração com APIs, incluindo workflows, forms, client services, client functions e muito mais.

📋 Índice

• Características
• Instalação
• Início Rápido
• Funcionalidades
• Uso
• Desenvolvimento
• Segurança
• Suporte

✨ Características

Gerenciamento de Ambientes

• Criação e gerenciamento de múltiplos ambientes de API
• Autenticação segura com armazenamento de tokens
• Suporte para diferentes ambientes (Produção, Desenvolvimento, etc.)

Recursos Gerenciados

• Workflows: Gerenciamento completo de workflows
• Workflow Steps: Configuração e edição de steps de workflow
• Workflow Forms: Gerenciamento de formulários de workflow
• Step Forms: Gerenciamento de step forms
• Client Services: Configuração de serviços de cliente
• Client Functions: Gerenciamento de funções de cliente
• CPR (Client Product Requests): Gerenciamento de solicitações de produto

Funcionalidades Avançadas

• Editor de Dados: Interface visual para edição de dados complexos
• Gráfico de Workflow Steps: Visualização gráfica das relações entre steps e forms
• Monitoramento de Arquivos: Watch automático de arquivos locais
• Sincronização: Sincronização bidirecional entre servidor e arquivos locais
• Publicação: Publicação de workflows após alterações
• Paginação: Suporte a listas paginadas de recursos

🚀 Instalação

Pré-requisitos

• Node.js 18+
• VS Code/Cursor 1.80.0+
• Yarn ou npm

Instalação Local

# Clone o repositório
git clone <repository-url>
cd database-extension

# Instale as dependências
yarn install

# Compile o projeto
yarn compile

# Para desenvolvimento com watch mode
yarn watch

Instalação da Extensão

1. Abra VS Code/Cursor
2. Pressione F5 para executar a extensão em modo de desenvolvimento
3. Ou use Ctrl+Shift+P / Cmd+Shift+P e execute "Extensions: Install from VSIX" (após build)

🎯 Início Rápido

1. Criar Ambiente

1. Abra a Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Execute: PA - WebApp Forms: Create Environment
3. Preencha:
   • Nome do Ambiente: Ex: "Produção", "Desenvolvimento"
   • URL da API: Ex: https://api.example.com
   • Usuário (opcional)
   • Senha (opcional)

2. Fazer Login

1. Execute: PA - WebApp Forms: Login to Environment
2. Selecione o ambiente criado
3. Informe as credenciais se necessário
4. O token de acesso será armazenado automaticamente

3. Abrir Sidebar

1. Clique no ícone "PA - WebApp Forms" na Activity Bar
2. Ou execute: PA - WebApp Forms: Open PA WebApp Forms Sidebar

4. Buscar e Editar Dados

1. Use a sidebar para buscar workflows, forms, client services, etc.
2. Os arquivos serão criados automaticamente no workspace
3. Edite os arquivos JSON conforme necessário
4. Use os botões "Enviar", "Sincronizar" e "Publicar" para gerenciar as alterações

📚 Funcionalidades Detalhadas

Sidebar

A sidebar principal oferece acesso rápido a todas as funcionalidades:

• Status do Ambiente: Mostra o ambiente ativo e status de conexão
• Lista de Ambientes: Visualiza e gerencia todos os ambientes configurados
• Workflows: Busca e gerencia workflows
• Workflow Steps: Configura e edita steps de workflow
• Workflow Forms: Gerencia formulários de workflow
• Step Forms: Gerencia step forms
• Client Services: Configura serviços de cliente
• Client Functions: Gerencia funções de cliente
• CPR: Gerencia solicitações de produto

Gerenciamento de Workflows

Buscar Workflow

1. Na sidebar, expanda a seção "Workflow"
2. Preencha o Workflow ID
3. Clique em "Buscar"
4. Os arquivos serão criados automaticamente na pasta do workspace

Propriedades Monitoradas

• Optional Config: Configurações opcionais do workflow
• Execute Before Create Protocol: Função executada antes de criar protocolo
• Acceptance Term: Termo de aceitação
• E outras propriedades configuráveis

Ações Disponíveis

• Enviar: Envia alterações locais para o servidor
• Sincronizar: Atualiza arquivos locais com dados do servidor
• Publicar: Publica o workflow após alterações
• Editar Dados: Abre editor visual para edição de dados

Gerenciamento de Workflow Steps

Buscar Workflow Step

1. Preencha Workflow ID e Workflow Step ID
2. Clique em "Buscar"
3. Arquivos filters e optional-config serão criados

Propriedades Monitoradas

• Filters: Filtros do workflow step
• Optional Config: Configurações opcionais

Gerenciamento de Workflow Forms

Buscar Workflow Forms

1. Preencha Workflow ID e Workflow Step ID
2. Opcionalmente, filtre por Workflow Form ID
3. Use paginação para navegar entre resultados
4. Selecione um form da lista

Propriedades Monitoradas

• Workflow Form Fields: Campos do formulário
• Optional Config: Configurações opcionais

Gerenciamento de Step Forms

Buscar Step Forms

1. Preencha Workflow ID e Workflow Step ID
2. Clique em "Buscar"
3. O arquivo de step forms será criado

Visualização Gráfica

• Use o botão "Ver Gráfico" para visualizar as relações entre steps e forms
• O gráfico mostra a estrutura completa do workflow

Gerenciamento de Client Services

Buscar Client Service

1. Preencha Client ID e Client Service ID
2. Clique em "Buscar"
3. Múltiplos arquivos serão criados (settings, theme, optional config, etc.)

Propriedades Monitoradas

• Settings: Configurações do serviço
• Theme: Tema do serviço
• Optional Config: Configurações opcionais
• Imports: Imports do serviço
• Routes: Rotas do serviço
• Terms: Termos do serviço
• Filters: Filtros do serviço

Gerenciamento de Client Functions

Buscar Client Function

1. Preencha Client ID e Client Function ID
2. Clique em "Buscar"
3. O arquivo da função será criado

Gerenciamento de CPR (Client Product Requests)

Buscar CPR

1. Preencha Client ID e Client Product Request ID
2. Clique em "Buscar"
3. O arquivo do CPR será criado

🎨 Editor de Dados

O editor de dados oferece uma interface visual para edição de dados complexos:

• Campos Editáveis: Apenas campos permitidos são editáveis
• Indicadores de Null: Campos nullable podem ser definidos como null
• Valores Atuais: Mostra o valor atual de cada campo
• Validação: Validação automática de tipos

Para abrir o editor:

1. Busque e selecione um recurso (workflow, form, etc.)
2. Clique no botão "Editar Dados"
3. Edite os campos desejados
4. As alterações são aplicadas automaticamente

📊 Visualização Gráfica

O gráfico de workflow steps mostra:

• Nodes: Representam workflow steps e forms
• Edges: Representam relações entre steps e forms
• Navegação: Clique nos nodes para ver detalhes
• Layout Automático: Organização automática dos elementos

⚙️ Configuração

Estrutura de Arquivos

Os arquivos são organizados em pastas no workspace:

workspace/
├── {workflow-key}-{workflow-id}/
│   ├── optional-config-{id}.json
│   ├── execute-before-create-protocol-{id}.js
│   └── ...
├── {workflow-step-key}-{workflow-step-id}/
│   ├── filters-{id}.json
│   └── optional-config-{id}.json
└── ...

Monitoramento de Arquivos

• Arquivos são monitorados automaticamente quando configurados
• O status "Monitorando" aparece na sidebar quando um arquivo está sendo observado
• Alterações nos arquivos são detectadas automaticamente

Sincronização

• Enviar: Envia alterações do arquivo local para o servidor
• Sincronizar: Atualiza o arquivo local com dados do servidor
• Publicar: Publica o workflow após alterações

⚠️ Atenção: A sincronização sobrescreve alterações locais não enviadas!

🔒 Segurança

• Armazenamento Seguro: Credenciais e tokens são armazenados no secure storage do VS Code
• Tokens Criptografados: Tokens de acesso são criptografados
• Sem Logs de Credenciais: Credenciais nunca são logadas
• Autenticação por Ambiente: Cada ambiente mantém seu próprio token

🛠️ Desenvolvimento

Estrutura do Projeto

src/
├── extension.ts          # Ponto de entrada principal
├── sidebar.ts            # Provider da sidebar
├── sidebar.html          # Interface da sidebar
├── state.ts              # Gerenciamento de estado
├── config.ts             # Gerenciamento de configurações
├── environments.ts       # Gerenciamento de ambientes
├── workflow.ts           # Funcionalidades de workflow
├── workflowSteps.ts      # Funcionalidades de workflow steps
├── workflowForms.ts      # Funcionalidades de workflow forms
├── stepForms.ts          # Funcionalidades de step forms
├── clientServices.ts     # Funcionalidades de client services
├── clientFunctions.ts    # Funcionalidades de client functions
├── cpr.ts                # Funcionalidades de CPR
├── dataEditor.ts         # Editor de dados
├── graph.ts              # Visualização gráfica
├── types.ts              # Definições de tipos
└── utils.ts              # Utilitários

Scripts Disponíveis

# Compilar o projeto
yarn compile

# Modo watch (recompila automaticamente)
yarn watch

# Executar lint
yarn lint

# Executar testes
yarn test

Build para Produção

# Compilar tudo
yarn compile

# Os arquivos compilados estarão em out/

📝 Logging

Todos os logs são exibidos no painel Output:

1. Vá em View → Output
2. Selecione "PA - WebApp Forms" no dropdown
3. Logs incluem:
   • Operações realizadas
   • Erros e exceções
   • Respostas da API
   • Timestamps

⚠️ Avisos Importantes

⚠️ Leia as instruções na sidebar: Clique no ícone de aviso (⚠️) no cabeçalho da sidebar para ver avisos importantes e instruções detalhadas de uso.

Boas Práticas

1. Sempre faça login no ambiente correto antes de realizar operações
2. Faça backup dos arquivos antes de alterações importantes
3. Use "Sincronizar" com cuidado - isso sobrescreve alterações locais
4. Verifique o status "Monitorando" antes de enviar alterações
5. Publique workflows após fazer alterações importantes

🐛 Resolução de Problemas

Problema: Ambiente não conecta

• Verifique se a URL da API está correta
• Confirme se as credenciais estão corretas
• Verifique a conexão de rede

Problema: Arquivo não encontrado

• Certifique-se de ter buscado os dados primeiro
• Verifique se o workspace está aberto
• Tente sincronizar novamente

Problema: Erro ao enviar dados

• Verifique se está logado no ambiente correto
• Confirme se o arquivo está sendo monitorado
• Verifique os logs para mais detalhes

📞 Suporte

Caso encontre algum problema ou bug ou tenha sugestões de melhoria, entre em contato com Lucas Lemos (lucas.lemos@tech4h.com.br).

📄 Licença

MIT

---

Desenvolvido com ❤️ para facilitar o gerenciamento de recursos do WebApp