Na tej stronie opisujemy, jak używać trybu tworzenia w Google AI Studio, aby szybko tworzyć (lub pisać kod) i wdrażać aplikacje, które testują najnowsze funkcje Gemini, takie jak nano banana i Live API.
Rozpocznij
Zacznij kodować wibracje 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 promptu 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 zostanie utworzone?
Gdy uruchomisz prompt, AI Studio utworzy aplikację internetową. Domyślnie będzie to aplikacja internetowa w React, ale w menu Ustawienia możesz wybrać utworzenie aplikacji w Angular. Kod, który zostanie wygenerowany, możesz wyświetlić, wybierając kartę Kod w panelu podglądu po prawej stronie.
Oto pliki, na które warto zwrócić uwagę:
- geminiService.ts: ten plik zawiera główną logikę aplikacji, od tworzenia promptów po wywoływanie interfejsu Gemini API i analizowanie jego odpowiedzi. W tym pliku możesz edytować prompt podstawowy lub modyfikować funkcje dowolnego komponentu bezpośrednio albo w trybie tworzenia, prowadząc interaktywną rozmowę z Gemini. Pamiętaj, że kod w tym pliku używa pakietu GenAI TS SDK do interakcji z interfejsem Gemini API.
Kontynuuj tworzenie
Gdy Google AI Studio wygeneruje początkowy kod aplikacji internetowej, masz 2 główne opcje kontynuowania projektu: tworzenie w AI Studio lub rozwijanie projektu na zewnątrz.
Tworzenie w Google AI Studio
Możesz dalej ulepszać i rozwijać aplikację bezpośrednio w środowisku Google AI Studio:
- Wprowadzaj zmiany za pomocą Gemini: w trybie tworzenia użyj panelu czatu, aby poprosić Gemini o wprowadzenie zmian, dodanie nowych funkcji lub zmianę stylu. Możesz na przykład poprosić: „Dodaj przycisk, który będzie wyświetlać alerty” lub „Zmień kolorystykę na niebiesko-białą”.
- Bezpośrednie edytowanie kodu: otwórz kartę Kod w panelu podglądu, aby wprowadzać zmiany na żywo. Podczas tworzenia projektu możesz zapisać go w GitHubie, aby korzystać z kontroli wersji.
Opracowywanie zewnętrznie
W przypadku bardziej zaawansowanych procesów możesz wyeksportować kod i pracować w wybranym środowisku:
- Pobierz i opracuj lokalnie: wyeksportuj wygenerowany kod jako plik ZIP i zaimportuj go do edytora kodu. Dzięki temu możesz używać znanych narzędzi, systemów kompilacji i lokalnych praktyk kontroli wersji, aby kontynuować tworzenie projektu po początkowym prototypie.
- 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:
- Tryb adnotacji: zamiast pisać kod, aby zmienić wygląd aplikacji, możesz w trybie adnotacji wyróżnić dowolną część interfejsu i opisać zmianę, którą chcesz wprowadzić. Możesz na przykład wybrać komponent i wpisać „Zmień kolor tego przycisku na niebieski” lub „Animuj ten obraz, aby wsuwał się z lewej strony”. Gdy klikniesz Dodaj do czatu, wygeneruje się prompt ze zrzutem ekranu z adnotacjami.
- Udostępnianie aplikacji: możesz udostępniać swoje projekty innym osobom, aby z nimi współpracować lub prezentować swoje prace.
- 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ć bezpośrednio z AI Studio. Opcje wdrożenia:
- Google Cloud Run: wdróż aplikację jako skalowalną usługę. Pamiętaj, że w zależności od wykorzystania mogą obowiązywać ceny Google Cloud Run.
- GitHub wyeksportuj projekt do repozytorium GitHub, aby zintegrować go z dotychczasowymi procesami programowania i wdrażania.
Ograniczenia
W tej sekcji opisujemy ważne ograniczenia dotyczące korzystania z trybu tworzenia w Google AI Studio.
Bezpieczeństwo i narażenie klucza interfejsu API
- Kod udostępnionych aplikacji jest widoczny dla każdego, kto je wyświetla. Nigdy nie używaj prawdziwego klucza API bezpośrednio w kodzie aplikacji.
- Domyślnie aplikacje używają obiektu zastępczego (np. process.env.GEMINI_API_KEY) dla klucza interfejsu API. Gdy użytkownik uruchomi udostępnioną aplikację w AI Studio, AI Studio będzie działać jako serwer proxy, zastępując symbol zastępczy kluczem interfejsu API użytkownika końcowego, dzięki czemu Twój klucz pozostanie prywatny.
Widoczność i udostępnianie aplikacji
- Aplikacje są przechowywane na Dysku Google i dziedziczą jego model uprawnień, co oznacza, że domyślnie są prywatne.
- Uprawnienia do udostępniania: gdy udostępniasz aplikację innym użytkownikom:
- Udostępnieni użytkownicy mogą zobaczyć kod i utworzyć kopię aplikacji do własnego użytku.
- Jeśli użytkownik, któremu udostępniono aplikację, ma uprawnienia do edycji, może modyfikować jej kod.
Wdrożenie poza 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 wdrażanie 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.
Pomoc dotycząca narzędzi i funkcji
- Importowanie z lokalnego środowiska programistycznego: obecnie nie możesz tworzyć aplikacji lokalnie za pomocą narzędzi zewnętrznych i importować ich do AI Studio.
Co dalej?
- Zobacz, co stworzyli inni, i zainspiruj się, remiksując istniejący projekt w Galerii aplikacji.
- Na playliście w YouTube znajdziesz zbiór samouczków dotyczących kodowania w AI Studio, które pomogą Ci zacząć.