Fluxo de trabalho do aplicativo Web

No AppMaster Web Designer, você pode configurar a lógica de negócios para aplicativos da web no lado Frontend , além da lógica Backend . Esse poderoso recurso permite criar aplicativos da Web sofisticados e dinâmicos, adaptados às necessidades específicas do negócio.

Em um contexto de aplicação web, os processos de negócios podem incluir autenticação de usuário, processamento de dados, transações on-line, gerenciamento de conteúdo, operações de atendimento ao cliente e personalização de elementos de UI dependendo das condições.

Três níveis de lógica de negócios no AppMaster Web Designer:

• Gatilhos de aplicativos: são gatilhos de alto nível que respondem a eventos ou estados de todo o aplicativo, acionando processos de negócios específicos.
• Processos de negócios genéricos: são conjuntos predefinidos de operações que podem ser aplicados em várias partes do aplicativo, automatizando tarefas e simplificando fluxos de trabalho.
• Gatilhos de elementos: mais granulares que os gatilhos de aplicativos, estão vinculados a elementos específicos da UI, ativando processos de negócios com base nas interações com esses elementos.

Ao aproveitar esses níveis de lógica de negócios, o AppMaster Web Designer permite que você crie aplicativos da web que não sejam apenas visualmente atraentes, mas também inteligentes e responsivos às necessidades e comportamentos do usuário.

🔔 É importante recarregar a visualização em execução após adicionar qualquer nova lógica de negócios para iniciar o PN.

Gatilhos de aplicativos

Os gatilhos de aplicativo no AppMaster Web Designer são gatilhos de alto nível que respondem a eventos ou estados de todo o aplicativo, executam a execução de processos de negócios específicos para aprimorar a funcionalidade e a experiência do usuário.

AppMaster oferece uma variedade de gatilhos de aplicativos, cada um projetado para cenários específicos:

• On App Launch: Ativado quando o aplicativo é inicializado, ideal para procedimentos de configuração inicial.
• On App Navigate: Dispara durante a navegação entre diferentes partes da aplicação.
• On App Blur: Acionado quando o aplicativo perde o foco, útil para pausar ou salvar ações.
• On App Focus: Executa quando o aplicativo recupera o foco, ótimo para retomar ou atualizar conteúdo.
• On App Hidden: Ativado quando o aplicativo está minimizado ou não visível na tela.
• On App Visible: Dispara quando o aplicativo fica visível novamente, útil para atualizar conteúdo.
• On App Destroy: Executa durante o processo de desligamento do aplicativo.
• On App Online: Acionado quando o aplicativo detecta um status online, perfeito para sincronizar dados.
• On App Offline: Dispara quando o aplicativo fica offline, habilitando funcionalidades offline.
• On App Auth Required: é ativado ao receber uma resposta "401 (Não autorizado)", solicitando a reautenticação do usuário.
• No aplicativo proibido: aciona uma resposta "403 (proibido)", normalmente usada para controle de acesso e permissões.

A lista exata de gatilhos de aplicativos pode ser expandida criando WebSocket Endpoints no nível de back-end do seu aplicativo.

Esses gatilhos podem ser empregados para gerenciar a autorização do usuário na inicialização, verificar os direitos de acesso, configurar o redirecionamento após alterações de autorização, lidar com erros e muito mais, tornando-os indispensáveis ​​na criação de um aplicativo da web responsivo e seguro.

Processos de negócios genéricos

Os processos de negócios genéricos no AppMaster Web Designer são projetados especificamente para encapsular operações repetitivas e lógica redundante em fluxos distintos. Depois de criados, esses processos de negócios podem ser perfeitamente integrados como blocos distintos em qualquer nível dos processos de negócios do seu aplicativo Web.

Características principais:

• Gerenciamento eficiente do fluxo de trabalho: ao mover tarefas comuns para processos de negócios genéricos, você reduz significativamente a duplicação e agiliza o fluxo de trabalho do seu aplicativo.
• Funcionalidade de front-end: embora espelhem a funcionalidade dos processos de negócios de back-end, os processos de negócios genéricos são executados exclusivamente no front-end . Isso permite interações mais rápidas e feedback imediato na interface do usuário.

Facilidade de reutilização:

Para usar um processo de negócios genérico durante a construção da lógica, basta arrastar o bloco desejado do grupo PNs criados pelo usuário para sua tela.

🔔 Consideração de desempenho: é importante observar que para tarefas complexas e que consomem muitos recursos, recomendamos executar esses processos no lado do servidor (Backend). Essa abordagem garante melhor desempenho e eficiência, especialmente para operações que são computacionalmente exigentes ou que exigem tratamento seguro de dados confidenciais.

Gatilhos de elementos

Os gatilhos de componentes no AppMaster Web Designer são essenciais para adicionar interatividade às suas aplicações web. Esses gatilhos estão vinculados a elementos específicos da UI, ativando processos de negócios predefinidos em resposta às interações do usuário. Cada componente do seu aplicativo possui um conjunto de gatilhos que podem ser personalizados para criar uma experiência de usuário dinâmica e envolvente:

• Gatilhos comuns: os componentes compartilham um conjunto de gatilhos padrão, como onCreate , onDestroy , onShow e onHide , que respondem ao ciclo de vida do componente e às alterações de visibilidade.
• Gatilhos Específicos: Além dos gatilhos comuns, os componentes possuem gatilhos exclusivos adaptados à sua funcionalidade. Por exemplo, um Button pode ter um gatilho onClick , uma Tabela pode responder a onUpdateData e uma Tabs pode ter um gatilho onTabSelect .

Apesar da variedade, o princípio subjacente permanece consistente: um evento desencadeia um processo de negócio correspondente. Ao usar Component Triggers de maneira eficaz, você pode criar um aplicativo da Web interativo e responsivo que reage às entradas do usuário em tempo real, aprimorando a experiência geral do usuário e tornando seu aplicativo mais intuitivo e fácil de usar.

Acessando gatilhos

Para visualizar e configurar os gatilhos de um componente, selecione o componente na tela e navegue até a guia ‘Fluxo de trabalho’ na barra lateral direita. Aqui, você encontrará uma lista de gatilhos disponíveis. Clicar em um permite anexar o processo de negócios desejado a ele. Os gatilhos com lógica anexada são destacados em azul para facilitar a identificação.

Criando Processos de Negócios

A configuração de um processo de negócios para um gatilho de componente segue uma abordagem semelhante à criação de processos de negócios de back-end, conforme visto no Módulo 4. Você usará uma tela comum onde são adicionados blocos que representam diferentes ações. As conexões entre esses blocos definem a sequência de ações, permitindo construir fluxos de trabalho complexos de forma intuitiva.

Construindo Fluxo de Trabalho de Aplicativo

Vamos criar esse processo de negócios para o botão Calcular. Primeiro, decida o que precisamos fazer quando o botão for clicado:

• Descubra os valores de X e Y. Obtenha-os nos campos de entrada correspondentes.
• Inicie um endpoint para cálculos e passe os parâmetros X e Y para ele.
• Torne o contêiner de resultados visível.
• Coloque o resultado do cálculo nos campos obrigatórios do rótulo.

Selecione nosso elemento Calc Button na tela e clique no onClick Trigger.

O editor de processos de negócios estará aberto. Aqui construiremos nosso processo de negócios para botão.

Obtenha valores de entradas

O primeiro passo é obter os valores inseridos pelo usuário. Para isso, AppMaster fornece o bloco Input Float Get Data, que apresenta uma 'Chave de Elemento' como parâmetro de entrada e gera o 'Valor', essencialmente lendo os valores atuais do componente especificado.

Como temos dois campos separados (representando os valores X e Y), você precisará utilizar dois blocos 'Input Float Get Data' - um para cada campo de entrada.

Para configurar:

• Arraste dois blocos de dados flutuantes de entrada para sua tela para cada campo de entrada.
• Defina a chave do elemento para cada bloco para corresponder às respectivas entradas flutuantes. Isso vincula o bloco ao elemento de UI correto, garantindo que ele leia os dados corretos.

Se você renomeou seus elementos anteriormente no UI Designer ao criar a interface, localizar e selecionar o componente necessário para cada bloco se tornará simples.

☝️ Renomear elementos durante a fase de design ajuda a identificá-los facilmente posteriormente durante a configuração da lógica de negócios.

Inicie o ponto final

Após a recuperação das entradas do usuário, a fase subsequente no fluxo de trabalho do seu aplicativo Web é iniciar o Endpoint . Esta etapa crítica estabelece a conexão entre o Frontend (interface do usuário) e o Backend (processos do lado do servidor) de sua aplicação web, e o comando para cálculos é transmitido do navegador para o servidor.

Os endpoints no AppMaster são representados como blocos de processos de negócios distintos dentro do aplicativo. Para usar nossos endpoints, basta escolher o apropriado na lista de bloqueios de processos de negócios e arrastá-lo para sua tela.

No módulo 5 , configuramos um endpoint com um método GET e atribuímos a ele a URL base "module4-basic" . Você deve encontrá-lo listado como - Solicitação do servidor GET /module4-basic/ e arrastá-lo para a tela.

Ao contrário dos componentes, os endpoints AppMaster não requerem configuração de seu ID, pois é predefinido. Este recurso agiliza o processo de integração de endpoints em sua lógica de negócios.

A etapa final é inserir os valores X e Y obtidos na etapa anterior no Endpoint. Isso permite que o backend receba e processe essas entradas, realizando os cálculos necessários.

Estado dos elementos da UI

A próxima etapa no fluxo de trabalho do seu aplicativo Web é gerenciar a visibilidade dos contêineres – especificamente, mostrar o contêiner que exibe resultados e ocultar o contêiner que contém uma dica.

Veja como conseguir isso:

1. Comece arrastando dois blocos Flex Update Properties para sua tela.
2. Para cada bloco Flex Update Properties , atribua o parâmetro Element Key correspondente aos respectivos contêineres – um para o contêiner de resultados e outro para o contêiner de dicas.
3. Configure o parâmetro de visibilidade dentro desses blocos. Defina o parâmetro Visible como True para o contêiner de resultados, garantindo que ele se torne visível após o cálculo. Por outro lado, defina esse parâmetro como False para que o contêiner de dicas oculte-o após a conclusão do cálculo.

Ao implementar essas etapas, você cria uma resposta dinâmica na interface do seu aplicativo. Após a ação de um usuário, como clicar em um botão para realizar cálculos, o aplicativo oculta automaticamente o contêiner de dicas e exibe o contêiner de resultados.

Isso não apenas melhora a experiência do usuário, mas também mantém a interface do aplicativo limpa e focada em informações relevantes em cada estágio da interação.

Pré-visualização em tempo real

Para avaliar o progresso do seu processo de negócios, você pode visualizar facilmente os resultados intermediários:

1. Primeiro, clique no botão Salvar e Sair no editor de processos de negócios. Esta ação salvará seu fluxo de trabalho atual e fechará o editor de processos de negócios.
2. Execute uma visualização em tempo real do seu aplicativo da web para verificar a interação com o aplicativo como se estivesse ativo.
3. Teste a funcionalidade clicando no botão Calcular .

Se o seu processo de negócio tiver sido configurado corretamente, você verá a resposta dinâmica: o container com a dica ficará oculto e, simultaneamente, o container que exibe os resultados será revelado.

Este método de teste oferece uma forma prática e imediata de garantir que seus processos de negócio estão funcionando conforme o esperado, permitindo que você faça os ajustes necessários antes de finalizar sua aplicação.

Renderização de dados

Depois de testar com êxito a lógica do seu aplicativo, é hora de refinar ainda mais sua lógica de negócios.

A etapa final envolve a exibição dos resultados calculados na interface do seu aplicativo web. Mapearemos os dados de saída do nosso processo de negócios de back-end para os elementos de UI relevantes do seu aplicativo da web.

Dado que os resultados do back-end são retornados em uma ordem predeterminada, sua tarefa é alinhar cada dado (elemento da matriz) com o elemento Bloco de Texto correto em sua UI.

Para tratamento de dados, usaremos os seguintes blocos:

• Elemento da matriz : use-os para acessar elementos individuais na matriz de resultados. Você precisará de um bloco para cada índice, variando de 0 a 4.
• Para texto: como seus dados estão no formato Float, use este bloco para converter esses valores Float em um formato de texto adequado para exibição.
• Dados de atualização do bloco de texto: este bloco é essencial para preencher os blocos de texto em sua UI com os dados de texto convertidos.

Esses blocos extrairão dados da matriz de resultados, converterão os dados em um formato de texto e, em seguida, atualizarão os blocos de texto correspondentes em sua IU.

Veja como configurá-lo:

1. Coloque esses blocos na tela.
2. No bloco Array Element , insira o array recebido de seu endpoint (comece em 0).
3. Defina o Índice para direcionar o elemento apropriado dentro da matriz.
4. Conecte o valor de saída do elemento Array ao bloco To Text .
5. Especifique a chave do elemento nos dados de atualização do bloco de texto para o elemento da interface do usuário onde deseja que os dados sejam exibidos.
6. Conecte os blocos sequencialmente.

Duplique esta sequência de blocos para cada elemento do array que deseja exibir. Ajuste o índice em cada bloco 'Array Element' para corresponder aos diferentes elementos do array.

Certifique-se de que esses blocos também estejam conectados em sequência.

Resultado final

Isso conclui a criação do processo de negócios.

Salve seu processo de negócio e confira o resultado final na visualização. Execute uma visualização do aplicativo no plano de implantação onde você publicou seu endpoint no Módulo 5 .

🎉 Parabéns pela fantástica conquista!

Você desenvolveu com sucesso um aplicativo Web totalmente funcional com lógica de negócios e uma interface de usuário interativa. Se tudo funcionar conforme planejado, você estará pronto para dar a próxima etapa final de publicar seu aplicativo e compartilhá-lo com os usuários.

Mas a jornada não termina aqui. Há muitas oportunidades para refinar ainda mais sua aplicação! Você pode aprimorar o apelo visual e a experiência do usuário personalizando a aparência dos elementos da interface do usuário ou expandindo a lógica do aplicativo da web. Por exemplo, você pode tornar os campos obrigatórios e adicionar um botão para redefinir os campos sem limpar manualmente cada entrada.