Principais Características
1 - Principais Características
1.1 - Ferramentas de Desenvolvimento
- Editor Visual: Interface de arrastar e soltar para projetar telas com componentes
- Biblioteca de Componentes: Elementos da interface incluindo botões, entradas, seleções e contêineres de layout
- Editor de Estilo: Opções abrangentes de estilo para tipografia, espaçamento, bordas e layout
- Gerenciamento de Blocos de Código: Crie e gerencie blocos de código reutilizáveis
- Painel de Projeto: Organizar e gerenciar múltiplos projetos de aplicação
- Desfazer/Refazer: Suporte completo para desfazer e refazer para todas as operações de edição visual
1.2 - Desfazer/Refazer
O editor visual suporta operações de desfazer e refazer para todas as operações de edição de tela e composição.
Atalhos de teclado
- Cmd+Z (macOS) / (Windows/Linux): Desfazer a última ação Ctrl+Z
- Cmd+Shift+Z (macOS) / (Windows/Linux): Refazer a última ação desfeita Ctrl+Shift+Z
Operações de Apoio
O acompanhamento histórico inclui:
- Adicionar ou remover elementos de telas e composições
- Mover elementos por meio de arrastar e soltar ou ajustes de posição
- Modificar propriedades dos elementos (texto, marcadores de posição, estado desativado, etc.)
- Mude os estilos dos elementos (cores, fontes, espaçamento, bordas, etc.)
- Ajuste pontos de interrupção responsivos (padrão, sm, md, lg)
- Expandir/colapsar estados de elementos na visualização em árvore
Gestão da História
- História Separada: Cada tela e composição mantém sua própria história independente
- Limite de Capacidade: Máximo de 50 ações armazenadas por tela ou composição
- Agrupamento Automático: Mudanças rápidas em 500ms são agrupadas em um único passo de desfazer (por exemplo, digitar texto ou arrastar um controle deslizante)
- Navegação: A história é preservada ao alternar entre telas ou composições
- Integração com Salvamento Automático: Operações de desfazer/refazer marcam o documento como sujo e acionam o salvamento automático após 2 segundos
Limitações Atuais
- Operações de binding (criar, editar ou excluir) não estão incluídas em undo/redo
- O histórico não persiste entre as recargas da página
- Desfazer/refazer está disponível apenas no modo de design (não no modo de prévia)
📌O sistema de desfazer/refazer usa rastreamento de histórico baseado em patches para eficiência de memória, consumindo aproximadamente 500 bytes por ação, em comparação com snapshots de estado completo, que exigiriam de 5 a 20KB por ação
1.3 - Desenvolvimento Móvel
- Integração com React Native: Construa aplicativos móveis multiplataforma
- Suporte a Módulos Expo: Acesso às capacidades do dispositivo por meio de módulos configuráveis:
- Câmera e seletor de imagem
- Serviços de localização
- Acesso ao sistema de arquivos
- Autenticação
- Contatos e calendário
- Suporte de áudio
- Expo Build System: Processo de compilação para aplicações iOS e Android
- Configuração da App Store: Configurações para Apple App Store e Google Play Store
1.4 - Recursos de Integração
- Conectividade de Banco de Dados: Integração com banco de dados SQL com migrações
- Gerenciamento de APIs: Criar e gerenciar endpoints de API
- Soluções de Armazenamento: Capacidades de armazenamento de arquivos
- Autenticação: Sistema de autenticação baseado em token
1.5 - Opções de Implantação
- Conteinerização: suporte a Docker com gráficos Helm Kubernetes
- Gerenciamento de Ambiente: Configurar diferentes ambientes de implantação
- Configuração do Serviço: Configurações de rede e recursos
2 - Arquitetura
A plataforma é construída com uma arquitetura moderna:
- Estrutura do Monorepo Tudo: Organizada em aplicativos e bibliotecas compartilhadas
- Engine: Runtime para aplicações móveis
- Servidor: API backend e serviços de banco de dados
- Studio: UI do ambiente de desenvolvimento
- React Native Frontend: interface multiplataforma com estilo NativeWind
- Hono Backend: endpoints de API para gerenciamento de projetos
- PostgreSQL com Drizzle: Armazenamento de dados com suporte à migração
3 - Componentes do Projeto
- Telas: Contêineres visuais para elementos de interface
- Elementos: Componentes de interface que podem ser adicionados às telas
- Estilos: Configuração visual da aparência
- Blocos de Código: Implementação de funcionalidades personalizadas
- Ativos: Imagens e outros recursos
- Configurações: Opções de configuração do aplicativo
- Internacionalização: Suporte multilíngue === Documentação de Elementos
3.1 - Componentes vs Elementos
Compreender a distinção entre Componentes e Elementos é crucial para trabalhar com a plataforma Lowcode Studio:
Componente
Um Componente é um blueprint ou definição armazenado na biblioteca de componentes. Ele representa um tipo de elemento de interface com:
- Propriedades e valores padrão
- Encadernações disponíveis (propriedades e eventos)
- Estilos e configurações base
- Comportamento predefinido
Os componentes são definidos em e servem como modelos. Exemplos: Botão, Entrada, Visualização, Lista.components.json
4 - Elemento
Um Elemento é uma instância de um Componente colocada em uma tela ou composição. Cada elemento tem:
- Um identificador UUID único
- Valores de propriedade personalizados específicos para aquela instância
- Estilos individuais e configurações responsivas
- Ligações específicas a variáveis e funções
Quando você arrasta um Componente da paleta, uma instância de Element é criada na sua tela.
Exemplo 1. Exemplo
Componente: "Botão" (blueprint com propriedades padrão)
↓
Element: Instância de botão com UUID "abc-123"
- Propriedades: { text: "Submit", disabled: false }
- Encadernações: { press: [functionId: "xyz"] }
- Estilos: { backgroundColor: "#007bff", borderRadius: "4px" }
