Construct 2 : การบันทึกข้อมูลลง Google Sheet ด้วย AJAX+Google Form

ท่านที่มีปัญหาเกี่ยวกับการใช้ฐานข้อมูลออนไลน์ สำหรับเก็บข้อมูลของเกม หรือข้อสอบของสื่อการเรียนรู้ ที่สร้างด้วย Construct 2 เนื่องจากไม่มีเซิฟเวอร์หรือโฮสต์สำหรับสร้างฐานข้อมูล อีกทั้งยังขาดความรู้เกี่ยวกับฐานข้อมูล  วันนี้เรามีทางออกให้ท่านแล้ว

จากบทความที่ผ่านมา เราได้ทราบถึงข้อดีของการใช้ Google Sheet ทำฐานข้อมูลออนไลน์ และเรียนรู้การดึงข้อมูลจาก Google Sheet มาแสดงใน Construct 2 มาแล้วนั้น ในบทความนี้เราจะมาเรียนรู้การใช้ AJAX ใน Construct 2 ติดต่อและบันทึกข้อมูลลงใน Google Sheet เพื่อแก้ปัญหาดังที่กล่าวข้างต้น

มาดูขั้นตอนการทำเลยครับ

1. เปิด Google Form และสร้างฟอร์มดังตัวอย่างด้านล่าง

2. เมื่อสร้างแบบสำรวจเสร็จเรียบร้อย ให้เลือกแถบ การตอบกลับ และดำเนินการตามรูปด้านล่าง

3. เมื่อคลิกที่ สร้าง (หมายเลข 4) จะได้ Google Sheet ในบรรทัดที่ 1 จะมีรายละเอียดตาม ฟอร์มที่เราสร้างไว้

4. ขั้นต่อไป ให้กับมาที่ Google Form  คลิกที่เพิ่มเติม(แถบจุด 3 จุด) > เลือก รับลิงก์ที่กรอกข้อมูลไว้ล่วงหน้า

5. กรอกข้อมูลในฟอร์มให้ครบทุกช่อง แล้วคลิก ส่ง จากนั้นด้านบนจะปรากฏรายละเอียดลิงก์ URL ให้คัดลอกเก็บไว้

6. เปิดโปรแกรม Construct 2 สร้างโปรเจ็กต์ใหม่ ให้เพิ่มออบเจ็กต์ และตั้งชื่อดังนี้

                     -> Text Box ชื่อ Text_ID และ Text_Name

                     -> Text ชื่อ txt_Score

                     -> Button ชื่อ addBtn และ SubmitBtn

                     -> AJAX

             -> จัดวางเลย์เอาท์ดังรูป

7. เปิด Event Sheet และ เพิ่ม Event และ Action ดังนี้

                     7.1  เพิ่มตัวแปรชื่อ ID, Name, Score

   7.2 เพิ่ม Event และ Action

                  7.3 ในการเพิ่ม AJAX ใน Action ให้ทำตามขั้นตอนดังนี้

                     -> เปิด Google Form คัดลอกลิงก์จากช่องที่อยู่ของบราวเซอร์

                     -> นำไปว่างในช่อง URL ของ AJAX

                     -> แก้ไข URL โดยเพิ่ม fromResponse? ไว้ท้ายสุดของ URL (หลังเครื่องหมาย /)

                     -> เปิดไฟล์ที่เก็บลิงก์จากขั้นตอนที่ 5 แก้ไขข้อความ โดยนำตัวแปรไปใส่แทนข้อมูลที่กรอกไว้เดิม (หมายเลข 5)

                     -> คัดลอกข้อความที่แก้ไขแล้ว นำไปวางในช่อง Data ของ AJAX

                     -> ในช่อง tag ของ AJAX จะใส่หรือไม่ก็ได้ ถ้าจะนำไปอ้างอิงในอีเวนต์อื่น ก็ให้ใส่ด้วย

                     -> เมื่อดำเนินการเสร็จสิ้น ให้คลิกที่ปุ่ม Done

หมายเหตุ  ถ้าต้องการให้ส่งข้อมูลเป็นภาษาไทยได้  ให้เพิ่ม “URLEncode(string)” เข้าไปที่ตัวแปร Name ด้วย ดังนี้ URLEncode(Name)

8. ทำการทดสอบโปรแกรม และกรอกข้อมูล เมื่อกดส่ง ข้อมูลจะไปปรากฏใน Google Sheet ดังรูป

                     ดาวน์โหลดตัวอย่าง [คลิกที่นี่]

                     ขอให้สนุกกับการสร้างสรรค์กันทุกคนนะครับ