Z tego przewodnika dowiesz się, jak za pomocą App Prototyping agent szybko opracować i opublikować aplikację pełnoekranową z pomocą Gemini. Użyjesz promptu w języku naturalnym, aby wygenerować aplikację Next.js, która identyfikuje produkty spożywcze na podstawie zdjęcia lub obrazu z aparatu w przeglądarce udostępnionego przez zalogowanego użytkownika, a następnie generuje przepis zawierający zidentyfikowane składniki. Użytkownicy mogą następnie zapisać przepis w bazie danych z możliwością wyszukiwania.
Następnie udoskonalisz aplikację i opublikujesz ją w Firebase App Hosting.
Inne technologie, z których będziesz korzystać podczas pracy z tym przewodnikiem, to:
- obszar roboczy Firebase Studio
- projekt Firebase,
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
Krok 1. Wygeneruj aplikację
Zaloguj się na konto Google i otwórz Firebase Studio.
W polu Prototype an app with AI (Prototypuj aplikację za pomocą AI) wpisz ten prompt, który utworzy aplikację z przepisami na podstawie obrazów korzystającą z aparatu w przeglądarce i generatywnej AI.
Aby utworzyć aplikację do generowania przepisów, możesz na przykład wpisać 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.Opcjonalnie prześlij obraz, który ma 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ą mieć rozmiar mniejszy niż 3 MiB.
Kliknij Prototype with AI (Prototypuj za pomocą AI).
App Prototyping agent generuje projekt aplikacji na podstawie prompta, podając proponowaną nazwę aplikacji, wymagane funkcje, i wytyczne dotyczące stylu.
Sprawdź projekt. 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 projekt. Wprowadź zmiany i kliknij Zapisz.
W polu Describe... (Opisz...) w panelu czatu dodaj pytania wyjaśniające i kontekst. Możesz też przesłać dodatkowe obrazy.
Kliknij Prototype this app (Prototypuj tę aplikację).
App Prototyping agent zaczyna kodować aplikację.
- Ponieważ Twoja aplikacja korzysta z AI, pojawi się prośba o dodanie lub wygenerowanie Gemini API klucza. Jeśli klikniesz Auto-generate (Wygeneruj automatycznie), App Prototyping agent utworzy dla Ciebie projekt w Firebase i klucz Gemini API.
Krok 2. Testuj, udoskonalaj, debuguj i iteruj
Po wygenerowaniu początkowej wersji aplikacji możesz ją testować, udoskonalać, debugować i iterować.
Sprawdzanie aplikacji i interakcja z nią: po zakończeniu generowania kodu pojawi się podgląd aplikacji. Możesz bezpośrednio korzystać z podglądu, aby przetestować aplikację. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.
Dodawanie Cloud Firestore i Firebase Authentication: w fazie iteracji możesz poprosić App Prototyping agent o dodanie uwierzytelniania użytkownika i bazy danych za pomocą Cloud Firestore i Firebase Authentication. Możesz na przykład umożliwić użytkownikom zapisywanie i pobieranie przepisów za pomocą prompta takiego jak ten:
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.Naprawianie błędów na bieżąco: w większości przypadków App Prototyping agent wyświetla prośbę o naprawienie błędów. Kliknij Fix Error (Napraw błąd), aby umożliwić agentowi próbę naprawienia błędu.
Jeśli otrzymasz 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 go do Gemini.
Testowanie i iterowanie za pomocą języka naturalnego: dokładnie przetestuj aplikację i współpracuj z App Prototyping agent w celu iterowania kodu i projektu aż uzyskasz zadowalający efekt.
W widoku Prototyper możesz też korzystać z tych funkcji:
Kliknij
Annotate (Dodaj adnotację), aby rysować bezpośrednio w oknie podglądu. Użyj dostępnych
narzędzi do rysowania kształtów, dodawania obrazów i tekstu oraz opcjonalnego prompta tekstowego, aby
wizualnie opisać, co chcesz zmienić za pomocą App Prototyping agent.Kliknij
Select, 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. Gdy klikniesz obraz, możesz też
wyszukać i wybrać obraz stockowy z
Unsplash.
Opcjonalnie możesz kliknąć
Share preview link (Udostępnij link do podglądu), aby tymczasowo udostępnić aplikację publicznie za pomocą
Firebase Studio publicznych podglądów.Tworzenie projektu Firebase: App Prototyping agent tworzy w Twoim imieniu projekt Firebase, gdy:
- automatycznie wygenerujesz klucz interfejsu Gemini API;
- poprosisz o połączenie aplikacji z projektem w Firebase;
- poprosisz o pomoc w połączeniu aplikacji z usługami Firebase, takimi jak Cloud Firestore lub Firebase Authentication
- klikniesz przycisk Publish (Opublikuj) i skonfigurujesz Firebase App Hosting.
Aby zmienić projekt w Firebase połączony z obszarem roboczym, poproś App Prototyping agent o identyfikator projektu, którego chcesz użyć. Na przykład: „Switch to Firebase project with ID
<your-project-id>” (Przełącz na projekt w Firebase o identyfikatorze<your-project-id>).Testowanie aplikacji i sprawdzanie reguł bazy danych Cloud Firestore: w panelu podglądu aplikacji prześlij obraz przedstawiający różne produkty spożywcze, aby przetestować możliwość identyfikowania składników przez aplikację oraz generowania i zapisywania przepisów.
Zaloguj się jako różni użytkownicy i wygeneruj przepisy: upewnij się, że uwierzytelnieni użytkownicy widzą swoje prywatne przepisy i przepisy, a wszyscy użytkownicy widzą przepisy publiczne.
Gdy poprosisz App Prototyping agent o dodanie Cloud Firestore, agent napisze i wdroży reguły bazy danych Cloud Firestore. Sprawdź reguły w Firebase konsoli.
Debugowanie i iterowanie bezpośrednio w kodzie: kliknij
Switch to Code (Przełącz na kod), aby otworzyć widok kodu, w którym możesz zobaczyć
wszystkie pliki aplikacji i bezpośrednio modyfikować kod.Code W każdej chwili możesz wrócić
do trybu Prototyper.W widoku Code możesz też korzystać z tych przydatnych funkcji:
Firebase Studio's wbudowane funkcje debugowania i raportowania do sprawdzania, debugowania i audytowania aplikacji.
Pomoc AI za pomocą Gemini bezpośrednio w kodzie lub za pomocą Gemini interaktywnego czatu (obie opcje są domyślnie dostępne). Interaktywny czat może diagnozować problemy, podawać rozwiązania i uruchamiać narzędzia, które pomagają szybciej naprawić aplikację. Aby otworzyć czat, u dołu obszaru roboczego kliknij sparkGemini.
Uzyskaj dostęp do Firebase Local Emulator Suite, aby wyświetlić dane bazy danych i uwierzytelniania. Aby otworzyć emulator w obszarze roboczym:
Kliknij
Switch to Code (Przełącz na kod) i otwórz rozszerzenie Firebase Studio
(Ctrl+',Ctrl+'lubCmd+',Cmd+'w systemie macOS).Przewiń do sekcji Backend ports (Porty backendu) i rozwiń ją.
W kolumnie Actions (Działania) odpowiadającej Port 4000 kliknij Open in new window (Otwórz w nowym oknie).
Testowanie i mierzenie skuteczności funkcji generatywnej AI: możesz użyć Genkit Developer UI do uruchamiania przepływów AI Genkit, testowania, debugowania, wchodzenia w interakcje z różnymi modelami, udoskonalania promptów i wykonywania innych czynności.
Aby wczytać przepływy Genkit w Genkit Developer UI i rozpocząć testowanie:
W terminalu w obszale roboczym Firebase Studio uruchom to polecenie, aby pobrać klucz Gemini API i uruchomić Genkit serwer:
npm run genkit:watchKliknij link Genkit Developer UI. Genkit Developer UI otworzy się w nowym oknie z przepływami, promptami, osadzaczami i wyborem różnych dostępnych modeli.
Więcej informacji o Genkit Developer UI znajdziesz w artykule Genkit Developer Tools.
(Opcjonalnie) Krok 3. Opublikuj aplikację za pomocą App Hosting
Gdy przetestujesz aplikację i uznasz, że jest w porządku, możesz ją opublikować w internecie za pomocą Firebase App Hosting.
Gdy skonfigurujesz App Hosting, Firebase Studio utworzy dla Ciebie projekt w Firebase (jeśli nie został on jeszcze utworzony przez automatyczne wygenerowanie klucza Gemini API lub innych usług backendu) i przeprowadzi Cię przez proces łączenia konta Cloud Billing.
Aby opublikować aplikację:
Kliknij Publish (Opublikuj), aby skonfigurować projekt w Firebase i opublikować aplikację. Wyświetli się panel Publish your app (Opublikuj aplikację).
W kroku projekt w Firebase agent do prototypowania aplikacji wyświetli projekt w Firebase powiązany z obszarem roboczym.App Prototyping agent Jeśli projekt w Firebase jeszcze nie istnieje, App Prototyping agent utworzy nowy projekt dla Ciebie. Aby kontynuować, kliknij Next (Dalej).
W kroku Link Cloud Billing account (Połącz konto) wykonaj jedną z tych czynności:
Wybierz konto Cloud Billing, które chcesz połączyć z projektem Firebase.
Jeśli nie masz konta Cloud Billing lub chcesz utworzyć nowe, kliknij Create a Cloud Billing account (Utwórz konto Cloud Billing). Otworzy się konsola Google Cloud, w której możesz utworzyć nowe konto z samodzielną obsługą Cloud Billing. Po utworzeniu konta wróć do Firebase Studio i wybierz je z listy Link Cloud Billing.
Kliknij Next (Dalej). Firebase Studio połączy konto rozliczeniowe z projektem powiązanym z Twoim obszarem roboczym, który został utworzony, gdy automatycznie wygenerowano Gemini API klucz lub gdy kliknięto Publish (Opublikuj).
Kliknij Set up services (Skonfiguruj usługi). App Prototyping agent zacznie udostępniać usługi Firebase.
Kliknij Publish now (Opublikuj teraz). Firebase Studio konfiguruje usługi Firebase a następnie uruchamia wdrażanie App Hosting. Może to potrwać kilka minut. Aby dowiedzieć się więcej o tym, co dzieje się za kulisami, zobacz Proces kompilacjiApp Hosting.
Po zakończeniu publikowania pojawi się App overview (Omówienie aplikacji) z adresem URL i statystykami aplikacji opartymi na dostrzegalności 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.
(Zalecane) Krok 4. Przetestuj opublikowaną aplikację
Gdy publikowanie się zakończy i aplikacja zostanie wdrożona w Firebase, Cloud Firestore i Firebase Authentication będą gotowe do testowania w środowisku produkcyjnym.
Generowanie indeksów dla bazy danych Cloud Firestore
Gdy wdrożysz aplikację w Cloud Firestore, indeksy nie są generowane automatycznie. Oznacza to, że po opublikowaniu aplikacji może być konieczne wygenerowanie indeksów dla zapytań.
Może to być widoczne w komunikatach o błędach lub w konsoli programisty przeglądarki .
Aby wygenerować indeksy po opublikowaniu:
W opublikowanej aplikacji: w panelu App overview (Omówienie aplikacji) (jeśli nie jest widoczny, kliknij Publish (Opublikuj)) znajdź i kliknij link Visit your app (Otwórz aplikację).
Z podglądu Firebase Studio: Otwórz konsolę programisty przeglądarki i znajdź komunikat o błędzie 200 wygenerowany przez Cloud Firestore.
Przetestuj wszystkie przepływy w aplikacji. Może się pojawić błąd z komunikatem podobnym do tego: „Error loading recipes. The query requires an index. You can create it here:" with a link to the Firebase console.
Zapytanie wymaga indeksu.Firebase
Kliknij Zapisz, aby zaakceptować zalecany indeks.
Kliknij link, aby przejść do konsoli Firebase. Wyświetli się zalecany indeks.
Aby zaakceptować zalecany indeks, kliknij **Save** (Zapisz).
Kontynuuj testowanie wszystkich przepływów w aplikacji, aby w razie potrzeby dodać indeksy.Cloud Firestore
Wyświetl dane Cloud Firestore i Firebase Authentication w konsoli Firebase
Dane na żywo z aplikacji możesz wyświetlić w konsoli Firebase po opublikowaniu.
Aby wyświetlić bazę danych Cloud Firestore, otwórz konsolę Firebase i wybierz Build > Firestore Database z menu nawigacyjnego.
Po opublikowaniu aplikacji możesz wyświetlać w konsoli Firebase dane na żywo. Aby wyświetlić bazę danych Cloud Firestore na żywo, otwórz konsolę Firebase i w menu nawigacyjnym wybierz **Build** (Tworzenie) > **Firestore Database** (Baza danych Firestore). Cloud Firestore.
Aby wyświetlić dane Firebase Authentication na żywo, otwórz konsolę Firebase i wybierz Build > Authentication z menu nawigacyjnego.
Więcej informacji znajdziesz w artykule Cloud Firestore. Aby wyświetlić dane Firebase Authentication na żywo, otwórz konsolę Firebase i w menu nawigacyjnym wybierz **Build** (Tworzenie) > **Authentication** (Uwierzytelnianie).
Możesz tam sprawdzić konfigurację uwierzytelniania i użytkowników aplikacji.
Więcej informacji znajdziesz w artykule Firebase Authentication.Cloud Firestore Testowanie reguł Cloud Firestore w środowisku produkcyjnym
Po opublikowaniu aplikacji ponownie przetestuj reguły zabezpieczeń Cloud Firestore w środowisku produkcyjnym.
Testowanie aplikacji: wchodź w interakcję z wdrożoną aplikacją, wykonując operacje wyzwalające różne wzorce dostępu do danych (odczyty, zapisy, usuwanie) dla różnych ról lub stanów użytkowników. Reguły możesz testować na te sposoby:
Testowanie reguł: Aby przeprowadzić ukierunkowane testy, użyj Testowania reguł w konsoli Firebase. To narzędzie umożliwia symulowanie żądań (odczytów, zapisów, usunięć) w stosunku do Twojej Cloud Firestore bazy danych przy użyciu reguł produkcyjnych. Możesz określić stan uwierzytelnienia użytkownika , ścieżkę do danych i typ operacji , aby sprawdzić, czy reguły zezwalają na dostęp, czy go odmawiają.
Testy jednostkowe: Aby przeprowadzić bardziej kompleksowe testy, możesz napisać testy jednostkowe dla swoich reguł zabezpieczeń rules. Podgląd zaplecza Firebase Studio obsługiwany przez Firebase Local Emulator Suite umożliwia lokalne uruchamianie tych testów, symulując działanie reguł produkcyjnych. **Testy jednostkowe:** aby przeprowadzić bardziej kompleksowe testy, możesz napisać testy jednostkowe dla reguł zabezpieczeń. To solidny sposób na weryfikację złożonej logiki reguł i potwierdzenie pokrycia dla różnych scenariuszy. Backend podglądu Firebase Studio oparty na pakiecie Firebase Local Emulator Suite umożliwia przeprowadzanie tych testów lokalnie, symulując działanie reguł produkcyjnych.