ใช้ Cursor AI ช่วยเขียนโค้ด: Backend กับ Frontend

ช่วงนี้ฮงใช้ Cursor AI ช่วยเขียนโค้ดอย่างเมามัน ❤️ คิดอะไรออกก็ให้ AI ทำให้หมด อยาก explore ดูว่าเราจะใช้ AI ช่วยทำซอฟต์แวร์ได้มากแค่ไหน

โพสต์นี้จะเน้นไปที่การทำฟีเจอร์เป็นหลัก ทั้งใน frontend และ backend

Backend

ฮงได้ลองใช้ใน project: scala, C#, kotlin ซึ่งต้องบอกว่า AI เข้าใจ context ของโปรเจคได้ดี รู้ syntax และข้อจำกัดของแต่ละภาษาได้ดี

การวางแผนการทำงาน

Code Structure ตรงไปตรงมาเป็น layer

AI วางแผนการแก้ไข เพิ่มโค้ด ย้ายโค้ดได้เป็นระเบียบ

ฮงให้ AI อธิบายแผนงานละเอียดยิบ โดยแบ่ง change ให้เล็ก เป็นหลายๆ commit:

• แต่ละไฟล์ แต่ละบรรทัด ต้องแก้อะไรบ้าง
• มี test ไหนต้องแก้ไข สำหรับ commit นั้นๆ

ซึ่งฮงออกแบบให้ทุก commit ready for production:

• ทุก commit ต้อง ทำงานได้ถูกต้อง
• test ผ่าน
• format ถูกต้อง

สรุป Backend

Usecase ของฮงในการเพิ่ม feature โดยไม่เพิ่ม library ใหม่ๆ ถือว่าโอเคมากๆ ไม่กังวลเลย

แต่ช่วงนี้ ฮงพึ่งเริ่มเลยรีวิวโค้ดหนักอยู่ check ทุก commit ละเอียดๆกันไปเลย ในอนาคต อาจจะปล่อยมากขึ้น เพราะว่ามั่นใจมากขึ้น

Frontend

frontend จะมี challenge นิดนึง นอกจากจะต้องทำให้ UI ถูกต้องตาม mockup design ใน Figma แล้ว เรายังต้องเขียนโค้ดให้ถูก pattern ใช้ UI component ของบริษัท ที่ AI ไม่มี context ด้วย

Challenges

ยกตัวอย่าง:

• React, React Context, API call
• การทำ Responsive
• Business logic ต่างๆ เช่น show/hide element

Challenge คือการเพิ่ม/แก้ไขโค้ด และของเดิมยังถูกต้อง มันไม่ง่ายอย่างที่คิดไว้

ปัญหาที่พบ

ทั้งยังต้องรีวิวโค้ดที่เขียนตลอด และเราคอยเช็คผลลัพธ์กับการแสดงผลจริง

บางครั้ง AI ก็วางแผนแบบ bottom-up ซึ่งกลายเป็นว่า โค้ดที่เขียนมาอาจจะยังไม่ถูกใช้

แล้วเราก็ต้องจินตนาการว่ามันจะ render เป็นอย่างไร และเราก็คิดว่าน่าจะถูกก็เลย ปล่อยให้ AI commit ซึ่งก็ไม่ make sense เพราะเราต้องกลับมาแก้อีก

วิธีแก้

ภาพที่ฮงมองไว้คือให้ AI ทำงานแบบ top-down แทน:

• สร้าง condition สำหรับ render
• เขียน component ง่ายๆ มาใช้
• ถ้าเงื่อนไขถูก แล้วค่อยไปเพิ่มรายละเอียด (ปกติฮงทำเองก็ทำแบบนี้นะ คิดว่าต้องถ่ายทอดให้ AI ทำด้วย)

สรุป Frontend

สามารถนำ AI มาใช้ทำ frontend ได้ มี challenge อยู่บ้างที่เราต้องปรับแก้ไข flow การทำงาน ให้:

• ทดสอบได้ง่าย
• เขียน test ได้ง่าย
• review ได้ง่าย

ใน version ถัดๆไป ฮงว่าน่าจะเจ๋งมากๆแน่

สิ่งที่อยากเสริม

ฮงว่า AI เก่งขึ้นมา เข้าใจ text และภาพได้ดีขึ้นเยอะ:

• วางแผนการทำงานก็เก่ง ทำ task breakdown
• หาข้อมูลเอง รัน test เองได้
• แก้ test ที่พังเองได้

การ explore ความสามารถของ AI ทำให้เราได้รู้ขีดความสามารถ รู้ว่างานไหน ที่เราสามารถมอบหมายให้ AI ทำได้

และเราก็ไปดูแลในส่วนที่เป็นภาพรวมมากขึ้น ทำงานในระดับทีมมากขึ้น

Sound Check ✅

ฮงอยากทำ knowledge sharing session เรื่องการใช้ AI ช่วยทำ Software เป็นกลุ่มเล็กๆไม่เกิน 10 คน ที่สำคัญ ฟรีด้วย

ถ้าใครสนใจ พิมพ์ “สนใจ” นะครับ เดี่ยวจะติดต่อไปครับ ❤️