Sunday, June 18, 2017

Getting Started Vue.JS

Vue (pronounced /vjuː/, like view) adalah progressive framework untuk membangun sebuah user interface.


Installasi Vue.JS dapat dengan menggunakan CDN,NPM, Bower, dan lain-lain. dapat dilihat pada:







Fitur pada Vue.JS:


  • Declarative Rendering, Vue.js menggunakan konsep rendering user interface secara deklaratif yang berarti tampilan yang ditampilkan ke user di deklarasikan DOMnya beserta dengan element dan attribute data masing-masing.
  • Loops, tidak jauh berbeda dengan framework front-end pada umumnya, Vue.js menyediakan fitur untuk menampilkan list data, dengan menggunakan keyword v-for="data in your-data-list" pada DOM element yang ingin ditampilkan
  • Conditionals, Fitur ini digunakan untuk melakukan operasi logika, dengan menggunakan keyword v-if="value" dan v-else
  • Data Binding, Secara default vue menggunakan konsep one way data binding, namun vue juga mempunyai fitur two way data binding. Dengan skema piramid terbalik (parent to child)
  • Directive dan Components, sama seperti AngularJS, Vue memiliki fitur directive (v-if, v-else, v-model merupakan directive bawaan dari Vue) namun kita dapat menginisiasi directive dengan logics yang dapat kita kustomisasi sendiri sesuai dengan kebutuhan. Berbeda dengan AngularJS perbedaan directive dengan component, di AngularJS kita dapat membuat sebuah component yang dengan menggunakan fitur directive. Sedangkan Component pada Vue merupakan sebuah HTML elements yang dapat di re-use codenya. Setiap component dapat dikustomisasi sesuai dengan behavior yang diinginkan.
  • Dan masih banyak fitur yang lainnya
Simple code in Vue:


Buat form seperti dibawah ini:











Source code file index.html:














Hasil setelah text field diisi inputan oleh











Sekian penjelasan sederhana saya tentang Vue.JS, sampai bertemu pada tulisan saya yang selanjutnya :D

References:

https://vuejs.org/v2/guide/index.html

https://laracasts.com/series/learn-vue-2-step-by-step/

OSB Handle Error Access-Control-Allow-Origin

Pada kesempatan kali ini saya ingin berbagi cara menghandle error Access-Control-Allow-Origin yang muncul ketika kita mengexecute REST Service yang sudah sudah selesai dibuat dari OSB. Gejalanya jika kita test dari enviroment OSB maupun Postman, error ini tidak akan muncul karena yang 1 berada dalam 1 enviroment dengan servicenya, dan Postman sudah mempunyai plugin bawaan untuk menghandle error tersebut. Jadi jika kita harus manual menambahkan pada service OSB yang sudah kita buat.

Error ini muncul karena kita tidak menambahkan header Access-Control-Allow-Origin. Untuk mengatasinya, kita cukup membuat Transport Header dan menambahkan header Access-Control-Allow-Origin yang valuenya di set *. Artinya kita mengallow semua origin bisa mengakses service itu.

Selain Access-Control-Allow-Origin kita juga harus memperhatikan header Allow, Content-Type serta Access-Control-Allow-Headers. Jadi sebaiknya jika kita menambahkan Access-Control-Allow-Origin jangan lupa untuk menambahkan 3 header lain nya. Untuk pengisian nya bisa melihat gambar dibawah.

Trasport Header yang kita buat harus berada di dalam Flow request response service itu.
Mudah bukan? Namun jika kita lupa, service OSB kita akan menjadi sia sia.
Semoga membantu !


Main Idea Using OSB To Handle Convertion From REST to SOAP

Pada beberapa waktu yang lalu kebetulan saya mendapat kesempatan untuk memberikan training kecil tentang OSB khususnya pada part Message Flow. Harapan dari training ini mereka dapat menggunakan melakukan convert dari REST ke SOAP maupun sebaliknya.

Pada dasarnya ada 2 jenis pengelompokan jika kita akan melakukan convert dari REST ke SOAP yaitu :
  • Mengirim data melalui Query Param (Method GET)
  • Mengirim data melalui Payload (Method POST,PUT)
Jika digambarkan flow untuk method GET kira kira akan seperti ini.
  1. Dapatkan HttpHeader yang dikirim.


  2. Buat Conditional Branch Untuk menghandle beberapa HttpHeader yang didapat.
  3. Dapatkan Query Param yang dikirim
  4. Buat payload yang sesuai dengan kebutuhan Business Service dan masukkan value yang didapat dari query param.
  5. Invoke Business Service
  6. Jika sudah mendapatkan response dari Business Service, olah response tersebut dengan melakukan penghilangan SOAP Envelope. Ini dapat dilakukan dengan menggunakan XSLT Resource.
  7. Jika sudah dihilangkan, lakukan convert menggunakan tools yang biasa dipergunakan, kalau dalam kasus saya, saya menggunakan Java untuk menghandle convert nya.
  8. Replace isi variable body dengan menggunakan hasil convert tersebut.
Sedangkan untuk flow method POST,PUT kira kira akan seperti berikut.
  1. Dapatkan HttpHeader yang dikirim.

  2. Buat Conditional Branch Untuk menghandle beberapa HttpHeader yang didapat.
  3. Jangan lupa tambahkan OPTIONS Method untuk menghandle agar service yang kita buat sukses diexecute. Kuncinya tambahkan Transport Header pada flow OPTIONS.
  4. Karena data ada di dalam payload dan bentuknya sudah JSON, maka kita tinggal lakukan convert dari JSON ke XML. Jika sudah maka kita akan punya payload berbentuk xml.
  5. Namun sebelum kita mengirim data ke Business Service, terlebih dahulu payload xml nya harus kita manipulasi agar bentuknya sama seperti Business Service yang akan kita invoke. Caranya dengan menambahkan namespace pada payload xml nya.
  6. Invoke Business Service
  7. Jika sudah mendapatkan response dari Business Service, olah response tersebut dengan melakukan penghilangan SOAP Envelope. Ini dapat dilakukan dengan menggunakan XSLT Resource.


  8. Jika sudah dihilangkan, lakukan convert menggunakan tools yang biasa dipergunakan, kalau dalam kasus saya, saya menggunakan Java untuk menghandle convert nya.
  9. Replace isi variable body dengan menggunakan hasil convert tersebut.
Kira kira seperti itu inti dari convert dari REST ke SOAP menggunakan OSB.
Semoga bermanfaat !

Reference sample file yang dibutuhkan:
- AddNamespace

Inline PDF Viewer dengan PDFObject

PDFObject merupakan sebuah utility javascript untuk melakukan embedding file PDF ke dalam sebuah halaman HTML. Untuk informasi dan dokumentasi lebih detail bisa dilihat pada https://pdfobject.com

Inline PDF Viewer sangat membantu untuk memenuhi kebutuhan User Experience (UX) dimana user akan melakukan input pada sebuah form yang datanya dari hasil membaca sebuah document PDF yang berasal dari web tersebut juga.

Kebutuhan UX seperti ini sebenarnya bisa di penuhi dengan beberapa cara:
  1. User mendownload file PDF. Membuka halaman form yang akan diisi pada browser. User akan melakukan Alt+Tab untuk berpindah-pindah antara browser dan aplikasi pembuka/viewer PDF (Adobe Reader, Foxit Reader, dll).
  2. File PDF dibuka pada Tab di browser. User membuka halaman form yang akan diisi pada Tab lain di browser. User akan melakukan berpindah-pindah antara Tab file PDF dan Tab form pada browser.
  3. Adanya fitur preview file PDF pada halaman form yang akan diisi. Jadi user bisa sambil melihat file PDF untuk langsung mencari data yang perlu untuk diisi ke form.

Untuk opsi no 1 dan 2, sudah bisa dilakukan tanpa menambahkan fitur apapun dalam web. Karena function basic dari web sudah bisa memenuhi kebutuhan flow ini. Tetapi user perlu bolak-balik antara 2 aplikasi berbeda (browser - pdf viewer) atau 2 tab yang berbeda pada browser.
Tetapi untuk no 3, kita perlu menambahkan fitur preview file PDF agar file PDF bisa langsung di preview di halaman yang sama dengan form yang akan diisi.

Berikut adalah sample UI nya:

Untuk sample kali ini struktur folder nya cukup simple, seperti berikut. Folder js saya isi dengan javascript dari github PDFObject.

Isi code dari index.html:
 
<h1>PDF Object Demo</h1>

<table>
 <tr>
   <td><label>Nama</label></td>
   <td>
     <input type="text" placeholder="nama">
   </td>
 </tr>
 <tr>
   <td><label>Alamat</label></td>
   <td>
     <input type="text" placeholder="alamat">
   </td>
 </tr>
 <tr>
   <td><label>Usia</label></td>
   <td>
     <input type="number" placeholder="usia">
   </td>
 </tr>
</table>

<div id="example1"></div>

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("sample-3pp.pdf", "#example1");</script>



Cara penggunaan PDFObject ini sangat mudah. Apabila kita sudah memasukannya ke dalam project, maka kita tinggal menggunakan nya dengan code ini:
 
<div id="example1"></div>

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("sample-3pp.pdf", "#example1");</script>


Terlihat pada code bahwa source file PDF nya adalah sample-3pp.pdf, bagian ini bisa kita pindah ke file controller jika kita menggunakan AngularJS pada project sehingga source file PDF nya bisa dinamis.

Pada sample ini saya menggunakan cara pintas dalam mengimport PDFObject kedalam project secara manual. PDFObject sendiri sudah tersedia pada Bower dan NPM, sehingga dependency management nya terjamin.

PDFObject ini sayang nya sudah tidak compatible dengan Firefox semenjak Firefox versi 52, hal ini di jelaskan oleh PDFObject pada website nya. Dijelaskan juga cara workaround agar PDF inline tetap berjalan di browser Firefox versi 52 ke atas. Workaround ini akan saya bahas pada postingan selanjutnya. :)


AngularJs : Custom ng-hide directive

Kembali bermain dengan AngularJs. Berawal karena adanya project yang membuat user memiliki kemampuan yang dinamis dan disimpan pada session storage. 

Solution 1
Pada awalnya pengecheckan dilakukan di controller masing". Hasilnya cukup merepotkan, karena setiap controller harus melakukan pengecheckan sendiri dan apabila ada perubahan membutuhkan banyak effort untuk melakukan perbaikan. 
Solution 1

Solution 2
Setelah itu saya berpikir untuk melakukan pengecheckan di satu tempat saja agar perubahan pengecheckan hanya dilakukan di satu tempat. Sehingga saya memindahkan tempat pengechekan pada service. Dengan demikian controller memiliki kewajiban untuk memanggil service untuk melakukan pengecheckan dan melemparkan hasilnya ke html.


Solution 2

Solution 3
Cara tersebut sudah terimplementasi di beberapa project hingga suatu sore saya ketika sedang merenung di taman saya mendapat pencerahan. Kenapa tidak dibuat directive saja yang melakukan pengecheckan terhadap value itu?
Akhirnya saya melakukan sedikit custom atau mengadopsi apa yang dilakukan pada directive angular yang cukup terkenal yaitu ng-hide / ng-show dengan melakukan pengecheckan variable yang ada pada session storage. 

Solution 3

Demikian secara teori solusinya. Berikut akan saya tunjukkan bentuk data yang tersimpan pada session storage dan penggunaan directivenya.

Privilege di Session Storage :
$scope.privileges = [
    {"name": "create_user"},
    {"name": "update_user"},
    {"name": "read_user"},
    {"name": "delete_user"}]

Directive
'use strict';angular.module('nostraApp')
     .directive('hasPrivilege', ['$sessionStorage', function ($sessionStorage){
            return {
                restrict: 'A',
                link: function(scope, element, attributes) {
                    scope.$watch(attributes.hasPrivilege, 
                     function(checkPrivilege){
                        var value = false;
                        if($sessionStorage.privileges){
                        var listPriv = $sessionStorage.privileges;
                        var privilege = listPriv.map(function (e) {
                            return e.name;
                        }).indexOf(checkPrivilege);
                        if (privilege != -1) {
                            value =  true;
                          }}
                       element.css('visibility', value ? 'visible' : 'hidden');
                       element.css('display', value ? 'inline' : 'none');
                   });
                }};
        }]);

HTML :
<button type="button" ng-click="addUser()" has-privilege='"create_user"'>
 Tambah User
</button>

Dengan demikian tidak ada lagi tambahan code di controller maupun service untuk melakukan pengecheckan. Tentunya hal ini tidak terikat hanya pada angular1 saja tetapi konsep juga dapat di implementasikan di angular2 ataupun angular 4.
Untuk kali ini sekian saja yang dapat saya bagikan untuk mempermudah pekerjaan kali ini. Semoga dapat berguna. Happy Coding~ :D