Wednesday, June 15, 2016

Video Carousel AngularJS

Carousel atau slider biasanya di gunakan untuk menampilkan beberapa foto, tapi bagaimana dengan video? apakah bisa juga di buat slidernya mengunakan angularjs? Apakah caranya sama atau beda?Blog saya kali ini akan membahas cara menampilkan video dalam bentuk carousel.
Yang perlu kita lakukan pertama kali adalah menyiapkan video yang akan di tampilkan, kali ini saya mengambil url video dari youtube.

 <iframe width="100%"  
  ng-src="https://www.youtube.com/embed/RvIZGBUnLs8" frameborder="0" allowfullscreen>  
  </iframe>  

Cara yang di pakai untuk membuat video carousel sebenarnya sama saja dengan membuat image carousel, hanya saja perbedaan nya ada pada penggunaan iframe (untuk video) dan img (untuk gambar). Berikut cara penggunakan Carousel nya





Pada code di atas, tertera carousel-indicator yang di dalam nya terdapat data target. Data target ini menunjukkan urutan index dari video yang pertama kali muncul yang di tandai dengan class "active".
Carousel juga dapat di atur secara manual (tidak otomatis menjalankan slide) yaitu dengan pengaturan yang ada di "left corusel-control" dan "right carousel-control", sehingga kita dapat mengganti slide secara manual.

Dan hasilnya pun seperti ini,



Demikianlah cara penggunakan carousel untuk video menggunakan angularjs. Ternyata mudah, hanya mengganti cara menampilkan gambar nya saja. Semoga bermanfaat.

Tutorial Golang Part 3

Masih membahas bahasa pemrograman Go, yang menlanjutkan meteri kami sebelumnya. Di blog ini kami akan membahas tentang :
  • Variable
  • Array
  • Struct

Variable

Variable adalah tempat kita menyimpan data. Dimana data tersebut akan kita gunakan lagi dan bisa berubah sesuai dengan kebutuhan kita. Berikut contoh penggunaan variable di Go :



Pada prinsipnya kita menggunakan var untuk menunjukan itu variable lalu di lanjutkan dengan nama variable, tipe data dan value awalnya (jika ada).

Untuk lebih ringkasnya deklarasi variable bisa menggukan cara berikut :
f := "short"
yang artinya kita tidak perlu menulis kata var dan tipe datanya.

Saya pribadi lebih suka menggukan cara ini karena lebih singkat.

Array

Array adalah variable yang didalamnya bisa terdiri dari 1 atau lebih element. Berikut contoh penggunaan array di Go :




Deklarasi array sama dengan variable, bedanya ada tambah [] untuk menentukan jumlah element yang ada.






Cara shortcut-nya juga hampir sama dengan variable dengan menggunakan :=

Sedangkan contoh disebelah adalah penggunaan array dengan 2 dimensi.





Struct

Struct adalah variable yang isi datanya lebih komplek. Kalau bisa kita analogikan struct hampir sama dengan Object di bahasa pemrograman OOP. Berikut contoh penggunaan struct di Go :


Cara deklarasinya dengan menggunakan keyword type lalu nama variablenya dan diakhir dengan keyword struct.












Disini ada simbol & yang artinya kita menggunakan pointer.





Sementara itu penjelasan singkat tentang Variable, Array dan Struct. Nanti kan blog-blog kami selanjutnya. I hope you enjoy it.









Alternative Backend Mapping in HAProxy

HAProxy memiliki fitur Access Control List (ACL) [1] yang sangat bermanfaat dalam menentukan backend mana yang akan dilewatkan sebuah request yang masuk ke HAProxy. Kriterium yang selama ini paling saya gunakan adalah hdr(host), di mana akan sangat bermanfaat terutama jika disinergikan dengan fitur server block dari nginx[2]. Misalnya untuk me-load-balanced 1 atau lebih nginx cluster yang memiliki banyak server name, kita cukup mendefinisikan sebuah frontend proxy dengan banyak kombinasi acl, hdr(host), dan use_backend sehingga request yang masuk dapat diteruskan ke backend proxy yang tepat sesuai dengan keinginan kita.

Berikut adalah contoh konfigurasinya:
# /etc/haproxy/haproxy.cfg
...
frontend https-endpoint
 bind *:443 ssl crt /etc/ssl/somedomain.com/STAR_somedomain_com.pem
 mode http
 acl WWW_REQUESTS hdr(host) -i www.somedomain.com
 acl DEV_REQUESTS hdr(host) -i dev.somedomain.com
 acl FIN_REQUESTS hdr(host) -i fin.somedomain.com
 acl CS_REQUESTS hdr(host) -i cs.somedomain.com
 acl API_REQUESTS hdr(host) -i api.somedomain.com
 use_backend www-nodes if WWW_REQUESTS
 use_backend dev-nodes if DEV_REQUESTS
 use_backend fin-nodes if FIN_REQUESTS
 use_backend cs-nodes if CS_REQUESTS
 use_backend api-nodes if API_REQUESTS
 default_backend dummy-nodes
...

Walaupun metode ini sangat powerful untuk kebutuhan seperti ini, namun menggunakan metode ini memiliki kekurangan terutama jika jumlah hostname yang perlu dievaluasi cukup banyak. Terbayang sebuah frontend proxy section yang memiliki jumlah baris yang banyak untuk mengevaluasi 1000 hostname misalnya. Untungnya HAProxy memiliki metode lain untuk menyelesaikan permasalahan ini. HAProxy mulai memperkenalkan fitur map sejak versi 1.5 [3], di mana HAProxy dapat membaca file selain konfigurasi HAProxy untuk menentukan backend mana yang perlu dijalankan terhadap sebuah hostname tertentu.

Format file yang perlu dibuat untuk proses mapping ini sangat sederhana, yaitu 2 kolom yang dipisahkan dengan whitespace. Kolom pertama merupakan kolom untuk kemungkinan nilai yang akan ada, sementara kolom kedua merupakan nama backend proxy section yang akan dijalankan ketika nilai yang telah dievaluasi dari frontend cocok dengan kolom pertama.

Jika menggunakan contoh sebelumnya, kurang lebih isi dari map file tersebut adalah seperti ini:
# /etc/haproxy/maps.d/20-somedomain.map
...
#domain name   #backend name
www.somedomain.com  www-nodes
dev.somedomain.com  dev-nodes
fin.somedomain.com  fin-nodes
cs.somedomain.com  cs-nodes
api.somedomain.com  api-nodes
...

Kemudian muncul pertanyaan, bagaimana menutupi kebutuhan untuk default_backend? Jawabannya ada di format HAProxy map-nya itu sendiri di konfigurasi utama HAProxy. Berikut adalah konfigurasi HAProxy yang baru dengan menggunakan HAProxy map:
# /etc/haproxy/haproxy.cfg
...
frontend somedomain_https-endpoint
 bind *:443 ssl crt /etc/ssl/somedomain.com/STAR_somedomain_com.pem
 mode http
 use_backend %[req.hdr(host),lower,map_dom(/etc/haproxy/maps.d/20-somedomain.map,generic_dummy-nodes)]
...

Konfigurasi menjadi lebih sederhana dan singkat, sehingga konfigurasi juga lebih terbaca. Selain itu jika kita perhatikan lebih seksama, format HAProxy map ini generik dan dapat digunakan untuk fungsi lain selain untuk membaca kombinasi hostname request dan backend routing. Misalnya untuk menggantikan fungsi evaluasi ACL untuk prefiks dari web site dan lain-lain. Saya mulai menggunakan konfigurasi ini untuk infrastruktur di kantor dan sejauh ini berjalan sangat stabil.

Sekian artikel saya kali ini, selamat mencoba ya! :)

Daftar Referensi:

Data Binding Angular 1 vs Angular 2

Data Binding pada angular merupakan salah satu fitur yang paling saya sukai. Two ways data binding yang sangat mudah digunakan membuat hidup ini berasa lebih mudah, terutama bagi saya yang tidak menyukai javascript maupun jquery.

Two Way Data Binding merupakan konsep yang diusung oleh angular sejak angular 1.
Model dan View akan terus menerus melakukan sync sehingga data yang diupdate baik dari controller maupun view akan saling mengupdate dan selalu sama. Angular1 menggunakan sebuah variable bernama $scope untuk menjadi penjembatan antara model dan view. Semua data yang berada dalam $scope akan selalu diawasi. Hal itu membuat model dan view selalu sync satu sama lainnya, tetapi jangan berpikir bahwa itu semua semanis kelihatannya. Yap, angular melakukan watch pada semua variable $scope yang aktif dan tentunya menghabiskan resource yang cukup besar. Sebuah kesalahan kecil seperti melakukan reuse variable $scope pada html yang sedang di hide saja bisa menyebabkan rendering behind the view yang luar biasa hingga menyebabkan freeze padahal hanya untuk mendisplay ( yap, saya pernah mengalaminya )

Lalu bagaimana dengan Angular2?
Berikut sample code agar lebih mudah di cerna : 
<div>{{article.name}}</div>
<article-detail [article]="selectArticle"></article-detail>
<div (click)="selectArticle(article)"></div>
Pada angular 2 terdapat 3 macam data binding : 
Data Binding Angular 2
  • Interpolation : {{article.name}}interpolation berfungsi untuk menampilkan value dari component pada div biasa
  • Property Binding : [article]
    property binding berfungsi untuk menampilkan value dari component pada property, atau dari parent ke child
  • Event Binding : (click)
    Event Binding berfungsi untuk mengirim data dari view menuju component
Lalu dari ketiga macam tipe binding yang disediakan Angular 2. Terdapat juga two way data binding yang merupakan kombinasi dari property binding dan event binding yang merupakan bentuk dari Two Data Binding Angular 2. 
<input [(ngModel)]="article.name">
Pada Two Way Data Binding, Angular menggabungkan property dan event binding. Perubahan yang dilakukan oleh user akan dikirim ke component melalui event binding, sedangkan Perubahan pada component akan dikirim menggunakan property binding. Hal tersebut membuat angular tidak perlu melakukan watch pada suatu variable melainkan melakukan aktivitas ketika ada triger baik dari component maupun dari view. Hal yang sama juga dapat dilakukan antar parent dan child component.

Two Way Data Binding Angular 2
Angular 2 telah memberikan solusi yang lebih baik untuk masalah performance data binding yang terjadi pada Angular sebelumya. Dan tentunya kita dapat tetap berbahagia tanpa perlu repot memproses two data binding sendiri. Sekian saja untuk kesempatan kali ini.
Sampai berjumpa pada kesempatan berikutnya. Happy Coding :D

Format Penulisan Pada Angular2

Pada kesempatan kali ini Saya akan membahas mengenai Angular2. AngularJs akhirnya merilis Angular 2 pada pertengahan tahun 2016( status saat ini masih beta 17). Sayangnya Angular 2 bukan merupakan upgrade dari Angular 1 melainkan merewrite Angular 1 menjadi framework yang baru. Angular2 melakukan beberapa perubahan seperti yang sangat signifikan adalah mengganti 2 component utama Angular 1 yaitu controller dan $scope dengan component dan directives, modularity, dependency injection, service, serta template.

Selain itu pada Angular2, angular menyediakan 3 macam format penulisan. Typescript, Javascript, dan Dart. Pada kesempatan kali ini Saya akan membahas apa saja 3 macam format penulisan pada angular2.

3 macam format penulisan pada AngularJS 2: 

  • Typescript
    Typescript merupakan penulisan yang di sarankan oleh angular2. Typescript sendiri merupakan bahasa yang dgunakan untuk membangun Angular2. Typescript atau dikenal dengan Microsoft's Typescipt adalah Javascript yang memiliki fitur tambahan seperti object oriented programming, lambda, dan beberapa hal lainnya. Typescript sendiri biasa digunakan untuk menghandle project besar yang sulit dimaintenance apabila menggunakan Javascript.
    Dengan menggunakan Typescript maka file component dan master file akan memiliki extensi .ts.
    Berikut adalah struktur dasar apabila menggunakan format typescript : 
         Terlihat disana ada beberapa file :
    • app.component.ts : File ini merupaka root component. Dalam sebuah aplikasi angular, setidaknya harus ada 1 root component. Standarnya root component disebut sebagai AppComponent.
    • main.ts : File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
    • package.json : Seperti namanya, file ini berisi package- package yang dibutuhkan oleh apps untuk menjalankan fungsinya.
    • systemjs.config.js : File ini merupakan file config untuk SystemJS. SystemJS digunakan untuk membantu load library yang dibutuhkan. SystemJS hanyalah salah satu alat bantu dan dapat diganti dengan library management lainnya.
    • tsconfig.json : File ini merupakan file config untuk Typescript compiler 
    • typings.json : File ini merupakan file definition yang berisi identity dari Typescript yang digunakan
    • index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis
  • Javascript
    Javascript merupakan bahasa pemprograman yang cukup terkenal di dunia pemprograman web. Angular menggunakan Javascript menjadi salah satu format yang dapat digunakan pada Angular2. Pada format penulisan javascript file yang akan digunakan akan memiliki extensi .js seperti yang terlihat pada gambar. Apabila anda pecinta javascript dan bersedih karena sebelumnya angular membuat coding web tanpa perlu menyentuh javascript. Maka Javascript format pada Angular2 merupakan jalan kebahagiaan.











            Terlihat disana ada beberapa file :
    • app.component.js : Sama halnya seperti pada Typescript format. Merupakan root component pada angular apps.
    • main.js : Sama halnya seperti pada Typescript format. File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
    • package.json : Seperti halnya seperti pada Typescript format, file ini berisi package- package yang dibutuhkan oleh apps untuk menjalankan fungsinya.
    • index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis
  • Dart
    Dart merupakan class based oriendted programming yang dikembangkan untuk membangun website, server dan mobile apps. Pada format penulisan Dart, Angular telah mengemas javascript menggunakan Dart dan menyediakan fiturnya dengan cukup lengkap sehingga lebih mudah digunakan untuk memulai memahami konsep angular2. Tetapi dikarenakan pada dasarnya Angular menggunakan Dart untuk membungkus Javascript, Dart format memiliki keterbatasan seperti membuat user harus menghafalkan format- format yang ada sehingga tidak direkomendasikan untuk project dengan skala besar dan kompleks.
             Terlihat disana ada beberapa file :

    • app.component.dart : Sama halnya seperti pada Typescript format. Merupakan root component pada angular apps
    • main.dart : Sama halnya seperti pada Typescript format. File ini berfungsi memberitahu angular untuk mengeload component yang dibutuhkan.
    • pubspec.yaml : Merupakan file yang mendeklarasikan angular dan browser package yang digunakan sebagai dependency. Angular masih melakukan perubahan untuk format file ini pada masa beta status saat ini. 
    • index.html : Master html tempat semua script di daftarkan dan aplikasi ditulis
Setelah mengetahui 3 macam penulisan pada AngularJs. Kita bisa menentukan format yang mana yang ingin dan cocok kita gunakan pada project yang akan dibuat serta kemampuan anggota team yang ada.
Semoga Tulisan ini dapat membantu. Happy Coding :D

Lesson Learn #1 : Pelajaran berharga selama bergabung dengan tim produk

Sudah hampir 1 tahun saya bergabung di tim product (product development team*). Dan dalam satu tahun itu banyak sekali hal yang saya pelajari.
Ada beberapa hal di tim product yang sangat berbeda dengan tim project, paling tidak uber membutuhkan waktu 3 tahun untuk sampai pada “better, faster, cheaper, than a taxi”.

Build your market first
Pada dasarnya hasil akhir sebuah product adalah ditentukan dari seberapa banyak user yang menggunakan. Sebagai contoh : jika itu marketplace selain seberapa banyak usernya, maka seberapa banyak repeat order yang terjadi.
Sebagai contoh adalah sejarah sale stock Indonesia yang menurut saya tech company paling top menurut hemat saya (jelas saya subjective ^^v). Awalnya sale stock bukanlah tech company, namun online shop biasa yang mengandalkan sirclo dan fan page di Facebook. Lesson learn yang bisa diambil adalah sebelum menentukan akan membagun sebuah product (dengan dukungan tech team) business model harus sudah tervalidasi terlebih dahulu. Market sudah ada, dan revenue sudah jelas. Yes, secure your demand and market first. Mengapa demikian? Karena invest tech team itu tidaklah murah, dan pada dasarnya mobile atau web adalah sarana pengganti proses yang sudah ada agar customer lebih mudah. Jika customer belum ada, bagaimana mungkin akan dapat revenue, mungkin itu bisa disebut bakar uang.

Product Owner, CTO and Product Manager is a must
Ini dibutuhkan ketika business model sudah tervalidasi dengan baik dan revenue sudah melimpah. Dalam gambar dibawah “You are here” merupakan product manager. Product owner dalam lingkaran bisnis dan CTO dalam lingkaran tech. Mengapa 3 role ini sangat penting. Ketika membangun sebuah product, hal utama memang bisnis, bagaimana bisnis bisa scale up dengan cepat, dan untuk mendukung bisnis dengan cepat perlu dukungan tech team. Tim bisnis punya roadmap, product owner berperan. Tim tech juga harus punya roadmap yang harus sejalan dengan bisnis yg ada, CTO yang berperan. Product Manager lah yang menjembatani keduanya agar dari sisi bisnis dan tech agar align. Ketika salah satu role tidak ada maka akibatnya, contohlah tidak ada CTO, so it will be no tech roadmap, dalam product development, tech roadmap itu penting karena product akan growth terus (jika sukses), dan itu perlu dipertimbangkan langkah demi langkah dalam proses pengembangan nya. Contoh sederhana, karena diburu waktu maka team tech melakukan development seadanya, dengan monolitik arch, akibatnya saat product makin compleks, susah untuk bisa scale. Begitu juga ketika tidak ada product manager, tidak ada yang menjembatani antara bisnis dan tech tim, antara bisnis dan tech tim bisa tidak align, tim tech sudah develop A, namun di akhir saat sudah jadi tim bisnis minta nya jadi B, itu akan jadi pekerjaan yang berulang-ulang dan membuang-buang waktu.


sumber https://media.licdn.com/mpr/mpr/jc/AAEAAQAAAAAAAAUxAAAAJDA0MmRhNjIzLWU0MjEtNGYyYi1hNTU0LTAyYzI2YzEyZDRmOQ.png

Both business roadmap dan tech roadmap is a must
Meskipun roadmap bisa berubah seiring waktu namun itu merupakan keharusan, karena roadmap merupakan guidance alias petunjuk kemana arah dan apa yang harus dikerjakan untuk mencapai target atau goal. Tanpa roadmap baik dari sisi bisnis maupun tech team akan kehilangan arah. Untuk tech team, you can’t code before the design and process is clear.

Get your priorities straight
Setelah roadmap nya jelas, maka perlu dipecah dalam task-task kecil dan saling disesuaikan antara tech team dan business team, priority mana yang harus dikerjakan terlebih dahulu. Target bisnis mana yang harus di achieve terlebih dahulu dengan support tech team. Jangan merubah prioritas ditengah-tengah development, karena akan menggangu development dan membuat tim memulainya dari 0. Jika memang ada sesuatu yang mendesak, priority yang berjalan, sebaiknya diselesaikan terlebih dahulu dalam sprint tersebut, di-release dan untuk sprint selanjutnya bisa dikaji ulang. 

Release sebanyak mungkin
Semakin banyak release, semakin cepat product tersebut bisa divalidate. Jika menggunakan sistem sprint (misal 2 minggu) maka setiap 2 minggu release, dan bisa divalidate. Untung nya adalah, ketika ada yang tidak sesuai, maka bisa diketahui lebih cepat, dan bisa dikaji untuk langkah selanjut nya.

Full role for tech team
Product tidak sama dengan project, project life time nya terbatas, namun kalau product, jika sukses, bisa seumur hidup. Membangun tech team di awal menurut saya (sekali lagi ini subjective) diluar CTO, tidak diperlukan banyak orang, namun masing-masing role ada. Minimal ada frontend engineer, backend engineer, QA engineer, dan system engineer. Tanpa salah satunya jelas akan keteteran. Contoh sederhana, di Indonesia (menurut saya) masih meremehkan peran QA, padahal kalau QA nya nggak happy (happy means no bug), gimana bisa release. Product merupakan sesuatu yang fiturnya akan selalu bertambah, dan perlu divalidate setiap hari, untuk bisa memastikan defect lebih awal, jika sebuah product di release tanpa melalui proses QA yang selayaknya, jangan harap user akan terpuaskan dengan product nya. Pada dasarnya engineer adalah manusia biasa yang bisa khilaf dan membuat bug. System engineer membantu kita dalam setup environment, FE dan BE engineer sudah pusing dengan dev apps, padahal untuk release butuh setup production server, security (contoh : implement https), dan lain-lain. 

Kesimpulan nya :

  • Membangun product bukan lah hal yang mudah, butuh rencana yang jelas, komitmen, kesabaran dan uang.
  • Sebagai bonus ada bacaan menarik apakah startup anda dying.


Sumber:
[ 1 ] http://www.foundingfuel.com/article/your-startup-is-dying/
[ 2 ] https://www.sirclo.com/blog/2014/09/berbagi-pengalaman-memulai-bisnis-online-sale-stock-indonesia
[ 3 ] https://news.greylock.com/taking-the-wrong-lesson-from-uber-ae4b41e7c7da#.104odukp6

Disclaimer :

  • *) Karena belum rilis jadi saya tidak bisa menyebutkan saya sedang membangun product apa :)
  • penulis bukanlah expert dalam product development, apa yang ditulis merupakan pendapat pribadi :)


Event bus menggunakan RxJava

Pada blog sebelumnya saya telah membahas tuntas tentang Event Bus dan imeplementasi menggunakan otto. Dan sayang sekali Otto sudah deprecated dan tim otto merekomendasikan menggunakan RxJava dan RxAndroid yang mempunyai kemampuan lebih baik untuk mengontrol thread.

Tambah di Gradle:

compile 'io.reactivex:rxandroid:1.2.0'
compile 'io.reactivex:rxjava:1.1.5'

Buat class RxBusEventHelper
import rx.Observable;
import rx.subjects.PublishSubject;
public class RxBusEventHelper {
    private PublishSubject<Object> subject = PublishSubject.create();
    public RxBusEventHelper(){
    }
    /**
     * Pass any event down to event listeners.
     */
    public void send(Object object) {
        subject.onNext(object);
    }
    /**
     * Subscribe to this Observable. On event, do something
     * e.g. replace a fragment
     */
    public Observable<Object> getEvents() {
        return subject;
    }
}

Contoh publish event:
mRxBusEventHelper.send(new YourEventName());

Contoh subscribe event
Action1<object> subscribeEvent = new Action1<object>() {
    @Override
    public void call(Object o) {
        if(o instanceof YourEventName)
            doSomething();
    }
}


Sekian blog dari saya semoga bermanfaat.

Teori Implementasi JWT pada Spring Security

Bagaimana mengimplementasi JWT menggunakan Spring Security?


Setelah mempelajari JWT pada blog, saya mencoba untuk mengimplementasikan JWT menggunakan Spring Security. Google sana-sini, akhirnya berhasil juga. :)

Secara umum teori untuk dapat mengimplementasikan JWT pada Spring Security, kita memerlukan modul-modul :
  • spring-security-oauth2
  • <dependency>
       <groupId>org.springframework.security.oauth</groupId>
       <artifactId>spring-security-oauth2</artifactId>
       <version>2.0.9.RELEASE</version>
    </dependency>
  • spring-security-jwt
  • <dependency<
       <groupId>org.springframework.security</groupId>
       <artifactId>spring-security-jwt</artifactId>
       <version>1.0.4.RELEASE</version>
    </dependency>

Sedangkan untuk konfigurasi Authorization Server, minimal kita harus mengimplementasi interface berikut :
  • org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurer
  • Interface ini berguna untuk mengkonfigurasi dan mendefinisikan bean-bean yang dibutuhkan sebagai Authorization Server untuk meng-authentikasi Client Detail seperti :
    • AuthenticationManager
    • PasswordEncoder
    • ClientDetailsService
    • TokenStore
    • TokenEnhancer
    • AccessTokenConverter
    • dll
  • org.springframework.security.oauth2.provider.ClientDetailsService
  • Interface ini berguna untuk mendefinisikan Client Detail yang digunakan untuk Authorization Server.
  • org.springframework.security.core.userdetails.UserDetailsService
  • Interface ini berguna untuk mendefinisikan User yang digunakan untuk Authorization Server.
  • org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter
  • Interface ini berguna untuk mengkonfigurasi dan mendefinisikan bean-bean yang dibutuhkan sebagai Authorization Server untuk meng-authentikasi User seperti :
    • AuthenticationManager
    • PasswordEncoder
    • UserDetailsService
    • HttpSecurity
    • dll

Apabila ingin menjadikan sebagai Resource Server, maka perlu mengimplementasi interface :
  • org.springframework.security.oauth2.config.annotation.web.configuration.ResourceServerConfigurer
  • Interface ini berguna untuk mengkonfigurasi dan mendefinisikan bean-bean yang dibutuhkan sebagai Resource Server untuk meng-authentikasi User seperti :
    • TokenStore
    • AccessTokenConverter
    • HttpSecurity
    • dll

Sekian sharing tentang JWT + Spring Security, pada blog selanjutnya saya akan share implementasi(source code) JWT pada Spring Security. Semoga bermanfaat. :)

Android MVP Pattern

Pada blog kali ini saya akan membahas  tentang MVP (Model View Pattern) di Android. MVP merupakan salah satu pattern yg cukup popular.

Pada saat mengembangkan aplikasi Android saya mempunya masalah bahwa Android Activity dieratkan dengan interface (callback) dan mekanisme akses data sehingga menjadi tight coupling dan menjadi sulit di maintain. MVP membuat View menjadi independent dari data layer.

Sebelum memulai lebih baik membaca artikel tentang Event bus Android dan Reactive Programming. Reactive Programming (RxJava) menjadi inti disini karean kita berkomunkasi melalui konsep ini. RxJava sendiri adalah bagian dari library yang dikembangkan oleh ReactiveX, dimana kegunaan library ini bertujuan untuk melakukan proses asynchronous pada sebuah program dengan konsep observables sequence.




Penjelasan MVP:
  • Presenter
    • Presenter bertanggung jawab untuk berkomunikasi dengan view dan model. Presenter menerima data dari model dan memanggil method di view. Presenter subscribe ke Observables yang ada di Data Manager dan berkomunikasi. Serta presenter harus bisa melakukan schedulars dan subscriptions.
  • View
    • Menghandle behavior dan manipulasi UI (Activity atau Fragment). Dan menerima callback dari presenter untuk melakukan action tertentu. 
  • Model
    • Model adalah sebagai data layer untuk berkomunikasi ke local storage atau server. Data Manager merupakan inti dari arsitektur ini. Menggunakan rxjava operator untuk berkomunikasi ke Helper Class dan Presenter layar.

Why is this approach better ?

  • RxJava Observables and operators menghapus kebutuhan untuk memiliki nested callback.

  • Data Manager meringankan beban activity dan fragment. Dimana data manager melakukan http request ke server atau mengambil data ke local storage.
  • Activity dan fragment menjadi ringan karena hanya bertugas untuk update UI dan handle user event.
  • Setiap layer memeliki tugasnya masing - masing sehingga membuat arsitektur menjadi test-friendly.
Untuk implementasi-nya silahkan tunggu di blog saya berikutnya.

Sumber:
http://antonioleiva.com/mvp-android/
https://labs.ribot.co.uk/android-application-architecture-8b6e34acda65#.jtccesiud


Functional Reactive Programming

Saya mengenal konsep Functional reactive programming (selanjutnya akan saya tulis FRP) di pertengahan tahun ini, mungkin bisa dibilang telat, tapi lebih baik terlambat daripada tidak sama sekali kan? :D


Dalam hemat saya, FRP merupakan perspektif baru dalam menyelesaikan permasalahan-permasalahan programming di masa yang sekarang. Mengapa sekarang? Karena permasalahan programming di masa lalu dan masa sekarang berbeda. Jika permasalahan masa lalu adalah hardware dan internet, maka salah satu permasalahan sekarang adalah bagaimana mengatasi traffic yang sangat besar dalam satu website.
1*HAoewX140mJ8JnogRGPr5g.png

Dalam gambar tersebut bisa dilihat bahwa, facebook dan twitter memiliki jumlah user sangat banyak, hal ini jelas menjadi permasalahan penting yang harus dihadapi.


Prinsip Reactive
Secara singkat mengutip dari Bob reactive programming bisa di ibaratkan, applikasi reactive sebagai spread sheet, dan  variable-variable nya sebagai cell nya, jika salah satu cell berubah maka yang lain berubah. Yang sudah lama kenal konsep object oriented programming (oop) mungkin pernah denger observer pattern, konsepnya sama :)


Reactive programming sendiri dibangun berdasarkan 4 prisip, bisa dilihat dalam reactive manifesto.
1*DoL5xCZLLf35Z1xVWBRqjw.png


Gambar diatas menunjukan guidance dalam membangun applikasi dengan konsep reactive. Mengutip dari Kevin Webber :
  • Responsive application merupakan goal
  • Responsive application tidak mungkin terwujud tanpa resilient dan scalability
  • Message driven architecture merupakan pondasi dari scalable, resilient dan ultimate responsive sistem.

Responsive
A responsive system is quick to react to all users — under blue skies and grey skies — in order to ensure a consistently positive user experience. (Kevin Webber, 2014)


Sebuah sistem bisa dikatakan responsive jika sistem tersebut mampu merespon dengan cepat (baik sukses maupun error) terhadap segala kondisi user. Dalam kasus sukses maupun error, sistem harus konsisten terhadap user experience nya.
Singkat nya, ketika ada error process, user harus dihadapkan pada pilihan yang menyenangkan seperti ketika sukses process. Sebagai contoh mungkin, saat user merequest uber saat peak hour (yg notabene traffic nya sangat banyak) dan saat bukan peak hour, user harus mendapatkan response time yg sama.


Resilient
A resilient system applies proper design and architecture principles in order to ensure responsiveness under grey skies as well as blue. (Kevin Webber, 2014)


Resilient sistem harus menyediakan design dan arsitektur error handle yang benar. Dalam hal ini, yang dinaksud benar adalah, ketika terjadi error, maka experience user haruslah sama ketika mengalamin proses yang sukses.


Scalable
A scalable system is easily upgraded on demand in order to ensure responsiveness under various load conditions. (Kevin Webber, 2014)


Reactive mudah di scale up maupun di scale out karena pemodelan arsitektur nya yang mengimplementasi asynchronous, non-blocking, dan parallelism.


Message Driven
A message-driven architecture merupakan pondasi dari reactive applications. Sebuah message-driven application mungkin dapat berupa event-driven, actor-based, maupun kombinasi keduanya.
Gambar di bawah ini menjelaskan bahwa komunikasi dilakukan antar node (atau actor jika menggunakan Actor model) melalui message. Dan message ini menjadi trigger untuk menentukan langkah selanjutnya.


actors.png


Actor model bisa juga digambarkan seperti gambar di bawah ini. Coordinator, player1 dan player2 merupakan actor, coordinator bisa bertindak sebagai router, dan player sebagai worker.
actors2-fig1-100159427-orig.jpg
Sumber http://images.techhive.com/images/idge/imported/article/jvw/2009/03/actors2-fig1-100159427-orig.jpg

Terkait implementasinya mungkin bisa ditilik disini. Dalam source code tersebut menggunakan akka, namun intinya adalah pemodelan nya. Dimana paradigma arsitektur nya bukan lagi MVC, namun reactive.

Kesimpulan :
Scalability dan resilient merupakan prioritas utama dalam memenuhi ekspektasi user, untuk itu diperlukan paradigma reactive programming dalam membangun arsitektur sistem.


Happy coding dan reactive :)


Sumber :


JWT (JSON Web Token)

JSON Web Token atau lebih dikenal dengan JWT, merupakan sebuah token berbentuk JSON yang padat (ukurannya), informasi mandiri untuk ditransmisikan antar pihak yang terkait. Token tersebut ini dapat diverifikasi dan dipercaya karena sudah di-sign secara digital. Token JWT bisa di-sign dengan menggunakan secret (algoritma HMAC) atau pasangan public / private key (algoritma RSA).

Kenapa dibilang JSON yang padat ?, karena ukurannya yang kecil, token JWT dapat dikirim melalui URL, Parameter Http POST atau di dalam Header Http. Dan juga karena ukurannya yang kecil maka dapat ditransmisikan dengan lebih cepat.

Dan kenapa dibilang Informasi mandiri ?, karena isi dari tokennya mengandung informasi dari user yang dibutuhkan, sehingga tidak perlu query ke database lebih dari 1 kali.

Untuk lebih memperjelas mari kita lihat contoh tokennya :
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.EkN-DOsnsuRjRO6BxXemmJDm3HbxrbRzXglbN2S4sOkopdU4IsDxTI8jO19W_A4K8ZPJijNLis4EZsHeY559a4DFOd50_OqgHGuERTqYZyuhtF39yxJPAjUESwxk2J5k_4zM3O-vtd1Ghyo4IbqKKSy6J9mTniYJPenn5-HIirE
Pada contoh token tersebut terdapat 3 bagian yaitu :
  1. Header (Algoritma & Jenis Token)
  2. eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9
  3. Payload (Data)
  4. eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9
  5. Signature (Verify Signature)
  6. EkN-DOsnsuRjRO6BxXemmJDm3HbxrbRzXglbN2S4sOkopdU4IsDxTI8jO19W_A4K8ZPJijNLis4EZsHeY559a4DFOd50_OqgHGuERTqYZyuhtF39yxJPAjUESwxk2J5k_4zM3O-vtd1Ghyo4IbqKKSy6J9mTniYJPenn5-HIirE
    Untuk lebih jelas, bisa cek ke https://jwt.io/#debugger dengan memasukan token seperti diatas.

Kapan sebaiknya kita menggunakan JWT ?


JWT umumnya digunakan untuk :
  • Autentikasi
  • Ketika user/client melakukan autentikasi dan mendapatkan token, maka untuk seterusnya setiap request harus menyertakan token tersebut.
  • Pertukaran Informasi
  • Dengan token yang sudah di-sign misal dengan algoritma RSA, kita dapat mengetahui dan yakin siapa yang melakukan request tersebut. Terlebih dengan isi pada bagian Signature merupakan gabungan dari isi Header dan Payload, jadi jika isi Header/Payload dirubah maka isi Signature menjadi tidak valid.

Bagaimana JWT bekerja ?


Umumnya ketika user berhasil melakukan login, maka server akan mengembalikan token JWT dan akan disimpan pada Local Storage / Cookies Browser. Selanjutnya untuk setiap request yang akan mengakses API yang terproteksi harus menyertakan token tersebut.

Umumnya token tersebut akan disertakan pada Authorization Header dengan Bearer schema, contohnya seperti ini :
Authorization: Bearer <token>

Ini merupakan mekanisme autentikasi yang stateless, karena state user yang login tidak disimpan pada memory server. Jadi setiap request kepada API yang terproteksi akan dicek apakah token JWT yang ada di Authorization header valid atau tidak, bila valid maka request akan diijinkan dan diproses.

Dan karena semua informasi yang dibutuhkan pada JWT sudah lengkap, maka setiap proses pengecekan tersebut sudah tidak perlu lagi melakukan query ke database.

Sekian sharing kali ini, semoga menambah wawasan kita semua. :)

Babel , a javascript compiler

Apa itu babel , atau babeljs?

Yep , babel adalah sebuah transpiler , a javascript compiler , sebuah source-to-source compiler yang berguna untuk mengubah JavaScript 6 ( ECMAScript2015 atau es6 ) ke JavaScript 5 .
Sebenarnya ada beberapa transpiler di luar sana, sebut saja traceur, saya memilih babel dengan pertimbangan hasil transpile babel lebih readable daripada traceur, selain itu babel support tipe file dengan extension JSX ( JavaScript syntax Extension ) , sebuah extension yang dipakai untuk menulis component dalam React.js
Babel support transformasi fungsi-fungsi baru yang ada pada es6 (latest javascript) seperti fungsi arrow , bind, class dan masih banyak lagi fungsi fungsi yang lain.
Untuk menggunakan babel sangatlah mudah. Asumsi bahwa kita telah menginstal npm (node package manager ) maka cukup dengan mengetikkan sintaks berikut
npm install -g babel-cli

Tambahkan konfigurasi untuk babel pada package.json , berikut contoh package.json :
"babel":{
        "presets":[]
        },

Untuk mentransformasi dari es6 (es2015 ) ke es5 maka dibutuhkan preset untuk es6(es2015) , jalankan perintah berikut :
npm install babel-preset-es2015

Modifikasi konfigurasi babel pada package.json seperti dibawah ini :
"babel":{
        "presets":["es2015"]
        },

Dan selesai , mari kita coba :
1. Buat dua buah direktori dengan nama src dan dest misalnya
2. Didalam src buat sebuah file, misalnya script.js yang isinya adalah fungsi-fungsi dari es6 , misalnya
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
3. Lalu jalankan perintah
 babel src -d dest
, ini berarti babel akan mentransform semua file di src untuk kemudian menulisnya di direktori dest
4.Di direktori dest bisa kita lihat file dengan nama yang sama yaitu script.js , namun jika kita lihat isinya akan seperti ini :
"use strict";

var odds = evens.map(function (v) {
  return v + 1;
});
var nums = evens.map(function (v, i) {
  return v + i;
});

Lalu bagaimana dengan react component yang menggunakan extension .jsx ?
Gampang saja , kita cukup menambahkan preset untuk react dengan perintah
npm install babel-preset-es2015

kemudian tambahkan konfigurasi preset di package.json seperti ini :
"presets":["es2015","react"]
.
Selanjutnya ,mari kita coba
1. Buat file dengan ekstensi .jsx , misalnya TextInput.jsx
2. Tuliskan code berikut ini :
import React from 'react';

class TextInput extends React.Component{
render(){
        return(<input type="text"></input>);
    }
}
export default TextInput;

3. Jalankan
babel src -d dest

4. Maka akan terbentuk file di dest dengan nama yang sama yaitu TextInput.js ( ekstensi nya js )
Dan jika kita buka , maka akan ada sederet code javascript , yang didalam nya ada baris berupa seperti berikut :
"use strict";
......

var _react = require("react");

......

var TextInput = function (_React$Component) {
        _inherits(TextInput, _React$Component);

        function TextInput() {
                _classCallCheck(this, TextInput);

                return _possibleConstructorReturn(this, Object.getPrototypeOf(TextInput).apply(this, arguments));
        }

 _createClass(TextInput, [{
                key: "render",
                value: function render() {
                        return _react2.default.createElement("input", { type: "text" });
                }
        }]);

        return TextInput;
}(_react2.default.Component);

exports.default = TextInput;


Sebagai informasi tambahan , babeljs juga bisa kita konfigurasi dengan bundling module seperti Webpack atau Browserify
Demikian sedikit share dari saya tentang babeljs , semoga bermanfaat :D

Sumber :
https://babeljs.io
https://onsen.io/blog/trying-out-javascript-es6-using-babel/
http://ilikekillnerds.com/2015/01/transpiling-wars-6to5-vs-traceur/

Javascript Transpiler

Saat ini saya memegang sebuah project yang menggunakan sebuah teknologi front-end bernama React.js . apa itu React.js bisa anda baca disini. ,

Yang menjadi perhatian saya disini adalah pemakaian ES6 atau ECMAScript2015, yang baru rilis di juni 2015. Tidak seperti ES5 , ES6 belum stabil di semua browser (berkaitan dengan compability terhadap browser), sehingga diperlukan suatu mekanisme untuk meng convert ES6 ke ES5 yg lebih stabil, di sinilah sebuah javascript transpiler dibutuhkan

Apa itu Transpiler? , Transpiler bisa diartikan sebagai source-to-source compiler , yaitu sebuah compiler yang mengambil source code suatu program yang di tulis menggunakan suatu bahasa pemrograman sebagai input dan menghasilkan source code yang equivalent dalam bahasa pemrograman lainnya .

Salah satu alasan penggunaan javascript transpiler adalah dikarenakan setiap browser menggunakan javascript engine yang berbeda, Chrome denga V8 , Firefox dengan spidermonkey dan lain lain , masing masing mempunyai karakteristik sendiri. Maka dengan transpiler, code kita akan bekerja dengan baik untuk siapa saja yang meng akses site kita.

Javascript Transpiler juga mempunyai peranan penting dalam membantu keputusan dari TC39 , sebuah komite yg merancang standar ECMAScript

Banyak sekali transpiler di luar sana , diantaranya adalah Babel , Traceur ( ECMAScript2015 ke es5) , HipHop for PHP ( PHP ke C++) dan lain lain.

Kebetulan saat ini saya memakai ECMAscript2015 ,dan Babel sebagai transpiler. Apa itu babel , bisa anda baca disini.

berikut ini contoh hasil transpile dari ES6 ke ES5

Format ECMAScript2015 ( ES6 )
import React from 'react'

class TextInput extends React.Component {
  
render (){
  return (
    <input type="text"></input>
    );
}
}

Hasil transpile ke ES5 sebagai berikut:

var TextInput = function (_React$Component) {
  _inherits(TextInput, _React$Component);

  function TextInput() {
    _classCallCheck(this, TextInput);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(TextInput).apply(this, arguments));
  }

  _createClass(TextInput, [{
    key: "render",
    value: function render() {
      return _react2.default.createElement("input", { type: "text" });
    }
  }]);

  return TextInput;
}(_react2.default.Component);


Demikian sharing tentang transpiler dari saya, semoga bermanfaat :D
sumber :

https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them
http://software.endy.muhardin.com/javascript/javascript-2015/

Tutorial Configurasi CodeIgniter

CodeIgniter adalah sebuah framework PHP yang menggunakan metode MVC (Model, View, Controller). Dengan menggunakan CodeIgniter kita tidak perlu repot membuat suatu aplikasi web dari awal, dan terlihat lebih rapi dari segi codingnya. Untuk dapat menggunakan CodeIgniter maka kita perlu menginstal XAMPP, yang mana dapat di download pada link berikut ini : 


https://www.apachefriends.org/download.html



Kemudian lakukan penginstalan sesuai dengan petunjuk yang ada. Sambil menunggu proses instalasi, kita dapat mendownload framework CodeIgniter pada link :


https://www.codeigniter.com/download


Untuk mempermudah penjelasan, setelah di download dan di extract taruh folder CodeIgniter dalam folder htdocs yang ada di folder xampp yang telah terinstal tadi.



Sekarang kita akan mengubah config dari CodeIgniter sesuai  dengan project yang akan kita buat. 



Di dalam folder config ini terdapat berbagai configurasi yang nanti nya di sesuaikan dengan project yang akan di buat, seperti

  1.  Config.php

        Di dalam file ini kita dapat mengatur home url web. 
    $config['base_url'] = 'localhost/index.php/Coba_CodeIgniter.php/';
  2.  Database.php

        Di sini kita dapat men-setting nama database kita beserta ke-aktifan dari database tersebut.


  3.  Autoload.php

       Autoload ini berfungsi untuk menjalankan libraries yang akan di gunakan, seperti load untuk database, session, template, tabel dsb.
     
  1.  $autoload['libraries'] = array('database','session','table','template');  
    
    
  2.  Routes.php
       Routes menunjukan default controller yang di jalankan ketika pertama kali aplikasi di akses.

     $route['default_controller'] = 'welcome';  
    
                      

Selanjutnya kita tinggal melakukan coding di controller model dan view, untuk menjalankan aplikasi url nya adalah yang telah di atur di config. Sampai di sini kita sudah berhasil mengatur configurasi CodeIgniter. Semoga bermanfaat.