Como eu faço Integrações API no Bubble sem usar Workload Units (WU)

turma em alguns vídeos que eu lancei aqui no canal a gente ensinou a criar um aplicativo de inteligência artificial no Bubble onde a gente manda informações para Open Eye e recebe uma resposta vou até deixar o link aqui se você quiser ver o tema desse vídeo não tem nada a ver com inteligência artificial tem a ver com plugin que eu criei para poder viabilizar esses vídeos pelo seguinte né eu pensei ah milhares de pessoas vão querer usar esse meu aplicativo só para testavam que seria a chave deles de api lá e tudo e assim se eu ficar consumindo a tal das workload de units do bubbler você vai me custar caro né Eu queria deixar esse aplicativo do Bubble no plano gratuito né sem pagar os workloads aí que que eu fiz eu criei um plugin que roda clintside que não consome ações do servidor do Bubble para conseguir fazer requisições aí porque aí ele não me consome absolutamente nada né se você quiser dar uma olhada no gráfico de logs desse aplicativo por exemplo que eu consumo dele é só de carregamento de página 14 assim realmente que ele vai ficar para sempre no plano gratuito E aí o pessoal começou a me perguntar muito mas Renato como é que você fez para criar esse plugin gerou muita curiosidade assim em um objetivo do vídeo é exatamente esse como é possível fazer chamadas api no Bubble sem usar o servidor do Bubble sem usar o workloads ou seja sem consumir nenhum recurso deles então vamos lá pessoal primeiras configurações que você vai ter que fazer criar um novo aplicativo no Bubble que a gente vai fazer tudo gratuito mesmo não tem necessidade nenhuma de ir para plano pago aqui crie um novo plugin no Bubble mesma coisa criar plugin é gratuito Então não precisa pagar nada e instale o Postman que é uma ferramenta que eu Já ensinei várias vezes aqui no canal que também é uma ferramenta gratuita para fazer chamadas api Postman é uma ferramenta fantástica já falei dele umas 50 vezes aqui no canal o Postman você vai acessar por postman. co você pode baixar ele para o teu computador ou você pode acessar na web mesmo eu vou mostrar ele aqui na versão web porque eu consigo da Zoom fica melhor para vocês que me assistem pelo celular e para criar um novo plugin no Bubble você vem aqui em Bubble ponto plugin vamos dar o nome do nosso plugin aqui de testes YouTube clints ele já tá criando o nosso plugin já me jogou na interface aqui ó com isso aplicativo criado pelo link criado e Postman instalado você já tem tudo para começar a brincadeira aqui tá então agora a gente vai direto pessoal para criação do Plugin você pode fazer isso diretamente pelo aplicativo sem criar plugin e não recomendo com plugin fica mil vezes mais fácil aí tá então criado plugin Imagino que você já tenha criado como instruir acima né agora a gente vai criar um elemento dentro do Plugin Então vamos lá pessoal você tá aqui na interface de plugins que que a gente tem aqui aqui o nome do pluginia fotinho do Plugin na descrição do Plugin todas as configurações que você quiser fazer para o insta estão aqui Aqui tem chamadas api elementos Actions galera a gente tem módulos inteiros na comunidade ensinando a criar plugins não vou ficar entrando muito a fundo vou direto ao ponto do que a gente precisa fazer aqui tá Então você vai clicar em elements e vai adicionar um novo elemento esse elemento pessoal eu vou chamar de via CEP teste Crying site tanto faz o nome que você dá porque isso aqui porque para exemplificar esse tutorial eu vou usar o viasep é aquela api que a gente já usou algumas vezes aqui no canal é uma bem extremamente simples né Para você fazer uma consulta de seta então se você quiser consultar esse CEP aqui ó ele vai te retornar esses dados ou simples assim né então criei o elemento aqui show de bola e aí libera para teste no seu aplicativo Como assim pega aqui ó na tela dos plugins tá tá aqui embaixo ó aplicativo para testar o plugin eu criei um aplicativo só para isso a identificação do aplicativo tá aqui em cima ó no parâmetro ID da URL vou pegar isso aqui e vou copiar ó sem codar troço plugins traz 46953 vou colar esse ID aqui ó colei cliquei fora só isso galera já o que que eu fiz aqui ó eu configurei para que esse aplicativo tem acesso a esse plugin que eu estou criando Então você só dá um F5 aqui para atualizar a tela ó atualize a tela do editor do seu aplicativo E aí você já vai conseguir instalar o plugin Olha só atualizei aqui vem um plugins tem nenhum plugin instalado o aplicativo é novo adicionar plugins Opa ó o primeiro plugin que já me aparece aqui em cima testes do YouTube lá em sites exatamente que a gente tá criando tá vendo que ele tá com uma tag testando aqui né instala ele galera ele instalado você já vai ver que vai aparecer aqui do lado o elemento que a gente criou o via septest que lá em site tá vendo série ele na tua tela inserimos ele aqui show de bola então insira o elemento na tela do seu aplicativo com isso feito a gente já pode ir para o próximo passo que é fazer a chamada api galera Então olha só como é que a gente faz para fazer uma chamada api client site se a gente vier aqui no nosso plugin e fizer uma chamada api diretamente adicionar uma conexão ap como a gente está acostumada a fazer necessariamente Isso aqui vai passar pelo servidor do Bubble não é o que queremos o que a gente quer é que essa chamada apis seja realizada pelo dispositivo do usuário ou seja o dispositivo do usuário que vai se conectar diretamente lá com vias CEP sem passar pelo servidor do Bubble é por isso que o Bubble não cobra por isso que a gente não consome recurso do Bubble para fazer isso é só no código então fica comigo juro que vai ser muito mais simples do que você imagina não faça então aí piá igual aqui volta lá em elementos onde a gente estava E aí já vem aqui ó para a função update Esse é o campo de código que a gente vai testar aqui tá pessoal imagina que metade de vocês já tem alguma familiaridade com Java script de tanto usar o Bubble e a outra metade de vocês não tenha nenhuma realidade com Java script não tem problema nenhum pode ficar comigo que tudo que eu vou ensinar aqui mesmo que você nunca tenha digitado uma linha de código na tua vida você vai entender tá então aqui na função update O que que significa toda vez que ocorrer qualquer atualização da página onde tem aquele elemento inserido ou seja dessa página aqui ó esse código vai rodar tem um código muito clássico que a gente usa só para testar se tá funcionando as nossas coisas que é o console ponto log então digita assim ó aqui na função update console. log abre parênteses fecha parênteses abre aspas e fecha aspas aí dentro das aspas isso era uma mensagem se você estiver vendo essa mensagem nosso plugin já está funcionando por exemplo clica fora aqui aí pessoal dá um preview no teu aplicativo e aperta f12 para você ir para as ferramentas do desenvolvedor esse aqui é o de vela perto do Chrome já falei deles várias vezes aqui no canal aí você vai aqui no console tá vendo aqui você consegue ver todas as mensagens do aplicativo dá um S5 para atualizar a tela ó que que apareceu aqui galera tem uns errinhos aqui coisas do meu navegador mas olha a mensagem aqui ó se você estiver vendo essa mensagem nosso plugin já está funcionando galera então consegui inserir uma mensagem no console assim a gente já sabe que o nosso elemento tá na tela que o nosso código está funcionando tá então agora a gente vai efetivamente inserir uma chamada api dentro desse plugin o primeiro passo aqui é Abra o Postman e crie a chamada que você quer fazer porque o Postman você já vai ver olha só galera vamos lá via CEP caso você nunca tenha usado como é que funciona você pega seu URL aqui ó faz uma chamada Api para ela e ela vai te retornar Quais são os dados dessa desse CEP a rua complemento bairro a cidade estado e por aí vai tá então basta eu ir lá no Postman e fazer uma chamada get para essa URL aqui ó enviar e pronto ele me retornou exatamente os dados que eu quero ali ó os meus dados que eu acabei de ver no navegador né Essa é a chamada que eu quero fazer galera simples assim porque estamos usando Postman porque o Postman tem esse recurso Escondidinho aqui no canto que poucos de vocês conhecem que o código dessa chamada galera Então vou vir aqui e vou pegar o código já vem script-fet o recurso fat da linguagem de Java script e ele me dá o código Prontinho galera olha só Então posso vir aqui ó e copiar esse código todo e aí eu volto lá no meu plugin e cola aqui ó vou colar embaixo desse hotel deixa esse console logo colei aqui galera só copiei e Colei o código que o Postman me deu tá vamos atualizar a página e ver o que que acontece Vamos tentar entender esse código enquanto ele carrega a nossa página lá primeiro eu tô mandando uma mensagem para o console se você estiver vendo essa mensagem nosso plugin já está funcionando depois ele já começa a dar umas instruções fala Olha você vai fazer uma chamada do tipo get para essa URL aqui ó e quando você obtiveram o resultado Joga lá no console ó console.

log o resultado e se der um erro me mostra qual erro é isso que ele está me respondendo aqui entendeu então quando você tiver o retorno dessa chamada api me mostra esse resultado no console vamos ver se mostrou show galera olha o nosso console aqui ó se você estiver vendo essa mensagem nosso plugin já está funcionando e aqui ele já me trouxe as informações da chamada api aqui no console Então nossa chamada ap com isso já está funcionando então basta você abrir o potion criar chamada que você quer fazer pegue o código Java Script traço fat copie e cole na parte update do seu elemento do Plugin com isso galera já tá funcionando a tua chamada aí claro que a gente não pode parar por aqui né galera que a gente já tá fazendo a chamada eima Isso não basta a gente precisa usar isso efetivamente no aplicativo né agora a gente vai tratar a resposta pelo seguinte galera Ok tem um Jason aqui me dando um monte de informações mas vamos dizer que o que eu queira extrair aqui são dois dados eu quero a Rua eu quero a cidade por exemplo como é que eu puxo isso galera olha só se você conhece um pouquinho já de formatação Jason você sabe que isso aqui é um objeto e dentro desse objeto tem os campos CEP o campo logradouro Campo complemento Então o que eu preciso é fazer um par sim é o termo que se usa para fazer um tratamento desse Jason aqui que é a formatação né para você puxar especificamente os campos que você tá buscando como é que a gente vai fazer isso olha só aqui galera eu não quero executar só essa ação eu vou dar um control X para cortar esse pedaço poder executar mais ações tá então eu vou abrir aqui uma chave e vou fechar uma chave e vou dar um zenters aqui todas as ações que eu quero rodar nesse código eu vou deixar dentro dessas Chaves aqui tá então primeiro eu quero mostrar um resultado no console tranquilo ontem vírgula quebra de linha agora eu quero mostrar galera só a rua como é que eu faço isso com essa funçãozinha aqui ó Jason tudo em maiúsculo ponto parse isso aqui é do Java script galera e aí o Jason ponto parça Ele perguntou qual é o Jason que você quer tratar é o resumo que é exatamente o resultado da requisição que voltou aqui né ponto quem é que você quer pegar dentro galera desse Jason aqui ó eu quero pegar o logradouro copiei e colei aqui então é isso que eu quero galera joga no console um tratamento do Jason ponto logradouro ou seja me joga só o logradouro cliquei fora atualizei é rapidinho só atualiza que ele já pega a versão atualizada do Plugin né Opa galera que que apareceu aqui ó só Praça da Sé que é o logradouro tá vendo ó inclusive você pode brincar um pouquinho com isso você pode vir aqui ponto e vírgula quebra de linha console ponto log jason. parce re resultado ponto eu quero também a localidade que era a cidade ali se eu não me engano né localidade isso aí localidade atualizei e ele me trouxe Praça da Sé e São Paulo show de bola Vamos brincar mais ainda antes Aqui eu posso colocar assim ó colocar entre aspas galera a rua onde você mora é dois pontos espaço aí aqui eu coloco um mais para dividir ou seja primeiro Me traga esse texto depois me traga esse código aqui mesma coisa a cidade onde você mora é dois pontos fecha aspas e o mais para dividir um atualizei aonde você mora é Praça da Sé a cidade onde você mora é São Paulo Galera É isso aí então a gente consegue fazer o tratamento da resposta da api dessa forma e aí continuamos então então para tratar a resposta a gente já viu que a gente usa o Jason resulte ponto aqui o nome do campo que você quer puxar né próximo passo obter essa resposta para usar no aplicativo porque convenhamos fica só aqui no console não me ajuda em nada né não vou ficar pedindo para o meu usuário abrir o console do navegador né galera Então como que eu faço para puxar essa resposta no plugin para isso você vai usar os xposed States que que são os xposed States estados expostos Seria tipo assim é qual é o dado que você quer Expor a partir desse código aqui lá no plugin pessoal você vai em exposed States E aí eu vou criar dois States aqui dois dados que eu quero expor eu quero Expor a rua do usuário e aqui eu quero criar um novo state cidade eu criei Rua e criei cidade o nome aqui ó é o nome que você vai usar lá no código Põe o nome facilmente identificado aqui o caption é o que vai aparecer lá na interface do editor do aplicativo então Rua do usuário por exemplo do usuário tô inserindo qualquer coisa aqui só para ficar mais claro para você que são coisas diferentes tá que que é isso é um texto é um número umbuliano é uma imagem texto e texto não Então galera que que você vai logo ver aqui ó se você vê no editor do aplicativo agora e atualizar Olha que interessante que aparece eu vou inserir Um textinho logo aqui abaixo desse elemento tá aqui que eu quero mostrar por exemplo a rua do morador tá E aí eu venho inserir dados dinâmicos puxo o meu elemento via CEP aqui ó e aqui que apareceu aqui galera quatro opções ó altura do elemento largura do elemento isso vem de padrão do Bubble Rua do usuário cidade do usuário galera aqui está exatamente aquele caption que eu botei né o nome do campo que eu posso puxar aqui então Rua do morador aí eu vou puxar do elemento aqui e cidade do morador eu vou puxar a cidade aqui do morador pronto e agora como é que eu pulo esses States aqui ó como é que eu pulo esses dados lá no nosso código update eu vou inserir logo abaixo do console ponto logo uma que vai ocorrer mediante a resposta né É esse aqui ó instance ponto publish state isso aqui é padrão do Bubble tá então isso aqui é um conceito que a gente aprende a medida que tá aprendendo a criar plugin até o final do vídeo eu falo um pouquinho mais para você sobre isso então quero publicar lá naquele exposed abre e fecha parênteses aqui ó Primeiro qual é o xposed state que eu quero publicar eu criei um chamado Rua e um chamado cidade eu quero publicar no Rua aí eu boto uma vírgula aqui ó Qual é o dado que eu quero inserir nesse instante jason. parce resulte ponto logradouro e mesma coisa galera em relação ao outro Public state instance ponto localidade Então eu peguei o logradouro e Joguei dentro desse dado Rua peguei localidade Joguei dentro desse dado cidade vamos ver se isso já funciona na prática aqui galera e funcionou hein Olha só a nossa mensagens de console continuam iguais mas agora a gente vê Rua do morador já trouxe Praça da Sé e na cidade do morador já trouxe São Paulo então a gente conseguiu extrair esse dado não só para o console mas para interface do nosso aplicativo para usar como a gente quer e tudo isso galera lembrando clientside não tá passando nada pelo servidor do Bubble aqui e mais uma como eu insiro uma informação na URL porque olha só galera concordam comigo que eu não quero sempre ficar puxando CEP 0100100 da Praça da Sé em São Paulo né Eu quero inserir um CEP para consultar Então como é que eu faço isso para isso a gente vai usar os fios ou seja Campos do Plugin então você vem aqui no plugin filmes aqui em cima logo em cima do xposed States não tem Field esses campos serão mostrados no editor do Bubble para que você possa Popular Então vou criar um campo aqui ó chamado CEP a consultar e aqui em caption eu vou botar assim ó insira o CEP que você quer consultar qualquer coisa assim qual que vai ser o tipo de dado vai ser um valor dinâmico Qual a diferença de texto estático e valor dinâmico aqui por exemplo que o texto estático você não consegue usar aquela expressão dinâmica do Bubble aquele botãozinho azul né Quando você bota valor dinâmico aqui você consegue puxar de outros lugares qual vai ser o tipo um número uma imagem um texto um texto né CEP é sempre texto e aí pessoal agora eu consigo Puxar esse campo lá no código então vamos voltar lá para o código Então olha só se eu quiser consultar por exemplo CEP um dois três quatro cinco concorda comigo que eu preciso inserir ele aqui no meio da URL é assim que eu vi a cep funciona então como é que eu faço pessoal eu vou dividir essa URL em três partes eu vou tirar esse CEP aqui ó e eu vou fechar as aspas para configurar essa primeira parte aqui ó é eu dou um espaço mais espaço abra aspas Opa já tem a última parte aqui tá vendo ó então começa assim e termina assim a URL agora eu dou mais um mais aqui ó e aqui no meio pessoal eu insiro o CEP que eu quero consultar como é que eu puxo aqui o próprio Bubble já vai dar letras você clicar em show do comentation tal se eu puxar a própria x.