Skip to main content

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

Bom dia, @Pedro_Lucas


Obrigado, funcionou, é que antes eu não sabia que poderia utilizar os mesmos IDs. Então eu havia criado uma outra conta. E faltou eu alterar o refresh_token. Agora funcionou, está gravando os dados fora de hora (nome, tel, e-mail e assunto) na planilha Google. Show.



Aproveitando, se possível poderia me enviar algumas dicas. A próxima maratona é pegar o CPF do aluno/responsável fazer uma consulta no ASAAS e retornar com o link do PDF do boleto.



Consegue me ajudar? Já possuo a API do ASAAS.


bOm dia, meu tempo anda meio corrido, mas por que não né hahaha, qual seria a dificuldade que tem tido com essa API?


Bom, @Pedro_Lucas . Na realidade acabei de concluir o algoritmo para gravar em plan fora do horário de atendimento.


E ainda vou iniciar o do boleto. Mais a dúvida inicial seria se uso Requisição HTTP ou executar script… Por exemplo, do Google Plan utilizei Requisição HTTP de entrada e saída. No caso do boleto eu utilizaria GET no método.


Estou analisando a documentação.









E quanto a chave (ID), seria do Blip, certo?


Muito obrigado, nosso tempo é realmente corrido.


bom dia,


o Pedro me ajudou e arrumamos, no teste funcionou, mas quando entrei pelo whatsapp no bot, não coletou as informações


valeu


Olá, @Pedro_Lucas


Estou seguindo o a estrutura do busca CEP, a diferença que o meu possui chave. Farei os testes e postarei minhas dúvidas.


@Rafael_dos_Anjos , td bem? 😊



Fiz alguns testes com esse JS para validar o seguinte cenário: se o cliente passar pelo bloco as 2hs da manhã GMT-0, o script reduziria para as 23hs do dia anterior GMT-3?


Nos meus testes, vi que não. Aparentemente ele insere a data corrigida, mas a hora fica negativa.



Seguem detalhes dos testes que executei e proposta para correção do script:



Testei no console do Google e vi que o JS imprime a data corrigida, mas com um horário negativo:


image



Bati um papo com alguns desenvolvedores sobre isso (pois não manjo de JS), me ajudaram a revisar o código e fizemos dessa forma:


image



Segue o script corrigido:



function run(map) {



var data = new Date(map),

diaF = data.getDate().toString().padStart(2, '0'),

mesF = (data.getMonth() + 1).toString().padStart(2, '0'),

anoF = data.getFullYear(),

hora = (data.getHours()).toString().padStart(2, '0'),

minuto = data.getMinutes().toString().padStart(2, '0');

return diaF + "/" + mesF + "/" + anoF + " " + hora + ":" + minuto;

}



Para os testes, usamos a mesma variável “calendar.datetime” e no console do Chrome, utilizamos a entrada no mesmo formato Blip (AAAA-MM-DDTHH:MM:SSZ), como pode ser visto nos prints acima.



Faz sentido pra vc essa correção? 🙂



Abraços e obrigado por ter disponibilizado o código inicial! 😉


–//–


22.10.2021: nova atualização do script para ajuste da hora. Quando o user passava em minutos com zero, o script retornava sem o zero, exemplo: 15:06 retornava apenas 15:6. Atualizado no código acima!


@Wesley.Oliveira faz sim, e muito obrigado por compartilhar.


@Pedro_Lucas e @fadoaglauss , a única coisa que posso fazer nesse momento é agradecer à vcs por este tutorial sensacional, muito bem explicado de ponta a ponta. Fiz meus testes num bot com pesquisa de satisfação onde o intuito é enviar para o Sheets as respostas para criação de relatório para fins de curadoria e por incrível que pareça, na primeira publicação tudo funcionou com sucesso. Acredito que tenha dado MUITO trabalho para vcs chegar com esse tutorial até o fórum, portanto, parabéns pelos testes, pela iniciativa, pelo suporte, por tudo. Sei que vcs ajudaram muitas pessoas, mas particularmente, me ensinaram muito tbm. Abraços!!! 🥰


Cara to numa correria danada, e fiz questão de vir responder, sabe eu vim do fórum, cheguei onde estou hoje graças a esse lugar, e saber que consegui ajudar alguém, igual tantas vezes me ajudaram, me deixa feliz demais, tamo junto demais, logo quer ver você compartilhando o que tem aprendido com take blip com o pessoal, como fez ali em cima


Ooown :blipinlove:



Que mensagem de agradecimento linda! Muito feliz de ter você aqui e de ouvir esse relato.


Bom dia tudo bom? acredito que o sheets não esteja aceitando as aspas, faz assim salve o retorno e o status nos extras contatos e vamos descobrir o que que houve que não integrou


Fala @Luiz_Fernando1 , tudo bem?


Rapaz, primeiro de tudo, recomendo que você oculte os dados do seu cliente aí! Atenção com a LGPD!



Uma dica que te dou é pensar em todos os pontos de integração que fará com o Sheets antes de estruturá-lo no seu builder, conforme indica este excelente post.



Digo isso pois o Token OAUTH do Google Sheets possuí um tempo de expiração de 1 hora (3600 segundos) e caso o seu usuário fique um tempo sem conversar com seu bot, o token possivelmente terá expirado.



Pegou o que eu disse? Agora observe o histórico da conversa e você vai perceber que o cliente ficou mais de 1 hora sem interagir.


Para resolver isso, basta você fazer a requisição de obter o OAUTH novamente.





Apesar disso, o problema ainda pode ser outro e você precisará observar todos os cenários conforme o Pedro sugeriu acima. Dessa forma você conseguirá saber o retorno que a API deu e encontrar o erro exato.





Espero ter ajudado e qualquer dúvida, corre aqui.



Abraços.


Cara penso que não este o problema, pq antes estava trazendo os contatos, apesar de não trazer as informações de email e assinatura



@fadoaglauss e @Pedro_Lucas , segue uma observação importante sobre a integração com o Sheets. O cenário abaixo ocorreu em produção comigo. Caso queiram inserir no tutorial para ficar como alerta, fiquem a vontade! 😊



A criação de CÉLULAS no Google Sheets é limitada 5 milhões de unidades (sempre achei que fosse por LINHAS 🤔), portanto, se houver um volume muito grande de inserção de dados, é necessário dimensionar bem o uso da planilha para não haver um stop nos registros automáticos.



Fiz uma integração em um bot e devido ao alto volume de entrada de usuários, os dados pararam de ser registrados na planilha, retornando o erro 400 com o seguinte response:



{

"error": {

"code": 400,

"message": "Essa ação aumentaria o número de células na pasta de trabalho acima do limite de 5000000 células.",

"status": "INVALID_ARGUMENT"

}

}



Resolução: como uso apenas 7 colunas no sheets para inserir os dados, deletei todas as colunas em branco que vem na planilha por padrão, assim o limite de 5MM de células não será atingido até o final do mês, que é o momento em que crio uma nova aba de planilha para atender o mês seguinte. O stop ocorreu por volta dos 200k linhas com o nº padrão de colunas do Sheets (que eu não havia deletado).



Dimensionamento: sabendo que o limite é de 5MM de células, basta dividir esse valor pelo nº de colunas em uso e vc terá uma ideia de quantas linhas poderão ser preenchidas até que o Sheets dê stop na inserção dos dados. 😉


Wesley, pra que que tu ta usando o google sheets? deu medo aqui kkkkkk essa é uma solução para empresas de médio porte. e soluções mais simples, recomendo usar registro de eventos com power b.i caso queira algo mais parrudo


Oi, @Pedro_Lucas ! 😁



Eu tbm fiquei com medo quando vi o resultado após implementar e vc está coberto de razão. 😅



É um paliativo que tivemos que fazer em um bot para contagem de users com determinados dados que vem do CRM e são extraídos por JS dentro do bot. Como se fosse um double-check dos users que entram no bot, implementado a pedido do cliente.



Sobre a integração com Power BI, se tiver algum tutorial tão bem feito quanto este aqui para indicar, seria muito bem-vindo! 😉



Por enquanto o Sheets está nos atendendo bem com pequenas demandas, mas possivelmente, com o aumento do nº de acessos ao bot, teremos que providenciar uma melhor forma de extrair e contabilizar esses dados.



Mesmo diante desse cenário atípico, acho importante frisar essa limitação do Sheets, pois ela é por célula, ou seja, se a planilha tiver muitas colunas à serem preenchidas, em algum momento não será possível a inserção de dados. Dependendo do volume, o cliente deve decidir sim qual o melhor caminho a seguir, se contorna o problema com uma solução paliativa ou se busca soluções mais adequadas no mercado. 😉


olá


é possível trazer para a planilha o campo “Comentários” do Desk?


valeu


é possível sim


q ótimo!!


e como seria isso?


obrigado Pedro!


@Pedro_Lucas Parabéns pelo post, sensacional, só fiquei com uma dúvida o que colocar no “grant_type”: “refresh_token”,


no grant_type não vai mudar, o grant_type é a palavra refresh_token msm


qual é a variável para o Comentário do Desk?


é só acrescentar a variável no script e a coluna no sheets né?


Maravilha @Pedro_Lucas , agora estou com um outro cenário


Ele retorna para mim esse erro.





E fazendo as validações eu pego esse cara aqui





Que corresponde o mesmo deste, no qual retorna o status ok 200





O que poderia ser esse tema?


você se cadastrou na engrenagem no canto superior direito?


e de onde esta copiando o refresh token?


Comente