แจก prompt สำหรับสร้างระบบเว็บแอปยืมคืนอุปกรณ์ บน Google App Script ด้วย Gemini

🔥 โพสนี้ผมจะมาแจก Prompt สำหรับเปลี่ยนข้อมูลใน Google Sheets ให้เป็นระบบเว็บแอพสุดคูล! แบบไม่ต้องเขียนโค้ด

Screenshot

ถ้าพูดแบบนี้เมื่อปีที่แล้วก็คงต้องบอกว่าโม้แน่นอน

แต่เดี๋ยวนี้เมื่อเรามี AI ที่เก่งขึ้น ทุกอย่างก็สามารถเป็นไปได้ทั้งหมด โดยเฉพาะเรื่องของการเขียนโปรแกรม

โดยถ้าเรามีข้อมูลที่เก็บอยู่ใน Google Sheets หรือถ้าเราอยากจะสร้างระบบอะไรขึ้นมาโดยที่ใช้ Google Sheets เป็นฐานข้อมูล เราก็สามารถบอกให้ AI ต่างๆช่วยสร้างให้ระบบให้เราได้แบบอัตโนมัติ

โดยตัวอย่างของโพสนี้ ผมจะมาสอนวิธี prompt ใน Gemini เพื่อสร้าง ยืมคืน อุปกรณ์ แบบง่ายๆ แบบเริ่มต้นจาก 0 จนได้ระบบเว็บแอพไว้ใช้งานในองค์กร

โดยอันดับแรกให้ทุกคนเข้าไปยัง AI ของเราก่อนครับ โดยคุณสามารถใช้ได้ทั้ง ChatGPT , Claude หรือ Deepseek แต่ในกรณีนี้ผมจะใช้ Gemini เนื่องจากสาเหตุหลักๆ คือตอนนี้ Gemini เค้ามี plan PRO ให้ทดลองใช้งานฟรี 30 วัน และอีกเหตุผลคือตัว Gemini เค้ามี Gem (คล้ายๆกับ custom GPT) ที่ช่วยให้ Gemini เขียน code ได้เก่งขึ้นนั้นเองครับ

Screenshot

เราก็สามารถทำการเลือก “สำรวจ Gem” และ เลือกที่ “คู่หูเขียนโค้ด” ได้เลย

และหลังจากนั้นถ้าเราอยากให้ระบบสร้าง เว็บแอปพลิเคชั่น เกี่ยวกับการยืมคืนอุปกรณ์ ก็สามารถนำเอา prompt ด้านล่างนี้ไปวางได้เลย

ต้องการสร้าง web application ระบบยืมคืนอุปกรณ์ ใน Google App Script โดยให้ฐานข้อมูลเก็บอยู่ใน Google Sheets

โดยอยากให้ระบบมีหน้าตา interface ดังต่อไปนี้
- ให้หน้าตา interface ของ web application มีความสวยงามคล้ายๆกับ instagram
- font ของระบบให้เป็น font ที่ชื่อว่า Kanit
- header title ของชื่อเว็บ ให้ background มีสีเหมือนกับตีมของเว็บ instagram 
-ให้หน้าจอของ web application สามารถปรับเปลี่ยนขนาดแบบ responsive ได้กรณีแสดงผลลัพท์ในโทรศัพท์มือถือ

และอยากให้ระบบมี features ดังต่อไปนี้
- มี search bar ที่ user สามารถพิมพ์ข้อความเพื่อ filter หาอุปกรณ์ที่ต้องการได้
- มีปุ่มที่สามารถเลือกดูเฉพาะอุปกรณ์ที่พร้อมให้ยืมได้ อุปกรณ์ที่ถูกยืมไปอยู่ และอุปกรณ์ทั้งหมด

โครงสร้างไฟล์ Google Sheets ให้มีชีทดังต่อไปนี้
- ชีทรายการอุปกรณ์ สำหรับเก็บข้อมูลของอุปกรณ์ต่างๆ
- ชีทประวัติการยืมคืน สำหรับเก็บประวัติการยืมคืนของอุปกรณ์

** ผมได้มีการอัพเดท prompt version ใหม่ที่ทำให้การ prompt นั้นแม่นยำมากขึ้น สามารถนำเอา prompt ด้านล่างไปวางที่ AI เพื่อให้ช่วยสร้าง script ให้ได้เลยครับ

ต้องการสร้าง Web Application สำหรับ "ระบบยืม-คืนอุปกรณ์" โดยใช้ Google Apps Script และให้ Google Sheets เป็นฐานข้อมูล
ส่วนของ Backend และฐานข้อมูล (Google Sheets): ให้ Google Sheets ประกอบด้วย 2 ชีท:
ชีท รายการอุปกรณ์ ให้มีคอลัมน์: ID, Name, Type, Status (มีค่าเป็น 'พร้อมให้ยืม' หรือ 'ถูกยืม'), และ ImageURL
ชีท ประวัติการยืมคืน ให้มีคอลัมน์: TransactionID, EquipmentID, BorrowerName, BorrowDate, ReturnDate, และ Status (มีค่าเป็น 'ยืมอยู่' หรือ 'คืนแล้ว')
ส่วนของหน้าตาโปรแกรม (Frontend UI/UX):
ดีไซน์: ให้มีหน้าตาสวยงาม ทันสมัย โดยได้แรงบันดาลใจจาก Instagram
ส่วนหัว (Header): ให้มีพื้นหลังเป็นสีแบบไล่ระดับ (Gradient) สไตล์ Instagram
ฟอนต์: ใช้ฟอนต์ 'Kanit' ทั้งระบบ
การแสดงผล: ต้องเป็นแบบ Responsive ที่ปรับขนาดตามหน้าจอได้ดีทั้งบนมือถือและคอมพิวเตอร์
การจัดวาง: แสดงรายการอุปกรณ์ในรูปแบบการ์ด (Card) ที่เรียงกันเป็นกริด (Grid)
ฟังก์ชันหลักของระบบ:
หน้าหลัก: แสดงอุปกรณ์ทั้งหมดจากชีท รายการอุปกรณ์
การค้นหา: มีแถบค้นหา (Search Bar) ที่สามารถกรองรายการอุปกรณ์ตามชื่อได้ทันที
การกรองสถานะ: มีปุ่มสำหรับกรองการแสดงผลตามสถานะ: 'อุปกรณ์ทั้งหมด', 'พร้อมให้ยืม', และ 'ถูกยืม'
ขั้นตอนการยืม:
เมื่อคลิกที่อุปกรณ์ที่มีสถานะ 'พร้อมให้ยืม' ให้แสดงหน้าต่าง Modal (Pop-up) ขึ้นมา
ใน Modal ให้มีช่องสำหรับกรอก 'ชื่อผู้ยืม'
เมื่อกดยืนยัน ระบบจะต้อง:
อัปเดต Status ของอุปกรณ์นั้นเป็น 'ถูกยืม' ในชีท รายการอุปกรณ์
เพิ่มข้อมูลการยืมรายการใหม่ลงในชีท ประวัติการยืมคืน โดยให้มี Status เป็น 'ยืมอยู่'
ขั้นตอนการคืน:
เมื่อคลิกที่อุปกรณ์ที่มีสถานะ 'ถูกยืม' ให้แสดง Modal เพื่อยืนยันการคืน
เมื่อกดยืนยัน ระบบจะต้อง:
อัปเดต Status ของอุปกรณ์นั้นกลับเป็น 'พร้อมให้ยืม' ในชีท รายการอุปกรณ์
ค้นหารายการล่าสุดที่มีสถานะเป็น 'ยืมอยู่' ของอุปกรณ์นั้นในชีท ประวัติการยืมคืน แล้วกรอก ReturnDate พร้อมทั้งเปลี่ยน Status เป็น 'คืนแล้ว'
การแสดงข้อมูลบนการ์ด:
สำหรับการ์ดของอุปกรณ์ที่ 'ถูกยืม' จะต้องแสดง 'ชื่อผู้ยืม' และ 'วันที่ยืม' ปัจจุบันด้วย
กรุณาสร้างไฟล์ Code.gs และ index.html ที่จำเป็นสำหรับสร้างแอปพลิเคชันนี้

โดยถ้าเราอยากจะสร้างระบบอื่นๆเพิ่มเติมก็สามารถทำการปรับแต่ง prompt ตามความต้องการในแต่ละส่วนได้เลย

โดยผมจะทำการแยกส่วนของ Prompt ออกเป็น 3 ส่วน ก็คือส่วนของ Interface หน้าตา , ส่วนของ features ต่างๆที่เราอยากให้ระบบมี และ สุดท้ายคือส่วนของโครงสร้าง file Google Sheets ที่อยากให้มี

Gemini ก็จะทำการสร้าง Script และวิธีการสร้าง Google Sheets มาให้กับเรา พร้อมทั้งบอกวิธีนี้การนำโค้ดไปวางใน project วิธีการสร้าง project แบบ step by step ซึ่งถ้าเราไม่เข้าใจตรงใหนก็สามารถพิมพ์ถามได้เลย หรือ จะดูจากคลิปวีดีโอล่างโพสนี้ก็ได้เช่นกัน