Zapoznaj się z nową książką kucharską na temat interfejsu Gemini API i poznaj nasze forum społeczności.

Ta strona została przetłumaczona przez Cloud Translation API.

Tworzenie generatora kodów AI Flutter za pomocą Gemini

Możesz utworzyć asystenta kodowania do generowania interfejsów użytkownika Flutter lub dowolny element kodu, który chcesz szybko powielać. Tworzenie interfejsów może być ciekawe i satysfakcjonujące, ale to też ciężka praca. Chodzi nie tylko o dopracowanie kodu, ale także o dopracowanie wyglądu i stworzenie właściwego stylu oraz uzgodnienie kierunku projektowania.

Ten samouczek pokazuje, jak rozszerzyć Flutter Theme Agent – oparte na AI narzędzie do obsługi kodu opracowane przez zespół Flutter Developer Relations w Google. Ten projekt open source jest rozszerzeniem Microsoft Visual Studio Code (VS Code), które generuje określone komponenty motywu Flutter lub obiektu ThemeData, w tym schematy kolorów, style tekstu i style przycisków. Możesz zmodyfikować projekt, aby dostosować istniejące funkcje do swoich potrzeb, lub utworzyć nowe polecenia, które usprawnią pracę podczas programowania.

Film z omówieniem projektu i jego możliwością (w tym informacji od osób, które go stworzył) znajdziesz w filmie AI Flutter Code Generator – Build with Google AI. W przeciwnym razie możesz rozszerzyć projekt, postępując zgodnie z poniższymi instrukcjami.

Zrzut ekranu przedstawiający agenta motywu Flutter w VS Code

Rysunek 1. Agent motywu Flutter działa w oknie hosta VS Code Extension Development.

Konfigurowanie projektu

Te instrukcje przeprowadzą Cię przez proces konfigurowania projektu agenta motywów Flutter na potrzeby programowania i testowania. Ogólne kroki to: instalacja wymaganego oprogramowania, skonfigurowanie kilku zmiennych środowiskowych, skopiowanie projektu z repozytorium kodu i uruchomienie instalacji konfiguracji.

Instalowanie wymagań wstępnych

Projekt agenta motywu Flutter jest rozszerzeniem kodu Microsoft Visual Studio Code (VS Code) i wykorzystuje Node.js oraz npm do zarządzania pakietami i uruchamiania aplikacji. Poniższe instrukcje instalacji dotyczą hosta z systemem Linux.

Aby zainstalować wymagane oprogramowanie:

Zainstaluj Visual Studio Code na swojej platformie.
Zainstaluj node i npm, postępując zgodnie z instrukcjami instalacji dotyczącymi Twojej platformy.
Jeśli nie masz jeszcze zainstalowanej wersji Flutter for VS Code, wykonaj instrukcje instalacji.

Klonowanie i konfigurowanie projektu

Pobierz kod projektu i użyj polecenia instalacji npm, aby pobrać wymagane zależności i skonfigurować projekt. Aby pobrać kod źródłowy projektu, musisz mieć oprogramowanie sterujące źródłom git.
Aby pobrać i skonfigurować kod projektu:

Sklonuj repozytorium git za pomocą poniższego polecenia.
```
git clone https://github.com/google/generative-ai-docs`
```
Opcjonalnie skonfiguruj lokalne repozytorium git tak, aby korzystało z rzadkiego procesu płatności, aby mieć tylko pliki dla projektu agenta Dokumentów.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Otwórz katalog główny projektu agenta motywu Flutter.

cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

Uruchom polecenie instalacji, aby pobrać zależności i skonfigurować projekt:
```
npm install
```

Konfigurowanie i testowanie rozszerzenia

Możesz teraz przetestować instalację, uruchamiając na urządzeniu agenta motywu Flutter Theme jako rozszerzenie programistyczne w VS Code. W trakcie testu otworzy się osobne okno Host Development Development za pomocą kodu VS, w którym dostępne jest nowe rozszerzenie. W nowym oknie skonfigurujesz klucz interfejsu API, którego rozszerzenie używa do uzyskiwania dostępu do interfejsu Google Gemini API.

Aby skonfigurować i przetestować konfigurację:

Uruchom aplikację VS Code.
W VS Code utwórz nowe okno, wybierając Plik > Nowe okno.
Otwórz projekt agenta motywu Flutter, wybierając File > Open folder (Plik > Otwórz folder) i wybierając folder flutter_theme_agent/.
W aplikacji VS Code otwórz plik flutter_theme_agent/package.json.
Aby uruchomić rozszerzenie w trybie debugowania, wybierz Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno Host Development Development Host (Host programowania rozszerzenia) VS Code.
Otwórz ustawienia VS Code, wybierając Kod > Ustawienia > Ustawienia.
Pobierz klucz interfejsu Google Gemini API ze strony dla deweloperów Generative AI i skopiuj jego ciąg znaków.
Ustaw klucz interfejsu API jako ustawienie konfiguracji. W polu Search Settings (Ustawienia wyszukiwania) wpisz flutter theme, wybierz kartę User (Użytkownik), a następnie w ustawieniu Google > Gemini: API Key (Google > Gemini: klucz interfejsu API) kliknij link Edit in settings.json (Edytuj w pliku settings.json) i dodaj swój klucz Gemini API:
```
"google.ai.apiKey": "your-api-key-here"
```
Zapisz zmiany w pliku settings.json i zamknij karty ustawień.

Aby przetestować polecenia rozszerzenia:

W oknie VS Code Extension Development Host (Host programowania rozszerzenia) wpisz komentarz opisujący komponent interfejsu użytkownika, który chcesz wygenerować.
Zaznacz tekst komentarza z cechami komponentu.
Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
Na palecie poleceń wpisz Flutter Theme i wybierz jedno z poleceń z tym prefiksem.

Zmodyfikuj istniejące polecenie

Modyfikowanie poleceń dostępnych w agencie motywu Flutter to najprostszy sposób na zmianę działania i możliwości rozszerzenia.

Zarówno polecenia do komentarzy, jak i opinii wykorzystują kilka ujęć promptów z przykładami kodu i komentarzy do tego kodu, a także ogólne instrukcje dotyczące modelu językowego AI. Informacje o kontekście promptu pomagają modelowi językowemu Gemini generować odpowiedzi. Zmieniając instrukcje, przykłady lub oba te elementy w poleceniach komentarza lub sprawdzania, możesz zmienić sposób działania wszystkich istniejących poleceń.

Z tego zestawu instrukcji dowiesz się, jak zmodyfikować polecenie buttonstyle.ts przez zmianę tekstu promptu polecenia.

Aby przygotować się do edycji polecenia buttonstyle.ts:\

Uruchom aplikację VS Code.
W VS Code utwórz nowe okno, wybierając Plik > Nowe okno.
Otwórz projekt agenta motywu Flutter, wybierając File > Open folder (Plik > Otwórz folder) i wybierając folder flutter_theme_agent/.
Otwórz plik flutter_theme_agent/src/buttonstyle.ts.

Aby zmienić działanie polecenia buttonstyle.ts:\

W pliku buttonstyle.ts edytuj stałą BUTTONSTYLE_CONTEXT, aby dodać różne instrukcje.

const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

Opcjonalnie w pliku buttonstyle.ts dodaj stałą BUTTONSTYLE_CONTEXT, aby dodać kolejny przykład instrukcji i danych wyjściowych stylu przycisku lub zastąp jeden z istniejących przykładów.

...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

Zapisz zmiany w pliku buttonstyle.ts.

Aby przetestować zmodyfikowane polecenie:

W oknie projektu rozszerzenia VS Code uruchom ponownie debuger, wybierając Uruchom > Ponownie uruchom debugowanie.
W oknie VS Code Extension Development Host (Host programowania rozszerzenia) wybierz w oknie edytora komentarz kodu z opisem żądanego stylu przycisku, na przykład:
```
// blue, lickable buttons that light up when you hover over them`
```
Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
Na palecie poleceń wpisz Flutter i wybierz polecenie Flutter Theme Agent: Create a Flutter ButtonStyle.

Utwórz nowe polecenie

Możesz rozszerzyć agenta motywu Flutter, tworząc nowe polecenia, które wykonują zupełnie nowe zadania za pomocą interfejsu Gemini API. Każdy plik poleceń, np. buttonstyle.ts i colorscheme.ts, jest w większości samodzielny i zawiera kod służący do zbierania tekstu z aktywnego edytora, tworzenia promptu, łączenia się z interfejsem Gemini API, wysyłania promptu i przekazywania odpowiedzi.

Zrzut ekranu agenta motywu Flutter z widocznym nowym poleceniem

Rysunek 2. Nowe polecenie agenta motywu Flutter w oknie Host rozszerzenia kodu VS.

Ten zestaw instrukcji zawiera instrukcje, jak utworzyć nowe polecenie z użyciem kodu istniejącego polecenia colorscheme.ts jako szablonu. Ta aktualizacja zmienia polecenie tak, aby nie uwzględniały składni otaczającej obiektu ColorScheme. Nie musisz więc usuwać tej składni po wygenerowaniu i szybciej wyświetlać dane wyjściowe.

Aby utworzyć polecenie generujące tylko listę kolorów dla obiektu ColorScheme:

Utwórz kopię pliku flutter_theme_agent/src/colorscheme.ts o nazwie colorscheme2.ts w katalogu src/.
W aplikacji VS Code otwórz plik src/colorscheme2.ts.

W pliku colorscheme2.ts zmień nazwę funkcji generateColorScheme na generateColorScheme2:

export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

Zmień instrukcje dotyczące promptów w pliku colorscheme2.ts. Edytuj instrukcje generowania kodu COLORSCHEME_CONTEXT, usuwając tekst ColorScheme( z przykładowego kodu w wierszu 51 i ustaw go jako pusty wiersz.
```
...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...
```

Usuń znak zamykający „)” z końca listy kolorów i ustaw pusty wiersz.

...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

Powtórz te zmiany w drugim przykładzie. Z ciągu znaków COLORSCHEME_CONTEXT w wierszu 87 usuń tekst ColorScheme( i ustaw go jako pusty wiersz.
W wierszu 115 usuń znak zamykający „)” z końca listy kolorów i ustaw go jako pusty wiersz.

W ciągu znaków COLORSCHEME_CONTEXT dodaj instrukcję unikania składni zamykającej:

...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

Zapisz zmiany w pliku colorscheme2.ts.

Zintegruj nowe polecenie

Po zakończeniu kodu nowego polecenia musisz zintegrować go z resztą rozszerzenia. Zaktualizuj pliki extension.ts i package.json, aby nowe polecenie stało się częścią rozszerzenia i włącz funkcję wywoływania nowego polecenia w VS Code.

Aby zintegrować nowe polecenie z kodem rozszerzenia:

W aplikacji VS Code otwórz plik flutter_theme_agent/src/extension.ts.
Zaimportuj do rozszerzenia nowy kod polecenia, dodając nową instrukcję importu.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Zarejestruj nowe polecenie, dodając ten kod do funkcji activate().

export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

Zapisz zmiany w pliku extension.ts.

Aby zintegrować polecenie nazwy z pakietem rozszerzeń:

W aplikacji VS Code otwórz plik flutter_theme_agent/package.json.

Dodaj nowe polecenie do sekcji commands pliku pakietu.

"contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

Zapisz zmiany w pliku package.json.

Testowanie nowego polecenia

Po zakończeniu kodowania polecenia i integracji go z rozszerzeniem możesz je przetestować. Nowe polecenie jest dostępne tylko w oknie VS Code Extension Development Host, a nie w oknie VS Code, w którym edytowano kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

W oknie projektu rozszerzenia VS Code ponownie uruchom debuger, wybierając Uruchom > Ponownie uruchom debugowanie, co spowoduje ponowne uruchomienie osobnego okna Host Development Development.
W oknie VS Code Extension Development Host (Host programowania rozszerzenia) otwórz projekt programowania Flutter.
W tym samym oknie otwórz okno edytora kodu, wpisz komentarz opisujący dany komponent interfejsu i zaznacz tekst komentarza.
Otwórz paletę poleceń, wybierając Widok > Paleta poleceń.
Na palecie poleceń wpisz Flutter Theme i wybierz polecenie Flutter Theme Agent: My New Code Generator.

Dodatkowe materiały

Więcej informacji o projekcie agenta motywu Flutter znajdziesz w repozytorium kodu. Jeśli potrzebujesz pomocy w tworzeniu aplikacji lub szukasz współpracowników, zajrzyj na stronę Google Developers Community Discord.

Aplikacje produkcyjne

Jeśli planujesz wdrożyć agenta motywu Flutter Theme w przypadku dużej grupy odbiorców, pamiętaj, że korzystanie z interfejsu Google Gemini API może podlegać ograniczeniom liczby żądań i innym ograniczeniom użytkowania. Jeśli zastanawiasz się nad utworzeniem aplikacji produkcyjnej za pomocą modelu Gemini, zapoznaj się z usługami Google Cloud Vertex AI, aby zapewnić większą skalowalność i niezawodność aplikacji.