TrainFlow: ออกแบบเวิร์กโฟลว์ออกกำลังกายข้ามอุปกรณ์จาก YouTube

การบันทึกวิดีโอออกกำลังกายจาก YouTube เก็บไว้ดูทีหลังกับการนำมาสร้างเป็นระบบฝึกซ้อมที่ทำซ้ำได้จริงเป็นปัญหาผลิตภัณฑ์ที่แตกต่างกันอย่างสิ้นเชิง การทำบุ๊กมาร์กเก็บลิงก์ไว้ช่วยรักษา URL ต้นทางไว้ได้ก็จริง แต่เวิร์กโฟลว์การฝึกซ้อมจำเป็นต้องรักษาเจตนาของผู้ใช้ให้ได้ด้วย เช่น การระบุว่าท่าเคลื่อนไหวใดที่มีความสำคัญ ช่วงเวลาใดที่เริ่มต้น เหตุผลที่ท่านี้ควรอยู่ในรูทีน และขั้นตอนถัดไปที่ผู้ใช้ต้องปฏิบัติ

ระหว่างการพัฒนา TrainFlow ผู้สร้างได้สำรวจสถาปัตยกรรมที่มองช่วงเวลาของวิดีโอที่ระบุเวลาเป็นอ็อบเจกต์โดเมนที่นำกลับมาใช้ใหม่ได้ พร้อมกับแยกส่วนการวางแผนบนเดสก์ท็อปออกจากขั้นตอนการปฏิบัติงานบนมือถือ บทความนี้อธิบายการตัดสินใจด้านการออกแบบเบื้องหลังเวิร์กโฟลว์ดังกล่าว โดยผู้สร้างระบุว่าตัวอย่างที่นำเสนอมาจากผลิตภัณฑ์และรูปแบบทางวิศวกรรมที่ใช้จริง ไม่ใช่คำแนะนำทั่วไป

URL ของ YouTube ทำหน้าที่เป็นแหล่งอ้างอิงต้นทาง ไม่ใช่คำจำกัดความของท่าออกกำลังกาย เนื่องจากวิดีโอหนึ่งคลิปอาจประกอบด้วยช่วงอบอุ่นร่างกาย การสาธิตสามรูปแบบ ช่วงพัฒนาทักษะ และช่วงคลายกล้ามเนื้อ หน่วยที่นำกลับมาใช้ใหม่ได้จึงมักจะเป็นช่วงเวลาที่เจาะจงภายในวิดีโอนั้น อย่างไรก็ตาม URL เดิมยังคงมีความสำคัญในการรักษาแหล่งที่มาและช่วยให้ผู้ใช้กลับไปดูบริบทเต็มได้

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

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

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

TrainFlow พัฒนาขึ้นโดยใช้ Next.js App Router ซึ่งมีหน้าจอการใช้งานสองรูปแบบที่แตกต่างกันอย่างชัดเจน ได้แก่ หน้าจอสำหรับเดสก์ท็อปและหน้าจอสำหรับมือถือ การแยกส่วนนี้มีความลึกซึ้งมากกว่าการใช้ CSS แบบ Responsive ทั่วไป เนื่องจากทั้งสองบริบทมีหน้าที่การใช้งานที่แตกต่างกันอย่างสิ้นเชิง

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

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

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

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

ที่มา: Dev.to