Histórico da Página
| Índice |
|---|
Introdução e objetivo
...
Este guia reúne os pré-requisitos, conteúdos de capacitação e padrões técnicos para parceiros. O objetivo deste documento é fornecer ao desenvolvedor o apoio necessário para os primeiros passos técnicos na plataforma. É altamente recomendável que a equipe do parceiro conclua os cursos fundamentais antes de iniciar qualquer desenvolvimento. O domínio da base de conhecimento evita retrabalho e assegura a aplicação das melhores práticas da TOTVSé garantir que toda solução desenvolvida seja escalável, segura e compatível com as atualizações da plataforma.
| Informações | ||
|---|---|---|
| ||
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. |
Configuração do ambiente de desenvolvimento
...
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.
Acesso ao portal Fluig Academy
...
Para Antes de iniciar, o colaborador deve os membros da equipe técnica devem possuir uma conta ativa na plataforma de ensino:no portal TOTVS Fluig Academy:
Portal TOTVS Fluig Academy.
Primeiros passos: realize o cadastro com seu e-mail e matricule-se nos cursos listados nas trilhas
Link de Acesso: Fluig Academy
Ação: Crie sua conta e realize a matrícula nos cursos listados abaixo.
...
Conteúdos de capacitação recomendados
...
A seguir, veja os conteúdos recomendados.
Desenvolvimento de
...
portais e
...
widgets
...
Esta trilha foca na camada de apresentação e componentes dinâmicos. O objetivo é capacitar o desenvolvedor Focado 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 |
| desempenho. | |
| 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 |
| personalizadas 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. |
Consumo de APIs REST
...
Essencial para integrações entre Capacitação voltada para a camada de integração, permitindo que o TOTVS Fluig e outros sistemas (ERPs, plataformas legadas)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. |
Interface e
...
experiência (Style
...
guide)
...
A padronização visual é obrigatória para manter a identidade da plataforma e a usabilidadeO 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 auto completar 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. |
Publicação e Store
...
A padronização visual é obrigatória para manter a identidade da plataforma e a usabilidadePara 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. |
| Dica | ||
|---|---|---|
| ||
Antes de iniciar a codificação de uma nova widget, verifique sempre se o componente já existe no Style Guideguide para garantir a responsividade e compatibilidade com futuras atualizações do TOTVS Fluig. |
Manual de consulta técnica
...
Links diretos para a documentação técnica, padrões oficiais e resolução de problemas.
Configuração do ambiente e infraestrutura
...
Especificações técnicas e Instalação e atualizaçã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
...
- Desenvolvimento sobre a plataforma: documentações reunidas referentes à desenvolvimento sobre a plataforma.
Portal Fluig Style Guide: consulte para usar componentes nativos e CSS.
API JQuery: documentação da biblioteca padrão utilizada no Client-side da plataforma.
Arquitetura de componentes e WCM
...
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.
Construção de widgets e layouts: guia técnico completo sobre a criação desses componentes.
Como criar um widget que busque conteúdo: passo a passo para widgets com funcionalidade de pesquisa.
Layouts: documentação sobre personalização de estruturas de página.
- Desenvolvendo widgets compatíveis com modo escuro: guia de adaptação visual para o modo escuro.
Closure Compiler Maven plugin: otimização e minificação de código.
Workflows e processos
...
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.
Publicação, Store e suporte
...
Sample-component (Projeto base): projeto de exemplo para soluções compatíveis com a Store.
- Erro 401 - Unauthorized: FAQ técnica sobre problemas de autenticação em exemplos de desenvolvimento.
- FAQ da Plataforma: perguntas frequentes e diretrizes.
Dica técnica de On-boarding
...
| Dica | ||
|---|---|---|
| ||
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. |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas