Firebase MCP w Firebase Studio

1. Przegląd

W tym laboratorium kodowania przećwiczysz korzystanie z agenta do prototypowania aplikacji wraz z serwerem Firebase MCP w Firebase Studio, aby utworzyć pełną aplikację internetową korzystającą z Firestore.

Animowany GIF z gotową aplikacją

Czego się nauczysz

  • Generowanie statycznej aplikacji internetowej za pomocą agenta do prototypowania aplikacji
  • Łączenie z projektem Firebase
  • Konfigurowanie serwera MCP Firebase
  • Dodawanie Firestore za pomocą platformy Firebase MCP

Czego potrzebujesz

  • wybraną przeglądarkę, np. Google Chrome;
  • konto Google do tworzenia projektu Firebase i zarządzania nim;

2. Generowanie aplikacji za pomocą agenta App Prototyping

Agent do prototypowania aplikacji używa Gemini w Firebase do tworzenia aplikacji. Nawet w przypadku użycia identycznych promptów wyniki mogą się różnić.

  1. Zaloguj się na konto Google, dołącz do Programu dla deweloperów Google i otwórz Firebase Studio.
  2. W polu Stwórz prototyp aplikacji z AI wpisz opis aplikacji:
    An app for a picker wheel that allows custom input.
  3. Kliknij Ulepsz prompt. Sprawdź ulepszony prompt.
  4. Kliknij Prototypowanie za pomocą AI.
  5. Sprawdź sugerowany plan aplikacji. Aby go edytować, kliknij dostosowywanie ikony do edycji codiconDostosuj.
  6. Kliknij Zapisz.
  7. Gdy plan uwzględni Twoje zmiany, kliknij Utwórz prototyp tej aplikacji.Plan aplikacji
  8. Jeśli Twój projekt zawiera elementy AI, agent poprosi Cię o klucz Gemini. Dodaj swój klucz interfejsu Gemini API lub kliknij Wygeneruj automatycznie, aby wygenerować klucz interfejsu Gemini API. Jeśli klikniesz Wygeneruj automatycznie, Firebase Studio utworzy projekt Firebase i wygeneruje dla Ciebie klucz interfejsu Gemini API.
  9. Agent do prototypowania aplikacji używa planu, aby utworzyć pierwszą wersję aplikacji. Gdy to zrobi, obok interfejsu Gemini Chat pojawi się podgląd aplikacji. Poświęć chwilę na sprawdzenie i przetestowanie aplikacji. Jeśli napotkasz błędy, kliknij Napraw błąd w czacie, aby umożliwić agentowi naprawienie własnych błędów.

3. (Opcjonalnie) Pobierz kod

Jeśli napotkasz trudności, skorzystaj z przykładowych plików, aby dokładniej śledzić przykład aplikacji.

  1. Pobierz pliki z folderu.
  2. W Firebase Studio kliknij ikona widoku kodu, Przełącz na kod, aby otworzyć widok kodu.
  3. Przeciągnij pobrane pliki do panelu Eksplorator w Firebase Studio. Zezwól na zastąpienie istniejących plików.
  4. W terminalu (Shift+Ctrl+C) uruchom to polecenie, aby zainstalować pakiety.
    npm install
  5. Otwórz panel Kontrola źródła w Firebase Studio, wpisz wiadomość opisującą zmianę kodu, np. „zaimportowano kod z GitHuba”, a następnie kliknij Zatwierdź.
  6. Kliknij Switch to Prototyper (Przejdź do Prototypera), aby kontynuować codelab, korzystając z przykładowej wersji aplikacji.

4. Łączenie z projektem Firebase

Gratulacje! Aplikacja działa lokalnie. Aby zapewnić jej backend, połącz ją z projektem Firebase.

  1. Poproś agenta App Prototyping o połączenie z projektem Firebase.
    Connect to a Firebase project.
    Oczekuj, że agent utworzy nowy projekt lub połączy się z istniejącym (jeśli wcześniej użyto opcji automatycznego generowania klucza interfejsu Gemini API, projekt powinien pojawić się obok nazwy obszaru roboczego w lewym górnym rogu ekranu), a następnie wygeneruje niezbędną konfigurację Firebase i zintegruje ją z aplikacją za pomocą src/lib/firebase.ts (jak pokazano).
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    Jeśli powyższy prompt nie wykona zadania za jednym razem, możesz ponownie poprosić agenta o pomoc. W razie potrzeby podziel zadanie na mniejsze części.
    Create a new Firebase project.

5. Konfigurowanie Firebase MCP w Firebase Studio

Serwer Firebase MCP rozszerza możliwości agenta do prototypowania aplikacji, udostępniając narzędzia, których agent może używać do konfigurowania usług Firebase, zarządzania nimi i pobierania z nich danych. Dotyczy to m.in. Uwierzytelniania Firebase, Cloud Firestore i Firebase Data Connect. Oto jak to zrobić.

  1. Kliknij ikona widoku kodu StudioPrzełącz na kod, aby otworzyć widok kodu.
  2. W terminalu (Shift+Ctrl+C) uruchom to polecenie, aby zalogować się na konto Firebase. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie i pozostaw wszystkie opcje domyślne:
    firebase login --no-localhost
  3. W Eksploratorze (Ctrl+Shift+E) kliknij prawym przyciskiem myszy folder .idx i wybierz Nowy plik. Nazwij plik mcp.json i naciśnij Enter.
  4. Dodaj konfiguracje serwera do pliku .idx/mcp.json.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    Sprawdź, czy masz połączenie z serwerem MCP Firebase. W panelu Wyjście powinny pojawić się podobne wpisy w dzienniku z wybranym kanałem „Gemini”.Logi MCPManager z Gemini

6. Dodawanie Firestore za pomocą platformy Firebase MCP

Cel 1. Dodaj Firestore

  1. Przełącz na Prototyper. W interfejsie czatu poproś agenta o użycie Firestore w Twojej aplikacji.
    Use Firestore for user entries. Give anyone read and write access.
    Pracownik obsługi klienta powinien:
    • zainicjować Firestore, wywołując narzędzie Firebase MCPfirebase_init, które tworzy reguły Firestore (jak pokazano) i pliki indeksów oraz wprowadza inne zmiany w konfiguracji;
    • zaktualizować kod aplikacji, aby korzystać z Firestore zamiast z pamięci lokalnej.
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    W tym miejscu przyznajesz wszystkim uprawnienia do odczytu i zapisu w bazie danych. Poza tym laboratorium zawsze powinieneś zabezpieczać swoje bazy danych. Więcej informacji na ten temat znajdziesz w naszej dokumentacji.
  2. Przełącz na kod W terminalu (Shift+Ctrl+C) zainicjuj Firestore, jeśli w bieżącym projekcie Firebase nie masz jeszcze włączonego interfejsu Firestore API.
    firebase init firestore
     Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie i pozostaw domyślne opcje. Nie zastępuj reguł zabezpieczeń z poprzedniego kroku.Następnie wdróż reguły zabezpieczeń dla instancji bazy danych.
    firebase deploy --only firestore
    Spowoduje to udostępnienie instancji bazy danych Firestore.

Cel 2. Wypróbuj

  1. Ponownie załaduj aplikację, utwórz i usuń wpisy na kole do losowania, a następnie sprawdź te aktualizacje na stronie Firestore w konsoli Firebase.

Aplikacja w Studio i Konsoli

  1. Możesz też porozmawiać z Firestore, aby wysłać zapytanie do bazy danych.
    List my Firestore collections.
    Oczekuj, że Gemini wywoła narzędzie Firebase MCP firestore_list_collections.

Czat z Firestore

7. Podsumowanie

Gratulacje! Udało Ci się utworzyć pełną aplikację internetową za pomocą agenta do prototypowania aplikacji z Firebase MCP. Możesz wypróbować inne narzędzia oferowane przez serwer MCP Firebase i rozszerzyć możliwości swojej aplikacji.

Więcej informacji