Este guia reúne os pré-requisitos, conteúdos de capacitação e padrões técnicos para parceiros. O objetivo é garantir que toda solução desenvolvida seja escalável, segura e compatível com as atualizações da plataforma.
O domínio destes conceitos fundamentais evita o retrabalho, reduz o débito técnico e assegura que o desenvolvimento sob a plataforma sejam compatíveis com as futuras atualizações do TOTVS Fluig. |
Antes de iniciar os cursos, configure sua estação de trabalho seguindo os padrões oficiais:
Infraestrutura e Instalação: Consulte as Especificações Técnicas e o guia de Instalação e Atualização para garantir a compatibilidade de atualizações.
IDE Recomendada: Utilize o Eclipse com o plugin Fluig Studio para exportação nativa de projetos. Caso prefira o VS Code, utilize extensões de suporte para JavaScript e JSON.
Banco de Dados: Certifique-se de realizar a Configuração de Banco de Dados seguindo as permissões de Schema necessárias para evitar erros de persistência.
Antes de iniciar, os membros da equipe técnica devem possuir uma conta ativa no portal TOTVS Fluig Academy:
Portal TOTVS Fluig Academy: Fluig Academy
Primeiros Passos: Realize o cadastro com seu e-mail e matricule-se nos cursos listados nas trilhas abaixo.
Esta trilha foca na camada de apresentação e componentes dinâmicos. O objetivo é capacitar o desenvolvedor na criação de interfaces dinâmicas e componentes para o ambiente de portais do TOTVS Fluig.
| Curso | Descrição detalhada para o Desenvolvedor |
|---|---|
| Como fazer - Instalar Eclipse 2019-R9 + Fluig Studio | Guia passo a passo para configurar o ambiente de desenvolvimento oficial (IDE) e o plugin Fluig Studio. |
| Iniciando o desenvolvimento de widgets | Conceitos fundamentais sobre a estrutura de uma widget, ciclo de vida e publicação no portal. |
| Client-side: Desenvolvimento com ES6+ no TOTVS Fluig | Modernização do código Client-side utilizando as novas especificações do JavaScript para maior performance. |
| Preferências da widget, como salvar e recuperar os dados | Aprenda a utilizar o mecanismo de persistência de dados para salvar e recuperar configurações customizadas da widget. |
| Templates Mustache em widgets, aprenda a desenvolver | Implementação de renderização dinâmica. Aprenda a separar a estrutura HTML da lógica de dados, facilitando a manutenção. |
| Client-side: Integrações eficientes com promises e async/await, incluindo datasets | Como realizar chamadas assíncronas eficientes para buscar dados internos (Datasets) sem travar a interface do usuário. |
Capacitação voltada para a camada de integração, permitindo que o TOTVS Fluig se comunique de forma segura com ERPs, sistemas legados, etc.
| Curso | Descrição detalhada para o Desenvolvedor |
|---|---|
| Introdução ao Swagger do TOTVS Fluig - Básico I | Como utilizar o portal interativo de APIs para explorar, testar e entender os endpoints nativos disponíveis na plataforma. |
| Consumindo a API REST do TOTVS Fluig com Postman | Guia prático de como configurar autenticação (OAuth 1.0) e realizar requisições externas para a plataforma. |
O uso do Style Guide não é apenas visual. É uma questão de conformidade técnica. Seguir estes padrões garante que sua interface não "quebre" em novas atualizações do TOTVS Fluig.
| Curso | Descrição detalhada para o Desenvolvedor |
|---|---|
| Fluig Style Guide | Documentação oficial contendo a biblioteca de componentes, padrões de cores, tipografia e ícones. Item de consulta essencial antes de qualquer CSS customizado. |
| Style Guide - Datatable | Criação de grades de dados com recursos de busca, paginação e seleção, mantendo o padrão visual das rotinas nativas. |
| Style Guide - Filter | Implementação de campos de busca inteligente com autocompletar e filtros dinâmicos integrados a Datasets. |
| Style Guide - Modal | Padronização de janelas de alerta, confirmação e formulários pop-up para melhorar a experiência do usuário. |
| Como fazer - TOTVS Fluig - Modal de seleção de documentos | Implementação técnica para abrir a estrutura de pastas de documentos e permitir que o usuário selecione arquivos de forma nativa. |
| Desenvolvendo widgets compatíveis com modo escuro | Modo Escuro Certifique-se de estar desenvolvendo widgets compatíveis com modo escuro. |
Para parceiros que visam a escalabilidade e a distribuição de suas soluções.
| Curso | Descrição Detalhada para o Desenvolvedor |
|---|---|
| Adaptando seu componente para a TOTVS Store | Requisitos técnicos e boas práticas para transformar seu desenvolvimento em uma solução publicável na Store oficial. |
Antes de iniciar a codificação de uma nova widget, verifique sempre se o componente já existe no Style Guide para garantir a responsividade e compatibilidade com futuras atualizações do TOTVS Fluig. |
Links diretos para a documentação técnica, padrões oficiais e resolução de problemas.
Especificações Técnicas e Instalação: Requisitos e guias de atualização.
Configuração de Banco de Dados: Padrões de Schema e permissões.
Controle de Log: Padronização para diagnóstico de soluções.
Padrões de Desenvolvimento e Style Guide
Portal Fluig Style Guide: Consulte para usar componentes nativos e CSS.
Desenvolvendo para Modo Escuro: Guia de adaptação visual para o modo escuro.
API JQuery: Documentação da biblioteca padrão utilizada no Client-side da plataforma.
Arquivo application.info: Como configurar as propriedades de metadados do seu projeto.
Internacionalização (i18n): Como criar componentes multi-idioma.
Central de Componentes e Estrutura de Páginas: Entenda a hierarquia do portal.
Closure Compiler Maven Plugin: Otimização e minificação de código.
Desenvolvimento de Workflow: Melhores práticas de modelagem e eventos de processo.
Migração para Produção (Formulário 2.0): Guia de transição para o novo motor de formulários.
Sample-component (Projeto Base): Projeto de exemplo para soluções compatíveis com a Store.
Diretrizes da Store: Critérios de aceite e boas práticas de publicação.
Erro 401 - Unauthorized: FAQ técnica sobre problemas de autenticação em exemplos de desenvolvimento.
Recomendamos que o desenvolvedor realize primeiro os cursos do portal Fluig Academy e mantenha os links do manual de consulta técnica salvo nos favoritos do navegador para consulta rápida durante a codificação. |