Conectando o App React + Capacitor ao Banco BaaS na Nuvem
Seu aplicativo mobile offline é uma ilha. Hoje vamos construir a ponte de dados: configurando credenciais seguras no cofre .env.local, instanciando o SDK e realizando a primeira busca remota (SELECT) em tempo real!
Analogias da Integração Mobile & Nuvem
Clique nos cards para explorar o conceito antes de codificar
O App Offline é uma Ilha Isolada
Sem conexão remota, os dados ficam presos no dispositivo do usuário. Se o app fechar ou reinstalar, tudo se perde. Precisamos da nuvem como fonte única da verdade!
O Cofre Digital (.env.local)
Chaves de API escritas diretamente no código vazam no GitHub! O arquivo .env.local age como um cofre cego que o Vite injeta em memória.
O Maestro do BaaS (Supabase)
No BaaS (Backend as a Service), você não perde tempo configurando servidores Linux ou roteadores. Você rege serviços prontos: Autenticação, Banco Postgres e Storage!
O SDK Tradutor Oficial
O pacote @supabase/supabase-js traduz chamadas orientadas a objeto no React em requisições REST otimizadas para o banco Postgres.
A Antena de Transmissão em Tempo Real (Supabase Realtime)
Sem necessidade de F5 ou rotinas manuais de "Refresh". O servidor de banco inscreve os aparelhos móveis em canais WebSocket e "empurra" modificações instantaneamente para todos os telefones conectados!
Roteiro da Atividade Prática
Execute as 4 etapas sequenciais no seu projeto VS Code (React + Capacitor da Aula 07).
Criar o Cofre Digital de Variáveis (.env.local)
Acesse o painel web do Supabase em seu projeto, navegue em Project Settings > API e copie a Project URL e a chave pública anon key. No VS Code, crie o arquivo .env.local na raiz do projeto.
VITE_SUPABASE_URL=https://seu-projeto-id.supabase.co VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Variáveis de ambiente no Vite precisam obrigatoriamente iniciar com o prefixo VITE_. Caso contrário, o bundler bloqueia o acesso por segurança.
Instalar o SDK e Inicializar o Conector
Abra o terminal integrado do VS Code e instale a biblioteca oficial do Supabase. Em seguida, crie a pasta src/services/ e o arquivo supabaseClient.js.
npm install @supabase/supabase-js
import { createClient } from '@supabase/supabase-js';
// Resgatando as variáveis injetadas em tempo de execução pelo Vite
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
// Instanciando e exportando o cliente de dados
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Construir o Fluxo Assíncrono de Consulta no React
Atualize seu componente principal App.jsx. Utilizaremos os hooks useState e useEffect com uma função assíncrona (async/await) para realizar o SELECT na tabela 'produtos'.
import { useEffect, useState } from 'react';
import { supabase } from './services/supabaseClient';
export default function App() {
const [produtos, setProdutos] = useState([]);
const [carregando, setCarregando] = useState(true);
const [erro, setErro] = useState(null);
useEffect(() => {
async function buscarProdutos() {
try {
setCarregando(true);
// Requisição SELECT * na nuvem
const { data, error } = await supabase.from('produtos').select('*');
if (error) throw error;
setProdutos(data || []);
} catch (err) {
console.error("Erro na busca:", err.message);
setErro(err.message);
} finally {
setCarregando(false);
}
}
buscarProdutos();
}, []);
return (
<div class="min-h-screen bg-slate-50 p-6 text-slate-900">
<h1 class="text-2xl font-bold mb-4 flex items-center text-red-600">
⚡ Produtos na Nuvem (Supabase)
</h1>
{carregando && <p class="text-slate-500">Carregando dados da nuvem...</p>}
{erro && <p class="text-red-500 bg-red-50 p-3 rounded">Erro: {erro}</p>}
{!carregando && !erro && (
<ul class="space-y-2">
{produtos.map(p => (
<li key={p.id} class="bg-white p-4 rounded-lg shadow-sm border border-slate-200 flex justify-between">
<span class="font-semibold">{p.nome}</span>
<span class="text-red-600 font-bold">R$ {p.preco}</span>
</li>
))}
</ul>
)}
</div>
);
}
Testar a Aplicação no Navegador ou Dispositivo
Inicie o servidor local digitando npm run dev. Abra o DevTools (F12) no Chrome e inspecione a aba Console e Network para confirmar o recebimento do array JSON trazido diretamente da nuvem!
Laboratório de Teste de Conexão Supabase
Configuração do Teste
Checklist de Conclusão da Aula
Verificar Implementação
Cole o código do seu supabaseClient.js abaixo para validação instantânea.