Web App เกมตะลุยความรู้วันลอยกระทง 002

                




📚 ลิงค์ลงทะเบียนกิจกรรมฟรีประจำวันเพื่อเก็บสถิติ ดูลิงค์ซูม และป้องกันการดีด

ตัวอย่าง












****************************************************************************

เมื่อท่านได้สำเนาไฟล์ไปแล้ว แก้ไขดังนี้

1. ย้ายไฟล์ เข้าโฟลเดอร์ ที่ต้องการ เช่น
25681104 Web App เกมตะลุยความรู้วันลอยกระทง 002

2. เปลี่ยน Logo บรรทัดที่ 324

3. เปลี่ยน Footer  บรรทัดที่ 396   


4. ปรับแต่ง Pdf

   บรรทัดที่ 100 bg = พื้นหลัง
    บรรทัดที่ 101 logo = โลโก้
    บรรทัดที่ 102 sign = ลายเซนต์
    บรรทัดที่ 193 ชื่อโรงเรียน
    บรรทัดที่ 206 ชื่อ นามสกุล
    บรรทัดที่ 207 ตำแหน่ง 


5. Deploy Program


🧩 ขั้นตอนการดีพลอย Web App (Game วันลอยกระทง)

🔹 ขั้นตอนที่ 1: เตรียมไฟล์ทั้งหมด

  • ให้แน่ใจว่ามีไฟล์ครบดังนี้:

    📁 LoyKrathongGame
├── index.html
├── pdf.html
├── 404.html
└── code.gs

🔹 ขั้นตอนที่ 2: เปิด Google Apps Script

    1. ไปที่ https://script.google.com/

    2. คลิก “โครงการใหม่ (New Project)”

    3. ตั้งชื่อโปรเจ็กต์ เช่น
      👉 เกมตะลุยขุมทรัพย์วันลอยกระทง

🔹 ขั้นตอนที่ 3: คัดลอกโค้ดไปวางใน Apps Script

(1) เปิดไฟล์ Code.gs แล้ววางโค้ดเต็มที่ผมให้ไว้

  • เป็นโค้ดฝั่ง Server สำหรับรับ-ส่งข้อมูลกับชีต

(2) คลิกเครื่องหมาย ➕ เพิ่มไฟล์ HTML ใหม่

    • ตั้งชื่อว่า index

    • วางโค้ดจาก index.html
      (อย่าลืมว่าไม่มี <script src> ภายนอก เพราะโค้ดผมฝัง JS ไว้แล้ว)

(3) เพิ่มไฟล์ HTML อีก 2 ไฟล์

    • ชื่อ pdf → วางโค้ดจาก pdf.html

    • ชื่อ 404 → วางโค้ดจาก 404.html

🔹 ขั้นตอนที่ 4: เชื่อม Google Sheet

    1. เมื่อรันครั้งแรก ฟังก์ชัน saveData() จะสร้างชีตชื่อ LoyKrathong_Records อัตโนมัติ
      ถ้าอยากใช้ชีตเอง ให้สร้างไว้ก่อน แล้วแก้ชื่อในบรรทัดบนสุดของ code.gs:

      const SPREADSHEET_NAME = 'LoyKrathong_Records';

    2. ในชีตจะมีหัวตาราง:

      timestamp | score | level | name | email

🔹 ขั้นตอนที่ 5: ทดสอบ Run ครั้งแรก

    1. ในแท็บ code.gs → เลือกฟังก์ชัน doGet

    2. คลิก ▶️ Run (รัน)

    3. ระบบจะขอสิทธิ์เข้าถึง Drive/Sheet → คลิก “อนุญาต”

🔹 ขั้นตอนที่ 6: ดีพลอย (Deploy)

    1. ไปที่เมนูบน
      Deploy → New Deployment

    2. คลิก “⚙️ Select type” → เลือก Web app

    3. กำหนดค่า:

      • Description: “Deploy เกมวันลอยกระทง”

      • Execute as: Me (ตัวเอง)

      • Who has access: Anyone (หรือ “Anyone with the link”)

    4. คลิก “Deploy”

    5. คัดลอกลิงก์ Web App ที่ได้ เช่น:

      https://script.google.com/macros/s/AKfycbyJxxxxxxx/exec

🔹 ขั้นตอนที่ 7: ทดสอบการทำงาน

    1. เปิดลิงก์ในเบราว์เซอร์

    2. จะเห็นหน้าเกมหลัก (index.html)

    3. เมื่อกด “บันทึกสถิติ” → ระบบจะบันทึกลงชีตจริง

    4. ปุ่ม “ดาวน์โหลดเกียรติบัตร” → จะเปิดหน้า ?page=pdf เพื่อค้นหาและพิมพ์ใบเกียรติบัตร

    5. หากใส่ URL ผิด จะเปิดหน้า 404.html

🔹 ขั้นตอนที่ 8: แชร์ให้คนอื่น

  • ส่งลิงก์ Web App (เช่น)

    https://script.google.com/macros/s/AKfycbyJxxxxxxx/exec

    ให้ผู้เรียนเข้าผ่านมือถือหรือคอมพิวเตอร์ได้เลย

    รองรับทั้งมือถือ/แท็บเล็ต/PC (Responsive)


***********************************************************************************

Demo  ลิ้งค์รับไฟล์ 
 คู่มือโปรแกรม   PowerPoint

***********************************************************************************

👉สนับสนุนค่ากาแฟ 0892231515 พร้อมเพย์ นายวัฒนชาต ทัศนศร



{fullwidth}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า