คู่มือการสร้างระบบเช็คสถานะรายการโดยข้อมูลลูกค้า

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

(ลองกรอก 0000000000 ดูได้ครับ)

เพียงแค่ลูกค้ากรอกเบอร์โทรศัทพ์ก็จะขึ้นโชว์สถานะสินค้าที่สั่งซื้อไป สถานะคิว comission หรืออื่น ๆ ให้ตรวจสอบครับ หรือหากมีออเดอร์ที่จัดส่งแล้ว ก็จะขึ้นเลขติดตามสินค้าพร้อมปุ่มคัดลอกเลขให้เข้าไปเช็คสถานะการจัดส่ง เลือก dropdown ขนส่งเพื่อเข้าไปเช็คได้เลยครับ

ขั้นตอนที่ 1: การเตรียมไฟล์ Google Sheets

  1. เปิด Google Sheets แล้วสร้างไฟล์ใหม่ (Blank spreadsheet)
  2. ตั้งชื่อไฟล์ตามต้องการ (เช่น “ระบบเช็คสถานะออเดอร์ร้าน…”)
  3. ใน แถวที่ 1 (Row 1) ให้พิมพ์หัวข้อตามลำดับคอลัมน์ ดังนี้:
    • คอลัมน์ A: เบอร์โทรศัพท์ (สามารถเป็นอย่างอื่นได้ เช่น user X, email, ชื่อนามสกุล)
    • คอลัมน์ B: ชื่อลูกค้า
    • คอลัมน์ C: สินค้า
    • คอลัมน์ D: สถานะ (จะพิมพ์อะไรได้เลยนะครับว่าอยู่สถานะใดแล้ว)
    • คอลัมน์ E: ขนส่ง
    • คอลัมน์ F: เลขพัสดุ
  4. หรือดาวน์โหลด / copy sheet นี้ไปทำต่อได้เลยนะครับ 

ทริคการลงข้อมูล (คอลัมน์ C สินค้า): หากลูกค้าสั่งหลายชิ้นในออเดอร์เดียว ให้พิมพ์ชื่อสินค้าชิ้นแรก แล้วกด Alt + Enter (Windows) หรือ Option + Return (Mac) เพื่อขึ้นบรรทัดใหม่ในช่องเดิม แล้วพิมพ์ชิ้นต่อไปได้เลย

ขั้นตอนที่ 2: การใส่โค้ด Google Apps Script
(สำหรับผู้ที่สร้างไฟล์ใหม่ ไม่ได้ copy จาก sheet ตัวอย่าง)

  1. ที่หน้า Google Sheets ไปที่เมนู ส่วนขยาย (Extensions) > เลือก Apps Script
  2. ระบบจะเปิดหน้าต่างใหม่ขึ้นมา ให้ลบโค้ดเดิมที่อยู่ในไฟล์ Code.gs ออกให้หมด
  3. คัดลอกโค้ดด้านล่างนี้ไปวางแทนที่:

⚙️ โค้ดสำหรับหลังบ้าน (Code.gs)

กดปุ่มด้านล่างเพื่อคัดลอกโค้ดทั้งหมด แล้วนำไปวางใน Google Apps Script (ไฟล์ Code.gs)

  1. หลังจากนั้นเลื่อนเมาส์ไปที่แถบเมนูด้านซ้าย (ข้างคำว่า ไฟล์/Files) คลิกเครื่องหมาย +เลือก HTML และตั้งชื่อไฟล์ว่า Index (ต้องพิมพ์ตัว I (ไอ) พิมพ์ใหญ่เท่าน๊านนนน!!!) 


5. ลบโค้ดเดิมในไฟล์ Index.html ออก แล้วคัดลอกโค้ดด้านล่างนี้ (ปุ่มชมพู “คัดลอดโค้ด HTML”)ไปวาง โดยสามารถตั้งชื่อ ตกแต่งสีพื้นหลัง สีปุ่ม ใส่แบนเนอร์ จากระบบด้านล่างที่ผมทำขึ้นมาด้านล่างนี้ได้เลยนะครับ มีพรีวิวด้านข้าง แต่ปุ่มกดยังกดไม่ได้นะครับ แต่งตามชอบเสร็จก็กดปุ่มคัดลอกโค้ดไปได้เลยครับ

🛠️ ตั้งค่าระบบตรวจสอบ

แก้ไขข้อความในฟอร์ม
ข้อความสีเทาใต้ชื่อร้าน
ข้อความสีแดงใต้คำแนะนำ เว้นว่างถ้าไม่ต้องการแสดง
🚚 เลือกขนส่งที่ต้องการแสดง
Flash
📮 TP
🟠 KEX
🔴 J&T
🛒 SPX

คัดลอกโค้ดไปใช้งาน

*นำไปวางทับในไฟล์ Index.html ของ Google Apps Script

ตัวอย่าง (Live Preview)


ขั้นตอนที่ 3: การ Deploy (นำไปใช้งานจริง)

  1. กดปุ่ม บันทึก (Save) ที่เป็นรูปแผ่นดิสก์ด้านบน (กดเซฟทั้ง 2 ไฟล์)
  2. คลิกปุ่มสีน้ำเงินขวาบน การทำให้ใช้งานได้ (Deploy) > การทำให้ใช้งานได้รายการใหม่ (New deployment)
  3. คลิกไอคอนเฟือง ⚙️ ตรงคำว่า เลือกประเภท (Select type) แล้วเลือก เว็บแอป (Web app)
  4. ตั้งค่าตามนี้:
    • คำอธิบาย: ปล่อยว่างไว้ได้ครับ
    • ดำเนินการในฐานะ (Execute as): เลือก ฉัน (Me)
    • ผู้มีสิทธิ์เข้าถึง (Who has access): เลือก ทุกคน (Anyone) (สำคัญมากกกกกกก!)

5. กด การทำให้ใช้งานได้ (Deploy)
6. (หากมีหน้าต่างเด้งขึ้นมา) ให้กด ให้สิทธิ์เข้าถึง (Authorize Access) > เลือกอีเมลของคุณ > คลิกคำว่า ขั้นสูง (Advanced) ขวาล่าง > ไปที่โปรเจกต์ (ไม่ปลอดภัย) > กด อนุญาต (Allow)
7. คัดลอก URL ของเว็บแอป (Web app URL) นำไปส่งให้ลูกค้าได้เลย!

วิธีอัปเดตระบบเมื่อแก้ไขโค้ดใหม่

หากมีการแก้ไขโค้ดในภายหลัง (อย่าง HTML) ต้องทำการ Deploy ใหม่เสมอเพื่อให้หน้าเว็บอัปเดต:

  1. กด บันทึก (Save)
  2. คลิก การทำให้ใช้งานได้ (Deploy) > การจัดการการทำให้ใช้งานได้ (Manage deployments) อันกลาง
  3. คลิกไอคอนรูป ดินสอ ✏️ (แก้ไข)
  4. ตรงคำว่า เวอร์ชัน (Version) ให้คลิกเลือก สร้างเวอร์ชันใหม่ (New version)
  5. กด การทำให้ใช้งานได้ (Deploy) ปุ่มล่างขวา

ส่วนเพิ่มเติม: ถาม-ตอบ ปัญหาที่พบบ่อย (FAQ)

Q1: ค้นหาเบอร์โทรศัพท์ไม่เจอ ขึ้นว่า "ไม่พบข้อมูลออเดอร์" ทั้งที่ลูกค้าสั่งของแล้ว?

  • วิธีแก้:
  • 1. ตรวจสอบใน Google Sheets ว่าพิมพ์เบอร์โทรศัพท์ใน คอลัมน์ A ถูกต้องหรือไม่
  • 2. ตรวจสอบว่าข้อมูลลูกค้าไม่ได้ไปอยู่ใน "แผ่นงานอื่น" (Sheet อื่น) โค้ดนี้จะดึงข้อมูลจาก "แผ่นงานแรกสุด (Sheet 1) ทางซ้ายมือเสมอ"
  • 3. ตรวจสอบว่าเริ่มกรอกข้อมูลใน แถวที่ 2 เป็นต้นไป (แถวที่ 1 ต้องเป็นหัวข้อเท่านั้น)

Q2: แก้ไขข้อมูลในตาราง (เช่น เปลี่ยนสถานะเป็นจัดส่งแล้ว) หน้าเว็บจะอัปเดตตอนไหน?

  • วิธีแก้: ระบบจะ "อัปเดตทันที" (Real-time) ครับ เมื่อคุณพิมพ์แก้ใน Google Sheets เสร็จ ลูกค้าที่กดค้นหาใหม่บนหน้าเว็บจะเห็นข้อมูลล่าสุดทันทีโดยที่คุณไม่ต้องกด Deploy ใหม่ (ยกเว้นกรณีที่คุณไปแก้ไข โค้ด ถึงจะต้องกด Deploy ใหม่)

Q3: ทำไมหน้าเว็บขึ้น Error หรือโหลดค้างตลอดเวลา?

  • วิธีแก้: มักเกิดจากการตั้งค่าสิทธิ์การเข้าถึงผิดพลาด ให้ทำตามนี้:
    1. ไปที่มุมขวาบน เลือก การทำให้ใช้งานได้ (Deploy) > การจัดการการทำให้ใช้งานได้ (Manage deployments)
    2. กดไอคอนรูปดินสอ ✏️
    3. ตรงหัวข้อ ผู้มีสิทธิ์เข้าถึง (Who has access) ตรวจสอบให้แน่ใจว่าเลือกเป็น "ทุกคน (Anyone)" เท่านั้น (ถ้าเลือกเป็น 'ทุกคนที่มีบัญชี Google' ลูกค้าบางคนจะเปิดไม่ได้)

Q4: ถ้าอยากเพิ่มคอลัมน์ใหม่ (เช่น คอลัมน์หมายเหตุ) ทำได้ไหม?

  • วิธีแก้: คุณสามารถแทรกคอลัมน์ใน Google Sheets ได้ แต่ระบบหน้าเว็บจะยังไม่แสดงผลคอลัมน์นั้น จนกว่าคุณจะไปแก้ไขโค้ดในไฟล์ Code.gs และ Index.html ให้รองรับคอลัมน์ใหม่ที่เพิ่มขึ้นมา

Q5: ลูกค้า 1 คน สั่งของหลายชิ้น แต่ส่งคนละกล่อง (คนละเลขพัสดุ) ต้องกรอกข้อมูลอย่างไร?

  • วิธีแก้: ให้คุณพิมพ์เบอร์โทรศัพท์เดิมซ้ำในบรรทัดใหม่ แล้วใส่ข้อมูลสินค้าชิ้นที่ 2 พร้อมเลขพัสดุของชิ้นนั้นได้เลย ระบบจะดึงข้อมูลทั้ง 2 กล่องมาแสดงให้ลูกค้าเห็นพร้อมกัน

สงสัยจุดใด หรือมีคำแนะนำเพิ่มเติม สามารถติดต่อทางเราได้ตลอดนะครับ 🙇🏻‍♂️ หวังว่าจะมีประโยชน์ต่อทุกท่านไม่มากก็น้อยครับ

Translator