Integrações
Apps no BeaDev podem se conectar a serviços externos via integrações. Você configura uma vez no painel de Integrações do app, depois usa via props.integrations.<nome>.
Disponíveis hoje
| Categoria | Integração |
|---|---|
| Comunicação | Slack, Discord, Resend, WhatsApp (Z-API) |
| Pagamentos | Stripe |
| IA | OpenAI |
| Analytics | Google Analytics |
| ERP brasileiro | Bling, Omie |
| Banco externo | PostgreSQL, MySQL |
| Storage | Google Sheets |
Como configurar
- Editor do app → ícone 🔌 Integrações
- Clica na integração desejada
- Preenche campos (API key, webhook URL, etc.)
- Salva — fica disponível imediatamente em
props.integrations
Como usar no código
function MeuApp({ integrations }) {
async function notificar() {
await integrations.slack.send("Pedido aprovado!");
}
// ...
}
⚠️ Secrets ficam server-side. Você passa await integrations.X.method(...) que vira POST pra API da plataforma. A API tem a key e chama o serviço externo. Nunca exposta no browser.
Por que não fazer fetch direto?
Tipo fetch("https://api.bling.com.br/...", { headers: { Authorization: "Bearer KEY" } }) no JSX seria:
- ❌ Key visível no browser (todo mundo que abrir DevTools rouba)
- ❌ CORS na maioria das APIs
- ❌ Você teria que codificar autenticação manualmente
Integrações resolvem isso. Use sempre.