Membuat dan Mengakses OAuth2 protected content dengan OAG

Setelah penjelasan saya sebelumnya mengenai pembuatan OAuth2 Server, sekarang saya akan menjelaskan bagaimana cara pembuatan OAuth2 Protected Content, dan cara mengakses OAuth2 Protected Content dengan OAG.

Seperti sebelumnya untuk penjelasan kali ini saya akan menggunakan client credentials grant untuk mendapatkan access token karena lebih mudah dan simple untuk dijelaskan.

Untuk membuat OAuth2 protected content, kita dapat satu filter khusus yaitu Validate Access Token, bila mengikuti penjelasan saya sebelumnya dengan meng-import template, kita dapat melihat  policy yang terletak pada  Policies > OAuth 2.0 > Resource Service > Resource Service untuk melihat flow pembuatan OAuth2 protected content.

Pembuaan OAuth2 Protected Content

perlu diperhatikan dalam Validate Access Token kita perlu mengeset tempat penyimpanan access token, tempat penyimpanan access token ini harus sama dengan tempat penyimpanan access token pada access token grant yang memberikan access token (dalam hal ini tempat penyimpanan access token yang digunakan pada policy Client Credentials) dan harus menambahkan scope dari scope yang diberikan OAuth2 Authorization Server. untuk pengetesan dalam pengambilan OAuth2 Protected Content dengan command berikut:

curl -X POST \'{Protocol}://{host}:{port}{path}' \
  -H 'authorization: Bearer {access token yang didapat dari access token grant}'

tentu saja seperti sebelumnya path harus disesuaikan dengan path yang didaftarkan di OAG Policy Studio

Mengakses OAuth2 Protected Content dengan Postman

Sekarang kita akan mencoba mengakses OAuth2 protected Content, hal ini akan cukup sulit bila kita harus mengambil access token terlebih dahulu dengan meng-encode base64 client id dan secret, lalu menyimpan access token yang didapat untuk dimasukkan kedalam authorization header. OAG memberikan solusi agar semua hal tersebut dapat dilakukan oleh OAG tanpa campur tangan dari user.

Hal pertama yang harus dilakukan adalan dengan membuat client credentials profile, hal ini akan memudahkan kita agar tidak perlu lagi meng-encode base64 client id dan secret untuk mendapatkan access token. Client Credentials Profile ini terletak pada External Connections > Client Credentials > OAuth2, dalam pembuatannya kita akan memberikan nama pada profile ini dan menentukan authorization url dan juga token url. karena saya menggunakan template yang sudah di-import disini saya akan menggunakan API Gateway Profile. (Agar lebih mudah gunakan sertifikat yang benar untuk ssl pada protokol https atau buat listener baru dengan protokol http dan ganti URL client client credentials profile)

API Gateway Profile

Setelah membuat profile, klik tombol add pada tab OAuth2 Credentials, masukan nama kredensial, client id dan secret, ganti OAuth Flow Type ke Client Credentials, terakhir optional masukkan scope seperlunya, dan klik OK.

Sekarang kita akan membuat policy untuk mengakses OAuth2 Protected Content, dalam policy ini kita akan menggunakan 3 filter berikut:

1. Retrieve OAuth Client Access Token From Token Storage
Untuk mengecek apakah access token sudah ada atau masih hidup

2. Get OAuth Access Token
Untuk meminta access token baru dan menyimpannya di cache, token yang sudah expired akan langsung dibuang oleh cache

3. Connect to URL
Untuk meneruskan data ke OAuth2 Protected Content

pada ketiga filter tersebut kita harus mengganti isian client credentials profile dengan data client credentials profile yang baru saja kita buat. pada Retrieve OAuth Client Access Token, isian terletak pada  "Choose profile to be used for token request", pada Get OAuth Access Token pada "Optionally select a client credentials profile", dan pada Connect to URL pada "Choose a Client Credential Profile" pada tab Authentication.

Policy baru untuk mengakses OAuth2 Protected Content.

Daftarkan policy tersebut ke listener, lalu mari kita test dengan command:

curl -X POST \'{Protocol}://{host}:{port}{path}'

Testing dengan postman tanpa penggunaan authorization header

Sekian penjelasan saya untuk kali ini,

Terimakasih.

Mengenal Ionic!

Halo, Nostra Readers!

Tadi siang sepupu saya datang ke rumah untuk silaturahmi. Sambil mengobrol-ngobrol, tiba-tiba terbahas suatu framework yang baru saya dengar, namanya itu Ionic. Wah menarik nih, langsung coba googling apa itu ionic.

Nah untuk postingan kali ini, saya akan membahas singkat mengenai sebuah framework yang disebut-sebut mudah untuk membuat sebuah mobile apps ini.

Iconic merupakan open source SDK mobile untuk membuat native dan progressive web apps dengan mudah. Awalnya iconic dibuat pada tahun 2013 berdasarkan Angular dan Apache Cordova. Sekarang ini Iconic merupakan versi yang kedua, namun tetap dipanggil Ionic, yang berdasarkan dari Angular. Di Ionic ini memberikan tools dan service untuk membuat hybrid mobile apps yang menggunakan teknologi-teknologi dari web seperti HTML, CSS, dan Sass. Lalu dari pemanfaatan teknologi-teknologi web, dengan menggunakan Cordova dapat diinstall pada device-device.

Getting Started

Untuk memulai Ionic cukup mudah, pertama-tama kita perlu menginstall node js terlebih dahulu untuk dapat menggunakan fitur npm. Lalu dari command prompt (Command Line) dimulai dengan menginstall ionic dengan cara mengetik,

npm install -g cordova ionic

Ketika sudah selesai menginstall, lalu dilanjutkan dengan memulai app yang sudah ada(Preset) dengan mengetik di command line dari salah satunya dibawah ini,

- ionic start myApp blank - ionic start myApp tabs - ionic start myApp sidemenu

kemudian setelah kita melakukan command diatas, dimana dari command itu kita sudah meng-clone dari git, kita masuk ke dalam foldernya yaitu myApp,

cd myApp

Lalu dimulai dengan cara,

ionic serve

Setelah dijalankan nantinya akan membuka page baru yang berisikan content dari apa yang sudah di clone tadi.

Nah sekarang ini sudah ada yang namanya Ionic Creator, dimana Ionic Creator merupakan tools dari Ionic yang penggunaannya untuk membuat interface hanya dengan drag and drop.

Mungkin itu dulu dari saya kali ini, semoga bermanfaat untuk kedepannya!

References:
- Ionic
- Wikipedia

Membuat OAuth2 Server dengan OAG

Pada kesempatan ini saya ingin menjelaskan cara membuat OAuth2 dengan OAG, dapat diketahui dengan demikian OAG akan menjadi Authorization Server.

Pada OAG terbaru kali ini (11.1.2.1.4.0) membuat OAuth Server sangatlah mudah, yang pertama harus dilakukan adalah dengan meng-import pada OAG pada Policy Studio. template OAuth2 Server yang sudah disediakan dalam folder berikut:

"Your OAG Installation Folder/apigateway/samples/oauth/authzserver/config.xml"

File yang akan di import di OAG

Template ini menyediakan cache-cache untuk menyimpan kredensial OAuth, User yang diperlukan untuk mengakses OAuth Server, dan OAuth Acces Token Grant yang dapat digunakan. untuk meng-import template ini, diperlukan mengklik File > Import.

data-data yang di-import dari template

Untuk mengakses OAuth Server, user diperlukan mengakses oaghost:oauthport dengan protokol https, kali ini saya menggunakan localhost dengan port 8089 (default OAuth2 Port OAG) untuk mengakses OAuth Server.

OAuth2 Authorization Server

Dalam OAuth Authorization Server ini kita akan memasukkan credentials user dengan admin role yang telah didaftarkan, default dari template adalah dengan login name "regadmin" dan password "changeme" (untuk mengubah atau menambahkan user, dapat dilakukan dengan mengakses Users and Groups > Users pada OAG Policy Studio), setelah memasuki OAuth Server ini kita dapat mendaftarkan aplikasi ataupun meng-import konfigurasi aplikasi yang sudah ada, tentu saja aplikasi-aplikasi yang akan kita buat ini merupakan aplikasi yang akan mengakses OAuth Server kita (Client kita).  

Untuk membuat aplikasi dapat dimulai dari mengklik "new application" lalu memasukkan application name dan descriptionnya jika dibutuhkan, setelah selesai klik tombol "Create"

Pembuatan aplikasi baru

setelah itu masuk ke bagian "OAuth Credentials" lalu klik "New Client Id". pilihlah jenis client dari aplikasi ini baik itu confidential maupun public dan isilah data-data lainnya bila perlu lalu klik "Create"

Pembuatan OAuth2 Credentials

Pada saat ini akan muncul satu baris data yang berisi OAuth Credentials, simpanlah Client ID dan Secret yang tercipta (Untuk menampilkan Secret klik Show Secret), agar data aplikasi ini bisa diakses oleh aplikasi kita harus menambah scope, scope ini akan menentukan batasan-batasan yang dapat dilakukan aplikasi pada data yang dia dapat dari OAuth2, untuk saat ini saya menambahkan 2 scope yaitu resource.READ dan resource.WRITE.

Setelah membuat aplikasi, kita perlu untuk membuat OAuth2 Stores yang akan digunakan untuk menyimpan data access token dikala aplikasi yang kita daftarkan menghit OAuth2 yang kita buat untuk mendapatkan token, namun kali ini kita akan menggunakan hasil import dari template yaitu OAuth Access Token Store. (Saya akan menggunakan OAuth2 Stores dari sample yang kita import, dan OAuth2 Stores ini terletak di Libraries > OAuth2 Stores)

Pembuatan OAuth2 Stores

Terdapat berbagai macam metode penyimpanan baik itu pada cache KPS (KPS yang dibuat saat meng-import config OAuth2), menyimpan pada database, dan terakhir penyimpanan pada apache cassandra. Saya menggunakan apache cassandra agar kita tidak perlu repot memonitor data access token dan langsung tersimpan pada OAG.

Dengan menggunakan generated policies dari konfigurasi yang kita import, agar lebih mudah dipahami saya akan menggunakan client credentials grant karena lebih simple dan straight forward, dan saat ini kita sudah bisa melihat OAG menghasilkan Access Token, namun saya ingin menggunakan Authorization Header yang menggunakan encode BASE64 dari (Client ID:Secret) untuk mendapatkan token, sehingga saya mengubah policy dari Client Credentials untuk mengambil data dari Authorization Header. (Policy terletak di Policies > OAuth 2.0 > Client Credentials), jangan lupa mengecek tab Access Token untuk merubah data lama waktu hidup token, panjang token, dimana token akan disimpan, apakah akan memberikan refresh token, membuat scope token pada tab Access Token (Saya menggunakan default setting dimana token akan disimpan pada OAuth2 Stores yang dibuat/diimport diatas)

Pengubahan validasi aplikasi pada policy client credentials

Mari kita melakukan percobaan untuk mendapatkan access token dengan menggunakan curl dengan command sebagai berikut:

curl -X POST \'{protocol}://{host:port}{path}' \
  -H 'authorization: Basic {BASE64Encode(Client_id:Secret)}' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d grant_type=client_credentials

path disesuaikan dengan relative path yang didaftarkan di OAG policy studio

Pengambilan Access Token menggunakan Postman dengan command yang sama dengan diatas.

Sekian penjelasan mengenai OAuth2 Server dari saya.

Terimakasih.

Fix Bootcamp Error Install Windows 10 Detect MBR Partition On EFI System

Kemarin ketika saya akan menginstall Windows pada Macbook saya, saya menemui error pada saat akan memilih disk yang akan di install Windows, error nya bisa dilihat pada gambar dibawah.

Setelah menjelajah berbagai macam forum, saya menemukan solusi untuk masalah tersebut. Hal di atas terjadi karena partisi yang dibuat Bootcamp memiliki attribute MBR Hybrid. Seharusnya attributenya bernilai MBR Protective. Untuk mensolve nya, pada saat Bootcamp selesai membuat partisi Windows dan melakukan restart, kita tahan option/alt key untuk memilih disk yang akan di boot, lalu pilih MacOs lagi kemudian siapkan beberapa langkah berikut:

1. Download latest version of GPT fdisk.
2. Install GPT fdisk dengan menjalankan installer yang sudah di download.
3. Buka terminal dan ketik

   sudo gdisk /dev/disk0
   

4. Jika MBR partition terset ke hybrid, lanjutkan ke step 5, namun jika sudah terset ke protective, bisa di skip semua step dibawah ini. Ketik q & enter untuk keluar dari GPT fdisk.
5. Ketik p untuk melihat existing partition table dan pastikan kita sudah memilih disk yang benar.
6. Ketik x untuk memilih expert menu.
7. Ketik n untuk membuat protective MBR.
8. Ketik w untuk menyimpan perubahan dan pastikan di konfirmasi perubahan nya.
9. Ketik q untuk keluar dari GPT fdisk.
10. Jalankan code pada step 3 dan pastikan hasilnya seperti gambar dibawah.
    
    
    

Jika sudah, restart MacOs nya lalu lanjutkan instalasi Bootcamp. Finally error di atas sudah tidak keluar lagi dan sukses menginstall windows 10 pada Macbook saya.

Semoga membantu !

JMeter dengan Data Dinamis

Pada saat menggunakan JMeter atau melakukan concurrent test ada kebutuhan untuk mensimulasikan data yang berbeda-beda antara pada HTTP Request. JMeter bisa memfasilitasi kebutuhan ini dengan menggunakan CSV Data Set Config. Sesuai dengan namanya configurasi ini hanya bisa membaca file yang berjenis CSV saja.

Kita akan melanjutkan Test Plan dari postingan sebelum nya (Concurrent Test menggunakan JMeter).

CSV Data Set Config

Tambahkan CSV Data Set pada Sampler HTTP Request

Terdapat field-field yang perlu di setting untuk menggunakan sebuah CSV Data Set, diantaranya adalah:

• Filename adalah path file csv yang akan digunakan.
• Delimiter (use '\t' for tab) adalah settingan untuk simbol pemisah kolom data. Untuk csv biasanya kita menggunakan koma ',' sebagai pemisah kolom data.
• Allow quoted data? Kita set False karena pada file csv kita bagian data tidak di quote. 
• Recycle on EOF Kita set False agar proses berhenti jika row data pada file csv sudah habis, dan tidak melakukan looping ke bagian data pertama lagi. 
• Stop thread on EOF Kita set True agar apabila jumlah data pada csv lebih banyak dari pada concurrent user yang kita setting pada Thread Group proses JMeter akan berhenti karena sudah mencapai jumlah concurrent user yang sudah kita setting di Thread Group. 
• Sharing mode set All Thread jika menginginkan csv bisa di baca oleh Thread Group lain. Set Current Thread Group jika menginginkan csv hanya bisa di baca oleh Sampler lain yang berada pada Thread Group yg sama. Set Current Thread jika menginginkan csv hanya bisa di baca oleh Sampler dimana CSV Data Set Config ini berada saja. Direkomendasikan untuk menggunakan Current Thread Group.

Untuk bisa menggunakan data dari file csv yang sudah dipilih perlu dilakukan perubahan pada Body Data di Sampler HTTP Request. Berikut adalah isi file csv yang digunakan:

Pada file csv terdapat 2 header kolom yaitu username dan password. Cara pemasangan data csv ke dalam Body Data adalah seperti berikut ${username} dan ${password}.

Test

Selanjutnya kita bisa menjalankan tes dengan klik button Start pada bagian toolbar. Hasil nya bisa dilihat pada View Result Tree.

Karena kita setting concurrent user pada Thread Group adalah 5 maka pada View Result Tree hanya muncul 5 HTTP Request meskipun kita menyediakan 10 data pada file csv.
Kita cek bagian Request dari masing-masing HTTP Request dan akan terlihat bahwa masing-masing request menggunakan username yang berbeda-beda.

Skenario testing concurrent menggunakan data dinamis atau file csv ini lebih menggambarkan kondisi nyata karena benar-benar mensimulasikan banyak user yang berbeda id atau username mengakses REST API secara bersamaan.

Elasticsearch Snapshot and Restore Data

Halo Sobat Nostra, pada kali in saya akan berbagi tutorial bagaimana cara membuat snapshot (backup) dan restore data pada elasticsearch dengan mudah. Apa itu elasticsearch? elasticsearch adalah adalah salah satu database yang masuk ke dunia NoSQL dengan fokus di search engine database. Kenapa kita memerlukan backup data? Apabila suatu ketika kita memiliki kerusakan data atau kehilangan data kita dapat mengambil kembali dari data yang sudah kita backup sebelumnya. Karena data itu sangat penting sehingga kita harus memiliki backup. Snapshot juga dapat kita lakukan apabila kita ingin migrasi ke elastic versi yang lebih baru. Sebelum kita mulai, elasticsearch harus sudah terinstall dan pastikan sudah listen di port default elasticsearch 9200 dan 9300. Mari kita mulai tutorialnya.

Hal pertama yang kita lakukan adalah menambahkan lokasi repo.path di elasticsearch.yml. Path ini adalah filesystem lokal dimana snapshot akan disimpan.

Kita buat folder di /home/elasticsearch/backup

 mkdir –p /home/elasticsearch/backup  
 chown -R elasticsearch. /etc/elasticsearch/backup  

Tambahkan konfigurasi di elasticsearch.yml

 path.repo: ["/etc/elasticsearch/backup"]  

Restart service elasticsearch

 systemctl restart elasticsearch  

Setup the snapshot repository

Sebelum kita snapshot dan restore, kita harus mendaftarkan path repository di Elasticsearch dengan menggunakan perintah:

 curl -XPUT "http://localhost:9200/_snapshot/es_backup" -H 'Content-Type: application/json' -d'  
 {  
   "type": "fs",  
   "settings": {  
     "location": ["/etc/elasticsearch/backup "  
     , "compress": true  
   }  
 }'  

Untuk mengeceknya dengan command:
curl -XGET 'localhost:9200/_snapshot/es_backup?pretty'

Take snapshots

Sekarang kita sudah bisa melakukan backup atau restore. Kita lanjut cara backup data (index).
cek list index pada elasticsearch

 curl -XGET 'localhost:9200/_cat/indices?v&pretty'  

Create snapshot dengan perintah:

 curl -XPUT 'localhost:9200/_snapshot/es_backup/snapshot_1?wait_for_completion=true&pretty'  

Defaultnya semua index yang open dan start akan disnapshot. Kita dapat membuat snapshot hanya index yang kita ingin backup dengan cara dibawah ini:

 curl -XPUT 'localhost:9200/_snapshot/es_backup/snapshot_1?pretty' -H 'Content-Type: application/json' -d'  
 {  
  "indices": "index_1,index_2",  
  "ignore_unavailable": true,  
  "include_global_state": false  
 }'  

Untuk melihat hasil semua snapshot dengan perintah:

 curl -XGET 'localhost:9200/_snapshot/es_backup/_all?pretty'  

Untuk menghapus snapshot dapat menggunakan:

 curl -XDELETE 'localhost:9200/_snapshot/es_backup/snapshot_1?pretty'  

Restore snapshots

Kita akan merestore data dari snapshot ke elasticsearch. Ada yang harus kita perhatikan sebelum restore data. Pertama index yang kita snapshot sebelumnya akan memiliki nama yang sama dengan  index pada elasticsearch sehingga kita harus close atau delete index tersebut.

 curl -XPOST 'localhost:9200/my_index/_close'  

Kemudian lakukan restore snapshot:

 curl -XPOST 'localhost:9200/_snapshot/es_backup/snapshot_1/_restore?pretty'  

Untuk memonitor progress restore/snapshot dengan perintah:

 curl -XGET 'localhost:9200/_snapshot/es_backup/snapshot_1?pretty'  

Jika kita ingin memindahkan hasil snapshot ke mesin lain, hal yang kita lakukan adalah dengan mencopy folder dimana snapshot kita simpan ke mesin tersebut dan selanjutnya merestore snapshot ke elasticsearch.


Elasticdump

Ada cara lain untuk membackup data elasticsearch yaitu dengan menggunakan elasticdump. Kekurangan elasticdump adalah sulit untuk restore. Jadi apabila kita hanya ingin menyimpan datanya tanpa ingin restore kita dapat menggunakan elasticdump. Hasil dari backup index tersebut akan berupa json dan dapat kita buat langsung ke dalam gzip file.

Pertama install terlebih dahulu service elasticdump:

 npm install elasticdump –g  

Kemudian lakukan backup:

 elasticdump \  
  --input=localhost:9200/my_index \  
  --output=$ \  
  | gzip > /home/elasticsearch/backup/my_index.json.gz  

Sekian dari saya semoga apa yang saya share dapat bermanfaat.
Terima kasih :)        

References:

• https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html

• https://www.npmjs.com/package/elasticdump

Angular Directive Data Binding Tips

Pada kesempatan ini saya ingin berbagi tips ketika bermain dengan Directive component pada AngularJs. Sebelum kita bermain, kita harus tahu terlebih dahulu directive yang ingin kita buat hanya membutuhkan load 1 kali saja atau setiap ada perubahan data akan melakukan perubahan view. 

Biasanya secara default directive yang dibuat hanya meload 1 kali saja pada saat initial load, namun ada juga directive yang membutuhkan logic tambahan jika ada perubahan data, maka bisa langsung menyesuaikan datanya. 

Sebagai contoh, kita mempunyai directive seperti gambar dibawah. 

Directive di atas untuk membuat network graphic pada VisJs. Pada directive di atas mempunyai 3 variable yang harus dipassing kedalam directive. 

1. ngModel : data utama yang diperlukan untuk membuat graphic vis network
2. onSelect  : merupakan method untuk mengambil properties pada nodes yang kita pilih
3. options    : berupa data yang dipakai untuk style ing vis network 

Variable network dipakai untuk membuat graphic network pada VisJs.

Pada directive ini kita tidak menambahkan logic apa apa yang hasilnya hanya menampilkan data sesuai dengan yang pertama di load. 

Bagaimana bentuk directive yang sudah ditambahkan logic agar jika terjadi perubahan data maka akan langsung membuat graphic yang baru? 

Pertama kita define variable network dengan null. Kemudian kita buat scope.$watch yang dipakai untuk memantau perubahan data pada variable ngModel. Jika ngModel nya null, maka tidak akan melakukan apa apa, dan jika variable network nya tidak null, maka graphic yang sudah ada akan di destroy, kemudian akan di create lagi network yang baru dengan data yang baru pula.

Dengan logic seperti di atas kita sudah bisa membuat directive yang dinamis, dimana jika ada perubahan maka akan langsung di implement.

Semoga membantu dan mencerahkan ide !

Happy coding

Integrasi Jenkins dan Slack

Halo Sobat Nostra, kali ini saya akan coba memberikan tutorial tentang cara integrasi Jenkins dengan Slack. Tujuan dari intergrasi ini adalah agar setiap tim dari satu projek, dapat mengetahui bagaimana status deployment dari aplikasi yang mereka bangun.

Pertama kita perlu masuk ke dalam akun slack kita, lalu kita coba tambahkan aplikasi yang akan terhubung dengan slack. Hal ini dapat dilakukan dengan cara:
- Login pada aplikasi slack, lalu klik setting, dan pilih "Add an app.

- Lalu search jenkins CI seperti pada tampilan dibawah ini.


- Lalu Klik "Add Configuration" ,

- Selanjutnya pilih channel slack yang akan digunakan untuk pengiriman notifikasi dari jenkins. Dalam hal ini saya memili channel #build. Klik Add Jenkins CI Integration. Nanti akan di arahkan ke halaman Integration Setting, dimana ada beberapa hal yang perlu dicatat seperti token, karena berguna sebagai inputan di Jenkins.

- Lalu buka halaman website untuk jenkins yang akan kita integrasikan. Pada halaman jenkins, klik Manage Jenkins.  Klik pada bagian manage plugin, dan cari Slack Notification Plugin. Lalu klik check box plugin.
- Setelah diinstal, klik pada Manage Jenkins, lalu pilih Configuration System. Cari Global Slack Notifier Setting. Dan isi beberapa form sesuai informasi server anda. Seperti pada gambar berikut.

- Untuk setiap projek yang ingin kamu dapatkan notifikasi dari jenkins, pilih Configure pada menu proyek.

- Lalu tambahkan Slack Notification, pada bagian Post Build Action.

- Terakhir pada bagian Slack Notification, pilih event apa saja yang kamu terima notifikasinya. Seperti pada gambar berikut.

Demikian tulisan kali ini, semoga bermanfaar bagi teman-teman semua.
Terimakasih.

Overview Bulma Component

Pada blog sebelumnya saya telah menulis tentang konsep flexbox layout pada tampilan antarmuka website. Nah pada kesempatan kali ini saya akan membahas implementasi konsep itu yang telah dibundle kedalam sebuah framework CSS yang bernama Bulma. 

Bulma secara sederhana adalah sebuah framework CSS yang mengadopsi konsep flexbox yang bertujuan membuat tampilan website dapat diakses dari berbagai macam ukuran device. Framework ini sedang kekinian diberbagai forum front-end dan tidak jarang banyak workshop yang membahas Bulma.

Install Bulma;
Menginstall Bulma dapat menggunakan berbagai package manager seperti ini:

-npm install bulma

-yarn add bulma

-bower install bulma

atau dengan menggunakan CDN berikut:

https://cdnjs.com/libraries/bulma

Berikut install Bulma menggunakan NPM

Bulma telah terinstall pada folder project.

Berikut cara memanggil Bulma pada project yang dibuat:

Dan selanjutnya mari kita mulai membedah component dasar pada Bulma.

Secara mendasar component Bulma tidak jauh berbeda dengan yang component css yang lain seperti Bootstrap, Foundation, Materialize, dll. Namun konsep flexbox yang diusung Bulma yang berbeda, membuat kita sedikit "suffer" jika kita sebelumnya pernah menggunakan framework CSS yang lain seperti Bootstrap.

Container:

Seperti pada Bootstrap, component container berfungsi untuk membungkus konten. Pada Bulma sebuah container dapat diatur lebarnya dengan ukuran layar yang kita inginkan dengan mengeset seperti ini pada identifier class: is-widescreen atau is-fullhd.

Columns: 

Pada class .columns berfungsi untuk membungkus banyak class .column dan membagi item tersebut menjadi sama rata lebarnya sesuai dengan lebar device yang digunakan. Class .column bersifat flex.

Column:

Class .column merupakan child yang ada didalam .column. Lebar .column dapat diset seperti grid sistem pada bootstrap dengan meng-override class berikut: .is-1, is-2, is-3 ..., is-12

Implementasi kelas .columns dan .column

Berikut penampakannya:

Tampilan Mobile view, dengan menghilangkan item yang terakhir:

Sekian penjelasan saya mengenai Component pada Bulma, hal mendasar yang perlu dipelajari sebelum memulai menggunakan Bulma adalah mempelajari konsep Flexbox terlebih dahulu pada blog yang saya tulis sebelumnya disini. Sampai bertemu pada tulisan saya selanjutnya :D

References:

http://bulma.io/

https://medium.freecodecamp.org/colorful-fundamentals-the-reward-of-building-with-bulma-7b14883317bd

Mengenal SnappyDB

Apa itu SnappyDB?

Menurut situs resminya, SnappyDB adalah :

SnappyDB is a key-value database for Android it's an alternative for SQLite if you want to use a NoSQL approach.

It allows you to store and get primitive types, but also a Serializable object or array in a type-safe way.

SnappyDB can outperform SQLite in read/write operations.

Dengan SnappyDB Anda dapat menyimpan dan mengambil objek / array Anda dengan cepat, karena SnappyDB menggunakan serialisasi Kryo yang lebih cepat daripada serialisasi Java biasa.

Kryo adalah framework serialisasi grafik objek yang cepat dan efisien untuk Java. 

Untuk penggunaan SnappyDB, cukup mudah.Pertama, kita tambahkan gradle SnappyDB ke dalam projek

 compile 'com.snappydb:snappydb-lib:0.5.2'  
 compile 'com.esotericsoftware.kryo:kryo:2.24.0'  

Kemudian untuk penggunaan codenya, bisa dilihat seperti ini :

 try {  
   DB snappydb = DBFactory.open(context); //create or open an existing databse using the default name  
   snappydb.put("name", "Jack Reacher");   
   snappydb.putInt("age", 42);   
   snappydb.putBoolean("single", true);  
   snappydb.put("books", new String[]{"One Shot", "Tripwire", "61 Hours"});   
   String  name  = snappydb.get("name");  
   int   age  = snappydb.getInt("age");  
   boolean single = snappydb.getBoolean("single");  
   String[] books = snappydb.getArray("books", String.class);// get array of string  
   snappydb.close();  
   } catch (SnappydbException e) {  
  }  

Sedangkan untuk penggunaan penyimpanan object, contohnya adalah seperti ini :

 Booking newBooking = new Booking(booking.getBookingId(), booking.getPlaceId(),  
         booking.getBookingDate(),  
         booking.getBookingPayment(),  
         booking.getBookingUserId());  
 snappydb .put(newBooking.getBookingId, newBooking);  

Untuk mendapatkan objek yang sudah disimpan :

 Booking booking = snappydb.get(key, Booking.class);  

Sekian dari blog singkat saya, semoga bermanfaat di kemudian hari.Semangat!

Jika ingin mempelajari lebih jauh tentang SnappyDB, bisa dilihat langsung di sini dan di sini

Room Persistence Library

Room adalah bagian dari Android Architecture Components yang diluncurkan oleh Google pada Google I/O Mei 2017. Room dapat membantu kita untuk menangani data persistence pada aplikasi android. Room adalah object mapping library, lebih spesifiknya adalah object relational mapping.

Room memberikan abstraction layer untuk SQLite database. Dengan Room, kita bisa membuat database dengan kode yang sedikit dan sederhana. Dan yang paling keren dari room adalah, room mengerti SQL. Jadi kita sudah memahami SQL, tidak akan sulit untuk menggunakan Room. Untuk membuat relational database dengan Room, kita menggunakan Dao, Entity, dan kelas database Room.

Why Room? 

• Karena Room menggunakan SQL syntax untuk operasi pada database. Semua orang yang familiar dengan SQL query akan mudah menggunakan Room.
• Berbeda dengan Realm database yang menggunakan method untuk melakukan query sederhana. Jika kita ingin menggunakan Realm kita harus mempelajari method yang disediakan oleh Realm yang tidak sederhana.
• Karena SQL syntax yang kita tulis divalidasi saat compile time. Jadi jika kita salah menuliskan SQL, hal ini akan cepat diketahui dan dapat lebih cepat diperbaiki.

Example

Sebelum menggunakan Room, kita harus mengimport library room dengan menggunakan Gradle:

Setelah itu, membuat object entity. object entity adalah object yang menggambarkan table(entity) pada database.

 Lalu membuat object Dao untuk menuliskan operasi yang dapat dilakukan pada database


Setelah itu membuat object Database untuk menjahit Dao dengan object Entity.


Lalu menginisialisasikan Room Database.


Room database siap untuk digunakan.

Reference

Room Persistence Library | Android Developers

Automated Testing With Selenium

Halo, Nostra Readers!

Pertama kali nge-blog di Nostra harus diawali dengan baca basmallah dulu kali ya,

Bismillahirrahmanirrahim

Oke, pada kesempatan kali ini, saya akan membahas mengenai Selenium

Apa itu Selenium? Selenium adalah suatu tools yang dapat digunakan untuk melakukan automasi pada browser, yang berarti adalah web apps. Nah automasi apa sih yang dimaksud? Jadi, kita dapat melakukan suatu tes/skenario yang mungkin terjadi pada web apps. Contohnya, kita dapat melakukan input kepada browser, seperti ketika kita mencari di page google, atau input email dan password. Lalu juga kita dapat memberikan event seperti klik pada button.

Nah, untuk implementasinya bisa dilihat dibawah ya!

Kali ini saya akan mengimplementasikannya menggunakan Java. Untuk persiapannya, bisa dilihat di website Selenium. Download terlebih dahulu Selenium Client & WebDriver Language Bindings(Library) versi Java. Lalu download juga third party browser driver, baik itu chrome, mozilla, atau apapun web browser yang tersedia di page tersebut. Kemudian, saya sarankan menggunakan Eclipse IDE untuk membuat codes-nya. Lalu import terlebih dahulu library selenium yang tadi didownload ke project yang kita buat di Eclipse IDE untuk Selenium ini. Lalu coding pun dimulai...

Klik kanan pada project, lalu pilih Build Path dan pilih add external archives. Langsung saja pilih file .zip yang tadi didownload. Lanjut berikutnya kita akan mengimport terlebih dahulu library yang tadi di build.

Kemudian setProperty terlebih dahulu driver browser yang tadi kita sudah download dan inisiasi WebDriver, sebagaimana saya sebagai berikut,

Lalu kita mulai dengan mengambil url yang akan kita automasi, seperti contoh adalah gmail.

Sebelum lanjut, inisiasi terlebih dahulu WebDriverWait untuk menunggu agar page yang kita request sudah ter-load semua.

WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("Isi disini dengan xPath yang ingin diload dari page")));

Dapat dilihat, variable wait memberikan method until, hingga ExpectedConditions memberikan method visibilityOfElementLocated itu untuk menunggu element yang kita butuhkan muncul, dimana di dalam method visibilityOfElementLocated memberikan element dari xPath. Sebenarnya bisa menggunakan element id atau class ataupun name, namun disini menggunakan xPath agar lebih unique elementnya. Kemudian untuk memasukkan automasi input dapat menggunakan method berikut,

driver.findElement(By.xpath("Isi disini dengan xPath dari field input email page gmail")).sendKeys("lala@gmail.com");

driver.findElement(By.xpath("Isi disini dengan xPath dari button next")).click();

disini kita memberikan input lala@gmail.com ke field email yang ada pada page gmail.com tersebut. Lalu dibawahnya adalah perintah untuk click button next untuk menginput passwordnya. Lanjut berikutnya, 

wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("Isi disini dengan xPath dari field input yang akan diload")));

driver.findElement(By.xpath("Isi disini dengan xPath dari field input password")).sendKeys("Selenium101");

driver.findElement(By.xpath("Isi disini dengan xPath dari button next")).click();

Kita menunggu dulu untuk response ke page password sudah selesai diload. Lalu ketika sudah selesai diload, akan memberikan input untuk password, lalu akan memberikan perintah untuk click next setelah input password.

Selamat kalian telah membuat simple automation menggunakan Selenium!

Masih banyak yang dapat dieksplorasi di library Selenium ini untuk kegunaan testing nantinya. Selamat mencoba!

References:

- http://www.seleniumhq.org

- Youtube

Monitoring Perfomance Server with Collectd, Graphite, & Grafana

Halo sobat Nostra!

Di postingan perdana kali ini saya ingin memebrikan tutorial bagaimana cara membuat monitoring perfomansi server dengan menggunakan produk opensource (gratisan). Server monitoring adalah server yang berfungsi untuk melihat perfomansi dari sever yang berjalan seperti CPU, RAM, Disk, Network dan lain-lain. Kenapa kita butuh untuk memonitor perfomansi server? Karena server adalah backbone dari bisnis anda kita perlu memberikan perhatian tinggi. Dengan adanya server monitor kita akan dapat melihat apa yang terjadi secara langsung. Kita juga dapat mendeteksi masalah-masalah sebelum berakibat fatal. Data yang kita dapatkan dari server monitoring, kita juga dapat mengambil keputusan penting untuk mengurangi resiko terjadinya kegagalan server. Saat ini banyak perusahaan yang menyediakan layanan untuk memonitor server anda tetapi masalahnya adalah berbayar. Jangan takut di linux banyak sekali tools yang opensource yang akan memanjakan anda. Pada tutorial kali ini kita akan memakai tools collectd, grapite, dan grafana. Sebelum kita mulai untuk instalasi, saya akan menjelaskan masing-masing fungsi dari ke-3 produk tersebut. Collectd akan mengumpulkan dan mengirim metric ke Graphite. Graphite akan menyimpan data tersebut. Selanjutnya pada Grafana kita akan mengolah data menggunakan Graphite sebagai storage backend untuk membuat grafik sesuai dengan yang kita inginkan.

Oh iya pada tutorial kali ini saya menggunakan OS Ubuntu 14.04 LTS

Collectd

Collectd adalah salah satu daemon terbaik untuk mengumpulkan metric sistem secara periodik dan store informasi.

Install collectd

 sudo apt-get update  
 apt-get install collectd collectd-utils  

Start service collctd

 service collectd start  

Configure collectd

 sudo nano /etc/collectd/collectd.conf  

Kita dapat comment out plugin lainnya. Pastikan jika anda ingin menggunakan plugin, konfigurasi pluginnya harus benar dan berjalan baik jika tidak collectd tidak bisa up.

 LoadPlugin battery  
 LoadPlugin cpu  
 LoadPlugin df  
 LoadPlugin interface  
 LoadPlugin load  
 LoadPlugin memory  
 LoadPlugin swap  
 LoadPlugin irq  
 LoadPlugin processes  
 LoadPlugin users  
 LoadPlugin write_graphite  

Tambahkan konfigurasi di collectd untuk mengirim metric ke graphite

 <Plugin write_graphite>  
     <Node "graphite">  
         Host "127.0.0.1"  
         Port "2003"  
         Protocol "tcp"  
         LogSendErrors true  
         Prefix "collectd."  
         StoreRates true  
         AlwaysAppendDS false  
         EscapeCharacter "_"  
     </Node>  
 </Plugin>  

Pada konfigurasi Collectd kita dapat menambahkan plugin lainnya untuk menambah metric-metric apa yang kita ingin tambahkan untuk didapat datanya. Untuk lebih lanjut dapat dilihat list plugin collectd.


Restart service collectd

 service collectd restart  

Graphite

Graphite is an open source enterprise-scale monitoring tool that does two things:
- Store numeric time-series data
- Render graphs or API responses of this data on demand

Graphite terdiri dari 3 komponen yang semuanya menggunakan phyton:
1. Carbon : Daemon yang me listen data time series
2. Whisper : database yang menyimpan data time series (desain mirip RRD)
3. Graphite webapp : Django webapp yang menampilkan data menggunakan cairo yang diakses dari web

Graphite sangat mudah di install menggunakan native packages. pertama kita butuh semua packages yang dibutuhkan:

 sudo apt-get update  
 sudo apt-get -y install apache2 libapache2-mod-wsgi graphite-web graphite-carbon  

Edit carbon cache service file:

 sudo nano /etc/default/graphite-carbon  

Kita ini akan membuat carbon cache aktif ketika service auto start.
Tambahkan konfigurasi ini:

 CARBON_CACHE_ENABLED=true  

Edit file konfigurasi Carbon cache:

 sudo nano /etc/carbon/carbon.conf  

Ubah konfigurasi seperti dibawah ini:

 ENABLE_LOGROTATION = true  
 MAX_CREATES_PER_MINUTES = 600  

Kemudian save file dan exit

Copy file default storage-aggregation.conf

 sudo cp /usr/share/doc/graphite-carbon/examples/storage-aggregation.conf.example /etc/carbon/storage-aggregation.conf  

Kita harus membuat graphite mengatur data yang diterima dari collectd dengan membuat skema penyimpanan

 sudo nano /etc/carbon/storage-schemas.conf  

Tambahkan konfigurasi dibawah ini

 [collectd]  
 pattern = ^collectd.*  
 retentions = 10s:1d,1m:7d,10m:1y  

Start carbon cache service:

 sudo service carbon-cache start  

Edit file konfigurasi graphite web:

 sudo nano /etc/graphite/local_settings.py  

Uncomment SECRET_KEY

 SECRET_KEY = 'secret_key_for_salting_hashes'  

Uncomment dan atur time zone yang akan ditampilkan di graph

 TIME_ZONE = 'Asia/Jakarta'  

Inisialisasi konfigurasi DB Graphite

 sudo graphite-manage syncdb  

Akan muncul promted untuk membuat akun superuser. Pilih yes dan masukkan kredensial. Ini akan digunakan pada interface Graphite untuk menyimpan grafik.

Buat kepemilikan untuk akses user _graphite:

 sudo chown _graphite:_graphite /var/lib/graphite/graphite.db  

Konfigurasi Apache

 sudo a2dissite 000-default  
 sudo cp /usr/share/graphite-web/apache2-graphite.conf /etc/apache2/sites-available  
 sudo a2ensite apache2-graphite  

Ubah port apache yang akan digunakan:

 sudo nano /etc/apache2/ports.conf  

Edit sepert dibawah ini:

 Listen 81  

Tambahkan konfigurasi http untuk vhost graphite

 sudo nano /etc/apache2/sites-available/apache2-graphite.conf  

Ubah jadi seperti ini:

 <VirtualHost *:81>  

Reload service Apache

 sudo service apache2 reload  

Untuk melihat apakah collectd sudah berjalan dengan benar mengirim metric ke graphite kita dapat melihatnya di dalam folder Metrics akan terdapat folder collectd. Akses graphite web menggunakan localhost:81.

Grafana

Grafana adalah sebuah software opensource yang membaca sebuah data matrics untuk dibuat menjadi sebuah grafik atau sebuah data tertulis. Grafana banyak sekali digunakan untuk melakukan analisis data dan monitoring. Grafana mendukung banyak storage backends yang berbeda untuk data time series (Source Data). Setiap source data memiliki Query Editor tertentu yang disesuaikan untuk fitur dan kemampuan tertentu.

Install Grafana

Tambahkan list repo file di /etc/apt/sources.list.

 deb https://packagecloud.io/grafana/stable/debian/ jessie main  
 curl https://packagecloud.io/gpg.key | sudo apt-key add -  

Install package grafana

 sudo apt-get update  
 sudo apt-get install grafana  

Jalankan service dengan perintah systemd:

 systemctl daemon-reload  
 systemctl start grafana-server  
 systemctl status grafana-server  

Enable service grafana untuk auto up ketika reboot.

 sudo systemctl enable grafana-server.service  

Grafana Web

Akses Grafana dari web dengan url localhost:3000. Untuk login gunakan username/password : admin/admin

Edit data source dan pilih Graphite sebagai storage backend.

Untuk membuat Grafiknya kita perlu melakukan explore lebih jauh lagi terhadap grafana. Dengan data metric yang ada kita bebas untuk membuat grafik seperti yang kita inginkan dan butuhkan.

Salah satu yang sulit dan lama yaitu mengubah data metric menjadi grafik.
Sebagai referensi kita dapat melihat dashboard yang telah dibuat dan dishare oleh orang lain dapat kita temukan di https://grafana.com/dashboards.

Sekian tutorial kali ini bagaimana membuat monitoring server perfomance.
Semoga bermanfaat dan selamat mencoba.
Terima kasih :)