Web App SportDay ออนไลน์

                



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

StoryBook

ตัวอย่าง









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

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

1. ย้ายไฟล์ เข้าโฟลเดอร์ ที่ต้องการ เช่น
25681120 Web App SportDay ออนไลน์

2. เปลี่ยนใน Code.gs  Logo บรรทัดที่ 86

3. เปลี่ยนใน Index.html Logo บรรทัดที่ 40

4. เปลี่ยนใน Index.html Footer บรรทัดที่ 148     



5. Deploy Program

🚀 ขั้นตอนการดีพลอยโปรแกรม Web App (Google Apps Script)

✅ 1) เปิด Script Editor / Apps Script

  1. เปิด Google Sheet ที่ใช้เก็บข้อมูล (เช่น sports)

  2. ไปที่เมนู ส่วนขยาย (Extensions) → Apps Script

✅ 2) วางไฟล์ code.gs

นำโค้ด code.gs ที่ผมให้
→ วางในไฟล์ code.gs
→ กด Save (Ctrl + S)

✅ 3) สร้างไฟล์ index.html

  1. คลิกซ้ายที่โฟลเดอร์ขวามือ → ไฟล์ใหม่ → HTML

  2. ตั้งชื่อ: index

  3. วาง index.html ฉบับเต็มที่ผมให้

  4. กดบันทึก

✅ 4) ตรวจสอบ doGet()

ต้องมีใน code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle("ระบบบันทึกกีฬาสี")
    .setFaviconUrl("https://knid1515.github.io/Pict_All/Krunid_Logo/krunid-002.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

✅ 5) ตรวจสอบสิทธิ์การเข้าถึงชีต

เช็คว่า Spreadsheet ID ถูกต้อง เช่น:

const SPREADSHEET_ID = "1xxxxxxxxxxxxxxxxxxxxxxxxxxxx";

ต้องใช้ไฟล์ที่ครูนิดต้องการจริง ๆ

✅ 6) เปิดสิทธิ์ API การรัน

ทำครั้งแรกเท่านั้น

  1. ไปที่เมนู บริการขั้นสูงของ Google (Advanced Google Services)

  2. เปิด Sheets API

  3. จากนั้นไปที่
    Project Settings → Google Cloud Project → เปิดใน GCP

  4. เปิด Google Sheets API อีกครั้ง (ใน GCP)

✅ 7) Deploy เป็น Web App

  1. กดปุ่ม Deploy มุมขวาบน

  2. เลือก New Deployment

  3. เลือกประเภท: Web App

  4. ใส่ชื่อ: ระบบบันทึกกีฬาสี

  5. Execute as:
    ✔ Me (ตัวเรา)

  6. Who has access:
    ✔ Anyone หรือ Anyone with the link

  7. กด Deploy

Google จะขอสิทธิ์ → กด Allow

✅ 8) เสร็จสิ้น — ได้ลิงก์ Web App

ระบบจะให้ลิงก์เช่น:

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

เอาไปเปิดใช้งาน / ใส่ใน QR / แชร์ครูได้เลย 🎉

🎯 จุดสำคัญที่ต้องระวัง

🟥 1. HTML ต้องใช้ index เท่านั้น

ถ้าใช้ชื่ออื่น ให้แก้ doGet()

🟦 2. ต้องใช้ .setXFrameOptionsMode(...ALLOWALL)

เพื่อให้ UI โหลดครบ (Tailwind, CSS)

🟩 3. ถ้ามี Refused to execute script

ให้เช็กว่า

  • script ใน <script> ไม่ใส่ type="module"

  • ไม่มี HTML แปลก ๆ ติดคอมเมนต์

🟧 4. ถ้ามี “Permission denied”

คือไม่ได้เปิด Sheets API หรือไม่ได้ตั้ง Execute as = Me

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

Demo  ลิ้งค์รับไฟล์ PowerPoint

 คู่มือโปรแกรม     คู่มือย่อ ระบบบันทึกกีฬาสี 

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

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



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