สำหรับ Prompt Tuesday #9 นี้ เราผสมผสานการเงินและการพัฒนาเว็บเข้าด้วยกัน ในช่วงกลางฤดูกาลเงินปันผล ค้นพบวิธีใช้ Gemini AI เพื่อเขียนโค้ด Dashboard ที่ทันสมัยใน HTML, JavaScript และ Tailwind CSS ทันที
การผสมผสานการเงินส่วนบุคคลและการพัฒนาเว็บคือหัวใจสำคัญของ DNA ของ Linkeum เมื่อเราเข้าสู่ "ฤดูกาลเงินปันผล" ที่มีชื่อเสียง (เมษายน พฤษภาคม มิถุนายน) นักลงทุนและนักพัฒนาจำนวนมากกำลังมองหาวิธีสร้างเครื่องมือติดตามของตนเอง
ในการทดสอบนี้ เป้าหมายคือการใช้ Gemini (AI ของ Google) เพื่อสร้างโค้ด Front-End ของแดชบอร์ด (Dashboard) เงินปันผลตั้งแต่ต้นจนจบ เรากำหนดให้ใช้เทคโนโลยีที่เรียบง่าย เป็นสากล และไม่ต้องตั้งค่าให้ยุ่งยาก: HTML ล้วน, JavaScript ดั้งเดิม (Vanilla JS), ไลบรารี Chart.js สำหรับกราฟ และ Tailwind CSS สำหรับการออกแบบ
The Prompt
เพื่อให้ AI สร้างไฟล์ที่สามารถใช้งานได้โดยตรงในเบราว์เซอร์ คุณต้องกำหนดบทบาทที่เฉพาะเจาะจง บังคับให้ใช้ลิงก์ CDN สำหรับไลบรารี และให้บริบททางธุรกิจ นี่คือพรอมต์ที่ใช้จริง:
Act as an expert Front-End Developer. Write a modern, responsive single-page HTML file for a "Dividend Tracking Dashboard" using Tailwind CSS (via CDN) and vanilla JavaScript. Include a chart using Chart.js (via CDN) to visualize monthly dividend income. The UI should have a sleek dark mode aesthetic. Include a main card showing the total yearly dividend goal with a progress bar. Below that, display a neat list or grid of recent dividend payouts using mock data for the following stocks: M6 Metropole, Pepsico, and TotalEnergies. Make the design look premium, similar to high-end fintech apps. Output the complete, functional code so I can copy-paste it directly into an index.html file.
สิ่งที่ prompt ต้องการบรรลุ
ความท้าทายของพรอมต์นี้คือการเปลี่ยนแนวคิดทางการเงินให้เป็นอินเทอร์เฟซเว็บที่มองเห็นได้และทดสอบได้ทันที:
- กำหนด Tech Stack แบบ "Plug & Play": การระบุว่าต้องใช้ HTML, JS ดั้งเดิม และลิงก์ CDN สำหรับ Tailwind และ Chart.js ช่วยให้มั่นใจได้ว่าโค้ดจะทำงานได้ทันทีเพียงแค่ดับเบิลคลิกที่ไฟล์ โดยไม่จำเป็นต้องมีสภาพแวดล้อมการพัฒนาที่ซับซ้อน
- ผสานรวมการแสดงข้อมูล (Data Visualization): คำขอที่ชัดเจนสำหรับกราฟแบบโต้ตอบ (Chart.js) บังคับให้ AI เขียนตรรกะ JavaScript ที่จำเป็นในการสร้างและกำหนดค่าแคนวาสภาพสำหรับรายได้รายเดือน
- กำหนดทิศทางศิลปะ: คำว่า "sleek dark mode aesthetic" และ "high-end fintech apps" แนะนำให้ Gemini เสนอการออกแบบระดับพรีเมียม (เงา, การไล่สี, สีเข้ม) ที่เหมาะกับการเงิน
- ผสานรวมตรรกะทางธุรกิจ: การรวมแถบความคืบหน้าสู่เป้าหมายประจำปีและหุ้นเฉพาะ (M6, Pepsico, TotalEnergies) ช่วยให้ได้ผลลัพธ์ที่เกี่ยวข้องทันทีสำหรับนักลงทุน
ทำไมผลลัพธ์ถึงน่าสนใจ
ผลลัพธ์นี้แสดงให้เห็นถึงพลังของ Gemini ในฐานะผู้ช่วยเขียนโค้ด AI ไม่ได้เพียงแค่เรียงแท็ก HTML เท่านั้น แต่ยังจัดโครงสร้างหน้าเว็บอย่างถูกต้อง นำเข้าสคริปต์ภายนอกอย่างชาญฉลาด เขียนตรรกะ JavaScript ของ Chart.js และใช้คลาสยูทิลิตี้ Tailwind CSS เพื่อการเรนเดอร์ที่สวยงามและตอบสนองได้ดี (responsive)
สำหรับนักพัฒนาหรือผู้สร้างโปรเจ็กต์ นี่คือการประหยัดเวลาอย่างมหาศาล แทนที่จะใช้เวลาหลายชั่วโมงในการอ่านเอกสารประกอบของ Chart.js และ Tailwind เพื่อจัดโครงสร้างแบบจำลอง คุณจะได้รากฐานที่แข็งแกร่งและมองเห็นได้ในเวลาไม่กี่วินาที ซึ่งเหลือเพียงการเชื่อมต่อกับข้อมูลจริงเท่านั้น
