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

Firebase MCP w Firebase Studio

1. Przegląd

W tym laboratorium kodowania nauczysz się korzystać z agenta do prototypowania aplikacji wraz z serwerem Firebase MCP w Firebase Studio, aby utworzyć pełną aplikację internetową korzystającą z Bazy danych czasu rzeczywistego Firebase.

Animowany GIF z gotową aplikacją

Czego się nauczysz

Generowanie statycznej aplikacji internetowej za pomocą agenta do prototypowania aplikacji
Konfigurowanie serwera MCP Firebase
Dodawanie Bazy danych czasu rzeczywistego Firebase 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. Nadaj plikowi nazwę 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 Bazy danych czasu rzeczywistego Firebase za pomocą platformy Firebase MCP

Cel 1. Dodaj Firebase do aplikacji

Przełącz na Prototyper. W interfejsie czatu poproś agenta o utworzenie projektu.
```
Create a Firebase project for my app.
```
Poproś pracownika obsługi klienta o wywołanie narzędzia Firebase MCP firebase_create_project.Pomiń ten krok, jeśli masz już utworzony projekt Firebase w ramach 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 połączenie z tym projektem.
```
Connect my app to my project `spinsync-3y3c6`.
```
Sprawdź, czy widzisz plik .firebaserc, który ustawia aktywny projekt. Jeśli nie, poproś pracownika obsługi klienta o zaktualizowanie środowiska Firebase.
```
Update my Firebase environment to use this project.
```
Oczekuj, że agent wywoła narzędzie Firebase MCP firebase_update_environment . Możliwe jednak, że agent wykona to zadanie bez wywoływania narzędzia.Na koniec sprawdź, czy w środowisku Firebase masz prawidłowy aktywny projekt i czy jesteś uwierzytelnionym użytkownikiem.
```
Show me my current Firebase environment.
```
Oczekuj, że agent wywoła narzędzie Firebase MCP firebase_get_environment.
Poproś agenta o utworzenie aplikacji internetowej w projekcie Firebase.
```
Create a web app in my active Firebase project.
```
Oczekuj, że agent wywoła narzędzie firebase_create_app i zwróci identyfikator aplikacji. Jeśli agentowi się to nie uda, spróbuj ponownie, klikając , lub wykonaj te instrukcje, aby wykonać ten krok w konsoli Firebase.
```
Use the App ID to get the SDK configuration and add to my app.
```
Oczekuj, że agent wywoła narzędzie firebase_get_sdk_config i zaktualizuje Twój kod za pomocą konfiguracji Firebase.Jeśli po zgłoszeniu przez agenta zakończenia zadania w src/lib/firebase.ts pojawią się klucz interfejsu API i inne konfiguracje, poproś go o przeniesienie ich w inne miejsce, aby zapewnić bezpieczeństwo aplikacji.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Cel 2. Dodaj Bazę danych czasu rzeczywistego Firebase

Pozostań w Prototyperze lub przejdź do niego. W interfejsie czatu poproś agenta o skonfigurowanie w projekcie Bazy danych czasu rzeczywistego Firebase.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
Oczekuj, że agent wywoła narzędzie Firebase MCP firebase_init i utworzy reguły zabezpieczeń w database.rules.json w ramach zmian w plikach na koniec tej tury rozmowy.
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
W tym miejscu przyznajesz wszystkim uprawnienia do odczytu i zapisu w bazie danych. Poza tymi warsztatami powinieneś zawsze zabezpieczać swoje bazy danych. Więcej informacji na ten temat znajdziesz w naszej dokumentacji.
Przełącz na kod W terminalu (Shift+Ctrl+C) zainicjuj Bazę danych czasu rzeczywistego Firebase.
```
firebase init database
```
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie i pozostaw domyślne opcje.Następnie wdróż reguły bezpieczeństwa dla instancji bazy danych.
```
firebase deploy --only database
```
Przełącz na Prototyper. Poproś agenta, aby używał domyślnej instancji bazy danych do wpisów użytkowników.
```
Use my default Realtime Database instance for user entries.
```
Oczekuj, że agent zaktualizuje pozostałą część kodu źródłowego, aby połączyć aplikację z instancją bazy danych.

Cel 3. Wypróbuj

Utwórz kilka nowych wpisów dla koła wyboru i sprawdź, czy pojawiają się one na stronie Bazy danych czasu rzeczywistego Firebase w konsoli Firebase.

Baza danych czasu rzeczywistego Firebase w konsoli Firebase

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.