Category: Programming

Ionic Side Menu dan Dokumentasi

Satu hal yang membosankan ketika ada teknologi baru yang belum dipelajari adalah membaca dokumentasi. Banyak programmer nemu masalah dan berakhir di stackoverflowPadahal jawaban dari pertanyaan yang ada ujung-ujungnya juga kembali ke dokumentasi.

Salah satunya Ionic Side Menu. Berjuang membuat ukuran lebar side menu yang dapat dikostum dengan membuat javascript sendiri untuk override fungsi di ionic. Tapi ternyata fungsi untuk mengubah ukuran dapat dilakukan dengan satu baris tambahan perintah, width.

<ion-side-menu side="left" width="80">

Lesson Learned : Baca Dokumentasi


Mencoba Grunt : The Javascript Task Runner

Bertahun – tahun berinteraksi dengan Javascript, akhirnya kemarin gue coba Grunt. Awalnya gue skeptis, namun setelah melihat banyaknya repository projek-projek bermaanfaat di Github yang menggunakan Grunt, gue luluh. Ada dua hal yang gue butuhkan dari grunt. Concatenation & Minification.

Tujuan utama dari Grunt adalah automation. Sama seperti tujuan dasar programming, to automate processes. Sebelum menggunakan Grunt, gue menggabungkan beberapa file javascript secara manual, lalu mengkompresinya melalui http://jscompress.com/. Gue melalukan hal itu karna dulu gue pikir proses itu hanya dilakukan pada tahap selesai development. Proses manual yang cukup panjang itu tidak begitu terasa karna hanya dilakukan sekali, ketika upload ke server publik. Tapi nyatanya, revisi tetap membutuhkan update. Dan gue harus melakukan proses itu ketika ada update ke server.

Dengan Grunt, gue bisa mengautomasi penggabungan beberapa file javascript kemudian mengkompresi ukurannya sehingga ready untuk distribusi. Yang dibutuhkan oleh grunt, hanyalah file package.json dan gruntfile.js. Mendefinisikan dua file tersebut memang cukup memakan waktu. Tapi proses tersebut hanya dilakukan sekali. Selanjutnya, otomatis!

Untuk mempermudah proses development. Gue membuat template untuk concatenation minification. Template ini bisa digunakan untuk projek lain, hanya perlu mengganti beberapa parameter pada gruntfile.js.

module.exports = function(grunt) {

  // Project Configuration
  grunt.initConfig({
  	pkg: grunt.file.readJSON('package.json'),
  	concat: {
  		options: {
  			separator: ';'
  		},
  		dist: {
  			src: ['js/*.js'],
  			dest: 'build/<%= pkg.name %>.js'
  		}
  	},
  	uglify: {
  		build: {
  			src: 'build/<%= pkg.name %>.js',
  			dest: 'build/<%= pkg.name %>.min.js'
  		},
  	}
  });

  // Load the plugin that provides the "uglify" task
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s)
  grunt.registerTask('default', ['concat', 'uglify']);

};

Di dalam `grunt.initConfig`, gue mendefinisikan parameter `pkg`, parameter ini berisi objek yang diambil dari file package.json. Di dalam file package.json berisi

{
  "name": "vlp-js",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Selanjutnya, gue coba paparkan penjelasan beberapa baris kode pada gruntfile.js.

concat: {
	options: {
		separator: ';'
	},
	dist: {
		src: ['js/*.js'],
		dest: 'build/<%= pkg.name %>.js'
	}
},

Parameter `concat` berisi konfigurasi untuk menggabungkan beberapa file. Didalamnya terdapat parameter `options`, lalu `separator`. `separator` berisi string pemisah antar file ketika disatukan. Gue mengisi `;` agar tidak terjadi error kalau ternyata pada baris terakhir setiap file ada yang tidak diberi titik koma. Lalu terdapat parameter `dist` yang maksudnya adalah ‘distribusi’ berisi `src` dan `dest`. `src` merujuk pada file-file yang akan digunakan. Pada contoh diatas gue menggunakan asterik untuk menyeleksi semua file .js pada folder js. `dest` merujuk pada nama file gabungan dari setiap javascript tersebut. `<%= pkg.name %>` akan merujuk pada nama projek yang didefinisikan pada file `package.json`.

uglify: {
	build: {
		src: 'build/<%= pkg.name %>.js',
		dest: 'build/<%= pkg.name %>.min.js'
	},
}

Selanjutnya, `uglify`. Cara kerjanya adalah menghapus newline  pada file dan membuat beberapa nama variabel menjadi lebih pendek. Dengan begitu, ukuran file javascript pun akan menjadi lebih kecil. Pada parameter ini, kita mengatur sumber file pada parameter `src`. Dan nama file setelah diminifikasi pada parameter `dest`.

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['concat', 'uglify']);

Baris kode diatas berguna untuk me-load plugin yang akan digunakan, lalu menggunakannya pada fungsi `registerTask`.

Sebelum menjalankan grunt, jangan lupa install semua dependensinya dengan perintah `npm install`Capture

Jalankan `grunt`, dan cek folder build. Akan ada dua file. File hasil gabungan, dan file gabungan yang sudah diminifikasi.

Capture2Selesai. 🙂


Javascript Google Drive API Library

Percayalah, google sudah sangat baik membuat banyak servicenya dapat diakses oleh para developer. Ditambah dengan dokumentasi yang komplit dan lengkap. Dengan tambahan sample code yang mudah dipahami dan di copy paste.

Tapi memang, sudah kodratnya manusia, yang tak pernah puas akan semua anugrah yang diberikan, dan selalu berharap akan kemudahan-kemudahan. Oleh karena itu, gue meringkas beberapa fitur yang paling sering digunakan di Google Drive API kedalam satu buah library kecil yang gue letakkan di github.

Semoga berkenan, dan bermanfaat bagi umat https://github.com/afief/GDriveJS

Silakan di fork, lalu kita sama-sama making the world a better place.


Angular – $http

Minggu kemarin gue nulis tentang Fetch() API. Metode untuk mengambil resource / data dari URL yang diberikan. Method tersebut masih belum banyak digunakan, bahkan sangat sedikit karna baru bisa di terapkan di Chrome dan Firefox versi paling baru.

Nah, kali ini gue coba berbagi tentang $http service di Angular. Service yang fungsinya sama dengan Fetch() API atau fungsi XHR lainnya. Perbedaan yang paling menonjol adalah fungsi ini merupakan fungsi bawaan dari AngularJS dan bisa digunakan tanpa tambahan modul lainnya.

Yang berbeda selanjutnya adalah fungsi ini mempunyai chain success dan error yang sangat memudahkan coder untuk memeriksa hasil pemanggilan. Contoh paling dasar penggunaan success dan error bisa dilihat disini :

// perhatikan metode chaining success dan error
$http.get('[url yang menghasilkan data]').
success(function(data, status, headers, config) {
  //data : berisi data yang diambil
  //status : status pemanggilan, apakah berhasil (200), not found (404), dll
  //headers : header data yang diterima
}).
error(function(data, status, headers, config) {

});

(more…)


Memulai Belajar Angular JS

AngularJS adalah framework javascript yang digunakan untuk memaksimalkan elemen HTML menjadi tampilan yang dinamis. Meskipun masih terbilang muda, framework ini sudah banyak digunakan. Beberapa aplikasi yang sudah menggunakannya antara lain Youtube on PS3, Vevo, ga.me, Sky Store, dan MSNBC.

Salah satu fitur yang paling utama dan belum gue temuin di framework lain adalah Two Way Data -Binding. Fitur ini memungkinkan nilai elemen terhubung langsung dengan model. Ketika model / variabel di dalam controller diubah, maka tampilan di dalam DOM Element akan ikut berubah. Bergitupula apabila tampilan di elemen diubah, maka model di dalam controller pun akan ikut berubah. Contohnya seperti di bawah ini
[codepen_embed height=”268″ theme_id=”14290″ slug_hash=”xGKzOq” default_tab=”result” user=”afief”]See the Pen AngularJS – Two Way Data-Binding by Afief Yona Ramadhana (@afief) on CodePen.[/codepen_embed]

ubah text yang ada di dalam textbox

Selain fitur tersebut, fitur lain yang menarik juga adalah Template. Kita bisa membuat template dari HTML biasa, lalu membinding  setiap elemen ke dalam model sehingga tampilannya menjadi dinamis. Kita juga bisa membuat beberapa tampilan dengan HTML yang terpisah, lalu membuatnya menjadi halaman-halaman yang terpisah dengan menggunakan ngRoute.

Fitur – fitur tersebut dan fitur lain seperti MVVM, Directive, Service, dll dapat dipelajari dengan mudah dan menyenangkan di codeshool.com. Situs tersebut menyediakan course gratis bagi yang mau belajar AngularJS, dengan menonton beberapa video yang berisi penjelasan-penjelasan singkat namun terpapar dengan baik. Kemudian kita juga bisa mengerjakan contoh kasus pada setiap sesinya untuk dapat melanjutkan ke sesi course selanjutnya. Selamat Belajar 😀


Bahasa Pemograman Baru Dari Apple

Programmer memang bukan pekejaan yang keras, membutuhkan banyak tenaga, dan mengeluarkan banyak keringat. Tapi meski begitu, jadi programmer harus siap untuk belajar sepanjang hayat.

Apple, di acaranya semalam, Worldwide Developer Conference, mengumumkan bahasa pemrograman baru, Swift. Swift adalah pengembangan dari Objective-C yang mereka klaim lebih cepat, mudah dan modern. Mungkin itu satu – satunya alasan yang bisa saya terima mengapa mereka membuat bahasa pemrograman baru. Selain itu, ini adalah pekerjaan baru bagi programmer buat baca dokumentasinya.

Semoga kelak bahasa pemrograman baru mereka benar – benar bisa membantu.