Início

Como acionar uma API via ação do frontend | Formação em Vibe Coding | ibe.IA

Formação em Vibe Coding
Wappler
APIs e Pagamentos

Chamadas server-side

Como acionar uma API via ação do frontend

Aprenda a acionar uma API diretamente do frontend, utilizando um botão para interagir com o back-end e salvar dados no banco de dados de forma prática e eficiente.

Acesso Restrito

Faça login para acessar o conteúdo desta aula.

Fazer login Voltar para o curso

Anterior Próxima

Copyright ©2026 - Todos os direitos reservados
Feito com ☕ e alguns bilhões de tokens de IA

APIs e Pagamentos

Progresso do Módulo

0 de 56 aulas concluídas

O que veremos neste módulo e como melhor aproveitá-lo?5 min

Como funcionam APIs e Webhooks no Wappler4 min

Configurações iniciais necessárias5 min

Lidando com chamadas server-side12 min

Como enviar dados dinâmicos para a API6 min

Como capturar dados de uma API externa (fetch schema)4 min

Como salvar informações em lote de uma API no banco de dados (utilizando repeat)8 min

Como acionar uma API via ação do frontend3 min

Como apresentar dados na página vindos de uma chamada server-side9 min

Como receber informações por webhooks5 min

Como customizar as rotas dos webhooks2 min

Como expor os dados da aplicação para serviços externos3 min

Como aplicar filtros na API de exposição dos dados4 min

Como criar um looping usando o While10 min

Como fazer uma chamada client-side com dados dinâmicos utilizando viaCEP (API Action)8 min

Como recuperar os dados de uma chamada client-side para preencher dados dinamicamente na página (page flow)8 min

Como acionar uma API após a validação de caracteres de um input7 min

Como listar dados de uma API na página (API Data Source)7 min

Integração API com Gateway de pagamento - ASAAS1 min

Criando conta de Desenvolvedor no ASAAS2 min

Conhecendo documentação API Asaas6 min

Chamada criar cliente7 min

Chamada criar cobrança9 min

Estruturando o Banco de Dados4 min

API Listar Produtos2 min

Criando Tela de Produtos10 min

Como criar cliente no ASAAS no login do usuário9 min

Como criar uma cobrança vinculada ao usuário (configuração backend)9 min

Como criar uma cobrança vinculada ao usuário (configuração frontend)10 min

Teste do fluxo completo de criar cobrança no ASAAS4 min

Criação da tela para gerar assinatura3 min

Como configurar chamada de criar assinatura e link da primeira cobrança13 min

Como criar função para chamar a ação de criar assinatura3 min

Como configurar page flow para usuário gerar assinatura6 min

Teste do fluxo completo de criar assinatura no ASAAS3 min

Como funciona o Ngrok para receber webhooks em localhost4 min

Como configurar o Ngrok7 min

Teste do túnel seguro criado pelo Ngrok6 min

Ajuste da chamada de criar cobrança para vincular com ID do banco de dados (external reference)5 min

Envio de webhook de teste para o webhook.site7 min

Como configurar o webhook para editar o status da cobrança5 min

Teste do webhook que atualiza o status da cobrança3 min

Como usar o token de autenticação para tornar o webhook mais seguro6 min

Ajustes para configurar webhooks de assinatura5 min

Envio de webhook de teste referente assinaturas para o webhook.site (id subscription)5 min

Como relacionar o usuário com a assinatura5 min

Como mudar status para ativo ao receber confirmação de pagamento do webhook de assinatura7 min

Como marcar uma assinatura como Inativa via Webhook10 min

Como agendar ações de Backend (Schedule)11 min

Criação de um dashboard para acompanhar assinaturas em tempo real5 min

Como usar o Socket para monitorar eventos em tempo real5 min

Como configurar o Socket no Frontend3 min

Teste da atualização em tempo real5 min

Como criar variáveis de ambiente8 min

Como acessar variáveis de ambiente4 min

Avaliação do Módulo