Category: iOS

  • มารู้จักเครื่องมือ Smart Facebook URL ที่สามารถเปิด Facebook ตามอุปกรณ์ที่ใช้งานปัจจุบัน

    ทุกท่านเคยเป็นกันไหมค่ะ เมื่อเพื่อนของเราส่งลิงก์ Facebook มาให้เราดู แต่เมื่อเราเปิดใช้งานบนมือถือ มันก็จะเด้งไปหน้าเบราว์เซอร์ แล้วระบบก็จะให้เรา Login ซึ่งคนทั่วไปจะใช้งานบน App Facebook หากเราใช้งานผ่านมือถือ และจะใช้ผ่านเบราว์เซอร์เมื่อเราใช้ผ่านคอมพิวเตอร์

    ***มาดูตัวอย่างการเปิดลิงก์ Facebook Fan Page เมื่อเพื่อนส่งมาให้***

    ตัวอย่างการส่งลิงก์ Facebook ให้เพื่อนช่วยกดไลค์แฟนเพจ เมื่อเราคลิกลิงก์จากข้อความ

    ระบบปฏิบัติการ Android

    จะเปิดมาที่ เบราว์เซอร์ เป็น m.facebook หากต้องการใช้งานก็จะต้อง Login Facebook ใหม่ ซึ่งปกติเราก็มักจะลืม Username หรือ Password

    ระบบปฏิบัติการ iOS

    มีข้อความแจ้งเตืนอว่าจะให้เปิดผ่าน Faceook หรือไม่ หากกดปุ่ม “เปิด” จะเป็นไปยัง App ให้ทันที่ แต่หากกดปุ่ม “ยกเลิก” จะเปิดมาที่ เบราว์เซอร์ เป็น m.facebook ก็จะต้อง Login Facebook ใหม่

    ระบบปฏิบัติการ iOS

    จะเปิดมาที่เบราว์เซอร์ เป็น m.facebook หากต้องการใช้งานก็จะต้อง Login Facebook ใหม่เช่นเดียวกับ ระบบปฏิบัติการ Android

    **** ซึ่งเมื่อเราจะส่งลิงก์ URL ให้เพื่อน เราจะไม่ทราบว่าเพื่อนใช้ Smart phone ระบบปฏิบัติการอะไร
    ดังนั้นเรามีวิธีการดังนี้….=>>

    1. นำ URL ที่เราต้องการ เช่น https://www.facebook.com/PSUDIIS
    2. คลิกปุ่ม “สร้าง Smart URL”

    เมื่อดำเนินการเรียบร้อยจะได้ URL ใหม่ ดังนี้

    1. http://pili.app/fb/SP4FHeHc
    2. คลิกปุ่ม “คัดลอก”

    ******เมื่อเราได้ URL ที่ต้องการแล้ว ส่งให้เพื่อนอีกครั้ง แล้วให้เพื่อนเปิดดูเลยค่ะ******

    ระบบปฏิบัติการ Android

    เมื่อคลิก URL แล้วจะเลือก “Android” ให้อัตโนมัติ

    ระบบปฏิบัติการ Android

    เลือก “facebook app” ให้อัตโนมัติ

    ระบบปฏิบัติการ Android

    จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

    ระบบปฏิบัติการ iOS

    เมื่อคลิก URL แล้วจะเลือก “iPhone” ให้อัตโนมัติ

    ระบบปฏิบัติการ iOS

    เลือก “Facebook App” ให้อัตโนมัติ

    ระบบปฏิบัติการ iOS

    จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

    การใช้งานผ่าน Computer

    เมื่อคลิก URL แล้วจะเลือก “คอมพิวเตอร์ส่วนบุคคล” ให้อัตโนมัติ

    การใช้งานผ่าน Computer

    เลือก “เบราว์เซอร์” ให้อัตโนมัติ

    การใช้งานผ่าน Computer

    จะเข้า “เบราว์เซอร์” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

  • วิธี Zoom icon บน iPhone

    เวลาที่เราจะต้องการ Capture เพื่อทำคู่มือ หรือ ต้องการส่งหน้าจอให้ผู้อื่นดูว่าใช้ Icon ไหนในการเข้าใช้งาน เราสามารถ Capture หน้าจอพร้อมทั้ง Zoom Icon ให้ผู้ใช้เห็นกันชัดๆ อีกด้วย โดยมีขั้นตอนดังนี้ค่ะ

    1. Capture หน้าจอ โดยกดปุ่ม Home พร้อมกับปุ่ม Power จะเข้าหน้าจอของการแก้ไขภาพ  เลือกเครื่องหมาย + กด แล้วเลือก Magnifier


    2. ปรากฏแว่นขยาย ให้เลือกเลื่อนไปยัง Icon ที่เราต้องการ Zoom แล้วปรับขนาดได้ตามต้องการ

    3. จะได้หน้าจอผลลัพธ์ที่เราได้ Zoom ไว้

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

  • อัพโหลดแอปพลิเคชันไปยัง App Store ด้วย Transporter

    สำหรับนักพัฒนาแอปพลิเคชัน เพื่อให้บริการบนระบบปฏิบัติการ iOS, iPadOS ฯลฯ ของ Apple นั้น ทราบกันดีอยู่แล้วว่าต้องอัพโหลดขึ้นไปยัง App Store เพื่อให้ผู้ใช้เข้าไปค้นหาและดาวส์โหลดไปใช้งาน ทั้งนี้ช่องทางการอัพโหลดแบบปกติ (Native App ที่พัฒนาด้วย Xcode อยู่แล้ว หรือ เฟรมเวิร์คที่ Export ออกมาเป็น Xcode โปรเจค) คือ การใช้ขั้นตอน Build Archive เมื่อสำเร็จก็จะสามารถเลือก Distribute App ไฟล์ Build ก็จะอัพโหลดขึ้นไปรอที่ appstoreconnect.apple.com ให้อัตโนมัติ เพื่อเข้ากระบวนการ Review App ต่อไป

    ทั้งนี้ในปัจจุบันเฟรมเวิร์คที่ใช้พัฒนาครั้งเดียวสามารถให้บริการได้หลายระบบปฏิบัติการ (Cross Platform) เป็นที่นิยมอย่างมาก เช่น Flutter, React Native, Xamarin ซึ่งมักจะมีเครื่องมือที่ช่วย Build เป็นไฟล์ .ipa ที่ใช้สำหรับอัพโหลดมาเลย ซึ่งในปัจจุบันไม่สามารถใช้ Xcode อัพโหลดไฟล์นี้ได้โดยตรง (ยังใช้ Terminal รันคำสั่งเพื่ออัพโหลดได้ และจำเป็นต้องติดตั้ง Xcode) จึงมีแอปพลิเคชันที่ทำหน้าที่ตรงนี้ และใช้งานง่ายมาแนะนำครับ นั้นคือ Transpoter

    ก่อนอัพโหลดไฟล์ด้วยแอปพลิเคชันนี้ ต้อง

    1. มี Apple ID ที่ลงทะเบียนเป็นนักพัฒนาเรียบร้อยแล้ว
    2. เข้าไปที่ developer.apple.com เลือก Account
    3. ทำการเพิ่ม Certificates, Identifiers & Profiles ให้เรียบร้อย
    4. ดาวส์โหลด และติดตั้ง Certificate และ Profile บนเครื่องที่จะใช้อัพโหลด (กรณีใช้ Expo จะต้องอัพโหลดตอนสั่ง Build)
    5. สร้าง App Record บน appstoreconnect.apple.com รอไว้ (แค่มีชื่อแอปไว้ก็เพียงพอแล้ว ยังไม่จำเป็นต้องมีรายละเอียดครบถ้วน)

    ขั้นตอนด้านบนจริงๆแล้วอัพโหลดด้วยวิธีไหนก็ต้องทำนะครับ และจะต้องมีการ Config ค่า Bundle ID, Team ID ให้ถูกต้องโดยขึ้นอยู่กับเครื่องมือที่ใช้พัฒนาว่าจะต้อง Config ค่าที่จุดไหน ไว้โอกาศหน้าผมจะมาลงรายละเอียดในส่วนนี้ครับ เมื่อทุกอย่างเรียบร้อยแล้ว ให้ทำการดาวส์โหลดแอปพลิเคชัน Transporter และติดตั้ง เมื่อเปิดแอปพลิเคชันขึ้นมาจะมีหน้าจอให้ Login ดังรูป

    จากนั้น ลากไฟล์ .ipa ของเรามายังหน้าจอของแอป กระบวนการ Validate ไฟล์ และอัพโหลดไปยัง App Store จะทำอัตโนมัติทั้งหมด

    หากเกิดข้อผิดพลาด จะมีหน้าต่างแจ้งเตือน หรือหากต้องการดู Log ก็มีให้เรียกดูได้ ดังภาพครับ

    เป็นอันเรียบร้อยครับ สามารถไปตรวจสอบว่า Build ของเราปรากฏอยู่บน appstoreconnect แล้วหรือยังโดยการกดปุ่ม … เลือก Open Appstoreconnect ได้เลย

    จริงๆแล้วบทความนี้จะเห็นได้ว่า เพียงแค่แนะนำให้รู้จักกับแอปพลิเคชันตัวนี้เท่านั้นครับ วิธีการใช้งานนั้นแค่ลากวางเป็นอันเสร็จ (ถ้าขั้นตอนอื่นๆถูกต้อง) โดยเฉพาะท่านใดที่ใช้ React Native แล้วใช้ Expo Server ในการ build เมื่อได้ไฟล์ .ipa มา ท่านไม่จำเป็นต้องโหลด Xcode ที่ขนาดมโหฬาร (ตัวติดตั้งอย่างเดียว 18GB ต้องมีพื้นที่ว่างในเครื่อง 40GB ถึงจะยอมให้ติดตั้งผ่าน Appstore) มาเพื่ออัพโหลดไฟล์เพียงอย่างเดียว หวังว่าบทความนี้จะเป็นประโยชน์ครับ

  • การตั้งค่า iPhone ไม่ให้ App ติดตามเก็บข้อมูลส่วนตัว

    สวัสดีค่ะ หลายท่านคงเคยเจอปัญหามีเบอร์แปลกๆ  โทรเข้ามานำเสนอสินค้า ขายประกัน หรือมี SMS โฆษณาเข้ามาทั้งที่เราไม่ได้เคยใช้บริการเหล่านี้ บางท่านอาจจะใช้ App ในการแสดงข้อมูลเพื่อที่จะปฏิเสธการรับสาย แต่เราก็สามารถจัดการตั้งแต่ต้นทางได้นะคะ ไม่ให้พวก App ที่อยู่ในมือถือของเราสามารถนำข้อมูลส่วนตัวของเราไปใช้ประโยชน์ได้  แต่ก่อนจะใช้งาน Feature นี้ ให้ตรวจสอบก่อนนะคะ ว่า ได้ Update iOS เป็นเวอร์ชัน 14.5 แล้วหรือยัง ถ้า  Update แล้วอย่ารอช้าค่ะ เราไปดูวิธีกันเลย

    1. เข้าไปในส่วนของ Settings

    2. เลือก Privacy

    3. Tracking


    4. จะปรากฏ App ที่ติดตามเราอยู่ ซึ่ง App พวกนี้แหละค่ะ ที่สามารถเก็บข้อมูลเราได้ หากเราไม่ต้องการให้ app ไหนติดตามเราก็เลือกที่จะปิด App นั้น แต่หากไม่ต้องการให้ติดตามทั้งหมดก็กดปิดในครั้งเดียวได้เลยที่ Allow Apps to Request to Track

    5. จากนั้นให้เลือก Ask Apps to Stop Tracking เพื่อบอกให้ Apps หยุดติดตาม

    6. Apps ทั้งหมดก็จะถูกปิดทั้งหมดเพื่อไม่ให้ติดตามได้อีก

    เท่านี้ก็เรียบร้อยค่ะ ลองไปทำตามกันดูนะคะ อย่าลืมว่าต้อง Update iOS เป็นเวอร์ชัน 14.5 ก่อนนะจ๊ะ

  • สร้าง 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/

  • วิธีติดตั้ง 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 ได้แล้วว ^^