Sticky

Como Integrar o Blip Com o Google Sheets


Reputação 7
Crachá +2

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 🙂


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 “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: 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 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.


95 comentários

Reputação 7

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

Reputação 7

Ficou maravilhoso @Pedro_Lucas e @fadoaglauss 👏

Reputação 7
Crachá +1

Wowwwww!!!

Completasso!!


Parabéns pelo trabalho @Pedro_Lucas e @fadoaglauss !

Reputação 7
Crachá +2

@Bruno_Gabriel ai man SÓ UM POUQINHO ATRASADO

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

Reputação 7
Crachá +2

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

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


Mas continua dando erro 😦


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


🎯


Abraços!!

Reputação 7
Crachá +2

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


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

Reputação 7
Crachá +2

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

Reputação 7

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;

}

Obrigado, vou testar!

100%


Status 200 :police:


Colocar em produção agora! 🏄‍♂️


vlws!!


Deu certinho!! integrado!! 👊 ♥️


Vlws!!

Olá Pedro

Cara não apareceu nenhuma informação na planilha.

Pode ser porque o nome tem acento? (Página1)

Luiz

Reputação 7
Crachá +2

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

ainda assim não rolou

teria algum bloco específico para fazer as requisições?

pode ser no bloco de início?

Reputação 7

@Luiz_Fernando1 deu certo?

Reputação 7
Crachá +2

Me perdoa pela demora, o ideal seria após coleta todas as informações

@Pedro_Lucas , Bom dia.

Uma dúvida com relação aos Sheets. Durante os procedimentos no Google é gerado Id Clente, Id Secreto, temos nº do sheet.


A dúvida é, para cada conta e IDs quantos sheets posso criar?


Exemplo: Para o ID cli 1234 e ID secret 4321 nº sheet 0123

Para o ID cli e ID secret eu poderia ceiar um outro nº sheet 2021123

Reputação 7
Crachá +2

sim sim vai ser o mesmo id secreto, e o mesmo id para todas as planilhas vinculadas aquela conta lembrando que o sheets tem que ser gerado por aquele gmail

sem crise brother


coloquei as requisições no fim do fluxo e tbm deixei no início, mas não coletou informação


estou testando em um bot de ID: testando80


vc consegue dar uma olhada?

Obrigado, Porém ainda não funcionou. O que acontece, estou alterando o fora de hora de atendimento. Ou seja, preciso capturar dados após o horário para a Equipe entrar em contato no dia seguinte. Gostaria de gravar na Plan nome, tel e-mail e assunto. As chaves do oauth eu teria que colocar no bloco verifica horário ou no bloco que eu criei para o cliente digitar o nome? Eu coloquei no meu e não gravou na Plan.

Reputação 7
Crachá +2

consegue me dizer qual status está retornando a requisição ?

Comente