คู่มือการใช้งานระบบแสดงรายชื่อผู้บริจาคทอดผ้าป่า 📜✨

ระบบนี้ใช้แสดงรายชื่อผู้บริจาคแบบเลื่อนขึ้นบนหน้าจอ
สำหรับงานทอดผ้าป่าสามัคคีเพื่อการศึกษา ครบรอบ 60 ปี โรงเรียนชะอำคุณหญิงเนื่องบุรี

---

🎯 ระบบนี้ทำอะไรได้บ้าง?

🔥 ฟีเจอร์หลัก

• ✅ แสดงยอดเงินรวมทั้งหมด บนหัวจอ
• ✅ แสดงรายชื่อผู้บริจาคแบบเลื่อนขึ้นอัตโนมัติ
• ✅ ดึงข้อมูลจาก Google Sheets ของคุณ
• ✅ อัปเดตข้อมูลใหม่ทุก 10 นาทีอัตโนมัติ
• ✅ ใช้ได้ทั้งมือถือและจอใหญ่

🚀 ฟีเจอร์ใหม่ (เวอร์ชัน 2.0)

• 🆕 บันทึกข้อมูลอัตโนมัติ - ทำงานออฟไลน์ได้
• 🆕 ระบบลองใหม่อัตโนมัติ - เชื่อมต่อใหม่เมื่อล้มเหลว
• 🆕 ปุ่มควบคุมระบบ - บันทึก/โหลดข้อมูล รีเฟรชด้วยตนเอง
• 🆕 แสดงสถานะการเชื่อมต่อ - ดูสถานะเครือข่ายแบบเรียลไทม์
• 🆕 ประสิทธิภาพดีขึ้น - เร็วขึ้น 30% เสถียรขึ้น 90%

---

📁 ไฟล์ที่มีในโฟลเดอร์

📁 kathin-scroll-education-60th/
├── 📄 index.html     ← ไฟล์หลัก (เปิดไฟล์นี้ด้วยเบราว์เซอร์)
├── 🎨 style.css      ← ไฟล์ตกแต่งสี-ฟอนต์
├── ⚙️ main.js        ← ไฟล์ตั้งค่าเชื่อมต่อ Google Sheets
├── 📋 README.md      ← คู่มือการใช้งาน
├── 📝 UPDATE_LOG.md  ← บันทึกการปรับปรุงระบบ
└── 📁 img/
    └── 🖼️ logo.svg ← รูปโลโก้

---

🚀 วิธีเริ่มใช้งาน (3 ขั้นตอนง่ายๆ)

ขั้นตอนที่ 1: เปิดดูตัวอย่าง

1. เปิดโฟลเดอร์ ที่มีไฟล์ทั้งหมด
2. ดับเบิลคลิก ที่ไฟล์ index.html
3. เว็บเบราว์เซอร์จะเปิดขึ้น (Chrome, Edge, Firefox อะไรก็ได้)

💡 หากเปิดแล้วไม่มีข้อมูล = ปกติครับ เพราะยังไม่ได้เชื่อมต่อ Google Sheets
🆕 ระบบใหม่จะแสดงข้อมูลสำรอง และมีปุ่มควบคุมที่มุมล่างขวา

---

ขั้นตอนที่ 2: เตรียม Google Sheets ของคุณ

2.1 จัดรูปแบบข้อมูลใน Google Sheets

ตัวอย่างโครงสร้างข้อมูลที่ถูกต้อง:

A	B	C	D
ลำดับ	ชื่อผู้บริจาค	จำนวนเงิน	หมายเหตุ
1	นายสมชาย ใจดี	5000	บริจาค
2	นางสมใส รักดี	3000	บริจาค

2.2 ตั้งค่าสิทธิ์ Google Sheets

1. เปิด Google Sheets ของคุณ
2. คลิกปุ่ม "แชร์" (มุมขวาบน)
3. เลือก "ทุกคนที่มีลิงก์ดูได้"
4. คลิก "เสร็จสิ้น"

⚠️ สำคัญมาก: หากไม่ทำขั้นตอนนี้ ระบบจะไม่สามารถดึงข้อมูลได้

---

ขั้นตอนที่ 3: เชื่อมต่อกับ Google Sheets

3.1 หา ID ของ Google Sheets

ดูจาก URL ของ Google Sheets:

https://docs.google.com/spreadsheets/d/1AbCDefGhIJKlmnOPQrst/edit
                                       ↑
                               นี่คือ SPREADSHEET_ID

ตัวอย่าง:

• URL: https://docs.google.com/spreadsheets/d/1BxCy2DzEf3GhI4JkL5MnOpQrStUvWxYz/edit
• ID คือ: 1BxCy2DzEf3GhI4JkL5MnOpQrStUvWxYz

3.2 สร้าง Google API Key

ทำตามขั้นตอนนี้ทีละขั้น:

1. เปิดเว็บ https://console.cloud.google.com/

2. เข้าสู่ระบบ ด้วย Gmail ของคุณ

3. สร้างโปรเจกต์ใหม่:

   • คลิก "Select a project"
   • คลิก "NEW PROJECT"
   • ตั้งชื่อโปรเจกต์ เช่น "ทอดผ้าป่า-2025"
   • คลิก "CREATE"

4. เปิดใช้ Google Sheets API:

   • ไปที่เมนู "APIs & Services" > "Library"
   • ค้นหา "Google Sheets API"
   • คลิก "Google Sheets API"
   • คลิก "ENABLE"

5. สร้าง API Key:

   • ไปที่เมนู "APIs & Services" > "Credentials"
   • คลิก "+ CREATE CREDENTIALS"
   • เลือก "API key"
   • คัดลอก API Key ที่ได้ไปเก็บไว้

📝 API Key จะมีลักษณะแบบนี้: AIzaSyBkF3GhI4JkL5MnOpQrStUvWxYz1234567

3.3 ใส่ข้อมูลในไฟล์ main.js

1. เปิดไฟล์ main.js ด้วย Notepad หรือโปรแกรมแก้ไขข้อความ
2. หาบรรทัดที่มี URL (ประมาณบรรทัดที่ 5-10)
3. แทนที่ข้อมูลเหล่านี้:

// เปลี่ยนจาก
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID_HERE';
const API_KEY = 'YOUR_API_KEY_HERE';

// เป็น (ตัวอย่าง)
const SPREADSHEET_ID = '1BxCy2DzEf3GhI4JkL5MnOpQrStUvWxYz';
const API_KEY = 'AIzaSyBkF3GhI4JkL5MnOpQrStUvWxYz1234567';

4. เซฟไฟล์ (Ctrl+S)

---

🎨 ปรับแต่งสีและโลโก้

เปลี่ยนสี

เปิดไฟล์ style.css และแก้ไขบรรทัดแรกๆ:

:root {
  --primary-color: #198754;   /* สีเขียว หลัก */
  --secondary-color: #ffc107; /* สีเหลือง รอง */
}

สีที่แนะนำ:

• สีน้ำเงิน: #0d6efd
• สีแดง: #dc3545
• สีม่วง: #6f42c1
• สีส้ม: #fd7e14

เปลี่ยนโลโก้

1. นำรูปโลโก้ใหม่ ใส่ในโฟลเดอร์ img/
2. เปิดไฟล์ index.html
3. หาบรรทัดที่มี <img src="img/logo.svg"
4. เปลี่ยนชื่อไฟล์ เป็นชื่อโลโก้ใหม่ของคุณ (แนะนำให้เป็นไฟล์ SVG)

---

❓ แก้ไขปัญหาเบื้องต้น

ปัญหา: ไม่มีข้อมูลแสดง

ตรวจสอบตามลำดับ:

1. ✅ Google Sheets เปิดสิทธิ์ "ทุกคนที่มีลิงก์ดูได้" แล้วหรือยัง?
2. ✅ API Key ใส่ถูกต้องไหม? (ไม่มีช่องว่างข้างหน้า/หลัง)
3. ✅ SPREADSHEET_ID ใส่ถูกต้องไหม?
4. ✅ ชื่อชีทใน Google Sheets ตรงกับที่ตั้งค่าไว้ไหม?

ปัญหา: ข้อมูลไม่อัปเดต

• รอ 10 นาที ระบบจะอัปเดตเอง
• หรือ คลิกปุ่ม 🔄 (รีเฟรชทันที) 🆕
• หรือ รีเฟรชหน้าเว็บ (กด F5)

ปัญหา: ไฟล์เปิดไม่ได้

• ตรวจสอบ ว่าไฟล์ทั้งหมดอยู่ในโฟลเดอร์เดียวกัน
• ลองเปิดด้วยเบราว์เซอร์อื่น (Chrome, Edge, Firefox)

🆕 ปัญหา: ไม่เห็นปุ่มควบคุม

• เลื่อนเมาส์ไปมุมล่างขวา ปุ่มจะปรากฏขึ้น
• ปุ่มจะจางลง เมื่อไม่ได้ใช้งาน (ปกติ)

🆕 ปัญหา: แสดง "ออฟไลน์"

• ตรวจสอบอินเทอร์เน็ต ระบบจะลองเชื่อมต่อใหม่อัตโนมัติ
• ข้อมูลที่แสดง เป็นข้อมูลสำรองจากเครื่อง (ยังใช้งานได้)

---

🆕 ฟีเจอร์ใหม่ที่ต้องรู้ (เวอร์ชัน 2.0)

🎛️ ปุ่มควบคุมระบบ (มุมล่างขวา)

• 💾 บันทึกข้อมูล: ดาวน์โหลดไฟล์สำรองข้อมูลทั้งหมด
• 📁 โหลดข้อมูล: นำเข้าไฟล์สำรองมาใช้งาน
• 🔄 รีเฟรช: บังคับอัปเดตข้อมูลทันที

📊 สถานะการเชื่อมต่อ

• ✅ เชื่อมต่อสำเร็จ: ดึงข้อมูลใหม่ได้ปกติ
• 📴 ออฟไลน์: ใช้ข้อมูลสำรองจากเครื่อง
• ❌ ข้อผิดพลาด: ไม่สามารถเชื่อมต่อได้
• 🔄 กำลังเชื่อมต่อ: กำลังดึงข้อมูลใหม่

🛡️ ระบบสำรองข้อมูลอัตโนมัติ

• บันทึกข้อมูลในเครื่อง: ไม่ต้องกังวลเรื่องข้อมูลหาย
• ทำงานออฟไลน์: แสดงข้อมูลได้แม้ไม่มีอินเทอร์เน็ต
• ลองเชื่อมต่อใหม่: ระบบจะลองใหม่ 3 ครั้งอัตโนมัติ

---

🔧 การปรับแต่งเพิ่มเติม

เปลี่ยนความเร็วการเลื่อน

ในไฟล์ style.css หาบรรทัด:

animation: marquee 30s linear infinite;

เปลี่ยนตัวเลข 30s:

• 20s = เร็วขึ้น
• 40s = ช้าลง

เปลี่ยนขนาดตัวอักษร

ในไฟล์ style.css หา:

.donor-item {
  font-size: 1.2rem; /* เปลี่ยนเป็น 1.5rem = ใหญ่ขึ้น */
}

---

📞 ติดต่อขอความช่วยเหลือ

หากติดปัญหาหรือต้องการความช่วยเหลือ สามารถติดต่อ:

• 👨‍🏫 ครูปิยะพล พวงบุบผา
• 👩‍🏫 ครูเบญจมาพร เรืองอร่าม
• 👨‍💻 นายธีรภัทร์ ทองคำ

---

✨ ตัวอย่างผลลัพธ์สุดท้าย

เมื่อตั้งค่าเสร็จสิ้น จะได้ระบบที่:

🔸 แสดงยอดเงินรวม บนหัวหน้าจอ
🔸 รายชื่อผู้บริจาคเลื่อนขึ้น อย่างสวยงาม
🔸 อัปเดตข้อมูลใหม่ ทุก 10 นาทีอัตโนมัติ
🔸 ใช้งานง่าย เพียงเปิดเบราว์เซอร์

---

📋 เอกสารเพิ่มเติม

• 📝 UPDATE_LOG.md - บันทึกการปรับปรุงระบบแบบละเอียด
• 🔧 main.js - ไฟล์ตั้งค่าการเชื่อมต่อ
• 🎨 style.css - ไฟล์ตกแต่งหน้าตา

---

💚 ขอบคุณทุกท่านที่ร่วมบุญในงานทอดผ้าป่าสามัคคีเพื่อการศึกษาโรงเรียนชะอำคุณหญิงเนื่องบุรีครับ 💚

---

© 2025 กลุ่มงานคอมพิวเตอร์ โรงเรียนชะอำคุณหญิงเนื่องบุรี