Category: Mobile Device

  • สร้าง 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 ระบุเครื่องเป้าหมายจากผู้ใช้ที่ติดตั้งแอปพลิเคชันของเราครับ เนื่องจากวิธีการจะจำเพาะกับเครื่องมือที่ใช้ในการพัฒนาแอปพลิเคชัน

  • แชร์หน้าจอมือถือขณะ VDO Call ด้วย LINE

    สำหรับ Blog ในวันนี้จะมาขอแชร์เกร็ดความรู้เล็กๆ น้อยๆ ที่หลายๆคนอาจจะยังไม่เคยรู้มาก่อน (ถึงแม้จะใช้ LINE กันอยู่ทุกวันก็เถอะ)

    เมื่อไม่กี่วันที่ผ่านมาทาง LINE ได้มีการ update version ล่าสุด คือ10.6.5 ซึ่งใน version นี้จะเน้นไปที่การเพิ่มคุณสมบัติขณะวิดีโอคอล เช่น สามารถดู YouTube ร่วมกันได้ หรือสามารถแชร์หน้าจอตัวเองได้ เป็นต้น จริงๆแล้ว เรื่องของการแชร์หน้าจอขณะ VDO Call เนี่ย เดิมบนคอมพิวเตอร์ก็ทำได้อยู่ก่อนแล้วนะ แต่ตอนนี้ update ให้สามารถแชร์ผ่าน application บน smart phone ได้ด้วย

    วิธีการก็ไม่ยากเลย ปะ ไปดูกันว่าเค้าทำกันยังไง !!

    Step1 : เริ่มจากเปิด LINE และเลือก VDO Call หาคนที่เราต้องการ

    Step2 : เมื่อเริ่มการ VDO Call เรียบร้อยแล้ว แตะหน้าจอเบาๆ 1 ครั้ง จากนั้นให้สังเกตุมุมบนด้านขวาของหน้าจอ จะปรากฏicon เล็กๆ ให้กดเลือกตรงจุด3จุด

    Step3 : หน้าจอจะแสดงเมนูให้เราเลือก ให้เลือก “Share screen

    Step4 : เมื่อกดเลือกเรียบร้อยแล้วหน้าจอก็จะถามเราว่า “LINE will start capturing everything that’s displayed on your screen.” ให้เลือกว่าจะ cancel หรือ start now เลือกแบบไหนก็เลือกเลย หากไม่ต้องการให้รอบหน้าแสดงข้อความนี้อีกก็สามารถ Checkbox ด้านหน้าคำว่า Don’t show again ได้เลย

    Step5 : เมื่อเราเริ่มต้นการ Share screen เรียบร้อยแล้ว หน้าจอเราเปิดอะไรอยู่ เพื่อนที่เรา VDO Call ด้วยก็จะเห็นเหมือนกัน ตัวอย่างก็จะได้ดังรูป ^^

    จะว่าไปก็มีประโยชน์อยู่ไม่น้อยเลยนะ ยิ่งช่วงนี้อะไรๆก็ออนไลน์ ทั้งเรียน ทั้งประชุม ทั้งพูดคุย ตัวคุณสมบัติที่เพิ่มเข้ามาอันนี้ตอบรับนโยบาย social distancing ได้ดีมากๆ

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

    อ้างอิง
    https://www.rainmaker.in.th/line-update-video-call/

  • Transcribe speech with Google Translate

    สวัสดีคุณผู้อ่านทุกท่าน หลังจากเงียบหายไปนาน และแล้ว วันนี้ก็มาถึง วันที่ต้องกลับมาเขียน Blog อีกรอบ

    เพราะ …. เพราะ …. เพราะอยากเขียนนี่แหละ (หื้มมม) ไม่มีอะไรในก่อไผ่หรอก 55 อะๆ อย่ามามัวเสียเวลากันเลยเนอะ มาเข้าเรื่องกันเลยดีกว่า !!

    วันนี้ขอว่าด้วยเรื่องของ feature บน google translate กันหน่อย feature ที่เพิ่มเข้ามาคือ “Transcribe” การถอดข้อความจากไฟล์เสียงนั่นเอง

    จริงๆแล้ว คนไหนที่เคยลองใช้ลองเล่น google translate ก็จะรู้กันอยู่แล้วว่าจะมี feature เกี่ยวกับเสียงอยู่แล้วก่อนหน้า ที่สามารถฟังเสียง
    หรือข้อความสั้นๆ และแปลออกมาเป็นคำ หรือบริบทสั้นๆ ได้ แต่ก็ยังไม่สามารถแปลในส่วนของไฟล์หรือข้อความเสียงที่แบบยาวๆ ต่อเนื่องได้

    สำหรับวิธีการใช้งาน feature Transcribe ที่เพิ่มเข้ามาเนี่ย ง่ายดายมากๆ

    1. เปิดเข้าไปที่ app google translate
    2. ให้กดไปที่ icon “Transcribe” ดูได้จากรูป

    3. เมื่อคลิกเข้ามาก็จะเจอกับหน้าจอขาวๆ แบบนี้ ซึ่งคือพร้อมใช้ทำงานแล้วนะ มาๆ จะลองเล่นให้ดู ทดสอบอ่านบทความ(ภาษาไทย) ให้ดูละกันนะ

    จากวิดีโอตัวอย่างก็จะเป็นการอ่านบทความภาษาไทยและเจ้า app ตัวนี้ก็จะแปลเป็นภาษาอังกฤษ เราก็จะได้ผลลัพธ์ประมาณนี้ เจ๋งดีเนอะ ^^

    เราสามารถตั้งค่าขนาดการแสดงผลของตัวอักษร หรืออื่นๆ ได้เล็กน้อยนะ สามารถลองเล่นได้โดยกดตรง รูปฟันเฟือง (มุมล่างซ้าย) กดๆดู ไม่ยากๆ

    สำหรับภาษาที่จะใช้ได้นั้น ขณะนี้รองรับ 8 ภาษา คือ อังกฤษ ฝรั่งเศส เยอรมัน ฮินดี โปรตุเกส รัสเซีย สเปน และ ไทย เน้ออออออ ^__^

    อ๊ะๆ สำหรับ feature ตัวนี้ขอบอกก่อนว่าทางผู้เขียนใช้ Android นะ แต่สำหรับบน iOS เนี่ยจะอัพเดทหรือยังไม่อัพเดท ทางผู้เขียนก็ไม่มั่นใจเช่นกัน
    แต่คาดว่าน่าจะตามกันมาติดๆนั่นแหละ รอไม่นานหรอก ก็ลองไปติดตามข่าวสารกันดูนะ

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

    อ้างอิง
    https://blog.google/products/translate/transcribe-speech/
    https://www.rainmaker.in.th/transcribe-speech-with-google-translate/

  • การติดตั้ง Android Emulator : MuMu เพื่อใช้งานร่วมกับ Expo CLI

    กำลังพัฒนา Mobile Apps อยากได้ Android EMU สักตัวที่กินแรมน้อย ๆ เปิดโปรแกรมได้เป็น Tab เปิด ๆ ปิด ๆ โปรแกรมบ่อยไม่ต้องกดเมนูเข้าออกให้เหนื่อยต้องลอง MuMu (สาวกเกมส์ Ragnarok M ข้ามการติดตั้งได้เลยครับ คงชำนาญกันอยู่แล้ว)

    • Installation Version
      • MuMu App Player V1.1.0.2
    • ติดตั้ง MuMu App Player (เมื่อก่อนตัวติดตั้งเป็นภาษาจีนล้วนเดี๋ยวนี้มีแบบภาษาอังกฤษแล้ว)
      https://mumu.163.com/global/download/en/index.html
    • การติดตั้งจะใช้ VirtualBox ช่วยเพิ่มประสิทธิภาพด้วย
    • เปิด Play Store จากนั้น Login เหมือนมือถือ Android ปกติ (จะเห็นว่าเห็นเป็น Tab สามารถปิดโปรแกรมโดยกดกากบาทด้านบนได้เลย หรือจะสลับ App ไปมาได้อย่างง่ายดาย โดย App ไม่หยุดทำงาน)
    • ติดตั้งโปรแกรม Expo
    • เปิดโปรแกรม
    • ไปที่ Tab Profile เพื่อ Login ใครยังไม่มี Account ให้สร้างได้ที่นี่
    • ทำการ Login บน expo cli start console ด้วย
    • ปิดโปรแกรม บน MuMu เปิดใหม่อีกครั้งจะเห็น Recenly in development ขึ้น Project ที่เราพัฒนาอยู่ (Emulator อื่นอาจจะเปิด USB Debug ได้ แต่ MuMu ยังไม่รองรับ จากการทดสอบเปิดแล้วไม่ขึ้น จึงใช้วิธี Login ให้เห็น Project แทน)
    • อย่าลืมว่าต้องอยู่ Network วงเดียวกัน

    หวังว่าจะเป็นประโยชน์กับ Mobile Apps อื่นที่ต้องการนำไปใช้ทดสอบด้วยนะครับ

  • วิธีติดตั้ง Expo CLI สำหรับพัฒนา Mobile App ด้วย React Native

    สำหรับผู้พัฒนาที่ต้องการพัฒนา Mobile App แต่รู้สึกว่ายังไม่พร้อมศึกษา React Native แบบจริงจัง สามารถใช้งาน Expo Framework โดยสามารถใช้ได้ทั้งในการพัฒนา หรือ Build ขึ้น Store ได้เลยทั้ง iOS/Android ด้วยภาษา JavaScript/TypeScript

    โดยวันนี้จะเริ่มด้วยแนะนำวิธีติดตั้ง Tools สำหรับพัฒนาชื่อ Expo CLI ครับ

    • Reference : https://docs.expo.io/versions/latest/
    • Installation Version
      • windows 10 version 1909 64 bit
      • npm 12.14.0 LTS
      • python 3.8
      • Expo SDK 36
    • ติดตั้ง Node Js (โหลดติดตั้งแบบ LTS)
      https://nodejs.org/en/
    • ถ้ามีแจ้งไฟล์ไม่ปลอดภัยกดข้ามไป
    • จะมีให้เลือกว่าจะลง Chocolatey หรือเปล่า เพื่อติดตั้ง Module เพิ่มเติม และแนะนำติดตั้ง Node-Gyp ซึ่งจะต้องติดตั้งเองภายหลัง
    • ติดตั้ง Python ก่อนติดตั้ง Node-Gyp ผ่าน Windows Store (หลังกด Get ไม่ต้อง Sign In ก็ได้)
    • เปิด windows cmd (Run as Administrator หรือไม่ก็เลือก Start->Node.js command prompt)
    • ติดตั้ง node-gyp
      npm install -g node-gyp
    • ติดตั้ง Expo CLI ด้วย npm
      npm install -g expo-cli
    • ทดสอบสร้างโปรเจ๊คใหม่ดังนี้
      • expo init
    • สั่งรัน Web สำหรับ Debug จะพบว่า Error
    • สำหรับ Expo SDK 36 ต้องแก้ \node_modules\metro-config\src\defaults\blacklist.js ดังนี้
      var sharedBlacklist = [
      /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
      /website\ /node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
      ];

    สามารถทดสอบเปิดได้ผ่านโปรแกรม Expo ใน Android/IOS หรือ Emulator Android หรือจะผ่าน USB Debug Android ก็ได้ครับ โดยได้ทั้ง QR-Code หรือ Exp URL Copy ไปแป๊ะในโปรแกรมได้ครับ (ต้องอยู่ในวง Network เดียวกันยกเว้นทดสอบโดยใช้ Tunnel)

  • เทคนิคการใช้ LINE แปลงข้อความรูปภาพ เป็นตัวอักษร Text (ใช้ภาษาไทยได้สมบูรณ์มาก)

    พึ่งเปิดตัวทั้งใน LINE สมาร์ทโฟน และ LINE ในเครื่อง PC สำหรับวิธีการแปลงข้อความรูปภาพ ให้กลายเป็นข้อความ Text ตัวอักษร โดยไม่ต้องเสียเวลามานั่งพิมพ์ใหม่ และวิธีการนี้ยังสามารถแปลเป็นภาษาอื่นๆ จากข้อความ Text ที่ได้จากการแปลงข้อความรูปภาพแล้วอีกด้วย

  • 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