App Builder Lançamento: Suporte a Múltiplas Ações, Geração de Visualização AI, Tratamento Remoto de Dados e Muito Mais

Estou muito feliz em compartilhar as novas atualizações empolgantes dos App Builders apresentadas em nossa versão mais recente. Como sempre, eles visam simplificar ainda mais o processo de desenvolvimento de aplicativos. Introduzimos os principais recursos que aumentam a flexibilidade no processo de criação de aplicativos e o desempenho ao trabalhar com dados remotos, incluindo suporte a várias ações, permitindo que uma única interação (por exemplo, clique, seleção de linha) agora acione várias ações, permitindo fluxos de trabalho mais complexos.

Também adicionamos uma nova maneira de criar suas exibições de página com prompts de IA. Além disso, agora você pode configurar o tratamento remoto de dados (com paginação) para elementos que não são de grade, como layouts de cartão, linha e coluna, melhorando muito o desempenho buscando e exibindo dinamicamente conjuntos de dados menores de servidores remotos.

Além disso, introduzimos um novo componente na Caixa de Ferramentas – O Carrossel, bem como um novo recurso de Resumos Desativados. Essas atualizações continuam fortalecendo a posição do App Builder como a plataforma ideal para o desenvolvimento de aplicativos de baixo código e alto desempenho.

Antes de mergulhar nos novos recursos e em todas as novas funcionalidades, se esta é a primeira vez que você aprende sobre App Builder, deixe-me compartilhar rapidamente por que você deve considerá-lo uma ferramenta essencial no processo de desenvolvimento de aplicativos para sua organização:

• Um App Builder visual – a plataforma unificada para gerentes de produtos, designers, desenvolvedores e partes interessadas.
• Ferramenta de arrastar e soltar WYSIWYG baseada em nuvem que ajuda as empresas a projetar e criar aplicativos de negócios completos 80% mais rápido do que nunca.
• Uma ferramenta low-code que gera código Blazor, código Angular, Web Components e código React pronto para produção a partir de seus designs Figma.

Suporte a múltiplas ações

Uma única interação (por exemplo, clique, seleção de linha) agora pode acionar várias ações, permitindo fluxos de trabalho mais complexos. O gerenciamento de interações no App Builder ficou mais poderoso com a introdução de Múltiplas Ações por Gatilho. Anteriormente, os usuários podiam definir apenas uma única ação por evento, limitando a flexibilidade no tratamento de fluxos de trabalho complexos. Com essa atualização, uma única interação, como um clique no botão ou uma alteração na seleção de linha, agora pode acionar várias ações, permitindo comportamentos de aplicativo mais avançados sem soluções alternativas adicionais.

O novo suporte a múltiplas ações do App Builder leva a uma maior flexibilidade para o design de interação – com esse novo recurso, os usuários podem configurar várias ações a serem executadas simultaneamente ou em sequência em uma única interação. Como resultado, quando um evento é disparado, várias operações predefinidas podem ocorrer, como definir valores para diferentes variáveis, abrir ou fechar componentes, navegar para outra página ou executar ações específicas do componente. Esse recurso aprimora significativamente a automação do fluxo de trabalho, facilitando a criação de aplicativos dinâmicos e interativos.

Um passo a passo detalhado pode ser visto como parte do último Webinar que tivemos:

Casos de uso do mundo real

Considere um cenário em que um usuário seleciona uma linha em uma grade. Com várias ações, agora você pode definir várias variáveis de uma só vez, uma capturando o CustomerID selecionado e outra armazenando o objeto Customer completo para processamento posterior. Isso garante que todos os dados necessários estejam prontamente disponíveis sem a necessidade de interações adicionais.

Outro exemplo é uma caixa de diálogo de edição para gerenciar registros. Ao clicar no botão editar em um cartão de dados, o sistema pode definir uma variável para rastrear o item editado no momento e, ao mesmo tempo, abrir uma caixa de diálogo modal para exibir o registro. Essa abordagem simplificada mantém a interface do usuário responsiva e intuitiva. Estendendo isso ainda mais, ao enviar uma atualização, várias ações podem ser executadas: o envio do formulário, o fechamento da caixa de diálogo e a exibição de uma mensagem de confirmação em uma lanchonete, proporcionando uma experiência de usuário perfeita.

IA generativa para criar visualizações de aplicativos

App Builder AI apresenta recursos de IA generativa para criação de visualizações. Atualmente, esse recurso pode ser encontrado em nosso site de visualização para feedback do usuário. Esses recursos permitem que os usuários gerem layouts de interface do usuário usando prompts de texto livre.

O artigo "Introdução" passo a passo está disponível aqui.

Também fizemos um webinar sobre os recursos de IA do App Builder.

Prompt "Criar uma tela de login detalhada" com a imagem do resultado.

Outros recursos introduzidos com esta versão:

• Geração de exibição baseada em prompt: os usuários podem gerar componentes de interface do usuário inserindo prompts refinando as saídas por meio de ações iterativas, como adicionar, substituir ou criar novas exibições. O comportamento sensível ao contexto garante flexibilidade nas modificações de layout.

• Exemplos de casos de uso no tópico de ajuda oficial: As demonstrações incluem modelos gerados por IA para uma tela de login e uma visualização de reserva de serviço de carro, mostrando layout estruturado e geração de componentes com base em prompts detalhados do usuário.

Tratamento eficiente de dados com operações remotas de dados

Gerenciar grandes conjuntos de dados com eficiência agora é mais fácil com as Operações Remotas de Dados no App Builder. Essa funcionalidade permite que os usuários iterem sobre os dados usando componentes como Cartão, Layout de coluna, Layout absoluto e Layout de linha, enquanto o componente Paginador garante que apenas a página de dados necessária seja buscada no servidor. Isso melhora significativamente o desempenho e a escalabilidade. Aqui você pode encontrar o tópico completo.

Além disso, confira nosso passo a passo detalhado sobre como configurar e usar os recursos de Tratamento Remoto de Dados com App Builder. 

Principais Benefícios

• Desempenho otimizado: busca apenas os dados necessários, reduzindo a carga do servidor e melhorando a capacidade de resposta do aplicativo.
• Escalabilidade: lida com grandes conjuntos de dados com eficiência, recuperando blocos menores de dados sob demanda.
• Configuração flexível da interface do usuário: permite que componentes repetidos, como cartões, sejam colocados em layouts personalizados enquanto se beneficiam dos recursos de paginação.
• Configuração de paginação perfeita: adiciona automaticamente um paginador e simplifica a configuração de paginação remota com configurações intuitivas.

Como funcionam os dados remotos que priorizam os componentes

Quando um usuário repete um componente sobre dados (por exemplo, um Card iterando sobre uma matriz JSON) e seleciona um endpoint de uma fonte de dados, a paginação remota pode ser habilitada se a API for compatível. App Builder adiciona automaticamente um paginador e os usuários podem definir as configurações de paginação por meio do Configurador de paginação remota. Variáveis internas como pageIndex e pageSize são criadas, e a alteração de páginas aciona novas solicitações do servidor para buscar apenas os dados necessários.

Configurando a paginação remota de dados

1. Repetir um componente sobre dados: arraste e solte um componente suportado (Cartão, Layout de coluna, Layout absoluto, etc.) e selecione os dados.
2. Escolha uma fonte de dados: selecione um ponto de extremidade REST ou uma definição do Swagger que forneça a resposta JSON.
3. Ativar paginação: ative a paginação e App Builder envolverá o componente em um layout de linha ao adicionar um paginador.
4. Visualize a configuração: teste a configuração para garantir a busca e a navegação de dados sem problemas.

Alternar resumos de grade

​Alternância de resumos de grade– Adicionada uma propriedade para ativar/desativar resumos por coluna.

Componente carrossel na caixa de ferramentas

Adicionado o componente Carrossel à caixa de ferramentas do componente. Para ver um caso de uso real, acesse o aplicativo Movies Samples:

---

Algumas palavras finais

App Builder é um divisor de águas no processo de desenvolvimento de aplicativos. Seu construtor visual baseado em nuvem, recursos de baixo código e novos recursos o tornam uma ferramenta obrigatória para qualquer organização. Experimente hoje! Se precisar de mais detalhes, recomendamos que você confira nosso:

• Discord canal.
• Discussões do GitHub.
• Roteiro.

To experience everything, head over to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.

---

• Maximizando a agilidade dos negócios com o desenvolvimento low-code
• App Builder AI: Como isso agiliza o desenvolvimento de aplicativos?
• App Builder Versão: AI, CSS Grid Layout e muito mais
• 5 principais recursos a serem considerados ao escolher uma plataforma low-code
• React Geração de código: guia passo a passo