Função

Chat é um componente visual capaz de permitir diálogos entre pessoas ou entre humano e máquina através de plataformas digitais. São muito utilizados por facilitar a conversação ou oferecer respostas rápidas aos clientes, nos casos da interação humano-computador, ajudando a solucionar situações que já são conhecidas, como perguntas frequentes.

Figura 1 - Exemplo do componente rodando no simulador

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Configuração

Vamos configurar o componente com um exemplo de situação onde há duas respostas. Crie ou abra um formulário Mobile, arraste o componente Chat e solte-o na área de edição.

Figura 2.1 - Arrastando o componente para área de edição

Clique no componente Chat e, na aba de Propriedades, insira um Nome de usuário do chat e uma Imagem do usuário do chat. Esses serão os campos relacionados ao usuário. Altere também nome do Identificador do componente. Por fim, salve o formulário.

Figura 2.2. - Alterando as propriedades do componente

Crie um bloco de programação do tipo Mobile com a função IniciarChat e vincule o formulário criado anteriormente, conforme os passos abaixo.

Figura 2.3 - Vinculando formulário mobile

1. Clique no ícone de engrenagem para acessar a Configuração dos tipos de regras;
2. Em seguida, clique no botão do campo Formulário de Referência;
3. Selecione o formulário Mobile onde o Chat se encontra, clique em Selecionar e depois em Salvar.

Após vincular o formulário, insira o bloco Renderizar Mensagem. Siga os passos abaixo.

Figura 2.4 - Configurando função para iniciar o chat

1. Arraste o bloco Renderizar Mensagem (categoria Chat) para dentro da função;
2. Selecione o nome atribuído para o Chat no parâmetro Identificador;
3. Em Mensagem de Texto, insira a mensagem que será apresentada ao usuário ao iniciar a página;
4. No parâmetro Usuário do Chat, insira o bloco Usuário do Chat. Digite Id, Nome e URL da imagem do usuário.

Vá até à categoria Funções, arraste um bloco Para e crie a função ResponderUsuario. Clique na engrenagem da função, arrastre o bloco nome da entrada para dentro do bloco entradas e altere o nome da entrada para mensagem.

Figura 2.5 - Configurando parâmetro

Em seguida, configure o bloco. Siga os passos abaixo.

Figura 2.6 - Configurando a função de resposta ao usuário (parte 1)

1. Arraste o bloco Se faça (categoria Lógica) para dentro da função;
2. Na condição Se, vincule o bloco de Operações relacionais contendo:
   1. O bloco Obter Propriedade com a variável mensagem no campo Objeto e a Propriedade text;
   2. O símbolo de igual (=);
   3. E o número 1.
3. Insira o bloco Renderizar mensagem e configure-o. O campo Mensagem de Texto, que deverá conter a resposta para quando o usuário digitar a opção 1.

Repita os passos da Figura 2.6, incluindo-os abaixo do bloco Se faça. No entanto, o número será alterado para 2 (item 2 da Figura 2.7) e a Mensagem de Texto (item 3) para a resposta quando usuário digitar a opção 2.

Figura 2.7 - Configurando a função de resposta ao usuário (parte 2)

Após salvar o bloco de programação, abra novamente o formulário Mobile, clique com o botão direito na área de edição e selecione Propriedades da página. Na aba Eventos, selecione o campo Ao iniciar e vincule a função IniciarChat.  

Figura 2.8 - Vinculando função às propriedades da página

Agora selecione o componente Chat na área de edição e, na aba Eventos, vincule a função ResponderUsuario, no evento Ao enviar mensagem. Aparecerá o parâmetro mensagem, escolha o valor do campo chatMessage.

Figura 2.9 - Vinculando função ao evento

Salve tudo, rode o projeto e abra no Navegador [Mobile] ou Simulador. Digite 1 ou 2 para testar. O resultado se encontra na Figura 1.