Como Integrar o Blip Com o Google Sheets

Bom dia povo bonito Sextou com S de churrasco, a seguir um tutorial que deu muito trabalho para nós, quando figo nós, digo eu e @fadoaglauss, espero poder ajudar muitos aqui do fórum a fazer essa integração maravilhosa então sem mais delongas…aqui está…

Olá Blippers! Tudo bem com vocês?

Hoje eu vou ensinar uma coisa que vocês perguntam muito aqui no Fórum, que é 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 ajudo 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 um setinha assim ▽). Com isso uma nova janela irá se abrir e nesse momento você vai clicar em Criar Novo Projeto , no canto superior direito dessa janela. A imagem a baixo mostra o passo a passo, caso ainda não tenha ficado muitooo 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. Agora é só Ativar ao clicar no botão no centro da tela. Aqui também tem uma imagem que mostra o passo a passo, caso ainda não tenha ficado muitooo claro.

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. Nessa 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 ! E dando seguimento, aqui também temos uma imagem que mostra o passo a passo, caso ainda não tenha ficado muitooo claro.

Agora, para finalizar essa 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 :wink:

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 a baixo:

Criar Credenciais

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

Agora, selecione Aplicativo da Web para a escolha do Tipo de aplicativo e insira o nome da sua escolha. Nesse momento, você precisará de muitaaa atenção, pois é uma parte importante. Insira nos URIs de Redirecionamento Autorizados os seguintes links do portal: https://www.portal.blip.ai/application e https://www.developers.google.com/oauthplayground. 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 https://developers.google.com/oauthplayground e clicar na :gear: (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 a baixo :wink:

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 API’s . 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 :slight_smile:

image

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 sheets você precisará criar uma planilha Google e nomear as colunas. ATENÇÃO: se você não nomear as colunas possivelemnte 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, esperao 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 :frowning:

Finalmente a parte do Google acabou, eu ouvi um glória? Então, vamos para a parte mais fácil: o BLiP.

Desenvolver o Fluxo no Builder do BLiP

Você perceberá que pare 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 :point_down:

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 o menos parecido, com a imagem a baixo

Inserir Elementos na Planilha

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 : AuthorizationBearer {{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": [
    [
      "{{contact.name}}",
      "{{contact.phoneNumber}}",
      "{{contact.email}}",
      "{{menu}}"
    ]
  ]
}

Dicas de :1st_place_medal:

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 :wink:

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 sempre estaremos felizes em te ajudar.

10 Curtidas

Vocês são d+ cara!!! show mesmo :smileoh:

2 Curtidas

Ficou maravilhoso @Pedro_Lucas e @fadoaglauss :clap:

2 Curtidas

Wowwwww!!!
Completasso!!

Parabéns pelo trabalho @Pedro_Lucas e @fadoaglauss !

1 Curtida

@Bruno_Gabriel ai man SÓ UM POUQINHO ATRASADO

2 Curtidas

@Pedro_Lucas fiz todo o passo-a-passo religiosamente. Porém está dando erro no fim… Na hora de enviar para a planilha no Sheets não está enviando.

1 Curtida

salava o status da requisição, para agente ver onde está dando problema :slight_smile:

1 Curtida

Coloquei para como “resposta do usuário” ~ “existe”

Mas continua dando erro :frowning:

:police: Ficou massa d+!! Parabéns e muito obrigado por compartilhar! :police:

Tenho 2 dúvidas (estou indo atrás delas agora viu… ainda emocionado por ter funcionado…)

  1. Como modificar o time da variável {{calendar.datetime}} para GMT -3 [devo tratar antes de enviar?] ?

image

Usei ela para coluna E

  1. Como fazer para aumentar/remover o tempo de expiração do token?

image

Já estou indo atrás das respostas também viu, coloquei estes 2 pontos, para quando procurarem por isso, já encontrarem aqui…

:person_climbing: :muscle: :dart:

Abraços!!

3 Curtidas

Se você fizer a primeira requisição, do google como orientado, ele vai gerar um acesstoken sempre que ele passar pela requisição :slight_smile: ai o fluxo fica automático

1 Curtida

Realmente…!! Resolvido o ponto 2. Nos testes anteriores que havia feito estava dando erro… e tinha alterado o value para um valor fixo, ao invés de pegar a variável como abaixo:

image

Após isso, passou normal, aguardar o próximo tempo de virada só para prova dos 9 para colocar em produção.

Obs: devo deixar marcada esse box, certo?

image

abs

2 Curtidas

acredito que não faça diferença Murilo ahaha mas é uma satisfação enorme te ver aqui no fórum ahaha

2 Curtidas

uso esse script como ação de saída para data /hora do contato

variável de entrada:
calendar.datetime

Variável para o valor de retorno
map

function run(map){

var data = new Date(map),
dia  = data.getDate().toString(),
diaF = (dia.length == 1) ? '0'+dia : dia,
mes  = (data.getMonth()+1).toString(), 
mesF = (mes.length == 1) ? '0'+mes : mes,
anoF = data.getFullYear(),
hora = (data.getUTCHours()-3).toString(),
minuto = data.getUTCMinutes().toString();
return diaF+"/"+mesF+"/"+anoF + " - " + hora + ":" + minuto;

}

3 Curtidas

Obrigado, vou testar!

100%

Status 200 :police:

Colocar em produção agora! :surfing_man:

vlws!!

4 Curtidas

Deu certinho!! integrado!! :handshake: :muscle: :facepunch: :hearts:

Vlws!!

3 Curtidas