Neste início rápido, mostramos como usar Firebase SQL Connect com sua ferramenta de programação de IA para criar rapidamente aplicativos relacionais de stack completa. Ao equipar seu agente com as habilidades do agente do Firebase, você não precisará escrever código de banco de dados repetitivo nem configurar endpoints manualmente. Você vai aprender a configurar seu projeto local, configurar seu 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 aprendeu aqui para criar front-ends para qualquer uma das plataformas compatíveis com Firebase SQL Connect.
Antes de começar
Para concluir este início rápido, verifique se o ambiente está configurado com o seguinte. Se você precisar de ajuda passo a passo 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 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 a ferramenta de programação de IA preferida e crie um novo diretório de projeto. Abra o terminal integrado da 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
- Criar uma nova instância do Cloud SQL
- Criar um modelo React
- Selecione Sim para instalar as habilidades do agente 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 assistente de IA para gerar o back-end, os relacionamentos de banco de dados e o front-end React:
Exemplo 1: app de análise 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 de 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 assistente de IA cria
Ao executar esses comandos, o assistente de IA processa automaticamente o trabalho técnico pesado:
- Esquema de banco de dados (
dataconnect/schema/schema.gql): traduz seus requisitos em tabelas relacionais usando a diretiva@table, gerenciando automaticamente chaves estrangeiras e chaves primárias. - Operações GraphQL (
dataconnect/[connector_name]/*.gql): gera as consultas e mutações exatas exigidas pelo seu app, protegidas pela diretiva@auth. - SDK gerado (
src/dataconnect/): usa a CLI do Firebase para gerar instantaneamente um SDK do cliente com tipo estrito com base no esquema e nas operações. - Front-end React (
src/): conecta um aplicativo React completo e com 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
Após a implantação, acesse o Console do Firebase para conferir o esquema ativo e executar operações diretamente na instância do Cloud SQL.
Próximas etapas
Agora que você concluiu o início rápido, confira algumas próximas etapas:
- Conheça um repositório de apps de início rápido e crie um app 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 do cliente e SDKs Admin.