Month: November 2020

เนื่องด้วยได้รับโจทย์ให้พัฒนาแอปพลิเคชัน ที่สามารถแสกนบาร์โค้ดได้เมื่อได้ค้นหาดูก็พบชื่อของ 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 ตัวครับ