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

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

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

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

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

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

การตั้งค่าโปรเจ็กต์

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

ติดตั้งสิ่งที่ต้องมีก่อน

โปรเจ็กต์ Flutter Theme Agent ทำงานเป็นส่วนขยายของ Microsoft โค้ด Visual Studio (VS Code) และการใช้งาน 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. ไปที่ไดเรกทอรีรูทของโปรเจ็กต์ Flutter Theme Agent

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

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

    npm install

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

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

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

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือก File > หน้าต่างใหม่
  3. เปิดโปรเจ็กต์ Agent ธีม Flutter โดยเลือกไฟล์ > เปิดโฟลเดอร์ และเลือกโฟลเดอร์ flutter_theme_agent/
  4. เปิดไฟล์ flutter_theme_agent/package.json ใน VS Code
  5. เรียกใช้ส่วนขยายในโหมดแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > เริ่มแก้ไขข้อบกพร่อง ขั้นตอนนี้จะเปิดหน้าต่าง Extension Development Host ของ VS แยกต่างหาก
  6. เปิดการตั้งค่า VS Code โดยเลือก Code > การตั้งค่า > การตั้งค่า
  7. รับ คีย์ API ของ Google Gemini จากเว็บไซต์ 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. เขียนโค้ดในหน้าต่าง Extension Development Host ของ VS Code ความคิดเห็นที่อธิบายคอมโพเนนต์อินเทอร์เฟซผู้ใช้ที่คุณต้องการสร้าง
  2. เลือกข้อความความคิดเห็นที่มีลักษณะเฉพาะของคอมโพเนนต์
  3. เปิดพาเล็ตคำสั่งโดยเลือก มุมมอง > แผงคำสั่ง
  4. ในแผงคำสั่ง ให้พิมพ์ Flutter Theme แล้วเลือกรายการใดรายการหนึ่ง ที่มีคำนำหน้าดังกล่าว

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

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

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

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

วิธีเตรียมแก้ไขคำสั่ง buttonstyle.ts:\

  1. เริ่มต้นแอปพลิเคชัน VS Code
  2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือก File > หน้าต่างใหม่
  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 คงที่ ให้เพิ่มอีกตัวอย่างหนึ่งของรูปแบบคำสั่งและเอาต์พุต หรือ แทนที่ตัวอย่างที่มีอยู่

    ...
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 ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดย เลือก Run > รีสตาร์ทการแก้ไขข้อบกพร่อง

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

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

  3. เปิดพาเล็ตคำสั่งโดยเลือก มุมมอง > แผงคำสั่ง

  4. ในแผงคำสั่ง ให้พิมพ์ Flutter และเลือกธีม Flutter ตัวแทน: สร้างคำสั่ง Flutter ButtonStyle

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

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

ภาพหน้าจอของ Flutter Theme Agent พร้อมคำสั่งใหม่

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

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

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

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

  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. เปิดไฟล์ flutter_theme_agent/src/extension.ts ใน VS Code

  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. เปิดไฟล์ flutter_theme_agent/package.json ใน VS Code

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

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

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

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

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

วิธีทดสอบคำสั่งที่แก้ไขแล้ว

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

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

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

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

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