Onur SARA: SAPUI5 uygulaması ile Barkod okuma (Cordova)

Merhabalar,
Bu yayında bir Cordova uygulaması oluşturup , SAPUI5 uygulama dosyalarımızı içerisine atarak barkod okuma işlemi gerçekleştirecek bir Android APK sı oluşturacağız.

Öncelikli olarak işe Andorid SDK yı kurarak başlayalım. Aşağıdaki linkten güncel android sdk sürümüne ait exe dosyasına erişebilirsiniz.

android-sdk_r24.4.1

SDK kurulumunu tamamladıktan sonra SDK manager ile birkaç paket kurulumu daha yapmamız gerekmekte .

Android SDK Platform-tools , Build tools ve API22 component lerinin kurulumunu gerçekleştiriyoruz .

SDK kurulumunu tamamladıktan sonra JDK kurulumu yapmamız gerekmekte, JDK dosyasını linkten indirip kurmak mümkün .

JDK

Bir sonraki aşamada nodejs kurulumu gerekmekte. Linkten son sürüme ulaşabilirsiniz.

Nodejs

Kurulumu tamamladıktan sonra command prompt üzerinden "npm" komutunu çalıştırdığınızda aşağıdaki ekran görüntüsüne ulaşmamız gerekmekte .

Bu aşamada nodejs ile cordova kurulumunu gerçekleştireceğiz, yine command prompt üzerinden "npm install -g cordova" komutuyla cordova kurulumunu gerçekleştiriyoruz .

Cordova kurulumu tamamlandıktan sonra yapmamız gereken yeni bir cordova projesi oluşturmak olacak . Command prompt üzerinde
"cordova create C:\Users\Administator\Desktop\barcodescanner com.enterprisemobility.barcodeScanner barcodescanner"
komutuyla yeni bir cordova projesi oluşturuyoruz .

Daha sonra Command prompt üzerinde "cd create C:\Users\Administator\Desktop\barcodescanner" "cordova platform add android" komutları ile proje dosya dizine gidip , projemize android platformunu ekliyoruz.

Proje dizininde platforms klasörü altında android klasörünün oluştuğunu göreceğiz.

Sırada barcode scanner plug-in ini projemize ekleme kısmı var . Aşağıdaki linkten plug-in dosyalarını indirebilirsiniz.

BarcodeScannerPlugIn

Plug-in dosyalarını indirdikten sonra bu dosyaları yine command prompt üzerinden "cordova plugin add C:\Users\Administator\Desktop\BarcodeScanner-master" komutuyla proje dizinimize ekliyoruz.

Şimdi SAPUI5 tarafında üzerinde bir Input Field ve Button barındıran basit bir uygulama yazalım , ve buttonumuzun press olayında barcode scanner özelliğini kullanalım .

Burada dikkat etmemiz gereken bir önemli nokta da cordova.js script ini projemize eklemek ve ui5 kütüphanelerine localden değilde openui5 üzerinden erişim sağlamak oalcak.

<script type="text/javascript" src="cordova.js"></script>

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>

 
sap.ui.jsview("zui5_barcode_reading.main", {

 /** Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf zui5_barcode_reading.main
 */ 
 getControllerName : function() {
  return "zui5_barcode_reading.main";
 },

 /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away. 
 * @memberOf zui5_barcode_reading.main
 */ 
 createContent : function(oController) {
  
  
  var oTextField = new sap.m.Input("oInput");
  var oButton = new sap.m.Button("oButton",{
   text : "Kamera",
   press : function(){
    
    cordova.plugins.barcodeScanner.scan(
      
      function(result)
      {
       oTextField.setValue(result.text);
       
      },
      function(error)
      {
       
       alert("Camera Error");
      }
    );
    
   }
   
  });
   return new sap.m.Page({
   title: "Title",
   content: [
   oTextField,
   oButton
   ]
  });
 }

});

sap.ui.controller("zui5_barcode_reading.main", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_barcode_reading.main
*/
// onInit: function() {
//
// },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_barcode_reading.main
*/
// onBeforeRendering: function() {
//
// },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_barcode_reading.main
*/
// onAfterRendering: function() {
//
// },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_barcode_reading.main
*/
// onExit: function() {
//
// }

});

Projemizi oluşturduktan sonra son yapmamız gereken proje dosyalarımızı cordova projemizin dizinine atmak ve projemizi build etmek olacak .
META-INF ve WEB-INF klasörleri haricindeki tüm klasörleri alıp proje dizinimizdeki www klasörü altına atıp index.html dosyasını da SAPUI5 uygulama dosyası ile replace ediyoruz .

Bu işlemin ardından cordova proje dizimizde www klasör içeriği aşağıdaki gibi gözükmekte .

Son yapmamız gereken projemizi build etmek olacak . Yine proje dizinimiz üzerinde iken command prompt üzerinde "cordova run --device" komutuyla bilgisayarımıza bağlı android bir cihaz üzerine uygulamayı yüklüyoruz .

Veya "cordova build" komutuyla android APK dosyası oluşturup bu dosyayı android cihazınıza taşıyıp yükleme işlemini manuel gerçekletirmekte mümkün. Oluşan APK dosyasına \barcodescan\platforms\android\build\outputs\apk dizini altında bulabilirsiniz.

Sıra kurduğumuz uygulamayı test etmeye geldi .Linkten farklı tiplerde barcode üretip cihazında test etmek mümkün .

barcodegenerator