SS#3 — ฝึกฝน เรียนรู้ ปรับปรุง

ก่อนอื่นต้องขอขอบคุณทุกคนที่สนใจเข้ามาฟัง เมื่อวานได้มีการจัด Sharing Session กับทีมเป็นครั้งที่ 3 เป้าหมายในครั้งนี้กะว่าจะให้ทุกคนได้ลองเขียน Unit test จากโจทย์ใน Codewars คือ เขียนโปรแกรมกันเสร็จก็เขียนเทสกันต่อ (ให้ได้รู้ feeling ว่าเขียนเทสหลังเขียนโปรแกรมเสร็จเป็นยังไง ก่อนทำ TDD) และก็ให้ทุกคนได้เห็นความสำคัญของการเขียนเทสตามที่ได้เล่าไปในครั้งที่ 1

ก่อนเริ่มทำโจทย์กัน ก็ได้อธิบายว่า Code Katas คืออะไร คือการที่เราฝึกการเขียนโปรแกรม ที่เราจะฝึกมันซ้ำๆ จนชำนาญ โดยที่เราไม่กังวนที่จะทำผิดพลาด แต่ให้ focus ที่เราได้เรียนรู้และฝึกฝนอะไร ระหว่างทางมากกว่า เช่น เขียน test, การะบวนการคิดเพื่อแก้ไขปัญหา และเราจะปรับปรุงข้อผิดพลาดที่เกิดขึ้นให้ดีขึ้นได้อย่างไร จากครั้งที่แล้ว (refactoring)

ซึ่งก็ต้องบอกว่า Session ครั้งนี้ไปได้ไม่สวย แต่ได้เรียนรู้อะไรหลายอย่างสำหรับตัวเองและทีม จากการ Share ครั้งนี้ (สรุปครั้งนี้ไม่ได้เขียนเทสกันเลย ครั้งหน้าลุยกัน)

1. โจทย์ที่เลือกมาทำ Katas ยากเกินไปสำหรับบางคน
2. เราไม่สามารถ คิดและทำโจทย์เดียวกันพร้อมกันได้ ด้วยจำนวนคนเยอะขนาดนี้ (Mob Programming) ถ้าขาดการวางแผนที่ดี
3. ถ้าเราเริ่มทำงานตั้งแต่ 2 คนเป็นต้นไป การ plaining กันก่อน ว่าเราจะทำอะไรยังไง เพื่อให้มองเห็นภาพเดียวกันก่อนที่จะเริ่มทำเป็นเรื่องที่สำคัญมาก ไม่งั้นก็ไปกันคนละทิศละทาง สรุปพัง
4. ไม่ว่า Mob หรือ Pair ควรมี Navigator กับ Driver
5. (ตัวเอง) อยากจะ Share ทุกคนเรื่องการ breaking down the problem เวลาเจอโจทย์ แต่ด้วยการไม่ได้เตรียมตัวมาเลย คิดว่าตัวเองจะโด้นสดได้ แต่ลืมไปว่าเราขาดการฝึกฝนมานาน ทำให้ต้องคิดว่าจะสอนเรื่องการ break down ยังไง กับแก้โจทย์ยังไงพร้อมกัน
6. (ตัวเอง) ไม่ฟังทีม!! (ที่พี่เอกบอกว่าให้ดู example แต่ไม่ดู)
7. ​Concentrate, No interrupt สำคัญมาก

หลังจากบรรทัดนี้จะเป็นการ share เรื่อง breaking down the problem ที่ไม่ได้พูดอะไรเลยเพราะ stun กับโจทย์นิดหน่อย เดี๋ยวมีสปอย ถ้าใครอยากทำเองก่อนไห้ skip หลังจากนี้ไปได้เลย แต่แอบอยากรู้ว่ามีคนเข้ามาอ่านจนถึงตรงนี้ไหม ถ้าใครอ่านจนถึงตรงนี้ ฝากช่วย Comment หน่อยนะ

ttps://www.codewars.com/kata/5579e6a5256bac65e4000060/train/javascript

แต่ถ้าใครทำเสร็จแล้วอยากอ่านวิธีการ breaking down the problem ของผม อ่านต่อได้เลย ส่วนของทุกๆคนที่ทำเสร็จแล้ว เดี๋ยวเราหาเวลามานั่งแชร์กันนะ ว่าใครคิดยังไงกันบ้าง

ต้องบอกก่อนหลังจากกลับมาถึงบ้านเคลียทุกอยากเสร็จ จัด environment เปิดเพลงชิวๆ นั่งทำโจทย์ข้อนี้ใช้เวลาตั้งแต่ 23:34 ของวันที่ 17 ถึง 00:30 ของวันที่ 18 รวมแล้วเกือบ 1 ชม

งั้นมาเริ่มกันเลย

1. Planning

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

1. ก็เริ่มจากที่ทำ for loop เพื่อสร้าง rows ทั้งหมดก่อน เช่นใส่ 5 ตั้งออกมา 9 rows

2. ที่นี้ปัญหาต่อไปคือเราเห็นว่า

2.1 แต่ละ rows ต้องมีการ print ตัวเลขตาม pattern

2.2 แต่ละ rows ต้องมีการขึ้นบรรทัดใหม่

2.3 ข้างหน้าของแต่ละ rows ต้องมี space เพื่อจัดให้เป็นรูปสามเหลี่ยมสวยๆ

ที่นี้เราต้องเลือกแก้ปัญหาไปที่ละปัญหา โดยผมจะเลือกจาก 2.1 ก่อนแล้วตามด้วย 2.2, 2.3

3. เรื่องของค่า n ที่เกิน 10 ดูจากตัวอย่างแล้วเป็นแค่การแสดงผลเดี๋ยวเอาไว้ทำหลังสุดได้เลย

ประมาณนี้

2. Writing Code

1. Loop สร้าง rows ตามจำนวน n ที่ส่งมา rows ทั้งหมดคือ (2 * n)-1

ที่นี่พอเราใส่ 3 ไปก็จะได้

12345

ซึ่งเราสามารถมองเป็นบรรทัดๆ ที่ยังไม่ได้มีการขึ้นบรรทัดใหม่ประมาณนี้

1 2 3 4 5

2. เริ่มสร้างตัวเลขในแต่ละ row ตาม pattern

ที่นี่พอเราใส่ 3 ไปก็จะได้

112123123412345

ซึ่งเราสามารถมองเป็นบรรทัดๆ ที่ยังไม่ได้มีการขึ้นบรรทัดใหม่ประมาณนี้

1 12 123 1234 12345

ทีนี้ปัญหาในการสร้าง pattern ของตัวเลขก็ได้เกิดขึ้นเราถ้าเราใส่ 3 จริงๆมันต้องออกมาประมาณนี้

1 121 12321 121 1

โอเคพอมาถึงตรงนี้เดี๋ยวเราแตกไปอีก 2 ปัญหาคือ

2.1 จำนวนตัวเลขที่อยู่ใน row เริ่มจาก row แรกมีตัวเลข 1 ตัว ไล่ไปเรื่อยๆ row ที่ 2 ก็มี 2 ตัว ส่วน row ที่เท่ากับจำนวน n ที่ใส่มาแต่ถ้า row ที่เกินจำนวน n แล้วจะต้องค่อยๆลดลง เช่น row ที่ 4 ไม่ใช่ 4 ตัวแต่ต้องเป็น 2 ตัว

1 12 123 12 1

2.2 แต่ละ rows มันต้องมีเลข reverse ของ เลขที่เรา print ไป โดนตัดตัวท้ายสุดก่อน reverse

OK เพื่อไม่ให้บนความยาวไปกว่านี้แก้ข้อ 2.1 ก่อนเลย

ได้ตามนี้ละ โดยเราได้สูตรในการคำนวนจำนวนตัวเลขที่จะ print ออกมาในแต่ละ rows คือ maxLines-(currentRow-1)

ที่นี้ต่อไป 2.2 ก็ไปสร้าง function reverse มา (ไม่อยากใช้ native function ของ JS เดี๋ยวไม่ได้คิดอะไร)

แล้วก็จะได้

1 121 12321 121 1

3. ทำการขึ้นบรรทัดใหม่ให้ในแต่ละ row กับ เพิ่ม space

โดยจำนวน space ข้างหน้าในแต่ละ row จะมีจำนวนเท่ากับ maxNumber (n)-totalNumberInRow แล้ว เพิ่ม “\n” เข้าไปทุกครั้งที่จบ loop

4. แก้โจทย์สุดท้ายตัวเลขที่มากกว่า 10 ให้เริ่มที่เลข 0 ใหม่วนไปเรื่อยๆ

ก็ Mod ด้วย 10 ไปไม่ต้องคิดอะไรเยอะ สุดท้ายก็น่าจะได้ code ที่สามารถ print ตัวเลขออกมาตามที่โจทย์ต้องการ

แก้เรื่อง new line นิดหน่อย

สุดท้ายหวังว่าทุคคนจะได้อะไรกลับไปไม่มากก็น้อยจากการ Share ครั้งนี้

Week หน้าเดี๋ยวเลือก code ของซักคนมาเขียน test กับ refactor กันนะ

แล้วเจอกันใน Kata Session ทุกอังคาร กับ พฤหัสบดี

Happy Coding….. :)

Source

GitHub - gamontal/awesome-katas: A curated list of code katas

http://codekata.com/

What are Code Katas and Why Should we Care?