Month: July 2019

  • Hello…Flatpickr!!

    หลายคนอาจะเคยพบปัญหาการเลือก วัน เดือน ปี ในcalendar การกรอกข้อมูลที่เป็นวันที่ใน web ต่างๆ การเลือกช่วงวันที่ใช้งานยาก โดยเฉพาะในการเลือก ช่วงเวลา ที่ย้อนหลัง ไปหลายปี บาง web อาจต้องกดเลื่อนเดือนที่ละเดือนไปเรื่อยๆ ต้องใช้เวลานาน ทำให้รู้สึกเบื่อ… วันนี้เราจะมานำเสนอ Flatpickr ที่เป็นไลบรารี่ javascript ใช้สำหรับรับ input ที่เป็น datetime picker ที่ยืดหยุ่น มีขนาดเล็กและใช้ง่าย โดย output ที่ได้จะเป็น String ตาม format ที่เราต้องการ

    Flatpickr js รูปแบบจะเป็นแนว Lean กับ UX-driven สามารถใช้งานได้กับ JS ธรรมดาหรือ jQuery โดย Flatpickr รองรับภาษาไทยได้โดยเลือก Localization เป็นไทยเพื่อให้สามารถแสดงเป็นภาษาไทย และรองรับรูปแบบเวลาที่แสดง 24 ชม. เพราะจะเข้าใจง่ายกว่า AM กับ PM ซึ่ง library อื่นๆ อีกหลายตัวยังไม่สามารถรองรับ จุดเด่น คือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที

    การใช้งานสามารถใช้ได้ง่ายๆ โดยใช้แค่ 2 ไฟล์ ก็สามารถใช้ option ได้เกือบครบ ซึ่งไฟล์ ที่จำเป็นประกอบด้วย ไฟล์ js 1 ไฟล์ และ ไฟล์ css 1 ไฟล์

    <link rel=”stylesheet” href=”flatpickr.css”>

    <script src=”flatpickr.js”></script>

    ถ้าใช้งานร่วมกับ jquery ก็ต้อง เพิ่ม library jquery เข้ามาด้วย

      <script src=”jquery.min.js”></script>

    การใช้งาน

    $(“.selector”).flatpickr(
    optional_config
    );

    ตัวอย่างกล่อง input ที่ใช้เลือก วันที่

     <input type=”text” id=”timePicker” placeholder=”Please select Time”>

    การแสดงเวลาแบบ Basic
    $(“#basicDate”).flatpickr({
    enableTime: true,
    dateFormat: “F, d Y H:i”,
    time_24hr: true
    });

    ภาพที่ 1 ฺBasic Calendar

    เราสามารถกำหนดช่วงของวันที่ค้นหาได้ง่ายขึ้น เนื่องจากมี Range Calendar (ภาพที่ 2) ให้ใช้งาน หรือจะเป็นเลือกแบบ Multiple เลือกทีละหลายๆวันก็ได้ และยังมี Plugin หรือ Theme ให้เลือกใช้งานอีกด้วย

    การแสดงเวลาแบบ Range Datetime
    $(“#rangeDate”).flatpickr({
    mode: ‘range’,
    dateFormat: “Y-m-d”
    });

    ภาพที่ 2 Range Calendar
  • 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 ได้แล้วว ^^

  • การเชื่อมต่อฐานข้อมูล Oracle ผ่าน Access office 365

    สำหรับหลาย ๆ ท่านนอกเหนือจากที่ต้องมีหน้าที่ในการพัฒนาโปรแกรมเป็นหลักแล้ว อาจจะต้องมีหน้าที่ในการนำเข้าข้อมูลด้วย ตัวเองก็เช่นกันต้องทำหน้าที่ในการนำเข้าข้อมูลเข้าฐานข้อมูล Oracle อยู่เป็นประจำ จริงๆ มีหลายเครื่องมือในการนำเข้าข้อมูล เช่น SQL Developer , Toad for Oracle เป็นต้น แต่บางครั้งก็ไม่สะดวกเพราะบางข้อมูลต้องผ่านการจัดการก่อนถึงจะสามารถถ่ายโอนได้ ตัวเองก็มีอีกวิธีคือ ถ่ายโอนผ่าน Access office 365

    สำหรับบทความในครั้งนี้ ขอนำเสนอวิธีการเชื่อมต่อฐานข้อมูล Oracle ผ่าน Access office 365 เผื่อใครจะใช้เป็นทางเลือกในการจัดการข้อมูลของ Oracle กันค่ะ

    โดยทำตามขั้นตอนดังต่อไปนี้

    STEP 1

    • ติดตั้ง  Oracle Database 12c Release 2 Client for Microsoft Windows (32bit)
    • ตั้งค่า TNS Service name ในการเข้าถึงฐานข้อมูล Oracle ผ่าน Oracle Net Manager โดยมีขั้นตอนดังนี้
      • เปิดโปรแกรม Net Manager
      • คลิกที่ Local -> Service Naming คลิกเครื่องหมาย +
      • ระบบแสดงหน้าต่าง Net Service Name Wizard
      • ขั้นตอนที่ 1 ตรงช่อง Net Service Name ป้อนชื่อที่ต้องการ เช่น TEST_DB คลิกปุ่ม ถัดไป
      • ขั้นนตอนที่ 2 คลิกเลือก TCP/IP (Internet Protocol)  คลิกปุ่ม ถัดไป
      • ขั้นตอนที่ 3 ตรงช่อง Host Name: ป้อนชื่อฐานข้อมูล Oracle ที่ต้องการ เช่น TEST.PSU.AC.TH  ระบุ Port Number: 1521
      • ขั้นตอนที่ 4 ตรงช่อง Service Name ให้ใส่ชื่อ Service Name ของ Database ที่ระบุในขั้นตอนที่ 3 คลิกปุ่ม ถัดไป
      • ขั้นตอนที่ 5 ซึ่งเป็นขั้นตอนสุดท้าย เราสามารถคลิกปุ่ม Test เพื่อทดสอบการ connect กับฐานข้อมูล และคลิกปุ่ม เสร็จสิ้น เพื่อสิ้นสุดการการสร้าง Service Naming
    ภาพแสดงการตั้งค่า TNS Service name ขั้นตอนที่ 1
    ภาพแสดงการตั้งค่า TNS Service name ขั้นตอนที่ 2
    ภาพแสดงการตั้งค่า TNS Service name ขั้นตอนที่ 3
    ภาพแสดงการตั้งค่า TNS Service name ขั้นตอนที่ 4
    ภาพแสดงการตั้งค่า TNS Service name ขั้นตอนที่ 5

    STEP 2

    • เปิดโปรแกรม ODBC Data Sources (32-bit)
      • คลิกเลือกแท็บ System DSN คลิกปุ่ม Add…
      • คลิกเลือก driver : Oracle in OraClient 12Home1_32bit ในหน้าต่าง Create New Data Source คลิกปุ่ม Finish
      • ระบบแสดงหน้าต่าง Oracle ODBC Driver Configuration
        • กำหนด Data Source Name และ Description
        • เลือก TNS Service Name จากที่สร้างไว้ในขั้นตอนการตั้งค่า TNS Service name ขั้นตอนที่ 2 (กรณีไม่มีให้เลือกสามารถพิมพ์เองได้)
        • ตรงช่อง User ID ระบุ user / schema  เพื่อ connect เข้าฐานข้อมูล Oracle
        • คลิกปุ่ม OK
    ภาพแสดงหน้าต่างการเลือก driver ของ data source
    ภาพแสดงหน้าต่าง Oracle ODBC Driver Configuration

    STEP 3

    • เปิดโปรแกรม Access office 365
      • คลิกเลือกเมนู External Data -> New Data Source -> From Other Sources -> ODBC Database
      • ระบบแสดงหน้าต่าง Get External Data – ODBC Database
      • คลิกเลือก Link to data source by creating a linked table.
      • คลิกปุ่ม OK
      • ระบบแสดงหน้าต่าง Select Data Source คลิกแท็บ Machine Data Source
      • คลิกเลือก Data Source Name ที่เราได้สร้างไว้แล้ว คลิกปุ่ม OK
      • ระบบแสดงหน้าต่าง Oracle ODBC Driver Connect
      • กรอก Password เพื่อ connect เข้าฐานข้อมูล Oracle คลิกปุ่ม OK
      • ระบบแสดง Link Tables คลิกเลือกตารางที่ต้องการ คลิกปุ่ม OK
    ภาพแสดงหน้าจอหลักของ Access
    ภาพแสดงหน้้าต่าง Get External Data – ODBC Database
    ภาพแสดงหน้าต่าง Select Data Source
    ภาพแสดงหน้าต่าง Oracle ODBC Driver Connect
    ภาพแสดง Link Tables

    จากนั้นตารางที่เราเลือกก็จะมาแสดงให้เราเห็น เราก็สามารถจัดการข้อมูลดังกล่าวผ่าน Access office 365 ได้แล้ว คราวนี้ถ้าต้องการนำเข้าข้อมูลเราก็สามารถใช้ความสามารถของ Access ได้ผ่านตัว Append Query ได้หรือแม้แต่จะปรับปรุงข้อมูลก็สามารถทำได้ผ่านตัว Update Query เป็นต้น

    ภาพแสดงตัวอย่าง Linked Table ของฐานข้อมูล PSU_ADMISSION

  • 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

  • วิธีการแสดงผลวันที่เป็นภาษาที่ต้องการด้วยฟังก์ชัน TO_CHAR

    หลาย ๆ คนคงเคยเจอปัญหาว่าฐานข้อมูลของเรากำหนด default การจัดเก็บข้อมูลวันที่ไว้เป็นปี ค.ศ. แต่ระบบที่เราพัฒนาต้องแสดงผลเป็นปี พ.ศ. เราต้องทำอย่างไร วันนี้จึงขอนำเสนอวิธีการแสดงผลวันที่เป็นภาษาที่เราต้องการด้วยฟังก์ชัน TO_CHAR กันค่ะ

    โดยที่ฟังก์ชัน TO_CHAR ทำหน้าที่ในการแปลงข้อมูลตัวเลขและข้อมูลวันที่เป็นตัวอักษร ซึ่งมีรูปแบบ Syntax ดังนี้

    TO_CHAR( input_value, [format_mask], [nls_parameter] )

    พารามิเตอร์ของฟังก์ชัน TO_CHAR คือ

    • input_value (จำเป็น): ค่าของวันที่ที่ต้องการจะแปลงค่า
    • format_mask (ทางเลือก): เป็นรูปแบบที่ต้องการให้แสดง หากไม่ได้ระบุไว้จะแสดงตามค่า default ที่กำหนดไว้
    • nls_parameter (ทางเลือก): เป็น nls language ที่จะใช้ในการแปลงค่า

    ต่อไปนี้เป็นตัวอย่าง format_mask ที่ใช้บ่อย ๆ โดยแต่ละ format_mask สามารถนำผสมรวมกันได้ เพื่อให้ได้ค่าการแสดงผลที่เราต้องการ

    format_mask คำอธิบาย
    YEAR อ่านค่าปีเป็นตัวอักษร
    YYYY, YYY, YY, Y แสดงจำนวนหลักสุดท้ายของปีตามที่ระบุ
    MM แสดงเดือน (01-12, JAN = 01)
    MON แสดงชื่อเดือนแบบย่อ
    MONTH แสดงชื่อเดือนแบบเต็ม
    D แสดงวันในสัปดาห์
    DAY แสดงชื่อของวัน
    DD แสดงวันของเดือน (1-31)
    DDD แสดงวันของปี (1-366)
    DY แสดงชื่อย่อของวัน
    HH แสดงชั่วโมงของวัน (1-12)
    HH12 แสดงชั่วโมงของวัน (1-12)
    HH24 แสดงชั่วโมงของวัน (0-23)
    MI แสดงนาที (0-59)
    SS แสดงวินาที (0-59)

    คราวนี้ลองมาเขียน query เพื่อดูตัวอย่างค่าของ format_mask แต่ละตัวกันว่าจะแสดงผลออกมาเป็นอย่างไร

    รูปแสดง query และผลลัธพ์ที่ได้จากการแสดงผลตาม format_mask

    จะเห็นว่าค่าวันที่ที่แสดง แสดงเป็นปี ค.ศ. ตาม default ของฐานข้อมูล สังเกตุว่าข้อมูลบาง format_mask จะมีค่าศูนย์นำหน้า และมีช่องว่างตามหลัง ดังนั้นถ้าต้องการตัดเลขศูนย์และช่องว่างเราสามารถใช้ “FM” นำหน้า format_mask ตามตัวอย่างต่อไปนี้

    รูปแสดง query และผลลัพธ์ที่ได้จากการใช้ “FM” นำหน้า format_mask

    คราวนี้ถ้าเราต้องการที่จะให้การแสดงผลวันที่เป็นวัน เดือน ปี ไทย เราสามารถใช้ nls_parameter เข้ามาช่วยได้โดยสามารถกำหนดได้ตามตัวอย่างข้างล่างนี้

    รูปแสดงตัวอย่างวิธการกำหนด nls_parameter และผลลัพธ์ที่ได้

    ตัวแปรที่สำคัญคือ 
    – NLS_CALENDAR ตัวนี้แหละที่ทำให้ พ.ศ. แสดงเป็น พุทธศักราช 2562 (THAI BUDDHA)
    – NLS_DATE_LANGUAGE  ตัวนี้กำหนดให้แสดงเดือนเป็นภาษาไทย (THAI)

    ด้วยตัวพารามิเตอร์ NLS_CALENDAR และ NLS_DATE_LANGUAGE เราก็สามารถแสดงผลเป็น ภาษาอะไรก็ได้ตามที่เราต้องการ

  • แนะนำ Knex js

    สำหรับผู้ที่เขียน web แล้วต้องมีการเชื่อมต่อกับ database นั้น การเชื่อมต่ออาจไม่ใช่เรื่องง่าย ถ้าจะใช้ JavaScript มาช่วยอาจมีความซับซ้อนหรือมีความยุ่งยากมาก ดังนั้นจึงมี tool เพื่อนำมาใช้ในการจัดการ database โดยเฉพาะผู้ที่ถนัด Node.js และ Browser โดย tool ที่กล่าวถึงนั้น คือ “knex.js”

    knex.js เป็น SQL query builder ที่สามารถต่อกับฐานข้อมูลได้หลากหลาย สามารถที่จะเรียนรู้เข้าใจง่ายและสามารถปรับเปลี่ยนได้ตลอด โดยปัจจุบันสามารถรองรับการทำงานกับ database  Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, และ Amazon Redshift สามารถรันได้ทั้ง Node.js และ Browser รองรับ transactions, polling, streaming queries, promise และอื่นๆ

    การติดตั้งสามารถลงผ่าน npm ได้เหมือน ตัวอื่นๆในตระกูล Node เช่น

    npm install knex –save

    และโหลด library สำหรับเชื่อมต่อฐานข้อมูลต่างๆ ผ่านคำสั่งดังนี้

    npm install pg
    npm install sqlite3
    npm install mysql
    npm install mysql2
    npm install oracle
    npm install mssql

    ตัวอย่างการ connect กับ database Mysql

    var knex = require(‘knex’)({
    client: ‘mysql’,
    connection: {
    host : ‘127.0.0.1’,
    user : ‘your_database_user’,
    password : ‘your_database_password’,
    database : ‘myapp_test’
    }
    });

    การใช้คำสั่งของ sql ( selectinsertupdatedelete) สามารถเขียนได้ง่าย โดยมีฟังก์ชั่นมาให้พร้อมใช้งานแล้ว

    ตัวอย่างการใช้คำสั่ง select

    Ex1 : select * from f_student_payment สามารถใช้คำสั่ง

    knex.select().table(‘f_student_payment’) หรือ 

    knex.select().from(‘f_student_payment’)

    Ex2 : select ‘payment_id’, ‘student_id’, ‘address’ from ‘f_student_payment’

    knex.select(‘payment_id’, ‘student_id’, ‘address’).from(‘f_student_payment’)

    Ex3 : select * from ‘f_student_payment’ where ‘student_id’ = ‘5710121045’

    knex(‘f_student_payment’).where(‘student_id’, ‘5710121045’)

    ตัวอย่างการใช้คำสั่ง insert

    Ex4 : insert into ‘f_student_payment’ (‘student_id’) values (‘621012025’)

    knex(‘f_student_payment’).insert({ student_id : ‘621012025’})

    ตัวอย่างการใช้คำสั่ง update

    Ex5 : update ‘f_student_payment’ set ‘student_id’ = ‘621012025’

    knex(‘f_student_payment’).update(‘student_id’, ‘621012025’)

    ตัวอย่างการใช้คำสั่ง delete

    Ex6 : delete from f_student_payment where student_id = ‘621012025’

    knex(‘f_student_payment’)
    .where(‘student_id’, ‘621012025’)
    .del()

  • Gatsby Framework

    Gatsby คืออะไร?

    • เป็น open source framework มีพื้นฐานมาจาก React
    • เป็น Static Site Generator กล่าวคือเมื่อเขียนเว็บ -> Build -> HTML+ css + javascript -> Deploy กับ web server หลายๆเว็บ เช่น apache, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ

    Create Gatsby Project
    ก่อนอื่นเราจะต้องมาติดตั้งตัว gatsby-cli ซึ่งสามารถใช้ได้ทั้งคำสั่ง Yarn หรือ NPM ดังภาพที่ 1

    npm install -g gatsby-cli

    yarn global install gatsby-cli

    ภาพที่ 1 ติดตั้ง gatsby-cli

    เมื่อเราติดตั้ง gatsby-cli ขั้นตอนต่อไปก็จะเป็นการสร้าง website ใหม่ด้วย คำสั่ง

    gatsby new blog

    หลังจากสร้าง blog เรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ ในที่นี้คือ “blog” แล้วใช้คำสั่ง 

    gatsby develop เพื่อรัน development server

    และเราจะได้ default page ที่ Gatsby สร้างให้ ซึ่งสามารถเข้าถึงเว็บได้ด้วย http://localhost:8000 ดังภาพที่ 2

    ภาพที่ 2 Gatsby Default Starter

    ต่อไปเราจะลองแก้ไข Gatsby Config ในไฟล์ gatsby-config.js แล้วกลับไปยัง Browser ที่เราเปิดไว้ในภาพที่ 2จะได้ผลลัพธ์ดังภาพที่ 3 กล่าวคือเราสามารถแก้ Code แล้วSave หน้าเว็บก็จะอัพเดททันทีโดยที่เราไม่ต้องสั่ง Build ใหม่ เนื่องจาก Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอ เหมือนรัน develop

    ภาพที่ 3 ผลลัพธ์จากการแก้ไข gatsby-config.js
  • Create Excel 2007 file using Interop services.

    Microsoft Office Interop (Excel Automation)คือ ตัวเลือกอีกทางหนึ่งที่ใช้สำหรับ สร้าง อ่าน เอกสาร Excel (XLS, XLSX, CSV) จากการพัฒนาโดยใช้   C# หรือ VB.NET แต่บทความนี้จะขอยกตัวอย่างการพัฒนาเพื่อสร้างเอกสารโดยใช้ C# ค่ะ

    Step 1 

    • เปิด Visual Studio
    • File>New>Project
    • เลือก Visual C#> Windows > Select Console Application

    Step

    • เลือก >> Project Menu >> เลือก Add References >> เลือกที่ Tab COM >> กด “Microsoft Excel 12.0 Object Library”  เพื่อเพิ่ม References
    รูปตัวอย่างการ Add References

    Step

    ตัวอย่าง Code C# เพื่อใช้ในการสร้าง Excel File ดังนี้

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Diagnostics;
    using System.Runtime.InteropServices;
    using Microsoft.Office.Interop;
    using Microsoft.Office.Interop.Excel;
     
    namespace ConsoleApplication1
    {
        class Class1
        {
            public static void Main(string[] ar)
            {
                Application ExcelApp = new Application();
                Workbook ExcelWorkBook = null;
                Worksheet ExcelWorkSheet = null;
     
                ExcelApp.Visible = true;
                ExcelWorkBook = ExcelApp.Workbooks.Add(XlWBATemplate.xlWBATWorksheet);
                // ExcelWorkBook.Worksheets.Add(); //Adding New Sheet in Excel Workbook
                try
                {
                    ExcelWorkSheet = ExcelWorkBook.Worksheets[1]; // Compulsory Line in which sheet you want to write data
                    //Writing data into excel of 100 rows with 10 column 
                    for (int r = 1; r < 101; r++) //r stands for ExcelRow and c for ExcelColumn
                    {
                        // Excel row and column start positions for writing Row=1 and Col=1
                        for (int c = 1; c < 11; c++)
                            ExcelWorkSheet.Cells[r, c] = "R" + r + "C" + c;
                    }
                    ExcelWorkBook.Worksheets[1].Name = "MySheet";//Renaming the Sheet1 to MySheet
                    ExcelWorkBook.SaveAs("d:\\Testing.xlsx");
                    ExcelWorkBook.Close();
                    ExcelApp.Quit();
                    Marshal.ReleaseComObject(ExcelWorkSheet);
                    Marshal.ReleaseComObject(ExcelWorkBook);
                    Marshal.ReleaseComObject(ExcelApp);
                }
                catch (Exception exHandle)
                {
                    Console.WriteLine("Exception: " + exHandle.Message);
                    Console.ReadLine();
                }
                finally
                {
     
                    foreach (Process process in Process.GetProcessesByName("Excel"))
                        process.Kill();
                }
             }
        }
    }
    

    เมื่อมีการ Run โปรแกรมแล้ว Excel file ก็จะถูกสร้างตาม path ที่ระบุ ค่ะ

     แหล่งอ้างอิง https://www.c-sharpcorner.com/blogs/creating-excel-file-using-interop-services1

  • TFS : (ตอน) การติดตามการดำเนินโครงการ

    จากบทความ
    การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 4 : การวางแผนงาน)
    และ
    การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 5 : การตรวจสอบงานที่ได้รับมอบหมาย และการบันทึกผลการทำงาน)
    ได้กล่าวถึง ขั้นตอนการใช้ TFS ในการวางแผน การเข้าไปดูงานที่ได้รับมอบหมาย และการบันทึกผลการปฏิบัติงาน

    บทความต่อไปนี้ จะเป็นเนื้อหาต่อเนื่องจาก 2 บทความข้างต้น นั่นคือ เราจะสามารถใช้ TFS ในการติดตามผลการดำเนินงานได้อย่างไรบ้าง
    ในกระบวนการบริหารจัดการโครงการ “ขั้นตอนการติดตามงาน” ถือเป็นขั้นตอนที่สำคัญอย่างมาก และเป็นขั้นตอนที่ผู้จัดการโครงการต้องปฏิบัติ และปฏิบัติอย่างต่อเนื่อง สม่ำเสมอ เพื่อให้สามารถตรวจสอบความล่าช้าของโครงการ และค้นหาปัญหาที่ทำให้ล่าช้า เพื่อนำไปสู่แนวทางแก้ไขที่ทันเวลานั่นเอง

    TFS สามารถตรวจสอบ หรือติดตามงานได้หลายวิธี ในบทความนี้ ได้หยิบยกมาให้เห็นด้วยกัน 3 วิธี อย่าให้เสียเวลา เรามาทำความรู้จัก ในแต่ละวิธีกันเลยค่ะ….

    วิธีที่ 1 ตรวจสอบจาก Stage

    โดย Stage
    TO DO = ยังไม่ดำเนินการ
    IN PROGRESS = อยู่ระหว่างการดำเนินการ
    DONE = ดำเนินการเสร็จแล้ว

    วิธีนี้ เป็นการติดตามงานในภาพของแต่ละงานย่อย หรือ Task นั่นเอง โดยดูจากปริมาณงานที่อยู่ใน Stage ถ้า Tasks ทุก Tasks อยู่ใน Stage = DONE สบายใจได้เลยค่ะ แต่ถ้าจะถึงเวลาปิดโครงการแล้วแต่ Tasks ยังอยู่ใน TO DO หรือ IN PROGRESS จำนวนมาก ต้องรีบสอบถามสมาชิกเลยนะค่ะว่าเกิดอะไรขึ้น เพื่อให้สามารถแก้ไขปัญหาได้ทันท่วงทีค่ะ

    วิธีที่ 2 ตรวจสอบจาก Burndown Chart ซึ่งจะแสดงเป็นกราฟง่ายๆที่ใช้บอกเราว่า “เราทำงานเสร็จไปแล้วเท่าไรและเราเหลืองานที่ต้องทำอีกเท่าไร” แสดงดังรูป

    จากรูป วิธีนี้เป็นการติดตามงานในมุมมองภาพรวมทั้งโครงการ นั่นคือ หากงานเป็นไปตามแผนการดำเนินงาน Remaining Work ที่เหลือในแต่ละช่วงเวลาจะต้องต่ำกว่าเส้น Ideal Trend นะค่ะ หากเลยเส้น แสดงว่างานไม่เสร็จตามแผน ถ้าเจอแบบนี้อย่านิ่งนอนใจนะค่ะ ต้องหาว่าเกิดปัญหาอะไรขึ้นที่ทำให้งานช้ากว่าที่กำหนด และหาแนวทางแก้ไขนะค่ะ อย่าให้นานเกินไปจะแก้ไขได้ยากขึ้นค่ะ

    วิธีที่ 3 ตรวจสอบจาก Work By Assinged To ดังรูปด้านล่างค่ะ

    การติดตามจาก Work By Assigned To นั้นดูจำนวนชั่วโมงที่เหลือ ถ้าชั่วโมงยังเหลือเยอะ แสดงว่างานยังเหลืออีกเยอะ ดังนั้นจะต้องไปติดตามรายตัวแล้วค่ะ ว่าเกิดปัญหาอะไรขึ้น วิธีนี้จะดีหน่อยตรงที่ สามารถติดตามในมุมมองของรายบุคคลได้เลยค่ะ

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

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

    จากบทความต่าง ๆ ที่เกี่ยวกับ TFS ผู้นำเสนอ หวังเป็นอย่างยิ่งว่าการนำเสนอ หรือบทความแต่ละบทความจะประโยชน์กับทุกๆ ที่สนใจนะค่ะ…. ^___^ อย่างน้อยก็ได้นำเสนอให้ทุกคนได้รู้จักกับเครื่องมือ TFS ในมุมมองของการบริหารจัดการโครงการนะค่ะ…