Olá Blippers! Tudo bem com vocês? Segue um tutorial que deu muito trabalho para nós (quando digo nós, digo eu e @fadoaglauss). Espero poder ajudar muitos aqui do Fórum a integrar o Blip com Google Sheets. Então, sem mais delongas, aqui está:

Hoje eu vou ensinar como incluir novos dados em uma planilha do Google Sheets através de uma API. Assim, nesse tutorial você irá: criar o Token de Oauth, criar o projeto e, por fim, adicionar os dados para a planilha.

Mas claro, antes e começar quero fazer um agradecimento especial a @fadoaglauss que me ajudou a criar esse tutorial de uma forma mais clara, objetiva e bonita!

Criar Token de Oauth

Nessa primeira etapa criaremos o Token de autenticação através do ID de Cliente e do ID Secreto. Agora, vamos precisar de uma conta Google para acessar o Google Developers.

Criar Projeto

Você precisa ir no canto superior esquerdo e clicar no seu projeto atual (é aquele que tem uma setinha assim ▽). Com isso uma nova janela irá se abrir e nesse momento você vai clicar em Criar Novo Projeto, no canto superior direito desta janela. A imagem abaixo mostra o passo a passo, caso ainda não tenha ficado claro:

Agora, dê um nome ao seu projeto e pode manter sem organização. É só CRIAR!

Ativar Serviço de Sheets no seu Projeto

Você precisa ir no canto superior esquerdo e clicar nos ☰. Com isso uma nova janela a esquerda irá se abrir e nesse momento você vai clicar em APIs e Serviços e em seguida em Biblioteca. Agora procure pela palavra Sheets e selecione a primeira opção. Depois é só Ativar ao clicar no botão no centro da tela. Aqui também tem uma imagem que mostra o passo a passo:

Você vai fazer o mesmo processo e clicar nos ☰, mas a diferença agora é você irá acessar Painel em APIs e Serviços em vez de Biblioteca. Neste novo ambiente, clique em Tela de Consentimento OAuth que está no menu lateral esquerdo. Agora você verá duas opções para User Type, basta selecionar Externo e clicar em CRIAR! Aqui também temos uma imagem que mostra o passo a passo:

Agora, para finalizar esta etapa, você deverá definir um nome para a API. Insira o e-mail para suporte e dos desenvolvedores (lembrando, que não precisa preencher mais nada). Vá até o final da página e clique em SALVAR E CONTINUAR. Em seguida, nessa próxima página que irá ser exibida, clique no mesmo botão no final da página de SALVAR E CONTINUAR 😉

E, como cereja do bolo, você deverá ir ao final da página e clicar em VOLTAR PARA PAINEL, que será a Tela de Consentimento OAuth. Daí é só ir em PUBLICAR APLICATIVO, como na imagem abaixo:

Criar credenciais

Vamos lá, no menu lateral esquerdo clique em “Credenciais”. Nesta página que abriu, clique em “+ CRIAR CREDENCIAIS” e em seguida na opção ID do Cliente OAuth, como mostrado imagem a baixo 👇

Agora, selecione Aplicativo da Web para a escolha do Tipo de aplicativo e insira o nome da sua escolha. Nesse momento, você precisará de muita atenção, pois é uma parte importante.

Insira nos URIs de Redirecionamento Autorizados os seguintes links do portal: https://www.portal.blip.ai/application e OAuth 2.0 Playground. Em seguida, clique em Criar e seguir para as chaves, como no tutorial logo em seguida.

Nesse momento, irá aparecer uma janela com as credenciais. Não se esqueça de anotar tudinho!!!

Autorizar credenciais

Nessa parte, você deverá acessar OAuth 2.0 Playground e clicar na ⚙️ (engrenagem) no canto superior direito. Nesse novo pop-up habilite a opção Use your own OAuth credentials e preencha com os dados que coletou na etapa anterior. Dê uma olhadinha no nosso .gif abaixo 😉

Agora é só dar um CRTL+F para procurar pela palavra Sheets. Selecione a opção para selecionar a opção para expandi-la. Em seguida, selecione a opção que possui speedsheets nome, como a dessa figura:

Após selecionar, clique em Autorizar APIs. Caso peça para autorizar acessar domínios desconhecidos, não tem problema: é só dar seguinte como de costume.

Caso ocorra este erro, basta copiar o URL do aviso, e ir onde autorizamos URLS, e autorizar essa também 🙂

Para finalizar, selecione o e-mail o qual o OAuth será vinculado e clique em Permitir!!

Por fim, clique em para obter o token de atualização Esse será usado para atualizar o token de acesso, uma vez que esse expira a cada 60 minutos.

Criar Sheets

Nessa última etapa de integração com o Google Sheets, você precisará criar uma planilha Google e nomear as colunas.

ATENÇÃO: se você não nomear as colunas possivelmente a integração falhará, então recomendo utilizar pelo menos um nome “temporário”.

Agora, com a sua planilha em mãos, você precisará armazenar o código da planilha. Tá vendo essa parte em blur na imagem a baixo, então é disso que você precisa.

Nesse momento, espero que você já tenha o ID do Cliente, o ID Secreto Do Cliente, o Token de Atualização e o Código da Planilha. Caso você ainda não tenha, volte alguns passos 😦

Finalmente a parte do Google acabou! Eu ouvi um “glória”? Então, vamos para a parte mais fácil: o Blip.

Integração com Google Sheets: desenvolver o fluxo no Builder do Blip

Você perceberá que para usar a API do Sheets no Blip será necessário duas requisições, uma para obter a chave de acesso para API e outra para popular a planilha.

Obter Token por Requisição HTTP

Nesse momento (quase final) iremos obter uma chave de API com duração de 60 minutos. Para isso, crie em Ações de Entrada/Saída no seu bloco uma Requisição HTTP 👇

O Método será POST, o URL será https://accounts.google.com/o/oauth2/token com os Cabeçalhos vazios. Por fim, o Corpo será:

{


    "client_secret": "seu_id_secreto",


    "grant_type": "refresh_token",


    "refresh_token": "{{seu_refresh_token}}",


    "client_id": "{{seu_id_de_cliente}}"


}

E sua Variável para o corpo da resposta será oauth.

Ao final, você deverá ter algo igual, ou pelo menos parecido, com a imagem abaixo:

Inserir Elementos na Planilha do Google Sheets

Para esse passo, você utilizará novamente uma Requisição HTTP, como da etapa anterior. A diferença agora é que o URL será https://sheets.googleapis.com/v4/spreadsheets/{{codigo da sua planilha}}/values/{{nome da aba}}!{{colunas escolhidas}}:append?insertDataOption=INSERT_ROWS&responseDateTimeRenderOption=FORMATTED_STRING&valueInputOption=USER_ENTERED .

Acho que ficou meio confuso, né? Se sim, dá uma olhada nesse exemplo: para a planilha da imagem a baixo, utilizaríamos o seguinte URL https://sheets.googleapis.com/v4/spreadsheets/{{codigo da sua planilha}}/values/teste1!A:D:append?insertDataOption=INSERT_ROWS&responseDateTimeRenderOption=FORMATTED_STRING&valueInputOption=USER_ENTERED.

Por fim, o Cabeçalhos da requisição será a key seguida do value: Authorization → Bearer {{oauth@access_token}}.


Já o Corpo (que será de acordo com sua necessidade) deverá ser preenchido em ordem alfabética de acordo as colunas. Por exemplo, no nosso caso que começa pela A, devemos preencher o Corpo da requisição na seguinte ordem: A, B, C e D, como no exemplo:

{


    "values": m


    <


      "{{contact.name}}",


      "{{contact.phoneNumber}}",


      "{{contact.email}}",


      "{{menu}}"


    ]


  ]


}

Dicas de :1st_place_medal para potencializar sua planilha

Use e abuse dos dados, pegue quantos você quiser. Por exemplo, monte uma aba que guarde os dados de quando cliente entra para o Atendimento Humano, e, uma que saia. Vai por mim, ajuda bastante 😉

Fique atento também aos status da API, pois os erros são padrões. Certo é 200, caso contrário algo deu errado e você precisa da nossa ajuda. Nesse caso é só mandar uma mensagem aqui, que estaremos sempre felizes em te ajudar.