Tworzenie aplikacji w Google AI Studio

Na tej stronie opisujemy, jak używać Google AI Studio do szybkiego tworzenia (lub „vibe codingu”) i wdrażania aplikacji, które testują najnowsze możliwości Gemini, takie jak Nano Banana i Live API. Google AI Studio obsługuje teraz środowiska wykonawcze full stack, co pozwala tworzyć niezawodne aplikacje z logiką po stronie serwera, bezpiecznym zarządzaniem obiektami tajnymi i obsługą pakietów npm – wszystko to za pomocą promptów w języku naturalnym.

Rozpocznij

Zacznij vibe coding w trybie tworzenia w Google AI Studio. Możesz zacząć tworzyć na kilka sposobów:

  • Zacznij od prompta: w trybie tworzenia użyj okna do wprowadzania danych, aby wpisać opis tego, co chcesz utworzyć. Wybierz AI Chips, aby dodać do prompta określone funkcje, takie jak generowanie obrazów lub dane Map Google. Możesz też powiedzieć, co chcesz zrobić, za pomocą przycisku zamiany mowy na tekst.
  • Przycisk „Szczęśliwy traf”: jeśli potrzebujesz inspiracji, użyj przycisku „Szczęśliwy traf”, a Gemini wygeneruje prompt z pomysłem na projekt który pomoże Ci zacząć.
  • Remiksowanie projektu z galerii: otwórz projekt z Galerii aplikacji i kliknij Kopiuj aplikację.

Po uruchomieniu prompta zobaczysz, że generowane są niezbędne pliki i kod, a po prawej stronie pojawi się podgląd aplikacji na żywo.

Co jest tworzone?

Gdy uruchomisz prompta, AI Studio utworzy kompletną aplikację. Domyślnie tworzy środowisko full stack, które może obejmować:

  • Po stronie klienta: frontend internetowy (domyślnie React).
  • Po stronie serwera: środowisko wykonawcze Node.js, które umożliwia bezpieczne wywoływanie interfejsu API, połączenia z bazą danych i używanie pakietów npm.

Kod, który jest generowany, możesz wyświetlić, klikając kartę Kod w panelu podglądu po prawej stronie. Antigravity Agent inteligentnie zarządza wieloma plikami w całym stosie, zapewniając prawidłowe propagowanie zmian.

Antigravity Agent

Antigravity Agent to główna funkcja AI w Google Antigravity, a teraz podstawowe komponenty agenta obsługują tryb tworzenia w Google AI Studio. Wykracza on poza proste generowanie kodu, ponieważ utrzymuje kontekst całego projektu, zarządza wieloma plikami i rozumie złożone instrukcje, aby tworzyć niezawodne aplikacje full stack.

Najważniejsze funkcje:

  • Świadomość kontekstu: utrzymuje kontekst poprzednich promptów i stanów plików.
  • Zarządzanie wieloma plikami: obsługuje zależności w wielu plikach.
  • Zweryfikowane wykonanie: weryfikuje aktualizacje kodu, aby ograniczyć halucynacje.

Możliwości full stack

Google AI Studio odblokowuje możliwości nowoczesnego ekosystemu internetowego, dzięki czemu możesz tworzyć nie tylko prototypy po stronie klienta.

  • Środowisko wykonawcze po stronie serwera i npm: korzystaj z obszernej biblioteki pakietów npm. Agent automatycznie identyfikuje i instaluje pakiety potrzebne do działania aplikacji (np. określone biblioteki do wizualizacji danych lub klientów API). W razie potrzeby możesz też poprosić o konkretne pakiety.
  • Zarządzanie obiektami tajnymi: bezpiecznie przechowuj klucze interfejsu API i obiekty tajne w menu Ustawienia. Są one dostępne w kodzie po stronie serwera, co chroni je przed ujawnieniem po stronie klienta.
  • Wieloosobowa rozgrywka: twórz środowiska współpracy w czasie rzeczywistym bezpośrednio w AI Studio. Środowisko wykonawcze po stronie serwera zarządza stanem i połączeniami wymaganymi do interakcji użytkowników.
  • Integracja z Firebase: automatycznie udostępniaj i konfiguruj Firebase, w tym bazę danych Firestore (trwałe przechowywanie danych) i Uwierzytelnianie Firebase (procesy logowania, w szczególności "Zaloguj się przez Google"). Agent obsługuje cały proces konfiguracji, a nawet pisze kod w aplikacji dla tych usług.

Więcej informacji o tworzeniu aplikacji full stack

Kontynuuj tworzenie

Gdy Google AI Studio wygeneruje początkowy kod aplikacji, możesz go dalej ulepszać:

Tworzenie w Google AI Studio

  • Iteracja z Gemini: użyj panelu czatu w trybie tworzenia, aby zapytaj Gemini o wprowadzenie zmian, dodanie nowych funkcji lub zmianę stylu.
  • Bezpośrednia edycja kodu: otwórz kartę Kod w panelu podglądu, aby wprowadzać zmiany na żywo.

Tworzenie na zewnątrz

W przypadku bardziej zaawansowanych procesów możesz wyeksportować kod i pracować w preferowanym środowisku:

  • Pobieranie i tworzenie lokalne: wyeksportuj wygenerowany kod jako plik ZIP i zaimportuj go do edytora kodu.
  • Przesyłanie do GitHuba: zintegruj kod z dotychczasowymi procesami tworzenia i wdrażania, przesyłając go do repozytorium GitHub.

Najważniejsze funkcje

Google AI Studio zawiera kilka funkcji, które sprawiają, że proces tworzenia jest intuicyjny i wizualny:

  • Tworzenie aplikacji full stack i ich iteracyjne ulepszanie: twórz aplikacje full stack za pomocą prompta i iteruj je w czacie lub trybie adnotacji. Tryb adnotacji umożliwia wyróżnienie dowolnej części interfejsu aplikacji i opisanie żądanej zmiany.
  • Udostępnianie i wdrażanie aplikacji: możesz udostępniać swoje dzieła innym osobom, aby współpracować lub prezentować swoją pracę. Gdy aplikacja będzie gotowa, wdróż ją w Cloud Run.
  • Galeria aplikacji: Galeria aplikacji to wizualna biblioteka pomysłów na projekty. Możesz przeglądać możliwości Gemini, natychmiast wyświetlać podgląd aplikacji i remiksować je, aby dostosować je do swoich potrzeb.

Wdrażanie lub archiwizowanie aplikacji

Gdy aplikacja będzie gotowa, możesz ją wdrożyć:

  • Google Cloud Run: wdróż aplikację jako skalowalną usługę. W zależności od użycia mogą obowiązywać opłaty za Google Cloud Run.
  • GitHub: wyeksportuj projekt do repozytorium GitHub.

Ograniczenia

W tej sekcji znajdziesz listę aktualnych ograniczeń trybu tworzenia w Google AI Studio.

Bezpieczeństwo klucza interfejsu API

  • Po stronie klienta: nigdy nie używaj prawdziwych kluczy interfejsu API bezpośrednio w kodzie po stronie klienta.
  • Po stronie serwera: użyj funkcji zarządzania obiektami tajnymi, aby bezpiecznie obsługiwać klucze wrażliwe w środowisku wykonawczym po stronie serwera.

Wdrażanie poza Google AI Studio

  • Aplikację możesz wdrożyć w Cloud Run pod publicznym adresem URL, ale ta konfiguracja będzie używać Twojego klucza interfejsu API do wszystkich wywołań Gemini API przez użytkowników.
    • Aplikacje JavaScript są uruchamiane po stronie klienta, dlatego upewnij się, że klucze interfejsu API mają tylko minimalny dostęp, aby zapobiec wyciekom danych lub nadużyciom. Na przykład inne sklepy wyszukiwania plików z tego samego projektu mogą być dostępne dla użytkowników za pomocą tego mechanizmu.
  • Bezpieczne wdrożenie zewnętrzne: aby bezpiecznie uruchomić aplikację poza AI Studio (np. po pobraniu pliku ZIP), musisz przenieść logikę, która używa klucza interfejsu API, do komponentu po stronie serwera, aby zapobiec ujawnieniu klucza użytkownikom. Nie jest to konieczne, jeśli wdrożysz aplikację za pomocą Cloud Run.
  • Ostrzeżenie o ujawnieniu klucza: zdecydowanie odradzamy zastępowanie obiektu zastępczego prawdziwym kluczem interfejsu API w środowisku po stronie klienta, ponieważ klucz będzie widoczny dla każdego użytkownika.

Błąd podczas udostępniania aplikacji

Jeśli udostępnisz aplikację, a użytkownik napotka błąd 403 Access Restricted (Odmowa dostępu) podczas korzystania z udostępnionego adresu URL, może to być spowodowane jednym z tych powodów:

  • Rozszerzenia przeglądarki: aplikację mogą blokować rozszerzenia prywatności, takie jak Privacy Badger. Aby uniknąć błędu, wyłącz rozszerzenie.
  • Problemy z kompilacją: mogą występować problemy z bieżącym kodem. Poproś agenta o „naprawienie problemów z kompilacją w bieżącym kodzie”, a następnie ponownie udostępnij adres URL.

Najczęstsze pytania

Co to jest tworzenie w AI Studio?

Tworzenie w AI Studio to platforma, która umożliwia przejście od prostego prompta do aplikacji opartej na AI i gotowej do wdrożenia produkcyjnego, korzystającej z Gemini. Opisz, co chcesz utworzyć, za pomocą prompta, a Gemini wygeneruje dla Ciebie aplikację. Możesz też przejrzeć naszą galerię, aby zobaczyć, co można zrobić za pomocą Gemini API, i remiksować aplikacje, aby dostosować je do swoich potrzeb.

Dlaczego tworzenie wywołuje Gemini API z kodu po stronie klienta?

Zazwyczaj najlepszym rozwiązaniem jest wywoływanie Gemini API po stronie serwera, aby nie ujawniać klucza interfejsu API. AI Studio ma jednak serwer proxy Gemini API do wywołań po stronie klienta, który dołącza klucz interfejsu API bez ujawniania go w kodzie. Na razie generujemy wywołania po stronie klienta, aby korzystać z tego serwera proxy, ponieważ upraszcza to kod i umożliwia udostępnianie aplikacji innym osobom bez konieczności podawania klucza interfejsu API.

Czy mój klucz interfejsu API jest ujawniany podczas udostępniania aplikacji?

Nie używaj w aplikacji prawdziwego klucza interfejsu API. Zamiast tego użyj wartości zastępczej. process.env.GEMINI_API_KEY jest ustawiony na wartość zastępczą, której możesz użyć. Gdy inny użytkownik korzysta z Twojej aplikacji, AI Studio przekazuje wywołania do Gemini API, zastępując wartość zastępczą kluczem interfejsu API użytkownika (nie Twoim). Nie używaj w aplikacji prawdziwego klucza interfejsu API, ponieważ kod jest widoczny dla każdego, kto może wyświetlić Twoją aplikację.

Kto może zobaczyć moje aplikacje?

Domyślnie Twoja aplikacja jest prywatna. Możesz udostępnić aplikację innym użytkownikom, aby mogli z niej korzystać. Użytkownicy, którym udostępnisz aplikację, mogą zobaczyć jej kod i utworzyć jego kopię na własny użytek. Jeśli udostępnisz aplikację z uprawnieniami do edycji, inni użytkownicy będą mogli edytować jej kod.

Czy mogę uruchamiać aplikacje poza AI Studio?

Aplikację możesz wdrożyć w Cloud Run z AI Studio, co spowoduje, że będzie ona miała publiczny adres URL. Jest ona wdrażana wraz z serwerem proxy, który będzie chronić Twój klucz interfejsu API, ale wdrożona aplikacja będzie używać Twojego klucza interfejsu API do wszystkich wywołań Gemini API przez użytkowników. Możesz też pobrać aplikację jako plik ZIP. Jeśli zastąpisz wartość zastępczą prawdziwym kluczem interfejsu API, aplikacja powinna nadal działać. Nie powinieneś jednak wdrażać aplikacji w ten sposób, ponieważ klucz interfejsu API będzie widoczny dla każdego użytkownika. Aby aplikacja działała bezpiecznie poza AI Studio, musisz przenieść część logiki po stronie serwera, aby klucz interfejsu API nie był już ujawniany.

Czy mogę tworzyć aplikacje lokalnie za pomocą własnych narzędzi, a następnie udostępniać je tutaj?

Ta funkcja nie jest jeszcze dostępna. W przyszłości planujemy obsługiwać więcej przypadków użycia aplikacji. Jeśli masz jakieś konkretne pomysły, prześlij nam opinię.

Jak mogę używać bazy danych lub innego miejsca na dane w swoich aplikacjach?

Aplikacje AI Studio to standardowe aplikacje działające w kontenerze Cloud Run. Możesz używać dowolnego rozwiązania do przechowywania danych, z którym możesz się połączyć przez sieć, o ile nie ma zapory sieciowej uniemożliwiającej dostęp z dynamicznego zakresu adresów IP.

Pracujemy nad dodaniem w przyszłości bezpośredniej obsługi przechowywania danych, którą będzie można skonfigurować bezpośrednio w AI Studio.

Aby widzowie wiedzieli, że aplikacja używa ich kamery internetowej lub innych urządzeń, wymagamy dodatkowego potwierdzenia, zanim aplikacja będzie mogła uzyskać dostęp do tych interfejsów Navigator API. Twórcy aplikacji mogą dodać te prośby o uprawnienia do pliku metadata.json aplikacji. Na przykład:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

Obsługiwane wartości dla requestFramePermissions to podzbiór standardowych funkcji kontrolowanych przez zasady.

Jak mogę używać GitHuba w swoich aplikacjach?

Integracja AI Studio z GitHubem umożliwia utworzenie repozytorium na potrzeby pracy i zatwierdzenie najnowszych zmian. Obecnie nie obsługujemy pobierania zmian zdalnych.

Czy mogę przyznać innym użytkownikom uprawnienia do edycji mojej aplikacji?

Ta funkcja nie jest jeszcze obsługiwana, ale wkrótce będzie dostępna.

Dlaczego moja aplikacja została oznaczona jako naruszająca zasady?

Mamy systemy, które automatycznie sprawdzają aplikacje pod kątem zgodności z naszymi zasadami. Jeśli stwierdzimy, że aplikacja narusza nasze zasady, zostanie ona usunięta z AI Studio. Naruszenia zasad mogą obejmować m.in.:

  • aplikacje zawierające złośliwe oprogramowanie, wyłudzanie informacji lub podszywanie się pod inne osoby;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące materiałów wizualnych przedstawiających wykorzystywanie seksualne dzieci;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące nękania;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące szerzenia nienawiści;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące handlu ludźmi;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące treści o charakterze jednoznacznie seksualnym;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące przemocy i okrucieństwa;
  • aplikacje, które wyświetlają lub rozpowszechniają treści naruszające zasady dotyczące treści szkodliwych lub niebezpiecznych.

Jeśli Twoja aplikacja została oznaczona jako naruszająca zasady i uważasz, że doszło do pomyłki, możesz przesłać odwołanie. Powtarzające się naruszenia naszych zasad mogą spowodować utratę dostępu do AI Studio.

Jakie są moje obowiązki jako dewelopera aplikacji?

Przypominamy, że jako właściciel aplikacji odpowiadasz za jej działanie i wszystkie dane, które przetwarza. Obejmuje to m.in.:

  • Zgodność z przepisami i prawa osób trzecich: musisz dopilnować, aby Twoja aplikacja była zgodna z obowiązującymi przepisami i nie naruszała praw innych osób, w tym praw własności intelektualnej i praw do prywatności.
  • Monitorowanie treści: w przypadku innych usług używanych przez Twoją aplikację mogą obowiązywać dodatkowe warunki. Na przykład Warunki korzystania z Google Cloud, które obowiązują w przypadku Firestore, wymagają od klientów hostujących treści osób trzecich publikowania zasad określających, jakie treści są zabronione (np. treści niezgodne z prawem), oraz monitorowania obecności takich treści.
  • Bezpieczne wdrożenie: musisz wdrożyć niezbędne zabezpieczenia i narzędzia do moderowania, aby zapobiec nadużywaniu aplikacji.

Zapoznaj się z ograniczeniami dotyczącymi korzystania z usługi w Warunkach korzystania z usługi.

O ile nie zaznaczono inaczej, w przypadku korzystania z aplikacji prezentowanych w galerii aplikacji w AI Studio obowiązują dodatkowe warunki korzystania z usługi Gemini API.

Co dalej?