Ta strona została przetłumaczona przez Cloud Translation API.

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
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ć. Jeśli utkniesz, udostępniliśmy zestaw plików, które możesz dodać do obszaru roboczego, aby kontynuować ćwiczenie w kilku punktach kontrolnych.

Zaloguj się na konto Google, dołącz do Programu dla deweloperów Google i otwórz Firebase Studio.
W polu Stwórz prototyp aplikacji z AI wpisz opis aplikacji:
```
An app for a picker wheel that allows custom input.
```
Kliknij Ulepsz prompt. Sprawdź ulepszony prompt.
Kliknij Prototypowanie za pomocą AI.
Sprawdź sugerowany plan aplikacji. Aby go edytować, kliknij Dostosuj.
Kliknij Zapisz.
Gdy plan uwzględni Twoje zmiany, kliknij Utwórz prototyp tej aplikacji.
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.
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. 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ć.

W Firebase Studio kliknij Przełącz na kod, aby otworzyć widok kodu.
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
```
W Eksploratorze (Ctrl+Shift+E) kliknij prawym przyciskiem myszy folder .idx i wybierz Nowy plik. Nazwij plik mcp.json i naciśnij Enter.

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

4. Dodawanie Firestore za pomocą platformy Firebase MCP

Cel 1. Dodaj Firebase do aplikacji

Przełącz na Prototyper. W interfejsie czatu poproś agenta o utworzenie projektu Firebase.
```
Create a Firebase project.
```
Pomiń ten krok, jeśli masz już utworzony projekt Firebase podczas korzystania z opcji automatycznego generowania klucza interfejsu Gemini API. Identyfikator projektu powinien być widoczny obok nazwy obszaru roboczego w lewym górnym rogu ekranu. Możesz też poprosić agenta o wyświetlenie listy projektów i zanotować projekt, którego chcesz użyć.
```
List my Firebase projects.
```
Oczekuj, że agent wywoła narzędzie Firebase MCP firebase_list_projects.
Poproś agenta o użycie Twojego projektu Firebase na potrzeby lokalnego programowania.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Sprawdź, czy widzisz plik .firebaserc, który ustawia domyślny projekt Firebase. Ten plik informuje wiersz poleceń Firebase, którego projektu Firebase ma używać. Jeśli nie widzisz tego pliku, poproś o niego ponownie.
Poproś agenta o utworzenie aplikacji internetowej w projekcie Firebase.
```
Create a web app in my Firebase project.
```
Oczekuj, że agent wywoła narzędzie firebase_create_app. Jeśli agentowi się to nie uda, spróbuj ponownie lub postępuj zgodnie z tymi instrukcjami, aby wykonać ten krok w konsoli Firebase.Agent może następnie wywołać narzędzie firebase_get_sdk_config i utworzyć niezbędne pliki do połączenia projektu z aplikacją internetową Firebase. Jeśli tego nie zrobi, poproś go o to.
```
Add my Firebase SDK configuration to my app.
```
Agent często umieszcza klucz interfejsu API i inne konfiguracje bezpośrednio w src/lib/firebase.ts. Poproś go o przeniesienie ich z kodu aplikacji, aby ją zabezpieczyć.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Cel 2. Dodaj Firestore

Przełącz na kod W interfejsie czatu poproś agenta o użycie Firestore w Twojej aplikacji.
```
Use Firestore for user entries. Give anyone read and write access.
```
Agent zaktualizuje kod źródłowy, aby zamiast pamięci lokalnej używać Firestore do przechowywania wpisów użytkowników, i utworzy reguły zabezpieczeń Firestore. Pamiętaj, że może wywołać narzędzie Firebase MCP firebase_init lub poprosić o uruchomienie polecenia firebase init w terminalu w celu zainicjowania Firestore. Zanim przejdziesz dalej, upewnij się, że widzisz plik firestore.rules z tą zawartością:
```
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 tymi zajęciami praktycznymi zawsze powinieneś zabezpieczać swoje bazy danych. Więcej informacji na ten temat znajdziesz w naszej dokumentacji.
W terminalu (Shift+Ctrl+C) zainicjuj Firestore, jeśli agent nie poprosił Cię o to wcześniej.
```
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 3. Wypróbuj

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

5. 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.