Guia completo de APIs (Bubble FlutterFlow)

turma de cada dez dúvidas que vocês postam aqui nos comentários eu acho que umas sete ou oito são referentes a api e me impressiona que até hoje eu não tenha tido um canal um vídeo explicando exatamente o que são apis já mostrei exemplos de integração apis já CTI sem algumas dezenas de vídeos mas o conceito de apis eu nunca expliquei Então seja bem-vindo você vai entender o fundamento do que é uma pi e vai ver um monte de exemplos práticos Esse vídeo é essencial mesmo para você que já se acha até um pouquinho mais avançada comigo tá Então pessoal que são apis o nome api significa aplication pro Grammy interface seu interface de programação de aplicação tá isso aqui não vai te ajudar em nada galera a melhor descrição que eu posso te dar para uma pi é a seguinte Imagine que você tem um banco de dados teu vou dar aqui como exemplo um banco de dados da água que é aquele aplicativo de aluguel de barcos que a gente criou lá no começo do canal numa playlist de nove vídeos tá aí que que é o Acqua é uma plataforma de locação de Então as pessoas postam as suas embarcações lá para lugar e outras pessoas encontram esses barcos Então eu quero que os meus usuários interajam com a água que que eu faço crie um aplicativo para isso certo ou eu crio uma interface de usuário que é o aplicativo propriamente dito webmobile onde ele vai acessar o banco de dados da água então eu tô o tempo todo trocando informações aqui eu lá no aplicativo por exemplo o usuário clique em procurar aí eu vou lá no banco de dados Acqua me manda aí quais são os barcos da região dele Ah o banco de dados devolve e eu mostro na interface do usuário beleza api é uma outra forma que eu tenho de acessar o banco de dados só que a api ela não serve para que o usuário acesse diretamente ela serve para que outros aplicativos acessem o seu banco de dados entendeu não é uma interface de usuário é uma interface de aplicativo Ah agora você começou a entender um pouquinho melhor o porquê dessa nomenclatura né então você pode ceder a outros aplicativos quaisquer que eles acessem os seus dados Como que você faz isso respondo uma API então api pessoal nada mais é do que o padrão universal de comunicação entre aplicativos na web então é a forma com que um aplicativo se conecta no outro se não ficou Claro ainda o bastante vou te mostrar isso na prática agora Então olha só eu vou mostrar isso para vocês na prática tá eu quero criar um aplicativo no flutterflow uma outra plataforma de criação de aplicativos que leia o banco de dados do meu aplicativo Aqua que como Vocês bem sabem foi criado em Bubble Como que eu faço isso galera primeiro passo eu vou expor o meu banco de dados da água no Bubble criando um ampy Galera É exatamente esse cara que eu mostrei aqui ó é uma pontinha que você deixa solta ali para que outros aplicativos possam vir e interagir com ela Então olha só como que eu faço isso lá no Bubble Você vai em Back And work Flow que são ações de ser E aí um aviso você precisa estar num plano pago do Bubble para conseguir expor o seu banco de dados via api tá então tô aqui no meu aplicativo Bubble tem alguns barcos cadastrados aqui na versão teste né E aí eu vou lá em back angeworkflows aqui em cima vou aqui direto em work Frost e aqui que eu vou fazer vou criar um novo Happy workflow é assim que a gente criou um mindpoint tá New happy work Flow E aí aqui eu vou dar um nome para ele como por exemplo buscar barcos expor como um workflow E piá e público vou manter público é isso mesmo que eu quero eu quero que ele seja público pode correr sem autenticação pode eu não vou pedir credencial não vou pedir senha não vou pedir nada qualquer um pode vir aqui e puxar uma lista de barcos ignorar regras de privacidade é uma questão de segurança que eu vou abrir mão só para fazer o teste durante esse vídeo Depois eu apago assim de point né Então pronto isso pois aqui posso correr sem autenticação ignora as regras de privacidade então aqui agora eu já tenho um link Point criado que que eu quero fazer quando alguém acessar esse endpoint eu quero retornar dados eu quero saber se torna alguns dados que que eu quero que retorne galera um Jason estruturado O que é Jason Então vou colocar aqui ação Rita from para retornar dados via apita o que que é um Jason um Jason galera é uma formatação padrão de dados que as apis usam para trocar esse tipo de informação né Então olha só eu tô indo lá no meu banco de dados buscar dados qual vai ser o formato que esses dados serão entregues via Jason então Jason galera nada mais é do que uma formatação padrão assim com chave e valor chave e valor chave e valor que me permite ler esses dados de forma super intuitiva vou te mostrar isso melhor até o final do vídeo Então vamos lá quero devolver esse dado em forma de um Jason estruturado que é o padrão aqui tá tudo certo que que eu quero devolver galera eu quero devolver uma chave chamada Barcos e aqui vão ser barcos que já é uma tabela que eu tenho cadastrada no banco de dados né quais barcos eu quero retornar porque eu não vou colocar nenhum critério vou falar assim ó Faça uma busca por todos os barcos e retorne todos aí eu marco aqui como lista por exemplo retorne uma lista completa de barcos é isso que eu quero fazer galera então quando eu vier aqui acessar e sendpoint buscar barcos eu vou retornar todos os meus Marcos do banco de dados beleza criado então que que a gente fez a Summer data vamos entregar uma lista completa de barcos aqui que foi no nosso exemplo específico agora galera eu vou puxar lá no flutterflow essa lista ou seja integrar com essa api Como que eu faço isso galera aí Aqui você pode estar no plano gratuito do flutterflow Sem problema tá então eu venho aqui ei calls adicionar criar uma epi qual que é uma chamada apitaico é criar uma nova chamada api aí aquele me pergunta qual o nome dessa chamada api listar barcos da água tipo de chamada galera esse aqui é um padrão de apis que existem vários métodos de chamada que você pode executar de acordo com a interação com os dados que você quiser ter por exemplo get em inglês é obter buscar post é postar é empurrar geralmente a gente usa post quando a gente quer empurrar um dado para algum lugar por exemplo Ah eu quero criar uma postagem no Instagram via api eu vou usar o método post delete quando eu quero deletar a PUC pet para quando você quer modificar então aqui eu vou usar get que é buscar dados porque na verdade só o que a gente vai fazer né Inclusive eu vou lá na água e aqui no evento Flow no meu Wind Point eu vou até alterar o método aqui de post porque fica mais padronizadinho eu vou buscar um gato vou até atualizar Nossa documentação para isso New y selecionamos o método get para ficar bem claro né então aqui Create no ipcoln floterflow Dê um nome pra chamada método get E aí como é que eu sei agora qual a URL da api O Bubble poderia ser mais intuitivo nisso galera mas como é que você sabe você vem aqui em configurações apis aí pega essa URL aqui ó logo essa do começo tá vendo aqua. com. br/versãotest/pay/1.

1/wf vou lá e colo no flutterflow Barra aqui e coloco o nome da chamada que eu criei ó que é o quê buscar Marcos buscar barcos Beleza então eu vou fazer uma chamada do tipo get ou seja para buscar dados nessa URL aqui ó clico aqui no response e teste e faço um teste para ver o que que volta galera vamos ver opa olha o que que voltou ó vou até pegar aí copiar e colar isso aqui no nosso bloco de notas para ficar mais claro ó olha o que que voltou galera um Jason né aquela formatação Jason com várias informações então voltou ó status sucesso Ou seja a chamada peidou certo descrição Opa aqui já é o primeiro barco a descrição Aproveite Balneário fazendo wakeboard na aula da praia Essa aqui é a descrição de algum bar que alguém seria essa aqui é a foto do barco ó então se eu copiar e colar e abrir a URL é a foto do barco aqui onde está o barco né com a Marina Latitude Longitude é o local geográfico o modelo do barco número de passageiros o preço do dia inteiro parece meio-dia aqui eu tô entregando todos os dados que constam no meu banco de dados todos os barcos estão aqui ó e aí já fica galera a primeira dica que é a seguinte se você quiser pegar essa esse formato Jason e expor de uma forma que seja mais legível Eu gosto muito de fazer da seguinte forma acesse Jason traço preview. verceu ponto app Não fui eu que criei isso aqui não faço ideia de quem criou mas é muito bacana porque você cola aqui uma formatação Jason Opa peguei o errado volta lá no flutterflow copiei colei E aí clique em preview board e olha só que interessante galera ele vai te dar numa formatação de diagrama exatamente qual é o dado Que você obteve ó então aqui eu consigo pegar exatamente barco só já vejo a lista completa de barcos que ele devolveu aí aqui eu consigo pegar todos os dados ó lancha não sei o que fabricante ó como fica mais intuitivo a forma de eu enxergar esses dados tá vendo ó a proprietário criado por tipo de barco Preto está tudo aqui então essa aqui é uma forma bem intuitiva de você ter uma compreensão melhor de arquivos nessa formatação Jason e aí só voltando ali então pra gente terminar nossa documentação a gente fez uma chamada de método get né E aí inserimos na URL inserimos a URL que o Bubble informa com o endpoint no final né E aí clicamos em testar chamada que é teste Call E aí voltou isso aqui né já voltaram todos esses dados aqui no flutterflow eu vou em recomendado eu digo Quais são os dados que eu espero utilizar Ah eu quero pegar a lista de barcos eu quero pegar o que que eu vou usar aqui galera só vou selecionar realmente a lista de barcos o modelo do barco e a descrição do barco e a foto do barco também e as fotos do barco pronto aí eu venho aqui em selected e dou um nome para esses dados que eu quero usar barcos aqui é modelo Aqui é descrição e aqui é fotos tá adicionei chamada criei a chamada api show de bola então selecionamos os dados que a gente quer utilizar no aplicativo e demos um nome para eles e aí clicamos em salvar chamado agora galera eu já posso vir aqui Já criei um layoutzinho padrão aqui tá onde eu vou puxar esses dados e mostrar na tela olha só Aí agora eu vou mostrar os dados recebidos via api na interface do usuário como é que eu faço isso vou aqui no meu e o air builder que é a parte de design do flutterflow Já criei um cardzinho Branquinho com uma imagem e dois textinhos aqui onde vai o nome do bar que a descrição tá galera aí aqui assim eu não vou entrar muito a fundo porque numa aula de flutterflow é uma aula de aprendiz tá então vou passar um pouco rápido por essa parte tá mas aqui nessa coluna eu vou adicionar um backing Carrie que é o que é uma busca externa que eu vou fazer vou buscar o que uma chamada api qual chamada api a única chamada ap que eu tenho que alistar barcos da água confirmei aí aqui em gerar filhos dinâmicos que que eu quero pegar esse Card aqui e multiplicar ele pelo número de barcos que voltaram da minha chamada Então vou dar um nome aqui para variável barcos qual vai ser o valor vou pegar a resposta da chamada api e vou trazer aqui ó os barcos que eu trouxe lá no a lista de barcos que veio né confirmei e confirmei E dei OK aí você vê que ele já multiplicou aqui né então o que que eu fiz na co criei uma backing Square para trazer a chamada Api para trazer os dados né da chamada Children trouxe a lista de Marcos aí agora que que eu vou fazer pessoal na imagem vou trazer a foto do barco então o que que eu faço aqui pego em imagem Qual imagem que eu quero mostrar clico aqui que é para você puxar uma imagem dinâmica né vou pegar o item barcos aqui e aí vou mudar para Jason PF que é um caminho Jason aí aqui pessoal lembre-se flutterflow não é no cover é louco codem essas coisinhas são um pouquinho menos intuitivas no flater Flor do Ken Bubble mas também é bem fácil basta você pegar Como que tá a formatação daquele corpo Jason então por exemplo eu quero pegar ali ó da lista de fotos que voltaram quero pegar a primeira foto ai como é que eu faço ponto fotos e aí aqui pessoal como vai voltar uma lista eu preciso botar entre colchetes são números Sempre que eu peço zero eu tô pedindo o primeiro item da lista tá então me traga a primeira foto que voltaram dessa lista em nome do barco eu vou trazer barcos item Jason paf ponto modelo porque modelo Renato porque dentro da formatação eu sei que aqui ó dentro do barco tem um campo chamado modelo e o outro campo é o descrição então aqui eu trago o ponto Modelo E aí aqui eu trago o Marcos item Jason confirmo e vou agora testar aqui e aí galera para cada barco que voltou da minha api aqui ele tá mostrando a imagem o texto e a descrição Então é assim que eu consigo trocar dados CVA Esse aplicativo não tem nada a ver com a Apple criei aqui no flutterfly não tem nenhuma conexão se conectou com a ap e da água para acessar o banco de dados da água então é assim que funcionam as apis Então olha só vamos dar aqui ó mais exemplos de api e aqui pessoal é o principal ponto dessa aula porque assim eu gostaria muito que você desenhasse na tua cabeça já a ideia de que sempre que você precisar acessar alguma informação de algum lugar a primeira palavrinha de três letra que tem que passar pela tua cabeça é api Então olha só por exemplo galera a Renata eu quero criar um aplicativo que tem que buscar passagens aéreas que que você vai fazer Google App e passagens aéreas galera a primeira coisa que você tem que fazer isso aqui e vai encontrar um monte apis de busca de passagens aéreas como funcionam api já vai ter um monte pronta aqui flight. com api pronta sempre no mesmo esquema aqui que é mais a Renata eu preciso fazer cotação de frete ou de Correios já mostrei por exemplo como fazer cotação com melhor envio aliás eu já mostrei aqui no YouTube como fazer a própria chamada de apin direta pro Correio aí você manda lá as dimensões do pacote o valor tudo ele te devolve o valor do frete o prazo de entrega estimado então a Renata precisa buscar valores de ações ou criptomoedas eu preciso buscar Renato uma chamada api no Uber para ver por exemplo Sei lá tô fazendo um aplicativo aqui para ver quanto que esse motorista tá recebendo por dia para ajudar ele nas contas para ver se compensa mais ele tem Uber ou 99 percebe as coisas assim e sempre que você quiser uma coisa essa galera tem muito segredo Uber a Uber developers ou seja desenvolvedores Rubber ele vai te falar aqui ó a gente tem várias questões aqui no secretaria Procure sempre a documentação documentação ap é um negócio que tem que estar na ponta da tua língua como desenvolvedor tá opa ele tem várias apis aqui ó Uber para empresas motoristas uberp entregas eu quero a documentação do Uber motoristas por exemplo que que ele tem aqui ó ele entrega dados do perfil do motorista dos pagamentos realizados para o motorista e das viagens do motorista interessante gostei dessa das viagens vamos ver o que que ele retorna então aqui eu tenho por exemplo já as informações da documentação ap do Uber então ele fala essa é URL para onde eu preciso conectar para conseguir trazer as informações do motorista parceiro dos viagens que ele fez né aqui é o exemplo de requisição ó tá aqui ó a chamada api que você precisa fazer esse aqui é um cabeçalho que você precisa inserir para você conseguir se autenticar perante o Uber então autenticação é algo que vai ter na grande maioria dos apps porque você precisa identificar muitas vezes porque api é paga aqui no caso você tem que entrar com solicitação para conseguir uma autorização do Uber para usar api deles e aí aqui pessoal o bacana que você já tem um modelo da resposta pronta Então olha só Uber eu preciso que você me devolva todas as informações de viagens realizadas pelo motorista tal essa é a resposta vou copiar essa resposta galera só para conhecer mais e vou colar aqui no nosso Jason preview aqui ele me dá ele me dá um número de viagens que o motorista já fez 1.

200 viagens a ele me dá ó quais foram essas viagens ou seja onde começou a viagem no município de charliston Estados Unidos né ele tá me dando aqui exemplo e aquele me dá ó todas as mudanças de status da viagem então o que que eu sei Ó que a viagem foi aceita nessa data o motorista chegou nessa data a viagem começou aqui e a viagem foi completa aqui ó aí Renato mas que que essa data lembra que eu tava te falando de Jason Jason tem várias questões específicas né muitas vezes é um padrão mais bem aceito você mandar e receber a data de algum evento nessa formatação aqui em segundos acredite ou não mas aqui é a formatação do número de segundos que se passaram desde o primeiro de janeiro de 1970 eu faço ideia de quem criou esse padrão Mas se você quiser saber o quanto é isso procure assim no Google epoc e Onix time converter aí ele vai te dar o seguinte insira o número lá ele vai te dizer qual é essa data exatamente Então vou pegar aqui ó a data que a viagem foi completada e coloque aí eu peço para ele converter Isso numa data humana Ah isso significa 15 de agosto de 2017 aos 21 horas 46 minutos e 18 segundos entendeu é uma forma mais segura de você transmitir informações de data para você eliminar aquele tipo de variáveis tipo ah é dia mês ano é mês dia ano é ano com dois dígitos ou com quatro então tem várias especificações assim que você vai conhecendo no meio da tua jornada né E aí assim pessoal eu tenho todos os dados lá então eu sei que o motorista recebeu $6,20 pra percorrer 0.