Pierwsze kroki z agentem prototypowania aplikacji

Firebase Studio zawiera interfejs internetowy, który umożliwia szybkie prototypowanie i generowanie aplikacji internetowych wykorzystujących 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 ram.

Agent do prototypowania aplikacji to usprawniony proces tworzenia aplikacji bez kodu, który wykorzystuje generatywną AI do tworzenia, testowania, iterowania i publikowania pełnego zestawu aplikacji internetowych z użyciem agenta. Opisujesz pomysł na aplikację w języku naturalnym z opcjonalnym obrazem, a agent generuje schemat aplikacji, kod i podgląd w internecie. 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ę za pomocą 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 Prototypowanie aplikacji z wykorzystaniem 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 ulepszanie 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:

  • Testowanie i ulepszanie: dokładnie przetestuj aplikację i użyj App Prototyping agent, aby ulepszać kod i schemat, aż będą Ci odpowiadać. Możesz też kliknąć </>, aby przejść do widoku kodu i edytować kod w obszarze roboczym Firebase Studio.

  • 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.

  • Debugowanie aplikacji: kliknij Ikona przełącznika kodu Przełącz na kod, aby otworzyć widok Code, w którym możesz używać wbudowanych funkcji debugowania i raportowania w Firebase Studio do sprawdzania, debugowania i kontrolowania aplikacji. Wróć do Prototyper mode at any time.

    .

  • 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 oraz przepływy generatywnej AI za pomocą telemetrii Firebase w Genkit. Więcej informacji znajdziesz w artykule Monitorowanie aplikacji internetowych.

.

Dalsze kroki