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

Wersja testowa: Firebase Studio jest w wersji testowej, co oznacza, że usługa nie jest objęta gwarancją jakości usług ani zasadami wycofywania i może ulec zmianie w sposób niezapewniający zgodności wstecznej.

Z tego przewodnika dowiesz się, jak korzystać z App Prototyping agent, aby szybko tworzyć i publikować aplikacje full-stack za pomocą Gemini. Użyjesz prompta w języku naturalnym, aby wygenerować aplikację Next.js, która identyfikuje produkty spożywcze na zdjęciu lub w aparacie w przeglądarce udostępnionym przez zalogowanego użytkownika i generuje przepis zawierający zidentyfikowane składniki. Użytkownicy mogą następnie zapisać przepis w bazie danych z możliwością wyszukiwania.

Następnie dopracujesz i ulepszysz aplikację, zanim ostatecznie opublikujesz ją w Firebase App Hosting.

Ważne: trwałe przechowywanie danych w Cloud Firestore i Firebase Authentication jest wdrażane stopniowo i może nie być powszechnie dostępne.

Jeśli trwałość danych nie jest jeszcze dostępna w Twoim obszarze roboczym, Gemini może używać lokalnej pamięci przeglądarki i próbnych danych uwierzytelniających, jeśli w planie poprosisz o bazę danych lub uwierzytelnianie. Nadal możesz używać dodatkowych promptów lub widoku Code, aby wdrożyć trwałość danych.

Inne technologie, których będziesz używać w tym przewodniku, to:

• Firebase Studio obszar roboczy
• projekt w Firebase,
• Firebase App Hosting
• Cloud Firestore
• Firebase Authentication
• Firebase App Check

Ważne: App Prototyping agent obsługuje tworzenie aplikacji za pomocą platformy Next.js. Aby korzystać z pomocy AI w innych platformach w Firebase Studio, zapoznaj się z artykułem Wypróbuj Gemini z Firebase Studio

.

Krok 1. Wygeneruj aplikację

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

2. W polu Utwórz prototyp aplikacji za pomocą AI wpisz prompta podanego poniżej. Pozwoli on utworzyć aplikację z przepisami opartą na obrazach, która korzysta z kamery przeglądarki i generatywnej AI.

   Możesz na przykład wpisać prompta, aby utworzyć aplikację do generowania przepisów:

   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.
   

   Wskazówka: aby uzyskać najlepsze wyniki, podaj w prompcie jak najwięcej szczegółów. Uwzględnij funkcje, które chcesz mieć, przepływy pracy użytkowników i wymagania dotyczące danych. Opcjonalnie kliknij Ulepsz prompta, aby poprosić Gemini o ulepszenie początkowego prompta. Pamiętaj też, że najbardziej efektywne procesy programistyczne z wykorzystaniem AI są iteracyjne i możesz nadal ulepszać i dodawać funkcje we współpracy z Gemini. Dowiedz się więcej o tworzeniu skutecznych promptów.

3. Opcjonalnie możesz przesłać obraz, który ma zostać uwzględniony w prompcie. 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 wykorzystanie. Obrazy muszą być mniejsze niż 3 MiB.

4. Kliknij Prototypowanie za pomocą AI.

   App Prototyping agent wygeneruje plan aplikacji na podstawie Twojego prompta, podając proponowaną nazwę aplikacji, wymagane funkcje i wskazówki 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 bezpośrednio edytuj plan. Wprowadź zmiany i kliknij Zapisz.

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

6. Kliknij Utwórz prototyp tej aplikacji.

   Ważne: Gemini może generować wyniki, które wydają się wiarygodne, ale są niezgodne z prawdą. Może on podawać niedokładne informacje, których nie należy utożsamiać z opiniami Google. Zanim użyjesz danych wyjściowych z Gemini, sprawdź je. Nie używaj nieprzetestowanego wygenerowanego kodu w środowisku produkcyjnym. Nie podawaj na czacie informacji umożliwiających identyfikację ani danych użytkownika.

7. App Prototyping agent zaczyna kodować aplikację.

   • Aplikacja korzysta z AI, więc pojawi się prośba o dodanie lub wygenerowanie klucza Gemini API. Jeśli klikniesz Wygeneruj automatycznie, App Prototyping agent udostępni Ci projekt w Firebase i klucz Gemini API.
   Ważne: jeśli wybierzesz opcję Wygeneruj automatycznie, App Prototyping agent utworzy w Twoim imieniu projekt w Firebase z prefiksem odpowiadającym nazwie Twojego obszaru roboczego Firebase Studio i utworzy w projekcie nowy klucz Gemini API. Klucz jest też przechowywany w obszarze roboczym Firebase Studio w pliku .env. Aby w dowolnym momencie uzyskać dostęp do nowego projektu, kliknij jego nazwę u góry strony. Aby uzyskać dostęp do klucza Gemini API w celu skopiowania lub usunięcia go w przyszłości, użyj konsoli Google Cloud.

Krok 2. Testuj, ulepszaj, debuguj i powtarzaj

Po wygenerowaniu początkowej aplikacji możesz ją przetestować, ulepszyć, debugować i wprowadzać kolejne zmiany.

• Sprawdź aplikację i wykonaj w niej działania: po zakończeniu generowania kodu pojawi się podgląd aplikacji. Możesz wchodzić w interakcję z podglądem, aby go przetestować. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

• Dodaj Cloud Firestore i Firebase Authentication: na etapie iteracji możesz poprosić App Prototyping agent o dodanie uwierzytelniania użytkowników i bazy danych za pomocą Cloud Firestore i Firebase Authentication. Możesz na przykład dać użytkownikom możliwość zapisywania i pobierania przepisów za pomocą takiego prompta:

  Add user authentication to the app. Authenticated users can:
  
    - Download the recipe and its generated image as a PDF (Print).
  
    - Save the recipe as public or private and make accessible to a search
      feature. For now, just save the text, not the image, to the database.
  
  Important: Only authenticated users can download the PDF.
  

  Wskazówka: App Prototyping agent może dodać Cloud Firestore i Firebase Authentication do aplikacji na etapie iteracji, a nie w początkowym planie aplikacji.

• Naprawiaj błędy, gdy się pojawią: w większości przypadków App Prototyping agent wyświetla prośbę o naprawienie błędów, które się pojawiają. 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 odpowiedni kontekst (np. „Czy możesz naprawić ten błąd w moim kodzie inicjowania Firebase?”) do okna czatu i wyślij do Gemini.

  Wskazówka: Gemini wyjaśnia swoje rozumowanie, ale możesz też poprosić o wyjaśnienie planu, zanim zostanie on wykonany.

• Testuj i wprowadzaj zmiany przy użyciu języka naturalnego: dokładnie przetestuj aplikację i współpracuj z App Prototyping agent, aby wprowadzać zmiany w kodzie i projekcie, aż będziesz zadowolony(-a) z efektów.

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

  • Kliknij 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 App Prototyping agent ma zmienić.

  • Kliknij Wybierz, aby wybrać konkretny element i wpisać instrukcje dla App Prototyping agent. Dzięki temu możesz szybko wybrać konkretną ikonę, przycisk, fragment tekstu lub inny element. Po kliknięciu obrazu możesz też wyszukać i wybrać obraz z banku zdjęć Unsplash.

  Opcjonalnie możesz kliknąć Udostępnij link do podglądu, aby tymczasowo udostępnić aplikację publicznie za pomocą Firebase Studio podglądów publicznych.

• Utworzenie projektu Firebase: App Prototyping agent udostępnia projekt w Firebase w Twoim imieniu, gdy:

  • Automatyczne generowanie klucza interfejsu Gemini API
  • Prośba o połączenie aplikacji z projektem w Firebase
  • Poproś o pomoc w połączeniu aplikacji z usługami Firebase, takimi jak Cloud Firestore lub Firebase Authentication
  • Kliknij przycisk Publikuj i skonfiguruj Firebase App Hosting

  Aby zmienić projekt w Firebase połączony z obszarem roboczym, poproś App Prototyping agent, podając identyfikator projektu, którego chcesz użyć. Na przykład: „Przełącz na projekt w Firebase o identyfikatorze <your-project-id>”.

• Przetestuj aplikację i sprawdź reguły bazy danych Cloud Firestore: w panelu podglądu aplikacji prześlij obraz przedstawiający różne produkty spożywcze, aby sprawdzić, czy aplikacja potrafi identyfikować składniki oraz generować i zapisywać przepisy.

  Zaloguj się jako różni użytkownicy i wygeneruj przepisy: upewnij się, że uwierzytelnieni użytkownicy widzą swoje prywatne przepisy i że wszyscy użytkownicy widzą przepisy publiczne.

  Gdy poprosisz App Prototyping agent o dodanie Cloud Firestore, napisze i wdroży dla Ciebie reguły bazy danych Cloud Firestore. Sprawdź reguły w konsoli Firebase.

• Debugowanie i tworzenie kolejnych wersji bezpośrednio w kodzie: kliknij Przełącz na kod, aby otworzyć widok Code, w którym możesz zobaczyć wszystkie pliki aplikacji i bezpośrednio modyfikować kod. W każdej chwili możesz wrócić do trybu Prototyper.

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

  • Wbudowane funkcje debugowania i raportowania w Firebase Studio pozwalają sprawdzać, debugować i kontrolować aplikację.

  • Pomoc AI za pomocą Gemini w kodzie lub za pomocą interaktywnego czatu Gemini (obie opcje są dostępne domyślnie). Interaktywny czat może diagnozować problemy, podawać rozwiązania i uruchamiać narzędzia, które pomogą Ci szybciej naprawić aplikację. Aby uzyskać dostęp do czatu, kliknij ikonę iskierki Gemini u dołu obszaru roboczego.

    Uwaga: Aplikacje utworzone za pomocą App Prototyping agent domyślnie korzystają z czatu Prototyper w widoku Code. Aby zamiast tego użyć interaktywnego czatu Gemini, w sekcji Gemini kliknij +, a następnie wybierz Nowy czat. To return to Prototyper chat, click Recent chats, and then choose Prototyper chat.

  • Uzyskaj dostęp do Firebase Local Emulator Suite, aby wyświetlić bazę danych i dane uwierzytelniające. Aby otworzyć emulator w obszarze roboczym:

    1. Kliknij 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 Portowi 4000 kliknij Otwórz w nowym oknie.

• Testowanie i mierzenie skuteczności funkcji opartych na generatywnej AI: możesz używać Genkit Developer UI do uruchamiania przepływów AI Genkit, testowania, debugowania, interakcji z różnymi modelami, ulepszania promptów i innych działań.

  Aby wczytać procesy Genkit w Genkit Developer UI 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 Genkit Developer UI. W nowym oknie otworzy się Genkit Developer UI z przepływami, promptami, wektorami dystrybucyjnymi i wyborem różnych dostępnych modeli.

  Więcej informacji o Genkit Developer UI znajdziesz w artykule Narzędzia dla programistów Genkit.

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

Gdy przetestujesz aplikację i uznasz, że działa prawidłowo w obszarze roboczym, możesz ją opublikować w internecie za pomocą Firebase App Hosting.

Ważne: Firebase App Hosting wymaga konta Cloud Billing. Gdy połączysz konto rozliczeniowe z projektem w Firebase, zostanie on automatycznie uaktualniony do abonamentu Blaze z płatnością według wykorzystania, a Gemini API i inne usługi Firebase i Google Cloud zostaną uaktualnione do wersji płatnej. Opłaty będą naliczane za korzystanie z usług płatnych, które przekraczają bezpłatny limit. Więcej informacji znajdziesz w artykułach Informacje o kosztach App Hosting, Ceny Firebase i Ceny interfejsu Gemini Developer API.

Gdy skonfigurujesz App Hosting, Firebase Studio utworzy dla Ciebie projekt w Firebase (jeśli nie został on jeszcze wygenerowany automatycznie przez wygenerowanie klucza Gemini API lub inne usługi backendu) i pomoże Ci połączyć konto Cloud Billing.

Aby opublikować aplikację:

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

   Ważne: jeśli nie wygenerujesz automatycznie klucza Gemini API ani nie poprosisz App Prototyping agent o utworzenie projektu w Firebase, Firebase Studio udostępni projekt w Firebase w Twoim imieniu, gdy klikniesz Opublikuj. Możesz uzyskać dostęp do projektu w Firebase, klikając jego nazwę u góry strony.

2. W kroku projekt w Firebase App Prototyping agent wyświetla projekt w Firebase powiązany z obszarem roboczym. Jeśli projekt w Firebase jeszcze nie istnieje, App Prototyping agent utworzy dla Ciebie 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. Otworzy się konsola Google Cloud, w której możesz utworzyć nowe konto samoobsługowe Cloud Billing. Po utworzeniu konta wróć do Firebase Studio i wybierz konto z listy Połącz z Cloud Billing.

4. Kliknij Dalej. Firebase Studio łączy konto rozliczeniowe z projektem powiązanym z Twoim obszarem roboczym, utworzonym podczas automatycznego generowania klucza Gemini API lub po kliknięciu Opublikuj.

   Ważne: Firebase App Hosting wymaga konta Cloud Billing. Gdy połączysz konto rozliczeniowe z projektem w Firebase, zostanie on automatycznie uaktualniony do abonamentu Blaze z płatnością według wykorzystania, a Gemini API i inne usługi Firebase i Google Cloud zostaną uaktualnione do wersji płatnej. Opłaty będą naliczane za korzystanie z usług płatnych, które przekraczają bezpłatny limit. Więcej informacji znajdziesz w artykułach Informacje o kosztach App Hosting, Ceny Firebase i Ceny interfejsu Gemini Developer API.

5. Kliknij Skonfiguruj usługi. App Prototyping agent rozpocznie udostępnianie usług Firebase.

6. Kliknij Opublikuj teraz. Firebase Studio konfiguruje usługi Firebase, a następnie uruchamia wdrażanie App Hosting. Może to potrwać do kilku minut. Więcej informacji o tym, co dzieje się za kulisami, znajdziesz w artykule o procesie kompilacji App Hosting.

   Wskazówka: jeśli nie chcesz publikować teraz, możesz kliknąć Opublikuj później.

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

Wskazówka: jeśli podczas publikowania wystąpią błędy, zapoznaj się z artykułem Po opublikowaniu aplikacji pojawił się błąd „Nie udało się opublikować aplikacji”, aby dowiedzieć się, jak znaleźć i naprawić błędy publikowania.

Więcej informacji o App Hosting znajdziesz w artykule Co to jest App Hosting i jak działa.

(Zalecane) Krok 4. Przetestuj opublikowaną aplikację

Po zakończeniu publikowania i wdrożeniu aplikacji w Firebase Cloud Firestore i Firebase Authentication będą gotowe do testowania w środowisku produkcyjnym.

Generowanie indeksów bazy danych Cloud Firestore

Gdy wdrażasz aplikację w Cloud Firestore, indeksy nie są generowane automatycznie. Oznacza to, że po opublikowaniu może być konieczne wygenerowanie indeksów dla zapytań.

Możesz zobaczyć te informacje w komunikatach o błędach lub w konsoli programisty przeglądarki.

Aby wygenerować indeksy po opublikowaniu:

1. Z opublikowanej aplikacji: w panelu Przegląd aplikacji (jeśli go nie widać, kliknij Opublikuj) znajdź i kliknij link Odwiedź aplikację.

   W podglądzie Firebase Studio: otwórz konsolę programisty w przeglądarce i znajdź komunikat o błędzie 200 wygenerowany przez Cloud Firestore.

2. Przetestuj wszystkie procesy w aplikacji. Może pojawić się błąd, np. „Błąd podczas wczytywania przepisów. Zapytanie wymaga indeksu. Możesz go utworzyć tutaj:" z linkiem do konsoli Firebase.

3. Kliknij link, aby przejść do konsoli Firebase, gdzie pojawi się zalecany indeks.

4. Aby zaakceptować zalecany indeks, kliknij Zapisz.

5. Wróć do aplikacji i załaduj ponownie stronę.

6. Kontynuuj testowanie wszystkich procesów w aplikacji, aby w razie potrzeby dodać indeksy.

Wskazówka: możesz poprosić Gemini o wygenerowanie indeksów, ale pamiętaj, aby dokładnie sprawdzić wyniki.

Więcej informacji znajdziesz w artykule Zarządzanie indeksami w Cloud Firestore.

Wyświetlanie danych Cloud Firestore i Firebase Authentication w konsoli Firebase

Po opublikowaniu aplikacji możesz wyświetlać w konsoli Firebase dane z niej w czasie rzeczywistym.

• Aby wyświetlić aktywną bazę danych Cloud Firestore, otwórz konsolę Firebase i w menu nawigacyjnym wybierz Kompilacja > Baza danych Firestore.

  Możesz tu sprawdzać przechowywane dane, wyświetlać i testować reguły zabezpieczeń oraz tworzyć indeksy. Więcej informacji znajdziesz na stronie Cloud Firestore.

• Aby wyświetlić dane Firebase Authentication, otwórz konsolę Firebase i w menu nawigacyjnym wybierz Build (Kompilacja) > Authentication (Uwierzytelnianie).

  Możesz tam sprawdzić konfigurację uwierzytelniania i użytkowników aplikacji. Więcej informacji znajdziesz na stronie Firebase Authentication.

Testowanie reguł Cloud Firestore w środowisku produkcyjnym

Po opublikowaniu aplikacji przetestuj ponownie reguły zabezpieczeń Cloud Firestore w środowisku produkcyjnym. Dzięki temu Twoje dane będą dostępne dla upoważnionych użytkowników i chronione przed nieuprawnionym dostępem.

Reguły możesz testować, korzystając ze wszystkich tych metod:

• Testowanie aplikacji: wejdź w interakcję z wdrożoną aplikacją, wykonując operacje, które wywołują różne wzorce dostępu do danych (odczyty, zapisy, usunięcia) dla różnych ról lub stanów użytkowników. Takie testy w rzeczywistych warunkach pomagają sprawdzić, czy reguły są prawidłowo egzekwowane w praktyce.

• Rules Playground: w przypadku kontroli ukierunkowanych użyj Rules Playground w konsoli Firebase. To narzędzie umożliwia symulowanie żądań (odczytu, zapisu, usunięcia) w bazie danych Cloud Firestore przy użyciu reguł produkcyjnych. Możesz określić stan uwierzytelniania użytkownika, ścieżkę do danych i typ operacji, aby sprawdzić, czy reguły zezwalają na dostęp lub go odmawiają zgodnie z oczekiwaniami.

  Uwaga: gdy wdrażasz reguły zabezpieczeń podczas procesu publikowania lub za pomocą interfejsu wiersza poleceń Firebase, reguły zdefiniowane w katalogu projektu zastępują wszystkie istniejące reguły w konsoli Firebase. Jeśli więc zdecydujesz się zdefiniować lub edytować reguły zabezpieczeń za pomocą konsoli Firebase, pamiętaj, aby zaktualizować również reguły zdefiniowane w katalogu projektu.

• Testy jednostkowe: aby przeprowadzić bardziej kompleksowe testy, możesz napisać testy jednostkowe reguł zabezpieczeń. Backend wersji testowej Firebase Studio oparty na Firebase Local Emulator Suite umożliwia lokalne uruchamianie tych testów i symulowanie zachowania reguł produkcyjnych. To skuteczny sposób na sprawdzenie złożonej logiki reguł i potwierdzenie, że obejmują one różne scenariusze. Po wdrożeniu sprawdź, czy testy jednostkowe z użyciem emulatora działają zgodnie z oczekiwaniami i obejmują wszystkie scenariusze.