Resolve Conflict di IntelliJ IDEA dengan mudah

Terdapat fitur untuk me-resolve conflict dengan mudah di IntelliJ IDE yang selama ini tidak kita ketahui. Sebagai seorang programmer yang bekerja bersama team, pasti masalah conflict code ini sering kali dijumpai. Dan kita sebagai pengguna IDE IntelliJ tidak mengetahui bahwa selama ini ada fitur yg sudah di sediakan oleh IntelliJ.

Study Case

Terdapat conflict yang bisa dilihat pada saat melakukan pull di sourcetree:

Yang mengalami conflict adalah class GreetingController. Bisa dilihat bentuk code menjadi mengandung "<<<<<<< HEAD" dan sulit untuk di lihat code mana yang hasil orang lain dan mana yang hasil kerja kita.

How To

Pertama-tama install plugin Git Integration pada IntelliJ

Selanjutnya setting pada menu VCS untuk mengaktifkan fitur Git Integration pada project yang sedang dibuka. Masuk ke Enable Version Control Integration...  lalu pilih Git dan klik OK.

Apabila setting diatas sudah benar, maka akan muncul opsi Git jika kita klik kanan di class. Didalam opsi Git kita pilih Resolve Conflicts...

Akan muncul window seperti berikut, dan kita pilih Merge...

Selanjutnya akan muncul window dengan tiga buah kolom code:
- bagian kiri merupakan hasil kerja kita
- bagian tengah merupakan hasil merge yang akan di submit ke git
- bagian kanan merupakan code yang berasal dari server git terakhir

Nah kita sudah bisa melihat dengan jelas blok code yang menjadi conflict karena orang lain menambahkan method di baris yang sama.

Kita tinggal klik tanda "<<" dari bagian kanan untuk memasukan hasil kerjaan orang lain ke bagian tengah/result.

Dan juga tinggal klik tanda ">>" dari bagian kiri untuk memasukan code hasil kerjaan kita, lalu klik Apply

Akhirnya kita bisa melakukan commit hasil merge dan melakukan push ke server git.

Cukup sekian tips kali ini, semoga membantu dalam keseharian koding.
Thanks...



*Artikel ini di dedikasikan untuk salah satu programmer nostra yang penasaran dengan fitur Resolve Conflict IntelliJ ini

AngularJS Tips n Trick : Image preview

Berjumpa kembali dengan topik angular. Kalau sebelumnya kita perenah membahas mengenai upload multiple file. Kali ini Saya akan membahas menampilah preview ketika melakukan upload file image. Pada dasarnya untuk membuat sebuah preview kita perlu menaruh file tersebut menjadi sebuah link yang dapat di akses oleh tag image. Untuk mencapai hal tersebut kita tentunya memiliki beberapa cara. Untuk saat ini kita akan membahas 2 cara saja. Pertama, kita dapat mengupload file tersebut pada sebuah situs yang berfungsi sebagai image hosting atau bisa juga ke backend kita sendiri. Kedua, kita dapat menggunakan salah satu fungsi javascript yaitu readDataAsUrl() yang dimiliki oleh FileReader.

File Reader sendiri merupakan salah satu interface yang memiliki berbagai macam fitur untuk digunakan dalam modifikasi file untuk web. Untuk lebih lengkapnya mengenai File Reader dapat di baca saja di webnya :D .Karena pada kesempatan ini saya tidak akan membahas mengenai file reader, yang akan saya bahas adalah penggunaannya pada angular.

Dengan mengetahui adanya 2 cara yang cukup mudah dilakukan, berikut ilustrasi flow yang akan terjadi dengan menggunakan 2 cara tersebut.

1. Melakukan upload file ke backend atau file management lain.

 

2. Menggunakan File Reader untuk membaca file sebagai url.

Dari flow di atas dapat dilihat apabila kita menggunakan file management, maka file yang kita simpan akan dikirim terlebih dahulu. Dengan asumsi user dapat mengganti berkali-kali foto yang akan di gunakan maka tentunya akan menjadi boros bandwith. Itulah mengapa saya memutuskan untuk mengguankan file reader dan menggunakan fungsinya untuk mengubah file menjadi url. 

Bagaimana cara menggunakannya?  Sebenarnya bisa saja kita memasang javascript langsung untuk menggunakan FileReader. Tetapi karena saya bukan kubu pecinta javascript membuat saya memilih menggunakan angularJS yang tidak berbau javascript dan tentunya saya tidak tertarik mencoba menggunakan FileReader dalam format javascript. Apabila tertarik menggunakannya langsung dapat dilihat dari sini karena dsana cukup lengkap demo dan sourcenya. :D

Setelah mencari bower component untuk FileReader dan tidak menemukan yang memuaskan. Akhirnya saya menemukan sebuah source dari Plunker. Kemudian saya memutuskan untuk menggunakan Upload.js yang ada karena cukup sesuai dengan keinginan. 

Berikut adalah potongan code yang digunakan dengan sedikit penyesuaian : 

  1. HTML

    Seperti yang saya jelaskan pada blog lainnya bahwa angular tidak memiliki directive bawaan untuk menerima input type file. Sehingga kita perlu membuat sendiri directive tersebut. Kebetulan saya sudah memiliki directive tersebut sehingga saya menggunakan yang sudah ada yaitu directive file-model. Kemudian HTML akan menggunakan ng-if untuk mengecheck untuk mendapatkan url terbaru.

 2. Controller

    Pada controller terdapat method getImage() yang akan membuat url baru untuk setiap file baru yg tertampung pada scope. Url akan di tampung pada variable scope imageUrl yang akan di gunakan sebagai source di html.

  3. Upload.js

Berikut merupakan upload.js yang sudah disesuaikan dengan format yang biasa saya gunakan dalam project saya. Disana dapat dilihat method readAsDataURL() sebenarnya memanggil method FileReader readAsDataUrl.

Demikian cara penggunaan File Reader yang untuk angularJS. Hasilnya akan terlihat seperti berikut : 

Sekian dulu dari saya kali ini. Semoga dapat membantu bagi yang memiliki keinginan untuk melakukan display image yang ingin diupload.

Happy Coding~ :D