ตอนทำธิสิสทางอาจารย์จะให้ทำเป็นตัวโปรแกรมเพื่อให้ใช้งานกับคอมพิวเตอร์แทนที่จะใช้อุปกรณ์ไม้บรรทัดวัดมุมการเคลื่อนไหวของศีรษะและลำคอ หรือเรียกอีกอย่างว่า Goniometer เพราะเครื่องมือนั้นขึ้นกับผู้วัดแต่ละคน ทำให้เกิดความคลาดเคลื่อนระหว่างการวัดได้ เลยเป็นสาเหตุที่เราจะพัฒนาตัวโปรแกรมกัน
ตอนพัฒนาตัวเว็บที่จะใช้ในงานวิจัย (ธีสิสนะแหละ) เดิมใช้ภาษา HTML, CSS และ JS ที่ใช้เครื่องมือ Bootstrap ร่วมกันกับ jQuery ในตอนนั้นเขียนเสร็จแล้ว ตัวเว็บทำงานได้ตามปกติเพียงแต่เกิดปัญหาเมื่อโปรแกรมที่มีขนาดใหญ่มากขึ้นเนื่องจาก
- โค้ดที่มีความซับซ้อนส่งผลต่อประสิทธิภาพในการทำงาน
- การแก้ไขตัวโต้ดเวลาเกิดบั้กทำได้ยาก เกิดปัญหาเวลาติดบั้กแล้วต้องไล่อ่านโค้ดที่เอ่อ งงไปหน่อย
- เพิ่มเครื่องมือ (Library) ได้ลำบาก
โดยจากบทความที่แล้วที่พูดถึงการใช้เทคนิคการจับภาพใบหน้าที่เขียนโดย Tensorflow.js กับ ONNX.js ที่ใช้ตัวจาวาสคริปธรรมดาแล้วเวลาเขียนไปเรื่อย ๆ ก็เริ่มงงและ
React
หลังจากความงงของตัวโค้ดมานานมากจนกระทั่งมาทำงานโปรเจ็คหนึ่งในแล็ปที่ต้องมาใช้ React พอดี เดิมทีเห็นคู่มือแล้วพบว่ายากไปหน่อยเลยไม่ใช้ พอกลับมาเรียนรู้อีกรอบ เริ่มจากการอ่าน ค่อย ๆ อ่าน พร้อมกับลงมือเขียนโค้ดไปทีละบท แล้วฝึกการเขียนโค้ด หรือเรียกการเรียนรู้แบบนี้อีกอย่างว่า Learn by doing ทำแบบนี้ไปตลอด หลังจากการฝึกด้วยวิธีนี้แล้วนำมาพัฒนาตัวเว็บใช้ในงานนั้นก็พบว่าทำงานได้ดี เขียนแล้วเข้าใจง่าย มีประสิทธิภาพที่สูงมาก (แต่ไม่ได้รับประกันความพึงพอใจแบบบริษัทนึง) เลยลองพัฒนาตัวโปรแกรมขึ้นมาพบว่าเวิร์คดีนะ
หลังจากที่พัฒนาตัวโปรแกรมนั้นแล้ว รวมกับพบปัญหาระหว่างการเขียนโค้ดในเว็บที่ทำงานในงานวิจัย เลยปรับโค้ดใหมให้เป็น React เลยดีกว่า จับเอาแต่ละส่วนในหน้าเว็บเป็น Component แทน เขียนตัวแปรแต่ละตัวให้เป็น props, state ตามที่คู่มือในเว็บได้เขียนไว้ รวมถึง
- เดิมหน้าเว็บที่เป็น Bootstrap รวมกับ jQuery เลยลงเครื่องมือที่เรียกว่า react-bootstrap ปรับตัวโค้ดให้เป็น component แต่ละชิ้นแทน ทำแล้วโค้ดจากเดิมที่ใช้ class กลายมาเป็นตัวนี้แทน
- ตัวเว็บใช้ AJAX เดิมทีใช้ XMLHttprequest แล้วเอามาเขียน พบว่าตัวโค้ดดูซับซ้อนไปหน่อย เลยเปลี่ยนมาใช้ axios แทน นอกเหนือจากนี้ตัวโค้ดที่โหลดหน้าที่เก็บข้อมูลหลาย ๆ อันที่ทำมาเป็นตารางใช้ axios-hook แทน
- จากการใช้ getUsermedia เพื่อให้เปิดกล้องเว็บแคม เลยลง react-webcam แล้วใส่ component Webcam แทนเพื่อเปิดกล้อง
- และอื่น ๆ
หลังจากการปรับเปลี่ยนโค้ดแล้วโดยสรุปคือตัวโค้ดเรียบง่ายขึ้นกว่าเดิมมาก แก้ปัญหาที่เกิดจากการทำงานตัวโค้ดได้ง่ายขึ้น รวมถึงประสิทธิภาพของตัวโค้ดที่ดีขึ้น เลยคิดว่าจะเอาตัวโค้ดนี้นี่แหละมาใช้
นอกเหนือจากนี้การเขียนโค้ดโดยใช้ React ทำให้เราสามารถทำหน้าเว็บได้เร็วขึ้นกว่าเดิมมากด้วย สบายเราล่ะ
โดยสรุป
เราควรจะเลือกเครื่องมือให้ถูกต้อง เพื่อให้ทำงานได้จนถึงเป้าหมายที่ต้องการ ในที่นี้คือเปลี่ยนการเขียนโค้ดเดิมที่ใช้ jQuery มาใช้ React แทน พบว่าเขียนโค้ดได้ง่าย มีประสิทธิภาพที่ดี และสามารถเพิ่มเครื่องมือ (Library) ไปได้ตามที่ต้องการ ในที่นี้คือ react-bootstrap, axios, react-webcam เป็นต้น
นอกเหนือจากนี้สิ่งที่สำคัญที่สุดของการใช้เครื่องมือไหนก็ตามการเรียนรู้สำคัญที่สุด โดย
คนที่ยึดการเรียนรู้ไว้เป็นลำดับหนึ่งเป็นบุคคลชั้นหนึ่ง อ.เฉิน
และอีกอย่างนึง งานวิจัย (ธีสิส) นี้ จะเอาเครื่องมือนี้แหละไปพัฒนาหน้าเว็บให้เสร็จ แล้วทดสอบเครื่องมือให้เรียบร้อย ก็จบงานได้ครับ
