Tag: mobilecross-platform

  • Xamarin.Forms : Binding ข้อมูลด้วย MVVM pattern

    “MVVM is the best way to architecture mobile apps”

    Asfend Yar Hamid ซึ่งเป็น Microsoft MVP developer ท่านหนึ่งได้กล่าวไว้ เค้าคือใครน่ะเหรอ ผู้เขียนรู้จักเค้าผ่าน Udemy (คอร์สเรียนออนไลน์ที่เค้ากำลังฮอต ราคาถูก คุณภาพดี แอบรีวิว 555) ซึ่งวันนี้ผู้เขียนจะมาแนะนำการ Binding ข้อมูลของ Xamarin.Form app ด้วย MVVM pattern กันนะคะ

    MVVM pattern คืออะไร

    MVVM หรือ Model View ViewModel เป็น design pattern หรือรูปแบบในการวาง architecture ในการเขียน code นั่นเอง โดย

    Model คือ ส่วนที่เก็บข้อมูลของ Application เรา ตัวอย่างเช่น Entity Class หรือไฟล์ POCO Class ของ object ต่างๆ ที่เกี่ยวข้องกับข้อมูลจะอยู่ที่ส่วนนี้


    View คือ ส่วนที่ติดต่อกับ user ซึ่งเป็นส่วนไว้แสดงหน้า app ของเรานั่นเอง ซึ่งView จะไม่รู้อะไรเลยนอกจากการแสดงผล ส่วน Logic อื่นๆจะอยู่ใน ViewModel


    ViewModel คือ ส่วนที่ทำหน้าที่เก็บข้อมูลทั้งหมดที่ View ต้องการ โดย View จะติดต่อ ViewModel ผ่าน Data-binding ซึ่งหาก View มีการเปลี่ยนแปลงก็จะส่งผลต่อ ViewModel ในทางกลับกันหาก ViewModel มีการเปลี่ยนแปลงก็จะส่งผลถึง View ด้วยเช่นกัน


    ทำไมต้องใช้ MVVM กับ mobile app ?

    MVVM ทำให้เราสามารถ separate หรือแยกส่วนการทำงานของ code ออกจากกันได้ชัดเจนตามหน้าที่ของมัน ซึ่งทำให้ง่ายต่อการจัดการ รองรับต่อการเปลี่ยนแปลง เหมาะสำหรับการพัฒนา Application ที่มีการเปลี่ยนแปลง UI บ่อยครั้ง เนื่องจากทุกการเปลี่ยนแปลงในส่วน view จะไม่กระทบต่อ ViewModel ที่เป็น business logic และยังมี Binder ซึ่งเป็นตัวช่วยจัดการการเปลี่ยนแปลงของข้อมูลใน View หรือใน ViewModel ทำให้ไม่จำเป็นต้องเขียน Code ในการควบคุม View เพื่อให้เปลี่ยนแปลงตาม

    เริ่มกันเลยดีกว่า

    เกริ่นไปเยอะแล้ว เรามาลองสร้าง app เพื่อ binding ข้อมูลในรูปแบบ MVVM ดูกันเลยค่ะ
    Step 1 : สร้าง Xamarin.Forms project ขึ้นมาก่อน (วิธีสร้างและเลือก template สามารถอ่านได้จากบทความที่แล้ว => สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms) ซึ่งจะได้ project structure ดังรูป

    ทีนี้เราจะไม่ไปยุ่งในส่วน specific platform project (Android และ iOS) เราจะมาสร้าง MVVM ที่ share project กัน

    Step 2 : สร้างโฟลเดอร์ Model, View และ View Model ขึ้นมา ดังรูป

    Step 3: สร้าง class ชื่อ Employee.cs ลงในโฟลเดอร์ Model โดย code ข้างในมีดังนี้

    using System;
    using System.Collections.Generic;
    using System.Text;
    
    namespace MVVMBinding.Models
    {
        public class Employee
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string FullName
            {
                get { return string.Format("{0} {1}", FirstName, LastName); }
            }
        }
    }
    

    Step 4 : สร้าง ViewModel ชื่อ EmployeeVM ลงใน โฟลเดอร์ ViewModels โดยใน class นี้จะมีการ inherit และ implement interface ที่ชื่อ INotifyPropertyChanged ซึ่งเป็น interface ที่ช่วยให้ Binder property ทำงาน โดย code มีดังนี้

    using MVVMBinding.Models;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Text;
    
    namespace MVVMBinding.ViewModels
    {
        public class EmployeeVM : INotifyPropertyChanged
        {
            private ObservableCollection<Employee> _employees;
            public ObservableCollection<Employee> Employees {
                get
                {
                    return this._employees;
                }
                set
                {
                    this._employees = value;
                    OnPropertyChanged();
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(
            [CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(propertyName));
            }
    
            public EmployeeVM()
            {
                Employees = new ObservableCollection<Employee>();
            }
    
            public void AddNewEmployee(string fisrtName,string lastName)
            {
                Employee emp = new Employee()
                {
                    FirstName = fisrtName,
                    LastName = lastName
                };
                Employees.Add(emp);
            }
        }
    }
    

    Step 5 : สร้าง page ชื่อ EmployeePage ลงใน folder View โดยในส่วนของ EmployeePage .xaml ส่วนของ ListView จะมีการ Binding ข้อมูล กับ Employees ซึ่งเป็น property หนึ่งของ EmployeeVM สำหรับแสดงผลข้อมูล

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MVVMBinding.Views.EmployeePage">
        <ContentPage.Content>
            <StackLayout>
                <Label Text="My Employee"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <StackLayout>
                    <Label Text="ชื่อ"/>
                    <Entry Placeholder="กรอกชื่อ" x:Name="fnameEntry"/>
                    <Label Text="นามสกุล"/>
                    <Entry Placeholder="กรอกนามสกุล" x:Name="lnameEntry"/>
                    <Button x:Name="addBtn" Text="Add" Clicked="AddBtn_Clicked" />
                    <ListView ItemsSource="{Binding Employees}" BackgroundColor="Beige">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text="{Binding FullName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    และในส่วนของ code behind=> EmployeePage.xaml.cs ก็ให้เซตค่า BindingContext ไปยัง EmployeeVM ดัง code ต่อไปนี้

    using MVVMBinding.ViewModels;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace MVVMBinding.Views
    {
    	[XamlCompilation(XamlCompilationOptions.Compile)]
    	public partial class EmployeePage : ContentPage
    	{
            private EmployeeVM vm;
            public EmployeePage ()
    		{
    			InitializeComponent ();
                vm = new EmployeeVM();
                this.BindingContext = vm;
    		}
    
            private void AddBtn_Clicked(object sender, EventArgs e)
            {
                vm.AddNewEmployee(fnameEntry.Text, lnameEntry.Text);
                ClearEntry();
            }
            private void ClearEntry()
            {
                fnameEntry.Text = "";
                lnameEntry.Text = "";
            }
        }
    }
    

    Step 6 : เปิดไฟล์ App.xaml.cs ขึ้นมา และเซตค่า MainPage ให้เรียกไปยัง EmployeePage ดัง code ต่อไปนี้

    using MVVMBinding.Views;
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    namespace MVVMBinding
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
    
                MainPage = new EmployeePage();
            }
    
            protected override void OnStart()
            {
                // Handle when your app starts
            }
    
            protected override void OnSleep()
            {
                // Handle when your app sleeps
            }
    
            protected override void OnResume()
            {
                // Handle when your app resumes
            }
        }
    }
    

    Step สุดท้าย : เสียบสาย Usb เชื่อมต่อระหว่างมือถือกับคอมของเรา build project แล้วก็กดรันโลดดด.. ผลลัพธ์ก็จะออกมาเช่นนี้

    เป็นอันเสร็จสิ้นการสร้าง app Binding ข้อมูลแบบ MVVM pattern ด้วย Xamarin.Forms แล้วนะคะ ซึ่งผู้อ่านสามารถนำไปใช้เป็นแนวทางและประยุกต์ใช้ตามความเหมาะสมกับ app นั้นๆต่อไปค่า ^^
    บทความถัดไป => Xamarin Essentials : Easy access Native Feature Platform

  • สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms

    สวัสดีค่ะ จาก post ที่แล้วได้แนะนำ วิธีติดตั้งเครื่องมือที่ใช้พัฒนา app ด้วย Xamarin.Forms ไปแล้ว บทความนี้เราจะมาเริ่มสร้าง app ง่ายๆ นั่นก็คือ Hello World app หรือ แอพสวัสดีชาวโลก นั่นเองค่ะ เพื่อเรียนรู้การทำงานและทำความเข้าใจ solution/project structure ของ Xamarin

    มาเริ่มกันเลยค่า…
    1. ก่อนอื่นเราต้องสร้าง project ขึ้นมาก่อน เปิด Visual Studio แล้วเลือก Create New Project ดังรูป


    2. เลือก Cross Platform และเลือก Mobile App (Xamarin.Forms) template หลังจากนั้น ตั้งชื่อ Project และระบุ path ของ project ตามต้องการแล้วกด OK ดังรูป


    3. หน้า Select template จะมี template ให้เลือก 3 แบบ คือ Blank, Master-Detail และ Tabbed
    – Blank คือ project เปล่าๆ ว่างๆ ไม่มี page ใดๆ generate มาให้
    – Master-Detail คือ project ที่ generate page ในลักษณะ Mater Detail เป็นตัวอย่างมาให้พร้อม
    – Tabbed คือ project ที่ generate page ในลักษณะ Tab menu มาให้
    เลือกได้ตามสะดวก ขึ้นอยุ่กับ app ว่าเป็นแบบไหน ผู้เขียนเลือก Blank template ไปก่อน อยากเพิ่มอะไรค่อยเพิ่มทีหลังได้ค่ะ ส่วนของ Platform ก็เลือกเลยว่าอยากให้คอมไพล์เป็น app ของ platform ไหนบ้าง และในส่วนของ Code Sharing Strategy จะมีให้เลือก 2 รูปแบบ คือ .NET Standard กับ Share Project ให้กดเลือก .NET Standard ซึ่งเป็นCode Sharing รูปแบบใหม่ที่ทาง Microsoft แนะนำ แล้วกด OK ดังรูป


    4. เสร็จแล้วจะได้หน้าตา project ที่มีโครงสร้างแบบนี้ พร้อมให้เราเขียน code พัฒนา app แล้วค่ะ



    ก่อนที่เราจะทดลอง run ดูผลลัพธ์ เรามาดู Solution/Project structure กันคร่าวๆ ก่อนว่าประกอบด้วยอะไรบ้าง เราต้องเขียน code ลงตรงไหน ยังไงบ้าง

    Solution/Project Structure

    ใน solution ที่เราสร้างขึ้นมาจะประกอบไปด้วย share project และ project ตาม platform ที่เราได้เลือกไว้ที่หน้า template จากตัวอย่างข้างบนจะประกอบด้วย


    1. HelloWord คือ share project ที่เราสามารถเขียน code ทั้งหมดภายใต้ project นี้ ทั้งส่วน UI ที่เขียนด้วย XAML และส่วน business logic ต่างๆ ที่เขียนด้วย C#
    2. HelloWorld.Android คือ android platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ โดยภายในโครงสร้าง project จะมี MainActivity.cs ที่ภายในมีการ initial Xamarin.form เอาไว้ และมีไฟล์ AndroidManifest.XML,Assets, Resource file ต่างๆ ที่คล้ายกับโครงสร้าง android project ทั่วไป ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้ค่ะ
    3. HelloWorld.iOS คือ iOS platform project ที่มีการ add reference และ initial ภายใน project ให้สามารถรองรับการคอมไพล์ code ที่มาจาก share project ได้ เช่นเดียวกันกับ android ซึ่งภายในโครงสร้าง iOS project จะมีไฟล์หลักๆ AppDelegate.cs, Assets,Resource, Info.plist เช่นเดียวกับโครงสร้าง iOS project ที่เขียน native app ด้วย XCode ซึ่งหากเราต้อง specific code เฉพาะ platform เราก็สามารถมาเขียน code เพิ่มเติมที่ project นี้ได้เช่นเดียวกัน

    เมื่อเราได้ทราบ solution structure คร่าวๆ แล้ว เราจะมาทดลองเขียน code และ run แอปกันดูนะคะ หลักๆ เลย เราจะเขียน UI ด้วย XAML ไฟล์ และ code behind เป็น .cs จากรูปด้านล่าง ที่ solution explorer สังเกตจะมีไฟล์ App.xam.cs ซึ่งจะเป็นไฟล์หลักในการ start แอปขึ้นมา


    ซึ่งในไฟล์ ส่วนหลักที่เรียก load หน้าแรกของ app ขึ้นมา คือ การ set หน้า page แรกให้กับ MainPage properties โดย default จะ set ไปที่ MainPage ซึ่งเป็น Page ที่เราสร้างขึ้น และมี override method หลัก 3 method คือ OnStart(), OnSleep() และ OnResume() แต่ละ method การทำงานก็ตามชื่อเลย หากเราต้อง handle code อะไรที่จะให้แอปทำงานเพิ่มเติมก็ใส่ code เพิ่มเติมได้เลย ดังรูป


    ทีนี้เราลองมาแก้ code ที่หน้า MainPage.xaml กันดูบ้าง ทดลองเปลี่ยนข้อความและขยาย Font ดังรูป

    เสร็จแล้วก็ได้เวลา run app ขึ้นมาซะที หากใครติดตั้งตัว Emulator มาด้วยแล้ว ตรง tab bar ที่รัน ก็จะ default Emulator ตัวนั้นขึ้นมาให้ทันที ซึ่งผู้เขียนไม่ได้ติดตั้งไว้ เนื่องจากกินพื้นที่เยอะและเวลา run เนี่ยกินแรมเยอะมากกกก โดยผู้เขียนจะใช้วิธีเสียบสาย usb ต่อเข้ากับมือถือ android เพื่อที่จะได้ run บน device จริงๆเลย (ปล. มือถือต้องเปิด Developer mode และ USB Debugging mode ก่อนนะคะ ซึ่งวิธีเปิดลองหาดูตาม google ค่ะ เพราะแต่ยี่ห้อ แต่ละรุ่นมีวิธีกดเปิดไม่เหมือนกัน) ถ้าหา device เจอแล้ว ตรง tab bar ที่รัน จะขึ้นรุ่นมือถือมาให้เห็นดังรูป


    กดปุ่ม run เลยค่ะ ผลลัพธ์ที่ได้บนหน้าจอมือถือของเราก็จะประมาณนี้ โดย app จะถูก build และติดตั้งบนเครื่องให้เรียบร้อยค่ะ หลังจากนั้นเราสามารถเรียกดู app ได้โดยไม่ต้องเสียบสายจากการแตะ icon บนหน้าจอเหมือนแอพทั่วไปบนเครื่องได้เลยค่ะ


    เป็นอันเสร็จเรียบร้อยค่ะ ^^ ฝากบทความถัดไปของซีรีย์นี้ด้วยนะคะ => Xamarin.Form Binding ข้อมูลด้วย MVVM pattern