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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   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. เรียกใช้คำสั่งติดตั้งเพื่อดาวน์โหลดไลบรารีและกำหนดค่าโปรเจ็กต์

   npm install
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. เริ่มแอปพลิเคชัน VS Code
2. ใน VS Code ให้สร้างหน้าต่างใหม่โดยเลือกไฟล์ > หน้าต่างใหม่
3. เปิดโปรเจ็กต์ Flutter Theme Agent โดยเลือกไฟล์ > เปิดโฟลเดอร์ แล้วเลือกโฟลเดอร์ 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 ให้รีสตาร์ทโปรแกรมแก้ไขข้อบกพร่องโดยเลือกเรียกใช้ > รีสตาร์ทการแก้ไขข้อบกพร่อง

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

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

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

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

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

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

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

ชุดวิธีการนี้จะอธิบายวิธีสร้างคําสั่งใหม่โดยใช้โค้ดของคําสั่งที่มีอยู่ 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. ทำการเปลี่ยนแปลงเหล่านี้ซ้ำสำหรับตัวอย่างที่ 2 ในสตริง 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 Code ให้เรียกใช้คำสั่งใหม่ได้

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

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

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

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

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

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

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

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

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

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