Construct 2 : แก้ปัญหา AJAX ของ Construct 2 ไม่สามารถติดต่อกับไฟล์ CSV ทาง URL ได้
หลังจากห่างหายไปนาน เนื่องจากภาระกิจทั้งงานราษฎร์ งานหลวง วุ่นวายอยู่พักใหญ่ ตอนนี้ก็มีเวลาว่างพอจะมาเขียนตอบเพื่อนสมาชิก ที่มีปัญหาในการทำแบบทดสอบ โดยใช้ Google Spreadsheet เป็นฐานข้อมูล ในรูปแบบ CSV แล้วปรากฏว่า AJAX ของ Construct 2 ไม่สามารถติดต่อกับ Spreadsheet ผ่าน URL ได้ จะแก้ปัญหาอย่างไรดี ก็เลยลองค้นๆ ไปเจอ plugin ของ Construct 2 ตัวหนึ่งชื่อว่า JsontoC2Array ลองโหลดมาทดลองดู Plugin ตัวนี้ ทำหน้าที่แปลงไฟล์ JSON เป็น Array ในรูปแบบของ Construct 2 ครับ จากประโยชน์ของ Plugin ตัวนี้ เลยนำเอามาแก้ปัญหาให้กับเพื่อนสมาชิก โดยแบ่งการทำเป็นส่วนๆ ดังนี้
1. แปลงข้อมูลจาก Spreadsheet ให้เป็น JSON ด้วย Google App Script
2. นำเข้า หรือ โหลดไฟล์ JSON ที่ได้จาก Google App Script ด้วย AJAX ของ Construct 2
3. นำไฟล์ JSON ไปแปลงให้อยู่ในรูปแบบของ C2๋JSON และโหลดลง Array ด้วย Plugin JsontoC2Array
I ขั้นตอนแปลงข้อมูลจาก Spreadsheet ให้เป็น JSON
1. ดาวน์โหลดปลั๊กอินนำไปติดตั้งใน Construct 2 { ดาวน์โหลด Plugin และ App Script }
2. เปิดไฟล์ spreadsheet ขึ้นมา
3. ไปที่แถบรายการ เครื่องมือ > โปรแกรมแก้ไขสคริปต์
4. เปิดไฟล์สคริปต์ที่ดาวน์โหลดมา คัดลอกทั้งหมด แล้วนำไปวางที่ google script
5. ใส่ที่อยู่ หรือ URL ของ Spreadsheet ตรงคำว่า Your Spread Sheet URL (ไม่ต้องเอาเครื่องหมาย ” ” ออก)
6. ใส่ชื่อของแผ่นงาน (sheet) ตรงคำว่า Your Sheet Name (ไม่ต้องเอาเครื่องหมาย ” ” ออก)
7. ไปที่แถบรายการ เผยแพร่
8. เลือกรายการ ใช้งานเป็นแอปลิเคชั่นเว็บ
9. จากนั้นให้ทำตามขั้นตอนดังนี้
10. นำ URL ที่คัดลอกไว้ไปใส่ไว้ใน Notepad สำหรับนำมาใช้ในขั้นตอนต่อไป
II ขั้นตอนโหลดไฟล์ JSON ที่ได้จาก Google App Script
- เพิ่ม Global variable ประเภท Text ชื่อ www ช่อง Initial value ให้นำ URL ที่คัดลอกไว้มาใส่ แล้วคลิก OK
- Add event > System > On start of layout
- Add action > AJAX >Request URL > เพิ่มรายละเอียดในช่อง Tag และ URL ดังรูป
III ขั้นตอนแปลง JSON ให้อยู่ในรูปแบบของ C2๋JSON และโหลดลง Array
- Add event > AJAX > On completed
- Add action > Array >Load > เพิ่มรายละเอียดในช่อง JSON ดังรูป
IV ขั้นตอนการแสดงช้อมูลใน Text ให้ดึงจาก Array มาแสดง แทนการดึงข้อมูลจาก CSV เดิม
DEMO : https://semicon.github.io/quiznew/
สงสัยตรงไหน ฝากข้อความไว้ได้ครับ
แล้วพบกันใหม่ สวัสดีครับ
ศึกษารายละเอียดเพิ่มเติมได้ที่นี่