[Diary] Internship at Creative ME Day 4 Swift + MVVM + Two way binding

วันนี้ก่อนที่จะไปถึงที่ได้งาน ก็ได้แวะลองชิมร้านข้าวแกงซอยอุดมสุข 41 (ซอยเดียวกันกับที่พัก) เป็นร้านเล็ก ๆ ที่อยู่ประมาณกลางซอย ตอนแรกนึกว่าเป็นร้านที่ไม่มีที่นั่ง ต้องซื้อไปกินที่ทำงาน แต่มองเข้าไปก็เห็นว่าพอมีที่นั่งอยู่ ประมาณ 2–3 โต๊ะ ก็เลยตัดสินใจลองกินดู

Achievement unlocked ลองร้านข้าวแกง

ตอนแรกเข้าไปที่ร้านละบอกทานที่ร้านครับ เขาก็บอกให้ตักข้าวเลย ไอ้เราก็นึกว่าตักข้าวแล้วก็ให้แม่ค้าตักแกงให้ เพราะร้านแบบนี้ก็พอเคยไปกินบ้าง แต่ปรากฏว่า แม่ค้าบอกว่า กับข้าวก็ตักเองเลยครับ เราก็คิดในใจ “เห้ย แบบนี้คิดตังยังไงหว่า ละตักมาเยอะด้วยไง 555”

สรุปเราตักข้าวมาประมาณ 3 ทัพพี แล้วก็ตักกับข้าวอีก 1 อย่าง

จากนั้นก็มานั่งที่โต๊ะ แม่ค้าก็ตักน้ำซุปมาให้ด้วย โอ้วมีข้าวแกงละมีน้ำซุปอีก ดีจริม ๆ ส่วนเรื่องรสชาติก็เป็นแบบทั่วไปค่อนข้างไปทางอร่อยเลยแหละ ตอนนั้นกินคะน้าหมูสามชั้น (เมนูคนอ้วน อิอิ) แล้วก็ตอนออกจากร้านก็จะมีคนมารอนั่งกินต่อ เราก็มีน้ำใจก็ช่วยเขาเก็บจานและก็แก้วน้ำด้วย เพื่อที่คนอื่นมานั่งต่อ จะได้กินข้าวได้เลย :) (คนดีไปอี๊ก)

สรุปข้าวแกง 1 อย่างราคา 30 บาท 2 อย่าง 35 (ถึงจะตักเยอะก็เถอะ อิอิ)

เอาล่ะมาเข้าประเด็นดีกว่า วันนี้ได้เรียนรู้อะไรบ้าง คร่าวๆเลยก็คือ เป็นการทำ MVVM ต่อ มีการลองทำ Two way binding และก็ได้เขียน function callback ด้วยนะ อิอิ

Two-way binding คืออะไร?

Two-way binding คือการที่ View model (ถ้าเป็น MVVM) รับ Action หรือ Input จาก View เข้าไป แล้วไปเปลี่ยนเปลง Model แล้วนำกลับมาแสดงผลที่ View อีกครั้ง สามารถดูได้จากภาพด้านล่างนี้ครับ

จาก https://www.slideshare.net/binary-studio/binary-studio-academy-2016-hello-xamarin-mvvm

เพื่อให้เห็นภาพมาขึ้น เดี๋ยวมาลองเขียนโค้ดกันนะครับ จากเรื่อง MVVM ในตอนที่แล้ว ผมจะเอาโค้ดส่วนนั้นมาทำต่อนะครับ

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

มาเริ่มทำกันเลย

ในวันนี้ผมจะลองทำคือ คลิกที่ชื่อแมวแล้วจะแสดงชื่อแมวที่เราคลิกด้านบน TableView เพื่อฝึกทำ Two-way binding นะครับ ก่อนอื่นสร้างไฟล์เอาไว้ทำ Listener ก่อนเลยครับ ผมจะตั้งชื่อว่า Box.swift นะครับ

ออกแบบ UI กันต่อเลย ก็จะได้หน้าตามาประมาณนี้

ทำการ Connect Outlet ในส่วนของ label ที่เอาไว้แสดงชื่อแมวเข้าไปนะครับ แบบนี้เลย

จากนั้นสร้างตัวแปรเอาไว้เก็บชื่อแมวที่เราคลิกขึ้นมา และก็ function ในการเก็บว่าเราคลิกที่แมวตัวไหนนะครับ ที่ไฟล์ CatViewModel.swift เลย

แล้วกลับไปเพิ่ม function ที่ถูกเรียกจากการคลิกที่ TableView ในไฟล์ ViewController.swift เพิ่มโค้ดนี้เข้าไปเลยครับ

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    self.catViewModel.selectCat(row: indexPath.row)
}

แล้วไปเพิ่มโค้ดใน function viewDidLoad เพื่อทำการอัปเดท label ที่แสดงชื่อแมวที่เราคลิกไปดังนี้ครับ

self.catViewModel.selectedCatName.bind{ [unowned self] in
    self.labelCatName.text = "เจ้า \(String(describing: $0!)) ถูกเลือก"
}

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

ในวันนี้ก็ได้เรียนรู้เพียงเท่านี้ พรุ่งนี้เดี๋ยวจะมานั่งสรุปอีกทีว่าได้เรียนรู้อะไรไปบ้างแล้ว