Pierwsze kroki z prototypowaniem aplikacji

Firebase Studio zawiera interfejs internetowy, który umożliwia szybkie prototypowanie i generowanie aplikacji internetowych z wykorzystaniem AI za pomocą promptów multimodalnych, w tym języka naturalnego, obrazów i narzędzi do rysowania. Agent obsługuje aplikacje Next.js, a w przyszłości planujemy dodać obsługę innych platform i ramek.

Agent prototypowania aplikacji to usprawniony proces programowania bez kodowania, który wykorzystuje generatywną AI do tworzenia, testowania, ulepszania i publikowania pełnego zestawu aplikacji internetowej z użyciem agenta. Opisujesz pomysł na aplikację w języku naturalnym z opcjonalnym obrazem, a agent generuje szablon aplikacji, kod i podgląd w przeglądarce. Aby ułatwić Ci tworzenie i publikowanie aplikacji o pełnym pakiecie usług, Firebase Studio może automatycznie udostępniać te usługi:

  • Jeśli Twoja aplikacja korzysta z AI: Firebase Studio dodaje do aplikacji interfejs API dla deweloperów Gemini, korzystając z potencjału przepływów Genkit do współpracy z Gemini. Możesz użyć własnego klucza Gemini API lub pozwolić, aby Firebase Studio udostępnił Ci projekt Firebase i klucz Gemini API.
  • Jeśli chcesz opublikować aplikację w internecie: Firebase Studio tworzy projekt i zapewnia szybki sposób na opublikowanie aplikacji za pomocą Firebase App Hosting.

Możesz ulepszać aplikację, korzystając z języka naturalnego, obrazów i narzędzi do rysowania, edytować kod bezpośrednio, cofać zmiany, publikować aplikację i monitorować jej skuteczność – wszystko to w Firebase Studio.

Rozpocznij

Aby rozpocząć korzystanie z App Prototyping agent:

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

  2. W polu Prototyp aplikacji z AI opisz pomysł na aplikację w języku naturalnym.

    Opcjonalnie możesz dodać obraz do promptu. Może to być diagram przedstawiający idealny przepływ użytkowników w aplikacji lub schemat kolorów, którego chcesz używać.Firebase Studio Obrazy mogą mieć maksymalnie 3 MiB.

  3. Kliknij Prototyp z AI.

    Agent prototypowania aplikacji zwraca szablon aplikacji, który zawiera proponowaną nazwę aplikacji, główne funkcje i wytyczne dotyczące stylu.

  4. Sprawdź plan. Możesz poprosić Gemini o ulepszenia i zmiany oraz edytować bezpośrednio szablon:

    • 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. Po zatwierdzeniu szablonu kliknij Prototyp tej aplikacji.

    Gemini generuje kod na podstawie szablonu i zwraca podgląd internetowy do sprawdzenia.

  6. Jeśli Twoja aplikacja korzysta z AI, pojawi się prośba o dodanie lub wygenerowanie klucza Gemini API. Jeśli klikniesz Generuj automatycznie,Firebase Studio usługa zarezerwuje za Ciebie projekt Firebase i klucz Gemini API.

Po utworzeniu pierwszej aplikacji możesz:

  • 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ę. Więcej informacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

  • Testowanie i ulepszanie za pomocą języka naturalnego: dokładnie przetestuj aplikację i użyj App Prototyping agent, aby ulepszać kod i schemat, aż będą Ci odpowiadać.

    Gdy przebywasz w Prototyper mode, you can also use the following helpful features:

    • Kliknij Ikona adnotacji Adnotuj, aby rysować bezpośrednio w oknie Podgląd. Użyj dostępnych narzędzi do tworzenia kształtów, obrazów i tekstu oraz opcjonalnego promptu tekstowego, aby wizualnie opisać, co chcesz zmienić w przypadku App Prototyping agent.

    • Kliknij Wybierz ikonę Wybierz, aby wybrać konkretny element i wprowadzić instrukcje dotyczące App Prototyping agent. Dzięki temu możesz szybko ustawić kierowanie na konkretną ikonę, przycisk, fragment tekstu lub inny element.

  • Debugowanie i iterowanie bezpośrednio w kodzie: kliknij Przełącznik kodu ikona 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 Studio wbudowane funkcje debugowania i raportowania do sprawdzania, debugowania i kontrolowania aplikacji.

    • Pomoc AI w Gemini w Firebase: bezpośrednio w kodzie lub za pomocą interaktywnego czatu (oba są dostępne domyślnie). Interaktywny czat umożliwia diagnozowanie problemów, dostarczanie rozwiązań i uruchamianie narzędzi, które pomogą Ci szybciej naprawić aplikację. Aby uzyskać dostęp do czatu, u dołu obszaru roboczego kliknij sparkGemini.

  • Opublikuj aplikację za pomocą Firebase App Hosting: kliknij Opublikuj, aby opublikować aplikację w App Hosting.

  • Monitorowanie i optymalizowanie aplikacji oraz funkcji AI: możesz sprawdzać wydajność i używanie aplikacji internetowej za pomocą funkcji obserwowalności w App Hosting, a także wykorzystywać metryki śledzenia w Firebase do optymalizacji przepływów generatywnej AI (Genkit). Więcej informacji znajdziesz w artykule Monitorowanie aplikacji internetowych.

.

Dalsze kroki