Wednesday, August 9, 2017

Share code di blog dengan cara Gist GitHub

Berhubung banyak yang mau mulai nulis blog nih, dan sejauh ini kita share code di blog dengan cara standar, saya mau share cara like a boss dengan Gist GitHub

  1. Login ke GitHub, kalau belum punya register dulu ya, lalu masuk ke Gist GitHub
  2. Nah, isi Gist Description dengan deskripsi, Filename dengan nama file berikut dengan extensionnya contoh app.js, lalu tulis kode di textarea yang ada, bisa juga menambah kan dari lebih dari 1 file code dengan menambah Add file. Jika sudah selesai klik tombol Create Public Gist
  3. Setelah selesai, web akan redirect ke halaman file tersebut, copy code untuk embed tersebut
  4. Saat menulis blog, kita dapat meng-embed code tersebut dengan klik HTML
  5.  Paste code tersebut di tempat yang diinginkan, selesai
  6. Berikut contoh share code di Gist GitHub, terlihat lebih profesional dan rapih
  7.   
Happy Blogging
Sumber : About Gists

Wednesday, July 5, 2017

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 :

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