ในช่วงสองปีที่ผ่านมา ทีมของฉันที่ Work & Co และฉันได้ทดสอบและค่อยๆ ผสานรวมเครื่องมือการเขียนโค้ด AI เช่น Copilot, Cursor, Claude และ ChatGPT เพื่อช่วยเราจัดส่งประสบการณ์เว็บที่คนจำนวนมากใช้ เป็นที่ยอมรับว่าหลังจากความสงสัยในช่วงแรกและช่วงเวลาสั้นๆ เครื่องมือ AI ต่างๆ ก็ค้นพบช่องทางในการใช้งานประจำวันของฉัน เมื่อเวลาผ่านไป รายการแอปพลิเคชันที่เราพบว่าสมเหตุสมผลที่จะปล่อยให้ AI เข้ามาแทนที่เริ่มมีจำนวนเพิ่มขึ้น ฉันจึงตัดสินใจแบ่งปันกรณีการใช้งานจริงสำหรับเครื่องมือ AI สำหรับสิ่งที่ฉันเรียกว่า “นักพัฒนาที่รับผิดชอบ” นักพัฒนาที่มีความรับผิดชอบหมายถึงอะไร? เราต้องทำให้แน่ใจว่าเราได้ส่งมอบโค้ดที่มีคุณภาพตามที่ผู้มีส่วนได้ส่วนเสียและลูกค้าของเราคาดหวัง การมีส่วนร่วมของเรา (เช่น คำขอดึงข้อมูล) ไม่ควรกลายเป็นภาระแก่เพื่อนร่วมงานของเราที่จะต้องตรวจสอบและทดสอบงานของเรา นอกจากนี้ ในกรณีที่คุณทำงานให้กับบริษัท: เครื่องมือที่เราใช้จะต้องได้รับการอนุมัติจากนายจ้างของเรา ประเด็นที่ละเอียดอ่อน เช่น ความปลอดภัยและความเป็นส่วนตัว จำเป็นต้องได้รับการจัดการอย่างถูกต้อง: อย่าวางข้อมูลลับ ข้อมูลลูกค้า (PII) หรือรหัสที่เป็นกรรมสิทธิ์ลงในเครื่องมือโดยไม่ได้รับการอนุมัติตามนโยบาย ปฏิบัติต่อมันเหมือนโค้ดจากคนแปลกหน้าบนอินเทอร์เน็ต ทดสอบและตรวจสอบอยู่เสมอ หมายเหตุ: บทความนี้จะกล่าวถึงความคุ้นเคยขั้นพื้นฐานกับเครื่องมือการเขียนโค้ด AI เช่น Copilot ภายใน VSCode หรือ Cursor หากทั้งหมดนี้ฟังดูใหม่และไม่คุ้นเคยสำหรับคุณ วิดีโอบทช่วยสอน Github Copilot อาจเป็นจุดเริ่มต้นที่ยอดเยี่ยมสำหรับคุณ
การใช้งานเครื่องมือเข้ารหัส AI ที่เป็นประโยชน์ หมายเหตุ: ตัวอย่างต่อไปนี้จะเน้นที่การทำงานบนเว็บแอปพลิเคชันที่ใช้ JavaScript เป็นหลัก เช่น React, Vue, Svelte หรือ Angular ทำความเข้าใจกับ Codebase ที่ไม่คุ้นเคย ไม่ใช่เรื่องแปลกที่จะทำงานกับโค้ดเบสที่จัดตั้งขึ้น และการเข้าร่วมโค้ดเบสแบบเดิมขนาดใหญ่อาจเป็นเรื่องที่น่ากลัวได้ เพียงเปิดโปรเจ็กต์และตัวแทน AI ของคุณ (ในกรณีของฉันคือ Copilot Chat ใน VSCode) และเริ่มถามคำถามเหมือนกับที่คุณถามเพื่อนร่วมงาน โดยทั่วไปแล้ว ฉันชอบพูดคุยกับตัวแทน AI เช่นเดียวกับที่คุยกับเพื่อนมนุษย์ นี่คือตัวอย่างพร้อมท์ที่ละเอียดยิ่งขึ้น: “ให้ภาพรวมสถาปัตยกรรมระดับสูงแก่ฉัน: จุดเข้าใช้งาน, การกำหนดเส้นทาง, การรับรองความถูกต้อง, ชั้นข้อมูล, เครื่องมือสร้าง จากนั้นแสดงรายการไฟล์ 5 ไฟล์ที่จะอ่านตามลำดับ ถือว่าคำอธิบายเป็นเพียงสมมติฐานและยืนยันด้วยการข้ามไปยังไฟล์อ้างอิง”
คุณสามารถถามคำถามต่อเนื่องได้ เช่น “รายละเอียดการกำหนดเส้นทางทำงานอย่างไร” หรือ “พูดคุยกับฉันเกี่ยวกับกระบวนการและวิธีการตรวจสอบสิทธิ์” แล้วสิ่งนี้จะนำคุณไปสู่คำแนะนำที่เป็นประโยชน์ในการส่องแสงสว่างเข้าไปในความมืดของโค้ดเบสที่ไม่คุ้นเคย Triaging ทำลายการเปลี่ยนแปลงเมื่ออัพเกรดการพึ่งพา การอัปเดตแพ็กเกจ npm โดยเฉพาะอย่างยิ่งเมื่อมีการเปลี่ยนแปลงที่เสียหาย อาจเป็นงานที่น่าเบื่อและใช้เวลานาน และทำให้คุณดีบักการถดถอยในจำนวนที่พอเหมาะ ฉันเพิ่งอัปเกรดไลบรารีการแสดงภาพข้อมูล plotly.js ให้เป็นเวอร์ชันหลักหนึ่งเวอร์ชันจากเวอร์ชัน 2 เป็น 3 และด้วยเหตุนี้ การติดป้ายกำกับแกนในกราฟบางกราฟจึงหยุดทำงาน ฉันถาม ChatGPT ต่อไป: “ฉันอัปเดตโปรเจ็กต์ Angular ที่ใช้ Plotly ฉันอัปเดต plotly.js — dist package จากเวอร์ชัน 2.35.2 เป็น 3.1.0 — และตอนนี้ป้ายกำกับบนแกน x และ y หายไป เกิดอะไรขึ้น”
เจ้าหน้าที่กลับมาพร้อมกับวิธีแก้ปัญหาทันที (ดูตัวคุณเองด้านล่าง) หมายเหตุ: ฉันยังคงตรวจสอบคำอธิบายกับคู่มือการย้ายข้อมูลอย่างเป็นทางการก่อนจัดส่งโปรแกรมแก้ไข
การจำลอง Refactors ข้ามไฟล์อย่างปลอดภัย ฐานโค้ดที่เพิ่มขึ้นเผยให้เห็นโอกาสในการรวมโค้ดอย่างแน่นอน ตัวอย่างเช่น คุณสังเกตเห็นว่าโค้ดซ้ำกันในไฟล์ต่างๆ ที่สามารถแยกออกเป็นฟังก์ชันหรือส่วนประกอบเดียวได้ ด้วยเหตุนี้คุณจึงตัดสินใจสร้างองค์ประกอบที่ใช้ร่วมกันซึ่งสามารถรวมไว้แทนและดำเนินการรีแฟคเตอร์นั้นในไฟล์เดียว ตอนนี้ แทนที่จะดำเนินการเปลี่ยนแปลงเหล่านั้นกับไฟล์ที่เหลือของคุณด้วยตนเอง คุณขอให้ตัวแทนของคุณเผยแพร่การปรับโครงสร้างใหม่ให้กับคุณ ตัวแทนให้คุณเลือกหลายไฟล์เป็นบริบท เมื่อการรีแฟคเตอร์สำหรับไฟล์เดียวเสร็จสิ้น ฉันสามารถเพิ่มทั้งไฟล์ที่ถูกรีแฟคเตอร์และไฟล์ที่ยังไม่ได้แตะต้องลงในบริบท และแจ้งให้เอเจนต์เปิดตัวการเปลี่ยนแปลงในไฟล์อื่นดังนี้: “จำลองการเปลี่ยนแปลงที่ฉันทำในไฟล์ A ไปยังไฟล์ B ด้วยเช่นกัน” การใช้คุณสมบัติในเทคโนโลยีที่ไม่คุ้นเคย หนึ่งในช่วงเวลาที่ฉันชอบที่สุดโดยใช้เครื่องมือเข้ารหัส AI คือตอนที่มันช่วยให้ฉันสร้างแอนิเมชันการไล่ระดับสีที่ค่อนข้างซับซ้อนใน GLSL ซึ่งเป็นภาษาที่ฉันค่อนข้างไม่คุ้นเคย ในโปรเจ็กต์ล่าสุด นักออกแบบของเราได้ใช้การไล่ระดับสีแบบเคลื่อนไหวเป็นสถานะการโหลดบนวัตถุ 3 มิติ ฉันชอบแนวคิดนี้มากและต้องการส่งมอบสิ่งที่เป็นเอกลักษณ์และน่าตื่นเต้นให้กับลูกค้าของเรา ที่ปัญหา: ฉันมีเวลาเพียงสองวันในการดำเนินการ และ GLSL มีช่วงการเรียนรู้ที่ค่อนข้างสูง ขอย้ำอีกครั้งว่าเครื่องมือ AI (ในกรณีนี้คือ ChatGPT) มีประโยชน์มาก และฉันเริ่มเพียงแค่ขอให้มันสร้างไฟล์ HTML แบบสแตนด์อโลนสำหรับฉัน ซึ่งแสดงผืนผ้าใบและการไล่ระดับสีแบบเคลื่อนไหวที่เรียบง่ายมาก ทีละขั้นตอน ฉันแจ้งให้ AI เพิ่มความละเอียดลงไปอีกจนกว่าฉันจะได้ผลลัพธ์ที่เหมาะสม เพื่อที่ฉันจะได้เริ่มรวม Shader เข้ากับ Codebase จริงของฉันได้ ผลลัพธ์ที่ได้: ลูกค้าของเราพึงพอใจเป็นอย่างยิ่ง และเราส่งมอบฟีเจอร์ที่ซับซ้อนได้ภายในเวลาอันสั้น ต้องขอบคุณ AI การทดสอบการเขียน จากประสบการณ์ของผม โปรเจ็กต์มีเวลาไม่เพียงพอที่จะเขียนและบำรุงรักษาชุดการทดสอบหน่วยและบูรณาการที่เหมาะสมอย่างต่อเนื่อง และยิ่งไปกว่านั้น Developer จำนวนมากไม่ชอบงานเขียนการทดสอบจริงๆ การแจ้งให้ผู้ช่วย AI ของคุณตั้งค่าและเขียนการทดสอบให้กับคุณนั้นเป็นไปได้ทั้งหมดและสามารถทำได้ภายในระยะเวลาอันสั้น แน่นอนว่า คุณในฐานะนักพัฒนาควรตรวจสอบให้แน่ใจว่าการทดสอบของคุณพิจารณาส่วนสำคัญของแอปพลิเคชันของคุณจริงๆ และปฏิบัติตามหลักการทดสอบที่สมเหตุสมผล แต่คุณสามารถ "จ้างบุคคลภายนอก" ในการเขียนการทดสอบให้กับผู้ช่วย AI ของเราได้ พรอมต์ตัวอย่าง: “เขียนการทดสอบหน่วยสำหรับฟังก์ชันนี้โดยใช้ Jest ครอบคลุม happy path, edge case และโหมดความล้มเหลว อธิบายว่าเหตุใดจึงมีการทดสอบแต่ละรายการ”
คุณยังสามารถส่งต่อแนวทางปฏิบัติที่ดีที่สุดในการทดสอบของกูรูด้านการทดสอบ Kent C. Dodds เพื่อเป็นแนวทางให้กับตัวแทนของคุณได้ ดังตัวอย่างด้านล่าง:
เครื่องมือภายใน ค่อนข้างคล้ายกับตัวอย่างเชเดอร์ที่กล่าวถึงก่อนหน้านี้ ฉันเพิ่งได้รับมอบหมายให้วิเคราะห์การทำซ้ำโค้ดในโค้ดเบส และเปรียบเทียบก่อนและหลังการรีแฟคเตอร์ แน่นอนว่าไม่ใช่เรื่องเล็กน้อยหากคุณไม่ต้องการเสียเวลาในการเปรียบเทียบไฟล์ด้วยตนเอง ด้วยความช่วยเหลือของ Copilot ฉันได้สร้างสคริปต์ที่วิเคราะห์การทำซ้ำโค้ดสำหรับฉัน จัดเรียงและเรียงลำดับเอาต์พุตในตาราง และส่งออกไปยัง Excel จากนั้นฉันก็ก้าวไปอีกขั้น เมื่อการปรับโครงสร้างโค้ดของเราเสร็จสิ้น ฉันแจ้งให้ตัวแทนใช้แผ่นงาน Excel ที่มีอยู่ของฉันเป็นพื้นฐาน เพิ่มสถานะปัจจุบันของการทำซ้ำในคอลัมน์ที่แยกจากกัน และคำนวณเดลต้า การอัปเดตโค้ดที่เขียนเมื่อนานมาแล้ว เมื่อเร็วๆ นี้ ลูกค้าเก่าของฉันติดต่อฉัน เนื่องจากเมื่อเวลาผ่านไป ฟีเจอร์บางอย่างทำงานไม่ถูกต้องบนเว็บไซต์ของเขาอีกต่อไป สิ่งที่จับได้: เว็บไซต์นี้สร้างขึ้นเมื่อเกือบสิบปีก่อน และ JavaScript และ SCSS ใช้เครื่องมือคอมไพล์ที่ค่อนข้างเก่า เช่น needJS และการตั้งค่าจำเป็นต้องใช้ Node.js เวอร์ชันเก่าซึ่งไม่สามารถทำงานบน MacBook ปี 2025 ของฉันด้วยซ้ำ การอัปเดตกระบวนการสร้างทั้งหมดด้วยตนเองอาจใช้เวลาหลายวัน ดังนั้นฉันจึงตัดสินใจแจ้งตัวแทน AI ว่า “คุณช่วยอัปเดตกระบวนการสร้าง JS และ SCSS ให้เป็นสแต็กแบบ Lean ปี 2025 เช่น Vite ได้ไหม” แน่นอนว่าเป็นเช่นนั้น และหลังจากปรับแต่งกับเอเจนต์ประมาณหนึ่งชั่วโมง ฉันก็เปลี่ยนบิลด์ SCSS และ JS ของฉันเป็น Vite และฉันสามารถมุ่งเน้นไปที่การแก้ไขข้อบกพร่องจริงได้ เพียงตรวจสอบให้แน่ใจว่าได้ตรวจสอบความถูกต้องของเอาต์พุตและไฟล์ที่คอมไพล์แล้วเมื่อทำการเปลี่ยนแปลงที่สำคัญในกระบวนการสร้างของคุณ การสรุปและการร่าง คุณต้องการสรุปการเปลี่ยนแปลงโค้ดล่าสุดทั้งหมดของคุณเป็นประโยคเดียวสำหรับข้อความคอมมิต หรือมีรายการคอมมิตจำนวนมากและต้องการสรุปเป็นหัวข้อย่อยสามจุดหรือไม่ ไม่มีปัญหา ให้ AI จัดการมัน แต่โปรดตรวจทานให้แน่ใจด้วย ตัวอย่างข้อความแจ้งนั้นง่ายพอ ๆ กับการส่งข้อความถึงเพื่อนมนุษย์: “โปรดสรุปการเปลี่ยนแปลงล่าสุดของฉันในหัวข้อย่อยที่กระชับ” คำแนะนำของฉันคือการใช้ GPT ในการเขียนด้วยความระมัดระวัง และเช่นเดียวกับโค้ด โปรดตรวจสอบผลลัพธ์ก่อนที่จะส่งหรือส่ง คำแนะนำและแนวทางปฏิบัติที่ดีที่สุด พร้อมท์ ข้อดีประการหนึ่งที่ไม่ชัดเจนของการใช้ AI ก็คือ ยิ่งการแจ้งเตือนของคุณมีความเฉพาะเจาะจงและปรับแต่งได้มากเท่าไร ผลลัพธ์ก็จะยิ่งดีขึ้นเท่านั้น กระบวนการแจ้งตัวแทน AI บังคับให้เราต้องกำหนดข้อกำหนดของเราให้เจาะจงที่สุดเท่าที่จะเป็นไปได้ก่อนที่เราจะเขียนและเขียนโค้ด ด้วยเหตุนี้ ตามกฎทั่วไปแล้ว ข้าพเจ้าขอแนะนำอย่างยิ่งให้เจาะจงมากที่สุดเท่าที่จะเป็นไปได้กับการกระตุ้นเตือนของคุณ Ryan Florence ผู้เขียนร่วมของ Remix แนะนำวิธีที่เรียบง่ายแต่ทรงพลังในการปรับปรุงกระบวนการนี้โดยจบประโยคเริ่มต้นของคุณด้วยประโยค: “ก่อนที่เราจะเริ่ม คุณมีคำถามอะไรจะถามฉันไหม?”
ณ จุดนี้ AI มักจะกลับมาพร้อมกับคำถามที่เป็นประโยชน์ ซึ่งคุณสามารถชี้แจงเจตนาเฉพาะของคุณ โดยแนะนำเจ้าหน้าที่เพื่อให้คุณได้รับแนวทางที่เหมาะกับงานของคุณมากขึ้น
ใช้การควบคุมเวอร์ชันและทำงานในส่วนที่ย่อยได้ การใช้การควบคุมเวอร์ชันเช่น git ไม่เพียงมีประโยชน์เมื่อทำงานร่วมกันเป็นทีมบนโค้ดเบสเดียว แต่ยังช่วยให้คุณเป็นผู้มีส่วนร่วมรายบุคคลที่มีคะแนนคงที่ในการย้อนกลับในกรณีฉุกเฉิน เนื่องจากธรรมชาติที่ไม่สามารถกำหนดได้ บางครั้ง AI จึงสามารถโกงและทำการเปลี่ยนแปลงที่ไม่เป็นประโยชน์ต่อสิ่งที่คุณพยายามทำให้สำเร็จ และในที่สุดก็ทำลายสิ่งต่าง ๆ อย่างแก้ไขไม่ได้ การแบ่งงานของคุณออกเป็นหลายๆ Commit จะช่วยให้คุณสร้างจุดที่มั่นคงซึ่งคุณสามารถย้อนกลับไปได้ในกรณีที่สิ่งต่างๆ ผิดพลาด และเพื่อนร่วมทีมของคุณจะขอบคุณเช่นกัน เนื่องจากพวกเขาจะมีเวลาตรวจสอบโค้ดของคุณได้ง่ายขึ้นเมื่อแบ่งออกเป็นส่วนๆ ที่มีโครงสร้างทางความหมายที่ดี ทบทวนอย่างละเอียด นี่เป็นแนวทางปฏิบัติที่ดีที่สุดโดยทั่วไปมากกว่า แต่ในความคิดของฉัน การใช้เครื่องมือ AI สำหรับงานพัฒนาจะมีความสำคัญมากยิ่งขึ้น: เป็นผู้ตรวจสอบโค้ดของคุณเป็นคนแรก อย่าลืมใช้เวลาดูการเปลี่ยนแปลงของคุณทีละบรรทัด เช่นเดียวกับที่คุณตรวจสอบโค้ดของผู้อื่น และส่งงานของคุณเมื่อผ่านการตรวจสอบด้วยตนเองของคุณเองเท่านั้น “สองสิ่งที่เป็นจริงสำหรับฉันในตอนนี้: เจ้าหน้าที่ AI นั้นน่าทึ่งและเพิ่มประสิทธิภาพการทำงานได้อย่างมาก นอกจากนี้ พวกมันยังเป็นเครื่องจักรที่แย่มากหากคุณปิดสมองและปล่อยวางโดยสิ้นเชิง”— Armin Ronacher ในบล็อกโพสต์ของเขา Agent Psychosis: Are We Going Insane?
บทสรุปและความคิดเชิงวิพากษ์ ในความคิดของฉัน เครื่องมือเข้ารหัส AI สามารถปรับปรุงประสิทธิภาพการทำงานของเราในฐานะนักพัฒนาในแต่ละวัน และเพิ่มขีดความสามารถทางจิตสำหรับการวางแผนและการคิดในระดับสูงมากขึ้น พวกเขาบังคับให้เราระบุผลลัพธ์ที่ต้องการด้วยรายละเอียดที่พิถีพิถัน ในบางครั้ง AI ก็สามารถเห็นภาพหลอนได้ ซึ่งโดยพื้นฐานแล้วหมายความว่ามันอยู่ในน้ำเสียงที่มั่นใจ ดังนั้นโปรดตรวจสอบและทดสอบ โดยเฉพาะเมื่อคุณมีข้อสงสัย AI ไม่ใช่กระสุนเงิน และฉันเชื่อว่าความเป็นเลิศและความสามารถในการแก้ปัญหาในฐานะนักพัฒนาจะไม่มีวันตกยุค สำหรับนักพัฒนาที่เพิ่งเริ่มต้นอาชีพ เครื่องมือเหล่านี้อาจดึงดูดใจให้ทำงานส่วนใหญ่ให้พวกเขาได้ สิ่งที่อาจหายไปที่นี่คือการทำงานที่สิ้นเปลืองและเจ็บปวดบ่อยครั้งผ่านจุดบกพร่องและปัญหาที่ยุ่งยากในการแก้ไขและแก้ไขหรือที่เรียกว่า "การบดขยี้" แม้แต่ Lee Robinson ของ Cursor AI เองก็ตั้งคำถามนี้ในโพสต์ของเขา:
เครื่องมือการเขียนโค้ด AI กำลังพัฒนาอย่างรวดเร็ว และฉันรู้สึกตื่นเต้นกับสิ่งที่จะเกิดขึ้นต่อไป ฉันหวังว่าคุณจะพบว่าบทความนี้และเคล็ดลับมีประโยชน์ และรู้สึกตื่นเต้นที่จะลองทำสิ่งเหล่านี้ด้วยตัวเอง
