Tuesday, December 12, 2017

Getting Started with Math.js

Assalamualaikum Wr. Wb ~

Ini adalah salah satu postingan saya pada 3 bulanan di Nostratech, baiklah langsung saja saya ingin menulis dan berbagi pengentahuan mengenai Math.js yaitu sebagai Library matematika yang luas untuk Javascript dan Node.js.




Math.js dapat kita definisikan sebagai library javascript yang dapat digunakan dengan mudah oleh developer untuk membuat suatu aplikasi yang mengandung / menggunakan banyak proses aritmatika didalamnya, atau untuk membuat memecahkan suatu formula dan lebih kearah aplikasi untuk penunjang riset. Seperti menghitung kecepatan luncur suatu roket, kepadatan obat, serta untuk proyek yang berhubungan dengan akuntansi.

Berikut adalah beberapa Fitur Math.js
  1. Math.js ini sangat support berbagai macam tipe data, seperti numbers, big numbers, Complex numbers, fractions, units (cm,inch,meter,km,etc) , strings, arrays, and matriks.
  2. Sangat kompatibel dengan math.js bawaan javascript karena math.js ini sendiri dibuat dari javascript.
  3. Tidak ada dependensi dalam penggunaan math.js.
  4. Mengandung Expression Parser yang fleksibel dan melakukan komputasi yang simbolik.
  5. Math.js ini mengandung dengan sejumlah besar built-in fungsi dan konstanta.
  6. Jalan di segala macam engine javascript, mudah di kembangkan, dan yang pasti OPENSOURCE
Install Math.js
langsung aja, math.js ini dapat di install dengan berbagai paket manajer seperti npm dan bower, atau langsug download disini sedot gan

install via npm
npm install mathjs

Math.js dapat di Load di Node.js dan Browser, berikut saya jelaskan bagaimana Load math.js di browser.

Gunakan variabel global math  untuk mengakses library ketika sudah di load.

<!DOCTYPE HTML>
<html>
<head>
  <script src="math.js" type="text/javascript"></script>
</head>
<body>
  <script type="text/javascript">
    // use the math.js libary
    math.sqrt(-4); // 2i
  </script>
</body>
</html>

apabila ingin juga support di beberapa browser jadul seperti Internet Explorer 8 dan versi sebelumnya, library es5-shim harus di load juga.

Penggunaan

Math.js dapat digunakan mirip dengan JavaScript's built-in Math library. Selain itu, math.js dapat mengevaluasi ekspresi  dan mendukung operasi berantai ( chaining ) .

Dibawah ini adalah beberapa contoh kode menunjukkan bagaimana menggunakan math.js

// functions and constants
math.round(math.e, 3);            // 2.718
math.atan2(3, -3) / math.pi;      // 0.75
math.log(10000, 10);              // 4
math.sqrt(-4);                    // 2i
math.pow([[-1, 2], [3, 1]], 2);   // [[7, 0], [0, 7]]

// expressions
math.eval('12 / (2.3 + 0.7)');    // 4
math.eval('12.7 cm to inch');     // 5 inch
math.eval('sin(45 deg) ^ 2');     // 0.5
math.eval('9 / 3 + 2i');          // 3 + 2i
math.eval('det([-1, 2; 3, 1])');  // -7

// chained operations
math.chain(3)
    .add(4)
    .multiply(2)
    .done(); // 14

Simple, Clean, Pretty dan Mudah di baca

~ Reference :

Hit Business Services as much as N Times

1. Pendahuluan
Terkadang suatu Business Services (BS) biasanya di hit paling tidak 1 (satu) kali melalui Proxy Services (PS). Akan tetapi, ada beberapa kejadian BS tersebut memang diperlukan untuk di hit sebanyak N. Secara garis besar, konsepnya sama seperti ketika hit BS 1 (satu) kali, yang membedakan BS tersebut diletakkan dalam for-each. Kejadian untuk hit BS lebih dari 1 (satu) bisa terjadi karena beda database atau karena input delimeter (seperated menggunakan spesial karakter).

2. Studi Kasus, Tujuan, dan Flowchart
a). Studi Kasus
Studi kasus yang akan diambil anggap saja terdapat 2 (dua) tabel terpisah, pada 2 (dua) database yang terpisah juga. dengan contoh skema tabel seperti gambar di bawah ini :
Seperti yang terlihat pada gambar di atas akan menjadi seperti ini :
A. B001 pada tabel TB01 akan di hit sebanyak 2 (dua) kali, karena pada tabel TB09 idLayanan B001 sebanyak 2 (dua) record.
B. B003 pada tabel TB01 akan di hit sebanyak 1 (satu) kali, karena pada tabel TB09 idLayanan B003 sebanyak 1 (satu) record.
C. dan begitu seterusnya untuk record yang lainnya.

b). Tujuan
para pembaca memahami bagaimana melakukan perulangan untuk hit sebanyak N ke BS.

c). Flowchart

3. Implementasi
a). XSD
pada tahap ini, XSD di-generate menggunakan JDEV. Untuk melakukan query dibantu dengan sebuah view. view tersebut memerlukan parameter (branchid) dan mengembalikan (branch_id, AreaId, dan AreaName).

i). Input
ii). Output

b). Business Services
pada tahap ini, tidak ada yang "special" untuk membuat BSnya karena untuk melakukan looping berada di level PS.

c). Proxy Services
1. tambahkan sebuah stage.
2. tambahkan for-each

3. didalam for-each tambahkan service callout, seperti gambar di atas.
4. tambahkan penamaan request dan response sesuai keinginan. Nah, kolom "service" panggilah nama BS yang sudah dibuat sebelumnya. sebagai contoh gambar di bawah ini. 
5. isi assign yang berada pada request action, seperti gambar di bawah ini
6. di dalam for-each, tapi di luar service callout tambahkan insert. fungsi insert disini guna menggabungkan hasil balikan dari setiap query. 
7. isi pada insert seperti gambar di bawah ini. Nah, expression "Result" isinya seperti disampingnya.
8. jika sudah lakukan transformasi ke bentuk (output) yang diinginkan. dalam hal ini, seperti screen shot xsd 

9. untuk sampai ke bentuk pada nomer 8 tidak langsung jadi, masih perlu transformasi lg.

tag "<get:LayananCollateral>" menyesuaikan terhadap point nomer 8 baris 172.
tag "<get:Layanan>" menyesuaikan terhadap point nomer 8 baris 178.
tag "<get:IDLayanan>, <get:NamaLayanan>" menyesuaikan terhadap point nomer 8 bari 181 dan 182.

jika sudah semua tinggal dicoba pada soapui, dengan hasil pada gambar di bawah ini.

seperti contoh bagian point 2 yang studi kasus, bahwa :
a. idbranch 1020 hanya memiliki 1 (satu) layanan.
b. idbranch 1021 memiliki 2 (dua) layanan.

dan sekian tutorial dari gw, kiranya bermanfaat bagi pembaca sekalian. jikalau ada yang kurang jelas, silahkan bertanya ya...

Sunday, December 10, 2017

Android Data Binding

Salah satu hal yang cukup melelahkan dalam Android development adalah mendeklarasikan komponen UI dan menggunakan findViewById secara berulang-ulang. Adanya external library ButterKnife yang membuat code lebih rapi, terstruktur dan menghilangkan penggunaan findViewById secara berulang-ulang. Blog tentang ButterKnife bisa dilihat disini

Pada Google I/O 2015, Google mengeluarkan Data Binding Library untuk Android. Tujuan data binding adalah untuk declarative layout dan meminimalisir penggunaan kode untuk mengikat application logic dan komponen layout. Sebelumnya, kita lihat dulu contoh penggunaan findViewById dan ButterKnife. Berikut adalah contoh layout xml


Jika menggunakan findViewById, pada class Activity bisa dibuat seperti ini

cukup merepotkan jika kita mempunyai banyak komponen UI. Selanjutnya jika menggunakan ButterKnife, pada class Activity bisa dibuat seperti ini

Bisa dilihat dengan ButterKnife dapat menghilangkan penggunaan findViewById berulang-ulang dan membuat code lebih rapi. Selanjutnya adalah bagaimana cara menggunakan data binding.

1. Enable DataBinding di App.Gradle


2. Create POJO if necessary, ie:


3. Wrap Parent ViewGroup in <layout> tag. Define meta data of binding in <data> tag and set the variables defined <data> tag in binding.

Bisa dilihat data variable User di-bind dengan TextView (pada atribut "android:text"). Untuk "user.nama" dan "user.address" mengikuti dari POJO yang dibuat. 

4. Inflate layout using DataBindingUtil in Activity or Fragment Class. ie:


Hasilnya TextView yang sudah di-bind tadi akan menjadi "Haris" dan "Jl. Kartika Pinang". Dengan databinding, kita tidak perlu lagi mengetik findViewById ataupun @BindView. Selain itu, dengan databinding kita bisa menyediakan sedikit simple logic pada xml layout, contoh:
databinding di android nantinya digunakan dengan MVVM pattern.
Lebih lengkap mengenai  databinding bisa dilihat disini. Semoga membantu/

PS: Please correct me if I'm wrong :)

Reference:

Tuesday, December 5, 2017

Automasi browser dengan Node, Selenium The Origin

Hai Geeks, di series ke-4 dan terakhir dari Automasi browser dengan Node, kita akan membahas automasi browser yang paling tua dan menginspirasi automasi lain, Selenium. Casper, Zombie, Nightmare lahir setelah adanya Node, sedangkan Selenium telah ada sebelum Node. Selenium di bahasa pemrograman lain pun sudah sering digunakan sebagai standar untuk testing



Selenium adalah framework automasi web browser untuk cross browser testing. Selenium membutuhkan driver spesifik untuk setiap browser. Setelah setting driver, selenium akan men-drive browser tersebut untuk menjalankan automasi. Untuk download driver sudah disediakan di npm selenium-webdriver

Untuk demo pertama, kita akan mencoba cek harga terkini dari bitcoin

npm i selenium-webdriver


Lalu demo kedua seperti biasa, cek instagram Adi Trioka muncul pertama di Google


Kelebihan dan kekurangan selenium sebagai berikut

Pro :

  • Untuk penggunaan sehari-hari lebih mudah karena dari browser
  • Browser menyimpan cookies

Kontra :

  • Kode Panjang
  • Cukup berat saat membuka browser

Sumber
Selenium


Friday, December 1, 2017

Automasi browser dengan Node, Casper the new Phantom

Hai Geeks, di series ke 3 dari Automasi browser dengan Node dan posting ke 5 ini, kita akan membahas mengenai salah satu headless browser yang sudah lama dikenal, PhantomJS. Uniknya, PhantomJS adalah buatan salah seorang developer Indonesia bernama Ariya Hidayat, dan PhantomJS ini sudah ada sejak tahun  2010

Sayangnya PhantomJS hanyalah sebuah browser, jadi untuk navigasi dan testingnya sulit. Untuk mempermudah maka bisa menggunakan CasperJS. Duet Casper dan Phantom yang saling melengkapi



Untuk menjalankan CasperJS, harus dengan mendownload PhantomJS terlebih dahulu di download PhantomJS. Lalu atur environtment variabel. Untuk macOS maka arahkan ke phantomJS, contohnya

export PHANTOMJS_EXECUTABLE=/User/phantomjs/bin/phantomjs phantomjs

Setelah ini lalu install casperJS secara global dengan

npm i casperjs -g

Demo pertama akan kita coba untuk list semua blog terbaru di blog nostratech

Berbeda dengan yang lain, cara menjalankan file ini dengan

casperjs list_blog.js

Lalu untuk demo kedua seperti biasa, cek instagram aditrioka muncul pertama, namun kali ini tidak menggunakan mocha, tapi casper itu sendiri

Untuk menjalankannya dengan

casperjs test casper-test.js

Kelebihan dan kekurangan casper-phantom yang terasa sebagai berikut
Pro:
  • Made by Indonesian
  • Sudah langsung support assert untuk testing
  • Pemrosesan cepat
Con:
  • Setting cukup membingungkan dengan banyaknya requirement
  • Dokumentasi Phantom dan version sangat membingungkan
  • Untuk penggemar mocha, beda feeling
  • Proses hanya bisa dipantau dengan command line
  • Kode panjang
Selamat mencoba casper-phantom. Creativity is the limit


Sumber

Phantom
Casper