Na tej stronie dowiesz się, jak używać Google AI Studio do szybkiego tworzenia (lub „vibecodingu”) i wdrażania aplikacji, 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 zaawansowanych aplikacji z logiką po stronie serwera, bezpiecznym zarządzaniem tajnymi danymi i obsługą pakietów npm – wszystko to za pomocą promptów w języku naturalnym.
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 pola wprowadzania, 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 kliknij Skopiuj 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łania interfejsu API, połączenia z bazą danych i korzystanie z pakietów npm.
Kod, który zostanie wygenerowany, możesz wyświetlić, wybierając 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 Antygravity. 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.
- Zweryfikowane 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: bezpiecznie przechowuj klucze interfejsu API i obiekty tajne w menu Ustawienia. Są one dostępne w kodzie po stronie serwera, dzięki czemu są chronione przed ujawnieniem po stronie klienta.
- Wieloosobowa: twórz rozwiązania do 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.
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
- Iteracyjne modyfikowanie za pomocą Gemini: w trybie tworzenia użyj panelu czatu, aby poprosić Gemini o wprowadzenie zmian, dodanie nowych funkcji lub zmianę stylu.
- Bezpośrednia edycja kodu: otwórz kartę Kodu 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 programowania 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 za pomocą 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.
Twórz i ulepszaj aplikacje full stack: krótki opis obsługi środowiska wykonawczego, ulepszanie w trybie adnotacji Udostępnianie i wdrażanie – udostępniaj aplikację w AI Studio lub wdrażaj ją w Cloud Run Przeglądaj galerię aplikacji
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: aplikację mogą blokować rozszerzenia chroniące prywatność, takie jak Privacy Badger. 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.
Co dalej?
- Tworzenie aplikacji full stack
- Przykłady znajdziesz w Galerii aplikacji.