Saya sangat senang untuk menantang diri saya mempelejari sebuah teknologi baru setiap hari selama sebulan dan menulisnya kedalam sebuah blog. Fokus utama saya pada Javascripts dan teknologi yang berhubungan lainnya. Pertama, saya memutuskan untuk menulis tentang Bower.

bower-logo


Apa itu Bower ?

Bower adalah sebuah package manager dari sisi client, yang bisa digunakan untuk mencari, menginstall maupun uninstall assets pada web seperti Javascripts, HTML dan CSS. Bower tidak hanya satu-satunya tool yang digunakan developer sebagai pengelola dependency web, ada tool yang lainnya seperti Yeoman dan Grunt. Saya akan membahas pada topic selanjutnya.


Kenapa Bower ?

  • Menghemat waktu : Setiap saya ingin menginstall jquery, saya harus mencari lokasi web untuk men-download jquery, tetapi dengan bower cukup dengan mengetikkan pada command line tanpa harus menentukan versi dari jquery tersebut.
  • Dapat bekerja secara offline : Bower membuat sebuah folder untuk menyimpan semua assets pada direktori web Anda.
  • Mudah untuk menentukan semua dependency : Pada bower.json, Anda dapat melihat library-library yang Anda gunakan pada website Anda.
  • Mudah untuk melakukan update : jika Anda menginginkan versi terbaru dari suatu library dari web Anda, cukup mengetikkan perintah : bower update pada command line.

Prasyarat

Jika Anda ingin menggunakan bower, Anda harus mengikuti langkah sebagai berikut :

  • Node, download versi terakhir dari node.js https://nodejs.org/en/
  • NPM, NPM adalah Node Package Manager yang terpasang satu bundel.dengan node.js. Jadi ketika Anda menginstall node.js, NPM juga akan terinstall.
  • Git : Anda harus menginstall git untuk mengambil source code dari repository.

Menginstall Bower

Ketika prasyarat sudah dipenuhi, sekarang Anda dapat menginstal bower melalui command prompt :

  • Buat folder pada home direktori : /home/Learn30days/Bower
    npm install -g bower

Menggunakan Bower

Setelah Anda menginstall bower, sekarang Anda dapat menggunakan command-command yang dimiliki oleh bower  seperti berikut :

Screenshot from 2015-10-01 07:46:04


Menginstall Package

Bower adalah sebuah package manager yang dapat Anda gunakan untuk menginstall paket-paket yang dibutuhkan dalam web seperti jquery.

$ bower install jquery --save

Tunggu sampai proses download jquery selesai, Anda dapt melihat struktur project web Anda :

$ tree

jquery

Untuk mencoba jquery, buat sebuah file index.html pada folder : /home/Learn30days/Bower.

<!doctype html>
<html>
<head>
    <title>Learning Bower</title>
</head>
<body>
 
<button>Animate Me!!</button>
  http://bower_components/jquery/jquery.min.js   $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </body> </html>

Test code Anda pada browser google chrome :

animate

Melihat Daftar Semua Package

Jika Anda ingin melihat daftar paket yang terinstall pada aplikasi Anda, pada command prompt ketikkan perintah :

$ bower list

Mencari Package

Jika Anda ingin menggunakan twitter bootstrap dapat mencarinya dengan menggunakan perintah :

$ bower search bootstrap

searchbootstrap

Jika ingin menginstall bootstrap ketikkan pada command prompt :

$ bower install bootstrap --save

Menggunakan file bower.json

Selain menggunakan command prompt, juga bisa menggunakan file bower.json untuk menambahkan depenndency.
Pada folder /home/Learn30days/Bower ketikkan :

$ bower init

bowerjson

Sekian untuk hari pertama, semoga cukup memberikan informasi tentang penggunaan bower dan Anda mungkin bisa mencobanya sendiri.
Keep Learn, Have fun Coding!!

Advertisements