Author: suriporn.a

  • Xamarin Essentials : Easy access Native feature Platforms

    ในบางครั้งการเขียน app เพื่อ access location ปัจจุบันของผู้ใช้ หรือต้องการสั่งให้โทรศัพท์สั่นตาม activity ที่ตั้งไว้ หรือแม้แต่จะ access ข้อมูล device information ของอุปกรณ์ ไม่ใช่เรื่องง่ายเลยสำหรับเหล่า developer ที่เขียน mobile app ยิ่งมีหลาย platform ไม่ว่าจะเป็น android , iOS, Windows ก็มีวิธีการเขียน code การขอ Access permission คนละรูปแบบไปอีก ซึ่งบทความนี้ผู้เขียนจะมาแนะนำให้รู้จักกับ Xamarin Essentials ที่จะมาเป็นตัวช่วยให้ผู้พัฒนาเขียน code แก้ปัญหาเหล่านี้ได้ง่ายขึ้นนั่นเอง

    Xamarin.Essentials คืออะไร?

    คือ  official library ที่ทาง Microsoft ได้พัฒนาและรวบรวม library ที่เป็น cross-platform APIs สำหรับให้นักพัฒนา mobile app ที่พัฒนาด้วย Xamarin.Forms ได้ใช้งานในการเข้าถึง native features ของแต่ละ platforms ด้วยการเขียน code จากที่เดียว

    มีอะไรให้เรียกใช้บ้าง

    ปัจจุบันมีทั้งหมด 33 feature ให้เรียกใช้งาน อ้างอิงจาก Microsoft Doc ซึ่งมีดังนี้

    • Accelerometer – Retrieve acceleration data of the device in three dimensional space.
    • App Information – Find out information about the application.
    • Barometer – Monitor the barometer for pressure changes.
    • Battery – Easily detect battery level, source, and state.
    • Clipboard – Quickly and easily set or read text on the clipboard.
    • Color Converters – Helper methods for System.Drawing.Color.
    • Compass – Monitor compass for changes.
    • Connectivity – Check connectivity state and detect changes.
    • Detect Shake – Detect a shake movement of the device.
    • Device Display Information – Get the device’s screen metrics and orientation.
    • Device Information – Find out about the device with ease.
    • Email – Easily send email messages.
    • File System Helpers – Easily save files to app data.
    • Flashlight – A simple way to turn the flashlight on/off.
    • Geocoding – Geocode and reverse geocode addresses and coordinates.
    • Geolocation – Retrieve the device’s GPS location.
    • Gyroscope – Track rotation around the device’s three primary axes.
    • Launcher – Enables an application to open a URI by the system.
    • Magnetometer – Detect device’s orientation relative to Earth’s magnetic field.
    • MainThread – Run code on the application’s main thread.
    • Maps – Open the maps application to a specific location.
    • Open Browser – Quickly and easily open a browser to a specific website.
    • Orientation Sensor – Retrieve the orientation of the device in three dimensional space.
    • Phone Dialer – Open the phone dialer.
    • Platform Extensions – Helper methods for converting Rect, Size, and Point.
    • Preferences – Quickly and easily add persistent preferences.
    • Secure Storage – Securely store data.
    • Share – Send text and website uris to other apps.
    • SMS – Create an SMS message for sending.
    • Text-to-Speech – Vocalize text on the device.
    • Unit Converters – Helper methods to convert units.
    • Version Tracking – Track the applications version and build numbers.
    • Vibrate – Make the device vibrate.

    วิธีใช้งาน

    เปิด Xamarin.Forms project ขึ้นมา และไปที่เมนู Tools -> Nuget Package Manager -> Manage Nuget Package for Solution และในช่อง Search ให้ค้นหา Xamarin.Essentials ดังรูป

    ที่ฝั่งขวา ให้เราเลือก install ลงทุก project ทั้งในส่วน shared project ตรงกลาง และ specific platform project (android และ ios) แล้วกดปุ่ม Install ดังรูป

    ถึงตอนนี้ Xamarin.Essentials ถูกเพิ่มเข้าไปใน Reference package ของแต่ละ project เรียบร้อย แต่เรายังต้อง Config ค่าเพิ่มเติมนิดหน่อยเฉพาะ android project เท่านั้น (ios project ไม่ต้องทำอะไรก็ใช้งานได้เลย) เพื่อให้ Xamarin.Essential สามารถทำงานได้ โดยทำการเพิ่มเติม code ที่ MainActivity.cs เพื่อ initial Xamarin.Essentials ใน OnCreate() และทำการ override OnrequestPermissionResult() ดัง code ข้างล่าง เป็นอันเสร็จเรียบร้อยพร้อมให้ให้เขียน code เรียกใช้งาน feature ต่างๆ ได้เลยค่ะ

    protected override void OnCreate(Bundle bundle)
    {
        ...
        global::Xamarin.Forms.Forms.Init(this, bundle);
        Xamarin.Essentials.Platform.Init(this, bundle);
        ...
    }
    
    public override void OnRequestPermissionsResult(int requestCode, string[] permissions,
        [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
    {
        Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    }
    

    ตัวอย่าง

    ให้ทำการ using Xamarin.Essentials ที่ class ที่เราจะเรียกใช้งาน หลังจากนั้นสามารถเขียน code ใช้งาน method ต่างๆได้เลยค่ะ ขอยกตัวอย่างบาง feature ดังต่อไปนี้นะคะ

    1. ส่ง SMS

    หากเราต้องการส่ง SMS จาก Xamarin.Forms app ของเรา ก็เขียน code ดังตัวอย่างข้างล่างนี้

    public class SmsTest
    {
        public async Task SendSms(string messageText, string recipient)
        {
            try
            {
                var message = new SmsMessage(messageText, new []{ recipient });
                await Sms.ComposeAsync(message);
            }
            catch (FeatureNotSupportedException ex)
            {
                // Sms is not supported on this device.
            }
            catch (Exception ex)
            {
                // Other error has occurred.
            }
        }
    }
    

    2. Get Location

    อยากรู้ตำแหน่ง Location ล่าสุดของ device ก็เขียน code ดังนี้

    try
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
    
        if (location != null)
        {
            Console.WriteLine($"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}");
        }
    }
    catch (FeatureNotSupportedException fnsEx)
    {
        // Handle not supported on device exception
    }
    

    ผู้เขียนขอยกตัวอย่างเพียงเท่านี้ ส่วนการเรียกใช้งาน feature อื่น สามารถอ่านได้จาก doc ของทาง Microsoft Xamarin.Essentials ได้เลยค่ะ ไม่ยากเลยใช่มั้ยคะ เขียน code เพียงไม่กี่บรรทัด เราก็สามารถเข้าถึง native feature ของแต่ละ 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

  • ทำความรู้จัก Xamarin.Forms + วิธีติดตั้งบน Windows

    การพัฒนา Mobile Application ปัจจุบันมีหลากหลาย solution ให้เลือกใช้ ไม่ว่าจะเป็นการพัฒนาแบบ native แยกตามแต่ละแพลตฟอร์ม , พัฒนาแบบ hybrid และแบบ cross platform นอกจากจะมีรูปแบบการพัฒนาให้พิจารณาเลือกแล้ว ยังมี Mobile framework ที่หลากหลายที่เรานำมาใช้ในการพัฒนา app ไม่ว่าจะเป็น React Native, Ionic, Fluter,Android Studio, Xcode, Xamarin เป็นต้น โดยบทความนี้ผู้เขียนจะมาแนะนำ Xamarin.Forms ซึ่งเป็น framework หนึ่งที่นิยมใช้ในการพัฒนา mobile app กัน พร้อมทั้งแนะนำวิธีติดตั้งเครื่องมือเพื่อใช้งาน

    Xamarin คืออะไร?

    Xamarin คือ framework หนึ่งในการพัฒนา mobile app แบบ cross platform ของค่าย Microsoft ที่สามารถเขียน code ด้วยภาษา C# แล้วคอมไพล์เป็น native app ให้สามารถรันบน ios , android และ windows platforms ได้ ซึ่งปัจจุบันตัว Xamarin เองก็มีรูปแบบการพัฒนาออกเป็น 2 แนวทาง คือ Xamarin Native และ Xamarin.Forms

    แล้ว Xamarin.Forms กับ Xamarin Native ต่างกันยังไง?

    Xamarin Native หรือที่ฝรั่งเรียก Traditional Xamarin Approach เนี่ยเป็นรูปแบบที่ทาง Xamarin ได้พัฒนาออกมาใช้เป็นรูปแบบแรก (ปัจจุบันก็ยังมีให้ใช้อยู่) ซึ่งเป็น shared code platform concept โดยเราสามารถใช้ code ฝั่ง business logic ร่วมกันได้ แต่ code ฝั่ง UI เราก็ต้องเขียน code แยกตาม sdk ของแต่ละ platforms ซึ่งผู้พัฒนาต้องรู้จักการใช้ control ต่างๆ การวาง layout ของแต่ละ platform มาพอสมควร

    Xamarin.Forms เป็น concept และ tools รูปแบบใหม่ของ Xamarin ที่สามารถแชร์ code ระหว่าง platform ได้ 100% คือสามารถเขียน code เพียงครั้งเดียวทั้งฝั่ง business logic และ UI แล้วคอมไพล์เป็น native app ให้รันได้ทุก platforms (ios, android และ windows) ในส่วนของ UI จะเขียนด้วย XAML เช่นเดียวกับ WPF แต่ต่างกันที่การจัด layout และ control UI ที่มีแตกต่างกัน ซึ่งหากนักพัฒนาคนไหนเคยเขียน WPF มาแล้วก็สามารถเขียน mobile app ด้วย Xamarin.Forms ได้ง่ายขึ้น

    เปรียบเทียบ Xamarin Native (Traditional) กับ Xamarin.Forms
    ที่มารูป :
    https://xamarinhelp.com/xamarin-forms-making-traditional-xamarin-obsolete/

    Xamarin.Forms เหมาะกับ?

    1. Developer ที่คุ้นเคยกับ .NET framework เนื่องจากจะคุ้นเคยกับ Tools ที่ใช้งานและทำให้เข้าใจ concept และสามารถพัฒนา app ได้รวดเร็วยิ่งขึ้น
    2. พัฒนา Data Entry app เนื่องจาก Xamarin.Forms มี Simple UI control ให้พร้อมใช้งาน
    3. ต้องการ app ที่คุ้มค่าแต่ใช้ budget น้อย เนื่องจาก Xamarin.Form เขียน code ครั้งเดียวสามารถ run ได้ทั้ง 3 platform ได้แก่ Android, IOS และ Windows ทำให้ประหยัดงบในการ implement แต่ละ platform

    Xamarin.Forms ไม่เหมาะกับ?

    1. ผู้ที่ไม่คุ้นเคยกับ .NET Framework และภาษา C# เนื่องจากจะต้องศึกษาทำความเข้าใจใหม่มากพอสมควร ซึ่งหากถนัด FrontEnd web หรือ java script อาจพิจารณาเลือกใช้ framework อื่น เช่น React Native, Ionic หรือ Fluter จะพัฒนา app เสร็จได้รวดเร็วกว่า
    2. ไม่เหมาะกับ app ที่มี UI ซับซ้อนหรือ specific UI เฉพาะแต่ละ platform

    วิธีติดตั้ง Xamarin.Forms บน Windows

    System Requirement

    1. Windows 10 ขึ้นไป
    2. Microsoft Visual Studio โดยเวอร์ชันที่รองรับการใช้งาน Xamarin.Forms ต้องเป็น Microsoft Visual Studio 2017 version 15.8 ขึ้นไป

    วิธีติดตั้ง

    1. Download Visual Studio และ double click ไฟล์เพื่อ install แต่หากใครมี Visual Studio อยู่แล้ว ให้เปิด Visual Studio Installer ขึ้นมา แล้วเลือก Modify ดังรูป

    2. ที่โมดูล Mobile & Gaming เลือก Mobile development with .NET ดังรูป

    3. สังเกตที่ Installation Detail ฝั่งด้านขวา จะแสดงรายละเอียด package ที่ติดตั้ง ให้สังเกตุที่ Optional จะ default package มาให้ ซึ่งจะเห็นว่ากิน space มากพอสมควร ซึ่งตัวที่กินพื้นที่เยอะสุดคือตัว Google Android Emulator

      โดยหากใครจะประหยัดพื้นที่ แล้วเสียบสาย run ด้วย android device เลย ก็ให้ติ๊กถูกที่หน้า Google Android Emulator ออกได้เลย ซึ่งทำให้ space ลดลงไปเกือบครึ่งนึงเลยค่ะ

    4. จากนั้นกดปุ่ม Install หรือ Modify (กรณีลง VS ไว้แล้ว)
    5. จากนั้นก็ Take a coffee รอจนเสร็จค่า ^^

    เป็นอันเสร็จสิ้นการติดตั้งเครื่องมือเตรียมพร้อมสำหรับการสร้าง Mobile application ด้วย Xamarin.Forms ซึ่งจะเห็นว่าขั้นตอนการติดตั้งง่ายไม่ซับซ้อนเลยถ้าเทียบกับ mobile framework อื่นๆ นะคะ บทความหน้าจะมาแนะนำเริ่มต้นการสร้าง app ด้วย Xamarin.Forms กันค่า

  • การติดตั้ง Laravel 5 + WAMP

    Laravel คืออะไร??

     

    Laravel คือ PHP framework ที่นิยมตัวหนึ่ง ซึ่งมาในรูปแบบของ MVC pattern เช่นเดียวกับ Codeigniter โดยข้อดีของ Laravel คือ โปรแกรมเมอร์ไม่ต้องพยายามเขียนโค้ดเองทั้งหมด Laravel ช่วยลดงานในการพัฒนาโดยสร้างระบบสำเร็จรูปมาให้อย่างพวก authentication, routing, sessionsและ caching. ด้วยความที่เป็น framework ที่นิยม ทำให้มี document และ code ตัวอย่างที่หาอ่านได้ง่าย

    WAMP คืออะไร?

    WAMP ย่อมาจาก Windows Apache MySQL PHP ซึ่งก็คือ Apache server หรือตัวจำลอง server ที่ไว้ run จาก localhost นั่นเอง ข้อดีของ WAMP คือ สามารถสลับ PHP version ที่ใช้การ run แต่ละครั้งโดยสลับจากหน้าเมนู interface ของโปรแกรมได้เลย โดยไม่ต้อง stop/start ใหม่

    การติดตั้ง

    1.download WAMP และทำการติดตั้งให้เรียบร้อย

    2.Configure SSL ตั้งค่าเปิดการใช้งาน SSL เพื่อให้ Composer สามารถ run ได้ โดยเข้าไปตั้งค่าที่ไฟล์ php.ini ที่เก็บอยู่ใน path C:\wamp\bin\php\php5.4.16\php.ini (path ที่ install WAMP) แล้วกด Ctrl+F ค้นหา “extension=php_openssl.dll” เมื่อเจอแล้ว ให้เอาเครื่องหมาย ; ที่อยู่ข้างหน้าออกแล้วกด save

    เปิดใช้งาน SSL โดยนำเครื่องหมาย ; ออก

    3.ติดตั้ง Composer Composer คือ เครื่องมือในการจัดการ library และ package ต่างๆ ของ PHP Framework Download Composer for Window และทำการติดตั้ง

    **หมายเหตุ ต้องติดตั้ง WAMP ก่อน Composer เนื่องจากตัว Composer จะ run ด้วย php ซึ่งติดมากับ WAMP

    4.ติดตั้ง Laravel Framework

    ตรวจสอบว่า Composer ได้ถูกติดตั้งและพร้อมใช้งานแล้ว โดยเปิด command prompt ขึ้นมาและพิมพ์คำสั่ง

    composer

    หากทำการติดตั้งและพร้อมใช้งานแล้วจะได้ผลลัพธ์ดังรูป

    ต่อมา ติดตั้ง Laravel โดยเข้าไปที่ path C:\wamp64\www ซึ่งเป็นที่เก็บตัว project web ของ WAMP Serverหลังจากนั้นให้พิมพ์คำสั่งตามด้านล่าง โดยให้ระบุชื่อ project หลัง /laravel เช่นในตัวอย่างคำสั่ง ชื่อ project ของเราคือ test

    composer create-project --prefer-dist laravel/laravel test

    หลังจากนั้น Composer จะไป download Laravel Framework และ Library ที่เกี่ยวข้องมาให้ ดังรูป

    เมื่อติดตั้งเสร็จเรียบร้อยแล้วจะได้ Application key ของ project ที่เราสร้างขึ้น ดังรูป

    เข้าไป Directory ที่เราได้สร้าง project ไว้ จะพบโครงสร้าง project ดังรูป

    5. ทดสอบ run project (อย่าลืม start WAMP ก่อน run ทุกครั้งนะคะ) โดยเปิด browser ขึ้นมา และพิมพ์ localhost/test/public/ จะได้ผลลัพธ์ดังรูป

    เป็นอันเสร็จสิ้นกระบวนการติดตั้ง Laravel และ WAMP ค่ะ ^^

     

    แหล่งข้อมูลอ้างอิงhttps://laravel.com/docs/5.4/installation

  • Remote Debugging ASP.NET application

    ในการพัฒนาเว็บแอพพลิเคชัน การที่จะ publish เว็บขึ้น server ผู้พัฒนาย่อมมีการทดสอบการทำงานของแต่ละฟังก์ชันแต่ละ process ผ่าน localhost ก่อนอยู่แล้ว ว่าสามารถทำงานได้ถูกต้อง ไม่พบ error หรือปัญหาใดๆ แต่ในบางครั้งพบว่า เมื่อ publish เว็บไปแล้ว กลับพบ error ในบางฟังก์ชัน ทั้งที่ฟังก์ชันนั้นผ่านการทดสอบบน localhost ว่าทำงานถูกต้องแล้ว ซึ่งอาจเกิดจาก Environment ในตอนที่เรา run ที่ localhost กับบน server ไม่เหมือนกัน หรือฐานข้อมูลที่ทดสอบกับฐานข้อมูลที่ใช้งานจริงมีข้อมูลที่ conflict กันอยู่ เป็นต้น ซึ่งบทความนี้ผู้เขียนจะมาแนะนำ Remote Debugging Tool สำหรับผู้พัฒนาเว็บด้วย ASP.NET

    Remote Debugging Tool

    คือ เครื่องมือที่ใช้ในการ remote debug สำหรับ ASP.NET แอพพลิเคชัน ซึ่งเป็นเครื่องมือขนาดเล็กที่มีชื่อว่า “Msvsmon.exe” ที่ให้เราสามารถ debug  code เพื่อหา error โดยการ remote จาก Visual Studio ไปยัง IIS server

     

    ติดตั้ง Remote Debugging Tool บน Windows Server

    download ตัวติดตั้ง Remote tools ตาม version ของ Visual Studio ที่เราใช้งาน เมื่อ download มาเรียบร้อยแล้วให้ทำการติดตั้ง โดยคลิกขวาที่ไฟล์ติดตั้ง เลือก Run as administrator จะปรากฎหน้าต่างดังรูป

     

    ให้เลือก Configure remote debugging จะเสร็จสิ้นขั้นตอนการติดตั้งและจะปรากฏหน้าต่าง Remote Debugger

    ซึ่งตอนนี้ Remote debugger ทำงานแล้ว โดยรอการเชื่อมต่อจากฝั่ง Visual Studio (ภายหลัง สามารถเรียกใช้งาน Remote Debugger ได้จาก Start menu)

    Attach Process จาก Visual Studio เครื่องพัฒนา

    1. เปิด Visual Studio ขึ้นมา และเลือก project ที่จะใช้งาน
    2. ที่แถบเมนูด้านบน เลือก Debug >> Attach to Process
    3. ปรากฎหน้าต่าง Attach to Process ดังรูป ในส่วนของ Qualifier ให้ระบุชื่อหรือ IP ของเครื่อง server ที่ web เราวางอยู่ และกดปุ่ม Refresh ด้านล่างเพื่อ connect ไปยังเครื่อง server ดังรูป

    4. เลือก process ที่ชื่อ w3wp.exe โดยสังเกตที่คอลัมน์ User Name เป็น path ของ site ที่เราต้องการทดสอบ หลังจากนั้นกดปุ่ม Attach ดังรูป

    5. เปิด browser และพิมพ์ url ไซต์ของเรา http://<remote computer name>

    6. เลือกมาร์กจุด breakpoint ที่จะ debug code ตามต้องการ เราก็จะสามารถ debug code โดยการ remote ไปยังเครื่อง server ที่เราได้ deploy เว็บของเราไปแล้วได้เหมือนการ debug บนเครื่อง localhost ที่เราพัฒนาค่ะ

     

    แหล่งข้อมูลอ้างอิงhttps://msdn.microsoft.com/en-us/library/mt621540.aspx

     

  • เชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    ในการพัฒนาแอปพลิเคชันหรือระบบงานหนึ่งขึ้นมา การจัดการ File source code ไม่ว่าจะเป็นการสร้าง การแก้ไข การควบคุม file version ต่างๆ ถือเป็นเรื่องสำคัญ ซึ่งในบทความนี้นำเสนอการใช้งาน Visual Studio 2015 ในการเชื่อมต่อไปยัง GitHub Server

    Git คือ Version Control ตัวหนึ่ง มีหน้าที่ในการจัดเก็บการเปลี่ยนแปลงของ file source code มีการ backup code ให้เรา สามารถที่จะเรียกดูหรือย้อนกลับไปดูเวอร์ชั่นต่างๆของ project เรา รวมถึงสามารถ track ได้ว่าไฟล์นั้นๆใครเป็นคนเพิ่มหรือแก้ไข ถูกสร้างโดยใคร ถูกปรับปรุงโดยใคร

    GitHub คือ web open source ที่ให้บริการพื้นที่จัดเก็บ source code ของ project ที่เราได้พัฒนา โดยมีระบบควบคุม (version control) แบบ Git ซึ่งทำให้การพัฒนา project ต่างๆ สามารถแชร์ file source code ได้ง่ายขึ้น

     

    เครื่องมือที่ใช้ในการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    1. Microsoft Visual Studio 2015
    2. GitHub Extension for Visual Studio สามารถ download ได้จาก link ของ github โดยตรง >> Download Now 
    3. Account ที่ใช้ในการเข้าถึง web GitHub

     

    ขั้นตอนการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    1.ติดตั้ง GitHub Extension for Visual Studio ที่ได้ดาวน์โหลดจากลิงค์ข้างบน

    install1

    2. เมื่อติดตั้งเสร็จจะขึ้นดังรูป

    install2

    3.เปิด Visual Studio 2015 ขึ้นมา ไปยังแท็บ Team Explorer แล้วกด Manage Connections ที่ไอคอนรูปปลั๊ก ดังรูป

    connect

    4.ที่เมนู GitHub ให้คลิก Login

    image4

    5.กรอกข้อมูล GitHub Account ที่จะเชื่อมต่อ แล้วกดปุ่ม Login

    filllogin

    6.เมื่อ Login สำเร็จ จะแสดง GitHub repository ทั้งบน GitHub server และ repository บนเครื่อง local ของเราเองดังรูป

    displayrepo

    7.เข้าไปที่ https://github.com/ แล้ว Login ด้วย GitHub Account ของเราแล้วไป tab>> Repository เพื่อสร้าง Repository ที่จะเก็บ Project ที่เราต้องการจะเพิ่มเข้าไปจาก Visual Studio โดยกรอก repository name และกดปุ่ม Create repository

    newrepo

    8. เราจะได้ repository เปล่าๆ ที่เราสร้างขึ้นดังรูป

    empty repository

    9. เปิด project ที่ต้องการเพิ่มเข้า repository ขึ้นมา คลิกขวาที่ solution เลือก add solution to source control ดังรูป

    addTorepo

    10.จะปรากฎหน้าต่างให้เราเลือก Source Control ที่เราเลือก Git แล้วกดปุ่ม OK

    choosesource

     

    11.ให้เรากรอก Commit Message เสร็จแล้วให้เลือกไปที่ commit ซึ่งจะมีตัวเลือกการ commit หลายแบบ ได้แก่ Commit, Commit and Push และ Commit and Sync ในที่่นี่ผู้เขียนเลือก Commit and Push ซึ่งเป็นการ commit และโยน file source code ขึ้นไปยัง web server repository ด้วย เพื่อแสดงให้ผู้อ่านเห็นว่ามีการเชื่อมต่อกันแล้วจริง

    commitmsg

    12. หลังจากกด Commit and Push จะมี message แจ้งเตือนว่า “There is no remote repository configured. Publish this repository to share your commits.” ซึ่งหมายถึงเรายังไม่ระบุและ reomte ไปยัง repository ที่เราต้องการจะเพิ่ม ให้เราเลื่อนมาด้านล่างและระบุ url ของ repository ที่เราได้สร้างไว้ก่อนหน้านี้บน web GitHub แล้วกดปุ่ม Publish ดังรูป

    publish repo

    13. เมื่อกดปุ่ม Publish รอจนเสร็จสิ้นแล้วจะปรากฎหน้าต่าง ดังรูป

    finish

    ให้คลิกมาที่แท็บ Solution Explorer จะสังเกตุเห็นว่าไฟล์แต่ละไฟล์จะมีรูปกุญแจแล้ว แสดงว่า file source code ของเราถูกเพิ่มเข้า Git source control เรียบร้อยแล้ว

    lock

    14. กลับไปที่เว็บไซต์ GitHub แล้วไปยัง repository ที่เราได้สร้างและเพิ่ม project จาก Visual Studio เข้าไป จะปรากฎ File source code ที่เรา Commit and Push มาจาก Visual Studio แล้ว

    finishRepo1

    finishRepo2

     

    เป็นอันเสร็จสิ้นการเชื่อมต่อและเพิ่ม project เข้าไปยัง GitHub Repository ด้วย Visual Studio 2015 แล้วค่ะ ^^

     

    แหล่งข้อมูลอ้างอิง : https://visualstudio.github.com/

  • ASP.NET MVC Part 4: ทำความรู้จักกับ ViewData, ViewBag และ TempData

    การส่งผ่านข้อมูลระหว่างกันใน ASP.NET MVC จะมีการส่งผ่านกันด้วย objects ซึ่งใน ASP.NET MVC จะมี object ที่ชื่อ ViewData, ViewBag และ TempData เป็น object ที่่ใช้ในการส่งผ่านข้อมูลในลักษณะที่แตกต่างกันออกไป โดยในการส่งผ่านข้อมูลจะแบ่งได้เป็น 3 กรณี คือ

    • การส่งผ่านค่าจาก Controller ไปยัง View
    • การส่งผ่านค่าจาก Controller หนึ่ง ไปยัง Controller อื่น
    • การส่งค่าระหว่าง Action หนึ่ง ไปยัง Action อื่น

    โดยทั้ง 3 objects จะมีคุณสมบัติที่แตกต่างกัน ดังนี้

    1. ViewBag เป็น dynamic object ในการส่งค่าจาก controller ไปยัง view
    2. ViewData เป็น dictionary object ในการส่งค่าจาก controller ไปยัง view
    3. TempData เป็น dictionary object ในการส่งค่าข้ามกันระหว่าง controller และ action

     

    การส่งผ่านข้อมูลจาก controller ไปยัง View

    การส่งผ่านข้อมูลจาก Controller ไปยัง View สามารถทำได้ 3 รูปแบบ ขึ้นอยู่กับลักษณะของข้อมูลที่ต้องการส่งว่าเป็นข้อมูลลักษณะไหน มีความซับซ้อนเพียงใด แต่ละรูปแบบสามารถเขียนได้ดังนี้

    controllertoview

     

    ส่งผ่าน Model

    การส่งผ่านข้อมูลผ่านตัว model เป็นการส่งผ่านข้อมูลผ่านตัว model ตรงๆ โดยที่ข้อมูลจะมี property ตามที่มีอยู่ใน model ที่สร้างไว้ ดังตัวอย่าง สร้าง model ของ Book และ set ค่าให้กับ property ต่างๆ และ return model Book ไปยังหน้า View

    ฝั่ง Controller

    public ActionResult Index()
            {
                List<ฺBook> b = new List<Book>() {
     
                   new Book{ Id = 1, Title = "Harry Potter", Author= "JK. Rolling"},
                   new Book{ Id = 2, Title = "Inferno", Author= "Dan Brown"}
                };
     
                return View(b);
            }
    

    ฝั่งแสดงผล View

    ประกาศ type ของ model เป็น Book หลังจากนั้นใช้ตัวแปร model ในการเข้าถึง property ต่างๆของ Model

    @model MvcBook.Models.Book
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            th>
            <th>
                @Html.DisplayNameFor(model => model.Author)
            th>
            <th>th>
        tr>
     
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            td>
        tr>
    }
     
    table>
    

     

    ส่งผ่าน ViewBag

    การส่งผ่านข้อมูลด้วย ViewBag จะเป็นการส่งข้อมูลที่เป็น dynamic object เช่น string, int, float เป็นต้น ดังตัวอย่าง

    ฝั่ง Controller

    public ActionResult Index()
            {
                ViewBag.title = "THE DAVINCI CODE";
                return View();
            }
    

    ฝั่งแสดงผล View

    <h2>@ViewBag.Title</h2>
    

     

    ส่งผ่าน ViewData

    การส่งผ่านข้อมูลด้วย ViewData จะเป็นการส่งข้อมูลที่เป็น dictionary object เช่น List, Enumerable, array เป็นต้น ดังตัวอย่าง

    ฝั่ง Controller

    public ActionResult Index()
            {
                List<string> listBook = new  List<string>();
                listBook.Add("Davinci code");
                listBook.Add("The lost symbol");
                listBook.Add("Inferno");
                ViewData["ListBook"] = listBook;
                return View();
            }
    

    ฝั่งแสดงผล View

    ในการแสดงผลข้อมูลที่เป็น dictionary object นั้นให้ทำการ cast ให้เป็น type ที่ตรงกับ type ที่ส่งมาจาก controller

    <table class="table"> 
    @foreach (var item in (List<string>)ViewData["ListBook"]) {
        <tr>
            <td>
                @item
            td>
        tr>
    }
    <table>
    

     

    การส่งผ่านข้อมูลจาก controller/Action หนึ่ง ไปยัง controller/Action อื่น

    ในการส่งผ่านข้อมูลจาก controller หนึ่ง ไปยังอีก controller หรือจาก action ไปยังอีก action จะใช้ object ที่ชื่อ TempData ในการส่งค่าระหว่างกัน ซึ่ง TempData จะเก็บข้อมูลใน session โดยเป็นการส่งค่าจาก HTTP request หนึ่งไปยัง HTTP request อื่นๆ ดังตัวอย่าง

    tempdata

    controller ฝั่งส่งค่า

    public ActionResult Index()
            {
              TempData["data1"] = "I am from action 1";
              return RedirectToAction("Read");
             
            }
    

    controller ฝั่งรับค่า

    public string Read()
            {
                string str;
                str = TempData["data1"].ToString();
                return str;
            }
    

     

    สรุป

    ในการส่งข้อมูลระหว่าง controller กับ view และ controller/action กับ controller/action ของ ASP.NET MVC นั้น ในเบื้องต้นสามารถส่งผ่าน object ทั้ง 3 ตัว ได้แก่ ViewBag, ViewData และ TempData โดยในการเลือกใช้ให้พิจารณาลักษณะของข้อมูลที่ต้องการส่งเป็นหลัก

    บทความก่อนหน้า : ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

    แหล่งอ้างอิง : 

    [1] http://www.codeproject.com/Articles/476967/What-is-ViewData-ViewBag-and-TempData-MVC-Option?msg=4858421

    [2] http://rachelappel.com/when-to-use-viewbag-viewdata-or-tempdata-in-asp-net-mvc-3-applications/

  • ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

    จากบทความก่อนหน้า ซึ่งอาจจะนานมากพอสมควรที่ได้แนะนำ MVC ไปไว้แล้วในเบื้องต้น (ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC และ ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap) บทความนี้จะมาแนะนำในส่วนของการสร้าง Model ในการเชื่อมต่อกับฐานข้อมูล ในการ query และจัดการกับข้อมูล เพื่อส่งให้กับ Controller และ View เรียกใช้ในลำดับต่อไป

    Model คือ ส่วนหนึ่งในองค์ประกอบของการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework (Model-View-Controller) โดยจะเป็นส่วนที่ทำหน้าที่ Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล โดยบทความนี้นำเสนอการนำเครื่องมือ Entity Framework มาใช้ในการสร้างและจัดการ Model ในการเชื่อมต่อกับฐานข้อมูล สำหรับการพัฒนาเว็บแอพพลิเคชันตามรูปแบบ MVC Framework

    Entity Framework
    Entity Framework คือ tools ที่ทำหน้าที่จัดการกับฐานข้อมูล โดยแนวคิดของ Entity Framework อยู่ในรูปแบบของ O/RM (Object/Relational Mapping) คือ Entity Framework จะสร้าง Layer ทำหน้าที่เป็น Database Model ขึ้นมาเป็น Class ใน Project ของเรา โดยจะทำหน้าที่ Mapping ตัว Class ที่จะสร้างขึ้น กับ Table , View และ Stored Procedure จากฐานข้อมูบ มาไว้บน Project ซึ่งทำให้เราเราสามารถเรียกใช้มันผ่าน Class ที่อยู่ใน Project เราได้เลย ส่วนการเขียน Query หรือจัดการกับข้อมูลผ่านตัว Entity Model จะใช้ Syntax ของ LINQ to Entities ซึ่งเป็น syntax ที่สามารถเข้าใจได้ง่ายตามรูปแบบของภาษาเช่น VB.Net หรือ C#

    ex_entity
    ตัวอย่างการใช้งาน Entity Framework

     

    วิธีการใช้งาน Entity Framework เบื้องต้น

    1. เปิด solution ที่ต้องการใช้ขึ้นมา (ในบทความนี้เป็น project แบบ MVC Framework)

    2. คลิกขวาที่โฟลเดอร์ Model แล้วเลือก Add =>New Item

    3. ที่ tab ด้านซ้ายมือ เลือก Data จากนั้นเลือก ADO.NET Entity Data Model และทำการตั้งชื่อ และกดปุ่ม Add

    new_entityModel

     

    4. เมื่อเข้าสู่หน้าจอให้เลือก Model Content ให้เลือก EF Desiner from DataBase และกด Next จะเข้าสู่ขั้นตอนต่อไป

    choose_content

     

    5.ขั้นตอนถัดมาคือการเลือก Data Connection เป็นการเลือกการติดต่อกับฐานข้อมูลว่าจะให้ Entity ติดต่อกับฐานข้อมูลไหน โดยครั้งแรกหากยังไม่มี ฐานข้อมูลมาให้เลือกใน comboBox จะต้อง New Connection ขึ้นมาก่อน และทำตามขั้นตอนไปได้เลย แต่ถ้ามีแล้วให้เลือก Connection จาก ComboBox หลังจากนั้นให้กดเลือก Yes,include the sensitive data in connection string และเลือก Checkbox ให้ Save Connection string เข้าสู่ Web.Config และตั้งชื่อให้กับ Conection string โดย default ชื่อจะเป็น “Entities” และกดปุ่ม Next เข้าสู่ขั้นตอนต่อไปchoose_dataConrection

     

    6.ขั้นตอนนี้เป็นขั้นตอนสุดท้าย สำหรับเลือกว่า เราจะติดต่อ Entity กับ Table, View หรือ Storeprocdure อะไรบ้าง ให้กด expand และเลือก Table, View หรือ Storeprocdure ที่ต้องการ หลังจากนั้นให้กดปุ่ม Finish เป็นอันเสร็จกระบวนการสร้าง Entity Data Model ในการติดต่อกับฐานข้อมูล

    choose_table

     

    การเรียกใช้งานจากฝั่ง Controller

    1.ที่ไฟล์ xxxController.cs ทำการ using เพื่อเรียกใช้งาน

    using MVCBootstrap.Models;
    

    2.ประกาศตัวแปรขึ้นมา new object เพื่อจะเข้าถึง entity model ที่เราได้ทำการสร้างไว้ก่อนหน้านี้

    var db = new Budget_Entities();
    

    3.เข้าถึงแต่ละ Entity โดยใช้ syntax linq  โดยขอยกตัวอย่างในส่วนของการเข้าถึงและจัดการข้อมูลเบื้องต้น

    • Query ข้อมูล
     public ActionResult QueryData()
            {
                var db = new Budget_Entities();
                var listCampus = db.VF_CAMPUS.Where(w => w.CAMP_NAME_THAI.Contains("วิทย"));
                return View(listCampus);
            }
    
    • Insert ข้อมูล

    public ActionResult InsertData()
            {
                bool isSuccess = true;
                I_ITEM item = new I_ITEM();
                item.ITEM_NO = "001";
                item.ITEM_THAI_NAME = "รายการวัสดุทางการศึกษา";
                db.SaveChanges();
                return View(isSuccess);
            }
    
    • Update ข้อมูล

     public ActionResult UpdateData(int itemID)
            {
                bool isSuccess = true;
                var db = new Budget_Entities();
                var itemForUpdate = db.I_ITEM.Find(itemID);
                itemForUpdate.ITEM_THAI_NAME = "รายการวัสดุแก้ไข";
                db.SaveChanges();
                return View(isSuccess);
            }
    
    • Remove ข้อมูล
     public ActionResult RemoveData(int itemID)
            {
                bool isSuccess = true;
                var db = new Budget_Entities();
                var itemForRemove = db.I_ITEM.Find(itemID);
                db.I_ITEM.Remove(itemForRemove);
                db.SaveChanges();
                return View(isSuccess);
            }
    

     

    ซึ่งจากทั้ง 4 ตัวอย่างจะมีการประกาศตัวแปร var db = new Budget_Entities(); เป็นการ new object ขึ้นมาเพื่อที่จะเข้าถึง entity ภายใน และทำการ query ข้อมูล, set ค่าให้กับ attribute หรือลบข้อมูล หลังจากที่จัดการกับตัว entity เสร็จแล้ว จะเรียกใช้งาน method SaveChanged() ซึ่งเป็นการสั่งให้ entity Model ทำการ execute และเปลี่ยนแปลงข้อมูลตามที่เราได้เขียน code ไว้ไปยังฐานข้อมูล เป็นอันเสร็จกระบวนการในการเปลี่ยนแปลงข้อมูลที่กระทำกับฐานข้อมูล จากนั้นเราจะเอาค่านั้นไปใช้ต่อหรือ จะ return ค่า ไปยัง View เพื่อแสดงผลต่อไปก็แล้วแต่ผู้ใช้เลยค่ะ

     

    บทความถัดไป : ASP.NET MVC Part 4: ทำความรู้จักกับ ViewData, ViewBag และ TempData

    บทความก่อนหน้า : ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

    แหล่งข้อมูลอ้างอิง :

    [1] http://www.asp.net/mvc/overview/getting-started/database-first-development/creating-the-web-application

    [2] https://msdn.microsoft.com/en-us/library/bb399760(v=vs.100).aspx