ผมลองสร้างส่วนขยายโน้ตแบบเรียบง่ายด้วย Vibe Coding

แนะนำ

ตามหัวข้อเลย ผมได้ลองสร้างแอปโน้ตแบบเรียบง่ายที่เปิดใช้งานใน Side panel ของเบราว์เซอร์ได้
ตอนแรกเริ่มจากตั้งใจจะใช้คนเดียว แต่พอเห็นผลลัพธ์ที่ออกมาในช่วง 3 วันแรก ก็รู้สึกว่าน่าจะเอามาแชร์ที่นี่ได้ เลยใช้เวลาอีกหนึ่งสัปดาห์แก้บั๊กและเพิ่มฟีเจอร์ จนได้มาเขียนโพสต์นี้ครับ

วิธีใช้งานและจุดเด่นมีดังนี้

• เปิดแอปโน้ตด้วยคีย์ลัด Alt+Shift+W
• จดบันทึกด้วยไวยากรณ์ Markdown ได้
• ดับเบิลคลิกเพื่อเข้าโหมด Edit และกด ESC หรือ Shift+Enter เพื่อสลับไปโหมดพรีวิว
• ตอนเขียนข้อความจะจัดการการขึ้นบรรทัดใหม่ให้อัตโนมัติ (เติมช่องว่าง 2 ตัวท้ายบรรทัด) ได้เอง (เปิด/ปิดได้)
• เวลาวางข้อความจากภายนอก จะจัดการการขึ้นบรรทัดใหม่และแทนที่อักขระ ~ เป็น ￦~ เพื่อป้องกันข้อความเพี้ยน (เปิด/ปิดได้)
• วางรูปภาพได้ด้วย Ctrl+V
• โน้ตที่ต้องการสามารถปักหมุดไว้ด้านบนได้
• รองรับโหมดมืด

ประมาณนี้ครับ

แรงจูงใจในการพัฒนา

อาจมีบางคนที่เห็นคีย์ลัดเปิดแอปโน้ตแล้วนึกออก โปรแกรมนี้ได้รับอิทธิพลอย่างมากจากส่วนขยาย Notes by Firefox ที่หยุดพัฒนาไปเมื่อ 5 ปีก่อน ทั้งในเรื่องคีย์ลัดและดีไซน์
แต่พอเวลาผ่านไปหลายปีหลังหยุดพัฒนา การพิมพ์ภาษาเกาหลีก็เริ่มทำงานแปลก ๆ และตัว Firefox เองก็ใช้หน่วยความจำมากกว่า Chrome อยู่พอสมควร เลยกลายเป็นแรงบันดาลใจให้ลองทำส่วนขยายลักษณะคล้ายกันขึ้นมาเอง

สภาพแวดล้อมการพัฒนา

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

ทั้งสองกรณีผมล็อกโมเดลไว้ที่ gemini-2.5-pro เวอร์ชันทางการ และพอไปดูในแดชบอร์ดก็พบว่าเฉพาะโทเค็นอินพุตที่ใส่ผ่าน Gemini CLI ก็เกือบแตะ 100 ล้านโทเค็นแล้ว

ผมจัดการเวอร์ชันด้วย git เพื่อให้ย้อนกลับไปเวอร์ชันก่อนหน้าได้ในกรณีที่ AI ทำโค้ดพังแปลก ๆ และระหว่างทำงานก็วนลูปกระบวนการแบบนี้ไปเรื่อย ๆ: คำสั่ง -> ให้ Gemini CLI เขียนโค้ด -> ให้ Gemini CLI commit -> ตรวจโค้ดที่แก้และผลลัพธ์ด้วยตัวเอง -> คำสั่ง

แผนต่อจากนี้

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

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

แล้วถ้ามีเวลา ก็อาจจะพอร์ตให้ใช้บน Firefox ได้ด้วยและลองเอาขึ้นเป็น add-on ดูครับ

ทิ้งท้าย

ปกติผมใช้ AI กับงานเล็ก ๆ อยู่บ่อยแล้ว แต่ครั้งนี้เป็นครั้งแรกที่ทำงานขนาดประมาณนี้โดยให้ AI เป็นตัวหลัก ซึ่งผลลัพธ์ออกมาดีกว่าที่คิดมากจนรู้สึกทึ่งจริง ๆ
อย่างไรก็ตาม ไม่แน่ใจว่าเป็นปัญหาของ Gemini CLI หรือเปล่า เพราะถ้าจะใช้ gemini-2.5-pro แบบไม่จำกัด ต้องใส่ API key และจ่ายเงินตามการใช้งานเท่านั้น และระหว่างทำโปรแกรมนี้ก็ใช้ไปเกือบ 100 ล้านโทเค็นแค่ฝั่งอินพุต ทำให้ค่าใช้จ่ายออกมาสูงกว่าที่คิดพอสมควร ซึ่งก็น่าเสียดายอยู่เหมือนกัน
ถึงจะมีแคชช่วยให้ยอดเรียกเก็บจริงต่ำกว่ายอดที่คาดไว้ แต่การใช้งานมากขนาดนั้นก็เป็นผลลัพธ์ที่ไม่คาดคิดอยู่ดี เลยคิดว่าถ้าจะใช้งานให้ประสิทธิภาพคงที่ ก็ควรใช้ฟีเจอร์สรุปคอนเท็กซ์ให้เหมาะสม

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

[baesku789]

ขอบคุณสำหรับบทความดี ๆ ครับ
ขอทราบได้ไหมครับว่าถ้าใช้ 100 ล้านโทเค็น มีค่าใช้จ่ายประมาณเท่าไหร่?

[ihabis02]

ดูเหมือนว่ารวมค่าแคชแล้วจะอยู่ที่ประมาณ 90,000~100,000 วอน
ตอนเช็กการใช้งานด้วยคำสั่ง '/stats model' ใน Gemini CLI ก็พบว่าอัตราส่วนแคชอยู่ระหว่าง 50~60% เลยคำนวณออกมาได้ใกล้เคียงกันพอสมควรครับ

[baesku789]

ขอบคุณที่บอกนะครับ~!