InícioSuporte
InícioSuporteLinks
Entrar
  1. Formação em Vibe Coding
  3. Wappler
  5. APIs e Pagamentos
Chamadas client-side

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

Acesso Restrito

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

Fazer loginVoltar para o curso
AnteriorPró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?
Como funcionam APIs e Webhooks no Wappler
Configurações iniciais necessárias
Lidando com chamadas server-side
Como enviar dados dinâmicos para a API
Como capturar dados de uma API externa (fetch schema)
Como salvar informações em lote de uma API no banco de dados (utilizando repeat)
Como acionar uma API via ação do frontend
Como apresentar dados na página vindos de uma chamada server-side
Como receber informações por webhooks
Como customizar as rotas dos webhooks
Como expor os dados da aplicação para serviços externos
Como aplicar filtros na API de exposição dos dados
Como criar um looping usando o While
Como fazer uma chamada client-side com dados dinâmicos utilizando viaCEP (API Action)
Como recuperar os dados de uma chamada client-side para preencher dados dinamicamente na página (page flow)
Como acionar uma API após a validação de caracteres de um input
Como listar dados de uma API na página (API Data Source)
Integração API com Gateway de pagamento - ASAAS
Criando conta de Desenvolvedor no ASAAS
Conhecendo documentação API Asaas
Chamada criar cliente
Chamada criar cobrança
Estruturando o Banco de Dados
API Listar Produtos
Criando Tela de Produtos
Como criar cliente no ASAAS no login do usuário
Como criar uma cobrança vinculada ao usuário (configuração backend)
Como criar uma cobrança vinculada ao usuário (configuração frontend)
Teste do fluxo completo de criar cobrança no ASAAS
Criação da tela para gerar assinatura
Como configurar chamada de criar assinatura e link da primeira cobrança
Como criar função para chamar a ação de criar assinatura
Como configurar page flow para usuário gerar assinatura
Teste do fluxo completo de criar assinatura no ASAAS
Como funciona o Ngrok para receber webhooks em localhost
Como configurar o Ngrok
Teste do túnel seguro criado pelo Ngrok
Ajuste da chamada de criar cobrança para vincular com ID do banco de dados (external reference)
Envio de webhook de teste para o webhook.site
Como configurar o webhook para editar o status da cobrança
Teste do webhook que atualiza o status da cobrança
Como usar o token de autenticação para tornar o webhook mais seguro
Ajustes para configurar webhooks de assinatura
Envio de webhook de teste referente assinaturas para o webhook.site (id subscription)
Como relacionar o usuário com a assinatura
Como mudar status para ativo ao receber confirmação de pagamento do webhook de assinatura
Como marcar uma assinatura como Inativa via Webhook
Como agendar ações de Backend (Schedule)
Criação de um dashboard para acompanhar assinaturas em tempo real
Como usar o Socket para monitorar eventos em tempo real
Como configurar o Socket no Frontend
Teste da atualização em tempo real
Como criar variáveis de ambiente
Como acessar variáveis de ambiente
Avaliação do Módulo