[Diary] Internship at Creative ME Day 3 Swift + MVVM

วันนี้วันสบายๆ ตื่นเช้าเดินทางไปทำงาน อากาศไม่ร้อนมาก เพราะดูเหมือนฝนจะตก วันนี้ไปถึงที่ทำงาน 8:30 พอดีเปะ และไม่ได้กินข้าวเช้าด้วย เนื่องจากเข้าห้องน้ำนานเกินไปหน่อย 5555 เอาล่ะ ความรู้ที่ได้ในวันนี้เป็นการเขียนโค้ดใน pattern MVVM จะเป็นยังไงนั้น เดี๋ยวมาลองดูกันนนน

MVVM คืออะไร?

MVVM เป็นหนึ่งใน Design Pattern ที่ใช้ในการเขียนโปรแกรม ซึ่งปัจจุบันมีให้เลือกใช้เยอะแยะมากมาย ไม่ว่าจะเป็น MVC MVP หรือ MVVM ที่ผมกำลังศึกษาอยู่ โดยหลักการก็คือ จะประกอบไปด้วย M: Model, V: View, VM: ViewModel โดย View จะเป็นส่วนของการแสดงผลเพียงอย่างเดียว จะไม่มีหน้าที่อื่นเลยนอกจากนี้ และ ModelView จะเป็นตัวกลางในการสื่อสารระหว่าง View กับ Model พูดไปอาจจะมองไม่เห็นภาพนะครับ เดี๋ยวเอาภาพมาให้เห็นเลยละกัน

จาก http://techtales.co/2017/08/22/understanding-mvvm-pattern/

ในส่วนของ Logic ต่างๆ เราจะเขียนไว้ที่ ViewModel สะส่วนใหญ่นะครับ มาลองเขียนโค้ดกันเลยดีกว่า

Project HelloMVVM

ในโปรเจคนี้ เราจะมาทำแอปพลิเคชัน แสดงรายชื่อแมวกันนะครับ โดยนำข้อมูลแมวไปแสดงใน TableView ก่อนอื่นเราสร้าง Model กันก่อน ผมตั้งชื่อว่า Cat ละกัน

ต่อไปผมก็จะสร้าง ViewModel ที่ชื่อว่า CatViewModel และมี Method ที่ใช้ Initialize data ด้วย ตามนี้เลย

จากนั้นเราไปออกแบบหน้า UI ที่จะใช้ TableView กันครับ

Prototype Cells เลือกเป็น 1 นะครับ แล้วก็กรอบ identifier เป็น cell ด้วยนะครับ

ทำการ Insert outlet เข้าไปที่ code ครับ โดยการกดที่ปุ่ม control แล้วคลิกที่ TableView จากนั้นลากไปที่โค้ด แล้วก็ตั้งชื่อตัวแปรได้ตามต้องการเลยครับ ในที่นี้ผมตั้งเป็น tableView นะครับ

ต่อไปก็มาทำการเขียนโค้ดที่ไฟล์ ViewController.swift ตามนี้กันเลย ก่อนอื่นให้เราทำการ Implement 2 ตัวนี้มาก่อนเลย

UITableViewDelegate, UITableViewDataSource

class ของเราก็จะกลายเป็นแบบนี้

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

จากนั้นก็ประกาศตัวแปรเพิ่มอีก 2 ตัว

//เรียกใช้ ViewModel
let catViewModel: CatViewModel = CatViewModel()
// ชื่อของ cell ที่เราตั้งไว้ในขั้นตอนก่อนหน้านี้
let cellReuseIdentifier = "cell"

ทำการ Inititalize data และก็ทำการ register ตัว tableView ในฟังก์ชัน viewDidLoad ดังนี้

self.catViewModel.initData()
self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
tableView.delegate = self
tableView.dataSource = self

จากนั้นประกาศฟังก์ชันตามนี้เลยครับ

//บอกว่ามีข้อมูลทั้งหมดเท่าไหร่
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.catViewModel.cats.count
}
//จัดการข้อมูลของแต่ละ Row
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:UITableViewCell = (self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell?)!
//แสดงชื่อแมว
cell.textLabel?.text = self.catViewModel.cats[indexPath.row].name
return cell
}

สุดท้ายแล้ว เราก็จะได้ไฟล์ ViewController.swift แบบนี้ครับ

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