Aj Chian

Construct 2 : แก้ปัญหา AJAX ของ Construct 2 ไม่สามารถติดต่อกับไฟล์ CSV ทาง URL ได้

Construct 2

หลังจากห่างหายไปนาน เนื่องจากภาระกิจทั้งงานราษฎร์ งานหลวง วุ่นวายอยู่พักใหญ่ ตอนนี้ก็มีเวลาว่างพอจะมาเขียนตอบเพื่อนสมาชิก ที่มีปัญหาในการทำแบบทดสอบ โดยใช้ 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/

สงสัยตรงไหน ฝากข้อความไว้ได้ครับ

แล้วพบกันใหม่ สวัสดีครับ

 

ศึกษารายละเอียดเพิ่มเติมได้ที่นี่