สร้าง Web App รับข้อมูลและติดตามงานบน ChatGPT Sites
ไฟล์ที่ใช้ในบทนี้
ลองแม่แบบและดูที่เก็บข้อมูล
เปิด HTML แม่แบบเพิ่มงานสั้นหนึ่งรายการและรีเฟรช ชี้ป้าย localStorage ว่าข้อมูลอยู่ในเบราว์เซอร์นี้ ก่อนกลับไปยังไฟล์แม่แบบที่จะใช้ต่อ
แม่แบบช่วยให้เห็นขั้นตอนก่อนครับ เวอร์ชันนี้จำข้อมูลในเบราว์เซอร์เครื่องนี้ เราจะต่อให้รายการงานเก็บอยู่ฝั่งบริการเพื่ออ่านจากอีกเบราว์เซอร์ได้
สร้างขั้นตอนเดิมบน Sites
แนบแม่แบบแล้วเลือก @Sites วาง Prompt ของบทให้คงเพิ่มงานและเปลี่ยนสามสถานะ พร้อมขอเก็บรายการด้วย D1 หรือการเก็บถาวรฝั่งบริการที่รองรับ
เราคงงานให้เล็กครับ มีแค่เพิ่มชื่องาน ผู้รับผิดชอบ และสถานะ แต่บอกเรื่องการเก็บข้อมูลให้ชัดตั้งแต่บรีฟ
@Sites ใช้ไฟล์ task-app-starter.html ที่ฉันแนบสร้าง Web App ทดลองภาษาไทย “งานหน้าร้านบ้านขนม” คงขอบเขตหนึ่งขั้นตอน: เพิ่มชื่องานที่ต้องกรอก ผู้รับผิดชอบที่เว้นได้ และเปลี่ยนสถานะรอทำ/กำลังทำ/เสร็จแล้ว แม่แบบเดิมใช้ localStorage ให้เปลี่ยนรายการงานเป็นข้อมูลถาวรฝั่งบริการด้วย D1 หรือวิธีที่ Sites รองรับ ตรวจชื่อว่างก่อนบันทึกฝั่งเซิร์ฟเวอร์ และรายงานแหล่งเก็บที่ใช้จริง ถ้าทำไม่ได้ให้แจ้ง ไม่แสร้งว่า localStorage เป็นฐานข้อมูลกลาง ใช้งานสมมติ “เช็กสต็อกคุกกี้” ผู้รับผิดชอบ “ทีมหน้าร้าน” สีน้ำเงินขาวเหลือง อ่านง่ายบนมือถือ ไม่เพิ่มจ่ายเงิน แชท อัปโหลด หรือหลายบทบาท คงสิทธิ์เจ้าของและผู้ดูแลเดิม สร้างและบันทึกเวอร์ชันให้ฉันตรวจ ยังไม่ Deploy ทดสอบชื่อว่าง เพิ่มงาน เปลี่ยนสถานะ รีเฟรชและอ่านข้อมูลกลับจากบริการ แจ้งข้อที่ยังไม่ผ่านก่อนเผยแพร่หรือเชิญใคร
ตรวจชื่อว่างและการบันทึก
เปิดตัวอย่างที่สร้าง ลองส่งชื่องานว่าง จากนั้นเพิ่มเช็กสต็อกคุกกี้และเปลี่ยนเป็นกำลังทำ รีเฟรชและให้ Work ตรวจอ่านกลับจากแหล่งเก็บจริง ถ้าผิดให้แก้ก่อนเดินต่อ
ลองทั้งกรอกไม่ครบกับทำรายการปกติครับ เราต้องเห็นว่าชื่อว่างบันทึกไม่ได้ และงานที่บันทึกแล้วกลับมาอ่านได้พร้อมสถานะเดิม
ตรวจเวอร์ชันแล้ว Deploy ส่วนตัว
เปิดผลตรวจและสิทธิ์ผู้ดู ยืนยันเวอร์ชันที่ผ่านแล้วจึงสั่ง Deploy โดยคงเจ้าของและผู้ดูแลเดิม เปิด URL ที่ได้และตรวจว่างานยังอยู่
หลังตรวจตัวอย่างแล้วเราจึงเปิดลิงก์ใช้งานครับ ขั้นบันทึกเวอร์ชันกับ Deploy แยกกัน และรอบฝึกนี้ยังคงสิทธิ์ส่วนตัวไว้
Deploy Web App ติดตามงานเวอร์ชันล่าสุดที่ฉันทดสอบแล้วบน Site ฝึกนี้ คงการเข้าถึงเฉพาะเจ้าของกับผู้ดูแลเดิม และคงข้อมูลใน D1 หรือแหล่งเก็บถาวรฝั่งบริการที่ใช้จริง ไม่ล้างข้อมูล ไม่เปลี่ยนกลับเป็น localStorage และไม่เพิ่มผู้ชม ส่ง URL ที่ Deploy แล้วกับสถานะจริงเพื่อให้ฉันเปิดตรวจ หากยังไม่ได้ Deploy ให้บอกตรง ๆ
เปิดอีกเบราว์เซอร์ตรวจข้อมูล
ใช้เบราว์เซอร์หรือโปรไฟล์ใหม่ที่มีสิทธิ์แต่ไม่เคยเปิด Site นี้ เข้า URL เดิมและตรวจงานเช็กสต็อกคุกกี้ ผู้รับผิดชอบ และสถานะกำลังทำ พร้อมแสดงแหล่งเก็บจริงที่ Work ตรวจแล้ว
พอเปิดอีกเบราว์เซอร์แล้วยังเห็นงานตรงกัน เราจะมีหลักฐานเพิ่มว่าข้อมูลอ่านกลับจากบริการได้ครับ ต้นแบบนี้ยังต้องตรวจสิทธิ์และกรณีผิดพลาดเพิ่มเติมก่อนให้ทีมใช้จริง
อ่านข้อมูลจริงของ Web App ฝึกที่ Deploy ล่าสุดจาก D1 หรือแหล่งเก็บถาวรฝั่งบริการที่แอปใช้อยู่ แสดงรายการ “เช็กสต็อกคุกกี้” พร้อมผู้รับผิดชอบและสถานะที่บันทึกจริง บอกชื่อแหล่งเก็บและวิธีอ่านกลับที่ตรวจได้ ห้ามใช้ค่าตัวอย่าง ข้อมูลในแชต หรือ localStorage เป็นหลักฐาน และไม่แก้ข้อมูล ฉันจะเปิด URL เดิมในเบราว์เซอร์ใหม่ที่มีสิทธิ์เพื่อเทียบผล
ใช้ปุ่ม ← → บนคีย์บอร์ดได้
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 ช่วงที่ต้องมีในคลิป
แนวพูดปรับเป็นสำนวนของคุณได้ ติ๊กเมื่ออัดแล้วและเปิดตรวจสิ่งที่ระบุ
ลองแม่แบบและดูที่เก็บข้อมูล
เปิด HTML แม่แบบเพิ่มงานสั้นหนึ่งรายการและรีเฟรช ชี้ป้าย localStorage ว่าข้อมูลอยู่ในเบราว์เซอร์นี้ ก่อนกลับไปยังไฟล์แม่แบบที่จะใช้ต่อ
“แม่แบบช่วยให้เห็นขั้นตอนก่อนครับ เวอร์ชันนี้จำข้อมูลในเบราว์เซอร์เครื่องนี้ เราจะต่อให้รายการงานเก็บอยู่ฝั่งบริการเพื่ออ่านจากอีกเบราว์เซอร์ได้”
สร้างขั้นตอนเดิมบน Sites
แนบแม่แบบแล้วเลือก @Sites วาง Prompt ของบทให้คงเพิ่มงานและเปลี่ยนสามสถานะ พร้อมขอเก็บรายการด้วย D1 หรือการเก็บถาวรฝั่งบริการที่รองรับ
“เราคงงานให้เล็กครับ มีแค่เพิ่มชื่องาน ผู้รับผิดชอบ และสถานะ แต่บอกเรื่องการเก็บข้อมูลให้ชัดตั้งแต่บรีฟ”
ตรวจชื่อว่างและการบันทึก
เปิดตัวอย่างที่สร้าง ลองส่งชื่องานว่าง จากนั้นเพิ่มเช็กสต็อกคุกกี้และเปลี่ยนเป็นกำลังทำ รีเฟรชและให้ Work ตรวจอ่านกลับจากแหล่งเก็บจริง ถ้าผิดให้แก้ก่อนเดินต่อ
“ลองทั้งกรอกไม่ครบกับทำรายการปกติครับ เราต้องเห็นว่าชื่อว่างบันทึกไม่ได้ และงานที่บันทึกแล้วกลับมาอ่านได้พร้อมสถานะเดิม”
ตรวจเวอร์ชันแล้ว Deploy ส่วนตัว
เปิดผลตรวจและสิทธิ์ผู้ดู ยืนยันเวอร์ชันที่ผ่านแล้วจึงสั่ง Deploy โดยคงเจ้าของและผู้ดูแลเดิม เปิด URL ที่ได้และตรวจว่างานยังอยู่
“หลังตรวจตัวอย่างแล้วเราจึงเปิดลิงก์ใช้งานครับ ขั้นบันทึกเวอร์ชันกับ Deploy แยกกัน และรอบฝึกนี้ยังคงสิทธิ์ส่วนตัวไว้”
เปิดอีกเบราว์เซอร์ตรวจข้อมูล
ใช้เบราว์เซอร์หรือโปรไฟล์ใหม่ที่มีสิทธิ์แต่ไม่เคยเปิด Site นี้ เข้า URL เดิมและตรวจงานเช็กสต็อกคุกกี้ ผู้รับผิดชอบ และสถานะกำลังทำ พร้อมแสดงแหล่งเก็บจริงที่ Work ตรวจแล้ว
“พอเปิดอีกเบราว์เซอร์แล้วยังเห็นงานตรงกัน เราจะมีหลักฐานเพิ่มว่าข้อมูลอ่านกลับจากบริการได้ครับ ต้นแบบนี้ยังต้องตรวจสิทธิ์และกรณีผิดพลาดเพิ่มเติมก่อนให้ทีมใช้จริง”
ก่อนปิดงาน
เปิดดูคลิป แล้วตรวจอีกครั้ง
เป็นสถานะที่คุณตรวจและบันทึกไว้ เก็บไฟล์คลิปฉบับที่ตรวจแล้วก่อนเริ่มบทถัดไป
จดช่วงที่ต้องถ่ายใหม่ ชื่อไฟล์ หรืองานที่รอผล ไม่ใส่รหัสผ่านหรือ API Key
0 / 3,000 ตัวอักษรChecklist และโน้ตเก็บในเบราว์เซอร์เครื่องนี้ ไม่ซิงก์ข้ามเครื่อง
ล้างเฉพาะช่องที่ติ๊กในบทนี้ โน้ตยังอยู่