สร้างโปรแกรมสร้างโค้ด Flutter ของ AI ด้วย Gemini

สร้างเครื่องมือช่วยเขียนโค้ดสำหรับสร้างอินเทอร์เฟซผู้ใช้ Flutter หรือคอมโพเนนต์โค้ดที่ต้องการทำซ้ำอย่างรวดเร็ว การสร้างอินเทอร์เฟซผู้ใช้อาจสนุกและคุ้มค่า แต่ก็เป็นงานที่หนักเช่นกัน การได้โค้ดอย่างถูกต้องไม่ใช่ปัญหา แต่ต้องทำให้ได้รูปลักษณ์ที่เหมาะสมและทำให้ทีมเห็นพ้องต้องกันในทิศทางการออกแบบ

บทแนะนํานี้จะแสดงวิธีขยาย Flutter Theme Agent ซึ่งเป็นเครื่องมือช่วยเหลือเกี่ยวกับโค้ดที่ทำงานด้วยระบบ AI ซึ่งสร้างโดยทีมนักพัฒนาซอฟต์แวร์ Flutter Relations ของ Google โปรเจ็กต์โอเพนซอร์สนี้เป็นส่วนขยายของ Visual Studio Code (โค้ด VS) ของ Microsoft ที่สร้างคอมโพเนนต์เฉพาะสำหรับธีม Flutter หรือออบเจ็กต์ ThemeData รวมถึงรูปแบบสี รูปแบบข้อความ และรูปแบบปุ่ม คุณสามารถแก้ไขโปรเจ็กต์เพื่อให้ฟังก์ชันที่มีอยู่เหล่านี้ทำงานได้ดีขึ้นสำหรับคุณ หรือสร้างคำสั่งใหม่เพื่อสนับสนุนเวิร์กโฟลว์การพัฒนาของคุณได้ดียิ่งขึ้น

หากต้องการดูภาพรวมวิดีโอเกี่ยวกับโปรเจ็กต์และวิธีขยายโปรเจ็กต์ รวมถึงข้อมูลเชิงลึก จากผู้สร้างโปรเจ็กต์ โปรดไปที่โปรแกรมสร้างโค้ด Flutter ด้วย AI - สร้างด้วย AI ของ Google หรือคุณจะเริ่มขยายโปรเจ็กต์ได้โดยทำตามวิธีการด้านล่าง

ภาพหน้าจอของ Agent ธีม Flutter กำลังทำงานใน VS Code

รูปที่ 1 Agent ธีม Flutter ทำงานในหน้าต่างโฮสต์การพัฒนาส่วนขยายโค้ด VS

ตั้งค่าโครงการ

คำแนะนำเหล่านี้จะอธิบายการตั้งค่าโปรเจ็กต์ Agent ธีม Flutter สำหรับการพัฒนาและการทดสอบ ขั้นตอนทั่วไปได้แก่ การติดตั้งซอฟต์แวร์ที่จำเป็นบางอย่าง การตั้งค่าตัวแปรสภาพแวดล้อม 2-3 รายการ การโคลนโปรเจ็กต์จากที่เก็บโค้ด และเรียกใช้การติดตั้งการกำหนดค่า

ติดตั้งข้อกำหนดเบื้องต้น

โปรเจ็กต์ Agent ธีม Flutter ทำงานเป็นส่วนขยายของ Visual Studio Code (โค้ด VS) และใช้ Node.js และ npm เพื่อจัดการแพ็กเกจและเรียกใช้แอปพลิเคชัน วิธีการติดตั้งต่อไปนี้มีไว้สำหรับเครื่องโฮสต์ Linux

วิธีติดตั้งซอฟต์แวร์ที่จำเป็น

  1. ติดตั้งโค้ด Visual Studio สำหรับแพลตฟอร์มของคุณ
  2. ติดตั้ง node และ npm โดยทำตามวิธีการติดตั้งสำหรับแพลตฟอร์มของคุณ
  3. หากยังไม่ได้ติดตั้ง Flutter สำหรับ VS Code ให้ทำตามวิธีการติดตั้ง

โคลนและกำหนดค่าโปรเจ็กต์

ดาวน์โหลดโค้ดโปรเจ็กต์และใช้คำสั่งการติดตั้ง npm เพื่อดาวน์โหลดทรัพยากร Dependency ที่จำเป็นและกำหนดค่าโปรเจ็กต์ คุณต้องมีซอฟต์แวร์การควบคุมแหล่งที่มา git เพื่อดึงข้อมูลซอร์สโค้ดของโปรเจ็กต์
วิธีดาวน์โหลดและกำหนดค่ารหัสโปรเจ็กต์

  1. โคลนที่เก็บ Git โดยใช้คำสั่งต่อไปนี้

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

  2. คุณสามารถกำหนดค่าที่เก็บ Git ในเครื่องเพื่อใช้การชำระเงินแบบกระจัดกระจาย เพื่อให้คุณมีเฉพาะไฟล์สำหรับโปรเจ็กต์ Agent ของเอกสารเท่านั้น

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

  3. ไปที่ไดเรกทอรีรูทของโปรเจ็กต์ Agent ธีม Flutter

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

  4. เรียกใช้คำสั่งติดตั้งเพื่อดาวน์โหลดทรัพยากร Dependency และกำหนดค่าโปรเจ็กต์ด้วยคำสั่งต่อไปนี้

    npm install

กำหนดค่าและทดสอบส่วนขยาย

ตอนนี้คุณควรทดสอบการติดตั้งได้โดยเรียกใช้ Flutter Theme Agent เป็นส่วนขยายการพัฒนาใน VS Code บนอุปกรณ์ การทดสอบจะเปิดหน้าต่างโฮสต์การพัฒนาส่วนขยายโค้ด VS ที่แยกต่างหากซึ่งมีส่วนขยายใหม่ ในหน้าต่างใหม่นี้ คุณได้กำหนดค่าคีย์ API ที่ส่วนขยายใช้ในการเข้าถึง Google Gemini API

วิธีกำหนดค่าและทดสอบการตั้งค่า

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Agent ธีม Flutter โดยเลือกไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ flutter_theme_agent/
  4. ใน VS Code ให้เปิดไฟล์ flutter_theme_agent/package.json
  5. เรียกใช้ส่วนขยายในโหมดแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > เริ่มการแก้ไขข้อบกพร่อง ขั้นตอนนี้จะเปิดหน้าต่างโฮสต์การพัฒนาส่วนขยายของโค้ด VS ที่แยกต่างหาก
  6. เปิดการตั้งค่า VS Code โดยเลือกโค้ด > การตั้งค่า > การตั้งค่า
  7. รับคีย์ Google Gemini API จากเว็บไซต์ Generative AI Developer และคัดลอกสตริงคีย์

  8. ตั้งค่าคีย์ API เป็นการตั้งค่า ในช่องการตั้งค่าการค้นหา ให้พิมพ์ flutter theme เลือกแท็บผู้ใช้ และในการตั้งค่า Google > Gemini: Api Key ให้คลิกลิงก์ แก้ไขใน settings.json และ เพิ่มคีย์ Gemini API ดังนี้

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

  9. บันทึกการเปลี่ยนแปลงไปยังไฟล์ settings.json และปิดแท็บการตั้งค่า

วิธีทดสอบคำสั่งของส่วนขยาย

  1. ในหน้าต่างโฮสต์การพัฒนาส่วนขยายของโค้ด VS ให้เขียนในความคิดเห็นเกี่ยวกับโค้ดที่อธิบายคอมโพเนนต์อินเทอร์เฟซผู้ใช้ที่คุณต้องการสร้าง
  2. เลือกข้อความความคิดเห็นที่มีลักษณะเฉพาะของคอมโพเนนต์
  3. เปิดพาเล็ตคำสั่งโดยเลือก View > Command Palette
  4. ในแผงคำสั่ง ให้พิมพ์ Flutter Theme แล้วเลือกคำสั่งที่มีคำนำหน้าดังกล่าว

แก้ไขคำสั่งที่มีอยู่

การแก้ไขคำสั่งที่มีให้ใน Agent ธีม Flutter เป็นวิธีที่ง่ายที่สุดในการเปลี่ยนลักษณะการทำงานและความสามารถของส่วนขยาย

ทั้งคำสั่งเกี่ยวกับความคิดเห็นและรีวิวจะใช้ข้อความแจ้ง 2-3 ช็อตพร้อมด้วยตัวอย่างโค้ดและความคิดเห็นสำหรับโค้ดนั้น พร้อมให้คำแนะนำทั่วไปสำหรับโมเดลภาษา AI ข้อมูลบริบทของพรอมต์นี้จะนำทาง โมเดลภาษา Gemini ในการสร้างคำตอบ การเปลี่ยนคำสั่ง ตัวอย่าง หรือทั้ง 2 อย่างในคำสั่งแสดงความคิดเห็นหรือตรวจสอบจะช่วยให้คุณเปลี่ยนลักษณะการทำงานของคำสั่งที่มีอยู่แต่ละรายการได้

วิธีการชุดนี้จะอธิบายถึงวิธีแก้ไขคำสั่ง buttonstyle.ts โดยการเปลี่ยนข้อความแจ้งของคำสั่ง

ในการเตรียมแก้ไขคำสั่ง buttonstyle.ts:\

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Agent ธีม Flutter โดยเลือกไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ flutter_theme_agent/

  4. เปิดไฟล์ flutter_theme_agent/src/buttonstyle.ts

    วิธีแก้ไขลักษณะการทำงานของคำสั่ง buttonstyle.ts:\

  5. ในไฟล์ buttonstyle.ts ให้แก้ไขค่าคงที่ BUTTONSTYLE_CONTEXT เพื่อรวมคำสั่งต่างๆ

    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. หรือในไฟล์ buttonstyle.ts จะมีค่าคงที่ BUTTONSTYLE_CONTEXT เพิ่มตัวอย่างคำสั่งและเอาต์พุตสำหรับรูปแบบปุ่มอีก 1 รายการ หรือแทนที่ตัวอย่างที่มีอยู่รายการใดรายการหนึ่ง

    ...
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. บันทึกการเปลี่ยนแปลงลงในไฟล์ buttonstyle.ts

หากต้องการทดสอบคำสั่งที่แก้ไขแล้ว ให้ทำดังนี้

  1. ในหน้าต่างโปรเจ็กต์ส่วนขยาย VS Code ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง

  2. ในหน้าต่าง Extension Development Host ของโค้ด VS ให้เลือกความคิดเห็นเกี่ยวกับโค้ดในหน้าต่างตัวแก้ไขที่อธิบายรูปแบบของปุ่มที่คุณต้องการ เช่น

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

  3. เปิดพาเล็ตคำสั่งโดยเลือก View > Command Palette

  4. ในแผงคำสั่ง ให้พิมพ์ Flutter แล้วเลือกคำสั่ง Flutter Theme Agent: Create a Flutter ButtonStyle

สร้างคำสั่งใหม่

คุณสามารถขยาย Agent ธีม Flutter ได้ด้วยการสร้างคำสั่งใหม่ที่ทำงานใหม่ทั้งหมดด้วย Gemini API ไฟล์คำสั่งแต่ละไฟล์ เช่น buttonstyle.ts และ colorscheme.ts ส่วนใหญ่จะมีทุกอย่างในตัว และมีโค้ดสำหรับรวบรวมข้อความจากตัวแก้ไขที่ใช้งานอยู่ เขียนพรอมต์ เชื่อมต่อกับ Gemini API การส่งพรอมต์ และการมอบคำตอบ

ภาพหน้าจอของ Agent ธีม Flutter ที่มีคำสั่งใหม่แสดงอยู่

รูปที่ 2 คำสั่ง Agent ธีม Flutter ใหม่ในหน้าต่าง VS Code Extension Host

วิธีการชุดนี้จะอธิบายถึงวิธีสร้างคำสั่งใหม่โดยใช้โค้ดของคำสั่ง colorscheme.ts ที่มีอยู่แล้วเป็นเทมเพลต การอัปเดตนี้จะเปลี่ยนคำสั่งให้ไม่รวมไวยากรณ์ที่อยู่ภายในออบเจ็กต์ ColorScheme คุณจึงไม่จำเป็นต้องนำไวยากรณ์นี้ออกหลังจากการสร้าง และแสดงภาพเอาต์พุตได้เร็วขึ้น

วิธีสร้างคำสั่งที่สร้างเฉพาะรายการสีสำหรับออบเจ็กต์ ColorScheme มีดังนี้

  1. ทำสำเนาไฟล์ flutter_theme_agent/src/colorscheme.ts ชื่อ colorscheme2.ts ในไดเรกทอรี src/
  2. ใน VS Code ให้เปิดไฟล์ src/colorscheme2.ts

  3. ในไฟล์ colorscheme2.ts ให้เปลี่ยนฟังก์ชัน generateColorScheme เป็น generateColorScheme2 ดังนี้

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

  4. เปลี่ยนวิธีการแจ้งในไฟล์ colorscheme2.ts แก้ไขวิธีการสร้างโค้ด COLORSCHEME_CONTEXT โดยนำข้อความ ColorScheme( ออกจากโค้ดตัวอย่างในบรรทัด 51 และทำให้บรรทัดว่างเปล่า

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

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

  5. นำวงเล็บปิด ")" ออกจากท้ายรายการสีและทำให้บรรทัดว่าง

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

This example code is a good ...

  6. ทำซ้ำการเปลี่ยนแปลงเหล่านี้สำหรับตัวอย่างที่สอง ในสตริง COLORSCHEME_CONTEXT ในบรรทัดที่ 87 ให้นำข้อความ ColorScheme( ออกและทำให้เป็นบรรทัดว่าง

  7. ในบรรทัดที่ 115 ให้ลบวงเล็บปิด ")" ออกจากท้ายรายการสีและทำให้เป็นบรรทัดว่าง

  8. ในสตริง COLORSCHEME_CONTEXT ให้เพิ่มคำสั่งเพื่อไม่รวมไวยากรณ์ที่แนบมา ดังนี้

    ...
- 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. บันทึกการเปลี่ยนแปลงลงในไฟล์ colorscheme2.ts

ผสานรวมคำสั่งใหม่

หลังจากกรอกโค้ดสำหรับคำสั่งใหม่แล้ว คุณจะต้องผสานรวมโค้ดกับส่วนขยายที่เหลือ อัปเดตไฟล์ extension.ts และ package.json เพื่อทำให้ส่วนคำสั่งใหม่ของส่วนขยาย แล้วทำให้โค้ด VS สามารถเรียกใช้คำสั่งใหม่ได้

วิธีผสานรวมคำสั่งใหม่กับโค้ดส่วนขยาย

  1. ใน VS Code ให้เปิดไฟล์ flutter_theme_agent/src/extension.ts

  2. นำเข้าโค้ดคำสั่งใหม่ไปยังส่วนขยายโดยเพิ่มคำสั่งนำเข้าใหม่

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

  3. ลงทะเบียนคำสั่งใหม่โดยการเพิ่มโค้ดต่อไปนี้ลงในฟังก์ชัน activate()

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

  4. บันทึกการเปลี่ยนแปลงลงในไฟล์ extension.ts

วิธีผสานรวมคำสั่งชื่อกับแพ็กเกจส่วนขยาย

  1. ใน VS Code ให้เปิดไฟล์ flutter_theme_agent/package.json

  2. เพิ่มคำสั่งใหม่ลงในส่วน commands ของไฟล์แพ็กเกจ

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

  3. บันทึกการเปลี่ยนแปลงลงในไฟล์ package.json

ทดสอบคำสั่งใหม่

เมื่อเขียนโค้ดของคำสั่งและผสานรวมกับส่วนขยายเสร็จแล้ว คุณก็ทดสอบคำสั่งได้ คำสั่งใหม่จะใช้ได้เฉพาะในหน้าต่างโฮสต์การพัฒนาส่วนขยายของโค้ด VS และไม่ในหน้าต่างโค้ด VS ที่คุณแก้ไขโค้ดสำหรับส่วนขยาย

หากต้องการทดสอบคำสั่งที่แก้ไขแล้ว ให้ทำดังนี้

  1. ในหน้าต่างโปรเจ็กต์ส่วนขยาย VS Code ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง ซึ่งจะรีสตาร์ทหน้าต่างโฮสต์การพัฒนาส่วนขยายที่แยกต่างหาก
  2. ในหน้าต่าง Extension Development Host ของ VS Code ให้เปิดโปรเจ็กต์การพัฒนา Flutter
  3. ในหน้าต่างเดียวกัน ให้เปิดหน้าต่างตัวแก้ไขโค้ด พิมพ์ความคิดเห็นที่อธิบายคอมโพเนนต์อินเทอร์เฟซผู้ใช้ที่คุณต้องการ และเลือกข้อความความคิดเห็นนั้น
  4. เปิดพาเล็ตคำสั่งโดยเลือก View > Command Palette
  5. ในแผงคำสั่ง ให้พิมพ์ Flutter Theme แล้วเลือกคำสั่ง Flutter Theme Agent: My New Code Generator

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรเจ็กต์ Agent ธีม Flutter ได้ในที่เก็บโค้ด หากต้องการความช่วยเหลือในการสร้างแอปพลิเคชันหรือกำลังมองหาผู้ร่วมงานของนักพัฒนาซอฟต์แวร์ โปรดไปที่เซิร์ฟเวอร์ Google Developers Community Discord

แอปพลิเคชันเวอร์ชันที่ใช้งานจริง

หากคุณวางแผนที่จะทำให้ Agent ธีม Flutter ใช้งานได้สำหรับกลุ่มเป้าหมายขนาดใหญ่ โปรดทราบว่าการใช้งาน Google Gemini API อาจขึ้นอยู่กับการจำกัดอัตราและข้อจำกัดการใช้งานอื่นๆ หากคุณกำลังพิจารณาสร้างแอปพลิเคชันเวอร์ชันที่ใช้งานจริงด้วยโมเดล Gemini โปรดดูบริการ Vertex AI ของ Google Cloud เพื่อเพิ่มความสามารถในการปรับขนาดและความเสถียรของแอป