รอบ 4 การพัฒนา Web applicaion และ database ด้วย Ai

Ai_3

Part 1 : เริ่มต้นกับงานสร้าง Web application และ Database อย่างง่าย

ขั้นตอนการสร้างชิ้นงาน
1. เปิดเว็บไซต์ https://www.canva.com/
2. ลงชื่อเข้าใช้งานให้เรียบร้อย
3. เลือกเมนู Ai
4. พิมพ์ Prompt ต่อไปนี้
ตามโค้ดด้านล่าง
____________________________________

จงสร้างหน้าจอโปรแกรมที่สามารถป้อนข้อมูลได้ และหน้าจอที่สามารถแสดง dashboard ยอดขายได้ โดยข้อมูลสินค้าที่ร้านขายคือ ร้านขายเครื่องเขียน
1. ข้อมูลชื่อ sale ผู้ขาย
2. ชื่อสินค้าที่ขายได้ ซึ่งมีเมนูชนิด drop down menu มีรายการคือ (ปากกา แท่งละ 5 บาท, ดินสอ แท่งละ 3 บาท, ยางลบ อันละ 5 บาท, สมุด เล่มละ 10 บาท, ปากกาลบคำผิด แท่งละ 25 บาท, ไม้บรรทัด เล่มละ 10 บาท, สีดินสอ ชุดละ 30 บาท, สีเทียน ชุดละ 15 บาท, สีเมจิก ชุดละ 30 บาท)
3. จำนวนสินค้าที่ขายได้
4. วันเดือนปี ที่ขายสินค้าได้
5. หมายเหตุ ซึ่งตรงนี้จะกรอกข้อมูลหรือไม่ก็ได้ โดยให้ Canva Ai จัดสร้าง ฐานข้อมูลคือ Canva sheet ให้ด้วย เพื่อใช้ในการเก็บข้อมูลและแสดงผลบน dashboard
____________________________________

001

002

Part 2 : Advance การพัฒนา Web application บนฐานข้อมูลมาตรฐานสากล

1. จัดสร้างฐานข้อมูล Download ตารางฐานข้อมูล
2. ทำการ copy Google sheet id ตามตัวอย่างด้านล่างนี้

3. จัดสร้าง code.gs และ index.html ที่เว็บไซต์ Ai : Gemini
4. ป้อน Prompt ดังนี้
____________________________________
จงสร้าง Web application ระบบสมัครรับลงทะเบียนอบรม พร้อม Dashboard แสดงผล หัวข้อ การพัฒนา Web application และ Database ด้วย Ai โดยใช้ Google sheet id = 1TfKVMSq524AEkvcV0o4K090ctjBiC7CzPY5U4P5Mxxx
1. ใช้ข้อมูล sheet = ชีต1
2. ให้ คอลัมน์ A = วันที่, คอลัมน์ B = ชื่อ, คอลัมน์ C = นามสกุล, คอลัมน์ D = เพศ, คอลัมน์ E = คณะหรือหน่วยงาน, คอลัมน์ F = สาขา
3. ให้มีปุ่ม Edit และ Delete
4. ให้มีช่องค้นหาข้อมูลรายชื่อ
5. จัดสร้าง code.gs และ index.html

____________________________________

5. นำโค้ด code.gs และ index.html จาก Gemini ไปวางในเมนู ส่วนขยาย > Apps Script

Screenshot 2026-01-27 223703