Author: cheerasak.s

  • ทำให้แอปพลิเคชันอ่านหรือสร้าง Barcode ได้ด้วย ZXing (“zebra crossing”)

    เนื่องด้วยได้รับโจทย์ให้พัฒนาแอปพลิเคชัน ที่สามารถแสกนบาร์โค้ดได้เมื่อได้ค้นหาดูก็พบชื่อของ Library ที่แรกเริ่มเขียนด้วยภาษา Java และถูก Port ให้รองรับภาษาอื่นๆอีกมากมาย เป็นที่นิยม และเป็น Open Source นั้นคือ ZXing โดยในบทความนี้จะแสดงตัวอย่างวิธีการนำ ZXing.Net.Mobile มาใช้งานร่วมกับ Xamarin.iOS

    ขั้นตอนการนำมาใช้งาน

    ตัวอย่างในบทความใช้ Visual Studio 2019 16.8.0 ติดตั้ง Work Load Xamarin.iOS

    1.สร้างโปรเจคใหม่โดยเลือก Template ชื่อ iOS App (Xamarin) และกำหนดค่าดังรูป

    2. โดยโครงสร้างไฟล์ของโปรเจคมีดังรูป

    3. เปิดไฟล์ Main.storybord สร้าง View และเพิ่มปุ่ม btnScanBarcode (สำหรับ Xamarin.iOS บน Windows จะไม่สามารถแก้ไขไฟล์ .storybord ได้แล้วในเวอร์ชันนี้ ต้องทำบน macOS เท่านั้น)

    4.ติดตั้ง ZXing.Net.Mobile ผ่าน Nuget Package โดยคลิกขวาที่ชื่อโปรเจค เลือก Manage Nuget Packages ค้นหาคำว่า ZXing เลือก Install

    5.สร้าง Controller สำหรับ View ที่ได้สร้างไว้ก่อนหน้านี้ และเพิ่มโค้ดดังนี้

    using System;
using UIKit;
using ZXing.Mobile;

namespace ZXingScanBarcode
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            scanner = new MobileBarcodeScanner(this.View);
            btnScanBarcode.TouchUpInside += async (sender, e) =>
            {
                scanner.UseCustomOverlay = false;
                scanner.TopText = "Hold camera up to barcode to scan";
                scanner.BottomText = "Barcode will automatically scan";

                var result = await scanner.Scan(false);

                HandleScanResult(result);
            };

        }

        void HandleScanResult(ZXing.Result result)
        {
            this.InvokeOnMainThread(() =>
            {
                if (result != null && !string.IsNullOrEmpty(result.Text))
                {
                    //แสดงค่าที่อ่านได้ใน UILabel
                    lblBarcode.Text = result.Text;

                    //เชื่อมต่อ API เพื่อใช้บาร์โค้ดที่อ่านได้ทำอะไรบางอย่าง ตรงนี้             
                }
                else
                {
                    UIAlertController alert = UIAlertController.Create("Scanning Canceled!", string.Empty, UIAlertControllerStyle.Alert);
                    alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
                    PresentViewController(alert, true, null);
                }
            });
        }
    }
}

    6. จากนั้นให้เปิดไฟล์ info.plist เพื่อเพิ่มข้อมูลคำอธิบายการขอสิทธิการใช้กล้อง และส่วนอื่นๆที่ ZXing ต้องการดังรูป (ในส่วนคำอธิบายสามารถปรับเปลี่ยนให้ดีกว่านี้ได้)

    7.เพียงเท่านี้ก็สามารถกด Run เพื่อทดสอบกับอุปกรณ์ที่เชื่อมต่อได้แล้ว (ไม่สามารถทดสอบบน Simulator ได้เนื่องจากต้องใช้กล้อง)

    สำหรับบทความนี้ค่อนข้างจำเพาะเจาะจงกับเครื่องมือที่ใช้พัฒนาแอปพลิเคชัน ที่จะต้องเป็น Xamarin.iOS บน Visual Studio เท่านั้น แต่ด้วยชื่อของ ZXing ท่านที่ใช้เครื่องมืออื่นๆสามารถนำไปค้นหาเวอร์ชัน และวิธีการใช้งานสำหรับเครื่องมือนั้นๆเพิ่มเติมได้ อย่างน้อยก็เป็นการแนะนำให้นักพัฒนาที่ได้อ่านบทความนี้ ได้รู้จัก Library ในงานด้านนี้เพิ่มอีก 1 ตัวครับ

  • ตรวจสอบการสะกดคำด้วย NHunspell (.Net Framework Library)

    สำหรับแอปพลิเคชันที่มีส่วนค้นหาแล้วนั้น หนีไม่พ้นคำถามจากผู้ใช้ว่า ถ้าสะกดคำผิดจะค้นเจอมั้ย (ก็ไม่เจอซิครับ) พร้อมยกตัวอย่างความสามารถในการแก้คำผิดของ Google, Bing ให้ฟัง สำหรับนักพัฒนาตัวคนเดียว หรือทีมงานเล็กๆ ที่ไม่สามารถใช้แนวทาง API แบบต้องมีค่าใช้จ่าย หรือ Machine Learning ที่ต้องใช้ความรู้เฉพาะด้าน ผมก็มี Library ขนาดเล็กที่อาศัยวิธีการทางสถิติ และไฟล์คลังคำศัพท์ (Dictionary) มาใช้งานไปก่อนครับ โดยได้ทำการทดสอบประสิทธิภาพเปรียบเทียบกับ PyThaiNLP, WeCantSpell.Hunspell มาแล้วทั้งในด้านความเร็ว และความถูกต้อง พบว่าดีที่สุด นั้นคือ NHunspell

    ขั้นตอนการนำมาใช้งาน

    ในตัวอย่าง เป็นการนำมาใช้งานร่วมกับ Console Application

    1.เปิด Nuget Manager ด้วยการ คลิกขวาที่ชื่อโปรเจค เลือก Manage Nuget Packages

    2.ค้นหา NHunspell เลือก Install

    3.สร้างโฟลเดอร์สำหรับเก็บไฟล์ Dictionary โดยสามารถดาวส์โหลดได้จาก https://github.com/LibreOffice/dictionaries นำไปวางไว้ที่ [ProjectPath]/bin/Debug

    4.สร้างโฟลเดอร์สำหรับเก็บไฟล์คำตัวอย่าง sentense_list.txt โดยมีบรรทัดละ 1 คำ เพื่อทำการโหลดข้อมูลเข้ามาให้ Library ประมวลผล และเก็บไฟล์ผลลัพธ์ไว้ที่ suggest_result.txt นำไปวางไว้ที่ [ProjectPath]/bin/Debug

    5. จากนั้นก็เขียนโค้ดในไฟล์ Program.cs ดังนี้

    using System;
using System.IO;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using NHunspell;

namespace SpellCheckTest
{
    class Program
    {
        static void Main(string[] args)
        {
            try
            {
                using (var sr = new StreamReader("example_data/sentense_list.txt"))
                {
                    //อ่านรายการคำ
                    string searchterm = sr.ReadToEnd();
                    string[] searchtermArray = searchterm.Split(Environment.NewLine.ToCharArray(), StringSplitOptions.RemoveEmptyEntries);

                    Console.WriteLine("Processing...");

                    using (var sw = new StreamWriter("example_data/suggest_result.txt"))
                    {
                        foreach (string sentense in searchtermArray)
                        {
                            string result = string.Empty;
                            var startTime = System.DateTime.Now.Ticks;

                            //ส่งคำให้ NHunspell ประมวลผล
                            result = SuggestNHunSpell(sentense);

                            var endTime = System.DateTime.Now.Ticks - startTime;
                            TimeSpan elapsedSpan = new TimeSpan(endTime);

                            //เขียนผลการตรวจสอบ และเวลาที่ใช้ลงในไฟล์ผลลัพธ์
                            sw.WriteLine(result);
                            sw.WriteLine(string.Format("{0}", elapsedSpan.TotalSeconds));
                            sw.WriteLine();
                            sw.Flush();
                        }
                    }

                    Console.WriteLine("Process Complete.");
                    Console.ReadKey();
                }
            }
            catch (IOException e)
            {
                Console.WriteLine("The file could not be read:");
                Console.WriteLine(e.Message);
                Console.ReadKey();
            }
        }

        /// <summary>
        /// NHunSpell
        /// </summary>
        /// <param name="sentence"></param>
        /// <returns></returns>
        private static string SuggestNHunSpell(string sentence)
        {
            //ตรวจสอบว่าเป็นภาษาอังกฤษ หรือภาษาไทย
            bool IsEnglish = Regex.IsMatch(sentence.Replace(" ", string.Empty), "[a-zA-Z]");

            string dictPath = IsEnglish ? "dict/en_US.dic" : "dict/th_TH.dic";
            string affixPath = IsEnglish ? "dict/en_US.aff" : "dict/th_TH.aff";
            
            //โหลดไฟล์ Dict และ Affix 
            using (Hunspell hunspell = new Hunspell(affixPath, dictPath))
            {
                //ตรวจสอบว่าสะกดถูกหรือไม่
                if (!hunspell.Spell(sentence))
                {
                    List<string> suggestions = hunspell.Suggest(sentence);
                    if (suggestions.Count > 0)
                    {
                        //คืนค่า รายการคำที่น่าจะเป็นคำสะกดที่ถูกต้อง
                        return sentence + " : " + string.Join(",", suggestions);
                    }
                }
            }

            //หากตรวจสอบว่าสะกดถูกแล้ว บันทึกผลว่า Correct
            return sentence + ": Correct";
        }
    }
}

    6.จากนั้นทำการ Run แบบ Debug จะปรากฎหน้าจอ Command Line แสดงข้อความ Processing… รอจนเห็นคำว่า Process Complete. แสดงว่าทำการประมวลผลเสร็จแล้ว

    7.ผลลัพธ์จะถูกบันทึกลงในไฟล์ suggest_list.txt ดังรูป

    ในตัวอย่างนี้ เป็นเพียงโปรเจคสำหรับทดสอบการเรียกใช้งาน และดูผลลัพธ์ของ Library เท่านั้น การนำไปใช้งานร่วมกับระบบยังต้องการ การประยุกต์ให้เหมาะสมกับแต่ละระบบ แต่ก็หวังว่าจะเป็นประโยชน์กับคนที่กำลังหาเครื่องมือที่ใช้ตรวจสอบการสะกดคำให้กับระบบของตัวเองอยู่ไม่มาก ก็น้อยครับ

  • สร้าง Web API สำหรับส่ง iOS Push Notification ด้วย dotAPNS

    ความสามารถของแอปพลิเคชันในปัจจุบันที่จะขาดไม่ได้เลย อย่าง Push Notification นั้น สำหรับนักพัฒนาชาว .Net แน่นอนครับว่ามี Library มากมายให้เลือกใช้ ในบทความนี้ผมจะเล่าวิธีการหนึ่ง ที่ได้เลือกใช้เพื่อตอบโจทย์การเชื่อมต่อแอปพลิเคชันกับหลายๆฐานข้อมูล การที่เราจะไป Deploy ตัวส่ง (Sender) ไว้ทุกๆ Server นั้นในด้าน Compatibility, Configuration, Maintain นั้นมีปัญหาแน่นอน เพราะข้อกำหนดของ Apple นั้นมีหลายอย่างพอสมควร ก่อนที่ตัวส่งของเรา จะได้รับอนุญาตุให้ส่งข้อความไปหาผู้ใช้ได้ ดังนั้นการติดตั้ง Sender ในแบบ Web API ไว้เพียงที่เดียว แล้วให้ทุก Client ที่ต้องการส่งมาเรียกใช้งาน จึงเป็นการลดปัญหาข้างต้นได้

    สิ่งที่จะต้องมี

    1.KeyID, BundleID, TeamID ทั้งสามค่านี้สามารถดูได้จาก appstoreconnect ในรายละเอียดของแอปพลิเคชัน

    2.Push Notification Certification (.p8) ในบทความนี้จะใช้วิธีการส่งแบบ Token Based ซึ่งมีความยืดหยุ่นและบำรุงรักษาได้ง่ายกว่า แบบ Certification Based แต่อย่างไรก็ตามยังคงต้องมี Certificate สำหรับการยืนยันตัวตนประกอบการสร้าง Token อยู่ดี ซึ่งสามารถเข้าไปสร้างได้ที่ developer.apple.com > Account > Key เลือกสร้างแบบ
    Apple Push Notifications service (APNs)

    3. Web Server ที่สามารถเชื่อมต่อด้วย HTTPS, HTTP/2 ได้

    สร้างโปรเจค Web API

    ในบทความนี้ใช้ Visual Studio 2019 Version 16.8.0

    1.ไปที่ File > New > Project เลือกเทมเพลต ASP.NET Web Application (.Net Framework) กดปุ่ม Create

    2.เลือกรูปแบบโปรเจคเป็นแบบ Web API กดปุ่ม Create

    3.เมื่อสร้างโปรเจคสำเร็จจะได้ไฟล์ต่างๆดังรูป (Main.aspx, MainController.cs สร้างเองภายหลัง สามารถตั้งชื่ออื่นๆได้)

    4.ทำการเพิ่ม Library dotAPNS ด้วย Nuget Manager โดยการคลิกขวาที่โปรเจค เลือกเมนู Manage Nuget Packages ค้นหาด้วยคำว่า dotAPNS จากนั้นกดปุ่ม Install

    5. ในไฟล์ MainController.cs ทำการ using dotAPNS มาใช้งาน จากนั้นสร้าง Method ชื่อ SendPush (ไม่จำเป็นต้องชื่อนี้) โดยโค้ดการสร้าง Token และส่ง Push Notification ทั้งหมดมีดังนี้

    using System.Net.Http;
using System.Web.Http;
using System.Threading.Tasks;
using System.Configuration;
using dotAPNS;
using System.Web;
using System;

namespace APNsService.Controllers
{
    [RoutePrefix("api")]
    public class MainController : ApiController
    {
        [Route("SendPush")]
        [AcceptVerbs("GET", "POST")]
        public async Task<ApnsResponse> SendPush(string title, string body, string token, string category)
        {
            try
            {
                //อ่านค่า CertContent หรือ CertFilePart, BundleID, KeyID,TeamID มาจาก ไฟล์ web.config
                string certContent = ConfigurationManager.AppSettings["CertContent"];
                string certFilePath = ConfigurationManager.AppSettings["CertFilePath"];
                string bundleId = ConfigurationManager.AppSettings["BundleId"];
                string keyId = ConfigurationManager.AppSettings["KeyId"];
                string teamId = ConfigurationManager.AppSettings["TeamId"];

                //สร้าง Option สำหรับ Token
                var options = new ApnsJwtOptions()
                {
                    CertContent = certContent,
                    BundleId = bundleId,
                    KeyId = keyId,
                    TeamId = teamId
                };

                //สร้าง Token
                var apns = ApnsClient.CreateUsingJwt(new HttpClient(new WinHttpHandler()), options);

                //สร้าง Push Object
                var push = new ApplePush(ApplePushType.Alert)
                    .AddAlert(HttpUtility.UrlDecode(title), HttpUtility.UrlDecode(body))//ข้อความแจ้งเตือน
                    .AddBadge(0)//แสดงจำนวนแจ้งเตือนที่หน้าแอปพลิเคชัน
                    .AddCategory(category)//กำหนดกลุ่มของการแจ้งเตือน
                    .AddToken(token);//token
                
                //ส่ง Notification
                return await apns.Send(push);
            }
            catch (Exception ex)
            {
                return ApnsResponse.Error(ApnsResponseReason.Unknown, ex.Message + ex.StackTrace);
            }
        }
    }
}

    จากโค้ดด้านบน สามารถทราบว่าส่วนไหนทำหน้าที่อะไรได้จาก Comment ครับ เพียงเท่านี้ก็สามารถ Publish และ Deploy Web API บน Server เพื่อทดสอบการใช้งานได้แล้ว อย่างไรก็แล้วแต่ Web API ดังกล่าวยังต้องการ การปรับแต่งให้เหมาะสมกับระบบของนักพัฒนาแต่ละท่าน แต่โดยขั้นตอนหลักๆก็มีเพียงเท่านี้ครับ

    6.หน้าฟอร์ม และตัวอย่างโค้ดเรียกใช้งาน (อยู่ในหน้า Main.aspx,Main.aspx.cs เพื่อใช้ทดสอบการส่ง)

    using System;
using System.IO;
using System.Configuration;
using System.Net;
using Newtonsoft.Json;

namespace APNsService
{
    public partial class Main : System.Web.UI.Page
    {
        string token = string.Empty;
        string baseUrl = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            token = ConfigurationManager.AppSettings["apiToken"].ToString();
            baseUrl = string.Format("{0}://{1}{2}/", Request.Url.Scheme, Request.Url.Authority, Request.ApplicationPath.TrimEnd('/'));
        }

        protected void btnSend_Click(object sender, EventArgs e)
        {
            string url = string.Format("{0}api/SendPush?title={1}&body={2}&category={3}&token={4}", baseUrl, txtTitle.Text,txtBody.Text,txtCategory.Text,txtToken.Text);

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            request.Method = "GET";
            request.ContentType = "application/json";
            request.Headers.Add("token", token);

            try
            {
                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                using (Stream responseStream = response.GetResponseStream())
                {
                    StreamReader reader = new StreamReader(responseStream, System.Text.Encoding.UTF8);
                    string resultJSON = reader.ReadToEnd();
                    var result = JsonConvert.DeserializeObject<APNsResult>(resultJSON);
                    txtResult.Text = resultJSON;
                    txtURL.Text = url;
                    btnSend.Focus();
                }
            }
            catch (Exception ex) 
            {
                txtResult.Text = ex.Message;
            }
        }

    }

    public class APNsResult
    {
        public bool IsSuccess { get; set; }
        public int Reason { get; set; }
        public string ReasonString { get; set; }
    }
}

    สังเกตุว่าในส่วนของการส่งจาก Client อื่นๆผ่าน Web API นั้นต้องการเพียงแค่ HttpWebRequest, Newtonsoft.Json เท่านั้นทำให้มีขนาดเล็ก และลดปัญหาความเข้ากันได้ในการติดตั้ง Client ไปได้อย่างแน่นอนครับ

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

  • การติดตั้งเว็บไซต์ ที่พัฒนาด้วย ASP.NET บน IIS

    สำหรับนักพัฒนาเว็บแอปพลิเคชัน ที่จะต้องทำหน้าที่ครบวงจร (Full Stack Programer) สิ่งที่ต้องทำหลังจากพัฒนาเว็บขึ้นมาเสร็จแล้ว คือการติดตั้งบนเซิร์ฟเวอร์ (Deploy) ในบทความนี้จะเล่าขั้นตอนหลักๆ ในการติดตั้งเว็บไซต์ ที่พัฒนาด้วย ASP.NET (ไม่ว่าจะพัฒนาด้วย .Net Framework เวอร์ชันไหนก็ขั้นตอนเดียวกัน เปลี่ยนแปลงแค่ .Net Runtime ที่ใช้งาน) บนวินโดวส์เซิร์ฟเวอร์ โดยใช้ IIS (Internet Information Services) ซึ่งหน้าตาอาจเปลี่ยนแปลงไปตามเวอร์ชันของ IIS แต่ขั้นตอนการตั้งค่ายังคงคล้ายคลึงกัน

    Publish เว็บไซต์ (กรณีใช้ Visual Studio)

    1.คลิกขวาที่ชื่อโปรเจ็ค เลือก Publish

    2.จะได้หน้าจอเลือกประเภทในบทความนี้เลือกเป็น Folder เพื่อใช้วิธีการ Deploy แบบนำไฟล์ไปวางที่ Server เอง ดังรูป

    3. เลือกที่ตั้งไฟล์ กด Finish

    4. ตั้งค่าการ Publish จากในรูปคือให้ลบไฟล์ที่มีอยู่ก่อน และใช้รูปแบบ Release ในการ Compile

    5. ตัวอย่างไฟล์ที่ทำการ Publish เสร็จแล้ว

    6. ทำการ Copy ไฟล์ทั้งหมดไปวางใน wwwroot บน Server

    ติดตั้ง Component ต่างๆ

    1.ในบทความนี้ใช้ Windows Server 2016 Datacenter เป็นตัวอย่าง ซึ่งการติดตั้ง Component ต่างๆ สามารถทำได้ผ่าน Server Manager > Manage > Add Roles and Features ได้เกือบทั้งหมด ยกเว้น Runtime อื่นๆที่เว็บไซต์มีการนำมาใช้งานเพิ่มเติม

    2. ติดตั้ง IIS , ASP.NET และ Component ที่เกี่ยวข้อง โดยไปที่ Server Role > Web Server (IIS) และทำการเลือก Component ต่างๆดังรูป จากนั้นกด Next

    3. ติดตั้ง .Net Framework เวอร์ชันที่เว็บไซต์ใช้งาน ในตัวอย่างใช้ .Net Framework 4.6 โดยสามารถเลือกจาก เมนู Features ดังรูป

    4. เท่านี้ก็จะมี Component ที่จำเป็นในการติดตั้งเว็บไซต์ที่พัฒนาด้วย ASP.NET แล้ว

    สร้าง และตั้งค่า Application Pool

    1.เปิดโปรแกรม IIS โดยไปที่ Start > Windows Administrative Tools > Internet information Services (IIS) จะได้หน้าจอดังรูป

    2. เลือกเมนู Application Pool จากนั้นคลิก Add Application Pool จะได้หน้าจอการตั้งค่าดังรูป โดยที่ .Net CLR Version จะแยกเป็น 2.0.xxx และ 4.0.xxx โดยหากต้องการใช้งาน .Net Runtime 3.5 – 4.x สามารถเลือกเป็น 4.0.x ได้ทั้งหมด

    3. เมื่อสร้างสำเร็จ จะมีรายการ Application Pool ที่เราสร้างดังรูป

    สร้าง และตั้งค่าเว็บไซต์ ทดสอบเรียกใช้งาน

    1.ในการสร้างไซต์นั้น หากบน Server นั้นยังไม่มีเว็บไซต์ใดๆ สามารถใช้ Default Web Site ได้เลย แต่ถ้ามีเว็บไซต์อื่นๆอยู่ก่อนแล้ว จะต้องพิจารณาว่าจะให้บริการในแบบใด เป็น Application ที่อยู่ภายใต้เว็บไซต์เดิม หรือแยกออกมาเป็นอีก URL ในส่วนนี้ บทความจะไม่ลงรายละเอียด โดยจะแสดงวิธีการเพิ่ม ไซต์ใหม่ภายใต้ URL เดิมที่มีอยู่แล้วโดยเลือกเมนู Add Website จะได้หน้าจอการตั้งค่าดังรูป

    2. จากนั้นทำการตั้งค่า Default Document โดยคลิกเลือกที่ชื่อเว็บไซต์ เลือกไฟล์ที่ต้องการกำหนดเป็นหน้าแรกของเว็บไซต์

    3. ตั้งค่าต่างๆของเว็บไซต์ ซึ่งขึ้นอยู่กับแต่ละเว็บไซต์ว่ามีการใช้งาน Feature ใดบ้าง ดังรูป (อีกช่องทางนึงคือการแก้ไขไฟล์ web.config โดยตรง)

    4. ทำการทดสอบเรียกใช้งาน โดยคลิกที่เมนู Browse เพื่อเรียกดูแบบ Localhost หรือหากมี URL อยู่แล้วสามารถเรียกดูผ่าน URL/ApplicationName ดังรูป

    ในขั้นตอนติดตั้งชิ้นงานจริง แน่นอนว่าอาจมีขั้นตอนเพิ่มเติมตามแต่ละเว็บไซต์ และอาจพบปัญหาต่างๆ แตกต่างกันไปตามเวอร์ชันของวินโดวส์, IIS, .Net Runtime แต่อย่างไรก็ดีหวังว่าบทความนี้จะเป็นไกด์ไลน์ ให้เห็นภาพขั้นตอนคร่าวๆในการติดตั้งเว็บไซต์หนึ่งๆ สำหรับผู้เริ่มต้นครับ

  • App Analytics: เครื่องมือจัดเก็บวิเคราะห์สถิติและเฝ้าระวัง แอพลิเคชั่นบน iOS

    นักพัฒนาหลายท่านโดยเฉพาะ นักพัฒนาเว็บ น่าจะคุ้นเคยกับบริการเก็บข้อมูลและวิเคราะห์ สกิติเว็บไซด์อย่างเช่น Google Analytic เป็นอย่างดี ซึ่งในปัจจุบันถือว่ามีความจำเป็นมากที่นักพัฒนาต้องบอกได้ว่า ผู้ใช้ของเรามีจำนวนเท่าไหร่ เกิดข้อผิดพลาดมากน้อยเพียงใด และช่วงเวลาใดที่มีการใช้งานเยอะ เพื่อเตรียมทรัพยากรให้เพียงพอต่อการให้บริการ รวมถึงการกำหนดเวลาปิดระบบเพื่อบำรุงรักษา ได้อย่างมีประสิทธิภาพ

    ในส่วนของ แอพลิเคชั่นบนระบบปฏิบัติการ iOS เองก็มีเครื่องมือที่ชื่อว่า App Analytics ให้ใช้งาน โดยที่นักพัฒนาไม่ต้องทำอะไรเพิ่มเติม เพียงแค่แอพพลิเคชั่นของท่านอยู่ในสถานะ พร้อมให้ใช้งาน (Ready For Sale) ก็สามารถเข้าใช้งาน App Analytics ได้ทันที โดยมีขั้นตอน และการแปลผลดังนี้

    1. เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account
    2. เลือกเมนู App Analytics
    3. เมื่อเข้าไปยังหน้าแรกจะมีรายการแอพพลิเคชั่นของเราแสดงอยู่ พร้อมข้อมูลเบื้องต้น ในระยะเวลา 1 เดือนล่าสุด (สามารถเปลี่ยนช่วงเวลาได้) โดยข้อมูลที่แสดงอยู่ประกอบไปด้วย
      1. Impressions : จำนวนครั้งที่แอพพลิเคชั่นของเราปรากฏให้ผู้ใช้เห็นเช่น อยู่ในผลการค้นหา, แอพแนะนำ, Top Chart หรือเมื่อผู้ใช้เปิดดูหน้าข้อมูลแอพพลิเคชั่นของเรา เพื่อใช้ดูว่าจำนวนการดาวส์โหลด เมื่อเทียบกับจำนวน Impressions แล้ว ความสนใจในแอพของเรามีมากน้อยเพียงใด
      2. App Units: จำนวนเครื่องที่ติดตั้งแอพพลิเคชั่นของเราอยู่
      3. Sales: จำนวนเงินรวม ที่ขายได้
      4. Sessions: จำนวนการเปิดใช้งาน
      5. Crashes: จำนวนข้อผิดพลาดที่เกิดขึ้นขณะใช้งาน
    4. เมื่อคลิกเลือกที่รายการ แอพลิเคชั่น จะแสดงข้อมูล Impressions, Product Page Views, App Units, In-App Purchases, Sales, Sessions, Active Devices, Crashes ในรูปแบบกราฟ อยู่ส่วนบนสุด
    5. ถัดมาจะเป็น Info graphic แยกตามประเทศ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices เป็นต้น
    6. ล่างสุดจะเป็นกราฟวงกลม แยกตามอุปกรณ์ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices ได้เช่นกัน
    7. หากต้องการดูข้อมูลในมุมมองอื่นๆ หรือกำหนดเงื่อนไขเพิ่มเติมเพื่อดูในรูปแบบกราฟเส้น สามารถเลือกเมนู Metrics และกำหนดค่าต่างๆได้ตามต้องการ
    8. จากหน้าจอกราฟแบบ Metrics สามารถ Export ออกเป็น Excel ได้โดยกดปุ่ม

  • Test Flight: อัพโหลดแอพลิเคชั่นขึ้นทดสอบบน App Store โดยผู้ใช้จริง

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

    1. เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account
    2. เลือกเมนู My Apps
    3. จะเข้าสู่หน้าจอจัดการ หากยังไม่มี Application Record ต้องทำการสร้างก่อน โดยคลิกที่ปุ่ม จากนั้นจะได้หน้าจอสำหรับป้อนข้อมูลแอพพลิเคชั่นของเรา กรอกข้อมูลให้ครบถ้วน
    4. จากนั้นกรอกข้อมูลอื่นๆ อัพโหลดภาพตัวอย่างตามข้อกำหนดของ Apple ให้ครบถ้วน (รายละเอียดในส่วนนี้สามารถอ่านเพิ่มเติมจาก https://developer.apple.com/app-store/review)
    5. เมื่อสร้าง Application Record เรียบร้อย เลือกที่ไอคอนแอพลิเคชั่นของเรา จะได้หน้าจอดังรูป
    6. เลือกเมนู TestFlight จะแสดงหน้าจอรายการ Build (ไฟล์ ipa ของแอพลิเคชั่น) ที่เราได้อัพโหลดไว้กรณีไม่ปรากฏดังตัวอย่าง แสดงว่าไม่มี Build ที่อยู่ในสถานะที่จะใช้งาน TestFlight ได้ให้ทำการอัพโหลดใหม่
    7. เมื่ออัพโหลดไฟล์ IPA เรียบร้อยแล้ว จะปรากฏ Build ที่สามารถเปิดให้ทดสอบได้ ดังรูป
    8. จัดการข้อมูลผู้ทดสอบโดยเลือกเมนู All Testers ด้านซ้ายมือ ในส่วนนี้สามารถทำการลบรายการผู้ทดสอบได้ โดยการกดปุ่ม Edit เลือกรายการที่ต้องการลบ จะปรากฏเมนูปุ่ม Remove ให้สามารถลบได้
    9. หากต้องการเพิ่มผู้ทดสอบจะต้องเลือกเมนู iTunes Connect Users (อีเมลที่ได้รับการเพิ่มเป็นสมาชิกของทีมใน Apple Developer Account) หรือ External Testers (อีเมลอื่นๆ) โดยสามารถกดปุ่ม จากนั้นสามารถเลือกได้ว่าจะเพิ่มรายบุคคล หรือโหลดจากไฟล์ CSV
    10. เมื่อมีรายการผู้ทดสอบครบถ้วนแล้วให้กลับไปที่เมนู Build คลิกเลือก จะปรากฏหน้าจอสำหรับเลือกผู้ทดสอบที่ต้องการให้ทดสอบ Build นี้ โดยสามารถเพิ่มจากชื่อกลุ่ม หรือ รายบุคคลก็ได้
    11. จากนั้นกรอกข้อมูลสำหรับทำ External Testing โดยคลิกที่เมนู Test Information กรอกข้อมูลให้ครบถ้วน
    12. เมื่อเสร็จกระบวนการข้างต้น ผู้ทดสอบที่เป็นสมาชิกภายใน (อีเมลที่ลงทะเบียนเป็น Member ของ Apple Developer Account) จะได้รับอีเมล Invite สามารถทดสอบได้ทันที ส่วนผู้ทดสอบภายนอกจะต้องรอให้ผ่านกระบวนการรีวิวจากทาง Apple 
    13. จากนั้นแจ้งให้ผู้ใช้ดาวส์โหลด TestFlight App เพียงเท่านี้ก็สามารถโหลดแอพของเรา และทดสอบการใช้งานแอพบนเครื่องที่ใช้งานจริงได้แล้วครับ

     

     

  • Adaptive Layout สำหรับแอปพลิเคชันบนระบบปฏิบัติการ iOS

    สำหรับหัวข้อนี้สามารถนำไปใช้ได้ทั้งกับนักพัฒนาที่ใช้ Xcode และ Xamarin.iOS นะครับ แต่ภาพตัวอย่างที่ใช้ประกอบในบทความจะมาจาก Xamarin.iOS บน Visual Studio ครับ

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

    ข้อมูลจาก http://iosres.com/

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

    เมื่อแอปพลิเคชันของเราจำเป็นต้องทำงานได้บนทุกอุปกรณ์  ต้องทำอย่างไร บทความนี้จะสรุปสิ่งที่ต้องรู้และศึกษาเพิ่มเติม เกี่ยวกับการทำ Adaptive Layout หรือ รูปแบบการแสดงผลที่ปรับเปลี่ยนไปตามขนาดหน้าจอได้เอง

     

    Unified Storyboard

    เล่าวิวัฒนาการของวิธีการออกแบบ UI ของ iOS แอปพลิเคชันซักหน่อยนะครับ โดยแต่เริ่มนั้นเนื่องจากมีเพียงแค่ iPhone ที่ใช้ระบบปฏิบัติการ iOS เครื่องมือของทาง Apple สำหรับใช้ออกแบบหน้าจอเรียกว่า Interface Builder ซึ่งปัจจุบันถูกผนวกรวมมากับ Xcode เรียบร้อยแล้ว ใช้ไฟล์ .xib ในการออกแบบ ลักษณะจะเป็น 1 หน้าจอ 1 ไฟล์  ใช้ไฟล์เพียงชุดเดียว แต่เมื่อมี iPad ซึ่งมีขนาดหน้าจอที่แตกต่างออกไป นักพัฒนาก็ต้องสร้างไฟล์สำหรับ iPad อีกชุด

    ต่อมาไฟล์สำหรับออกแบบ UI ที่ชื่อว่า Storyboard  ก็ถูกนำมาใช้งาน เป็นการออกแบบในลักษณะที่ สามารถวางหน้าจอ หลายๆ หน้าจอ และกำหนดความเชื่อมโยง โดยใช้ segue เป็นตัวเชื่อมการแสดงผล แต่ก็ยังต้องมี ไฟล์ Storyboard สำหรับ iPhone และ iPad แยกกันอยู่ดี

    เมื่อมาถึง iOS 8.0 ความหลากหลายของขนาดหน้าจอมีมากขึ้นแม้แต่ iPhone เอง ก็มีหลายขนาด ตัว Unified Storyboard จึงถูกนำมาใช้เพื่อแก้ปัญหานี้ ทำให้ออกแบบ Storyboard เพียงไฟล์เดียวสามารถใช้งานได้กับอุปกรณ์ทุกขนาดหน้าจอ โดยใช้ร่วมกับเทคโนโลยีอีก 2 อย่างคือ Auto Layout และ Size Class

    วิธีการใช้งาน

    1. เมื่อสร้างโปรเจ็คจะมีไฟล์ .storyboard เปิดไฟล์ จากนั้นในหน้าต่าง Property เลือกใช้งาน Use Auto Layout, Use Size Classes

    2. ด้านบนของ Interface Builder จะปรากฏเมนูที่เกี่ยวกับการทำ Unified Storyboard ดังรูป

    3. ทำการกำหนดค่าใน info.plist เพื่อใช้ไฟล์ Storybord ดังกล่าวเป็น Main interface ของทั้ง iPhone และ iPad

    4. ตอนนี้ไฟล์ Storyboard ของเราก็พร้อมใช้งาน รองรับการออกแบบโดยมีความสามารถ Auto Layout และ Size Class ให้ใช้งานแล้วครับ

     

    Auto Layout

    แนวคิดหลักของ Auto Layout คือการตั้งเงื่อนไขเพื่อกำหนดตำแหน่งและขนาดของ Control ที่อยู่บนหน้าจอ เพื่อให้สามารถปรับตำแหน่งให้เหมาะสมกับขนาดหน้าจอที่เปลี่ยนไปได้ ซึ่งเรียกว่า Constraint มีหลายชนิดด้วยกันดังนี้

    1. Size Constraints คือการกำหนดขนาด โดยระบุ ความกว้าง ความสูง โดยส่วนตัวผมคิดว่าแบบนี้ค่อนข้างได้ใช้น้อยครับ เพราะเหมือนกับเรากำหนด Property ความกว้าง ความสูง ปกติ เหมาะใช้กำหนดแค่ความกว้าง หรือ ความสูงอย่างใดอย่างหนึ่งผสมกับ Constraints แบบอื่นๆ
    2. Center Constraints คือการกำหนดให้อยู่ในจุดกึ่งกลาง โดยอ้างอิงจากขนาดของ View ที่เปลี่ยนไป จะทำให้อยู่ในตำแหน่งกลางเสมอ อันนี้ก็ได้ใช้งานบ่อยครับ
    3. Combinational Constraints คือการอ้างอิงตำแหน่งของ Control จาก เส้นขอบทั้ง 4 ด้าน และ Control อื่นๆ ที่อยู่ใน View หรือแม้กระทั่ง Toolbar, Tab bar, Header, Footer ของ View อันนี้ผมใช้เยอะสุดครับ

    วิธีการใช้งาน

    1. เมื่อได้เปิดใช้งาน Auto Layout ในขั้นตอนการสร้าง Unified Storyboard แล้วนั้น จะปรากฏ Toolbar เมื่อต้องการใช้งาน ให้คลิกเลือกที่ Control ที่ต้องการ จากนั้นคลิกที่ไอคอน เพิ่ม ลบ หรืออัพเดทเฟรม ตามลำดับ โดยที่การเพิ่ม Constraint โดยวิธีการนี้จะเพิ่ม 2 ตำแหน่ง คือ top/bottom + left/right หาก Control นั้นไม่ได้มี intrinsic size (Control ที่จำกัดขนาดกับ View ที่แสดงผล นักพัฒนาไม่สามารถแก้ไขได้) ก็จะเพิ่ม Constraint ระบุ width + height ให้ด้วย

    2. จะเห็นได้ว่าการเพิ่ม Constraint โดยใช้ Toolbar นั้น ไม่สามารถตอบสนองการใช้งานได้ครบถ้วน เราสามารถเพิ่ม Constraint ทีละตำแหน่งได้เอง โดยดับเบิ้ลคลิกที่ Control ให้มีลักษณะ ดังรูป

    3. จากนั้นสามารถคลิกแล้วลาก ไปยังตำแหน่งอ้างอิง ซึ่งจะเปลี่ยนไปตามแต่ละด้านของ Control

    4. เมื่อเพิ่มสำเร็จสามารถตรวจสอบดูได้ที่ Property > Layout

    5. ในขณะที่เราเพิ่ม Constraint นั้น อาจจะสังเกตุได้ว่า กรอบของ Control เป็นสีส้ม ซึ่งหมายถึง Constraint ที่เรากำหนดไปนั้นยังไม่สมบูรณ์ หรือมีความขัดแย้งกัน ทำให้ไม่สามารถแสดงผลได้ถูกต้อง เรียกว่า Error นั้นเอง แนะนำว่าให้เพิ่มจนครบทุกด้าน และให้มี Constraint  เพียงชนิดเดียวในแต่ละด้านครับ ถ้ายัง Error อยู่ ให้ลองเช็คจุดอ้างอิง ถ้าเป็น Control ด้วยกัน Control ที่ใช้อ้างอิงจะต้องไม่ Error ครับ ไม่เช่นนั้นจะพากัน Error ทั้งหมด

    6. หากเพิ่ม Constraint สมบูรณ์กรอบจะเป็นสีน้ำเงิน แบบนี้ครับ และจะมีเส้นไกด์สีน้ำเงินเล็กๆ บอกตำแหน่งอ้างอิงอยู่ด้วย

    7. ทำการทดสอบแอปพลิเคชัน ด้วย Simulator ที่ขนาดหน้าจอต่างๆ ว่าแสดงผลถูกต้องหรือไม่

     

    Size Class

    เพื่อให้การออกแบบโดยใช้เพียงไฟล์ Storyboard เดียวใช้งานได้กับหน้าจอทุกขนาด ยังมีปัญหาในเรื่องของ การแสดงผลในแนวตั้ง และแนวนอน ที่การกำหนด Constraint ตอนทำ Auto Layout ไม่สามารถทำให้แสดงผลได้ถูกต้องซะทีเดียว จำเป็นต้องมีการแบ่งประเภทหน้าจอแสดงผล โดยใช้ Grid ขนาด 3×3 ซึ่งจะจำแนกได้เป็น 9 แบบ ดังรูป

    โดยจะมีคำเรียกขนาด 3 ชนิด คือ Compact, Any, Regular จากเล็กไปใหญ่ตามลำดับ  เมื่อนำเอา ความกว้าง และ ความสูง ทั้ง 3 แบบมาใช้ร่วมกันก็จะเป็นตัวแทนของ หน้าจอแบบต่างๆของทุกอุปกรณ์ที่ใช้ระบบปฏิบัติการ iOS ดังนี้ครับ

    ภาพประกอบจาก https://developer.apple.com/reference/uikit/uitraitcollection

    สังเกตุว่าจะมี แค่ 6 ขนาดที่เทียบกับอุปกรณ์จริงๆได้ ส่วนอีก 3 ขนาด ที่มีความกว้าง ความสูง แบบ Any ผสมอยู่ก็เพื่อใช้กับการออกแบบที่ไม่จำเป็นต้องระบุ Size Class เพราะสามารถใช้ Constraint ร่วมกันได้นั้นเองครับ

    วิธีการใช้งาน

    1. เมื่อต้องการติดตั้ง Size Class ใดๆเพิ่มเติม ให้เลือก Control ที่ต้องการจากนั้นในหน้าต่าง Property เลื่อนลงไปที่ Stretching คลิกที่รูปไขควง

    2. จะมีตัวเลือก Compact, Any, Regular ให้เลือก 2 ลำดับ โดยตัวเลือกลำดับแรกคือชนิดความกว้าง ลำดับที่ 2 คือชนิดความสูง

    3. เลือก Size Class ที่ต้องการออกแบบ จาก Toolbar

     

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

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

    https://developer.xamarin.com/guides/ios/platform_features/introduction_to_Unified_Storyboards/

    https://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/

  • Xamarin.iOS : ติดตั้งซอฟแวร์ และสร้างโปรเจ็ค

    การพัฒนาแอปพลิเคชันสำหรับระบบปฏิบัติการ iOS นั้นมีหลายช่องทางในปัจจุบัน โดยไม่นานมานี้ ทางไมโครซอฟ ได้เข้าซื้อ Xamarin ซึ่งเป็นซอฟแวร์ สร้างแอปพลิเคชันสำหรับ Android, iOS, Windows Phone โดยใช้ภาษา C# โดยมีแนวคิดแชร์โค้ดในส่วน Logic ระหว่างแพลตฟอร์มได้ (แต่ส่วน User Interface และ Controller ต้องเขียนแยกกัน) ซึ่งเดิมทีซอฟแวร์ตัวนี้มีค่าใช้จ่ายในการนำมาใช้งานพอสมควร แต่ปัจจุบัน สามารถใช้ร่วมกับ Visual Studio ได้ตั้งแต่รุ่น Community ซึ่งฟรี ทำให้มีความน่าสนใจในการนำมาใช้งานสำหรับ ทีมพัฒนาระบบ ที่ใช้ Visual Studio ร่วมกับ ภาษา C# อยู่แล้วเป็นอย่างมาก

    สิ่งที่ต้องมี สำหรับการใช้ Xamarin พัฒนา iOS แอปพลิเคชัน
    1.เครื่องคอมพิวเตอร์ที่ติดตั้ง macOS ได้ เช่น MacBook , MAC Pro, iMAC เป็นต้น หรือหากท่านใดสามารถสร้าง Virtual Machine ด้วย VirtualBox หรือ VMware แล้วติดตั้ง macOS ได้ ก้สามารถใช้งานได้เช่นกัน
    2.Apple ID ที่ลงทะเบียน Apple Developer Account ไว้เรียบร้อยแล้ว (มีค่าใช้จ่ายรายปีประมาณ 3000 บาท)
    3.หากต้องการใช้ Visual Studio เวอร์ชันสำหรับ Windows ในการพัฒนาก็ต้องมี เครื่องคอมพิวเตอร์อีกเครื่องที่ติดตั้งระบบปฏิบัติการ Windows (สำหรับท่านที่ต้องการใช้เครื่องเดียว สามารถใช้ Xamarin Studio หรือ Visual Studio For Mac ได้ เท่าที่ผมทดลองใช้งานก็มีความพร้อมระดับใช้งานได้ แม้จะเป็นเวอร์ชั่น Preview ในขณะที่ทดลองก็ตาม)

    ติดตั้ง Xamarin และ ตั้งค่าบน macOS
    1.ติดตั้ง Xcode จาก App Store ให้เรียบร้อย เนื่องจากตัว Xamarin จำเป็นต้องใช้งานทั้ง iOS SDK และ Simulator ที่ติดตั้งมาพร้อมกับ Xcode ในการ Build และ Run เพื่อทดสอบแอปพลิเคชันของเรา
    2.ใช้ Apple Developer Account สร้าง Provisional Profile ได้ที่ https://developer.apple.com/account/ios/certificate จากนั้นทำการดาวน์โหลดและติดตั้งให้เรียบร้อย
    3.ดาวน์โหลดตัวติดตั้ง ที่ https://www.xamarin.com/download ใส่ข้อมูล ชื่อ, อีเมล, หน่วยงาน แล้วเลือกว่ามีการติดตั้ง Visual Studio ไว้แล้วหรือไม่ เลือกยอมรับข้อตกลง เลือก Download Xamarin Studio for OS X
    4.เมื่อเริ่มติดตั้งจะมีหน้าจอให้ยอมรับข้อตกลง และแสดงความคืบหน้าในการติดตั้ง รอจนแจ้งผลติดตั้งเสร็จสิ้น
    5.ตั้งค่าเปิดใช้งาน Remote Login สำหรับการเชื่อมต่อจากเครื่องพัฒนาอื่นไปที่ System Preferences > Sharing
    6.เสร็จเรียบร้อยในฝั่ง macOS

    ติดตั้ง Xamarin บน Windows เพื่อใช้งานร่วมกับ Visual Studio
    1.ดาวน์โหลดตัวติดตั้ง Visual Studio เวอร์ชั่นที่ต้องการใช้งาน สามารถใช้ได้ทั้ง Community, Professional, Enterprise (ในขณะที่เขียนผมใช้เวอร์ชั่น Enterprise 2015 with update 3)
    2.เลือกติดตั้งแบบ Custom

    3.ติดตั้ง Cross Platform Mobile Development Plugin ที่ตัวเลือกจะมีวงเล็บไว้ให้แล้วว่าเป็น Xamarin เลือกให้เรียบร้อยกด Next
    4.รอจนกระบวนการติดตั้งสำเร็จ จะมีหน้าจอแสดงผลการติดตั้งเป็นอันเสร็จเรียบร้อย
    5.การใช้งาน Xamarin จำเป็นต้องอัพเดทให้ทันสมัยอยู่เสมอ เนื่องจากตัวซอฟแวร์จะมีการปรับรุ่นให้รองรับ iOS ที่ออกมาใหม่ๆ อยู่เสมอรวมทั้งการแก้ปัญหาบัคต่างๆ ด้วย โดยไปที่ Tools > Options > Xamarin แล้วกด Check Now จะทำการดาวน์โหลดและติดตั้งให้อัตโนมัติ

    6.หากมี Visual Studio ติดตั้งอยู่แล้ว ก็ยังสามารถใช้วิธีนี้ได้ครับ เพียงเปิด Installer ขึ้นมาใหม่ แล้วเลือก Modify

    สร้างโปรเจ็ค และการใช้งานด้านต่างๆ
    1.เปิด Visual Studio เลือก New Project > Visual C# > iOS จากตรงนี้ เราจะต้องเลือกว่า แอปพลิเคชันที่เรากำลังจะทำรองรับอุปกรณ์กลุ่มไหนระหว่าง iPhone, iPad, Universal (ใช้งานได้ทั้ง iPhone และ iPad) จากนั้นก็เลือก Template ให้เหมาะสมกับแอปพลิเคชันของเรา

    2.ในส่วนของผมเองเลือกเป็น Universal ครับ ซึ่งหากเลือกแบบนี้เราต้องออกแบบหน้าจอให้รองรับการใช้งานทั้งบน iPhone และ iPad ในขนาดหน้าจอ และความละเอียดต่างๆ ซึ่งวิธีการนั้นก็เฉพาะกับรุ่นของ iOS SDK ครับ

    3.ในกรณีใช้อีกเครื่องที่เป็น Windows ในการพัฒนา ก็ต้องทำการเชื่อมต่อกับเครื่อง macOS ที่ได้ติดตั้ง Xamarin Studio ไว้ โดยคลิกที่ไอคอน  แล้วทำการ Connect ให้เรียบร้อย
    4.โครงสร้างของโปรเจ็คก็จะมีหน้าตาประมาณนี้ครับ สามารถใช้งานความสามารถต่างๆ ของ .Net Framework ได้ครบถ้วน ด้านซ้ายมือมี Toolbox ให้เราสามารถลากวาง Control ที่เหมือนกับพัฒนาโดย Xcode ทุกประการ

    5.การเพิ่ม Component ต่างๆ สามารถทำได้ผ่าน NuGet Package Manager

    6.การเชื่อมต่อ Web Services ก็ทำได้อย่างง่ายดาย รวมถึงการเปลี่ยน URL ในการเชื่อมต่อขณะ Runtime ก็สามารถทำได้โดยกำหนด Property ชื่อ URL Behavior เป็น Dynamic ซะก่อน

    7.เมื่อทำการ Build และ Run ทดสอบ จะปรากฏ Simulator บนเครื่อง macOS นะครับ

     

    บทความนี้ขอจบไว้เพียงเท่านี้ครับ แต่สำหรับเรื่อง Xamarin และ หัวข้อต่างๆ ในการพัฒนาแอปพลิเคชันสำหรับ iOS จะมีตามมาจนครบถึงกระบวนการอัพโหลดขึ้น App Store ได้สำเร็จอย่างแน่นอนครับ

  • สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

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

        สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม  ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย

        ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs

    1. ทำการ Include ไฟล์ Javascript ของ chart.js ไว้ใน header (ในตัวอย่างเป็นการเรียกใช้งานจาก CDN หากต้องการใช้งานจากไฟล์ที่เก็บไว้ที่เว็บเซิฟเวอร์ให้ปรับแก้ src path)
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>
    1. เพิ่ม canvas ในส่วนของ body
     <canvas id="report" width="600" height="300"></canvas>
    1. เขียน JavaScript เพื่อสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง
     var dataDemo = { labels: ["Apple", "Sumsung", "ASUS", "OPPO"],
 datasets: [{
 label: "2557",
 fillColor: "#5B90BF",
 data: [20, 10, 9, 8]
 }]
 };
    1. ทำการสร้าง Context จาก canvas เพื่อนำไปสร้าง Chart Object โดยใช้คำสั่ง ดังนี้
     var ctx = $("#report").get(0).getContext("2d");
 var chart = new Chart(ctx).Bar(dataDemo, { bezierCurve: false });

     

    จาก 4 ขั้นตอนดังกล่าวเราจะได้โค้ดที่เมื่อทำการเพิ่มโครงสร้างของหน้าเว็บ และบันทึกเป็นไฟล์ html แบบนี้ chart.html  ลองเปิดดูจะพบว่าสามารถแสดงกราฟแท่งได้แล้ว

     

        แต่ในงานจริงนั้น รู้กันดีนะครับ ว่ามันไม่ง่ายอย่างนั้น โจทย์ของเราคือ สามารถนำข้อมูลจาก Database ซึ่งได้เขียน Query จนได้ข้อมูลแบบที่เราเรียกกันติดปากว่า Crosstab นั้นคือมีชื่อฟิลด์ข้อมูลที่มีความสัมพันธ์กันในแกน x และแกน y ซึ่งเป็นรูปแบบข้อมูลที่นำมาสร้างเป็นกราฟนั้นเอง ส่วนวิธีการนั้น ผมไม่ขอลงรายละเอียดในบทความนี้ แต่สำหรับท่านใดที่ใช้งานฐานข้อมูล Oracle ตั้งแต่ 11g ขึ้นไปลองศึกษาคำสั่งชื่อ Pivot ดูครับ น่าจะช่วยลดความยุ่งยากในขั้นตอนนี้ได้มาก ตัวอย่างข้อมูล แบบ Crosstab ที่เราจะส่งจากฝั่ง Server มาสร้างเป็น Object สำหรับสร้างกราฟอีกทีครับ

     

    crosstab-datatable

     

        อีกจุดที่มีความยุ่งยาก คือการแปลงจากรูปแบบข้อมูล Crosstab Datatable เป็น JSON ตัวช่วยของผมในเรื่องนี้คือ Library ที่ชื่อ Newtonsoft.Json สามารถดาวส์โหลดมาใช้งานผ่าน NuGet ได้เลยครับ จากนั้นก็เรียกใช้งาน ดังตัวอย่าง โดยตัวแปล data คือ Datatable ของเรา เมื่อได้ข้อมูล JSON แล้วให้ทำการสร้าง Web Service เพื่อให้สามารถดึงข้อมูลดังกล่าวจาก Javascript ได้

    JsonConvert.SerializeObject(data)

    ถัดจากนั้น ก็คือการนำ JSON นั้นไปสร้างเป็น Object ที่มีโครงสร้างตามที่ Chart.js ต้องการอีกที ในขั้นตอนนี้ผมลองหา Library ดูแล้วแต่ไม่เจอ ก็ได้พัฒนาเป็นชุดคำสั่ง helper เล็กๆ ซึ่งค่อนข้างจะจำเพาะกับลักษณะข้อมูล และรูปแบบการแสดงผลของเว็บไซด์ที่ผมพัฒนาอยู่ แต่สามารถนำไปปรับแก้ให้เหมาะสมได้ครับ ซึ่งในไฟล์นี้ หากใส่ parameter และเขียนโครงสร้าง html ตามตัวอย่าง เราจะเหลือโค้ดที่จะต้องเขียนเพียงไม่กี่บรรทัด ก็จะได้กราฟมาใช้งานใน 3 รูปแบบ คือ กราฟแท่ง กราฟเส้น และกราฟวงกลม ตามที่มี method ให้ครับ

     

    สำหรับการสร้างกราฟจะมีขั้นตอนเปลี่ยนไปดังนี้ครับ

    1. ทำการ include ไฟล์ Javascript โดยเพิ่มเติม chart-helper.js
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>
<script src="chart-helper.js" type="text/javascript"></script>
    1. ทำการ include ไฟล์ Style Sheet ดังนี้ bootstrap-grid.css และไฟล์ chart.css
    <link href="bootstrap-grid.css" rel="stylesheet" type="text/css" />
<link href="chart.css" rel="stylesheet" type="text/css" />
    1. สร้าง HTML ตามโครงสร้าง โดยมีการใช้งาน class ในส่วน grid system ของ Bootstrap มาช่วยวางตำแหน่งซ้ายขวา ดังนี้
    <div class="row">
 <div class="col-xs-8">
 <canvas id="reportBar" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelBar" class="chart-label-list">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-xs-8">
 <canvas id="reportLine" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelLine" class="chart-label-list">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-xs-8">
 <canvas id="reportPie" width="600" height="300">
 </canvas>
 </div>
 <div class="col-xs-4">
 <ul id="chartLabelPie" class="chart-label-list">
 </ul>
 </div>
 </div>
    1. จากนั้นทำการเรียกใช้งาน Method ของ chart-helper.js ซึ่งประกอบไปด้วย CreateBarChart (สร้างกราฟแท่ง), CreateLineChart (สร้างกราฟเส้น), CreatePieChart (สร้างกราฟวงกลม) จะรับค่าเป็นข้อมูล JSON และ ID ของ HTML เพื่อนำไปสร้างกราฟโดยตัวอย่างการใช้งาน Method เหล่านี้ร่วมกับ Webservice (ทั้งนี้รูปแบบการเรียก Webservice ขึ้นอยู่กับวิธีการ Response ด้วย) มีดังนี้
    $.ajax({
 type: "POST",
 url: "DemoService.asmx/MethodName",
 data: { param:data1 }
 }).done(function (json) {
 CreateBarChart(json, "reportBar", "chartLabelBar");
 CreateLineChart(json, "reportLine", "chartLabelLine");
 CreatePieChart(json, "reportPie", "chartLabelPie");
 }).fail(function (jqXHR, textStatus) {
 alert(textStatus);
 });

    สามารถดาวโหลดไฟล์ตัวอย่างแบบเต็มได้ตามนี้ครับ chart-with-helper.html และกราฟที่ได้จะมีหน้าตาแบบนี้ ทั้งนี้ขึ้นอยู่กับข้อมูลของเราด้วยครับ

    bar line pie