CodeClub #5: Return of the Club — Key Takeaways
บันทึกเรื่องราว และ Key Takeaways ที่เราได้จากการไปร่วมงาน CodeClub 5
สวัสดีครับทุกคน! 👋🏻
เมื่อวันเสาร์ที่ผ่านมา เราได้ไปร่วมงาน CodeClub #5: Return of the Club ในวันนี้ เราก็เลยอยากจะมาเล่าประสบการณ์ต่างๆ และ Key Takeaways ที่ได้ครับ
ในงานรอบนี้ เราสร้าง Application เพื่อแจ้งเตือนเวลาที่เรามาถึงสถานี BTS แล้ว จะได้ไม่ดูวิดิโอ ฟังเพลง หรือหลับเพลินจนลืมลงจากสถานีครับ และรอบนี้ก็ได้มาลองเล่น Flutter ที่เราไม่เคยเขียนจริงๆ มาก่อนด้วยครับ! 🙌🏻
หาตำแหน่งที่ใกล้ตัวที่สุดด้วยคณิตศาสตร์
หนึ่งใน Task ที่ต้องทำคือการหาว่าสถานี BTS อะไรอยู่ใกล้กับเรามากที่สุด และอยู่ในรัศมี 300 เมตรมั้ย ซึ่งอย่างแรกเลย เราก็ต้องรู้ระยะทางระหว่างจุดสองจุดบนโลกก่อน
วิธีที่ใช้ก็คือ แปลงละติจูตกับลองติจูดเป็น Cartesian Coordinate ให้ได้ก่อน เริ่มจากแปลง Lat, Lon เป็น Radian ก่อนแล้วปลั๊กเข้าสูตร ก็จะได้ออกมาเป็น Vector เพื่อที่เราจะได้เอาไปวัดระยะทางได้
สิ่งที่น่าสนใจมากๆ คือมีการใช้รัศมีของโลก (6,371 กิโลเมตร) ในสูตรด้วย แปลกใจมากว่าเรื่องที่เคยเรียนจะได้เอามาใช้จริง ฮ่าๆ
ต่อจากนั้น ก็ได้เวลาวัดระยะทางระหว่างตัวเรากับสถานี ก็เรียกใช้ฟังก์ชั่นเพื่อแปลงตำแหน่งของเรา กับตำแหน่งของสถานีเป็น Vector แล้วก็วัดระยะทางระหว่างสองเวคเตอร์ด้วย distanceTo ครับ~
เสร็จแล้วก็ง่ายล่ะ ใช้ minBy เพื่อหาสถานีที่ใกล้ตัวที่สุด แล้วก็เช็คว่าระยะทางน้อยกว่า 300 เมตรมั้ย ถ้าน้อยกว่าก็ return สถานีออกไป เย่!
Flutter และ Dart เขียนสนุกและเป็นธรรมชาติ
นอกจากเรื่อง Math ก็มาพูดถึง Flutter กันบ้างครับ ตัวภาษา Dart ค่อนข้างเป็นธรรมชาติมากๆ เราว่าเขียนง่ายดี ส่วน Flutter ก็ตรงไปตรงมาดี Docs ทั้งสองอย่างค่อนข้างอ่านง่าย
สิ่งที่ได้ลองเล่นในนี้คือ Streams บน Flutter ซึ่งใช้ง่ายและดีมากๆ เริ่มจากการสร้าง Stream Controller ขึ้นมา แล้วก็ใช้ controller.add เพื่อเพิ่ม Event เข้า Stream แล้วก็ Expose Stream ออกมาจาก controller.stream และรับข้อมูลด้วย stream.listen ฮะ สะดวกมากๆ
รู้สึกว่า Dart เอา Object-Oriented Programming มาใช้ได้ธรรมชาติมากๆ และไม่ Verbose เหมือน Java เพราะมี Type Inference ที่ดี เขียนสนุกและเพลินมากครับ
ตอนนี้ติดปัญหาก็คือมันไม่มี Reactive Store แบบ MobX ที่เอาไว้ใช้จัดการกับ Shared State ถ้ามีใครทำแบบใช้ง่ายๆ เหมือน MobX จะดีมากๆ ฮะ
เบื้องหลังเอฟเฟคเท่ๆ คือฟิสิกส์และคณิตศาสตร์
นอกจากเราแล้ว ก็มีพี่ไทที่ทำเอฟเฟคเวลา QR Code เปลี่ยน ทำให้มี Particle เล็กๆ ระเบิดออกมาสำหรับแอพ Promptpay2 โดยใช้แค่ 2D Canvas อย่างเดียว ไม่ใช้ Library ช่วย เพราะจะทำให้ PWA หนักเกินไปครับ~
สิ่งที่เราทึ่งที่สุดในงานนี้คือ ศาสตร์ต่างๆ โดยเฉพาะคณิตศาสตร์ หรือแม้กระทั่งฟิสิกส์ เอามาใช้กับการเขียนโปรแกรมเพื่อสร้างสิ่งต่างๆ ได้เยอะมาก ทำให้เราทำอะไรที่ดูเหมือนจะเป็นไปไม่ได้ด้วยความรู้ที่เราเรียนรู้มา
สิ่งที่พี่ไททำ ยิ่งทำให้เราเห็นเรื่อง Utilization ของคณิตศาสตร์และฟิสิกส์ได้ชัดมากๆ
อย่างแรกเลย เริ่มจากการทำเอฟเฟคการระเบิด พี่ไทเริ่มด้วยการสร้าง Pixel Renderer แล้วใช้สูตรทางฟิสิกส์เรื่องความเร่ง (v = s/t) และแรงโน้มถ่วง (F = GmM/R² มั้งถ้าจำไม่ผิด) ตรงนี้ก็จะเป็นเรื่องของการเอาความรู้ด้านฟิสิกส์มาใช้ มีการวาดรูปบน Real Time Board บ่อยมากๆ ฮะ
เมื่อ Plug ค่าต่างๆ เข้าสูตรเสร็จแล้ว ก็ถึงเวลา Tweak Parameter กันสนุกมากๆ ซึ่งถ้าพี่ไทไม่มีความรู้เรื่องฟิสิกส์จะทำอะไรแบบนี้ไม่ได้เลย ก็เป็น Reminder เล็กๆ ว่าที่เรียนฟิสิกส์กันมันเอาไป Apply อะไรที่เราคิดไม่ถึงได้เยอะ เพราะฟิสิกส์คือการเข้าใจธรรมชาติที่อยู่รอบตัวเรา
เข้าสู่โลกสามมิติด้วยคณิตศาสตร์
อย่างที่สองคือการทำให้ Particle หมุนตอนระเบิด เริ่มด้วยการทำ Projection Mapping ระหว่างวัตถุที่อยู่ในโลกสามมิติ และสิ่งที่เราเห็นบน Canvas สองมิติ อันนี้ก็ใช้ความรู้เรื่องคณิตศาสตร์อีกเช่นกันฮะ
ต่อจากนั้น การหมุนจะเกิดขึ้นบน Canvas ซึ่งเป็นสองมิติ ก็เลยไม่มีฟังก์ชั่น rotate3d แบบใน CSS Transforms พี่ไทก็เลยไปก็อปสูตรการหมุนสามมิติบน Cartesian Coordinate มาจาก MDN (แปลกใจมากว่าทำไม MDN ถึงเขียนสูตรคณิตศาสตร์ไว้ด้วย) แล้วเขียนเป็นโค้ด
ตอนนั้น จะ Optimize ด้วยการเก็บค่าที่เหมือนกันไว้ในตัวแปร แต่พี่ไทนึกไม่ออกว่า (1 — cos θ) คืออะไร ก็เลยตั้งชื่อตัวแปรว่า temp1, temp2 ไปก่อน
แต่เรานึกได้ว่ามันดูคุ้นๆ เหมือนเคยอ่านเจอว่ามันเป็นฟังก์ชั่นตรีโกณ เลยบอกพี่ไทให้เปิดดู สรุปว่ามันคือฟังก์ชั่น Versed Sine (Versine) นั่นเอง ก็เป็นหนึ่งใน Reminder ว่าคณิตศาสตร์เป็นอะไรที่สำคัญอยู่
อีกอย่าง ตอนที่พี่ไทถามว่าเคยเรียนแคลมั้ย เคยดิฟมั้ย ตอนนั้นเรา Kernel Panic ไปเลย ไม่เคยฮะ ต้องไปอ่านแล้วสิ 555
บทสรุปของ CodeClub #5!
สุดท้าย ด้วยความรู้ของ Software Development, Mathematics และ Physics ที่มาผสมกันของเทพไท ก็เลยสร้างฟีเจอร์เล็กๆ ได้สำเร็จฮะ โหดมากกกกกกก นี่ถ้าเอาเรื่อง Music มาผสมด้วยจะโหดสลัดมาก
ตอนเย็นพี่ไทก็เล่าเรื่อง ThaiJS ที่สร้างภาษาของตัวเองขึ้นมาเมื่อหลายปีก่อน (น่าจะตอนที่อายุพอๆ กับเรา) ที่เพิ่ม Syntactic Sugar หลายๆ อย่างให้ JavaScript ดูเหมือนเป็นไอเดียที่ดีแต่กลับทำให้โค้ด Maintain ยากขึ้น ฟังแล้วเท่มากเลยฮะ~
สรุป Key Takeaways ก็คือ ความรู้เรื่อง Mathematics และ Science เป็นเหมือน Magical Spell ที่ทำให้เราสามารถสร้างสิ่งต่างๆ ได้ด้วย Construct พื้นฐานทางคณิตศาสตร์ครับ
สำหรับตัวเราเองก็จะใช้เวลากับการเรียนรู้เรื่องเหล่านี้ด้วยฮะ วันนี้มีเรื่องจะมาเล่าแค่นี้ สวัสดีครับ! 🙏🏻
