Pierwsze kroki z Firebase Studio

1. Przegląd

W tym module dowiesz się, jak używać agenta do prototypowania aplikacji w Firebase Studio, aby utworzyć aplikację, która pomoże Ci nauczyć się nowego języka. Następnie możesz dopracować i ulepszyć aplikację, a potem opcjonalnie opublikować ją w Firebase App Hosting.

Czego się nauczysz

• Sprawdzone metody tworzenia promptów w Firebase Studio
• Ulepszanie aplikacji przez dodawanie funkcji i poprawianie błędów
• Publikowanie aplikacji w Firebase App Hosting i udostępnianie jej innym osobom
• Śledzenie kluczowych danych w panelu Informacje o aplikacji w usłudze Hostowanie aplikacji

Czego potrzebujesz

• wybraną przeglądarkę, np. Google Chrome;
• konto Google do tworzenia projektu Firebase i zarządzania nim;

2. Generowanie aplikacji za pomocą agenta App Prototyping

Agent do prototypowania aplikacji korzysta z Gemini w Firebase, aby tworzyć aplikacje. Nawet jeśli użyjesz identycznych promptów, wynik może nie wyglądać ani nie działać dokładnie tak, jak w tym laboratorium. Jeśli utkniesz, udostępniliśmy zestaw plików, które możesz dodać do obszaru roboczego, aby kontynuować ćwiczenie w kilku punktach kontrolnych.

1. Zaloguj się na konto Google i otwórz Firebase Studio.
2. W polu Utwórz prototyp aplikacji z AI wpisz opis aplikacji, którą chcesz utworzyć. W tym module utworzysz aplikację, która pomoże Ci nauczyć się nowego języka za pomocą opowieści, fiszek i trenera AI. Wpisz prompt, np.:

   An app to help someone learn a new language. The app should include
   AI-generated stories in the target language, where users can click vocab
   words or the entire story to see it in English. A different section
   includes flashcards, where the user is shown a word in the chosen language
   and can click it to flip the card and see the word in English. The final
   section includes an AI chatbot that allows the user to have simple
   conversations in the chosen language or ask questions in English about
   what a word means or how to form a sentence in the chosen language. All
   content should be beginner-friendly, focusing on basic greetings, common
   questions/answers, and vocabulary relevant to the lessons or stories.
   To start, the app should teach the user French, although we might add
   additional languages in the future.
   

3. Kliknij Prototypowanie za pomocą AI.
4. Sprawdź proponowany plan aplikacji. Aby edytować plan, kliknij Dostosuj:
   1. Zmień nazwę aplikacji na Speak Easy.
   2. Zmień schemat kolorów na:

   Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
   Secondary color: Light parchment (#F5EBCD) to complement the primary color.
   Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
   

   Jeśli wolisz przesłać schemat kolorów lub układ jako obraz, kliknij opcję Załącznik, aby przesłać obraz podczas tworzenia prompta lub planu. Obrazy muszą być mniejsze niż 3 MiB.
5. Kliknij Zapisz.
6. Gdy plan uwzględni Twoje zmiany, kliknij Utwórz prototyp tej aplikacji.
7. Ponieważ ta aplikacja zawiera elementy AI, agent poprosi Cię o klucz Gemini. Dodaj własny klucz interfejsu Gemini API lub kliknij Wygeneruj automatycznie, aby wygenerować klucz interfejsu Gemini API. Jeśli klikniesz Wygeneruj automatycznie, Firebase Studio utworzy projekt Firebase i wygeneruje dla Ciebie klucz interfejsu Gemini API.
8. Agent do prototypowania aplikacji używa planu aplikacji do utworzenia pierwszej wersji aplikacji. Po zakończeniu tego procesu obok interfejsu czatu Gemini pojawi się podgląd aplikacji. Poświęć chwilę na przetestowanie aplikacji. Nawet jeśli nie wygląda ona dokładnie tak, jak sobie wyobrażasz, w następnej sekcji dowiesz się, jak dodać nowe funkcje i ulepszyć projekt.

3. (Opcjonalnie) Pobierz kod

Jeśli utkniesz lub chcesz dokładniej śledzić przykład aplikacji, użyj plików przykładowych udostępnionych w kilku punktach kontrolnych w trakcie szkolenia.

1. Pobierz pliki z folderu.
2. W Firebase Studio kliknij  Przełącz na kod, aby otworzyć widok kodu.
3. Przeciągnij pobrane pliki do okienka Eksplorator w Firebase Studio. Zezwól na zastąpienie istniejących plików.
4. Aby kontynuować codelab, korzystając z przykładowej wersji aplikacji, kliknij Przejdź do Prototypera.

4. Testowanie, ulepszanie i debugowanie funkcji aplikacji

Podczas podglądu aplikacji możesz zauważyć błędy lub nieoczekiwane działanie. W przykładowej wersji aplikacji wprowadzimy te zmiany i poprawki:

• W generatorze opowieści opartym na AI użytkownicy powinni mieć możliwość kliknięcia słów, aby uzyskać ich definicję w języku angielskim.
• Fiszki powinny być wyświetlane w języku francuskim, a po kliknięciu przełączać się na język angielski.
• Użytkownik powinien mieć możliwość przejścia na stronę ustawień i zamiast francuskiego wybrać japoński.

Cel 1. Dodaj słowa do generatora opowieści AI

Opcjonalnie: aby od tego momentu używać przykładowej wersji aplikacji, pobierz i przeciągnij te pliki do panelu Eksplorator w Firebase Studio w widoku kodu.

1. W interfejsie czatu opisz funkcję, którą chcesz dodać:

   In the AI Story Generator, users should be able to click vocab words or
   phrases to get the definition in English. Words or phrases should be
   underlined to indicate they can be clicked.
   

2. Przetestuj aplikację w oknie podglądu. Wygląd aplikacji zaktualizujesz później, więc na razie skup się tylko na jej funkcjonalności.
3. Jeśli aplikacja nie działa zgodnie z oczekiwaniami, poproś agenta do prototypowania aplikacji o wprowadzenie zmian. Przykład:

   IMPORTANT: Be sure to underline and provide a definition for most words
   and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
   story appears multiple times, only underline and define the first instance.
   

4. Kliknij Przełącz na kod, aby otworzyć widok kodu, w którym możesz zobaczyć wszystkie pliki aplikacji i bezpośrednio modyfikować kod. Jeśli wystąpi błąd, którego Gemini nie jest w stanie rozwiązać, czasami łatwiej jest ręcznie edytować plik. Gdy wszystko będzie gotowe, przejdź do trybu Prototyper, aby nadal korzystać z agenta do prototypowania aplikacji.

Cel 2. Dodaj tłumaczenia do kart

Opcjonalnie: aby od tego momentu używać przykładowej wersji aplikacji, pobierz i przeciągnij te pliki do panelu Eksplorator w Firebase Studio w widoku kodu.

Postępuj tak samo jak powyżej. Użyj interfejsu czatu, aby opisać funkcję, przetestować ją w oknie podglądu, a następnie użyj dodatkowych promptów lub widoku kodu, aby dodać tłumaczenia do kart. Wypróbuj prompta, np.:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Czasami agent do prototypowania aplikacji nie rozpoznaje, kiedy występuje błąd. Opisanie tego, co widzisz i co wymaga poprawy, może być bardziej skuteczne. Przykłady:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

Cel 3. Dodaj nowy język

Opcjonalnie: aby od tego momentu używać przykładowej wersji aplikacji, pobierz i przeciągnij te pliki do panelu Eksplorator w Firebase Studio w widoku kodu.

Wypróbuj prompta, np.:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

5. Ulepszanie projektu aplikacji

Opcjonalnie: aby od tego momentu używać przykładowej wersji aplikacji, pobierz i przeciągnij te pliki do panelu Eksplorator w Firebase Studio w widoku kodu.

Gdy aplikacja ma już wszystkie potrzebne funkcje, możesz popracować nad jej stylem.

Zmienianie schematu kolorów aplikacji

Możesz określić, jakich kolorów chcesz użyć, lub pozwolić agentowi App Prototyping na podjęcie decyzji. W interfejsie czatu możesz też kliknąć opcję Załącznik, aby przesłać obraz kolorów lub stylu, którego chcesz użyć. Jeśli wolisz użyć prompta, spróbuj:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Aktualizowanie tekstu używanego w aplikacji

Na przykład zamiast „AI Chatbot Tutor” możesz chcieć, aby mówił tylko „Czat”:

 Change the text "AI Chatbot Tutor" to "Chat".

dostosowywać interfejs aplikacji, aby był bardziej intuicyjny;

Na przykład zamiast wymagać od użytkownika naciśnięcia przycisku w celu przesłania tekstu, możesz zezwolić mu na naciśnięcie klawisza Return na klawiaturze:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Dodanie opcji wyboru trybu jasnego lub ciemnego

Wielu użytkowników może woleć możliwość wyboru jaśniejszego lub ciemniejszego motywu aplikacji. Zastanów się, gdzie logicznie byłoby umieścić przełącznik:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

Wskazówki dotyczące promptów i debugowania

• Uzyskaj pomoc dotyczącą promptów: jeśli masz problem z wyjaśnieniem agentowi do prototypowania aplikacji, czego oczekujesz, poproś Gemini w Google o pomoc w doprecyzowaniu promptu. Więcej informacji o skutecznym promptowaniu
• Testowanie na innych urządzeniach: w trybie prototypu kliknij  Udostępnij link do podglądu, aby przetestować aplikację na innych urządzeniach.
• Korzystaj z wbudowanych narzędzi: w widoku kodu używaj wbudowanych funkcji debugowania i raportowania Firebase Studio, aby sprawdzać, debugować i kontrolować aplikację.
• Zacznij od prostych rozwiązań: pracuj nad jedną funkcją naraz. Zacznij od podstawowego zestawu funkcji w prototypie, a potem rozszerz go, gdy będą działać zgodnie z oczekiwaniami.
• Opisz błędy: jeśli coś nie działa, opisz agentowi do prototypowania aplikacji obecne zachowanie, a następnie zachowanie, które chcesz uzyskać.
• W razie potrzeby cofnij zmiany: jeśli agent do prototypowania aplikacji źle zrozumie prompta lub wprowadzi trudny do rozwiązania problem, kliknij przycisk Przywróć, aby cofnąć zmiany i spróbować jeszcze raz z innym promptem.

6. (Opcjonalnie) Publikowanie aplikacji

Opcjonalnie: aby od tego momentu używać przykładowej wersji aplikacji, pobierz i przeciągnij te pliki do panelu Eksplorator w Firebase Studio w widoku kodu.

Gdy przetestujesz aplikację i uznasz, że jest w porządku, możesz opublikować ją w internecie za pomocą Hostingu aplikacji Firebase.

1. Kliknij Opublikuj, aby utworzyć nowy projekt Firebase i rozpocząć konfigurowanie hostingu aplikacji. Pojawi się panel Opublikuj aplikację.
2. W kroku Projekt Firebase zanotuj nazwę utworzonego projektu Firebase, a potem kliknij Dalej.
3. W kroku Połącz konto rozliczeniowe Cloud wybierz jedną z tych opcji:
   1. Wybierz konto rozliczeniowe Cloud, które chcesz połączyć z projektem Firebase.
   2. Jeśli nie masz konta rozliczeniowego w Google Cloud lub chcesz utworzyć nowe, kliknij Utwórz konto rozliczeniowe w Google Cloud. Otworzy się tekst Google Cloud, w którym możesz utworzyć nowe samoobsługowe konto rozliczeniowe Cloud. Po utworzeniu konta wróć do Firebase Studio i wybierz je z listy Połącz rozliczenia w Cloud.
4. Kliknij Dalej. Firebase Studio łączy konto rozliczeniowe z projektem powiązanym z Twoją przestrzenią roboczą, który został utworzony automatycznie po wygenerowaniu klucza interfejsu Gemini API lub po kliknięciu Opublikuj. Następnie usługa App Hosting skonfiguruje w Google Cloud w pełni zarządzane środowisko dla Twojej aplikacji.
5. Kliknij Utwórz pierwsze wdrożenie. Firebase Studio rozpoczyna wdrażanie App Hosting. Może to potrwać do 10 minut. Więcej informacji o tym, co dzieje się w tle, znajdziesz w artykule Proces kompilacji w App Hosting.
6. Po zakończeniu wdrażania pojawi się Omówienie aplikacji z adresem URL i statystykami aplikacji opartymi na funkcjach obserwacji hostingu aplikacji. Aby używać domeny niestandardowej (np. example.com lub app.example.com) zamiast domeny wygenerowanej przez Firebase, możesz dodać domenę niestandardową w tekście Firebase.

Więcej informacji o hostowaniu aplikacji znajdziesz w artykule Informacje o hostowaniu aplikacji i jego działaniu.

7. (Opcjonalnie) Monitorowanie aplikacji

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

• Aby opublikować nową wersję aplikacji, kliknij Utwórz wdrożenie.
• Udostępnij link do aplikacji lub otwórz ją bezpośrednio w sekcji Otwórz aplikację.
• Sprawdź podsumowanie skuteczności aplikacji z ostatnich 7 dni, w tym łączną liczbę żądań i stan najnowszego wdrożenia. Kliknij Wyświetl szczegóły, aby uzyskać więcej informacji w tekście Firebase.
• Wyświetl wykres liczby żądań odebranych przez 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 ponownie otworzyć, klikając Opublikuj.

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

8. Podsumowanie

Gratulacje! Udało Ci się utworzyć aplikację za pomocą Firebase Studio. Do aplikacji możesz dodać wiele innych funkcji, takich jak rozbudowany słownik, więcej języków, dźwięk, animacje czy wybór poziomu trudności. Możesz dalej korzystać z aplikacji lub utworzyć coś nowego.

Więcej informacji:

• Tworzenie, publikowanie i monitorowanie aplikacji internetowej full stack za pomocą agenta do prototypowania aplikacji
• Rozpocznij tworzenie prototypu nowej aplikacji za pomocą Firebase Studio
• Więcej informacji o obszarach roboczych w Firebase Studio