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

Z tego krótkiego przewodnika dowiesz się, jak używać Firebase SQL Connect z narzędziem do kodowania AI, aby szybko tworzyć pełne aplikacje relacyjne. Wyposażając agenta w umiejętności agenta Firebase, nie musisz pisać standardowego 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 interfejsu React. Zdobyte tu informacje możesz wykorzystać do tworzenia interfejsów dla dowolnej platformy obsługiwanej przez Firebase SQL Connect.

Zanim zaczniesz

Aby ukończyć to krótkie wprowadzenie, upewnij się, że Twoje środowisko jest skonfigurowane w następujący sposób: Jeśli potrzebujesz szczegółowych instrukcji dotyczących konkretnego systemu operacyjnego, zapoznaj się z standardowym przewodnikiem konfiguracji:

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

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

    npm install -g firebase-tools

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

Konfigurowanie obszaru roboczego

Najpierw otwórz wybrane narzędzie do kodowania oparte na AI i utwórz nowy katalog projektu. Otwórz zintegrowany terminal narzędzia i uruchom polecenie inicjowania:

firebase init dataconnect

To polecenie przeprowadzi Cię przez proces inicjowania projektu. Gdy pojawi się odpowiedni komunikat, wybierz opcje, aby:

  • Tworzenie nowego projektu w Firebase
  • Pomiń generowanie schematu przez Gemini
  • Tworzenie nowej instancji Cloud SQL
  • Tworzenie szablonu React
  • Aby zainstalować umiejętności agenta Firebase, wybierz Tak.

Generowanie aplikacji za pomocą AI

Po zainstalowaniu umiejętności agenta Firebase asystent AI może generować schemat SQL Connect, operacje i kod interfejsu bezpośrednio na podstawie ogólnego promptu.

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

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. Witryna sklepu internetowego

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 uruchomisz te prompty, asystent AI automatycznie wykona za Ciebie żmudne 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 interfejsu wiersza poleceń Firebase do natychmiastowego generowania ściśle typizowanego pakietu SDK klienta na podstawie schematu i operacji.
  • React Frontend (src/): tworzy kompletną, atrakcyjną wizualnie aplikację React, która korzysta z wygenerowanego pakietu SDK do komunikacji z nowym backendem.

Wdrażanie w środowisku produkcyjnym

Aby wdrożyć schemat, zapytania i mutacje w wersji 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

Po ukończeniu tego samouczka możesz wykonać te czynności:

  • Zapoznaj się z repozytorium aplikacji na początek i utwórz aplikację SQL Connect, korzystając z naszych ćwiczeń z programowania.
  • Dodaj dane do bazy danych i monitoruj usługę SQL Connect w konsoli Firebase.
  • Dowiedz się więcej o schemacie, zapytaniach i mutacjach.
  • Dowiedz się więcej o pakietach SDK klienta i pakietach Admin SDK.