เริ่มเขียน MVVM กันเถอะ [iOS]

Ong Komsit Chusangthong
te<h @TDG
Published in
3 min readJan 10, 2018

ดีสวัส เฮ้ย… วัสสดี เฮ้ย… สวัสดี เฮ้ย… ถูกแล้ว … กราบบบ สวัสดีทุกๆท่านครับผม นี่เป็น Blog แรกของผมเลยที่จะเอาการเขียน MVVM ใน iOS มาแชร์ประสบการณ์หน่อย บอกเลยมีประโยชน์มาก ในการนำมาใช้กับ iOS Development ในอนาคตอาจจะมีการเขียนโปรเจคที่ใหญ่ขึ้นโตขึ้น ทำให้ง่ายต่อการการเขียน Unit Test และง่ายต่อการ Maintain ไม่ได้ดีแค่ต่อเราเท่านั้นนะครับ ยังดีต่อเพื่อนร่วมทีมอีกด้วย พอละไม่พูดมากไปกว่านี้เริ่มกันเลยดีกว่าเนอะ เริ่มเหอะ !! ทำให้ชีวิตดีขึ้นจริงๆนะ

MVVM คือ Design Pattern กันก่อนดีกว่าจะได้เห็นภาพกันก่อนลงมือ

credit : https://academy.realm.io/posts/mobilization-lukasz-mroz-mvvm-coordinators-rxswift/

MVVM (Model View ViewModel) แล้วมันคืออะไร ??

MVVM Pattern เป็นการแยก View และ Model ออกจากกันโดย MVVM จะมี ViewModel เพิ่มขึ้นมา หน้าที่ของ ViewModel หน้าที่เก็บข้อมูลที่ View ต้องการ ระหว่าง View และ ViewModel จะถูก Implement โดย Data-binding ถ้า View มีการเปลี่ยนแปลงก็จะส่งผลมาที่ ViewModel ด้วย การเปลี่ยนแปลงของ ViewModel ก็จะส่งผลไปที่ View อีกสิ่งนึงที่ต้องรู้เลยที่ View จะไม่มีการทำ Logic ใดๆทั้งสิ้น View เป็นเพียงแค่การแสดงผลเท่านั้น จะให้เห็นภาพมากขึ้น [View (คือ หน้าตา)] -> [ViewModel (คือ สมอง คิด แยก ให้ไปแสดงผลให้หมด)] ง่ายๆเลยคือ View อยู่โง่ๆนะ เดี๋ยว ViewModel คิดให้นะ ^^ น่าสนขึ้นมาทันทีเลยมั้ยล่ะ การที่ View ไม่ต้องมี Logic อะไรเลย …. เจ๋งไปเลยมั้ยล่ะ

แต่ MVVM View จะถือ Reference ของ ViewModel ไว้โดยที่ ViewModel จะไม่รู้จัก View เลย ทำให้ความสัมพันธ์ ViewModel กับ View เป็น One to many โดยที่ ViewModel จะใช้กับหลายๆ View ได้และ View ไม่รู้จัก Model และ Model ไม่รู้จัก ViewModel อ้าวเฮ้ย!!! แล้วจะทำความรู้จักกันได้ไง จะเขียนยังไงล่ะเนีย งง ละสิ ไม่ยากอย่างที่คิดเลยครับ มาเริ่มกันเลยดีกว่าเนอะ เขียนเยอะละคิดไม่ออก เริ่มทำกันเลยดีกว่า ?!@# ^^

เริ่มทำกันเลยดีกว่าเนอะ อยากรู้ละ MVVM เขียนยังไง

คงไม่ต้องเริ่มตั้งแต่เปิด xcode เนอะ .. เริ่มจริงๆล่ะนะ ไปกันเลย new project ขึ้นมาได้เลย ตามรูปตัวอย่าง ผมได้ลบ file ViewController ออกและสร้างใหม่ตั้งชื่อว่า MainViewController (อันนี้ชื่อแล้วแต่เราจะตั้งเลยครับผม แต่ควรลงท้ายด้วย ViewController นะครับจะได้ง่ายต่อการเข้าใจ และ เป็นสิ่งที่ควรทำเลยละถ้าทำงานร่วมกับผู้อื่น)

new file ในส่วน ViewController

เรายังจะไม่ไปยุ่งอะไรกับ code เนอะ ไม่รู้ยังจำได้อยู่เปล่าว่า ใน MVVM มี View ไว้แค่แสดงผลเท่านั้น ในที่นี้ MainViewController คือ View นะครับจำไว้ให้ดีอย่าเพิ่งสับสนนะครับ ^^

มาต่อไปเราจะไป new file Interface (Data Binding) ขึ้นมาอีก file

Interface (Data Binding)

เราก็จะมาแยก input, output protocol เราจะมาเริ่มในส่วนของ input ก่อนนะครับต้องมี function อะไรบ้าง?

จากตัวอย่าง สโคปงาน คือ ?

User กรอก Input ผ่าน UITextField มาแล้วกด Submit Button จะแสดง Alert ตามข้อความที่ User Input เข้ามา แต่!!! ถ้า User ไม่กรอก Input มาแต่ User กด Submit Button จะต้องแจ้ง Alert “Error” ดังนั้นก็จะทราบว่าอะไรคือ input และอะไรคือ Output ทันที เอ๊ะ!!! หรือว่า งง กันอยู่ผมช่วยแยกแล้วกันเนอะ ^^ Input : ก็จะเป็น Function รับ text จากหน้า View เนอะ . OutPut : เป็นการแสดงผลเมื่อได้ Input มาก็ต้องการผลลัพธ์เนอะ โดย OutPut จะแบ่งเป็น 2 เคส คือ แสดงผลถูกต้อง และ แจ้ง Error กลับไปที่ View ส่วนที่เห็น MainInterface คือ การ sub input, output ให้เรียกใช้ที่ Interface จะทำให้ง่ายต่อใช้งานไม่ต้องไป sub input, output มาทำให้ code รก

มาต่อในส่วน ViewModel ก็ new file ผมจะตั้งชื่อว่า MainViewModel เพราะ View ผมตั้งเป็น MainViewController ตัว Model ควรจะใช้ชื่อเดียวกันเพื่อลดการสับสนนะครับ ตามคอนเซ็ปต์อ่านง่ายเข้าใจง่าย คนทำต่อยิ้ม ^^

File ViewModel

ส่วน input ผมสร้าง extension เป็น ของ input ออกมาเพื่อลดการซับซ้อนของ code เราแยกกันนะ output “เราจะไปสร้างบ้านใหม่ไม่อยากอยู่ด้วยแล้วบ้านรกไป 5555+” ยังจำได้เปล่าครับใน Data Binding เรามี input รับอะไรอยู่ ติ๊กต๊อก… เฮ้ยไม่รอละเฉลยล่ะ input มีรับค่ามาจาก View นั่นเอง ใน input ผมมีทำ Validate Empty ไว้แสดงว่าที่นี่มี 2 เคสแน่น…นอน…งั้นหลับเลยละ -_- สังเกตเคส Empty คือถ้า user ไม่กรอกข้อมูลมาจะทำการส่ง error ออกไป,,,, เฮ้ยยยยยไรฟ่ะ ViewModel มีแค่นี้เอง เขียนมาตั้งนาน -_- ถ้าท่านใดเขียน MVC มาก็อาาจะขัดใจเล็กน้อย “เพื่อ” แต่ภายใน 5 นาทีนี้ฟังผมแปป ขายของก่อนน MVVM อาจะทำให้ file เยอะกว่า MVC ครับแต่มันแยก Model ออกชัดเจนมากขึ้น(ผมไม่ได้บอกว่าดีที่สุดนะ) ลองสังเกตดูนะครับ Model . เราไม่เห็นมีส่วน UI เข้ามายุ่งเลย เฮ้ยยยยแล้วไง ??? นั่นหมายถึงเราทำ Unit Test ได้ง่ายขึ้นด้วยละสิ . เหยดดดโด้!!!!! ลองไปต่อ View กันเลยมะ ตามมาเบยยย -> -> -> -> zZzZzZzZ

File ViewController

มาๆๆ มานี มาหากล้า เฮ้ยยย ผิดเรื่องละ -__- สุดท้ายแล้วจริงๆ จากรูปจะเห็นได้เลยว่า View ไม่มีเงื่อนไขใดๆทั้งสิ้นเลย เฮ้ยๆ ชีวิตดี๊ดี input รับค่าไป ยังจำได้มั้ย input ก็ต้องมี output สิ ก็ส่งค่ากลับมาที่ View ก็ทำการแสดงผลตามที่ต้องการ เดี๋ยวๆๆ …. จบแล้วหรอ View ทำไมดูโง่ๆขึ้นมาทันที เฮ้ยยย . วันนี้ก็หมดแล้วเนอะเรื่อง MVVM เดี๋ยวจะมาครั้งหน้าจะมาเขียนเรื่อง Inject Api Service กับ Unit Test (เราจะทำเทสทั้ง Api ไปเลยยย) . กราบบขอบคุณครับที่เข้ามาอ่าน Blog แรกของผม … ^^. ผิดพลาดประการใดกราบบขออภัยด้วยนะครับผม

--

--