Pierwsze kroki z Firebase SQL Connect przy użyciu agentów AI

Z tego samouczka dowiesz się, jak używać Firebase SQL Connect z narzędziem do kodowania z wykorzystaniem AI , aby szybko tworzyć pełne aplikacje relacyjne. Dzięki wyposażeniu agenta w umiejętności Firebase Agent Skills nie musisz pisać powtarzalnego kodu bazy danych ani ręcznie konfigurować punktów końcowych. Dowiesz się, jak skonfigurować projekt lokalny, skonfigurować asystenta AI i użyć jednego prompta do wygenerowania bezpiecznego schematu PostgreSQL, operacji GraphQL i kompletnego frontendu React. Dzięki temu, czego się tu nauczysz, możesz tworzyć frontendy dla dowolnej platformy obsługiwanej przez Firebase SQL Connect.

Zanim zaczniesz

Aby ukończyć ten samouczek, upewnij się, że Twoje środowisko jest skonfigurowane w ten sposób: Jeśli potrzebujesz szczegółowej pomocy dotyczącej konkretnego systemu operacyjnego, zapoznaj się z standardowym przewodnikiem po konfiguracji:

  • Node.js: zainstaluj Node.js, aby uruchamiać wiersz poleceń Firebase i obsługiwać wygenerowany frontend React.

  • Wiersz poleceń Firebase: zainstaluj wiersz poleceń Firebase globalnie:

    npm install -g firebase-tools

  • Narzędzie do kodowania z wykorzystaniem AI: zainstaluj nowoczesny edytor oparty na AI (np. Antigravity, Android Studio, Cursor lub Windsurf).

Konfigurowanie obszaru roboczego

Najpierw otwórz preferowane narzędzie do kodowania z wykorzystaniem AI i utwórz nowy katalog projektu. Otwórz zintegrowany terminal narzędzia i uruchom polecenie inicjujące:

firebase init dataconnect

To polecenie przeprowadzi Cię przez proces inicjowania projektu. Gdy pojawi się pytanie, wybierz te opcje:

  • Utwórz nowy projekt w Firebase
  • Pomiń generowanie schematu Gemini
  • Utwórz nową instancję Cloud SQL
  • Utwórz szablon React
  • Aby zainstalować umiejętności agenta w Firebase, kliknij Tak

Generowanie aplikacji za pomocą AI

Po zainstalowaniu umiejętności Firebase Agent Skills asystent AI może generować schemat, operacje i kod frontendu SQL Connect bezpośrednio na podstawie prompta wysokiego poziomu.

Aby wygenerować backend, relacje w bazie danych i frontend React, skopiuj i wklej do asystenta AI jeden z tych promptów:

Przykład 1: aplikacja do recenzowania filmów

Prompt:

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.

Przykład 2: sklep internetowy

Prompt:

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.

Przykład 3: blog z wieloma autorami

Prompt:

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.

Co tworzy asystent AI

Gdy uruchamiasz te prompty, asystent AI automatycznie wykonuje trudne zadania techniczne:

  • Schemat bazy danych (dataconnect/schema/schema.gql): tłumaczy Twoje wymagania na tabele relacyjne za pomocą dyrektywy @table, automatycznie zarządzając kluczami obcymi i podstawowymi.
  • Operacje GraphQL (dataconnect/[connector_name]/*.gql): generuje dokładne zapytania i mutacje wymagane przez aplikację, zabezpieczone dyrektywą @auth.
  • Wygenerowany pakiet SDK (src/dataconnect/): używa wiersza poleceń Firebase do natychmiastowego wygenerowania ściśle typowanego pakietu SDK klienta na podstawie schematu i operacji.
  • Frontend React (src/): łączy kompletną, estetycznie zaprojektowaną aplikację React, która używa wygenerowanego pakietu SDK do komunikacji z nowym backendem.

Wdrażanie w gałęzi produkcyjnej

Aby wdrożyć schemat, zapytania i mutacje w gałęzi produkcyjnej, uruchom w terminalu to polecenie:

firebase deploy --only dataconnect

Po wdrożeniu otwórz konsolę Firebase, aby wyświetlić schemat na żywo i uruchamiać operacje bezpośrednio w instancji Cloud SQL.

Dalsze kroki

Teraz, gdy masz już za sobą ten samouczek, możesz wykonać te czynności: