Pierwsze kroki z prototypowaniem aplikacji

Firebase Studio zawiera interfejs internetowy, który umożliwia szybkie tworzenie prototypów i generowanie aplikacji internetowych opartych na AI za pomocą promptów multimodalnych, w tym języka naturalnego, obrazów i narzędzi do rysowania. Agent obsługuje aplikacje Next.js, a w przyszłości planujemy dodać obsługę innych platform i frameworków.

Agent do prototypowania aplikacji to uproszczony proces tworzenia aplikacji bez użycia kodu, który wykorzystuje generatywną AI do opracowywania, testowania, iterowania i publikowania pełnostosowej agentowej aplikacji internetowej. Opisujesz pomysł na aplikację w języku naturalnym, a opcjonalnie możesz dodać obraz. Agent generuje plan aplikacji, kod i podgląd internetowy. Aby ułatwić Ci tworzenie i publikowanie aplikacji pełnostosowej, Firebase Studio może automatycznie udostępniać Ci te usługi:

  • Jeśli Twoja aplikacja korzysta z AI: Firebase Studio dodaje do aplikacji interfejs API dewelopera, wykorzystując możliwości przepływów Genkit do pracy z Gemini.Gemini Możesz użyć własnego klucza Gemini API lub pozwolić Firebase Studio utworzyć projekt Firebase i klucz interfejsu Gemini API.

  • Jeśli chcesz opublikować aplikację w internecie: Firebase Studio tworzy projekt i zapewnia szybki sposób publikowania aplikacji za pomocą Firebase App Hosting.

Możesz dopracowywać aplikację za pomocą języka naturalnego, obrazów i narzędzi do rysowania, bezpośrednio edytować kod, cofać zmiany, publikować aplikację i monitorować jej skuteczność – wszystko to w Firebase Studio.

Rozpocznij

Aby rozpocząć korzystanie z App Prototyping agent, wykonaj te czynności:

  1. Zaloguj się na konto Google i otwórz Firebase Studio.

  2. W polu Stwórz prototyp aplikacji za pomocą AI opisz swój pomysł na aplikację w języku naturalnym.

    Aby utworzyć aplikację do generowania przepisów, możesz na przykład wpisać taki prompt:

    Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.

  3. Opcjonalnie możesz przesłać obraz, który będzie towarzyszyć promptowi. Możesz na przykład przesłać obraz zawierający schemat kolorów, którego chcesz użyć w aplikacji, i poprosić Firebase Studio o jego zastosowanie. Obrazy muszą być mniejsze niż 3 MiB.

  4. Kliknij Prototypowanie za pomocą AI.

    Na podstawie promptu Gemini generuje projekt aplikacji, podając proponowaną nazwę aplikacji, wymagane funkcje i wytyczne dotyczące stylu.

  5. Sprawdź plan. W razie potrzeby wprowadź kilka zmian. Możesz na przykład zmienić proponowaną nazwę aplikacji lub schemat kolorów, korzystając z jednej z tych opcji:

    • Kliknij Dostosuj i edytuj gotowy projekt bezpośrednio. Wprowadź zmiany i kliknij Zapisz.

    • W polu Opisz... w panelu czatu dodaj pytania wyjaśniające i kontekst. Możesz też przesłać dodatkowe obrazy.

  6. Kliknij Utwórz prototyp tej aplikacji.

  7. Agent do prototypowania aplikacji zaczyna pisać kod aplikacji.

    • Jeśli Twoja aplikacja korzysta z AI, pojawi się prośba o dodanie lub wygenerowanie Gemini APIklucza. Jeśli klikniesz Automatyczne generowanie, App Prototyping agent udostępni Ci projekt Firebase i klucz Gemini API.

Testowanie, udoskonalanie, debugowanie i iteracyjne poprawianie

Po wygenerowaniu pierwszej wersji aplikacji możesz ją testować, ulepszać, debugować i iteracyjnie rozwijać.

  • Sprawdź aplikację i zacznij z niej korzystać: po wygenerowaniu kodu pojawi się podgląd aplikacji. Możesz bezpośrednio wchodzić w interakcję z podglądem, aby go przetestować. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

  • Naprawiaj błędy na bieżąco: w większości przypadków App Prototyping agent prosi o naprawienie wszelkich błędów, które się pojawią. Kliknij Napraw błąd, aby umożliwić podjęcie próby naprawy.

    Jeśli otrzymasz błędy, których nie można automatycznie naprawić, skopiuj błąd i odpowiedni kontekst (np. „Czy możesz naprawić ten błąd w moim kodzie inicjującym Firebase?”) do okna czatu i wyślij go do Gemini.

  • Testowanie i iteracyjne ulepszanie za pomocą języka naturalnego: dokładnie przetestuj aplikację i współpracuj z App Prototyping agent, aby iteracyjnie ulepszać kod i projekt, aż uzyskasz zadowalający efekt.

    Gdy przebywasz w: Prototyper mode, you can also use the following features:

    • Kliknij Ikona adnotacji Dodaj adnotację, aby rysować bezpośrednio w oknie podglądu. Użyj dostępnych narzędzi do kształtów, obrazów i tekstu oraz opcjonalnego prompta tekstowego, aby wizualnie opisać, co chcesz zmienić w App Prototyping agent.

    • Kliknij Wybierz ikonę Wybierz, aby wybrać konkretny element i wpisać instrukcje dla App Prototyping agent. Umożliwia to szybkie kierowanie reklam na konkretną ikonę, przycisk, fragment tekstu lub inny element. Po kliknięciu obrazu możesz też wyszukać i wybrać zdjęcie stockowe z Unsplash.

    Opcjonalnie możesz kliknąć Link icon Udostępnij link do podglądu, aby tymczasowo udostępnić aplikację publicznie za pomocą Firebase Studio publicznych wersji podglądowych.

  • Debugowanie i iterowanie bezpośrednio w kodzie: kliknij Przełącznik języka ikona Przełącz na kod, aby otworzyć widok Code, w którym możesz wyświetlić wszystkie pliki aplikacji i bezpośrednio modyfikować kod. Możesz wrócić do Prototyper mode at any time.

    W widoku Code możesz też korzystać z tych przydatnych funkcji:

    • Firebase Studiowbudowanych funkcji debugowania i raportowania, aby sprawdzać, debugować i kontrolować aplikację.

    • Pomoc AI z Gemini w Firebasekodzie (w formie wbudowanej lub interaktywnego czatu – obie opcje są dostępne domyślnie). Interaktywny czat może diagnozować problemy, dostarczać rozwiązań i uruchamiać narzędzia, które pomogą szybciej naprawić aplikację. Aby uzyskać dostęp do czatu, kliknij iskręGemini u dołu obszaru roboczego.

    • Otwórz Firebase Local Emulator Suite, aby wyświetlić bazę danych i dane uwierzytelniania. Aby otworzyć emulator w obszarze roboczym:

      1. Kliknij Przełącznik języka ikona Przełącz na kod i otwórz rozszerzenie Firebase Studio (Ctrl+',Ctrl+' lub Cmd+',Cmd+' w systemie macOS).

      2. Przewiń do sekcji Porty backendu i rozwiń ją.

      3. W kolumnie Działania odpowiadającej pozycji Port 4000 kliknij Otwórz w nowym oknie.

  • Testowanie i mierzenie wydajności funkcji generatywnej AI: w interfejsie programisty Genkit możesz uruchamiać przepływy AI Genkit, testować je, debugować, wchodzić w interakcje z różnymi modelami, dopracowywać prompty i wykonywać inne działania.

    Aby wczytać przepływy Genkit w interfejsie programisty Genkit i rozpocząć testowanie:

    1. W terminalu w obszarze roboczym Firebase Studio uruchom to polecenie, aby pobrać klucz Gemini API i uruchomić serwer Genkit:

       npm run genkit:watch

    2. Kliknij link do interfejsu deweloperskiego Genkit. Interfejs programisty Genkit otworzy się w nowym oknie z Twoimi przepływami, promptami, modułami do osadzania i wyborem różnych dostępnych modeli.

    Więcej informacji o interfejsie programisty Genkit znajdziesz w sekcji Narzędzia dla programistów Genkit.

Publikowanie aplikacji za pomocą Firebase App Hosting

Po przetestowaniu aplikacji i uznaniu, że działa prawidłowo, możesz opublikować ją w internecie za pomocą Firebase App Hosting.

Gdy skonfigurujesz App Hosting, Firebase Studio utworzy dla Ciebie projekt Firebase (jeśli nie został jeszcze utworzony przez automatyczne wygenerowanie klucza Gemini API) i przeprowadzi Cię przez proces łączenia konta Cloud Billing.

Aby opublikować aplikację:

  1. Kliknij Opublikuj, aby skonfigurować projekt Firebase i opublikować aplikację. Pojawi się panel Opublikuj aplikację.

  2. W kroku Projekt Firebase ikona App Prototyping agent wyświetla Firebase powiązany z obszarem roboczym. Jeśli podczas Gemini API generowania klucza nie utworzono projektu, zostanie utworzony nowy projekt. Aby kontynuować, kliknij Dalej.

  3. W kroku Połącz konto Cloud Billing wybierz jedną z tych opcji:

    • Wybierz konto Cloud Billing, które chcesz połączyć z projektem Firebase.

    • Jeśli nie masz konta Cloud Billing lub chcesz utworzyć nowe, kliknij Utwórz konto Cloud Billing. Spowoduje to otwarcie konsoli Google Cloud, w której możesz utworzyć nowe konto samoobsługowe.Cloud Billing Po utworzeniu konta wróć na stronę Firebase Studio i wybierz je z listy Połącz Cloud Billing.

  4. Kliknij Dalej. Firebase Studio łączy konto rozliczeniowe z projektem powiązanym z Twoim obszarem roboczym, który został utworzony automatycznie podczas generowania klucza Gemini API lub po kliknięciu Opublikuj.

  5. Kliknij Skonfiguruj usługi. Agent do prototypowania aplikacji rozpoczyna udostępnianie usług Firebase.

  6. Kliknij Opublikuj teraz. Firebase Studio konfiguruje usługi Firebase, Może to potrwać kilka minut. Więcej informacji o tym, co dzieje się w tle, znajdziesz w artykule Proces kompilacji App Hosting.

  7. Po zakończeniu publikowania pojawi się Przegląd aplikacji z adresem URL i statystykami aplikacji opartymi na App Hosting. Aby zamiast domeny wygenerowanej przez Firebase używać domeny niestandardowej (np. example.com lub app.example.com), możesz dodać domenę niestandardową w konsoli Firebase.

Więcej informacji o App Hosting znajdziesz w artykule Informacje o App Hosting i jego działaniu.

Zabezpieczanie aplikacji za pomocą Firebase App Check i reCAPTCHA Enterprise

Jeśli w aplikacji masz zintegrowane usługi Firebase lub Google Cloud, Firebase App Check pomaga chronić jej backend przed nadużyciami, uniemożliwiając nieautoryzowanym klientom dostęp do zasobów Firebase. Działa zarówno z usługami Google (w tym Firebase i usługami Google Cloud), jak i z Twoimi własnymi backendami, aby chronić Twoje zasoby.

Zalecamy dodanie App Check do każdej aplikacji, którą publikujesz publicznie, aby chronić zasoby backendu przed nadużyciami.

W tej sekcji znajdziesz instrukcje konfigurowania App Check w Firebase Studio za pomocą reCAPTCHA Enterprise w przypadku aplikacji internetowej utworzonej przez App Prototyping agent. Możesz jednak skonfigurować App Check w Firebase Studio w dowolnej aplikacji, która implementuje usługi Firebase i może implementować dostawców niestandardowych. Więcej informacji znajdziesz na stronie Firebase App Check.

reCAPTCHA Enterprise zapewnia do 10 tys. ocen bezpłatnie.

Krok 1. Skonfiguruj reCAPTCHA Enterprise w swojej aplikacji

  1. Otwórz sekcję reCAPTCHA Enterprise w konsoli Google Cloud.

  2. Wybierz nazwę projektu Firebase w Google Cloud selektorze projektów w konsoli.

  3. Jeśli pojawi się prośba o włączenie interfejsu reCAPTCHA Enterprise API, zrób to.

  4. Kliknij Rozpocznij i dodaj nazwę wyświetlaną klucza witryny reCAPTCHA.

  5. Zaakceptuj domyślny klucz Typ aplikacji Sieć.

  6. Kliknij Dodaj domenę i dodaj domenę. Dodaj swoją domenę (np.App Hosting)studio--PROJECT_ID.REGION.hosted.app i wszystkie domeny niestandardowe, których używasz lub planujesz używać w aplikacji.

  7. Kliknij Następny krok.

  8. Nie zaznaczaj opcji Czy będziesz używać testów zabezpieczających?.

  9. Kliknij Utwórz klucz.

  10. Skopiuj i zapisz identyfikator klucza, a następnie przejdź do sekcji Konfigurowanie App Check.

Krok 2. Skonfiguruj App Check

  1. Otwórz Firebasekonsolę i w menu nawigacyjnym kliknij Build > App Check.

  2. Kliknij Rozpocznij, a następnie kliknij Zarejestruj obok aplikacji.

  3. Kliknij, aby rozwinąć reCAPTCHA, i wklej identyfikator klucza wygenerowany dla reCAPTCHA Enterprise.

  4. Kliknij Zapisz.

Krok 3. Dodaj do kodu znak App Check

  1. Wróć do Firebase Studio i w Code dodaj wygenerowany klucz witryny do pliku .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Jeśli nie masz jeszcze zapisanej konfiguracji Firebase w .env, uzyskaj ją:

    • W Firebasekonsoli otwórz Ustawienia projektu i znajdź go w sekcji odpowiadającej Twojej aplikacji.

    • W widoku Terminal Code:

      1. Zaloguj się w Firebase: firebase auth login
      2. Wybierz projekt:firebase use FIREBASE_PROJECT_ID
      3. Uzyskaj konfigurację Firebase: firebase apps:sdkconfig

  3. Dodaj konfigurację do pliku .env, aby wyglądał tak:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. Dodaj App Check do kodu aplikacji. Możesz poprosić Gemini o dodanieApp Check reCAPTCHA Enterprise do Twojej aplikacji (pamiętaj, aby podać „reCAPTCHA Enterprise” i dokładnie to sprawdzić) lub wykonać czynności opisane w sekcji InicjowanieApp Check.

  5. Opublikuj ponownie witrynę w App Hosting. Aby wygenerować dane, przetestuj funkcje Firebase.

  6. Sprawdź, czy App Check otrzymuje żądania w konsoli Firebase. W tym celu otwórz Kompilacja > Weryfikacja aplikacji.

  7. Kliknij, aby sprawdzić usługi Firebase. Po sprawdzeniu, czy przychodzą żądania, kliknij Wymuś, aby wymusić App Check.

  8. Powtórz weryfikację i egzekwowanie zasad w przypadku domeny Firebase Authentication.

Jeśli po zarejestrowaniu aplikacji w App Check chcesz uruchomić ją w środowisku, które App Check zwykle nie klasyfikuje jako prawidłowe, np. lokalnie podczas programowania lub w środowisku ciągłej integracji (CI), możesz utworzyć wersję debugowania aplikacji, która używa dostawcy debugowania App Check zamiast prawdziwego dostawcy atestów. Więcej informacji znajdziesz w artykule Używanie App Check z dostawcą debugowania w aplikacjach internetowych.

Monitorowanie aplikacji

Panel Omówienie aplikacji w Firebase Studio zawiera najważniejsze statystyki i informacje o Twojej aplikacji, dzięki czemu możesz monitorować jej wydajność za pomocą wbudowanych narzędzi do obserwacji App Hosting. Po wdrożeniu witryny możesz wyświetlić jej przegląd, klikając Opublikuj. W tym panelu możesz:

  • Kliknij Opublikuj, aby opublikować nową wersję aplikacji.
  • Udostępnij link do aplikacji lub otwórz ją bezpośrednio w sekcji Odwiedź aplikację.
  • Sprawdź podsumowanie skuteczności aplikacji w ciągu ostatnich 7 dni, w tym łączną liczbę żądań i stan najnowszego wdrożenia. Aby uzyskać więcej informacji, kliknij Wyświetl szczegóły w Firebasekonsoli.
  • Wyświetl wykres liczby żądań otrzymanych przez aplikację w ciągu ostatnich 24 godzin, podzielonych według kodu stanu HTTP.

Jeśli zamkniesz panel Przegląd aplikacji, możesz go w każdej chwili ponownie otworzyć, klikając Opublikuj.

Dowiedz się więcej o zarządzaniu i monitorowaniu App Hostingwdrażania etapowego w artykule Zarządzanie wdrażaniem etapowym i wersjami.

Cofanie wdrożenia

Jeśli wdrożysz kolejne wersje aplikacji w App Hosting, możesz przywrócić jedną z wcześniejszych wersji. Możesz też usunąć tę funkcję.

  • Aby cofnąć opublikowaną witrynę:

    1. Otwórz App Hosting w Firebasekonsoli.

    2. Znajdź backend aplikacji, kliknij Wyświetl, a potem Wdrożenia.

    3. Obok wdrożenia, do którego chcesz przywrócić poprzednią wersję, kliknij Więcej , a następnie wybierz Przywróć poprzednią wersję i potwierdź.

    Więcej informacji znajdziesz w artykule Zarządzanie wdrażaniem i wersjami.

  • Aby usunąć domenę App Hosting z internetu:

    1. W Firebasekonsoli otwórz App Hosting i kliknij Wyświetl w sekcji aplikacji Firebase Studio.

    2. W sekcji Informacje o backendzie kliknij Zarządzaj. Otworzy się strona Domeny.

    3. Obok domeny kliknij Więcej , a następnie wybierz Wyłącz domenę i potwierdź.

    Spowoduje to usunięcie domeny z internetu. Aby całkowicie usunąć backend, postępuj zgodnie z instrukcjami w artykule Usuwanie backendu.App Hosting

Korzystanie z Genkit Monitoring w przypadku wdrożonych funkcji

Możesz monitorować kroki, dane wejściowe i wyjściowe funkcji Genkit, włączając telemetrię w kodzie przepływu AI. Funkcja telemetrii Genkit umożliwia monitorowanie wydajności i wykorzystania przepływów AI. Te dane pomogą Ci zidentyfikować obszary wymagające poprawy, rozwiązywać problemy, optymalizować prompty i przepływy pod kątem lepszej skuteczności i efektywności kosztowej oraz śledzić wykorzystanie przepływów w czasie.

Aby skonfigurować monitorowanie w Genkit, dodaj dane telemetryczne do Genkit przepływów AI, a następnie wyświetl wyniki w Firebase konsoli.

Krok 1. Dodaj telemetrię do kodu przepływu Genkit w Firebase Studio

Aby skonfigurować monitorowanie w kodzie:

  1. Jeśli nie jesteś jeszcze w widoku Code, kliknij Przełącznik języka ikona Przełącz na kod, aby go otworzyć.

  2. Sprawdź package.json, aby zweryfikować wersję zainstalowanej aplikacji Genkit.

  3. Otwórz terminal (Ctrl-Shift-C lub Cmd-Shift-C w systemie macOS).

  4. Kliknij w terminalu i zainstaluj wtyczkę Firebase, używając wersji zgodnej z plikiem package.json. Jeśli na przykład pakiety Genkit w package.json mają wersję 1.0.4, uruchom to polecenie, aby zainstalować wtyczkę:

    npm i --save @genkit-ai/firebase@1.0.4

  5. W Eksploratorze rozwiń src > ai > flows. W folderze flows pojawią się co najmniej 1 plik TypeScript zawierający przepływy Genkit.

  6. Kliknij jeden z przepływów, aby go otworzyć.

  7. U dołu sekcji importów w pliku dodaj ten kod, aby zaimportować i włączyć FirebaseTelemetry:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

Krok 2. Skonfiguruj uprawnienia

Firebase Studio włączył wymagane interfejsy API podczas konfigurowania projektu Firebase, ale musisz też przyznać uprawnienia kontu usługi App Hosting.

Aby skonfigurować uprawnienia:

  1. Otwórz Google Cloud konsolę IAM, wybierz projekt, a następnie przypisz te role do konta usługi App Hosting:

    • Zapisujący wskaźniki monitorowania (roles/monitoring.metricWriter)
    • Agent Cloud Trace (roles/cloudtrace.agent)
    • Zapisujący logi (roles/logging.logWriter)

  2. Ponownie opublikuj aplikację w App Hosting.

  3. Po zakończeniu publikowania załaduj aplikację i zacznij z niej korzystać. Po 5 minutach aplikacja powinna zacząć rejestrować dane telemetryczne.

Krok 3. Monitoruj funkcje generatywnej AI w konsoli Firebase

Gdy telemetria jest skonfigurowana, Genkit rejestruje liczbę żądań, sukcesów i opóźnień dla wszystkich przepływów, a w przypadku każdego konkretnego przepływu Genkit zbiera dane o stabilności, wyświetla szczegółowe wykresy i rejestruje przechwycone ślady.

Aby monitorować funkcje AI wdrożone za pomocą Genkit:

  1. Po 5 minutach otwórz Genkit w Firebasekonsoli i sprawdź prompty i odpowiedzi Genkit.

    Genkit zbiera te dane dotyczące stabilności:

    • Łączna liczba żądań: łączna liczba żądań otrzymanych przez Twój proces.
    • Wskaźnik sukcesu: odsetek żądań, które zostały przetworzone.
    • Czas oczekiwania w 95 centylu: 95 centyl czasu oczekiwania w przepływie, czyli czas potrzebny na przetworzenie 95% żądań.

    • Wykorzystanie tokenów:

      • Tokeny wejściowe: liczba tokenów wysłanych do modelu w prompcie.
      • Tokeny wyjściowe: liczba tokenów wygenerowanych przez model w odpowiedzi.

    • Użycie obrazu:

      • Obrazy wejściowe: liczba obrazów wysłanych do modelu w prompcie.
      • Obrazy wyjściowe: liczba obrazów wygenerowanych przez model w odpowiedzi.

    Jeśli rozwiniesz dane o stabilności, zobaczysz szczegółowe wykresy:

    • Liczba żądań w czasie.
    • Wskaźnik sukcesu w czasie.
    • Liczba tokenów wejściowych i wyjściowych w czasie.
    • Czas oczekiwania (95 i 50 centyl) w czasie.

Więcej informacji o usłudze Genkit znajdziesz na stronie Genkit.

.

Dalsze kroki