เขียนโปรแกรมอ่าน QR Code, Barcode ด้วย Titanium Mobile [iOS]

หลังจากหายจากการเขียนบทความไปนาน วันนี้กลับมาเขียนใหม่อีกครั้งพร้อมกับสิ่งที่เราเริ่มจะคุ้นเคยกับมัน "QR Code" โดย QR Code นี้ถูกใช้งานในที่ต่าง ๆ มากมาย ไม่ว่าจะเป็นสิ่งที่เอาไว้ใช้ Add Friend ของ Application ชื่อดังอย่าง "Line" หรือเอาไว้ใช้งานเพื่อทำการ Download Application ทั้งบน iOS และ Android ในบทความนี้จะแนะนำวิธีการเขียนโปรแกรมเพื่อทำการอ่าน QR Code นี้กันครับ


QR Code คืออะไร ?

QR Code หรือที่มีชื่อเรียกอีกชื่อหนึ่งว่า บาร์โค้ด 2 มิติ คือ รหัสชนิดหนึ่งซึ่งสามารถเก็บข้อมูลต่าง ๆ  เช่น ชื่อ , ราคาของสินค้า ,  เบอร์โทรศัพท์ หรือแม้กระทั่งชื่อเว็บไซต์ โดยเป็นการพัฒนาต่อยอดมาจาก บาร์โค้ด โดย บริษัท Denso-Wave ตั้งแต่ปี 1994 และได้จดทะเบียนลิขสิทธิ์ชื่อ "QR Code" แล้วทั้งในญี่ปุ่น และทั่วโลก ผู้คิดค้นที่มุ่งเน้นให้สามารถถูกอ่านได้อย่างรวดเร็ว โดยการอ่าน QR Code นิยมใช้กับ Smart Phone ทั่ว ๆ ไป 

หลังจากที่เรารู้จักกับเจ้า QR Code ไปแล้ว ก็ถึงเวลาที่เราจะมาเขียนโปรแกรมเพื่อทำการอ่านเจ้า QR Code นี้กันแล้วหล่ะครับ โดย Code ที่เขียนในบทความนี้จะสามารถใช้งานได้กับ iOS เท่านั้นเนื่องจากตัว ที่ผมใช้นั้นสามารถใช้งานได้กับ iOS เพียงอย่างเดียว (ในส่วนของ Android จะพยายามหาตัวอย่างที่ใช้งานง่าย ๆ มาให้ดูกันภายหลังนะครับ) 

สิ่งที่เราต้องมีครับ 
  1. Titanium Mobile SDK 1.4.2 (ตอนนี้ 3.X แล้ว)
  2. iOS SDK 4.1 (ตอนนี้ไป 5.0)
  3. iPhone 3GS หรือสูงกว่า (ตอนนี้คงเป็น iPhone 5S, C)
ในขั้นตอนแรกนั้นเราก็จะต้องไปทำการ Download Module ที่มีชื่อว่า  TiBar มาก่อนครับ เมื่อทำการ Dowload แล้วให้ทำการ  Copy ไปยัง /Library/Application Support/Titanium

เมื่อเราได้ทุกอย่างแล้วเรามาเริ่มกันเลยครับโดยเริ่มจากการสร้าง Project ใน Titanium Mobile ครับ จากนั้นเราก็เปิดไฟล์ที่มีชื่อว่า  tiapp.xml ขึ้นมาครับ ในส่วนของ Modules กดที่ปุ่ม  "+" แล้วเลือก tibar ครับ 


ทำการ Save ไฟล์ tiapp.xml ครับ จากนั้นก็เปิดไฟล์ app.js ขึ้นมาครับ แล้วก็เอา Code ด้านล่างนี้ลงไปได้เลยครับ
          
var win = Titanium.UI.createWindow({
     backgroundColor:'#fff'
});

var TiBar = require('tibar');
var label = Titanium.UI.createLabel({
     text:'อ่าน QR Code ด้วย Titanium Mobile',
     textAlign:'center',
     width:'auto'
});

var button = Ti.UI.createButton({
    title: "Scan barcode",
    height:50,
    width:250,
    bottom:20
});

button.addEventListener('click', function(){
TiBar.scan({
   // simple configuration for iPhone simulator
   configure: {
   classType: "ZBarReaderController",
   sourceType: "Album",
   cameraMode: "Default",
   symbol:{
      "QR-Code":true,
      }
   },
   success:function(data){
      if(data && data.barcode){
      Ti.UI.createAlertDialog({
         title: "Scan result",
         message: "Barcode: " + data.barcode + " Symbology:" + data.symbology
      }).show();
      }
   },
   cancel:function(){
      Ti.API.info('TiBar cancel callback!');
   },
   error:function(){
      Ti.API.info('TiBar error callback!');
   }
  });
});

win.add(label);
win.add(button);

win.open();

ทำการัน  Application ครับ ก็จะพบกัน Error แบบนี้ครับ

แต่ไม่ต้องตกใจไปครับ ให้เราเปิด ไฟล์ที่เรา Build ได้จาก Titanium ใน Xcode ครับ โดยตัวที่เราจะเปิดนั้นจะอยู่ที่ [project folder]/build/iphone/*.xcodeproj ตามภาพ 


เมื่อ Xcode ถูกเปิดขึ้นมาแล้วให้เลือกที่ Project แล้วเลื่อนลงมาด้านล่างจะพบกับ Linked Frameworks and Libraies กดที่ปุ่ม "+"​ ข้างล่าง


จากนั้นให้เลือก Framework ดังต่อไปนี้
  • AVFoundation.framework
  • CoreMedia.framework
  • CoreVideo.framework
  • QuartzCore.framework
  • libiconv.dylib
จากนั้นทำการรัน Application ครับ เมื่อพบกับ Message ที่บอกว่า Success แล้วให้ทำการ ปิด Xcode ครับจากนั้นกลับมาที่ Titanium Mobile แล้วทำการรันอีกครั้ง Application ของเราก็จะสามารถรันขึ้นมาได้ครับ

แล้วเราจะทดสอบ โปรแกรมของเราอย่างไร ในเมื่อเรารัน Application บน Emulator ทำแบบนี้ครับ หารูป QR Code หรือจะเอาจาก บทความนี้ก็ได้ครับ ลากไปใส่ Emulator ครับ จากนั้นก็กด ค้างไว้เพื่อ Save รูปลงไปที่  Camera Roll จากนั้นลองกดที่ป่ม Scan barcode ตัวโปรแกรมจะไปเปิด Camera Roll ที่เก็บรูป QR Code ของเราเอาไว้ หากไม่มีอะไรผิดพลาดเมื่อโปรแกรมอ่าน QR Code แล้วจะแสดง Message แบบนี้เป็นอันเรียบร้อย 

ในส่วนของการ Configuration ตัว TiBar นั้นมีการ Configuration ให้เราได้ปรับเปลี่ยนแต่จะมีอะไรบ้างนั้นเรามาดูกันดีกว่าครับ 
  • classType เป็นการระบตัวอ่านของ TiBar ว่าจะเป็นการ Automatic Capture หรือจะเป็น Manual Capture ซึ่งแบ่งได้แบบนี้ครับ 
                - ZBarReaderViewController - จะเป็นการสั่งให้ตัว Reader นั้นทำงานแบบ Automatic Capture
                - ZBarReaderController - จะเป็นการสั่งให้ตัว Reader นั้นทำงานแบบ Manual Capture  
  • sourceType เป็นการระบุว่าเราจะอ่าน QR Code นี้จากที่ไหน จะมีตัวเลือกดังนี้ครับ 
                 - Album - เป็นการระบุว่าเราจะอ่าน QR Code จาก Camera Roll (ถ้าเลือกตัวนี้แล้วในส่วนของ classType จะต้องเป็น ZBarReaderController เท่านั้น)
                 - Camera - จะเป็นการอ่านจาก กล้องของ iPhone หรือ iPad 
  • cameraMode - ระบุเป็น Default 
  • config - ค่าต่าง ๆ เพิ่มเติม โดยจะมีค่าเป็น ture หรือ false 
                 - showsCameraControls -  แสดงปุ่มควบคมกล้อง
                 - showsZBarControls - แสดงปุุ่มควบคมการอ่าน QR Code
                 - tracksSymbols - แสดงกรอบสีเหลี่ยมเมื่อมีการตรวจพบ QR Code
                 - enableCache  - เปิดการใช้งาน Cache หรือไม่
                 - showsHelpOnFail - แสดงตัวช่วยกรณีที่ไม่สามารถอ่านได้
                 - takesPicture - ใช้งานแบบ ถ่ายภาพเก็บไว้หรือไม่
  • symbol - ระบุให้กับตัว TiBar ว่าต้องการอ่าน Barcode แบบไหนบ้าง โดยจะมีค่าเป็น true หรือ false 
                 - QR-Code 
                 - CODE-128 
                 - CODE-39
                 - I25
                 - DataBar
                 - DataBar-Exp
                 - EAN-13
                 - EAN-8
                 - UPC-A
                 - UPC-E
                 - ISBN-13
                 - ISBN-10
                 - PDF417

หากต้องการทดสอบโปรแกรมบนเครื่องจริงก็สามารถที่จะทำได้  ทดสอบบนเครื่อง สำหรับ iOS เพียงเปลี่ยน Config เป็นแบบนี้ครับ 
classType: "ZBarReaderController",
sourceType: "Camera",
cameraMode: "Default",
config:{
       "showsCameraControls":true,
       "showsZBarControls":true,
       "tracksSymbols":true,
       "enableCache":true,
       "showsHelpOnFail":true,
       "takesPicture":false
       },
symbol:{
      "QR-Code":true,
      "CODE-128":false,
      "CODE-39":false,
      "I25":false,
      "DataBar":false,
      "DataBar-Exp":false,
      "EAN-13":false,
      "EAN-8":false,
      "UPC-A":false,
      "UPC-E":false,
      "ISBN-13":false,
      "ISBN-10":false,
      "PDF417":false
      }


ลองทดสอบกันดูนะครับเผื่อจะเป็น Idea สำหรับการทำ Application ที่เอาไว้ทำอะไรแปลก ๆ กับ QR Code หรือ Barcode ประเภทต่าง ๆ ได้ครับ

0 ความคิดเห็น:

แสดงความคิดเห็น