Tworzenie generatora kodów AI Flutter za pomocą Gemini

Utwórz narzędzie do kodowania, które będzie generować interfejsy użytkownika Flutter lub dowolne komponenty kodu, które chcesz szybko iterować. Tworzenie interfejsów użytkownika może być przyjemne i satysfakcjonujące, ale wymaga też sporo pracy. Nie chodzi tylko o poprawne napisanie kodu, ale też o odpowiedni wygląd i wrażenia oraz uzgodnienie z zespołem kierunku projektowania.

W tym samouczku pokazujemy, jak rozszerzyć Flutter Theme Agent, czyli narzędzie do pomocy w pisaniu kodu oparte na AI, które zostało opracowane przez zespół ds. relacji z deweloperami Flutter w Google. Ten projekt typu open source to rozszerzenie do Visual Studio Code firmy Microsoft, które generuje określone komponenty motywu Flutter lub obiekt ThemeData, w tym schematy kolorów, style tekstu i style przycisków. Możesz zmodyfikować projekt, aby te istniejące funkcje działały lepiej, lub utworzyć nowe polecenia, które lepiej będą wspierać Twój proces programowania.

Film z omówieniem projektu i jego rozszerzania, w tym z opiniami jego twórców, znajdziesz na stronie AI Flutter Code Generator – tworzenie za pomocą AI od Google. W przeciwnym razie możesz zacząć rozszerzać projekt, postępując zgodnie z instrukcjami podanymi poniżej.

Zrzut ekranu pokazujący działanie agenta motywu Flutter w VS Code

Rysunek 1. Flutter Theme Agent działa w oknie hosta rozwoju rozszerzenia VS Code.

Konfigurowanie projektu

Te instrukcje pokazują, jak skonfigurować projekt Flutter Theme Agent do tworzenia i testowania. Ogólne czynności to zainstalowanie wymaganego oprogramowania, skonfigurowanie kilku zmiennych środowiskowych, sklonowanie projektu z repozytorium kodu i uruchomienie instalacji konfiguracji.

Instalowanie wymagań wstępnych

Projekt Flutter Theme Agent działa jako rozszerzenie Microsoft Visual Studio Code (VS Code) i korzysta z Node.js oraz npm do zarządzania pakietami i uruchamiania aplikacji. Poniższe instrukcje instalacji dotyczą maszyny z Linuksem.

Aby zainstalować wymagane oprogramowanie:

  1. Zainstaluj Visual Studio Code na swojej platformie.
  2. Zainstaluj node i npm, postępując zgodnie z instrukcjami instalacji odpowiednimi dla Twojej platformy.
  3. Jeśli Flutter nie jest jeszcze zainstalowany w 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 użyć oprogramowania do kontroli wersji git.
Aby pobrać i skonfigurować kod projektu:

  1. Sklonuj repozytorium Git za pomocą tego polecenia.

    git clone https://github.com/google/generative-ai-docs`

  2. Opcjonalnie skonfiguruj lokalne repozytorium Git, aby używać selektywnego sprawdzania, dzięki czemu będziesz mieć tylko pliki projektu Docs Agent.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Otwórz katalog główny projektu Flutter Theme Agent.

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

  4. Uruchom polecenie instalacji, aby pobrać zależności i skonfigurować projekt:

    npm install

Konfigurowanie i testowanie rozszerzenia

Teraz możesz przetestować instalację, uruchamiając Flutter Theme Agent jako rozszerzenie programistyczne w VS Code na urządzeniu. Test otwiera osobne okno hosta rozwoju rozszerzeń w VS Code, w którym dostępne jest nowe rozszerzenie. W tym nowym oknie skonfiguruj klucz interfejsu API, którego rozszerzenie używa do uzyskiwania dostępu do interfejsu Gemini API od Google.

Aby skonfigurować i przetestować konfigurację:

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, klikając Plik > Nowe okno.
  3. Otwórz projekt Flutter Theme Agent, klikając Plik > Otwórz folder i wybierając folder flutter_theme_agent/.
  4. W VS Code otwórz plik flutter_theme_agent/package.json.
  5. Uruchom rozszerzenie w trybie debugowania, klikając Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno hosta rozwoju rozszerzeń w VS Code.
  6. Otwórz ustawienia VS Code, klikając Code > Settings > Settings (Kod > Ustawienia > Ustawienia).
  7. Uzyskaj klucz interfejsu Gemini API od Google na stronie dewelopera generatywnej AI i skopiuj ciąg znaków klucza.

  8. Ustaw klucz interfejsu API jako ustawienie konfiguracji. W polu Ustawienia wyszukiwania wpisz flutter theme, wybierz kartę Użytkownik i w ustawieniu Google > Gemini: klucz API kliknij link Edytuj w pliku settings.json i dodaj klucz API Gemini:

    "google.ai.apiKey": "your-api-key-here"

  9. Zapisz zmiany w pliku settings.json i zamknij karty ustawień.

Aby przetestować polecenia rozszerzenia:

  1. W oknie Host Development Extension w VS Code wpisz komentarz do kodu opisujący komponent interfejsu użytkownika, który chcesz wygenerować.
  2. Wybierz tekst komentarza z charakterystycznymi cechami komponentu.
  3. Otwórz paletę poleceń, klikając Widok > Paleta poleceń.
  4. Na palecie poleceń wpisz Flutter Theme i wybierz jedno z poleceń z tym prefiksem.

Modyfikowanie istniejącego polecenia

Zmiana poleceń w Flutter Theme Agent to najprostszy sposób na zmianę działania i możliwości rozszerzenia.

Zarówno polecenia dotyczące komentarzy, jak i polecenia dotyczące sprawdzania używają kilku krótkich promptów z przykładami kodu i komentarzy do tego kodu, a także ogólnych instrukcji dla modelu językowego AI. Te informacje o kontekście promptu pomagają modelowi językowemu Gemini w generowaniu odpowiedzi. Zmiana promptu, instrukcji lub przykładów w komentarzach lub poleceniach sprawdzania może zmienić działanie poszczególnych poleceń.

Z tego zestawu instrukcji dowiesz się, jak zmodyfikować polecenie buttonstyle.ts, zmieniając tekst prompta.

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

  1. Uruchom aplikację VS Code.
  2. W VS Code utwórz nowe okno, klikając Plik > Nowe okno.
  3. Otwórz projekt Flutter Theme Agent, wybierając Plik > Otwórz folder i folder flutter_theme_agent/.

  4. Otwórz plik flutter_theme_agent/src/buttonstyle.ts.

    Aby zmodyfikować działanie polecenia buttonstyle.ts:

  5. W pliku buttonstyle.ts zmień stałą BUTTONSTYLE_CONTEXT, aby uwzględnić inne 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.
...

  6. Opcjonalnie w pliku buttonstyle.ts, w konstacie BUTTONSTYLE_CONTEXT, dodaj kolejny przykład instrukcji i wyjścia dla stylu przycisku lub zastąp jeden z dotychczasowych 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?>(
...

  7. Zapisz zmiany w pliku buttonstyle.ts.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia w VS Code uruchom ponownie debuger, klikając Uruchom > Uruchom ponownie debugowanie.

  2. W oknie hosta rozwoju rozszerzeń w VS Code wybierz komentarz kodu w oknie edytora opisujący wybrany styl przycisku, na przykład:

    // blue, lickable buttons that light up when you hover over them`

  3. Otwórz paletę poleceń, klikając Widok > Paleta poleceń.

  4. Na palecie poleceń wpisz Flutter i wybierz polecenie Flutter Theme Agent: Create a Flutter ButtonStyle (Motyw Flutter Agent: Utwórz styl przycisku Flutter).

Tworzenie nowego polecenia

Możesz rozszerzyć działanie Flutter Theme Agent, tworząc nowe polecenia, które wykonują zupełnie nowe zadania za pomocą interfejsu Gemini API. Każdy plik polecenia, np. buttonstyle.ts i colorscheme.ts, jest w większości samodzielny i zawiera kod do zbierania tekstu z aktywnej edycji, tworzenia promptu, łączenia się z Gemini API, wysyłania promptu i przekazywania odpowiedzi.

Zrzut ekranu pokazujący agenta motywu Flutter z nowym poleceniem

Rysunek 2. Nowe polecenie Flutter Theme Agent w oknie hosta Development Extension w VS Code

Z tego zestawu instrukcji dowiesz się, jak utworzyć nowe polecenie, używając kodu dotychczasowego polecenia colorscheme.ts jako szablonu. Ta aktualizacja zmienia komendę, aby nie zawierała otaczającej składni obiektu ColorScheme, dzięki czemu nie musisz usuwać tej składni po wygenerowaniu i szybciej wizualizować dane wyjściowe.

Aby utworzyć polecenie, które generuje tylko listę kolorów obiektu ColorScheme:

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

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

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

  4. Zmień instrukcje prompta w pliku colorscheme2.ts. Zmień instrukcje generowania kodu COLORSCHEME_CONTEXT, usuwając tekst ColorScheme( z przykładowego kodu w wierszu 51 i zastępując go pustym wierszem.

    ...
Here's the example of good Dart code:

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

  5. Usuń zamykającą nawias „)” z końca listy kolorów i ustaw go jako pusty wiersz.

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

This example code is a good ...

  6. Powtórz te zmiany w przypadku drugiego przykładu. W ciągu COLORSCHEME_CONTEXT w wierszu 87 usuń tekst ColorScheme( i pozostaw pusty wiersz.

  7. W wierszu 115 usuń zamykające nawiasy „)” na końcu listy kolorów i zamień je na pusty wiersz.

  8. W ciągu COLORSCHEME_CONTEXT dodaj instrukcję, aby nie uwzględniać otaczającej składni:

    ...
- 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:
...

  9. Zapisz zmiany w pliku colorscheme2.ts.

Integracja nowego polecenia

Po napisaniu kodu nowego polecenia musisz go zintegrować z resztą rozszerzenia. Zaktualizuj pliki extension.ts i package.json, aby nowe polecenie stało się częścią rozszerzenia, i pozwól VS Code wywoływać nowe polecenie.

Aby zintegrować nowe polecenie z kodem rozszerzenia:

  1. W VS Code otwórz plik flutter_theme_agent/src/extension.ts.

  2. Zaimportuj nowy kod polecenia do rozszerzenia, dodając nowe instrukcje importowania.

    import { generateColorScheme2 } from './components/colorscheme2';

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

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

  4. Zapisz zmiany w pliku extension.ts.

Aby zintegrować polecenie name z pakietem rozszerzenia:

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

  2. Dodaj nowe polecenie do sekcji commands w pliku pakietu.

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

  3. Zapisz zmiany w pliku package.json.

Testowanie nowego polecenia

Po zakodowaniu polecenia i zintegrowaniu go z rozszerzeniem możesz je przetestować. Nowe polecenie jest dostępne tylko w oknie Extension Development Host w VS Code, a nie w oknie VS Code, w którym edytujesz kod rozszerzenia.

Aby przetestować zmodyfikowane polecenie:

  1. W oknie projektu rozszerzenia w VS Code uruchom ponownie debuger, klikając Uruchom > Uruchom ponownie debugowanie. Spowoduje to ponowne uruchomienie okna Host Development Extension.
  2. W oknie Host rozwoju rozszerzeń w VS Code otwórz projekt programistyczny Fluttera.
  3. W tym samym oknie otwórz okno edytora kodu, wpisz komentarz opisujący wybrany element interfejsu użytkownika, a potem zaznacz tekst komentarza.
  4. Otwórz paletę poleceń, klikając Widok > Paleta poleceń.
  5. Na palecie poleceń wpisz Flutter Theme i wybierz polecenie Flutter Theme Agent: My New Code Generator (Flutter Theme Agent: My New Code Generator).

Dodatkowe materiały

Więcej informacji o projekcie Flutter Theme Agent znajdziesz w repozytorium kodu. Jeśli potrzebujesz pomocy przy tworzeniu aplikacji lub szukasz współpracowników, wejdź na serwer Discord dla społeczności Google Developers.

Aplikacje produkcyjne

Jeśli planujesz wdrożenie Flutter Theme Agent dla dużej liczby użytkowników, pamiętaj, że korzystanie z interfejsu Gemini API Google może podlegać ograniczeniom szybkości i innym ograniczeniami użycia. Jeśli rozważasz tworzenie aplikacji produkcyjnej z modelem Gemini, zapoznaj się z usługami Google Cloud Vertex AI, aby zwiększyć skalowalność i niezawodność aplikacji.