Sebelumnya, saya ingin menegaskan bahwa saya bukanlah seorang yang tahu banyak apalagi ahli tentang ke-dua hal di atas. Saya termasuk pemula dibidang web programming atau web design dan sekitarnya. Ibarat orang lapar, saat ini terlalu banyak menu makanan yang tersedia di atas meja makan, sehingga jadi bingung harus mulai dari mana, makan yang mana saja. Ujung-ujungnya sakit perut dan tidak ada yang bisa dicerna dengan baik. Itu yang saya pribadi rasakan, terlalu banyak frameworks atau library di luar sana, coba ini coba itu, akhirnya tidak paham semuanya :D.
Saat melihat video event Google I/O 2014, rasanya semuanya menjadi mengerucut ke 1 arah, yaitu Polymer. Maksud saya, terlalu lama rasanya bagi orang seperti saya yang minim pengetahuan dibidang teknologi web, jika harus belajar semuanya dari teori dasar, padahal nafsu sudah menggebu atau keadaan sudah memaksa untuk bisa membuat sesuatu seperti web apps profesional. Bayangkan jika kemudian kita diberi alat untuk bisa membuat web apps dengan tampilan seperti G+, Evernote, Keep, Feedly dan sejenisnya, dengan "mudah". Maksud saya mudah disini, tentu saja banyak hal yang harus dipelajari, tetapi semuanya telah sangat berkurang dan jauh lebih simple. Tentu sangat menarik bukan, layaknya kucing diberi ayam bakar. Itulah gambaran Polymer yang ditunjukkan di dalam video-video di bawah ini.
Untuk lebih jelas tentang Polymer, bisa langsung menuju websitenya di sini. Silahkan anda cek video-video Google I/O 2014 tentang Polymer atau bisa langsung mencoba demo webapps-nya. Saya yakin jika anda seperti saya yang pemula, rasanya anda akan terbengong-bengong saat melihat video atau mencoba demo-demonya. Maaf kalau terlalu hiperbola :D. Karena semuanya menjadi terlihat sangat mudah dan yang paling kentara adalah minim menulis kode javascript.
OK, selesai "curhat" saya. Jadi, kalau boleh saya pribadi simpulkan, dengan Polymer, membuat webapps seperti membuat aplikasi dengan Lazarus, Delphi, VB atau pemrograman visual lainnya. Hal yang biasa jika disana kita terbiasa menggunakan komponen atau membuat/mengembangkan komponent sendiri, kemudian mendistribusikannya ke team atau komunitas.
Apa yang perlu disiapkan untuk dapat menggunakan "library" Polymer ini ? Minimal 2 tool yang harus disiapkan, yaitu Node.js dan Bower. Apa itu ? Silahkan cek langsung ke websitenya langsung :D. Pada saat tulisan ini saya tulis, saya menggunakan Ubuntu 14.04. Versi paket nodejs official dari Ubuntu adalah 0.10.25 yang sayangnya, saat saya install ternyata banyak problem. Oleh karena itu, saya pribadi menyarankan agar sebisa mungkin menggunakan nodejs terbaru, entah itu dengan cara meng-compile sendiri atau menggunakan paket ppa. Untuk menghindari kerumitan lebih, maka ppa lebih direkomendasikan. Caranya adalah, jalankan perintah di bawah ini untuk menambahkan repo ppa nodejs.
sudo add-apt-repository ppa:chris-lea/node.jssudo apt-get updateSebelum mengintall/update nodejs, jika anda sebelumnya telah menginstall nodejs-legacy, maka pastikan anda menghapus paket tersebut.
sudo apt-get remove nodejs-legacyKemudian install/update nodejs.
sudo apt-get install nodejsJika sebelumnya anda sudah menginstall paket nodejs dan npm, maka secara otomatis paket-paket tersebut akan diuninstall.
Setelah nodejs berhasil diinstall, maka selanjutnya adalah menambahkan module Bower. Jalankan perintah di bawah ini.
sudo npm install -g bowerPastikan anda menggunakan sudo karena module bower akan diinstall secara global (-g), artinya akan disimpan ke dalam folder system. Setelah berhasil, maka module bower akan tersimpan di dalam folder /usr/lib/node_modules/bower atau /usr/local/lib/node_modules/bower.
Jika terjadi error seperti di bawah ini :
npm ERR! Error: EACCES, mkdir '/usr/lib/node_modules'
npm ERR! { [Error: EACCES, mkdir '/usr/lib/node_modules']
Maka anda kurang menambahkan sudo di dalam perintah install bower.
Jalakan perintah bower -v untuk mengetahui versi bower yang berhasil diinstall.
Jika anda mendapatkan tampilan seperti di atas, maka nodejs dan bower telah berhasil di install dengan benar. Selamat untuk anda.
Sekarang bagian yang paling menarik, yaitu membuat contoh aplikasi dengan Polymer. Kita akan mencoba membuat "webapp" sederhana yang hanya akan menampilkan google-map dengan koordinat tertentu. Contoh ini untuk menujukkan mudahnya membuat webapp dengan menggunakan Polymer, bahkan untuk yang awam pada javascript.
Pertama, silahkan buat folder tertentu untuk menyimpan file-file yang akan kita buat. Misalkan my-map, lalu masuk dir ke dalam folder tersebut.
mkdir ~/Documents/my-mapcd ~/Documents/my-map
Kemudian download "library-library" Polymer yang diperlukan. Secara default kita memerlukan library pokok yaitu polymer dan untuk contoh ini ditambah library untuk menampilkan google-map yaitu google-map. Dikarenakan library-library tersebut kebanyakan atau mungkin semunya didistribusi via github, maka pastikan anda telah menginstall paket/aplikasi git. Untuk menginstall git, dalam dilakukan sebagai berikut.
Kemudian seperti kebanyakan project web, buatlah file index.html yang isinya seperti di bawah ini.
<!doctype html>
<html>
<head>
<title>My Map</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/google-map/google-map.html"/>
<style>
</style>
</head>
<body>
<polymer-element name="my-map">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#google_map {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
}
</style>
<google-map
latitude="21.4221632"
longitude="39.8265266"
zoom="17"
maptype="satellite"
id="google_map" horizontal layout>
</google-map>
</template>
<script>
Polymer('my-map', {
});
</script>
</polymer-element>
<my-map></my-map>
</body>
</html>
Simpan file index.html tersebut. Lalu jalankan perintah di bawah ini (masih tetap dari dalam folder tersebut).
Itu artinya port 8000 sudah ada yang menggunakan. Python simple http server module secara default menggunakan port 8000. Jika terjadi error seperti ini, maka tentukan port yang lain, misalkan 9001.
Kemudian buka browser anda (untuk browser saya hanya pernah test pada Chrome 36 dan Firefox 30), kemudian tuliskan http://localhost:8000 atau http://localhost:[PORT] dimana PORT adalah nilai yang anda tentukan pada waktu menjalankan Python SimpleHTTPServer. Dibawah ini adalah hasilnya.
Done!!!
Simple sekali bukan. Mohon maaf saya tidak bisa menjelaskan apa maksud kode html di atas, mungkin pada kesempatan lain yang memang benar-benar membahas step-by-step pembuatan webapp dengan Polymer. Artikel ini hanya fokus kepada instalasi nodejs dan bower beserta contoh penggunaanya.
Sekian, semoga bermanfaat dan selamat mencoba.
Diselesaikan di Malang, 5 Ramadhan 1435 H.
sudo apt-get install gitPerintah untuk mendownload library google-map polymer adalah:
bower install --save Polymer/polymer PolymerLabs/google-map
Kemudian seperti kebanyakan project web, buatlah file index.html yang isinya seperti di bawah ini.
<!doctype html>
<html>
<head>
<title>My Map</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/google-map/google-map.html"/>
<style>
</style>
</head>
<body>
<polymer-element name="my-map">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#google_map {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
}
</style>
<google-map
latitude="21.4221632"
longitude="39.8265266"
zoom="17"
maptype="satellite"
id="google_map" horizontal layout>
</google-map>
</template>
<script>
Polymer('my-map', {
});
</script>
</polymer-element>
<my-map></my-map>
</body>
</html>
Simpan file index.html tersebut. Lalu jalankan perintah di bawah ini (masih tetap dari dalam folder tersebut).
python -m SimpleHTTPServerJika perintah di atas memunculkan error : socket.error: [Errno 98] Address already in use
Itu artinya port 8000 sudah ada yang menggunakan. Python simple http server module secara default menggunakan port 8000. Jika terjadi error seperti ini, maka tentukan port yang lain, misalkan 9001.
python -m SimpleHTTPServer 9001
Kemudian buka browser anda (untuk browser saya hanya pernah test pada Chrome 36 dan Firefox 30), kemudian tuliskan http://localhost:8000 atau http://localhost:[PORT] dimana PORT adalah nilai yang anda tentukan pada waktu menjalankan Python SimpleHTTPServer. Dibawah ini adalah hasilnya.
 |
| Kota Suci Makkah, In Sya Alloh |
Done!!!
Simple sekali bukan. Mohon maaf saya tidak bisa menjelaskan apa maksud kode html di atas, mungkin pada kesempatan lain yang memang benar-benar membahas step-by-step pembuatan webapp dengan Polymer. Artikel ini hanya fokus kepada instalasi nodejs dan bower beserta contoh penggunaanya.
Sekian, semoga bermanfaat dan selamat mencoba.
Diselesaikan di Malang, 5 Ramadhan 1435 H.