← เลือกบท

สร้าง Web App รับข้อมูลและติดตามงานบน ChatGPT Sites

ไฟล์ที่ใช้ในบทนี้
แม่แบบ Web App ติดตามงาน · HTML ↗
ช่วง 1 / 5

ลองแม่แบบและดูที่เก็บข้อมูล

ทำบนจอ

เปิด HTML แม่แบบเพิ่มงานสั้นหนึ่งรายการและรีเฟรช ชี้ป้าย localStorage ว่าข้อมูลอยู่ในเบราว์เซอร์นี้ ก่อนกลับไปยังไฟล์แม่แบบที่จะใช้ต่อ

พูดตามนี้

แม่แบบช่วยให้เห็นขั้นตอนก่อนครับ เวอร์ชันนี้จำข้อมูลในเบราว์เซอร์เครื่องนี้ เราจะต่อให้รายการงานเก็บอยู่ฝั่งบริการเพื่ออ่านจากอีกเบราว์เซอร์ได้

ใช้ปุ่ม ← → บนคีย์บอร์ดได้

Checklist และรายละเอียดเพิ่มเติม
← กลับหน้ารวมอัดคลิป

คู่มืออัดคลิป · 30 นาทีตามแผน

สร้าง Web App รับข้อมูลและติดตามงานบน ChatGPT Sites

ต่อแม่แบบบน Sites เป็นระบบเพิ่มงานและเปลี่ยนสถานะหนึ่งขั้นตอน พร้อมตั้งให้บันทึกข้อมูลฝั่งบริการ

เวลาเป็นประมาณการรวมลงมือทำและตรวจงาน ใช้ข้อมูลสมมติของร้านบ้านขนม · หน้านี้เป็นคู่มือช่วยถ่าย เปิดโปรแกรมอัดหน้าจอของคุณควบคู่กัน

ก่อนกดบันทึก

เตรียมให้พร้อม แล้วค่อยเริ่ม

ลองอัดเสียงสั้น ๆ ปิดการแจ้งเตือน และจัดหน้าจอให้เห็นข้อความชัดก่อนถ่ายจริง

บัญชีและเครื่องมือที่ต้องมี

ใช้ Work ที่มี Sites และสิทธิ์สร้างพื้นที่เก็บข้อมูลตามแพลน เตรียม task-app-starter.html จากบทนี้ไว้เป็นแม่แบบ ใช้ข้อมูลสมมติเท่านั้น เวลา 30 นาทีรวมปรับแม่แบบและทดสอบหนึ่งขั้นตอน หากสร้างฐานข้อมูลหรือ Deploy ไม่สำเร็จให้เก็บต้นแบบและระบุส่วนที่ยังไม่ผ่าน ไม่ถือว่าพร้อมใช้กับทีมจริง

แบ่งเวลาเรียน 30 นาทีอย่างไร
  • ลองแม่แบบและเข้าใจแหล่งเก็บ4 นาที
  • มอบหมายขอบเขตหนึ่งขั้นตอน4 นาที
  • สร้าง ปรับ และทดสอบ17 นาที
  • ตรวจชิ้นงานและสรุป5 นาที

ใช้เป็นกรอบจัดคลิปและช่วงให้ผู้เรียนลองทำ ปรับจังหวะพูดได้ ตัดเวลารอเครื่องมือออกและเก็บภาพผลที่เกิดภายหลังมาแทรก

ไฟล์ตัวอย่างของบทนี้

แม่แบบ Web App ติดตามงาน · HTML ↗
ผลงานที่ต้องเห็นท้ายคลิป

ต้นแบบ Web App หนึ่งขั้นตอน พร้อมผลทดสอบและคำอธิบายแหล่งเก็บข้อมูล

ใช้ตอนสาธิต

คำสั่งพร้อมคัดลอก

ใช้กับไฟล์และบริบทที่ระบุในบทนี้ ตรวจชื่อไฟล์และบัญชีให้ตรงก่อนส่ง

@Sites ใช้ไฟล์ task-app-starter.html ที่ฉันแนบสร้าง Web App ทดลองภาษาไทย “งานหน้าร้านบ้านขนม” คงขอบเขตหนึ่งขั้นตอน: เพิ่มชื่องานที่ต้องกรอก ผู้รับผิดชอบที่เว้นได้ และเปลี่ยนสถานะรอทำ/กำลังทำ/เสร็จแล้ว
แม่แบบเดิมใช้ localStorage ให้เปลี่ยนรายการงานเป็นข้อมูลถาวรฝั่งบริการด้วย D1 หรือวิธีที่ Sites รองรับ ตรวจชื่อว่างก่อนบันทึกฝั่งเซิร์ฟเวอร์ และรายงานแหล่งเก็บที่ใช้จริง ถ้าทำไม่ได้ให้แจ้ง ไม่แสร้งว่า localStorage เป็นฐานข้อมูลกลาง
ใช้งานสมมติ “เช็กสต็อกคุกกี้” ผู้รับผิดชอบ “ทีมหน้าร้าน” สีน้ำเงินขาวเหลือง อ่านง่ายบนมือถือ ไม่เพิ่มจ่ายเงิน แชท อัปโหลด หรือหลายบทบาท คงสิทธิ์เจ้าของและผู้ดูแลเดิม
สร้างและบันทึกเวอร์ชันให้ฉันตรวจ ยังไม่ Deploy ทดสอบชื่อว่าง เพิ่มงาน เปลี่ยนสถานะ รีเฟรชและอ่านข้อมูลกลับจากบริการ แจ้งข้อที่ยังไม่ผ่านก่อนเผยแพร่หรือเชิญใคร

ถ่ายตามลำดับ

5 ช่วงที่ต้องมีในคลิป

แนวพูดปรับเป็นสำนวนของคุณได้ ติ๊กเมื่ออัดแล้วและเปิดตรวจสิ่งที่ระบุ

ช่วงถ่าย 1 / 5

ลองแม่แบบและดูที่เก็บข้อมูล

ทำบนจอ

เปิด HTML แม่แบบเพิ่มงานสั้นหนึ่งรายการและรีเฟรช ชี้ป้าย localStorage ว่าข้อมูลอยู่ในเบราว์เซอร์นี้ ก่อนกลับไปยังไฟล์แม่แบบที่จะใช้ต่อ

แนวพูดกับผู้เรียน

“แม่แบบช่วยให้เห็นขั้นตอนก่อนครับ เวอร์ชันนี้จำข้อมูลในเบราว์เซอร์เครื่องนี้ เราจะต่อให้รายการงานเก็บอยู่ฝั่งบริการเพื่ออ่านจากอีกเบราว์เซอร์ได้”

ช่วงถ่าย 2 / 5

สร้างขั้นตอนเดิมบน Sites

ทำบนจอ

แนบแม่แบบแล้วเลือก @Sites วาง Prompt ของบทให้คงเพิ่มงานและเปลี่ยนสามสถานะ พร้อมขอเก็บรายการด้วย D1 หรือการเก็บถาวรฝั่งบริการที่รองรับ

แนวพูดกับผู้เรียน

“เราคงงานให้เล็กครับ มีแค่เพิ่มชื่องาน ผู้รับผิดชอบ และสถานะ แต่บอกเรื่องการเก็บข้อมูลให้ชัดตั้งแต่บรีฟ”

ช่วงถ่าย 3 / 5

ตรวจชื่อว่างและการบันทึก

ทำบนจอ

เปิดตัวอย่างที่สร้าง ลองส่งชื่องานว่าง จากนั้นเพิ่มเช็กสต็อกคุกกี้และเปลี่ยนเป็นกำลังทำ รีเฟรชและให้ Work ตรวจอ่านกลับจากแหล่งเก็บจริง ถ้าผิดให้แก้ก่อนเดินต่อ

แนวพูดกับผู้เรียน

“ลองทั้งกรอกไม่ครบกับทำรายการปกติครับ เราต้องเห็นว่าชื่อว่างบันทึกไม่ได้ และงานที่บันทึกแล้วกลับมาอ่านได้พร้อมสถานะเดิม”

ช่วงถ่าย 4 / 5

ตรวจเวอร์ชันแล้ว Deploy ส่วนตัว

ทำบนจอ

เปิดผลตรวจและสิทธิ์ผู้ดู ยืนยันเวอร์ชันที่ผ่านแล้วจึงสั่ง Deploy โดยคงเจ้าของและผู้ดูแลเดิม เปิด URL ที่ได้และตรวจว่างานยังอยู่

แนวพูดกับผู้เรียน

“หลังตรวจตัวอย่างแล้วเราจึงเปิดลิงก์ใช้งานครับ ขั้นบันทึกเวอร์ชันกับ Deploy แยกกัน และรอบฝึกนี้ยังคงสิทธิ์ส่วนตัวไว้”

ช่วงถ่าย 5 / 5

เปิดอีกเบราว์เซอร์ตรวจข้อมูล

ทำบนจอ

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

แนวพูดกับผู้เรียน

“พอเปิดอีกเบราว์เซอร์แล้วยังเห็นงานตรงกัน เราจะมีหลักฐานเพิ่มว่าข้อมูลอ่านกลับจากบริการได้ครับ ต้นแบบนี้ยังต้องตรวจสิทธิ์และกรณีผิดพลาดเพิ่มเติมก่อนให้ทีมใช้จริง”

ก่อนปิดงาน

เปิดดูคลิป แล้วตรวจอีกครั้ง

จดช่วงที่ต้องถ่ายใหม่ ชื่อไฟล์ หรืองานที่รอผล ไม่ใส่รหัสผ่านหรือ API Key

0 / 3,000 ตัวอักษร

Checklist และโน้ตเก็บในเบราว์เซอร์เครื่องนี้ ไม่ซิงก์ข้ามเครื่อง