การเขียนโปรแกรมแบบ MVC ( Model-View-Controller ) คืออะไร จะอธิบายให้ฟังแบบง่ายๆ

          สวัสดีครับผู้ที่เข้ามาอ่าน Blog  ทุกท่าน  เห็นหลายคนถามกันเยอะเหลือเกิน ว่า การเขียนโปรแกรมแบบ MVC มันคืออะไร ทำไมใครๆก็พูดถึงกันอยู่เรื่อย

      

        เอาเป็นว่า วันนี้ผมจะมาอธิบาย เจ้า MVC หรือ Model - View - Controller ให้เข้าใจกัน โดยจะขอยกตัวอย่างให้เห็นภาพกันเลยทีเดียว

        ก่อนจะมารู้จักวิธีการเขียนโปรแกรมแบบMVC นั้น  เรามาพูดถึงการเขียนแบบปกติ หรือแบบเก่า กันก่อนดีกว่าครับ

        เวลาคุณจะเขียนโปรแกรมขนาดเล็กมาสักตัวนึง  อย่างเช่นโปรแกรมเครื่องคิดเลขอย่างง่าย ผมเชื่อว่าส่วนใหญ่มักทำแบบนี้

      1) สร้างไฟล์มา 1 ไฟล์ (บางคนอาจจะสองไฟล์ แยกส่วนของ Header file ไว้อีกไฟล์นึง ก็แล้วแต่)

      2) นึกอะไรออก ก็เขียนลงไปในไฟล์นี้ให้หมด  ตั้งแต่รับข้อมูลตัวเลขเข้ามา  จากนั้นเอาไปคำนวณ พอคำนวณเสร็จ ก็สั่ง print ผลลัพธ์ออกมาเลย

      3) นำไฟล์ที่เขียนเสร็จ ไปคอมไพล์ และได้โปรแกรมเครื่องคิดเลขไปใช้งาน ดังรูป

      

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

       แต่! ถ้าเป็นโปรแกรมที่มีขนาดใหญ่ขึ้นล่ะ (โปรแกรมที่เขาขายๆกันนั่นแหละ ไม่ใช่โปรแกรมง่ายๆในรายวิชาโปรแกรมมิ่งนะจ๊ะ ) ยังจะดีอยู่ไหม ?

       ถ้าให้ผมเปรียบเจ้าเครื่องคิดเลขด้านบน เป็นสิ่งมีชีวิต  ก็คงเป็น "คนหนึ่งคน" ที่ทำทุกอย่างได้หมดเลย ตั้งแต่ คอยถามเลข input --> คิดคำนวณ และ --> บอกผลลัพธ์ ได้ ( มนุษย์เมพ )

       สมมุติว่าถ้าเราจ้างพนักงานคนนี้มาทำงานให้กับบริษัท แล้ววันนึง หัวหน้าบอกว่า....

      

      1) อยากได้คนที่หน้าตาดีกว่านี้เพื่อดึงดูดลูกค้า                  ทำไง?  --> หาคนใหม่สิ

      2) อยากได้คนที่ฉลาดกว่านี้เพื่อให้งานมีประสิทธิภาพ       ทำไง?  --> หาคนใหม่สิ

      3) อยากได้คนที่คุยภาษาคนรู้เรื่องกว่านี้                            ทำไง?  --> หาคนใหม่สิ

      

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

( ไม่มีใครเพอร์เฟค )   

      ด้วยเหตุฉะนี้เอง ผมขอแนะนำทางเลือกใหม่ที่ดีกว่าคือ ใช้หลักการแบบ MVC สิครับ!!!!

     

         Model View Controller คืออะไร ?  ขอยกตัวอย่าง คล้ายๆแบบเดิมนะครับ เพื่อความเข้าใจง่าย ดังนี้

-  Model 

                            

     ผมเปรียบ Model ให้เป็น "ช่างเทคนิค" คนนึง (ใส่แว่นหนาเต๊อะ สิวเพียบ แถมอ้วนดำถึกอีกต่างหาก )    มีหน้าที่ คิดและวิเคราะห์วิธีการปัญหาอย่างเดียวก็เพียงพอ ไม่จำเป็นต้องไปพบลูกค้า

    

- Controller 

    ผมเปรียบ Controller  เป็น "คนประสานงาน" ทำหน้าที่ประสานงาน ระหว่าง ช่างเทคนิค กับ คนที่มีหน้าที่ออกไปพบลูกค้าเท่านั้น

-  View

                                           

      

     ผมเปรียบ View ให้เป็น "พริตตี้ในงานมอเตอร์โชว์" ละกัน (ไม่ต้องฉลาดก็ได้ แต่ขอให้ สวย เซ๊กซี่ นมใหญ่ๆยิ่งดี) หน้าที่ของพริตตี้ ก็คือ "สวย" เพื่อดึงดูดลูกค้าให้อยากเข้ามาร่วมงาน และคอยตอบคำถามเกี่ยวกับข้อมูลของสินค้าแก่ลูกค้าฟัง    ซึ่งสิ่งที่พริตตี้พูดออกไปนั้น พริตตี้ไม่ต้องไปเข้าใจมันก็ได้ แค่ท่องๆจำๆมา แล้วเอามาพูดเลยก็ได้ 

     ถ้าคำถามไหนที่พริตตี้ไม่รู้ไม่ทราบจริงๆ จะทำอย่างไรดี  ?   เรายังจำ "ช่างเทคนิค" ได้ใช่ไหม (Model) เขาเป็นคนเดียวที่เข้าใจปัญหาอย่างละเอียด ดังนั้น ให้พริตตี้นำคำถามที่ลูกค้าถามมา มอบให้กับ "คนประสานงาน(Controller)"  จากนั้น คนประสานงานก็จะวิ่งไปถาม ช่างเทคนิคให้ และนำสิ่งที่ช่างเทคนิคแนะนำมา กลับไปบอกกับพริตตี้อีกที จากนั้นพริตตี้แค่ก็นำคำตอบ ไปบอกลูกค้า   จบ!!!

สรุปสั้นๆ เป็นภาพได้ดังนี้

Model   <---->  Controller   <----->  View    <-----> User

ทีนี้กลับมาปัญหาเดิม ถ้าหัวหน้าบอกว่า....

      

1) อยากได้คนที่หน้าตาดีกว่านี้ เพื่อดึงดูดลูกค้า                     ทำไง?  --> เปลี่ยนพริตตี้ใหม่ก็พอครับ

2) อยากได้คนที่ฉลาดกว่านี้ เพื่อเพื่มประสิทธิภาพของงาน    ทำไง?  --> เปลี่ยนช่างใหม่ก็พอครับ

3) อยากได้คนที่คุยภาษาคนรู้เรื่องกว่านี้                                ทำไง?  --> เปลี่ยนคนประสานงานก็พอครับ

เป็นอย่างไรกันบ้างครับ กับการทำงานแบบแบ่งหน้าที่กันเป็นส่วนๆ ที่ต่างคนก็ต่างทำงานที่ตัวเองรับผิดชอบไป อยากจะแก้ไขตรงไหน ก็ปรับเปลี่ยนเฉพาะส่วนได้  แถมถ้ามีงานใหม่ๆเข้ามา ส่วนไหนที่มันยังใช้ได้ดีอยู่ ก็เอากลับมาใช้ซ้ำได้อีก เจ๋งป่ะล่ะ !!!!!!!

ทีนี้ ก็ลองเอาวิธีการเขียนโปรแกรมแบบ MVC ไปลองใช้ดูนะขอครับ

        

      

วิธีแอบดู Inbox การสนทนาใน Facebook ของคนอื่นนั้นง่ายนิดเดียว

วิธีแอบดู Inbox การสนทนาใน Facebook ของคนอื่นนั้นง่ายนิดเดียว

          เกริ่นนำก่อนนะครับ เรื่องมันมีอยู่ว่า วันนี้ผมไปเห็นรุ่นน้องของผมได้ทำการโพสข้อความลงในเฟสบุคของเขาเกี่ยวกับเรื่องนี้อยู่พอดี ซึ่งผมเองก็มีความคิดเหมือนกัน   และผมเองก็รู้สึกเศร้าใจทันที เมื่อเห็นปฎิกิริยาของผู้ที่มาอ่านคำเตือนหลายๆคน บอกว่า "ทำไม่ได้หรอก" , "อย่ากลัวเกินเหตุ"  , "จะเอาก็เอาไปสิ ไม่มีอะไรสำคัญให้หรอก"  ในฐานะที่ผมเป็นโปรแกรมเมอร์คนหนึ่งที่เคยพัฒนาแอพที่สามารถล้วงข้อมูลของผู้ใช้ได้ ( จริงๆแล้ว เรียกว่าล้วงก็ไม่ถูกต้องซะทีเดียว )  ผมก็เลยอยากมาเขียนบอกผู้ใช้ว่า "มันทำได้จริงๆนะ"  มาดูกัน

             เชื่อว่า หลายๆ คนนั้น คงต้องเคยเห็นหน้าต่างดังภาพด้านบน ประมาณนี้อยู่บ่อยๆครั้งจนชิน และเชื่อว่า ผู้ใช้ส่วนใหญ่จะไม่อ่านข้อความเหล่านี้เลย  หากคุณสังเกตดูที่ภาพของผม ผมสามารถเขียนโปรแกรมให้มันไปล้วงข้อความInbox ของ Account ผมเอง ได้ ซึ่งหากมีคนมาใช้ Facebook ก็จะต้องแจ้งเตือนแบบนี้ เพื่อขออนุญาตผู้ใช้ก่อนนั่นเอง และหากคุณกดปุ่ม "ตกลง" ไปแล้ว แสดงว่า ต่อไปนี้ Inboxของคุณจะไม่เป็นแค่ของคุณอีกต่อไปแล้วจ้าาาาา ( ยืนไว้อาลัย )

            สมมุติว่า ผมได้เผลอ "กดตกลง" ไปแล้วนะครับ คนที่เป็นเจ้าของแอพต่างๆอย่างเช่น เกมส์ทายใจ  เพื่อนสนิทของคุณคือใคร หรือแอพอื่นๆ ประมาณนี้แหละครับ เขาก็จะได้ข้อมูลInbox ของผมไปในที่สุด ดังภาพที่ 2 นั่นเอง ( เจ้าของบล๊อค แอบคุยกับกิ๊กคนไหน ก็รู้หมดเลย โอ้ววว T^T  )

ดังนั้น ก่อนจะเข้าไปเล่นอะไร ก็ควรอ่านคำเตือนทุกครั้งก่อนให้ดีนะครับ เพื่อความปลอดภัยของตัวเราเอง ^_^

เครดิตภาพ

http://www.campussafetymagazine.com/article/see_who_is_exhibiting_at_the_campus_safety_conference

UX Design เรื่องที่นักพัฒนามือใหม่มักมองข้าม !

ออกแบบอย่างไร ! ให้ผลิตภัณฑ์ของเราดูสวยงาม คนจะได้มาใช้กันเยอะๆ

หากคุณคิดเพียงเท่านี้ล่ะก็ คุณพลาดอย่างแรง

เวลาที่กำลังจะพัฒนาโปรแกรมขึ้นมาสักตัวนึง หรือสร้างผลิตภัณฑ์อะไรก็แล้วแต่  เชื่อว่า หลายคนมักจะสนใจเพียงแค่ว่า ออกแบบอย่างไรจึงจะสวย ดูเด่นกว่าคู่แข่ง  ( แต่อาจจะไม่น่าใช้ก็ได้นะ )

ยกตัวอย่างเช่น

หากคุณสร้างเว็บไซต์มาสักตัวนึง ซึ่งแน่นอนครับว่า เว็บของคุณนั้น สวยงาม เอฟเฟคอลังการไม่แพ้หนังยอดมนุษย์จากค่าย Marvel หรือซุปเปอร์ฮีโร่จากละครช่อง7(แซ่ว) เลยทีเดียว


แต่!! เรื่องต่อไปนี้ล่ะ  คุณได้สนใจบ้างหรือเปล่า

1)  ความคุ้นเคยของผู้ใช้งาน - หากคนที่ไม่เคยเข้าเว็บของเราเลย หากเขาเข้ามาครั้งแรก เขาจะเล่นเป็นทันที หรือเรียนรู้ด้วยตัวเองได้โดยใช้เวลาไม่นาน หรือเปล่า ?

ยกตัวอย่างง่ายๆ เช่น

เอาเว็บฟังเพลงธรรมดาๆนี่แหละ หากเขาอยากจะกดเล่นเพลง ถ้าเขาเห็นสัญลักษณ์ ปุ่ม Play ที่เป็นรูปสามเหลี่ยม เขาก็สามารถรู้เองได้ทันทีว่าเขาต้องกดตรงนี้นะ โดยที่ไม่ต้องใช้ความพยายามใดๆ

แล้วรู้ได้ยังไงล่ะ ?

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

2) ผู้ใช้เขาไม่อยากเสียเวลานานๆ - เคยไหม จะใช้บริการอะไรสักอย่างหนึ่ง กว่าจะจบขั้นตอนได้ ทำเอาเบื่อไปเลย ไหนเราจะต้องเข้าหน้านี้ โผล่หน้าโน้น ออกหน้านั้น

เอาง่ายๆ ก็ลองให้นึกถึง ความน่าเบื่อตอนโทรหา Call Center แล้วเจอระบบอัตโนมัติ  ดูสิครับ หลายครั้งเราก็แค่อยากจะคุยกับพนักงาน แต่ต้องมาฟังอะไรก็ไม่รู้เต็มไปหมด บางครั้งไม่อยากฟัง เลยกดเลขมั่วๆให้มันข้ามไป แต่ก็ดันกดเลขผิด จึงต้องเสียเวลาโทรใหม่อีกจนได้

ดังนั้น ให้นึกเสมอว่า ทำอย่างไร ? ให้ผู้ใช้งานได้สิ่งที่เขาต้องการโดยมีขั้นตอนน้อยที่สุด 

3) มอบสิ่งที่ผู้ใช้อยากได้ ไม่ใช่สิ่งที่เราอยากให้ - หลายคนคิดว่า เรามีของอะไร เรารู้อะไร ก็อยากจะใส่มันไปลงไปให้หมดให้ลูกค้าเห็น แต่รู้หรือไม่ว่า สิ่งที่เราคิดเนี่ย มันเป็นการสร้างความลำบากให้แก่ผู้ใช้งานขนาดไหน เพราะว่ามันเป็นการเพิ่มภาระให้ผู้ใช้งานที่จะต้องมากลั่นกรอง แยกแยะ หาสิ่งที่เขาอยากได้เอง ทำให้เสียเวลา และอาจทำให้เสียอารมณ์ไปเลยก็ได้นะ  ดังนั้น เราต้อง วิเคราะห์หาสิ่งที่ผู้ใช้อยากจะได้และมอบให้เขาแค่นั้นก็พอแล้ว

4) ลำดับความสำคัญ -  เชื่อว่าหลายคนเคยไปเดินที่ Super market เพื่อซื้อสินค้าลดราคา  ซึ่งเราจะเห็นว่า บางร้านเขาจะเอาสินค้าลดราคาหรือสินค้ายอดนิยมมาวางไว้ที่ด้านหน้าของร้านเลย ทำให้ลูกค้าไม่ต้องเสียเวลาเดินหาเอง  ดังนั้นให้เรา นำเสนอสิ่งที่สำคัญขึ้นก่อน

.
.
.
.

เป็นอย่างไรกันบ้างครับ พอจะรู้จัก UX Design กันบ้างหรือยังเอ่ย?

UX นั้นย่อมาจากคำว่า User Experience

ดังนั้น UX Design มันก็คือ "การออกแบบที่เน้นประสบการณ์ในการใช้งานที่ดีให้แก่ผู้ใช้งาน"

อารมณ์แบบ คุณไปทัวร์ต่างจังหวัดแล้วพบกับบริการที่สุดยอด อาหารรสเลิศ ที่พักผ่อนนอนแล้วไม่อยากตื่น  กลับมาด้วยรอยยิ้มและความประทับใจ เพราะได้ประสบการณ์ที่ดีกลับมา  แบบนั้นเลยยยยยยย

ทีนี้ รู้หรือยัง ?  

"เน้นสวย" กับ  "เน้นเป็นมิตรกับผู้ใช้" สำหรับคุณแล้ว อะไรสำคัญกว่ากัน ? 

(แต่ทั้งสองอย่างก็ยังคงเป็นสิ่งที่โปรแกรมเมอร์อย่างเราควรจะใส่ใจทั้งคู่นะจ๊ะ)

ประสบการณ์และผลงานทางด้าน iOS ที่เคยทำมา

   
     สวัสดีครับเพื่อนๆพี่ๆหรือน้องๆทุกคนที่ได้เข้ามาอ่านบทความแรกของผมนะครับ ก่อนที่จะเขียนบทความเกี่ยวกับ iOS นั้น ในบทความแรกนี้ ผมขอเล่าเกี่ยวกับประสบการณ์ ด้าน Mobile Application (iOS) ก่อนนะครับ :)

       ผมเริ่มสนใจที่จะศึกษาการเขียนโปรแกรมทางด้าน iOS โดยใช้ภาษา Objective-C ในการพัฒนาในขณะที่กำลังศึกษาอยู่ที่ คณะวิทยาการสารสนเทศ สาขาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา ชั้นปีที่ 2 ครับ  แล้วจากนั้นก็เริ่มศึกษาอย่างจริงจังตอนอยู่ชั้นปีที่ 3  ซึ่งในช่วงที่กำลังศึกษาอยู่ในชั้นปริญญาตรีนั้น ตัวผมก็มีแอพที่เขียนขึ้นมาอยู่หลายตัว แต่ในที่นี้ผมขอเลือกเอามาเฉพาะตัวหลักๆละกันนะครับ ดังนี้ (อัพเดทล่าสุด วันที่ 01/02/2019)


1)  Hotline Thailand - เป็น Application ตัวแรกที่อัพขึ้น App Store

2) ฝึกอ่านจำนวนเลข - ช่วงนั้นข่าวรัฐบาลจะแจก Tabletให้แก่ เด็ก ป.1 กำลังดัง ผมก็เลยเลือกทำ Application สำหรับเด็ก แต่เสียดายที่ผมไม่ได้อัพขึ้น App Store เนื่องจากหาไฟล์เสียงดีๆมาใช้ประกอบไม่ได้ (หาคนเสียงเพราะๆไม่ได้ และในเวอร์ชั่นนี้ก็เป็นเสียงของกระผมเอง หึหึ) นอกจากนี้ผลงานตัวนี้ก็ยังเป็นส่วนหนึ่งของการบ้านในรายวิชา Algorithm analyst and design อีกด้วยครับ

3) School Report - แอพตัวนี้ ทีมของผมส่งเข้าแข่งขัน "การพัฒนาโปรแกรมคอมพิวเตอร์แห่งประเทศไทย" หรือ NSC เป็นครั้งแรก โดยมี อาจารย์ ดร.จักริน สุขสวัสดิ์ชน เป็นอาจารย์ที่ปรึกษา และผลงานตัวนี้ก็ได้ผ่านเข้าถึงรอบระดับภูมิภาค และได้รับเงินทุนสนับสนุนในงวดที่ 2 ครับ

     วิดีโอนำเสนอ : https://www.youtube.com/watch?v=mknyxlUnRRM

4) Smart Assistant Application for Traveller - แอพตัวนี้ ทีมของผมก็ส่งเข้าแข่งขันเช่นเดียวกันในปีถัดมา และในครั้งนี้ ผลงานของทีมผมได้ผ่านจนถึงรอบชิงชนะเลิศระดับประเทศเลยทีเดียว (แอบภูมิใจเล็กๆ) นอกจากใช้ส่งเข้าแข่งขันแล้ว ก็ยังใช้เป็นโปรเจคจบของผมอีกด้วยครับ โดยมี อาจารย์ ดร.จักริน สุขสวัสดิ์ชน เป็นอาจารย์ที่ปรึกษา

    

   วิดีโอนำเสนอ : https://www.youtube.com/watch?v=dxlODmli9Go

  5) 4DBOOK (e-Book Store Online)  -  4DBOOK เป็นผลงานล่าสุดของผมครับ ซึ่งก็เป็นร้านขายหนังสือและอ่านหนังสือ(e-book) เหมือนกับ AIS Book store ซึ่งผมโชคดีที่ได้รับโอกาสให้มาพัฒนาร่วมกับห้องปฎิบัติการ MSCIM มหาวิทยาลัยบูรพา ครับ 

     6) Banana Quiz - ทำเกมส์ตอบปัญหาง่ายๆ และจับเวลา เลียนแบบรายการ "ปริศนา ฟ้าแล่บ "

     7) Icegazine - นิตยสารแฟชั่นสำหรับวัยรุ่น (แอพนี้ มีรุ่นพี่ที่จบไปแล้ว จ้างให้ทำส่วนของ iOSครับ เพราะรุ่นพี่เขาทำ Android ไปแล้ว)

     8) E-learning - ตัวนี้มีรุ่นพี่ประกาศหาคนทำแอพ ก็เลยขออาสาเข้าไปพัฒนาร่วมกับLab MSCIM แต่ไม่รู้ว่าเกิดปัญหาอะไรขึ้น ทำให้ตอนนี้ขาดการติดต่อไปแล้วครับ :(

  8) CULI - แอพด้าน LMS ของ ศูนย์ภาษาจุฬาลงกรณ์มหาวิทยาลัย (CULI)

 8) แอพด้านการวิเคราะห์หุ้น - ยังไม่สามารถเปิดเผยข้อมูลได้

ทั้งหมดนี้ก็เป็นตัวอย่างบางส่วนของแอพที่ผมได้พัฒนาในช่วงระยะเวลา 4 - 5 ปีมานี้ครับ (บางโปรเจคก็ไม่สามารถนำมาแสดงในนี้ได้ เนื่องจากเป็นเงื่อนไขสัญญาของผู้ว่าจ้าง) ซึ่งในบทความต่อๆไป ผมจะขอแชร์เรื่องที่ผมสนใจ เอามาแบ่งปันเพื่อนๆ กันนะครับ ไว้เจอกันใหม่นะคร้าบ ขอบคุณที่อ่านจนจบนะครับ ฮิ้ววววว