Chat mobile
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.
Nome | Propriedade | Função |
|---|---|---|
Id do usuário do chat | chat-user-id | Identificador exclusivo para o usuário do chat. |
Nome do usuário do chat | chat-username | Responsável por atribuir nome ao usuário. |
Imagem do usuário do chat | chat-user-image | Atributo que atribui imagem ao usuário. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao 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
Clique no ícone de engrenagem para acessar a Configuração dos tipos de regras;
Em seguida, clique no botão do campo Formulário de Referência;
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
Arraste o bloco Renderizar Mensagem (categoria Chat) para dentro da função;
Selecione o nome atribuído para o Chat no parâmetro Identificador;
Em Mensagem de Texto, insira a mensagem que será apresentada ao usuário ao iniciar a página;
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)
Arraste o bloco Se faça (categoria Lógica) para dentro da função;
Na condição Se, vincule o bloco de Operações relacionais contendo:
O bloco Obter Propriedade com a variável mensagem no campo Objeto e a Propriedade
text;O símbolo de igual (=);
E o número 1.
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.
Observação
A propriedade text é obtida diretamente do componente Chat ao configurar o parâmetro com o chatMessage. O resultado obtido deve seguir o formato: "Object { text: "2", sender: {…}, _defaultPrevented: false, preventDefault: z(), isDefaultPrevented: B() }"
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.
Nome em inglês
Chat
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual