Tunnel aman ke localhost, lets Ngrok 'n roll

Di posting perdana ini, saya akan mengenalkan aplikasi bernama Ngrok (dibaca en-grok). Ngrok adalah aplikasi untuk membuat tunnel menuju ke localhost

Seperti di ilustrasi, programmer mengerjakan kodingan di lokalnya, tanpa perlu mendeploy kode ke server development, klien bisa langsung melihat hasil perkerjaan secara real time di lokal programmer melalui ngrok

Alan Shreve, sang pembuat aplikasi ini menjelaskan kegunaan dari ngrok ini antara lain

• Sharing website sementara yang berjalan di lokal
• Demo hackathon tanpa deploy
• Develop service yang menggunakan webhooks (HTTP Callback) dengan mengizinkan untuk mereplay request
• Debugging service dengan memantau trafik HTTP
• Menjalankan service dari mesin yang dilindungi firewall dari internet

Menurut saya ngrok dapat mempercepat proses development dengan melewati proses deploy yang berulang-ulang di development saat di tes oleh klien. Ngrok juga digunakan untuk mengetes desain responsif. Fitur terkerennya menurut saya adalah memonitor trafik yang bisa diakses oleh API

Meski terdengar sakti, ngrok cocok untuk project dengan tim dengan skala kecil dan versi gratisnya memberikan subdomain yang random dan berganti-ganti. Versi berbayarnya paling murah 5$ per bulan

Package ngrok sudah ada di npm, namun jika tidak berbayar lebih baik pakai yang universal. Berikut cara mudah untuk menggunakan ngrok. Dalam contoh ini saya coba membuat tunnel ke aplikasi Hello World di nodeJS

Step 1
Jalankan aplikasi pada suatu port, untuk contoh ini Hello World di NodeJS
Lalu jalankan dengan command "node app" di terminal, maka dengan membuka localhost:3000/world terlihat aplikasi sudah berjalan di port 3000

 

Step 2

Download dari ngrok, Unzip, dan Jalankan ngrok.exe

Masukkan command sesuai dengan port, dalam contoh ini maka "ngrok http 3000"

 

Aplikasi Hello World sudah dapat diakses sesuai dengan url terlihat di ngrok.io

Step 3
Buka localhost:4040
Di sini terlihat url dari subdomain ngrok.io, coba masukkan url sesuai diikuti '/world' atau kata-kata lain. Terlihat tunnel sudah sesuai dengan localhost:3000

 

Di localhost:4040, semua request, response dengan lengkap dapat terlihat

 

Data ini dapat diolah dari bentuk JSON dengan url localhost:4040/api/requests/http

 

Untuk mendalam dan lebih lengkap bisa cek di dokumen ngrok

Happy Code

Rukaan Nasrullah Adha

Sumber :

https://ngrok.com/docs

https://github.com/inconshreveable/ngrok

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:

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

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

- RemoveSoapEnvelope

- Java Converter

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. :)