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.
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:
- Zainstaluj Visual Studio Code na swojej platformie.
- Zainstaluj
node
inpm
, postępując zgodnie z instrukcjami instalacji odpowiednimi dla Twojej platformy. - 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:
Sklonuj repozytorium Git za pomocą tego polecenia.
git clone https://github.com/google/generative-ai-docs`
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
Otwórz katalog główny projektu Flutter Theme Agent.
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
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ę:
- Uruchom aplikację VS Code.
- W VS Code utwórz nowe okno, klikając Plik > Nowe okno.
- Otwórz projekt Flutter Theme Agent, klikając Plik > Otwórz folder i wybierając folder
flutter_theme_agent/
. - W VS Code otwórz plik
flutter_theme_agent/package.json
. - Uruchom rozszerzenie w trybie debugowania, klikając Uruchom > Rozpocznij debugowanie. Ten krok otwiera osobne okno hosta rozwoju rozszerzeń w VS Code.
- Otwórz ustawienia VS Code, klikając Code > Settings > Settings (Kod > Ustawienia > Ustawienia).
- Uzyskaj klucz interfejsu Gemini API od Google na stronie dewelopera generatywnej AI i skopiuj ciąg znaków klucza.
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"
Zapisz zmiany w pliku
settings.json
i zamknij karty ustawień.
Aby przetestować polecenia rozszerzenia:
- W oknie Host Development Extension w VS Code wpisz komentarz do kodu opisujący komponent interfejsu użytkownika, który chcesz wygenerować.
- Wybierz tekst komentarza z charakterystycznymi cechami komponentu.
- Otwórz paletę poleceń, klikając Widok > Paleta poleceń.
- 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
:
- Uruchom aplikację VS Code.
- W VS Code utwórz nowe okno, klikając Plik > Nowe okno.
- Otwórz projekt Flutter Theme Agent, wybierając Plik > Otwórz folder i folder
flutter_theme_agent/
. Otwórz plik
flutter_theme_agent/src/buttonstyle.ts
.Aby zmodyfikować działanie polecenia
buttonstyle.ts
: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. ...
Opcjonalnie w pliku
buttonstyle.ts
, w konstacieBUTTONSTYLE_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?>( ...
Zapisz zmiany w pliku
buttonstyle.ts
.
Aby przetestować zmodyfikowane polecenie:
- W oknie projektu rozszerzenia w VS Code uruchom ponownie debuger, klikając Uruchom > Uruchom ponownie debugowanie.
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`
Otwórz paletę poleceń, klikając Widok > Paleta poleceń.
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.
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
:
- Utwórz w katalogu
src/
kopię plikuflutter_theme_agent/src/colorscheme.ts
o nazwiecolorscheme2.ts
. - W VS Code otwórz plik
src/colorscheme2.ts
. W pliku
colorscheme2.ts
zmień nazwę funkcjigenerateColorScheme
nagenerateColorScheme2
:export async function generateColorScheme2(){ vscode.window.showInformationMessage('Generating Color Scheme...');
Zmień instrukcje prompta w pliku
colorscheme2.ts
. Zmień instrukcje generowania koduCOLORSCHEME_CONTEXT
, usuwając tekstColorScheme(
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), ...
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 ...
Powtórz te zmiany w przypadku drugiego przykładu. W ciągu
COLORSCHEME_CONTEXT
w wierszu 87 usuń tekstColorScheme(
i pozostaw pusty wiersz.W wierszu 115 usuń zamykające nawiasy „
)
” na końcu listy kolorów i zamień je na pusty wiersz.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: ...
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:
- W VS Code otwórz plik
flutter_theme_agent/src/extension.ts
. Zaimportuj nowy kod polecenia do rozszerzenia, dodając nowe instrukcje importowania.
import { generateColorScheme2 } from './components/colorscheme2';
Zarejestruj nowe polecenie, dodając do funkcji
activate()
ten kod:export function activate(context: vscode.ExtensionContext) { ... vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2', generateColorScheme2); ... }
Zapisz zmiany w pliku
extension.ts
.
Aby zintegrować polecenie name z pakietem rozszerzenia:
- W VS Code otwórz plik
flutter_theme_agent/package.json
. Dodaj nowe polecenie do sekcji
commands
w 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 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:
- W oknie projektu rozszerzenia w VS Code uruchom ponownie debuger, klikając Uruchom > Uruchom ponownie debugowanie. Spowoduje to ponowne uruchomienie okna Host Development Extension.
- W oknie Host rozwoju rozszerzeń w VS Code otwórz projekt programistyczny Fluttera.
- W tym samym oknie otwórz okno edytora kodu, wpisz komentarz opisujący wybrany element interfejsu użytkownika, a potem zaznacz tekst komentarza.
- Otwórz paletę poleceń, klikając Widok > Paleta poleceń.
- 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.