馃挕 Como Integrar o Blip Com o Google Sheets

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

Criar credenciais

Vamos l谩, no menu lateral esquerdo clique em 鈥淐redenciais鈥. Nesta 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 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 :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 abaixo :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 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 :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 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 鈥渢empor谩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 :frowning:

Finalmente a parte do Google acabou! Eu ouvi um 鈥済l贸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 :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 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: AuthorizationBearer {{[email protected]_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 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 :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 estaremos sempre felizes em te ajudar.

20 curtidas

Voc锚s s茫o d+ cara!!! show mesmo :smileoh:

3 curtidas

Ficou maravilhoso @Pedro_Lucas e @fadoaglauss :clap:

3 curtidas

Wowwwww!!!
Completasso!!

Parab茅ns pelo trabalho @Pedro_Lucas e @fadoaglauss !

2 curtidas

@Bruno_Gabriel ai man S脫 UM POUQINHO ATRASADO

3 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.

3 curtidas

salava o status da requisi莽茫o, para agente ver onde est谩 dando problema :slight_smile:

3 curtidas

Coloquei para como 鈥渞esposta do usu谩rio鈥 ~ 鈥渆xiste鈥

Mas continua dando erro :frowning:

2 curtidas

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

5 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

3 curtidas

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

4 curtidas

acredito que n茫o fa莽a diferen莽a Murilo ahaha mas 茅 uma satisfa莽茫o enorme te ver aqui no f贸rum ahaha

4 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;

}

7 curtidas

Obrigado, vou testar!

2 curtidas

100%

Status 200 :police:

Colocar em produ莽茫o agora! :surfing_man:

vlws!!

6 curtidas

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

Vlws!!

5 curtidas

Ol谩 Pedro
Cara n茫o apareceu nenhuma informa莽茫o na planilha.
Pode ser porque o nome tem acento? (P谩gina1)
Luiz

3 curtidas

Sim, sempre recomendo usar o nome da planilha com algo simples tipo plan ou aba ou coisas desse g锚nero

2 curtidas

ainda assim n茫o rolou
teria algum bloco espec铆fico para fazer as requisi莽玫es?
pode ser no bloco de in铆cio?

3 curtidas

@Luiz_Fernando1 deu certo?

3 curtidas