Como usar Supabase no Typebot Criando fluxo | Aulão SetupOrion
2.87k views7120 WordsCopy TextShare
OrionDesign
Saaalve pessoal, tranquilo?
Nesse video mostro como que você pode usar o supabase como banco de dado...
Video Transcript:
E aí pessoal beleza aqui quem fala com vocês é o waron e sejam todos bem-vindos a mais um vídeo do meu canal onde nesse vídeo aqui eu vou te mostrar como que você vai fazer para utilizar o Type bot e o supabase junto ou seja através do Type bot você conseguir realizar consultas ou cadastrar informações dentro do supabase sem o n8n tá sem que precise de ter ele aí de fato intermediando eh essa conexão mas eu vou deixar um ponto bem claro que é eu ainda prefiro trabalhar com o n2n intermediando essa conexão porque através de lá eu tenho muito mais funções que eu posso fazer Mas dependendo do que você deseja de fato fazer mais fácil trabalhar aqui dentro do próprio Type bot mesmo sem precisar de fazer o fluxo lá dentro deixar ativo voltar para cá para pegar informação né então para evitar isso vamos fazer aqui dentro do Type bot at legal passar isso daqui porque tem muit muita pessoa que tem dificuldade com a questão aí de credenciais do sup Bas E como que faz requisições para ele né pessoal tá acostumado lá no n8n que consegue ter um Nozinho ali do sup bagas e puxa ou envia informação bem rápida mas dentro do Type bot ou dentro de Outras aplicações você precisa de fazer requisições e é isso que nós vamos estar fazendo aqui hoje vou te ensinar como fazer requisições pro supabase e o mesmo vale para várias outras apis tá Mas vamos focar aqui direto no supa mas bora lá primeira coisa que eu vou fazer aqui dentro é do supa base em si é criar uma tabela Então vou vir aqui em table editor e eu vou clicar na parte de criar uma nova tabela nessa nova tabela vou colocar o nome e aí já vai vir mais uma dica que é o seguinte não coloque espaços por exemplo se você fizer assim oron espaço design vai funcionar vai mas é muito mais vantajoso trabalhar com Line Porque dependendo da onde você vou fazer essas requisições aí não vai funcionar Tá então se usando rline aqui para separar ou letra maiúscula aqui para separar também é super válido e mais recomendado tá no meu caso eu vou chamar essa planilha aqui nessa tabela de Lead tá aí eu vou descer aqui aí nós vamos encontrar essa função de colunas Onde eu consigo ter o ID que eu sempre vou deixar ele aqui embaixo eu tenho aqui a as outras colunas nesse caso tá deixando a coluna de criado hein nesse caso eu vou apagar porque eu vou adicionar uma coluna e eu vou colocar o nome aqui por exemplo push name tá ou melhor colocar nome nome e aí eu vou trocar aqui para e text né o tipo dele vai ser text aí eu vou adicionar aqui outro que vai ser o WhatsApp dessa forma e aí aqui no seu valor eu vou colocar também que ele vai ser text tá aí você fala assim ah mas o WhatsApp é um número sim mas na Evolution por exemplo os números são salvos através de uma coisa chamada remod gid do qual ela é Ela tem o número da pessoa por exemplo 55 11 9 7 3052 593 aí ele vim @ s. whatsapp. net tá então como tem esse @s.
a pnet ele vai se enquadrar aqui como text Beleza mas se você fizesse um tratamento lá dentro do Type bot para tirar isso e mandar somente o WhatsApp para cá de fato não tem problema vai funcionar também tá mas aí você vai eh ou você mantém texto ou você troca para número se você quiser eu vou deixar assim para não precisar perder tempo fazendo isso eu coloquei o nome WhatsApp eh eu vou deixar só esses dois Campos mesmo por enquanto depois nós preenchemos com mais coisas se necessário eu vou salvar ele vai carregar e pronto aí eu vou ter aqui dentro o ID que é gerado automaticamente em ordem 1 2 3 4 o nome e da pessoa né e o WhatsApp dela então esse daqui vai ser o quadro para leads por exemplo todo mundo que chegar vai cair aqui dentro e aí a partir daqui ele vai verificar se já foi atendido ou não né então beleza tenho aqui o quadro de Lead próxima parte que eu vou fazer é vir nesse cadeadinho que eu tenho aqui porque nesse cadeado eu vou tá adicionando uma política de acesso essa política de acesso é o que vai dar dá acesso de Fato né A uso externo ou seja para realizar requisições para ela é para essa tabela tá então quando eu cliquei naquele cadeado ele vai me levar para essa tela aqui onde ele fala aqui na coluna Lead né não tem nenhuma política aplicada então eu vou criar uma nova política clicando aqui em new poce e aqui eu vou dar um clique nessa primeira opçãoincorreta aí do Type bot você pode trabalhar com a primeira mesmo tá aí você vai clicar aqui usar template ele vai levar para essa tela aqui a e observação a tela anterior ela só vai configurar essa tela aqui tá e eu vou explicar de forma bem rápida o que que vai ser nessa tela nós temos aqui o nome da política que você pode colocar o que você quiser por exemplo Type bot andline Lead tá para falar que aqui eu tô pegando a política do Type bot pro Lead é obrigatório mudar não tá mas tem que ter um nome diferente para cada tabela então eu coloquei Type bot que eu sempre vou colocar se é pro Type bot em si underline para separar e o Lead para falar que é da tabela Lead tá aí nós temos aqui qual operação você vai liberar então ele fala aqui você só vai poder selecionar só vai poder inserir atualizar deletar ou eh todas né nesse caso de fato eu quero todas as ações selecionei aqui todas tá e depois eu eu tenho aqui embaixo essa parte e de usando uma expressão E aí vem uma coisa interessante que é o seguinte Às vezes o pessoal tá fulando isso daqui e acaba fazendo uma coisa que é apagar essa parte aqui da expressão tá é super importante que independente qual você escolher você troque aqui para true tá se você tiver ouvindo barulho de fundo ignora bom voltando aqui então agora eu tenho essa parte da usando expressão né que precisa aqui está em true tá não true aqui você acaba não conseguindo fazer aquela ação que você queria tá mas enfim eu vou vir aqui em All ou seja desse todos vou verificar se tá true aqui nesse caso tá no de baixo não precisa e você vai dar um review ele vai mostrar que está tudo certo você só vai dar um save e pronto Você salvou essa política então quar aqui de forma bem rápida de novo Olha só eu vou vir aqui New Police Primeira opção uso o template coloco todos verifico se tá true aqui embaixo e dou um review no máximo mudo o nome aqui para Type bot underline e leads por exemplo vou dar um review save e pronto criei essa regra Então essa regra aqui vai dar permissão para mim poder fazer requisições externas utilizando nosso super e utilizando o nosso super base né ap dele bom criei a regra agora eu vou vir aqui em editor de tabela vou abrir a tabela Lead e uma observação tá que essas regras você tem que criar para cada tabela que você tiver Então você tem 15 tabelas e você quer fazer requisições pras 15 as 15 precisam de ter uma regra cada Tá mesmo que seja igual mas tem que ter uma regra senão não vai liberar bom aí eu vou fazer o seguinte eu vou cliar aqui em insert insert Row e eu vou colocar já um dado aqui dentro apenas para demonstrar então por exemplo no nome eu vou colocar aqui o nome João e o WhatsApp do João eu vou colocar por exemplo 11 40028922 @s whatsapp. com beleza Ou pnet então eu coloquei esse WhatsApp aqui pro João aí eu vou dar um save aqui para deixar esse dado salvo tá E aí com esse dado salvo agora quando eu fizer uma requisição de busca por exemplo eu já vou conseguir encontrar até para fazer testes tá Não não é obrigatório preencher aqui de cara mas eu já gosto de preencher até para fazer teste se eu consigo puxar esses dados porque se não tiver dado eu não também também eu não vou saber se tá tudo funcionando certinho na hora que eu puxar um dado tá enfim e aí por último aqui dentro do supabase Eu tenho esse ap Docs onde nele eu vou encontrar toda a documentação para realizar essas requisições Tá mas do lado direito ele fala que a linguagem é para JavaScript e você vai trocar essa linguagem para B tá então você vai trocar aqui para B vai aparecer de fato Agora sim todas os end points corretos né de fato Agora você vai ter o endp e os headers que é necessário tá e se você reparar no herer que é esse Men H ele fala que o nome é a pq e o seu valor é esse daqui só que esse é só o nome do valor também tá ele não tá mostrando aqui de fato o nome do valor tá para você visualizar o nome do valor você precisa clicar aqui em exibir Chaves e aí sim ele vai mostrar qual que é a chave né qual que é aquela ke que nós temos E aí você vai poder trabalhar tranquilo tá mas vamos lá agora que eu exibi as chaves eu tô no modo Bash agora eu posso visualizar tudo que eu preciso e começar a trabalhar do lado esquerdo eu tenho aqui visualizar linhas filtrar inserir linhas atualizar linhas deletar linhas enfim nesse caso aqui a primeira coisa que eu vou mostrar para vocês é a parte de visualizar linhas Então esse Rage rows e aqui dentro eu vou ter visualizar todas linhas visualizar uma coluna específica né enfim no caso eu vou pegar aqui visualizar todas as linhas primeiro para mostrar com funciona a forma mais rápida e depois nós vamos partindo pros outros aí também explicando cada um deles que eu acho necessário tá dentro desse corpo que ele entregou desse cur nós temos aqui ó cur e não tem nada na frente dele é não seu end Point significa que isso daqui é do método get tá toda vez que ele tá fazendo um cur ele tá fazendo um get de um site beleza de um end Point então ele tá fazendo um get para esse daqui eu já vou copiar então eu seleciono botão direito copia Control aqui dentro não funciona tá então botão direito copio aí eu vou vir no Type bot e aqui no Type bot agora que eu tô gravando lançou uma atualização ó eu vou atualizar aqui já mas enfim aqui dentro do Type bot eu vou colocar um htp request e dentro desse htp request eu vou colocar esse end Point vou vir em configurações avançadas e o método como eu falei ele vai ser get porque lá dentro não especifica e se não especifica ele vai ser get tá aqui em header eu vou adicionar o herer que ele pede E observa que eu tenho esse menos H que é o herer de fato e eu tenho dois tá mas não é necessário você trabalhar com os dois você pode trabalhar com um ou com outro ou com os dois se você quiser mas em soma Eu só trabalho com um sempre funciona super tranquilo que é esse ap k então eu vou utilizar lá dentro o nome ap k e o seu valor vai ser esse daqui tá se você for utilizar o de baixo o nome é autorização e e o valor dele é desse bar até o a última letrinha que tiver aqui tá então é esse código inteiro não é só o código é o barer mais o código Tá mas enfim eu vou utilizar a PK e eu vou utilizar esse valor aqui que é a minha chave então eu vou dar um botão direito copiar volto no Type bot e vamos lá qual que é k a k e qual que é o valor o valor é esse código aqui tá bom configurou aqui o header Já tá pronto essa parte tá e se reparar eu só teria mais um header e não tenho nenhum Body que é representado aqui pelo menos D tá como não tem nenhum menos D não tem b não tem mais nada então significa que eu posso fazer uma requisição aqui para verificar se tá funcionando então eu posso fazer um teste de request ele vai carregar e olha só o status foi 200 do qual ele conseguiu retornar o id1 o nome João e o WhatsApp tal Beleza então ele já conseguiu localizar aqui da mesma forma que se eu viesse aqui dentro do sup base e eu colocasse outro por exemplo o nome agora vai ser Ana o WhatsApp dela vai ser por exemplo 11 eh colocar aqui 9730 52 599 supom no número aleatório é @ s. whatsapp.