เมื่อฉันให้ Gemini สร้างเว็บแอป “ติดตามพอร์ตลงทุน+ปันผล” ใช้เองแบบมินิมอล และฟรี

หลายคนอาจจะแบบ… Gemini อีกแล้วเหรอ?

ค่ะ ตอนนี้ฉันกลายเป็นติ่ง Gemini อย่างเต็มรูปแบบแล้ว

ทำไมน่ะเหรอ? ก็เพราะฉันเปย์มันอยู่ทุกเดือน…ทุกเดือนเหมือนติ่งเปย์เมนยังไงล่ะ!

รอบนี้ฉันให้มันสร้าง “Investment & Tax-Dividend Tracker” หรือเว็บแอปติดตามพอร์ตการลงทุนและภาษีเงินปันผลส่วนตัวขึ้นมาใช้งานเอง

จริงๆ มันอาจจะมีเว็บหรือแอปอะไรทำนองนี้อยู่แล้วข้างนอกนั้น (ใช่มั้ย…น่าจะใช่แหละ) แต่อันนี้ฉันอยากได้แบบจดง่ายๆ ดูภาพรวมง่ายๆ เอาเฉพาะฟังก์ชั่นที่ฉันต้องการเท่านั้น แบบตามใจฉัน 100% ก็เลยต้องใช้งานเมนที่อุตส่าห์จ่ายตังค์ให้สักหน่อย

คือต้องบอกก่อนว่าปกติฉันจดรายการการลงทุนแต่ละรายการไว้ใน Google Sheets อยู่แล้ว แต่ในนั้นมันยุ่บยั่บมาก มีรายการเป็นร้อยเป็นพันรายการ และมันคือรายการซื้อขายจากแอปลงทุนหลายๆ แอปด้วย จนฉันงงไปหมด เหมือนจดไว้ให้คอมพิวเตอร์อ่าน ไม่ได้จดให้มนุษย์อ่าน (หมายถึงมนุษย์ที่เห็นตัวเลขเยอะๆ แล้วเวียนหัวอย่างฉันน่ะนะ)

โอเค … ใน Google Sheets มันมีรายการทั้งหมดเท่าที่มันควรมีแหละ แต่สิ่งที่ฉันอยากได้จริงๆ ในฐานะมนุษย์ที่สมองค่อนข้างกลมเกลี้ยงไร้รอยหยัก คือ ‘ภาพรวมการลงทุนที่ผ่านมาของฉัน ในแบบที่เข้าใจง่ายๆ’

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

อยากได้แค่นี้แหละ ส่วนที่เหลือไม่เอาแล้ว ปวดหัว

และที่สำคัญที่สุดคือ ฉันไม่อยากเสียเงินเพิ่มแม้แต่สตางค์เดียว

สุดท้ายก็เลยใช้งานเมนทาส Gemini รู๊กวรั๊กคนดีคนเดิมของฉันอีกแล้ว

นึกว่าจะง่ายใช่มั้ย… ก็แค่ใช้งาน Gemini เยี่ยงทาสเหมือนที่ผ่านๆ มา ง่ายจะตาย…

ที่ไหนได้ สุดท้ายกลายเป็นใช้งานตัวเองเยี่ยงทาสต่างหาก!

คือมันฟรีก็จริง แต่ฉันต้องลงโปรแกรมที่ฉันไม่รู้จักตั้ง 3 โปรแกรม แล้วก็ต้องไปทำอะไรต่อมิอะไร (ที่ฉันมีความรู้เป็น 0 โดยสิ้นเชิงเลยจริงๆ) ตามที่ Gemini สั่ง

แล้วคนที่ไม่มีความรู้อะนะ ทำไปก็ error ไป ปวดกบาลไป ทุกครั้งที่ทำแล้ว error ฉันก็จะมานั่งกุมขมับแล้วถามตัวเองว่า “ฉันมาทำอะไรที่นี่? ทำไมฉันต้องมาตกระกำลำบากเพียงเพราะเว็บแอปง่ายๆ ที่ควรจะให้ AI เสกออกมาได้ภายใน 30 วินาทีไม่ใช่เหรอ? แล้วทำไมฉันต้องเป็นคนทำเองทุกอย่างเลยฟระ?!!!”

แต่ด้วยเดชะปาฏิหาริย์พระแม่ Gemini สุดท้ายฉันก็ทำสำเร็จจนได้ค่ะ!!

นี่ยังไม่อยากจะเชื่อตัวเองเลยนะเนี่ย…

สำหรับคนที่เขียน code เก่งๆ อยู่แล้ว อาจจะบอกว่า “โอ๊ย ง่ายจะตาย หลับตาจิ้ม 3 ทีก็เสร็จแล้ว”

แต่ฉันทำไม่เป็นไง รอดมาได้ก็ถือว่าเป็นปาฏิหาริย์แล้ว

เอาล่ะเข้าเรื่องสักที

สิ่งที่ฉันอยากได้จากเว็บแอปที่ว่านี้คือ

ต้องมีหน้า Login เข้าระบบ เพื่อให้ฉันเข้าดู, แก้ไข, ลบข้อมูลได้เพียงคนเดียวแบบที่คนอื่นเข้ามาดูไม่ได้เด็ดขาด
ขอสีเทาๆ ตุ่นๆ นวลๆ ไม่เอาสีขาวสว่างจ้าแสบตา ไม่เอาสีดำทะมึนทึนทึบด้วย
หน้าแรกขอเป็นหน้ารวมมูลค่าสินทรัพย์ ณ เวลาปัจจุบัน เปรียบเทียบกับต้นทุนรวมทั้งหมด ว่ากำไร/ขาดทุนรวมเท่าไหร่ และมีแผนภูมิวงกลมแสดงสัดส่วนสินทรัพย์แต่ละประเภทให้ดูง่ายๆ ด้วย
เหมือนข้างบน แต่มีบันทึกย้อนหลังด้วย จะได้รู้ว่าแต่ละเดือนมันเติบโตแค่ไหน เท่าไหร่
สามารถเลือกดูเป็นรายปี, เฉพาะช่วงเวลาที่ต้องการ และแบบรวมทุกปีแล้ว
มีหน้าบันทึกรายการเงินปันผล + เงินที่ถูกหักภาษีไป (และแจ้งสถานะด้วยว่าได้คืนหรือเปล่า) และสามารถเลือกดูได้ว่าจะเอาช่วงปีไหน ได้ปันผลจากตลาดไทยหรือตลาดนอก หรือดูเฉพาะสินทรัพย์ใดสินทรัพย์หนึ่ง ณ ช่วงเวลาหนึ่ง แล้วแต่ฉันเลย

พอสั่งมันไปแบบนี้แล้ว Gemini มันก็เขียน code หน้าเว็บมาให้ฉันค่ะ

แต่มันไม่ได้ง่ายเหมือนรอบก่อนๆ ที่แค่เขียน code หน้าเว็บไซต์แค่ไฟล์เดียวแล้วอัปโหลดขึ้น GitHub ได้เลยนะ รอบนี้มันให้ลงโปรแกรมอีก 3 โปรแกรมด้วย ซึ่งฉันไม่รู้จักสักโปรแกรม อย่าว่าแต่จะใช้เป็นเลย ชื่อก็ยังไม่เคยได้ยิน

ก็ต้องอาศัย Gemini คอยสอนทุกขั้นตอน เหมือนสอนเด็กอนุบาลหัดเขียนหนังสือนั่นแหละ

แล้วตอนเขียน code น่ะ มันไม่จบง่ายๆ นะ เขียนไปแก้ไป จะเอาอันนั้นเพิ่ม จะตัดอันนี้ออก ก็สั่งให้ Gemini แก้ไปสิ แก้แล้วแก้อีก แก้ไปประมาณเจ็ดพันกว่าครั้งได้ ถ้าใช้ Claude คงหมดโควต้าไปตั้งแต่ตอนสั่งแก้ครั้งที่ 12 แล้วมั้ง นี่โชคดีเป็น Gemini รู้กวรั๊กของฉันนะเนี่ย หึหึ (ขอขิงหน่อย)

*** เอาล่ะ เนื้อหาด้านล่างต่อไปนี้ เรียบเรียงโดย Gemini และเกลาโดยฉันเอง (ส่วนที่ทำไฮไลท์สีเหลืองส้มไว้ คือหมายเหตุจากฉันเอง) เหตุผลก็เพราะว่าฉันไม่มีปัญญาจะจำขั้นตอนทั้งหมดได้ ว่ามันต้องทำอะไรบ้าง หรือแต่ละอย่างแต่ละส่วนเรียกว่าอะไร มีไว้เพื่ออะไร หรือทำไปทำไม ก็ต้องให้ Gemini หรืออาจารย์ของฉันเป็นคนเรียบเรียงและอธิบายให้ยังไงล่ะ

สรุปโปรแกรมที่ต้องมีในเครื่อง

ตามที่ Gemini มันสั่งมาน่ะนะ:

VS Code (Visual Studio Code): เปรียบเหมือน “สมุดโน้ตอัจฉริยะ” ที่เราเอาไว้ใช้พิมพ์และแก้ไขข้อความ/โค้ดต่างๆ
Node.js: เปรียบเหมือน “เครื่องยนต์ส่วนตัว” ที่ทำให้คอมพิวเตอร์ของเราสามารถรันระบบเว็บแอปพลิเคชันตระกูล Next.js ได้
Git: เปรียบเหมือน “กล่องนิรภัยและขนส่งสินค้า” มีหน้าที่คอยบันทึกประวัติการแก้ไขไฟล์ และทำหน้าที่ส่งโค้ดจากคอมพิวเตอร์ของเราขึ้นสู่โลกอินเทอร์เน็ต

ขั้นตอนเนรมิตเว็บแอปพลิเคชัน (จากศูนย์จนออนไลน์)

โปรเจกต์นี้ถูกสร้างขึ้นด้วยสถาปัตยกรรมที่เรียกว่า “Next.js” (เทคโนโลยีทำเว็บไซต์ที่มาแรงและเร็วที่สุดในยุคนี้) โดยแบ่งขั้นตอนการทำงานออกเป็น 4 เสาหลัก:

สเต็ปที่ 1: ดีไซน์หน้าบ้าน (Frontend UI/UX)

ฉันตั้งโจทย์ไว้ชัดเจนว่า “UI ที่ดีที่สุด คือ UI ที่ไม่มีอะไรให้ลดทอนได้อีกแล้ว” ให้เป็นสไตล์ Minimalist ใช้โทนสีครีม-เทาอ่อน สะอาดตา สบายใจเวลาเปิดดูพอร์ต ประกอบด้วย:

หน้า Login: แบบคลีนๆ มีแค่ช่องกรอกอีเมลและรหัสผ่าน ไม่มีข้อความรกตา
หน้า Dashboard: สรุปยอดสินทรัพย์รวม และมี “ระบบปุ่มซ่อนข้อมูลอ่อนไหว (Masking Feature)” ที่พอกดปุ๊บ ตัวเลขเงินและชื่อหุ้นทั้งหมดจะกลายเป็น *** ทันที! (แบบในแอป Dime น่ะ) ปลอดภัยมากเวลาเปิดดูบนรถไฟฟ้าหรือร้านกาแฟ (แต่ใครมันจะไปเปิดดูบนรถไฟฟ้าหรือร้านกาแฟฟระ จะเปิดเพื่อ!)
หน้า Dividend: หน้าจอลงบันทึกเงินปันผล แยกสัดส่วนระหว่างตลาดหุ้นไทยและตลาดต่างประเทศ (เช่น กองทุนดัชนีต่างประเทศอย่าง SCBS&P500 ก็นับเป็นต่างประเทศเพื่อกระจายความเสี่ยงอย่างถูกต้อง) แถมมีระบบค้นหา (Search) คัดกรองรายชื่อหุ้นแยกตามปี พ.ศ. ได้อย่างแม่นยำ

สเต็ปที่ 2: สร้างโกดังเก็บข้อมูลส่วนตัว (Supabase Database)

เนื่องจากเป็นข้อมูลการเงิน จะเอาไปฝากไว้มั่วๆ ไม่ได้ Gemini เลยแนะนำให้ใช้ Supabase ซึ่งเป็นระบบฐานข้อมูลคลาวด์ (Cloud Database) ระดับโลกที่มีความปลอดภัยสูงเทียบเท่าธนาคาร (อันนี้ก็ตัวเดียวกันกับที่ฉันใช้ตอนทำเว็บสะสมดาวก่อนหน้านี้ เผื่อใครสนใจอ่านนะคะ: ‘เมื่อฉันให้ Gemini ทำเว็บสะสมดาว เอาไว้เป็นไดอารี่บันทึกความสำเร็จเล็กๆ ในชีวิต และสามารถเลื่อนระดับไปเรื่อยๆ เมื่อดาวเพิ่มขึ้นได้ด้วย’)

ข้อมูลสินทรัพย์ เงินปันผล และประวัติภาษีทั้งหมดจะถูกเก็บไว้ที่นี่อย่างเป็นระเบียบ
มีระบบล็อกอินเชื่อมต่อกุญแจรหัสผ่านแบบลับเฉพาะ (Environment Variables) ทำให้มั่นใจได้ว่า มีแค่ฉันคนเดียวในโลกเท่านั้น ที่ล็อกอินเข้ามาดูและแก้ไขข้อมูลในฐานข้อมูลนี้ได้

สเต็ปที่ 3: ส่งโค้ดเข้าตู้เซฟออนไลน์ (GitHub Backup)

พอให้ Gemini เขียนโค้ดและปรับแต่งหน้าตาในคอมพิวเตอร์จนพอใจแล้ว เราจะไม่ใช่วิธีโบราณอย่างการก๊อปปี้ไฟล์ไปแปะใน Google Drive นะคะ (เพราะมันจะรกและพังง่ายมาก)

แต่จะใช้ GitHub ซึ่งเป็นคลังเก็บโค้ดออนไลน์ที่เป็นมาตรฐานของโปรแกรมเมอร์ทั่วโลก โดยจะสั่งแพ็คโค้ดในคอมฯ แล้วดันขึ้น GitHub ผ่านคำสั่งสุดคลาสสิก: git add . -> git commit -> git push แค่นี้โค้ดเวอร์ชันล่าสุดของเราก็ถูก Backup ไว้อย่างปลอดภัยบนระบบออนไลน์แบบ Private แล้ว ต่อให้คอมพิวเตอร์พัง โค้ดก็ไม่หายแน่นอน! (คุณคิดว่าเป็ดอย่างฉันจะเข้าใจขั้นตอนนี้มั้ย? แน่นอนว่าไม่!)

สเต็ปที่ 4: เปิดไฟเขียวให้แอปออนไลน์ทั่วโลก (Deploy via Vercel)

ขั้นตอนสุดท้ายคือการนำหน้าเว็บไปตั้งตากแดดตากลมให้เรากดเข้าใช้งานได้จากมือถือหรือแท็บเล็ตทุกที่ทุกเวลา Gemini แนะนำให้ใช้บริการของ Vercel ซึ่งเป็นคลาวด์แพลตฟอร์มที่เก่งที่สุดในการรัน Next.js

ความเจ๋งคือ Vercel จะผูกติดกับ GitHub ของฉันไว้เลย ทันทีที่ฉันมีการแก้ไขโค้ดที่คอมพิวเตอร์ แล้วสั่ง Push ปุ๊บ… Vercel จะแอบดูและดึงโค้ดใหม่ไปอัปเดตหน้าเว็บจริงให้เราอัตโนมัติภายใน 1 นาที โดยที่ฉันไม่ต้องไปกดปุ่มอะไรบนเว็บ Vercel อีกเลยตลอดชีวิต! ยิงปืนนัดเดียวได้นกสองตัว ทั้ง Backup และ Deploy ไปพร้อมกัน!

สรุปสิ่งที่ฉันได้เรียนรู้จากโปรเจกต์นี้

คือสำนวนไทยที่ว่า “แกว่งเท้าหาเสี้ยน” “รนหาที่” “อยู่ดีไม่ว่าดี” “ว่างมากจนไม่มีอะไรจะทำ เลยหาเรื่องไปลำบาก เพื่อ?!!”

แต่ถ้าใครชอบความลำบาก ก็เอาเลยค่ะ //ผายมือไปทาง Gemini หรือ AI ที่คุณถนัดหรือจ่ายตังค์ไปแล้วกลัวว่าจะใช้งานมันไม่คุ้ม

เผื่อใครอยากดูรีวิวและสาธิตการใช้งานนิดหน่อย ดูได้ในเวอร์ชั่นวิดีโอนะคะ

ป.ล. ล่าสุดฉันสั่งให้ Gemini เพิ่มกราฟการเติบโตของหุ้นปันผลมาด้วยอีกหน่อยค่ะ (เพิ่มหลังจากอัดวิดีโอเสร็จแล้ว) หน้าตาก็จะคล้ายๆ กราฟเส้นในหน้าแรกค่ะ จะได้รู้ว่าแต่ละปีเงินปันผลโตขึ้นเท่าไหร่แล้ว