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