Tworzenie, publikowanie i monitorowanie aplikacji internetowej full stack za pomocą agenta prototypowania aplikacji

Z tego przewodnika dowiesz się, jak użyć App Prototyping agent do szybkiego tworzenia i publikowania aplikacji pełnego zestawu za pomocą Gemini w Firebase. Za pomocą promptu w języku naturalnym wygenerujesz aplikację Next.js, która rozpozna produkty spożywcze na podstawie zdjęcia lub obrazu z kamery w przeglądarce i wygeneruje przepis zawierający rozpoznane składniki.

Inne technologie, których użyjesz w trakcie czytania tego przewodnika, to:

.

Krok 1. Wygeneruj aplikację

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

  2. W polu Prototyp aplikacji z AI wpisz prompt, który utworzy aplikację z przepisami opartą na obrazach, korzystającą z kamery w przeglądarce i generatywnej AI.

    Aby na przykład utworzyć aplikację do generowania przepisów, możesz użyć prompta takiego jak ten:

    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 z schematem kolorów, którego ma używać aplikacja, i poprosić Firebase Studio o jego zastosowanie. Obrazy muszą być mniejsze niż 3 MiB.

  4. Kliknij Prototyp z AI.

    Gemini generuje szablon aplikacji na podstawie prompta, zwracając proponowaną nazwę aplikacji, wymagane funkcje oraz 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 jednego z tych opcji:

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

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

  6. Kliknij Prototyp tej aplikacji.

  7. Agent prototypowania aplikacji zaczyna kodować Twoją aplikację.

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

Krok 2. Testowanie, udoskonalanie, debugowanie i powtarzanie

Po wygenerowaniu początkowej wersji aplikacji możesz ją testować, ulepszać, debugować i powtarzać.

  • Sprawdzanie i używanie aplikacji: po zakończeniu generowania kodu pojawi się podgląd aplikacji. Aby przetestować podgląd, możesz bezpośrednio z nim wchodzić w interakcję. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

  • Naprawiaj błędy w miarę ich występowania: w większości przypadków narzędzie App Prototyping agentpoprosi Cię o naprawienie wszelkich błędów. Kliknij Napraw błąd, aby spróbować go naprawić.

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

  • Testowanie i ulepszanie za pomocą języka naturalnego: dokładnie przetestuj aplikację i użyj App Prototyping agent, aby ulepszać kod i schemat, aż będą Ci odpowiadać.

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

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

    • Kliknij Wybierz ikonę Wybierz, aby wybrać konkretny element i wprowadzić instrukcje dotyczące App Prototyping agent. Dzięki temu możesz szybko ustawić kierowanie na konkretną ikonę, przycisk, fragment tekstu lub inny element. Po kliknięciu obrazu możesz też wyszukać i wybrać obraz ze zbioru Unsplash.

    Opcjonalnie możesz kliknąć Ikona linku Udostępnij link do podglądu, aby udostępnić aplikację publicznie i tymczasowo za pomocą Firebase Studio publicznego podglądu.

  • Debugowanie i iterowanie bezpośrednio w kodzie: kliknij Ikona przełącznika kodu 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 Studio wbudowane funkcje debugowania i raportowania do sprawdzania, debugowania i kontrolowania aplikacji.

    • Pomoc AI w Gemini w Firebase: bezpośrednio w kodzie lub za pomocą interaktywnego czatu (oba są dostępne domyślnie). Interaktywny czat umożliwia diagnozowanie problemów, dostarczanie rozwiązań i uruchamianie narzędzi, które pomogą Ci szybciej naprawić aplikację. Aby uzyskać dostęp do czatu, u dołu obszaru roboczego kliknij sparkGemini.

    • Aby wyświetlić dane uwierzytelniania i bazy danych, otwórz projekt Firebase Local Emulator Suite. Aby otworzyć emulator na obszarze roboczym:

      1. Kliknij Ikona przełącznika kodu Przełącz się na widok kodu i otwórz rozszerzenie Firebase Studio (Ctrl+',Ctrl+' lub Cmd+',Cmd+' w systemie macOS).

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

      3. W kolumnie Działania, która odpowiada Port 4000, kliknij Otwórz w nowym oknie.

  • Testowanie i mierzenie wydajności funkcji generatywnej AI: za pomocą interfejsu Genkit dla programistów możesz uruchamiać przepływy Genkit AI, testować i debugować modele, wchodzić z nimi w interakcje, ulepszać prompty itp.

    Aby załadować przepływy Genkit w interfejsie dla programistów Genkit i rozpocząć testowanie:

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

       npm run genkit:watch

    2. Kliknij link do interfejsu Genkit dla deweloperów. W nowym oknie otworzy się interfejs Genkit dla programistów z Twoimi przepływami, promptami, wbudowanymi elementami i wybraną grupą różnych dostępnych modeli.

    Więcej informacji o interfejsie Genkit dla deweloperów znajdziesz na stronie Genkit Developer Tools.

(Opcjonalnie) Krok 3. Opublikuj aplikację za pomocą App Hosting

Gdy przetestujesz aplikację i będziesz zadowolony z jej działania na komputerze, możesz ją opublikować w internecie za pomocą Firebase App Hosting.

Gdy konfigurujesz App Hosting, Firebase Studio tworzy dla Ciebie projekt Firebase (jeśli nie został on jeszcze utworzony przez automatyczne wygenerowanie klucza Gemini API) i prowadzi 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 App Prototyping agent wyświetla projekt Firebase powiązany z przestrzenią roboczą. Jeśli podczas generowania klucza Gemini API 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 Cloud Billing z samoobsługą. 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 Twoją pracą zespołową, utworzonym podczas automatycznego wygenerowania klucza Gemini API lub kliknięcia Opublikuj.

  5. Kliknij Skonfiguruj usługi. Agent 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ę strona Przegląd aplikacji z adresem URL i statystykami aplikacji generowanymi przez 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 o tym, jak działa.

(Zalecane) Krok 6. Dodaj do aplikacji Firebase App Check

Jeśli zintegrujesz z aplikacją usługi Firebase lub Google Cloud, Firebase App Check pomoże Ci chronić backend aplikacji 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 własnymi niestandardowymi 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 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. oceny bez opłat.

Krok 1. Skonfiguruj reCAPTCHA Enterprise w swojej aplikacji

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

  2. W konsoli Google Cloud wybierz nazwę projektu Firebase.

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

  4. Kliknij Rozpocznij i dodaj Wyświetlaną nazwę klucza strony reCAPTCHA.

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

  6. Kliknij Dodaj domenę i dodaj domenę. Dodaj domenę App Hosting (np. studio--PROJECT_ID.REGION.hosted.app) oraz wszystkie domeny niestandardowe, których używasz lub zamierzasz 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 potem przejdź do sekcji Konfigurowanie App Check.

Krok 2. Skonfiguruj App Check

  1. Otwórz konsolę Firebase i w menu nawigacyjnym kliknij Generuj > Sprawdzanie aplikacji.

  2. Kliknij Rozpocznij, a potem obok aplikacji kliknij Zarejestruj.

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

  4. Kliknij Zapisz.

Krok 3. Dodaj App Check do kodu

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

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. Jeśli konfiguracja Firebase nie jest jeszcze zapisana w pliku .env, pobierz ją:

    • W konsoli Firebase otwórz Ustawienia projektu i znajdź sekcję odpowiadającą Twojej aplikacji.

    • W widoku Terminala Code:

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

  3. Dodaj konfigurację do pliku .env, aby wyglądał on 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 dodanie do aplikacji App Check z reCAPTCHA Enterprise (pamiętaj, aby podać „reCAPTCHA Enterprise” i upewnić się, że to hasło jest prawidłowe). Możesz też wykonać czynności opisane w sekcji Inicjowanie App Check.

  5. Ponownie opublikuj witrynę w witrynie App Hosting. Spróbuj przetestować funkcje Firebase, aby wygenerować dane.

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

  7. Kliknij, aby sprawdzić usługi Firebase. Po sprawdzeniu, że prośby docierają, kliknij Wymuszaj, aby wdrożyć App Check.

  8. Powtórz weryfikację i wymuszenie Firebase Authentication.

Jeśli po zarejestrowaniu aplikacji w usłudze App Check chcesz uruchomić ją w środowisku, które App Check normalnie nie uzna za ważne, np. lokalnie podczas tworzenia lub w środowisku ciągłej integracji (CI), możesz utworzyć wersję debugową aplikacji, która używa dostawcy debugowania App Check zamiast prawdziwego dostawcy uwierzytelniania. Więcej informacji znajdziesz w artykule Używanie funkcji App Check w Google Apps z dostawcą usług debugowania.

(Opcjonalnie) Krok 7. Monitoruj aplikację

Panel Przegląd aplikacji w Firebase Studio zawiera najważniejsze dane i informacje o aplikacji, dzięki czemu możesz monitorować wydajność aplikacji internetowej za pomocą wbudowanych narzędzi do obserwacji w App Hosting. Po wdrożeniu witryny możesz uzyskać dostęp do przeglądu, klikając Opublikuj. W tym panelu możesz:

  • Aby opublikować nową wersję aplikacji, kliknij Opublikuj.
  • Udostępnij link do aplikacji lub otwórz ją bezpośrednio w sekcji Otwórz aplikację.
  • Przejrzyj podsumowanie skuteczności aplikacji w ciągu ostatnich 7 dni, w tym łączną liczbę żądań i stan najnowszego wdrożenia. Aby uzyskać dostęp do jeszcze większej ilości informacji w Firebase konsoli, kliknij Wyświetl szczegóły.
  • Wyświetl wykres liczby żądań otrzymanych przez Twoją 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 otworzyć ponownie, klikając Opublikuj.

Więcej informacji o zarządzaniu wdrożeniami App Hosting i ich monitorowaniu znajdziesz w sekcji Zarządzanie wdrożeniami i wersjami.

(Opcjonalnie) Krok 8. Cofnij wdrożenie

Jeśli w aplikacji App Hosting zostały wdrożone kolejne wersje, możesz przywrócić jedną z tych wcześniejszych wersji. Możesz je też usunąć.

  • Aby cofnąć opublikowaną witrynę:

    1. Otwórz App Hosting w konsoli Firebase.

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

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

    Więcej informacji znajdziesz w artykule Zarządzanie wdrożeniami i wersjami.

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

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

    2. W sekcji Informacje o zapleczu kliknij Zarządzaj. Wczytuje się strona Domains (Domeny).

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

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

(Opcjonalnie) Krok 9. Użyj funkcji Genkit Monitorowanie wdrożonych funkcji

Aby monitorować kroki, dane wejściowe i dane wyjściowe funkcji Genkit, włącz śledzenie w kodzie przepływu AI. Funkcja telemetrii Genkit umożliwia monitorowanie wydajności i używania przepływów AI. Te dane pomogą Ci określić obszary wymagające poprawy, rozwiązać problemy, zoptymalizować prompty i sekwencje pod kątem skuteczności i efektywności kosztowej oraz śledzić wykorzystanie sekwencji na przestrzeni czasu.

Aby skonfigurować monitorowanie w Genkit, dodaj telemetrię do przepływów AI w Genkit, a potem wyświetl wyniki w konsoli Firebase.

Krok 1. Dodaj śledzenie do kodu przepływu Genkit w pliku Firebase Studio

Aby skonfigurować monitorowanie w kodzie:

  1. Jeśli nie masz jeszcze otwartego widoku Code, kliknij Ikona przełącznika kodu Przełącz na kod, aby go otworzyć.

  2. Sprawdź package.json, aby sprawdzić zainstalowaną wersję 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, która odpowiada plikowi package.json. Jeśli na przykład pakiety Genkit w package.json mają wersję 1.0.4, aby zainstalować wtyczkę, uruchom to polecenie:

    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 procesów, aby go otworzyć.

  7. Na dole sekcji importu w pliku dodaj te instrukcje importu i włącz FirebaseTelemetry:

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

enableFirebaseTelemetry();

Krok 2. Skonfiguruj uprawnienia

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

Aby skonfigurować uprawnienia:

  1. Otwórz konsolę uprawnień Google Cloud, wybierz swój projekt, a następnie przypisz kontu usługi hostingu aplikacji te role:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Agent Cloud Trace (roles/cloudtrace.agent)
    • Zapisujący logi (roles/logging.logWriter)

  2. Opublikuj ponownie aplikację na stronie App Hosting.

  3. Po zakończeniu publikowania otwórz aplikację i zacznij z niej korzystać. Po upływie 5 minut aplikacja powinna zacząć rejestrować dane telemetryczne.

Krok 3. Monitoruj funkcje generatywnej AI w konsoli Firebase

Gdy telemetria jest skonfigurowana, Genkit rejestruje liczbę żądań, skuteczność i opóźnienie we wszystkich przepływach, a dla każdego konkretnego przepływu Genkit zbiera dane o stabilności, wyświetla szczegółowe wykresy i rejestruje zarejestrowane ślady.

Aby monitorować funkcje AI zaimplementowane za pomocą Genkit:

  1. Po 5 minutach otwórz Genkit w konsoli Firebase i sprawdź prompty oraz odpowiedzi Genkit.

    Genkit zawiera 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.
    • 95 centyl czasu oczekiwania: 95 centyl czasu oczekiwania w Twoim procesie, czyli czas potrzebny na przetworzenie 95% żądań.

    • Wykorzystanie tokenów:

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

    • Użycie obrazu:

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

    Jeśli rozwiniesz dane dotyczące stabilności, zobaczysz szczegółowe wykresy:

    • Liczba żądań na przestrzeni czasu.
    • Wskaźnik sukcesu w czasie.
    • Tokeny wejściowe i wyjściowe w czasie.
    • Czas oczekiwania (95 i 50 centyl) na przestrzeni czasu.

Więcej informacji o Genkit znajdziesz na stronie Genkit.

Dalsze kroki