😍 เย้ ! มศว เรามี Canva For Education สำหรับนิสิต และบุคลากร แล้ว

🚀 ใครยังไม่ได้สมัคร สามารถสมัคร Canva ด้วยบัญชี GAFE (@g.swu.ac.th) ของมหาวิทยาลัย ได้ตั้งแต่วันนี้ เป็นต้นไป

บทความนี้ขอแนะนำ การทำเว็บฟอร์มด้วย Canva AI กับ Google Apps Script ที่ ใคร ๆ ก็สามารถมีเว็บฟอร์มเพื่อบันทึกข้อมูลและอัปโหลดไฟล์ไปยังไดร์ฟของตัวเองได้

เครื่องมือที่ใช้

• Canva: Canva AI
• Google Workspace: Google Apps Script, Google Sheets, Google Drive

ฟังก์ชันเว็บฟอร์ม

• ฟอร์มสำหรับบันทึกข้อมูลและอัปโหลดไฟล์บนไดร์ฟ
• เก็บข้อมูลงานลง Sheet

💻 มาเริ่มต้นกัน !

1.สร้างไฟล์ Google Sheets ใหม่

2. ตั้งชื่อไฟล์

3. แชร์ไฟล์นี้แบบ Anyone with the link จากนั้น Copy link เพื่อได้ ID ของ Sheets

Google Sheets URL:
https://docs.google.com/spreadsheets/d/<<Sheet_ID>>/edit?usp=sharing

คัดลอก Sheet ID เก็บไว้ในโปรแกรม Notepad ไว้ก่อน

4. ไปที่เมนู “Extensions” -> Apps Script

5.ตั้งชื่อ Project

6. Deploy Project ครั้งแรก

คลิกปุ่ม Create deployment -> เลือก Web app

เลือกการแชร์แบบ Anyone

คัดลอกลิงก์

เปิดผ่านเว็บเบราวเซอร์เพื่อให้ได้ URL ที่ Redirect ไปยังปลายทางแล้ว จากภาพด้านล่าง Apps Script ของเราจะไม่สามารถใช้งานได้ เนื่องจากไม่มีฟังก์ชัน doGet ในส่วนนี้ไม่ต้องกังวล เราจะมาแก้ไขไฟล์นี้ภายหลัง

URL ของ Google Apps Script ที่ได้

• สำหรับนิสิตและบุคลากร มศว จะมีโดเมนกำกับ จึงได้ URL แบบนี้

https://script.google.com/a/macros/g.swu.ac.th/s/<<Apps_Script_ID>>/exec

• สำหรับ บัญชี Gmail ทั่วไป

https://script.google.com/macros/s/<<Apps_Script_ID>>/exec

คัดลอก Apps Script URL เก็บไว้ในโปรแกรม Notepad ไว้ก่อน

7. สร้าง Folder เพื่อจัดเก็บไฟล์ที่อัปโหลดผ่านฟอร์ม

เมื่อสร้างแล้ว เลือกการแชร์ Folder แบบ Anyone with the link

URL ของ Google Drive ที่ได้

https://drive.google.com/drive/folders/<<Drive_ID>>?usp=sharing

คัดลอก Drive ID เก็บไว้ในโปรแกรม Notepad ไว้ก่อน

⏳ มาถึงตรงนี้ ผู้อ่านเตรียมค่าของ ID และ URL ไว้พร้อมแล้วหรือไม่

ID และ URL ที่คัดลอกต้องมีดังนี้
Google Sheets ID
Google Drive ID
Google Apps Script URL
เราเก็บค่า ID และ URL ไว้ก่อน

8.เปิดเว็บ Canva ไปที่เมนู Canva AI (เมนูด้านซ้าย)

9. เตรียมคำสั่ง Prompt เพื่อให้ AI ช่วย Generate หน้าเว็บฟอร์ม และสคริปต์ GS (Google Apps Script)

🎁 แจก Prompt คลิกที่นี่

คัดลอก Prompt ไปวางที่ช่อง Chat

จากนั้น Enter เพื่อรอ AI คิดและประมวลผลคำตอบตามคำสั่งที่ป้อนเข้าไป

✨ ผลลัพธ์ที่ได้จากการป้อนคำสั่ง

• ซ้ายมือคือ ช่องแชตที่ AI ประมวลผลคำสั่ง GS ให้
• ขวามือคือ หน้าเว็บฟอร์มที่มีช่องกรอกข้อมูลและการอัปโหลดไฟล์

10. ในช่อง Chat ทางซ้าย ให้เราคัดลอก Code ทั้งหมด เพื่อไปวางที่ Google Apps Script

นำโค้ดที่คัดลอกมาวางที่ไฟล์ Code.gs

ไฟล์ GS ที่ได้จะประกอบไปด้วย 3 ฟังก์ชัน คือ

• doGet: ฟังก์ชันที่ทำให้หน้าเว็บฟอร์มทำงานได้
• doPost: ฟังก์ชันที่บันทึกข้อมูลลง Sheet
• sendNotificationEmail: ฟังก์ชันสำหรับส่งอีเมลแจ้งผู้ดูแล

สามารถรันทดสอบฟังก์ชันแต่ละส่วนได้

เมื่อคลิกปุ่ม Run ในครั้งแรก จะมีการขอสิทธิ์ในการประมวลผล

เราต้องให้สิทธิ์ Apps Script ในการประมวลผล

เมื่อให้สิทธิ์แล้วสามารถรันฟังก์ชันเพื่อทดสอบการทำงานได้

11. Deploy สคริปต์อีกครั้ง ไปที่ Deploy -> Manage Deployments

คลิกปุ่ม Edit เลือก New Version (การ Deploy แบบแก้ไข จะได้ URL เดิม)

12. หลังจากแก้ไขการ Deploy GS แล้วให้กลับมาที่ Canva ทดลองกรอกและส่งข้อมูลเข้าระบบ ที่ด้านขวาของช่อง Chat

คลิกปุ่ม “ส่งข้อมูล” จะได้ข้อความแจ้งเตือน ดังภาพด้านล่าง

ไปตรวจสอบ Google Sheets และ Google Drive ที่ได้เตรียมไว้ จะพบว่ามีข้อมูลจัดเก็บลง Sheet และ Drive เรียบร้อย

และตรวจสอบอีเมล ตามตัวแปร “ADMIN_EMAIL” ที่กำหนดไว้ใน GS หากได้รับอีเมลแจ้งเตือนด้วย

สรุประบบที่เราทำสำเร็จแล้ว เย้! 🏆

🤓 สำหรับผู้อ่านที่ได้ทดลองทำตาม เป็นอย่างไรกันบ้างคะ อย่างน้อยบทความนี้เป็นไอเดียให้เริ่มต้นเรียนรู้การสร้างเว็บฟอร์มด้วย Canva AI กับ Google Apps Script ซึ่งผู้เขียนหวังว่าผู้อ่านจะสามารถนำไปพัฒนางานเว็บ อื่น ๆ ต่อยอดไปได้ 😄

🥰 ผู้เขียนขอบคุณสื่อการเรียนการสอนจากช่อง Youtube สื่อและนวัตกรรมครูสิทธิชาติ
อ้างอิง: คลิปสอนสร้างฟอร์มบันทึกข้อมูลด้วย CANVA AI พร้อมแจ้งเตือนไปที่ Email