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 pakietu 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 zaproponuje przepis zawierający zidentyfikowane składniki. Następnie udoskonaliszujesz i ulepszisz aplikację, a potem opublikujesz ją w Firebase App Hosting.

.

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 wykorzystaniem AI wpisz opis aplikacji, którą chcesz skompilować. W tym rozwiązaniu, w którym tworzysz aplikację z przepisami opartą na obrazach, możesz użyć prompta takiego jak ten, aby utworzyć prototyp aplikacji korzystającej z aparatu i generatywnej AI:

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

  3. Kliknij Prototyp z AI.

    Gemini generuje szablon aplikacji na podstawie prompta, zwracając proponowaną nazwę aplikacji, wymagane funkcje i wytyczne dotyczące stylu.

  4. Sprawdź szablon i wprowadź kilka zmian. Możesz na przykład zmienić proponowaną nazwę aplikacji lub schemat kolorów, korzystając z jednego z tych sposobów:

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

  5. Kliknij Prototyp tej aplikacji. Gemini rozpoczyna kodowanie aplikacji. Ponieważ opis aplikacji zawiera funkcje wymagające generatywnej AI, Gemini wyświetli prompt z prośbą o klucz Gemini API.

  6. Dodaj własny klucz Gemini API lub kliknij Wygeneruj automatycznie, aby wygenerować klucz Gemini API.

Krok 2. Testowanie, udoskonalanie, debugowanie i powtarzanie

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

  1. Sprawdzanie i używanie aplikacji: po zakończeniu generowania kodu pojawi się podgląd aplikacji. Możesz przetestować podgląd, wchodząc z nim w interakcję.

  2. Popraw aplikację: nadal używaj interfejsu czatu, aby poprosić Gemini o dodanie funkcji i ulepszanie aplikacji. Możesz też kliknąć Ikona przełącznika kodu Przejdź do kodu, aby otworzyć widok Code, w którym możesz edytować kod bezpośrednio w Firebase Studioprzestrzeni roboczej.

  3. Testowanie aplikacji: w panelu podglądu aplikacji prześlij obraz przedstawiający różne produkty spożywcze, aby przetestować, czy aplikacja potrafi zidentyfikować składniki i podać przepis. Opcjonalnie możesz użyć widoku Code, aby udostępnić aplikację publicznie, tymczasowo używając Firebase Studio publicznych podglądów.

  4. Debugowanie aplikacji: otwórz Code, klikając Ikona przełącznika kodu. Przejdź do kodu, aby otworzyć widok Code, w którym możesz użyć Firebase Studiowbudowanych funkcji debugowania i zgłaszania, aby sprawdzić, debugować i przeprowadzić audyt aplikacji. W każdej chwili możesz wrócić do widoku App Prototyping agent.

    .

  5. Powtarzaj:jeśli aplikacja nie działa zgodnie z oczekiwaniami, doprecyzuj prompt, poproś o doprecyzowanie aplikacji w panelu czatu (Gemini) lub bezpośrednio edytuj kod (Code).

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

Gdy przetestujesz aplikację i będziesz z niej zadowolony/zadowolona, możesz ją opublikować w internecie za pomocą Firebase App Hosting.

Podczas konfigurowania App Hosting usługa Firebase Studio utworzy dla Ciebie projekt Firebase i przejrzy z Tobą proces łączenia konta Cloud Billing.

Aby opublikować aplikację w usłudze Firebase App Hosting:

  1. Kliknij Opublikuj, aby utworzyć nowy projekt Firebase i rozpocząć konfigurowanie App Hosting. Pojawi się panel Publikowanie aplikacji.

  2. W kroku Projekt Firebase zapisz nazwę utworzonego dla Ciebie projektu Firebase, a potem 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 na liście Połącz Cloud Billing wybierz to konto.

  4. Kliknij Dalej. Firebase Studio łączy konto rozliczeniowe z projektem powiązanym z Twoją pracą zespołową, utworzonym podczas automatycznego wygenerowania klucza Firebase Studio lub kliknięcia Opublikuj.Gemini API Następnie App Hostingskonfiguruje w Google Cloud w pełni zarządzane środowisko dla Twojej aplikacji.

  5. Kliknij Utwórz pierwsze wdrożenie. Firebase Studio rozpoczyna wdrażanie wersji App Hosting. Może to potrwać do 10 minut. Więcej informacji o tym, co dzieje się w tle, znajdziesz w artykule Proces kompilacji App Hosting.

  6. Po zakończeniu wdrażania pojawi się strona Przegląd aplikacji z linkiem URL i statystykami dotyczącymi aplikacji, które są generowane na podstawie możliwości monitorowania 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.

(Opcjonalnie) Krok 4. Monitoruj aplikację

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

  • Aby opublikować nową wersję aplikacji, kliknij Utwórz wersję.
  • 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 ostatniego 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 dowolnym momencie otworzyć ponownie, klikając Opublikuj.

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

(Opcjonalnie) Krok 5. Cofnij wdrożenie

Jeśli w aplikacji App Hosting wdrożyłeś 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 6. Użyj funkcji Genkit Monitorowanie w przypadku 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 metrykę do przepływów AI Genkit, a potem wyświetl wyniki w konsoli Firebase.

Krok 1. Dodaj metrykę 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. U dołu 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 ś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) w czasie.

Więcej informacji o Genkit znajdziesz na stronie Genkit.

Dalsze kroki