Neste guia de início rápido, mostramos como usar o Firebase SQL Connect com sua ferramenta de programação de IA para criar rapidamente aplicativos relacionais de pilha completa. Ao equipar seu agente com as habilidades do Firebase Agent, você não precisa escrever código boilerplate de banco de dados nem configurar endpoints manualmente. Você vai aprender a configurar seu projeto local, configurar o assistente de IA e usar um único comando para gerar um esquema PostgreSQL seguro, operações GraphQL e um front-end React completo. Você pode usar o que aprender aqui para criar front-ends para qualquer uma das plataformas compatíveis com o Firebase SQL Connect.
Antes de começar
Para concluir este guia de início rápido, verifique se o ambiente está configurado com o seguinte: Se você precisar de ajuda detalhada para seu sistema operacional específico, consulte o guia de configuração padrão:
- Node.js: instale o Node.js para executar a CLI do Firebase e ativar o front-end do React gerado.
CLI do Firebase: instale a CLI do Firebase globalmente:
npm install -g firebase-toolsFerramenta de programação de IA: instale um editor moderno com tecnologia de IA, como Antigravity, Android Studio, Cursor ou Windsurf.
Configurar seu espaço de trabalho
Primeiro, abra sua ferramenta de programação de IA preferida e crie um novo diretório de projeto. Abra o terminal integrado da sua ferramenta e execute o comando de inicialização:
firebase init dataconnect
Esse comando orienta você na inicialização do projeto. Quando solicitado, escolha as opções para:
- Criar um novo projeto do Firebase
- Pular a geração de esquema do Gemini
- Crie uma nova instância do Cloud SQL
- Criar um modelo do React
- Selecione Sim para instalar o Agent Skills para Firebase.
Gerar seu app com IA
Com as habilidades do agente do Firebase instaladas, seu assistente de IA pode gerar o esquema, as operações e o código de front-end do SQL Connect diretamente de um comando de alto nível.
Copie e cole um dos comandos a seguir no seu assistente de IA para gerar o back-end, as relações de banco de dados e o front-end do React:
Exemplo 1: app de avaliação de filmes
Comando:
Build a movie review website using Firebase SQL Connect. Customers can browse
a catalog of movies presented in a modern card layout displaying average
ratings and review counts, and leave a review from 1 to 5 stars. A user must
only be allowed to leave a single review per movie. Build a styled React
(Vite) frontend that displays the catalog and dynamically renders a live feed
of new reviews. Compile the database backend and React frontend, seed the
database with sample data, and verify that the application builds cleanly and
all core user flows run successfully.
Exemplo 2: vitrine de e-commerce
Comando:
Build an online storefront using Firebase SQL Connect. Customers can browse
product cards showing prices and stock levels, manage a shopping cart, and
check out securely. The checkout transaction must atomically verify that
their cart is not empty, check that products are in stock, create the order,
and decrease the product stock, safely rolling back if any step fails.
Build a highly responsive React (Vite) storefront with a polished checkout
process. Compile the database backend and React frontend, seed the database
with sample data, and verify that the application builds cleanly and all
core user flows run successfully.
Exemplo 3: blog com vários autores
Comando:
Create a multi-author blog platform using Firebase SQL Connect. The homepage
should display published articles formatted in an elegant typographic layout
with comfortable reading line lengths and serif headings. Users should have
access to a secure split-pane writing dashboard built using React (Vite) to
compose posts with a live preview. Compile the database backend and React
frontend, seed the database with sample data, and verify that the
application builds cleanly and all core user flows run successfully.
O que o Google Assistente com IA cria
Quando você executa esses comandos, o assistente de IA lida automaticamente com o trabalho técnico pesado:
- Esquema do banco de dados (
dataconnect/schema/schema.gql): traduz seus requisitos em tabelas relacionais usando a diretiva@table, gerenciando automaticamente chaves estrangeiras e primárias. - Operações GraphQL (
dataconnect/[connector_name]/*.gql): gera as consultas e mutações exatas necessárias para seu app, protegidas pela diretiva@auth. - SDK gerado (
src/dataconnect/): usa a CLI do Firebase para gerar instantaneamente um SDK de cliente estritamente tipado com base no seu esquema e nas operações. - Front-end do React (
src/): conecta um aplicativo React completo e com um estilo bonito que usa o SDK gerado para se comunicar com o novo back-end.
Implantar para a produção
Para implantar seu esquema, consultas e mutações na produção, execute o seguinte comando no terminal:
firebase deploy --only dataconnect
Depois da implantação, acesse o console do Firebase para conferir seu esquema ativo e executar operações diretamente na instância do Cloud SQL.
Próximas etapas
Agora que você concluiu o guia de início rápido, confira algumas próximas etapas:
- Confira um repositório de apps de início rápido e crie um app do SQL Connect seguindo nossos codelabs.
- Adicione dados ao banco de dados e monitore o serviço SQL Connect no Console do Firebase.
- Saiba mais sobre o desenvolvimento de esquemas, consultas e mutações.
- Saiba mais sobre os SDKs de cliente e os SDKs Admin.