Codex ในการใช้งานจริง: การพัฒนา WeChat Mini Program แบบไม่ต้องเขียนโค้ด

เมื่อเร็วๆ นี้ เพื่อนๆ สายศิลป์หลายคนเริ่มลองใช้ Codex เพื่อพัฒนาโปรเจกต์ของตัวเอง

สองบทความก่อนหน้านี้พูดถึงวิธีการใช้ Codex ส่วนบทความนี้เน้นการใช้งานจริง: วิธีใช้สร้าง Mini Program บน WeChat

ก่อนอื่น มาดูผลลัพธ์กัน ครั้งนี้เราสร้าง Mini Program เช็คอินการอ่านชื่อ "One Page" ด้านล่างคืออินเทอร์เฟซการทำงานใน WeChat Developer Tools

กระบวนการทั้งหมดตั้งแต่แนวคิดจนถึง Mini Program ที่ใช้งานได้ แบ่งออกเป็นขั้นตอนดังนี้:

ออกแบบต้นแบบใน Figma → สร้างโค้ดด้วย Codex → จำลองใน Developer Tools → ดูตัวอย่างบนมือถือ → ส่งตรวจสอบและเผยแพร่

Figma ใช้กำหนดหน้าตาของแต่ละหน้าและปุ่มนำทางไปที่ไหน Codex เขียนแบบเป็นโค้ด WeChat Developer Tools ใช้รัน ตรวจสอบ และส่ง Mini Program ไปดูตัวอย่างบนมือถือ หลังจากเตรียมบัญชี Mini Program ของตัวเองแล้ว ก็ส่งตรวจสอบและเผยแพร่ผ่านระบบหลังบ้านของ WeChat

1. Figma คืออะไร และทำไมต้องใช้มันก่อน?

Figma เป็นเครื่องมือออกแบบอินเทอร์เฟซและการทำงานร่วมกัน มักใช้ในการออกแบบหน้าสำหรับแอป เว็บไซต์ และ Mini Program นักออกแบบใช้มันเพื่อจัดวางเลย์เอาต์ สี และปุ่ม ผู้จัดการผลิตภัณฑ์ใช้เพื่อหารือเกี่ยวกับขั้นตอนการทำงาน นักพัฒนาใช้เพื่อดูขนาด ระยะห่าง และทรัพยากรในการออกแบบเพื่อสร้างหน้า

นอกจากนี้ยังสามารถสร้างต้นแบบผลิตภัณฑ์ที่คลิกได้ เช่น การเชื่อมโยงปุ่มบนหน้าแรกไปยังอีกหน้า เพื่อให้คลิกแล้วเกิดการเปลี่ยนหน้า ทำให้คุณสามารถทดสอบล่วงหน้าว่าการทำงานลื่นไหลหรือไม่

นี่คือสิ่งที่เราใช้ในครั้งนี้ ก่อนที่จะเขียนโค้ด คุณสามารถดูหลายหน้าพร้อมกันและหารือว่าปุ่มวางเหมาะสมหรือไม่ หรือหน้าจอแน่นเกินไปหรือเปล่า

ก่อนหน้านี้ แบบร่างนี้มักจะถูกส่งต่อให้นักพัฒนา ตอนนี้คุณสามารถส่งแบบที่ยืนยันแล้วให้ Codex เพื่อเขียนโค้ด นักออกแบบสามารถเริ่มจาก Figma ที่คุ้นเคย ส่วนคนที่ใช้ Codex อยู่แล้วก็ให้มันสร้างแบบร่างก่อน แล้วค่อยปรับใน Figma

นี่คือวิธีที่ "One Page" ถูกสร้างขึ้น เรากำหนดสามหน้าหลักก่อน—ชั้นหนังสือ, บันทึก, และสถิติ—แล้วจึงปรับโทนสีและเลย์เอาต์ให้เป็นหนึ่งเดียว

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

ขั้นตอนนี้เกี่ยวกับภาพรวมทั้งหมด เมื่อคุณพอใจกับสี ขนาดตัวอักษร และการจัดเรียงหน้าแล้ว ก็เดินหน้าต่อ

2. ให้ Codex สร้างแบบร่างและทำต้นแบบใน Figma ให้เสร็จ

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

บอกความต้องการและทิศทางภาพให้ Codex พร้อมกัน:

1ฉันต้องการสร้าง Mini Program บน WeChat ชื่อ "One Page" สำหรับเช็คอินการอ่าน
2กรุณาออกแบบสามหน้าก่อน: หน้าแรกชั้นหนังสือ, บันทึกการอ่าน, และสถิติการอ่าน ยังไม่ต้องเขียนโค้ดฟังก์ชัน
3
4สไตล์ภาพควรเหมือนสมุดบันทึกการอ่านที่เงียบสงบ:
5พื้นหลังสีขาวครีม ข้อความสีน้ำเงินเข้ม พื้นที่สำคัญสีเขียวอ่อน มีพื้นที่ว่างมาก
6หน้าแรกควรเน้นหนังสือที่กำลังอ่านและจุดเข้าไปบันทึก หน้าอื่นๆ ควรรักษาสไตล์ภาพเดียวกัน
7ใช้กราฟิกเรขาคณิตดั้งเดิมสำหรับปกหนังสือ ใช้เนื้อหาสมมติสำหรับหนังสือตัวอย่าง
8
9ก่อนอื่น ให้ภาพตัวอย่างของสามหน้าวางเคียงกัน
10และส่งออกไฟล์ SVG ขนาด 390×844 แยกสามไฟล์ โดยคงกลุ่มข้อความ กราฟิก และปุ่มไว้ เพื่อปรับแต่งใน Figma ต่อได้ กรุณาตั้งชื่อปุ่มหลักแยกกัน

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

หลังจากได้แบบร่างแล้ว ให้แก้ไขจนพอใจ ยิ่งระบุรายละเอียดมากเท่าไหร่ก็ยิ่งดี เช่น "ย่อขนาดหัวข้อหน้าแรกหน่อย" "ทำให้ปุ่มหลักเป็นสีน้ำเงินเข้มเหมือนกัน" หรือ "ทำให้ปกหนังสือใหญ่ขึ้น" เมื่อทั้งสามหน้าเป็นที่น่าพอใจแล้ว ก็จัดการปฏิสัมพันธ์ของต้นแบบ

นำแบบไปใส่ใน Figma

เปิดไฟล์ Figma Design คลิก "+" ข้าง Pages ทางซ้าย แล้วสร้างหน้าใหม่

ในตัวอย่างนี้ การนำเข้าทำได้โดยคัดลอกเนื้อหา SVG แล้ววางลงบนผืนผ้าใบ Figma ตั้งชื่ออาร์ตบอร์ดทั้งสามว่า "01-หน้าแรกชั้นหนังสือ" "02-บันทึกการอ่าน" และ "03-สถิติการอ่าน" และจัดเรียงในแนวนอน หลังจากเลือกอาร์ตบอร์ดแล้ว ให้ตรวจสอบความกว้างและความสูงในแผง Design ทางขวา

ถ้าเป็นครั้งแรกที่เปิด Figma ให้สังเกตพื้นที่เหล่านี้: รายการ Layers ทางซ้าย, ผืนผ้าใบตรงกลาง, แผง Design ทางขวาสำหรับลักษณะที่ปรากฏ และ Prototype สำหรับตั้งค่าปฏิสัมพันธ์ ในการเปลี่ยนข้อความหรือปุ่มใดๆ ให้เลือกในรายการ Layers ก่อน

อย่าลืมตรวจสอบฟอนต์หลังจากนำเข้า ฟอนต์อาจถูกเปลี่ยนขึ้นอยู่กับสภาพแวดล้อม ซึ่งอาจเปลี่ยนการตัดคำของหัวข้อและความกว้างของข้อความ การเรนเดอร์ฟอนต์ในแบบร่างและ Mini Program ครั้งนี้แตกต่างกัน จึงต้องตรวจสอบแยกกัน

เพิ่มการเชื่อมโยงไปยังปุ่ม

ยกตัวอย่างการ์ด "อ่านต่อ" บนหน้าแรก เลือกมัน สลับไปที่ Prototype ที่มุมขวาบน แล้วคลิก "+" ข้าง Interactions

ในแผง Interaction ที่ปรากฏ ให้ตั้งค่าสามตัวเลือกนี้:

• Trigger: เลือก "On click"
• Action: เลือก "Navigate to"
• Destination: เลือก "02-บันทึกการอ่าน" (อาร์ตบอร์ดเป้าหมาย)

ปุ่มบันทึกบนหน้าบันทึกเชื่อมโยงกลับไปยังหน้าแรก และไอคอนสถิติบนหน้าแรกเชื่อมโยงไปยังหน้าสถิติ รูปด้านล่างแสดงการตั้งค่าสำหรับจุดเข้าไปยังสถิติ

คลิกไอคอน "Present" รูปสามเหลี่ยมที่มุมขวาบนเพื่อเปิดตัวอย่างต้นแบบ คลิกจากหน้าแรกและกลับมาเพื่อทดสอบเส้นทางระหว่างหน้า

ต้นแบบ Figma แสดงการเชื่อมโยง ส่วนการป้อนข้อมูลจริง การบันทึก และการอัปเดตข้อมูลจะถูกดำเนินการโดยโค้ด Mini Program ในขั้นตอนถัดไป

3. ออกแบบเสร็จแล้ว จะใช้ MCP ที่ไหน?

MCP ใช้ในขั้นตอนการส่งแบบ Figma ให้ Codex เมื่อเชื่อมต่อแล้ว Codex สามารถอ่านโครงสร้างการออกแบบ สไตล์ และทรัพยากรของอาร์ตบอร์ดที่เลือก และดำเนินการต่อตามแบบร่าง

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

1กรุณาอ่านบริบทการออกแบบและภาพหน้าจอของอาร์ตบอร์ดนี้ผ่าน Figma MCP
2ก่อนอื่น อธิบายโครงสร้างหน้า ขนาดตัวอักษร สี ระยะห่าง และทรัพยากรที่คุณอ่านได้
3บอกให้ชัดเจนถ้ามีส่วนที่อ่านไม่ได้ อย่าเดา
4
5จากนั้น เราจะสร้าง Mini Program ดั้งเดิมของ WeChat โดยใช้ WXML, WXSS, JavaScript และ JSON
6กรุณาดำเนินการตามสแต็กเทคโนโลยีนี้ โดยใช้สไตล์และทรัพยากรที่มีอยู่แล้วในโปรเจกต์
7ทำให้หน้าแรกเสร็จก่อน แล้วค่อยทำหน้าอื่นๆ หลังจากยืนยัน

อย่าลืมระบุ "Mini Program ดั้งเดิมของ WeChat" ข้อมูลการออกแบบจาก Figma ต้องนำไปใช้ตามแพลตฟอร์มเป้าหมาย คุณไม่สามารถใช้โค้ดเว็บสำหรับ Mini Program ได้

ในตัวอย่างนี้ แบบถูกนำเข้าไปยัง Figma ผ่าน SVG และโค้ดก็ใช้ไฟล์ออกแบบและทรัพยากรเดียวกัน MCP เป็นวิธีเชื่อมต่อเมื่อมีแบบร่าง Figma อยู่แล้ว ไม่ว่าจะใช้วิธีใด สิ่งที่ส่งให้ Codex ควรเป็นแบบที่ยืนยันแล้ว

4. เขียนแบบลงใน Mini Program

เปิดโฟลเดอร์โปรเจกต์ใน Codex วางไฟล์ออกแบบและทรัพยากรปกหนังสือ แล้วเริ่มดำเนินการ

ในขั้นตอนนี้ นอกจากระบุเทคโนโลยีแล้ว คุณต้องบอกให้ชัดเจนว่าต้องการอะไร: โปรเจกต์ที่สามารถนำเข้าไปยัง WeChat Developer Tools ได้โดยตรง

1กรุณาทำ Mini Program ดั้งเดิมของ WeChat ให้เสร็จตามแบบ "One Page" ที่ยืนยันแล้ว
2
3ใช้ WXML, WXSS, JavaScript และ JSON
4วางโค้ดในโฟลเดอร์ miniprogram และให้ app.json และ project.config.json เพื่อให้สามารถนำเข้าไปยัง WeChat Developer Tools ได้โดยตรง
5
6ทำให้หน้าชั้นหนังสือ, บันทึกการอ่าน, สถิติ และเพิ่มหนังสือเสร็จ
7ทำตามโทนสี เลย์เอาต์ และทรัพยากรปกหนังสือดั้งเดิมที่ยืนยันแล้ว
8บันทึกข้อมูลในเครื่องโดยใช้ wx.setStorageSync ชั่วคราว และอ่านเมื่อเปิดใหม่
9เพิ่มการตรวจสอบอินพุต สถานะว่าง และข้อความแจ้งเตือนเมื่อบันทึกไม่สำเร็จ
10
11ตรวจสอบโค้ดเมื่อเสร็จ และบอกฉันว่าควรนำเข้าไดเรกทอรีไหนและคอมไพล์อย่างไร
12ถ้ามีสิ่งที่ฉันต้องกำหนดค่า กรุณาแยกรายการไว้

ในโปรเจกต์ที่ Codex สร้างขึ้น WXML จัดการโครงสร้างหน้า WXSS จัดการสไตล์ JavaScript จัดการการคลิกและการบันทึก และ JSON กำหนดค่าเส้นทางหน้า เมื่อคุณรู้ว่าแต่ละไฟล์ทำอะไร ก็จะเข้าใจไดเรกทอรีที่ส่งมา

อย่ากังวลตรงนี้ แค่ให้ Codex แก้ปัญหาให้คุณ คุณไม่จำเป็นต้องเข้าใจโค้ด แค่คัดลอกพรอมต์ วางแบบร่างของคุณ แล้วเปลี่ยนเป็นชื่อของคุณเอง

5. ใส่ใน WeChat Developer Tools และดูว่ามันทำงานหรือไม่

หลังจากติดตั้งและเข้าสู่ระบบ WeChat Developer Tools แล้ว เลือก "Import Project" จากเมนู "Project" และหาโฟลเดอร์ miniprogram ที่ Codex สร้างขึ้น

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

คลิก "Create" เข้าไปในโปรเจกต์ แล้วรอการคอมไพล์ เมื่อซิมูเลเตอร์ทางขวาแสดงหน้า คุณสามารถใช้งานด้วยเมาส์ได้ทันที หลังจาก Codex แก้ไขโค้ด ให้คอมไพล์ใหม่เพื่อดูผลลัพธ์

ตรงนี้ ให้ตรวจสอบสามสิ่งหลัก: หน้าต่างๆ วางไม่ตรงแนวหรือไม่ ปุ่มนำไปยังหน้าที่ถูกต้องหรือไม่ และเนื้อหาที่ป้อนสามารถบันทึกได้หรือไม่ นอกจากนี้ ให้เปลี่ยนขนาดหน้าจอของซิมูเลเตอร์เพื่อดูว่าหัวข้อที่ยาว กล่องอินพุต และแถบนำทางด้านล่างแน่นเกินไปหรือไม่

ถ้าเกิดปัญหา ให้ส่งข้อความแสดงข้อผิดพลาดหรือภาพหน้าจอให้ Codex พร้อมกับสิ่งที่คุณเพิ่งทำและสิ่งที่คาดหวัง เช่น:

1นี่คือภาพหน้าจอข้อผิดพลาดใน WeChat Developer Tools
2เมื่อฉันเข้าสู่หน้าบันทึกจากหน้าแรก ปกหนังสือไม่แสดง
3กรุณาตรวจสอบเส้นทางรูปภาพและจังหวะการโหลดหน้า แก้ไขโดยคงเลย์เอาต์เดิมไว้

ในกรณีนี้ เราพบปัญหาการโหลดรูปภาพ: โค้ดเริ่มต่อที่อยู่รูปภาพก่อนที่ข้อมูลหน้าจะพร้อม ทำให้ชื่อปกหนังสือหายไปในเส้นทาง การบอกให้โค้ดรอให้ข้อมูลพร้อมก่อนจึงแสดงรูปภาพก็แก้ปัญหาได้

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

6. จากซิมูเลเตอร์คอมพิวเตอร์ไปจนถึงการดูตัวอย่างบนมือถือและเผยแพร่

เมื่อมันทำงานบนคอมพิวเตอร์แล้ว ให้ตรวจสอบบนมือถือ

ใช้ AppID ที่มีสิทธิ์เหมาะสม คลิก "Preview" ที่ด้านบนของ developer tools รอให้ QR code ถูกสร้างขึ้น แล้วสแกนด้วยบัญชี WeChat ที่ได้รับอนุญาต ให้ความสำคัญกับขนาดตัวอักษรบนมือถือ แป้นพิมพ์บังพื้นที่อินพุตเมื่อปรากฏขึ้นหรือไม่ และปุ่มด้านล่างเข้าถึงง่ายหรือไม่

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

เมื่อคุณพร้อมให้เพื่อนลองใช้ คลิก "Upload" ที่ด้านบนของ developer tools จากนั้นไปที่ระบบหลังบ้าน Mini Program ของ WeChat Official Accounts Platform เข้าไปที่ Version Management หาเวอร์ชันพัฒนาที่เกี่ยวข้อง ตั้งเป็น Trial Version และเพิ่มสมาชิกทดสอบ สมาชิกทดสอบต้องมีสิทธิ์ที่เหมาะสม

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

ตัวอย่างนี้ถึงขั้นตอนที่สามารถรันใน developer tools ได้แล้ว ผู้อ่านสามารถดำเนินการดูตัวอย่างบนมือถือ อัปโหลด และส่งตรวจสอบโดยใช้บัญชี Mini Program ของตัวเอง

เชื่อมโยงกระบวนการทั้งหมด

ก่อนอื่น ใช้ Figma เพื่อกำหนดหน้าและการเชื่อมโยงปุ่มจนกว่าคุณจะพอใจกับการออกแบบ จากนั้นส่งไฟล์ออกแบบหรือลิงก์อาร์ตบอร์ดให้ Codex เพื่อเขียนเป็น Mini Program บน WeChat จากนั้นนำเข้าไปยัง developer tools เพื่อจำลอง รัน และตรวจสอบข้อผิดพลาด สุดท้าย ดูตัวอย่างบนมือถือและอัปโหลด ตรวจสอบ และเผยแพร่หลังจากยืนยัน

ในอนาคต ไม่ว่าคุณจะทำเครื่องมือเช็คอิน แอปสูตรอาหาร หรือยูทิลิตี้ขนาดเล็กอื่นๆ คุณยังสามารถทำตามขั้นตอนการทำงานนี้ได้ ถ้าการออกแบบไม่เป็นที่น่าพอใจ ให้กลับไปที่ Figma เพื่อปรับ ถ้ามีปัญหาฟังก์ชัน ให้ส่งการทำงานเฉพาะและข้อผิดพลาดให้ Codex แล้วยืนยันผลการแก้ไขใน developer tools

ฉันคือ Miles ผู้เชี่ยวชาญด้านอัลกอริทึม AI ที่ย้ายจากบริษัทเทคโนโลยียักษ์ใหญ่สู่ FDE ฉันทำงานด้าน R&D อัลกอริทึม การเพิ่มประสิทธิภาพและการปรับใช้ รวมถึงการฝึกอบรมองค์กร ติดตามฉัน @miles_mazy เพื่อ เติบโตไปด้วยกันและหาเงินไปด้วยกัน