Z tego przewodnika dowiesz się, jak używać App Prototyping agent do szybkiego tworzenia i publikowania aplikacji pełnostackowej z pomocą Gemini w Firebase. Za pomocą promptu w języku naturalnym wygenerujesz aplikację Next.js, która rozpoznaje produkty spożywcze na zdjęciu lub w obrazie z kamery w przeglądarce przesłanym przez zalogowanego użytkownika, a następnie generuje przepis zawierający rozpoznane składniki. Użytkownicy mogą następnie zapisać przepis w bazie danych z możliwością wyszukiwania.
Następnie dopracujesz i ulepszysz aplikację, a potem opublikujesz ją w Firebase App Hosting.
Inne technologie, z których będziesz korzystać w trakcie tego przewodnika, to:
- Firebase Studio obszar roboczy,
- projektu 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 Prototyp aplikacji z AI wpisz ten prompt, który utworzy aplikację z przepisami opartą na obrazach, korzystającą z kamery przeglądarki i generatywnej AI.
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.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.
Kliknij Prototypowanie za pomocą AI.
Agent do prototypowania aplikacji generuje projekt aplikacji na podstawie Twojego prompta, podając proponowaną nazwę aplikacji, wymagane funkcje i wskazówki dotyczące stylu.
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 doprecyzowujące i kontekst. Możesz też przesłać dodatkowe obrazy.
Kliknij Utwórz prototyp tej aplikacji.
Agent do prototypowania aplikacji rozpocznie kodowanie aplikacji.
- Ponieważ Twoja aplikacja korzysta z AI, wyświetli się prośba o dodanie lub wygenerowanie Gemini APIklucza. Jeśli klikniesz Automatyczne generowanie, App Prototyping agent utworzy dla Ciebie projekt Firebase i klucz Gemini API.
Krok 2. Testowanie, ulepszanie, debugowanie i powtarzanie
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.
Dodaj Cloud Firestore i Firebase Authentication: w fazie iteracji możesz poprosić App Prototyping agent o dodanie uwierzytelniania użytkownika i bazy danych przy użyciu Cloud Firestore i Firebase Authentication. Na przykład możesz umożliwić użytkownikom zapisywanie i pobieranie przepisów, wyświetlając im taki prompt:
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.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 inicjowania 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 view, you can also use the following features:
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 chcesz zmienić w App Prototyping agent.Kliknij
Wybierz, aby wybrać konkretny element i wpisać instrukcje dla App Prototyping agent. Umożliwia to szybkie kierowanie 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ąć
Udostępnij link do podglądu, aby tymczasowo udostępnić aplikację publicznie za pomocą Firebase Studio publicznych wersji podglądowych.Utwórz projekt Firebase: agent do prototypowania aplikacji w Twoim imieniu udostępnia projekt Firebase, gdy:
- Automatyczne generowanie klucza interfejsu Gemini API
- Prośba o połączenie aplikacji z projektem 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 Firebase połączony z obszarem roboczym, wpisz w prompcie App Prototyping agent identyfikator projektu, którego chcesz użyć. Na przykład „Przełącz na projekt Firebase o identyfikatorze
<your-project-id>”.Przetestuj aplikację i sprawdź reguły bazy danych: w panelu podglądu aplikacji prześlij obraz przedstawiający różne produkty spożywcze, aby sprawdzić, czy aplikacja potrafi zidentyfikować składniki oraz wygenerować i zapisać przepisy.Cloud Firestore
Zaloguj się jako różni użytkownicy i wygeneruj przepisy: sprawdź, czy 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, usługa utworzy i wdroży za Ciebie reguły bazy danych Cloud Firestore. Sprawdź reguły w Firebasekonsoli.
Debugowanie i iterowanie bezpośrednio w kodzie: kliknij
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 za pomocą Geminiwbudowanych funkcji w kodzie lub Geminiinteraktywnego czatuGemini (obie opcje są dostępne domyślnie). Interaktywny czat może diagnozować problemy, podawać rozwiązania i uruchamiać narzędzia, które pomagają 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:
Kliknij
Przełącz na kod i otwórz rozszerzenie Firebase Studio (Ctrl+',Ctrl+'lubCmd+',Cmd+'w systemie macOS).Przewiń do sekcji Porty backendu i rozwiń ją.
W kolumnie Działania odpowiadającej pozycji Port 4000 kliknij Otwórz w nowym oknie.
Testowanie i mierzenie wydajności funkcji generatywnej AI: możesz używać interfejsu programisty Genkit do uruchamiania przepływów AI Genkit, testowania, debugowania, interakcji z różnymi modelami, dopracowywania promptów i wykonywania innych działań.
Aby wczytać przepływy Genkit w interfejsie programisty Genkit i rozpocząć testowanie:
W terminalu w obszarze roboczym Firebase Studio uruchom to polecenie, aby pobrać klucz Gemini API i uruchomić serwer Genkit:
npm run genkit:watchKliknij 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.
(Opcjonalnie) Krok 3. Opublikuj aplikację za pomocą App Hosting
Po przetestowaniu aplikacji i uznaniu, że działa prawidłowo w obszarze roboczym, 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ł on jeszcze utworzony przez automatyczne wygenerowanie klucza Gemini API lub inne usługi backendu) i przeprowadzi Cię przez proces łączenia konta Cloud Billing.
Aby opublikować aplikację:
Kliknij Opublikuj, aby skonfigurować projekt Firebase i opublikować aplikację. Pojawi się panel Opublikuj aplikację.
W kroku Projekt Firebase ikona App Prototyping agent wyświetla projekt Firebase powiązany z obszarem roboczym. Jeśli projekt Firebase jeszcze nie istnieje, App Prototyping agent utworzy dla Ciebie nowy projekt. Aby kontynuować, kliknij Dalej.
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.
Kliknij Dalej. Firebase Studio łączy konto rozliczeniowe z projektem powiązanym z Twoją przestrzenią roboczą, utworzonym automatycznie podczas generowania klucza Gemini API lub po kliknięciu Opublikuj.
Kliknij Skonfiguruj usługi. Agent do prototypowania aplikacji rozpoczyna udostępnianie usług Firebase.
Kliknij Opublikuj teraz. Firebase Studio konfiguruje usługi Firebase, a następnie uruchamia wdrażanie App Hosting. Może to potrwać kilka minut. Więcej informacji o tym, co dzieje się w tle, znajdziesz w artykule Proces kompilacji App Hosting.
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 Wyjaśnienie, czym 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.
Wyświetlanie danych Cloud Firestore i Firebase Authentication w konsoli Firebase
Po opublikowaniu aplikacji możesz wyświetlać dane na żywo w Firebase konsoli.
Aby wyświetlić bazę danych Cloud Firestore na żywo, otwórz Firebase konsolę i w menu nawigacyjnym wybierz Tworzenie > 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 na żywo Firebase Authentication, otwórz Firebasekonsolę 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 ponownie przetestuj Cloud Firestorereguły zabezpieczeń w środowisku produkcyjnym. Dzięki temu Twoje dane są dostępne dla upoważnionych użytkowników i chronione przed nieuprawnionym dostępem.
Reguły możesz testować za pomocą tych metod:
Testowanie aplikacji: korzystaj z wdrożonej aplikacji, wykonując operacje, które wywołują różne wzorce dostępu do danych (odczytywanie, zapisywanie, usuwanie) dla różnych ról lub stanów użytkowników. Testy w rzeczywistych warunkach pomagają potwierdzić, że reguły są prawidłowo egzekwowane w praktyce.
Środowisko do testowania reguł: w przypadku ukierunkowanych kontroli używaj środowiska do testowania reguł w Firebase konsoli. To narzędzie umożliwia symulowanie żądań (odczytu, zapisu, usuwania) w Cloud Firestore bazie danych przy użyciu reguł produkcyjnych. Możesz określić stan uwierzytelniania użytkownika, ścieżkę do danych i rodzaj operacji, aby sprawdzić, czy reguły zezwalają na dostęp lub go odmawiają zgodnie z oczekiwaniami.
Testowanie jednostkowe: aby przeprowadzić bardziej kompleksowe testy, możesz napisać testy jednostkowe dla reguł bezpieczeństwa. Firebase Studio Podgląd backendu obsługiwany przez Firebase Local Emulator Suite umożliwia lokalne przeprowadzanie tych testów, symulując działanie reguł produkcyjnych. To skuteczny sposób weryfikowania złożonej logiki reguł i potwierdzania zakresu różnych scenariuszy. Po wdrożeniu sprawdź, czy testy jednostkowe z użyciem emulatora działają zgodnie z oczekiwaniami i obejmują wszystkie scenariusze.