Web App ระบบชำระค่าเรียนพิเศษ

                 



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

StoryBook

ตัวอย่าง













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

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

1. ย้ายไฟล์ เข้าโฟลเดอร์ ที่ต้องการ เช่น
25681208 Web App ระบบชำระค่าเรียนพิเศษ

สร้าง Folder เพื่อเก็บ สลิปการโอนเงิน

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



3. เปลี่ยนใน Index.html บรรทัดที่ 252 เปลี่ยน Footer ได้




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() {

  ensureBaseSheets_();

  const t = HtmlService.createTemplateFromFile('index'); // ใช้ไฟล์ index.html ในโปรเจ็กต์

  const html = t.evaluate()

    .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);

  return html;

}


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

✅ 6) 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

✅ 7) เสร็จสิ้น — ได้ลิงก์ 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)
ใหม่กว่า เก่ากว่า