# Criando meu primeiro BOT ## Você sabe como criar um bot? Para ficar mais fácil, podemos separar a criação do Bot em 3 partes, sendo elas: 1. Definir uma exigência do bot 2. Criar um fluxograma 3. Inserir o bot na plataforma {% hint style="info" %} **Dica # 1** : Entender qual é o objetivo do bot ( **Definir um uso do bot** ) e como ativar ( **Criar um fluxograma** ) são essenciais antes de realmente colocar a mão na massa! ( **Inserir o bot na plataforma** ) {% endhint %} ### 1. Definir uma necessidade do Bot {% hint style="info" %} **Dica # 2** : O bot deve ter uma necessidade principal! Ser informativo, transacional, coletar dados entre outros ... Você pode criar novos fluxos dentro do seu bot e criar cada assunto ou função separadamente, desta forma você garante que o escopo do bot seja menor e fique mais simples para a manutenção ! {% endhint %} ### 2. Criar um fluxograma Esse será o escopo do nosso bot: ![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSnqDgLbXBccdKMOdEJ%2Fuploads%2FRJUkeoUtwr61w4m7UV2i%2F%C3%ADndice.png?alt=media\&token=0dba8020-4aab-48cc-b379-685ea67cbb6f) {% hint style="info" %} **Dica # 3** : Existem muitas ferramentas para criar fluxos de maneira rápida, entre elas: [Driagram.io](http://diagram.io/) , [Whimscal](https://whimsical.com/) {% endhint %} ### 3. Inserir bot na plataforma {% hint style="info" %} **Dica # 4** : Para iniciar esta etapa, você precisa acessar a nossa plataforma, você pode [acessar](https://app.cosmobots.io/user/login) (caso já tenha um usuário) ou criar um [novo cadastro](https://app.cosmobots.io/user/register).
{% endhint %} Vamos colocar a mão na massa dentro da plataforma! Siga este passo-a-passo: 1\. Após acessar a plataforma, clique no botão de novo bot. (Conforme imagem abaixo) ![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSnqDgLbXBccdKMOdEJ%2Fuploads%2FcHpusmbin12XTZyXSZJN%2Fsc1.png?alt=media\&token=99c0d2ad-0645-4f33-8f2c-cd6e17b8e01f) 2\. Nomeie seu Bot, por exemplo: Analista Cosmonauta ![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSnqDgLbXBccdKMOdEJ%2Fuploads%2F8Sr8cPI8WsWPWK33gWa8%2Fsc1.gif?alt=media\&token=b8d510a9-8a59-4581-99c4-e06da809a885) {% hint style="info" %} **Dica # 5** : Você também pode **definir** seu bot, adicionar uma **imagem** para identificá-lo e também pode **clonar** outro bot que já tenha feito! {% endhint %} **Fluxos:** Após seguir o 2º passo, o Bot irá abrir uma tela que exibe os *Fluxos* que ele possui. Por padrão, uma ferramenta sempre virá com 3 Fluxos já criados, sendo eles: \- Boas vindas. \- Exceção. \- Excluir. \* A partir daqui o nosso Bot será separado por fluxos Fluxo: Boas vindas 3\. Altere a mensagem principal do Fluxo Boas Vindas para uma mensagem que lhe agrade, exemplo: ![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LSnqDgLbXBccdKMOdEJ%2Fuploads%2Fu1XXQTJR7Io1EMwQoQJW%2Fsc2.gif?alt=media\&token=eb9fa783-6019-4cc6-b48c-d5c647aaeb56) {% hint style="info" %} **Dica #6** : Dentro das etapas de mensagem você pode citar campos criados na plataforma, escrevendo um simples "@" irá puxar todos os campos, como no caso do exemplo a cima está citando o Nome do cliente. {% endhint %} {% hint style="info" %} **Dica # 7** : Dentro da Mensagem você também pode criar botões de opções para o usuário, escolher entre salvar ou não a resposta obtida, dentre outras opções. {% endhint %} Fluxo : Filtro 4\. Crie outro Fluxo com o nome Menu; 5\. Insira um filtro com uma função de identificar se o usuário está ou não cadastrado na ferramenta: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000624426/original/Ub3zQdt8CeVHhZaI8tH1IwLFcDfCAGh23g.gif?1585337842) {% hint style="info" %} **Dica # 8** : Os [Filtros](https://help.cosmobots.io/help/bot-builder/fluxo-da-conversa/filtro) disponibilizam uma opção de inserir condições que permitem que sejam feitos direcionamentos, se preferir, também é possível criar Filtros com [Funções Complexas](https://cosmobotshelp.freshdesk.com/a/solutions/articles/61000237966) . {% endhint %} Fluxo: Usuário cadastrado 6\. Crie um novo Fluxo com o nome "usuário cadastrado"; 7\. Crie uma etapa de Mensagem e nela informe ao usuário que ele já possui cadastro: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000624469/original/wmo7KTX5qpZFpJ8lVThSw-V2OkdzSABu4Q.gif?1585338048) {% hint style="info" %} **Dica # 9** : Quando precisar salvar uma resposta de um cliente como por exemplo em uma pergunta, caso você salve a resposta em um campo de contato, o mesmo irá para a base de dados e ficará salvo na plataforma, caso você salve como um contexto irá ficar salvo apenas durante a sessão atual de conversação entre o Bot e o Cliente, você pode utilizar estes campos como valores para realizar filtros, assim você pode diversificar o seu fluxograma para cada tipo de cliente. {% endhint %} Fluxo: Menu de opções 8\. Crie um fluxo chamado "Menu de opções" 9\. Agora crie uma mensagem com as opções de criar um novo cadastro ou sabre sobre os produtos oferecidos, salve como contexto e coloque o nome do contexto de "opcao\_do\_menu": ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000624501/original/lfSAqWRPwa4oQ_E-y5QOftFUrtVNMbgQ0w.gif?1585338339) 10\. Crie uma etapa em JavaScript para validar a resposta do usuário é um número e uma das opções disponibilizadas: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000624600/original/vR-YKEphrtjZkT1yj2LZGcuWLPdExFDmLQ.gif?1585339140) {% hint style="info" %} **Dica # 10** : Caso queira criar um bot com características parecidas, código segue usado nessa etapa [JavaScript](https://help.cosmobots.io/help/bot-builder/fluxo-da-conversa/javascript) : {% endhint %} ``` const resposta_do_usuario = Number(context.opcao_do_menu); context.resposta_valida = 0; console.log(resposta_do_usuario); console.log(Number.isNaN(resposta_do_usuario)); if (!(Number.isNaN(resposta_do_usuario))) { context.resposta_valida = (resposta_do_usuario === 2 || resposta_do_usuario === 1) ? 1 : 0; } ``` JavaScript 11\. Crie um Filtro que irá validar uma etapa JavaScript 12\. Em Campo insira o Contexto, em Nome insira resposta\_valida, em Condição insira Igual e em Valor insira 1 13\. Clique em "Ou" insira os mesmos dados da etapa 12, porém em Valor insira 2: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622489/original/QYMs9imQ-gjDKtAXyRHqB2IrOu3jOgbpsQ.gif?1585328823) 14\. Agora do lado não do Filtro, crie uma Mensagem com o texto resposta invalida: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622527/original/1S8ff9mVm8_csAvnL_SaiMGPAK6QTHpgYA.gif?1585329114) 15\. Após a Mensagem para inserir uma Etapa que direcionará novamente para o Menu de Opções: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622532/original/wkWxN_AVWMYmqWSTRYbXOy-gj7M7xNbAIw.gif?1585329149) {% hint style="info" %} **Dica # 11** : Caso queira criar um bot com características parecidas, código segue usado nessa etapa [JavaScript](https://help.cosmobots.io/help/bot-builder/fluxo-da-conversa/javascript) : {% endhint %} 16\. Crie outro filtro; 17\. Em campo insira Contexto, em Nome insira opcao\_do\_menu, em Condição insira Igual e em valor insira 1: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622549/original/xQ60VF9IKYeFyq7kRjLzBPzVTZ2ggDY2qg.gif?1585329306) Fluxo: Produtos oferecidos 18\. Crie um Fluxo com o Nome Produtos oferecidos; 19\. Insira a Mensagem que informa quais são os produtos oferecidos: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622598/original/-P3WV4j4dEeql_Bx99twhaUVaPRJWSiU3w.gif?1585329604) Fluxo: Cadastro 20\. Crie um fluxo com o nome "Cadastro" 21\. Crie uma mensagem solicitando o nome do usuário; 22\. Uma solicitando o e-mail; 23\. Uma perguntando se os dados informados estão corretos; 24\. E uma de confirmação. Essa deve ser salva como Contexto, e o Nome do contexto salvo como opcao\_do\_menu2: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622722/original/BDORQv23bhRfhXygXcgPsbbYul2rpbvcmA.gif?1585330233) 25\. Crie uma etapa em JavaScript para validar a resposta do usuário é um número e uma das opções disponibilizadas: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000622937/original/vUX6dJxjNI70iUkUiXU93uQWoMT2QxjqCw.gif?1585331176) > **Dica # 10** : Aqui vai outro exemplo de código JavaScript que pode ser usado para filtrar como informações oferecidas pelo usuário: ``` let testando_validade_resposta= Number(context.opcao_do_menu2) context.validade_resposta = 0; if (!(Number.isNaN(context.testando_validade_resposta))) { context.validade_resposta= (testando_validade_resposta === 1|| testando_validade_resposta ===2)? 1 : 0; } ``` JavaScript 26\. Crie um Filtro que irá validar uma etapa JavaScript; 27\. Em campo insira o contexto, em nome insira a validação\_resposta, em condição insira igual e em valor insira 1; 28\. Agora repita os passos 13, 14 e 15: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000587984/original/1OGbSJHT59HQKIZc9elI6UUs_UCXX4Vv6Q.gif?1585156437) 29\. Crie outro Filtro; 30\. Em Campo insira Contexto, em Nome insira opcao\_do\_menu2, em Condição insira Igual e em valor insira 1: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000623161/original/vGfpjkBZaBAL202W7M9I3Sl7ekLUd4nyLg.gif?1585332195) 31\. Crie uma mensagem de finalização: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000623162/original/mleuv9mEZGQUlduc0Tc-enPqL-98Ezw9TA.gif?1585332220) 32\. Agora conecte todos os fluxos usando como Etapas: ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000624016/original/vix3RUeVG8_oAF30WFYb1upy6BhTahLcnA.gif?1585335874) Vamos testar o bot? ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/61000625141/original/RMBwpv-AZTbZJoGjqjnZN_fkDTs6sbBlbQ.gif?1585342397) Informações adicionais: Nesse exemplo, use as etapas no JavaScript para demonstrar as características da ferramenta, mas o uso do código na criação do bot não é obrigatório.