Tworzenie aplikacji w Google AI Studio

Na tej stronie dowiesz się, jak za pomocą Google AI Studio szybko tworzyć (lub „vibecode’ować”) i wdrażać aplikacje, które testują najnowsze funkcje Gemini, takie jak Nano Banana i Live API. Google AI Studio obsługuje teraz pełne środowiska wykonawcze, co umożliwia tworzenie za pomocą promptów w języku naturalnym zaawansowanych aplikacji z logiką po stronie serwera, bezpiecznym zarządzaniem tajnymi danymi i obsługą pakietów npm.

Rozpocznij

Zacznij stosować 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 konkretne funkcje, takie jak generowanie obrazów czy dane z Map Google. Możesz nawet powiedzieć, co chcesz, używając 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 wybierz Kopiuj aplikację.

Po uruchomieniu promptu zobaczysz wygenerowany kod i pliki, a po prawej stronie pojawi się podgląd aplikacji na żywo.

Co zostało utworzone?

Gdy uruchomisz prompt, AI Studio utworzy kompletną aplikację. Domyślnie tworzy środowisko pełne, 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 interfejsów API, połączenia z bazami danych i korzystanie z pakietów npm.

Aby wyświetlić kod, który zostanie wygenerowany, wybierz kartę Kod w panelu podglądu po prawej stronie. Antigravity Agent inteligentnie zarządza wieloma plikami w Twoim stosie, zapewniając prawidłowe propagowanie zmian.

Agent Antigravity

Agent Antygrawitacyjny to główna funkcja AI w Google Antygrawitacja. Obecnie podstawowe komponenty platformy agenta obsługują tryb tworzenia w Google AI Studio. Wykracza poza proste generowanie kodu, ponieważ zachowuje kontekst całego projektu, zarządza wieloma plikami i rozumie złożone instrukcje, aby tworzyć niezawodne aplikacje pełnostosowe.

Najważniejsze funkcje:

  • Świadomość kontekstu: zachowuje kontekst poprzednich promptów i stanów plików.
  • Zarządzanie wieloma plikami: obsługuje zależności między wieloma plikami.
  • Weryfikowane wykonywanie: weryfikuje aktualizacje kodu, aby ograniczyć halucynacje.

Możliwości full stack

Google AI Studio udostępnia 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 zidentyfikuje i zainstaluje pakiety potrzebne w aplikacji (np. konkretne biblioteki do wizualizacji danych lub klientów interfejsu API). W razie potrzeby możesz też poprosić o konkretne pakiety.
  • Zarządzanie obiektami tajnymi: bezpieczne przechowywanie kluczy interfejsu API i obiektów tajnych w menu Ustawienia. Są one dostępne w kodzie po stronie serwera, dzięki czemu są chronione przed ujawnieniem po stronie klienta.
  • Wieloosobowe: twórz w AI Studio rozwiązania do współpracy w czasie rzeczywistym. Środowisko wykonawcze po stronie serwera zarządza stanem i połączeniami wymaganymi do interakcji użytkowników.
  • Integracja z Firebase: automatyczne udostępnianie i konfigurowanie Firebase, w tym bazy danych Firestore (trwałe przechowywanie danych) i usługi Uwierzytelnianie Firebase (procesy logowania, w szczególności „Zaloguj się przez Google”). Agent przeprowadza cały proces konfiguracji, a nawet pisze kod w aplikacji na potrzeby tych usług.

Więcej informacji o tworzeniu aplikacji typu full-stack

Kontynuuj tworzenie

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

Tworzenie w Google AI Studio

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

Opracowywanie zewnętrznie

W przypadku bardziej zaawansowanych przepływów pracy możesz wyeksportować kod i pracować w wybranym środowisku:

  • Pobieranie i rozwijanie lokalne: wyeksportuj wygenerowany kod jako plik ZIP i zaimportuj go do edytora kodu.
  • Prześlij 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 i ulepszanie aplikacji full stack: twórz aplikacje full stack, korzystając tylko z promptu, i ulepszaj je w trybie czatu lub adnotacji. Tryb adnotacji umożliwia wyróżnienie dowolnej części interfejsu aplikacji i opisanie zmiany, którą chcesz wprowadzić.
  • Udostępnianie i wdrażanie aplikacji: możesz udostępniać swoje projekty innym osobom, aby z nimi współpracować lub prezentować swoje prace. 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, od razu wyświetlać podgląd aplikacji i remiksować je, aby dostosować je do swoich potrzeb.

Wdrażanie i archiwizowanie aplikacji

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

  • Google Cloud Run: wdróż aplikację jako skalowalną usługę. Ceny Google Cloud Run mogą zależeć od wykorzystania.
  • GitHub eksportuj projekt do repozytorium GitHub.

Ograniczenia

W tej sekcji znajdziesz aktualne ograniczenia 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żywaj funkcji zarządzania kluczami tajnymi, aby bezpiecznie obsługiwać poufne klucze w środowisku wykonawczym po stronie serwera.

Wdrożenie poza Google AI Studio

  • Aplikację możesz wdrożyć w Cloud Run, aby uzyskać publiczny adres URL, ale w tej konfiguracji klucz interfejsu API będzie używany we wszystkich wywołaniach interfejsu Gemini API przez użytkowników.
    • Aplikacje JavaScript są uruchamiane po stronie klienta, więc aby zapobiec wyciekom danych lub ich niewłaściwemu wykorzystaniu, upewnij się, że klucze interfejsu API mają tylko minimalny dostęp. 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 wdrażasz za pomocą Cloud Run.
  • Ostrzeżenie o ujawnieniu klucza: zdecydowanie odradzamy zastępowanie zmiennej prawdziwym kluczem interfejsu API w środowisku po stronie klienta, ponieważ klucz stanie się widoczny dla każdego użytkownika.

Błąd podczas udostępniania aplikacji

Jeśli udostępnisz aplikację, a użytkownik końcowy napotka błąd 403 – dostęp ograniczony podczas korzystania z udostępnionego adresu URL, może to być spowodowane jednym z tych czynników:

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

Najczęstsze pytania

Co to jest Build in AI Studio?

AI Studio Build to platforma, która pomoże Ci przekształcić prosty prompt w gotową do wdrożenia aplikację opartą na AI i korzystającą z Gemini. Opisz w prompcie, co chcesz utworzyć, a Gemini wygeneruje dla Ciebie aplikację. Możesz też przejrzeć naszą galerię, aby zobaczyć, co można zrobić za pomocą interfejsu Gemini API, i remiksować aplikacje, aby dostosować je do swoich potrzeb.

Dlaczego funkcja Build wywołuje interfejs Gemini API z kodu po stronie klienta?

Zwykle zaleca się wywoływanie interfejsu Gemini API po stronie serwera, aby nie ujawniać klucza API. AI Studio ma jednak serwer proxy interfejsu API Gemini do wywołań po stronie klienta, który dołącza klucz interfejsu API bez ujawniania go w kodzie. Obecnie 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 widoczny 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 ustawiona na wartość zastępczą, której możesz użyć. Gdy inny użytkownik korzysta z Twojej aplikacji, AI Studio przekazuje wywołania do interfejsu Gemini API, zastępując wartość zmiennej kluczem API użytkownika (a nie Twoim). Nie używaj w aplikacji prawdziwego klucza interfejsu API, ponieważ kod jest widoczny dla każdej osoby, która może wyświetlić Twoją aplikację.

Kto może zobaczyć moje aplikacje?

Domyślnie aplikacja jest prywatna. Możesz udostępnić aplikację innym użytkownikom, aby mogli z niej korzystać. Użytkownicy, którym udostępnisz aplikację, będą mogli zobaczyć jej kod i skopiować go na potrzeby własne. 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?

Możesz wdrożyć aplikację w Cloud Run z AI Studio, co zapewni jej publiczny adres URL. Jest ona wdrażana wraz z serwerem proxy, który zachowuje prywatność klucza API. Wdrożona aplikacja będzie jednak używać Twojego klucza API we wszystkich wywołaniach Gemini API użytkowników. Możesz też pobrać aplikację jako plik ZIP. Jeśli zastąpisz wartość zastępczą prawdziwym kluczem interfejsu API, powinna ona nadal działać. Nie powinieneś wdrażać aplikacji w ten sposób, ponieważ każdy użytkownik będzie mógł zobaczyć klucz interfejsu API. Aby aplikacja działała bezpiecznie poza AI Studio, musisz przenieść część logiki po stronie serwera, aby klucz interfejsu API nie był już widoczny.

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

Ta funkcja nie jest jeszcze dostępna. Cieszymy się, że w przyszłości będziemy mogli obsługiwać więcej przypadków użycia aplikacji. Jeśli masz jakieś konkretne uwagi, podziel się nimi z nami.

Jak mogę używać bazy danych lub innego miejsca na dane w 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 połączyć się przez sieć, o ile nie ma zapory sieciowej blokującej dostęp z dynamicznego zakresu adresów IP.

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

Aby mieć pewność, że widzowie wiedzą, że aplikacja korzysta z ich kamery internetowej lub innych urządzeń, wymagamy dodatkowego potwierdzenia, zanim aplikacja 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 requestFramePermissions stanowią podzbiór standardowych funkcji kontrolowanych przez zasady.

Jak mogę używać GitHub z moimi aplikacjami?

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

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

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

Dlaczego moja aplikacja została oznaczona z powodu naruszenia zasad?

Mamy systemy, które automatycznie sprawdzają aplikacje pod kątem zgodności z naszymi zasadami. Jeśli stwierdzimy, że aplikacja narusza nasze zasady, usuniemy ją 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, a uważasz, że stało się to przez pomyłkę, możesz przesłać odwołanie. Wielokrotne 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 ponosisz odpowiedzialność za jej działanie i wszystkie dane, które przetwarza. Obejmuje to m.in.:

  • Zgodność z przepisami prawa i prawa osób trzecich: upewnij się, że Twoja aplikacja jest zgodna ze wszystkimi obowiązującymi przepisami i regulacjami oraz nie narusza praw innych osób, w tym praw własności intelektualnej i praw do prywatności.
  • Monitorowanie treści: zgodność z dodatkowymi warunkami może mieć zastosowanie do innych usług używanych przez aplikację. Na przykład Warunki korzystania z usługi Google Cloud, które mają zastosowanie do 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: wdrożenie niezbędnych zabezpieczeń i narzędzi do moderowania, aby zapobiec niewłaściwemu wykorzystaniu aplikacji.

Zapoznaj się z ograniczeniami w korzystaniu w Warunkach korzystania z usługi.

Dodatkowe warunki korzystania z usługi Gemini API mają zastosowanie do korzystania z aplikacji prezentowanych w galerii aplikacji w AI Studio, o ile nie podano inaczej.

Co dalej?