Catatan Belajar Functional programming dengan ES6

Dalam catatan ini merangkum hasil belajar saya saat menonton video presentasi dari Jeremy Fairbank, berikut video yang saya lihat di Youtube:

 

Apakah Functional Programming itu?

Selection_070.png

 

Mengapa Menggunakan Functional Programming ?

Selection_071.png

 

Basic Building Block

Selection_072.png

 

Empat Prinsip Functional Programming (04:31)

  1. Predictable (Pure and Declarative)
  2. Safe (Immutable State)
  3. Transparent (First Class State)
  4. Modular (Function as building blocks)

*Pembahasan lebih lanjut setelah Pengenalan Syntax ES6

 

Pengenalan Syntax ES6

 

Variable binding

Penggunaan var, let dan const

var a = 1
let b = 2
const c = 3

a = 99
b = 99
c = 99 // Akan Error disini karena c adalah constant binding

Perbedaan let dan var

var x = 0

if (x==0) {
  var a = 'kucing'
  let b = 'sapi'
}

document.write(a);
document.write(b); // Error, b tidak bisa diakses diluar block code if diatas

Lambdas / Anonymous Function

const a = (x, y) => x+y

document.write( a(2,2) ) // 4

// Fungsi diatas sama dengan

const b = function (x, y) {
  return x+y
}

document.write( b(2,2) ) // 4

Perbedaan Function Declaration dan Expressions

// Declaration

document.write(foo())

function foo() {
return "foo"
}

// Expression

document.write(bar())
var bar = () => "bar"

Ellipsis Operator

function foo(...x) {
  console.log(x)
}

foo("a", "b", "c")

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

[a, b, c, d] = [10, 20, 30];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

console.log(d);
// expected output: undefined

Destructuring dengan Ellipsis Operator

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

Sebagai Function Parameters

const thex = ([a,b,c]) => c // hasilnya: cccc

console.log(thex(["aaa", "bbbb", "cccc"]))

Default parameter values

const greeting = (name="yusuf", greet="hallo") => greet + ", " + name + "!"

document.write(greeting())

document.write(greeting("Jony", "Hi"))

Object.assign()

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters.

var karyawan = {ktp: "12345", nama: "Jhony"}

karyawan = Object.assign(karyawan, {alamat: "Jakarte"}, {hobi: "makan"})

console.log(karyawan) //output: {ktp: "12345", nama: "Jhony", alamat: "Jakarte", hobi: "makan"}

Perhatikan Mutasi yang terjadi pada variable karyawan

var karyawan = {ktp: "12345", nama: "Jhony"}

var karyawan2 = Object.assign(karyawan, {alamat: "Jakarte"}, {hobi: "makan"})

console.log(karyawan)
console.log(karyawan2)

//output logs diatas:
//(index):34 {ktp: "12345", nama: "Jhony", alamat: "Jakarte", hobi: "makan"}
//(index):35 {ktp: "12345", nama: "Jhony", alamat: "Jakarte", hobi: "makan"}

 

Lebih Detain Tentang 4 Prinsip Functional Programming

 

Predictable (Pure and Declarative)

What if Pixabay
Predictable (Pure and Declarative)

In computer programming, a pure function is a function that has the following properties:

  1. Its return value depends only on its parameters and not on any internal or external state (such as local static variablesnon-local variables or inputs from I/O devices).
  2. Its evaluation has no side effect (such as mutation of local static variables or non-local variables, or performing I/O operations).

Thus a pure function is a computational analogue of a mathematical function.

Contoh sederhana tentang Function yang tidak Pure (impure)

var x = 10

// Mengakibatkan side effect tak terduga dari nilai x (global state)
// Hasil dari fungsi tidak dapat ditebak
// 10x dipanggil bisa jadi 10 hasil berbeda
function add(y)  {
  return x + y // nilai x bisa saja sudah berubah oleh sesuatu hal
}

Contoh Pure Function

Selection_075.png
‘name’- nya diambil dari parameter bukan akses langsung variable diluar fungsi
Fungsi matematika
f(x,y) = x+y
Fungsi Javascript ES5
var add = function (x, y) {
  return x+1
}
Fungsi Javascript ES6
(x, y) => x+1 // Lihat mirip banget sama matematika kan?

Contoh Function yang tidak Pure (impure)

Selection_074.png
Fungsi merubah variable diluar fungsi begitu saja

impure_thoughts_by_fanfarekid-d9kas2w

Recursive

Contoh menghitung faktorial !n dengan rekursif

Selection_095.png

Dengan recursive

const factorial = n => {
  if (n<2) {
    return 1;
  }

  let result = n * factorial(n-1) // recursive
  
  //document.write( n + ' * factorial(' + (n-1) + ') = ' , result, '<br />')
  
  return result
}

document.write(factorial(4))

Tanpa recursive

const factorial = n => {
  let result = 1

  while(n > 1) {
    result *= n
    n--
  }

  return result
}

document.write(factorial(4))

 

Safe (Immutable State)

db9141f801bf5cf7061155ef398ec2f2

Create state, don’t mutate it!

Mutasi yang kita hindari

var a = {name: "kokom"}
var b = a

document.write(a.name) // masih kokom
b.name = 'munaroh'
document.write(a.name) // a jadi munaroh
Penjelasan kode diatas

“Variables that are assigned a non-primitive value are given a reference to that value. That reference points to the object’s location in memory. The variables don’t actually contain the value.” — @farm_fresh_js https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

 

Object.freeze()

The Object.freeze() method freezes an object: that is, prevents new properties from being added to it; prevents existing properties from being removed; and prevents existing properties, or their enumerability, configurability, or writability, from being changed, it also prevents the prototype from being changed. The method returns the passed object.

Cara untuk menghindari mutasi pada object dengan Object.freeze

const object1 = {
  property1: 42
};

const object2 = Object.freeze(object1);

object2.property1 = 33;
// Throws an error in strict mode

console.log(object2.property1);
// expected output: 42

 

Ingat pemahaman yang baik tentang Destructuring sangat diperlukan untuk mamahami kode dibawah ini.

Don’t / Jangan

Selection_076.png
constructor dan moveBy merubah global state x dan y, dalam Functional Programming itu bad practise

Do / Lakukan ini

Selection_077.png

Penjelasan gambar diatas:

  1. Fungsi createPoint mengembalikan Object [x, y] yang immutable dari param x, y yang diberikan.
  2. Fungsi point berisi immutable [x, y] di assign ke Fungsi movePointBy untuk di tambahkan parameter baru dx, dy yang diinputkan juga ke Fungsi  movePointBy.
  3. Fungsi movePointBy mengembalikan immutable object baru hasil dari [dx+x, dy+y].

 

Transparent (First Class State)

 

Modular (Function as building blocks)

 

Selesai…

 

Sumber lainnya

Advertisements

Publishing React Native App on Expo

Github

Expo adalah aplikasi “React Native” yang berisi SDK Expo. SDK Expo itu sendiri adalah kumpulan dari library2 native dan juga library2 JS yang berfungsi menyediakan akses kode kita ke fungsi bawaan sistem milik perangkat/device (seperti kamera, kontak, penyimpanan lokal, dan perangkat keras lainnya). dengan itu berarti kita tidak perlu lagi menggunakan Xcode atau Android Studio, atau dengan kata lain tidak perlu lagi menulis program dengan kode native sesuai platform yang diinginkan, dan itu juga berarti membuat proyek yang dikerjakan dengan React Native menjadi lebih portabel karena dapat berjalan di lingkungan manapun/apapun yang berisi SDK Expo.

Create your own Expo account

Selection_039.png
Expo registration form

Selection_040.png

Install and Run Expo XDE

XDE stands for Expo Development Environment. It is a standalone desktop app that includes all dependencies you’ll need to get started.
Download the latest version of XDE for macOSWindows (64-bit), or Linux.
On Linux, open with chmod a+x xde*.AppImage and ./xde*.AppImage.
Selection_042.png

 

Selection_043.png
User login

Open Your project on Expo XDE

Selection_044.png
Select wanted project to publish
Selection_041.png
Available thru global internet access
Selection_045.png
Local network only

 

Publish Your project on Expo

Selection_046.png

Selection_047.png
Publishing
Selection_048.png
Building

Application Published

Selection_049.png

You will get sms to your mobile phone regarding this publishing activity

photo_2018-07-29_16-14-48

 

Open Published App on The Android Expo Client

photo_2018-07-29_16-14-46

 

Final Result

photo_2018-07-29_16-14-44.jpg

 

 

 

Running React Native App on Genymotion Emulator

Build and Run React Native App on Genymotion Emulator

 

Download genymotion-2.12.2-linux_x64.bin

1.download

Execute genymotion-2.12.2-linux_x64.bin

2.jadikan-x-dan-execute

GENYMOTION is Starting up… ups,missing Virtual Box (Install Virtual-box here)

3.ups-install-dulu-virtual-box

GENYMOTION Welcome Screen

4.geny-motion-welcome-screen

Login to your GENYMOTION account

5.Login-ke-akun-kamu

GENYMOTION User Agreement

6.terima-egreement

Setup Android SDK Path on GENYMOTION

7.set-android-sdk8.sdk-path-set-selesai9.masuk-pertama-kali

Create First GENYMOTION Virtual Device

10.ditawari-bikin-virtual-device-oleh-GenyMotion12.installing-downloading-Virtual-device13.deploying14.installed

Start GENYMOTION Virtual Device

15.installed-Virtual-device16.starting17.booting18.running-virtual-device

Ups.. yarn start error

could not install *smartsocket* listener: Address already in use ADB server didn’t ACK

19.run-ract-error

Fix Error Above

20.fix-ADB-error21.react-building-js-bundle22.running-app

Done…

Cara mengecek tagihan Kartu Kredit Bank BCA Secara Online

Bila anda masuk ke halaman ini maka besar kemungkinan anda mengalami kasus seperti saya dimana tagihan kartu kredit tidak pernah dikirim kerumah oleh BCA dan tagihan juga tidak pernah dikirim ke Email padahal fitur tagihan via email sudah berkali-kali diaktifkan bahkan sudah berkirim email ke Customer service BCA, tapi tidak ada kemajuan, tagihan tak kunjung masuk ke Email maupun ke rumah via POS.

Bila anda mengalami hal yang sama terkait Tagihan Kartu kredit BCA yang tidak dikirim kerumah juga ke Email oleh BCA maka mengecek sendiri tagihan anda secara online adalah pilihan terakhir karena bila harus via telp akan banyak pulsa dan biaya terbuang.

  1. Masuk ke halaman eform klikbca https://eform.klikbca.com/fasilitasonlinecc/
  2. Lengkpi informasi kartu di formSelection_001.png
  3. Masuk kehalaman E-Statement

    Selection_003.png
    Hei, anda mau mengaktivasi PIN Kartu Kredit BCA anda juga bisa dari halaman ini
  4. Pilih bulan yang dinginkanSelection_004.pngSelection_005.png

Untuk kasus saya tidak ada tagihan di bulan yang saya pilih.

Gratis Tarik Tunai di ATM bank manapun dengan Debit BTPN Jenius

Kali ini saya akan berbagi pengalaman kedua saya bertransaksi dengan BTPN Jenius, bila kemarin saya melakukan pembayaran kartu kredit CIMB Niaga Syariah gratis dengan akun BTPN Jenius di HP Android android saya (dan terbukti Gratis) maka kali ini saya akan menceritakan pengalaman saya saat mencoba menarik tunai uang dari ATM BCA dengan kartu Debit BTPN Jenius yang baru saja saya miliki (kartu dikirim sekitar 1 minggu setalah varifikasi akun ke kantor saya).

Saldo saya Sebelumnya adalah :

Rp. 1.280.000

Tarik tunai via ATM BCA:

Rp. 100.000

tarik-tunai-btpn-jenius.jpg

Sisa saldo:

Rp. 1.180.000

Terbukti Tarik Tunai dan Juga bayar Kartu Kredit dengan BTPN Jenius adalah benar benar gratis (25x pertama tiap awal bulan).

Untuk detail apa saja yang gratis dan bagai kondisinya cek tabel berikut ini:

Tipe Transaksi Biaya
Transfer Online via Aplikasi
25x transaksi pertama setiap bulan Gratis
Transaksi berikutnya ke Bank Lain Rp3.000/trx
Transfer dengan metode SKN Rp3.000/trx
Transfer dengan metode RTGS Rp20.000/trx
Ke nomor HP & Email Rp3.000/trx
Transfer Via ATM (dengan m-Card dan x-Card)
Jaringan Prima/Bersama Rp6.500/trx
Tarik Tunai
Akumulasi 25x transaksi pertama menggunakan m-Card (kartu utama) and x-Card (kartu tambahan) di jaringan ATM Prima/Bersama setiap bulan Gratis
ATM BTPN Gratis
Transaksi berikutnya di jaringan Prima/Bersama Rp7.500/trx
Jaringan Visa Rp25.000/trx
Cek Saldo (m-Card & x-Card)
Via aplikasi Gratis
ATM BTPN Gratis
Jaringan Prima/Bersama Rp4.000/trx
Jaringan Visa Rp5.000/trx
Transaksi Gagal
Debit melalui EDC di jaringan Prima Rp2.000/trx
Jaringan Visa Rp5.000/trx
Berkas & Ganti Kartu
Print Dokumen Rp50.000 (maks/hari)
Buat Kartu Baru Free (1 kartu/tahun, Rp25.000 setelahnya)

Sumber: WEB Resmi BTPN Jenius

 

Membayar kartu kredit apapun gratis dengan Applikasi Mobile Android Bank BTPN Jenius: Link

 

Bayar Tagihan Segala Kartu Kredit dengan Mudah dan Gratis dengan BTPN Jenius

Saya baru saja membuat akun Bank BPN Jenius, konon akun Bank BTPN Jenius ini sangat canggih dan sakti, karennya lagi selain bisa transfer antar bank tanpa biaya juga bisa membayar tagihan berbagai kartu kredit tanpa biaya (GRATIS) dengan hanya menggunakan perangkat bergerak seperti laptop hingga ponsel pintar.

Jenius sendiri adalah aplikasi perbankan revolusioner yang dilengkapi dengan kartu debit VISA untuk membantu kamu melakukan aktivitas finansial seperti menabung, bertransaksi, atau mengatur keuangan dengan lebih aman, cerdas, dan simpel. Semua dilakukan dari satu tempat, semua dari smartphone.

Pada catatan kali ini saya akan membahas bagaimana cara membayar tagihan kartu kredit apapun dengan aplikasi mobile BTPN Jenius, pada kasus saya ini saya menggunakan BPTN Jenius saya untuk membayar CC/Credit Card/Kartu Kredit (baca: kartu buat ngutang) yang diterbitkan oleh Bank CIMB Niaga Syariah.

Pada postingan ini juga saya mencoba apakah benar membayar CC/Credit Card/Kartu Kredit Bank-Bank lain dengan BTPN Jenius ini gratis ?

Cara mudah, cerdas, dan aman untuk mengelola kehidupan dan keuanganmu. Kapan saja dan di mana saja. Langsung dari smartphone kamu.

Mari kita buktikan…

 

Transfer uang ke akun BTPN Jenius

1.Isi-Rekening

Login ke Applikasi

2.login-ke-dashboard

Masuk ke Dashboard

3.masuk-ke-dashboard

Masuk ke pilihan Send It

4.masuk-ke-send-it-menu

Pilih Kartu Kredit

5.pilih-menu-kartu-kredit

Masukan No Kartu Kredit yang ingin dibayar

6.masukan-no-kartu-kredit-anda7.Lanjut

Konfirmasi Pembayaran kartu kredit

8.layar-konformsi-bayar

Masukan Password (bukan PIN ya tapi password)

9.masukan-password

Konfirmasi Pembayaran telah Berhasil

10-sudah-terbayar

Lihat dari gambar diatas, yang saya lakukan adalah sebagai berikut:

  • Transfer ke BTPN Jenius dari Bank Muamalat
    • Saldo BTPN Jenius: 2.200.000
  • Bayar Kartu Kredit CIMB Niaga dengan BTPN Jenius
    • Bayar Kartu kredit :    650.000
    • Saldo BTPN Jenius : 1.550.000

Maka terbukti bayar cc dengan BTPN Jenius adalah gratis.

 

Untuk detail apa saja yang gratis dan bagai kondisinya cek tabel berikut ini:

Tipe Transaksi Biaya
Transfer Online via Aplikasi
25x transaksi pertama setiap bulan Gratis
Transaksi berikutnya ke Bank Lain Rp3.000/trx
Transfer dengan metode SKN Rp3.000/trx
Transfer dengan metode RTGS Rp20.000/trx
Ke nomor HP & Email Rp3.000/trx
Transfer Via ATM (dengan m-Card dan x-Card)
Jaringan Prima/Bersama Rp6.500/trx
Tarik Tunai
Akumulasi 25x transaksi pertama menggunakan m-Card (kartu utama) and x-Card (kartu tambahan) di jaringan ATM Prima/Bersama setiap bulan Gratis
ATM BTPN Gratis
Transaksi berikutnya di jaringan Prima/Bersama Rp7.500/trx
Jaringan Visa Rp25.000/trx
Cek Saldo (m-Card & x-Card)
Via aplikasi Gratis
ATM BTPN Gratis
Jaringan Prima/Bersama Rp4.000/trx
Jaringan Visa Rp5.000/trx
Transaksi Gagal
Debit melalui EDC di jaringan Prima Rp2.000/trx
Jaringan Visa Rp5.000/trx
Berkas & Ganti Kartu
Print Dokumen Rp50.000 (maks/hari)
Buat Kartu Baru Free (1 kartu/tahun, Rp25.000 setelahnya)

Sumber: WEB Resmi BTPN Jenius

 

Tarik tunai gratis dengan Debit Bank BTPN Jenius di ATM manapun (misal : Bank BCA): Link

Artisan tinker Error: In Configuration.php line 363: mkdir(): Permission denied

I got following error while running artisan tinker thru Google Compute VM console:

project@projectserver1:/var/www/html/Project_October$ php ./artisan tinker

In Configuration.php line 363:
 
mkdir(): Permission denied

And here is why and how to fix it:

This error occurs because you switch user (guessing using su) without “dash” option.

Replace su www-data with su - www-data and everything should works!

psysh tries to write runtime data in “original user” folder, instead of in “current user” folder…

PS my “current user” has XDG_RUNTIME_DIR env defined. Switching user without -, forced www-data to use the same env variable, while www-data hasn’t write permission in that folder.

Source: https://www.bountysource.com/issues/52403365-error-mkdir-permission-denied

 

 

Error while Installing Watchman: fatal error: Python.h: No such file or directory

Got following errors while installing Watchman, here is the error:

building 'pywatchman.bser' extension
creating build
creating build/temp.linux-x86_64-2.7
creating build/temp.linux-x86_64-2.7/pywatchman
x86_64-linux-gnu-gcc -pthread -DNDEBUG -g -fwrapv -O2 -Wall -Wstrict-prototypes -fno-strict-aliasing -Wdate-time -D_FORTIFY_SOURCE=2 -g -fdebug-prefix-map=/build/python2.7-nbjU53/python2.7-2.7.15~rc1=. -fstack-protector-strong -Wformat -Werror=format-security -fPIC -I/usr/include/python2.7 -c pywatchman/bser.c -o build/temp.linux-x86_64-2.7/pywatchman/bser.o
pywatchman/bser.c:31:10: fatal error: Python.h: No such file or directory
 #include <Python.h>
 ^~~~~~~~~~
compilation terminated.
error: command 'x86_64-linux-gnu-gcc' failed with exit status 1
Makefile:5060: recipe for target 'py-build' failed
make[1]: *** [py-build] Error 1
make[1]: Leaving directory '/home/yusuf/htdocs/watchman'
Makefile:1101: recipe for target 'all' failed
make: *** [all] Error 2

 

and here is how to fix it:

For apt (Ubuntu, Debian…):

sudo apt-get install python-dev   # for python2.x installs
sudo apt-get install python3-dev  # for python3.x installs

For yum (CentOS, RHEL…):

sudo yum install python-devel   # for python2.x installs
sudo yum install python34-devel   # for python3.4 installs

For dnf (Fedora…):

sudo dnf install python2-devel  # for python2.x installs
sudo dnf install python3-devel  # for python3.x installs

For zypper (openSUSE…):

sudo zypper in python-devel   # for python2.x installs
sudo zypper in python3-devel  # for python3.x installs

 

Source: https://stackoverflow.com/questions/21530577/fatal-error-python-h-no-such-file-or-directory

 

Repeat this following action

$ ./configure
$ make
$ sudo make install

 

Resolve Docker Container Cannot Connect To the Internet

╭─yusuf@yusuf-berkarya ~/htdocs/lms ‹feature/XXX-1234› 
╰─➤ docker exec -it lms_harukaedu_lms_1 bash 

root@fc9f04a74bbd:/var/www# ping www.google.com
ping: unknown host
root@fc9f04a74bbd:/var/www# exit

Just realized that my container doesn’t connect so some errors occurred in my dev env, and here is how to fix it:

Check Provider DNS

╭─yusuf@yusuf-berkarya ~/htdocs/lms ‹feature/LMS-3735› 
╰─➤ nmcli dev show | grep 'IP4.DNS'
IP4.DNS[1]: 203.142.82.222
IP4.DNS[2]: 8.8.8.8
IP4.DNS[3]: 203.142.84.222
IP4.DNS[4]: 182.253.236.236

 

Add the DNS to /etc/docker/daemon.json

{
 "dns": ["203.142.82.222", "8.8.8.8", "203.142.84.222", "182.253.236.236", "8.8.8.8", "8.8.4.4", "203.142.82.224", "182.253.236.236", "1.0.0.1", "1.1.1.1", "202.155.0.10", "202.155.0.15", "202.155.0.20", "202.155.0.25", "202.155.30.227", "10.0.18.38", "10.0.18.42"]
}

 

Restart Docker

╭─yusuf@yusuf-berkarya ~/htdocs/lms ‹feature/LMS-3735› 
╰─➤ sudo service docker start

 

It’s working Now

╭─yusuf@yusuf-berkarya ~/htdocs/lms ‹feature/LMS-3735› 
╰─➤ docker exec -it lms_harukaedu_lms_1 bash
root@fc9f04a74bbd:/var/www# ping www.google.com
PING www.google.com (172.217.27.228): 56 data bytes
64 bytes from 172.217.27.228: icmp_seq=0 ttl=51 time=26.188 ms
64 bytes from 172.217.27.228: icmp_seq=1 ttl=51 time=25.769 ms
64 bytes from 172.217.27.228: icmp_seq=2 ttl=51 time=127.347 ms
64 bytes from 172.217.27.228: icmp_seq=3 ttl=51 time=69.424 ms
^C--- www.google.com ping statistics ---
5 packets transmitted, 4 packets received, 20% packet loss
round-trip min/avg/max/stddev = 25.769/62.182/127.347/41.594 ms
root@fc9f04a74bbd:/var/www#