Web App ระบบสั่งเสื้อโปโลออนไลน์

                



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

StoryBook

ตัวอย่าง











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

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

1. ย้ายไฟล์ เข้าโฟลเดอร์ ที่ต้องการ เช่น
25681204 Web App ระบบสั่งเสื้อโปโลออนไลน์


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



3. เปลี่ยนใน Index.html Logo บรรทัดที่ 644 ตัวอย่างเสื้อ(แต่สามารถใช้ใน sheet ได้



4. 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)
ใหม่กว่า เก่ากว่า