Primeiros passos com App Builder

    O App Builder é uma plataforma low-code que permite transformar rapidamente designs em aplicativos web funcionais—sem escrever todo o código. Comece do zero, use templates, ou importe designs do Figma, e depois crie visualmente seu aplicativo com componentes drag-and-drop, conexões com dados reais e personalização de layout. Ele gera código pronto para produção em Angular, React, Blazor e Web Components, com exportação com um clique ou implementação no GitHub ou Azure.

    Como Tudo Funciona Junto

    O diagrama abaixo oferece uma visão geral de como o App Builder se encaixa no ecossistema mais amplo de ferramentas de design e desenvolvimento:

    Ecossistema da Plataforma

    Em Termos Simples

    • Design System → UI Kits & Adapters: Começa com um sistema de design, implementado como UI kits (como o Indigo.Design para Figma). Os adaptadores traduzem seu design em um formato que o App Builder pode usar.
    • App Builder + Integrações: Você usa o App Builder para criar visualmente seu aplicativo. Ele suporta dados REST, widgets Reveal SDK (para painéis) e tarefas Slingshot (para gerenciamento de projetos).
    • Common App Model: Tudo flui para um Common App Model central—um formato unificado que descreve seu aplicativo, independentemente de como você começou (importação de design ou construção manual).
    • Code Generation (Codegen): O modelo é então usado pelo gerador de código, que produz código real e utilizável para:
      • Angular
      • React
      • Web Components
      • Blazor
    • Deployment Targets: Finalmente, o código gerado pode ser implementado diretamente em plataformas como GitHub ou Microsoft Azure.

    Iniciar App Builder

    Para acessar o App Builder, navegue até https://appbuilder.dev e faça login. Alternativamente, você pode iniciar o App Builder diretamente visitando https://my.appbuilder.dev. Você precisará de um julgamento ativo ou assinatura paga para criar e editar aplicativos.

    Criar novo aplicativo

    Existem três maneiras de criar um novo aplicativo a partir do diálogo "Criar novo aplicativo":

    1. Aplicativos de exemplo - os aplicativos de iniciação explorarão aplicativos que foram criados usando o App Builder e também permitirão que você os modifique no seu próprio espaço de usuário. Eles também são uma boa fonte para você visualizar o código gerado para um aplicativo maior sem ter que criar seu próprio aplicativo do zero. Se você usar o App Builder pela primeira vez, recomendamos usar a opção de aplicativo de exemplo como ponto de partida. Esta é a maneira mais rápida de se orientar com as incríveis funcionalidades da ferramenta e começar a construir seu aplicativo.
    2. Layouts de aplicativo - comece um novo aplicativo do zero, se beneficiando de layouts predefinidos. Você também encontrará a opção de criar um aplicativo baseado em um template em branco daqui.
    3. Importar design - se você tiver um arquivo de design existente, criado usando o kit Indigo.Design UI para Figma ou Sketch, você pode usá-lo como ponto de partida para seus aplicativos. Para fazer isso, obtenha nosso sistema Indigo.Design, que inclui plugins para publicar seu design, UI kits e arquivos de design de exemplo.

    Note

    Devido às diferenças entre o layout absoluto no Sketch e o layout Flex no App Builder, alguns ajustes adicionais podem ser necessários após analisar seu arquivo do Sketch.

    Diálogo do novo projeto

    Observe que uma vez no App Builder, os usuários podem alternar facilmente entre seus aplicativos ativos ou voltar ao seu espaço de trabalho no App Builder no menu lateral no aplicativo no tempo de design, sem sair do App Builder.

    Menu lateral

    Obtendo o código

    O App Builder sempre exibe um aplicativo web em execução ativo tanto na superfície de design quanto na janela de visualização. O código subjacente e o modelo de aplicativo são atualizados em tempo real conforme você faz alterações no aplicativo na superfície de design. Você pode visualizar o código do aplicativo gerado a qualquer momento na janela de visualização e também pode baixar o aplicativo gerado a qualquer momento como um repositório de código completo de aplicativo, que você pode abrir em um editor de código de sua escolha. Depois você pode construir e executar o aplicativo que você projetou usando o App Builder localmente em sua máquina e você pode fazer modificações adicionais no código gerado.

    Janela de visualização do aplicativo

    Código de um aplicativo gerado executado no VS Code

    Note

    Uma vez que o código de seu aplicativo é baixado, as alterações feitas localmente não serão refletidas no seu espaço de usuário do App Builder.

    Versão On-Premises do App Builder

    O App Builder é um SaaS que fornece Desenvolvedores, Designers e Gerentes de Produto com uma plataforma consolidada para descoberta de produtos de software, design de produtos de software, construção de PoCs de produtos interativos e emissão de projetos de código pixel-perfeito prontos para modificações subsequentes.

    Alguns negócios fazem parte de indústrias altamente regulamentadas. Na maioria das vezes, por razões de segurança, muitos deles têm acesso limitado ou nenhum a soluções baseadas em nuvem como o App Builder, ou conectividade limitada à internet em determinados locais. Para cobrir este segmento, precisávamos fornecer uma maneira fácil para tais organizações colocarem o App Builder atrás do firewall, permitindo-lhes usar sua própria instância da plataforma para executar em sua própria infraestrutura e ser acessível apenas por pessoal interno.

    As aplicações on-premises são confiáveis, seguras e permitem que as empresas mantenham um nível de controle que a nuvem geralmente não oferece.

    Consulte este tópico para mais detalhes técnicos sobre como instalar a solução On-premises.

    on-premises-ab-demo

    Versão On-Premises

    Executando o aplicativo gerado localmente

    Para executar o aplicativo baixado, os seguintes pré-requisitos precisam ser instalados em sua máquina. Consulte este tópico para mais informações sobre como executar o aplicativo gerado localmente.

    1. NodeJS.
    2. Visual Studio Code (recomendamos VS Code, mas você pode usar um editor de código diferente).

    Tutorial em vídeo

    Relatar um problema ou enviar feedback

    Este repositório é destinado para envio de problemas e solicitações de recursos, bem como para discussões gerais de produtos, perguntas e qualquer feedback que você deseje compartilhar. Você também pode nos enviar um email.

    Recursos Adicionais