SoundManager2, Play audio di Web

Pada acara GDG DevFest di surabaya kemaren, ada presentasi mengenai Web audio API yang dilakukan oleh Yohan Totting, founder dari ThinkRooms. Materi ini menarik karena memang saya belum pernah dengar  web audio API. Sebelum itu saya beranggapan bahwa satu-satunya cara standar main audio di web adalah dengan tag audio pada HTML5. Dengan diperkenalkan web audio API terdapat standar baru yang coba diperkenalkan untuk memperbaiki kekurangan tag audio pada HTML5. Kekurangan ini mengenai perbedaan dukungan format audio disetiap browser dan juga kurangnya power yang dimilikinya. Firefox tidak dapat memainkan audio format MP3 dan MPEG4/HE-AAC/H.264 karena memang audio ini merupakan audio non-free, proprietary. Apple dan chrome memiliki lisensinya sehingga mereka dapat memainkan file-file audio ini. Masalah ini tentunya merupakan masalah yang serius, karena setiap browser memiliki daftar format audionya masing-masing. Baca artikel berikut untuk mengetahui lebih detail problem apa yang ada pada tag audio HTML5.  

Web audio API sejauh yang saya pelajari menarik banget. Kita bisa mengatur equalizer, manambah beberapa efek audio, menampilkan visualizer dan lainnya. Tapi saya sih masih menganggap terlalu awal mengimplementasikan web audio API. Teknologi ini merupakan teknologi yang baru saja diperkenalkan. Chrome, safari dan firefox versi terbaru saja yang baru mendukung. Sedangkan versi-versi lain yang berada dibawahnya masih harus menggunakan tag audio HTML5 sebagai satu-satunya solusi standar untuk audio web.

Menurutku sih satu cara terbaik masih dipegang oleh flash. Maksud saya disini adalah flash audio yang ada pada flash player. Dengan engine audio ini, lisensi tidak ditanggung oleh browser pengguna. Implementasi audio pada web atau game akan sama pada setiap browser karena memang dilakukan oleh flash player. Apa yang kita lakukan disini memang tidak standar, tapi akan solve problem yang kita punya.

Satu librari javascript yang dapat diandalkan untuk urusan ini adalah SoundManager2. Menurutku librari ini sangat-sangat bagus, idenya adalah menggunakan audio flash sebagai fallback audio player tapi status dan kontrolnya masih dapat dibuat dengan javascript dan HTML5. Menarik bukan!! kita dapat membuat tampilan player pake CSS dan HTML5 sedangkan engine audio pake flash. Hanya beberapa baris kode javascript, audio akan berjalan lancar pada semua browser. Tapi pertanyaannya, bagaimana jika browser pengguna tidak install flash player, bukankah tidak akan jalan? yang pasti engine audio flash tidak akan jalan, tapi SoundManager2 cukup pintar karena dia akan memilih alternatif yang dapat didukung oleh browser pengguna. Disini kita pun dapat memilih engine audio apa yang mau digunakan, apakah html5 audio atau flash audio dan prioritas mana yang didahulukan. Dan jangan khawatir, kita tidak akan berhubungan langsung dengan script-script flash karena memang engine audio flash bekerja dibalik layar pada SoundManager2 :D_.  

Ukuran file SoundManager2 sangat kecil, hanya berukuran 11KB untuk Build-script optimized, minified, no-debug version. Sedangkan untuk versi originalnya masih hanya berukuran 41KB. Website social music yang biasa kita kenal seperti 8track, SoundCloud, LastFM setahu saya memanfaatkan SoundManager2 untuk audio librari. Beberapa feedback dari beberapa orang yang saya baca dari dokumentasi SoundManager2, bahwa mereka telah memanfaatkan librari ini untuk membangun beberapa website yang bertema:

1. Scripted language tutorials
2. Spoken word/audio assistance
3. Ringtone/music previews
4. Musician/artist web site soundtracks
5. Web-based chat  

Terlihat banyak banget yang bisa kita lakukan dengan SoundManager2. Beberapa bulan lalu saya membuat sebuah theme wordpress yang bertema musik. Dalam theme ini, saya menginginkan user dapat mengupload beberapa format audio standar dan tidak akan ada masalah ketika pengunjung memainkan semua file audio yang user upload tersebut. Dalam theme, saya membuat beberapa macam player yang user dapat pilih dan mendukung beberapa file audio standar seperti mp3, m4a, ogg, wav dll. Proses develop sangat-sangat simple karena saya juga menggunakan SoundManager2. Disini saya menemukan bahwa librari ini memang sangat brillian. Dan terakhir saran saya, jika menginginkan membangun sebuah website yang sejenis diatas, cobalah untuk riset mengenai SoundManager2. Trims udah membaca, semoga bermanfaat :D_.

Blog post fuelphp dan ODM Mongodb Part I

Artikel ini merupakan sebuah tutorial pemrograman FuelPHP untuk pembuatan halaman blog post website. Pada prakteknya, database yang digunakan adalah MongoDB, database NoSQL berbasis document-oriented. Dijelaskan juga tentang sebuah teknik abstraksi database yang dikenal dengan Object Document Mapping (ODM)

Object Document Mapping (ODM)

Pernahkah Anda mendapati istilah ORM atau Object Relational Mapping? Saya yakin Anda pernah mendengarnya karena hampir disemua framework pemrograman yang saya kenal selalu menyertakannya untuk abstraksi model database. Sedikit ulasan bahwa ini adalah sebuah teknik pemrograman yang mana data dalam database akan diubah ke object-oriented oleh program yang kita buat. ORM akan melakukan dua hal, yang pertama akan me-mapping data tiap row pada sebuah tabel database ke dalam sebuah objek dan yang kedua membangun hubungan relational antar objek-objek representasi dari tabel database. Secara konsep, objek yang terbentuk dibedakan antara persistence object dan transient object. Objek dikatakan persistence disini memiliki arti bahwa semua propertiesnya represented pada data model database, sedangkan transient memiliki arti objek biasa, yang tidak persistence. Konsepnya sama seperti binding data pada sebuah form.  

Konsep Object Document Mapping(ODM) sama persis seperti penjelasan ORM diatas, bedanya hanya terletak pada jenis database yang digunakan. ODM ini digunakan pada jenis database NoSQL yang berbasis document-oriented yaitu mongoDB.

Package FuelPHP tentang ODM MongoDB

Didalam dokumentasinya FuelPHP telah menyediakan sebuah class yang dapat berinteraksi dengan database MongoDB. Beberapa operasi dasar dapat kita lakukan dengan class ini, seperti menambahkan sebuah document, mengambil isi collection, menghapus document dan juga mengedit document. Tetapi tidak seperti ORM yang sudah secara default sudah tersedia dalam paket download FuelPHP, ODM tidak tersedia dalam paketan itu. Sepertinya para pengembang fuelphp belum ada rencana untuk menambahkan konsep ODM ini ke fuelphp, saya lihat roadmap version 2.0 tidak ada rencana pengembangan untuk teknik ini.

Walaupun development fuelphp belum sampai pada pengembangan teknik abstraksi database NoSQL, Phil Sturgeon yaitu salah satu developer FuelPHP memperkenalkan sebuah package yang dia porting dari sebuah package kohana buatan Colin MollenHour. Package Phil Sturgeon hasil porting ke FuelPHP dapat ditemukan pada link ini, sedangkan package asli buatan Colin dapat ditemukan pada link ini.

Pada artikel ini akan saya tunjukkan bagaimana membuat sebuah contact form dengan memakai package ODM di FuelPHP. Pada dasarnya ini sama saja dengan kita bekerja pada ORM FuelPHP, yang harus disiapkan hanya model yang merepresentasi data pada database, tapi sebelum masuk ke kode-kode pemrograman, ada beberapa kebutuhan sistem yang harus dipersiapkan dulu. Berikut adalah requirement sistem yang harus kita persiapkan:

1. Instalasi MongoDB + Running service MongoDB
Sebelumnya saya pernah menulis artikel tentang MongoDB yang dibagi menjadi tiga bagian, bagian pertama saya bahas tentang Document-oriented yang dimiliki oleh MongoDB, bagian kedua kemudian tentang operasi-operasi dasar MongoDB, dan terakhir bagian ketiga tentang autosharding MongoDB. Untuk instalasi MongoDB, saya tulis pada bagian kedua dari artikel itu. Instalasinya cukup mudah untuk dilakukan, baik Anda yang memiliki sistem operasi Linux maupun Windows. Setelah ter-install jalankan sebuah service MongoDB, dengan menjalankan sebuah perintah:

$ bin/mongod --dbpath ~/db

2. PHP driver untuk Mongodb
Secara default PHP driver untuk MongoDB ini belum ditambahkan pada konfigurasi server. Untuk Anda yang memakai Linux, bisa menambahkan driver ini dengan melakukan perintah sebagai berikut:

sudo pecl install mongo

Buka file php.ini, kemudian tambahkan driver ini.

extension=mongo.so

Pada sistem Windows, kita dapat mendownload driver ini di http://github.com/mongodb/mongo-php-driver/downloads. Unzip dan pindahkan php_mongo.dll ke dalam direktori extension PHP (biasanya folder dengan nama "ext"). Setelah driver diletakkan disana, kemudian buka file php.ini dan tambahkan driver ini didalamnya.

extension=php_mongo.dll

Selesai menambahkan driver ini, restart dulu web server kemudian cek hasilnya dengan memanggil fungsi phpinfo().

phpinfo()

3. Aktivasi package FuelPHP
Download package ODM MongoDB buatan Colin yang sudah di porting oleh Phil pada alamat berikut. Letakkan package itu pada folder /fuel/packages. Buka file /fuel/app/config/config.php dan aktifkan package itu dengan menambahkannya pada daftar package yang akan selalu di load.

'always_load' => array(
...
'packages' => array(
 'orm',
 'mongo-odm',
 ),
...
)

4. Koneksikan aplikasi ke service MongoDB
Mengkonfigurasi agar aplikasi fuelphp terkoneksi ke service MongoDB yang telah dibuat bisa dilakukan dengan cara menambahkan beberapa config berikut pada file app/config/db.php.

...
'mongo' => array(
 'default' => array(
 'hostname' => '127.0.0.1',
 'database' => 'gooblog',
 //'port' =>28017,
), 
...

Semua requirement yang dibutuhkan untuk pembuatan halaman blog post ini, cuma beberapa point seperti diatas. Dari sini, kita tinggal membuat sebuah model post dan tampilan presentasinya. Untuk pembahasan selanjutnya dapat dilihat pada tulisan lanjutan dari artikel ini akan saya tulis pada bagian II yang akan membahas kode kode program . Untuk kode-kode program yang akan kita buat akan saya tulis pada bagian II artikel ini. :D

* Artikel ini pernah dipublis bisakomputer tertanggal 2 Agustus 2012 dengan judul Membuat Blog Post FuelPHP dengan ODM MongoDB Part I

NodeJS Part II: Javascript, EventEmitter dan Modules

Ryan Dahl, dialah yang pertama kali mengembangkan Node. Ryan Dahl adalah seorang developer C dan Ruby on Rails, dia banyak mengerjakan proyek menggunakan kedua bahasa itu. Awal penelitian Node juga menggunakan C, tapi kemudian dia kesulitan menyelesaikannya. Tapi pertanyaannya sekarang adalah, kenapa kemudian Ryan Dahl memilih Javascript untuk Node? Secara umum, Javascript adalah bahasa yang membuang semuanya ke dalam variabel global, memiliki reputasi buruk untuk handling data-data binary, dan lagi masih belum ada pemrograman GUI di Javascript. Tapi walaupun begitu, Dahl menganggap Javascript adalah bahasa pemrograman yang cocok untuk Node.

Pada part kedua dari artikel Node ini, saya akan membahas tentang first-class function Javascript yaitu alasan utama kenapa Node ditulis dengan Javascript, selanjutnya pemrograman dasar  Node dengan event emitter pattern dan terakhir dasar yang harus kita ketahui untuk pembuatan module Node. Tetapi sebelum itu, ada baiknya Anda membaca juga Artikel Javascript sebelumnya yang berjudul Menjadikan Javascript lebih Modular dan NodeJS Part I: Asynchronous I/O dan Event-Driven yang juga pernah saya tulis sebelumya pada Bisakomputer.

Function first-class object javascript

Javascript adalah bahasa object-oriented, semuanya yang dimasukkan adalah object. Function Javascript adalah sebuah objek juga, Anda dapat memasukkan properties ke dalamnya, dan menambahkan sebuah method. Sebuah objek javascript dapat inherit juga ke objek lain. Contoh kode yang bagus untuk menjelaskan ini adalah sebagai berikut:

Object.prototype.inObj = 1;
function A(){
this.inA = 2;
}

A.prototype.inAProto = 3;
B.prototype = new A; 
B.prototype.constructor = B;
function B(){
this.inB = 4;
}

B.prototype.inBProto = 5;

x = new B;
console.log(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

Kode diatas adalah dasar pembuatan objek, berikut juga inheritance antar objek yang ada dalam javascript. Ada dua objek dalam kode diatas, A dan B. Objek B inherit ke objek A, sehingga masing-masing properties A dapat diakses dari objek B. Output console dari kode diatas adalah 1, 2, 3, 4, 5.

Dari beberapa referensi yang pernah saya baca, Javascript adalah sebuah bahasa pemrograman yang memiliki sifat first-class object. Maksud dari first-class object ini adalah objek, entity, atau value dalam Javascript dapat dikonstruksi saat program run-time. Anda dapat membuat sebuah fungsi, mengganti nilai sebuah variabel, mengganti callback event meskipun program sedang dalam keadaan running. Selain itu, javascript disebut sebagai bahasa first-class object juga karena objek dalam Javascript dapat melakukan beberapa hal berikut ini:

• Dapat disimpan dalam sebuah variabel.
• Dapat dilewatkan sebagai parameter ke dalam sebuah function/subroutine.
• Dapat dipakai sebagai return dari sebuah function/subroutine.
• Dapat dibentuk saat run-time program.

Dari beberapa hal yang kita dapati diatas, tentunya ini merupakan bahasa pemrograman yang cocok untuk pemrograman server dengan non-blocking I/O dan konsep event-driven.

Event Emitter Module

Satu module penting yang harus kita pahami, menurut saya, dari banyak module yang dimiliki node adalah module events. Event-driven yang dimiliki node memungkinkan sebuah objek memiliki satu atau beberapa events. Suatu contoh objek fs.readStream memiliki atau emit beberapa events seperti 'open', 'data', 'end', dan lainnnya. Ini artinya instance dapat memberikan sebuah callback function pada masing-masing event emit objek fs.readStream tersebut.

var filename = "README";
var readStream = fs.createReadStream(filename);

readStream.on('open', function () {
console.log('File opened');
});

readStream.on('data' function(data){ 
console.log(data);
});

readStream.on('end', function(){
console.log('File ended.');
});

readStream.on('error', function(err) {
console.log(err);
});

Untuk menginginkan sebuah objek yang dapat emit events, Anda memerlukan module events. Dalam module ini hanya ada satu buah objek yaitu EventEmitter. Untuk melakukannya objek hanya butuh inherit ke EventEmitter dan kemudian emit beberapa event dalam objek tersebut. Contoh yang dapat menjelaskan ini adalah sebagai berikut:

var EventEmitter = require('events').EventEmitter,
util = require('util');

var adder = function(a, b){
this.a=a;
this.b=b;
};

util.inherits(adder, EventEmitter);

adder.prototype.add = function(){
this.emit('display', this.a+this.b);
};

Baris pertama dari kode diatas adalah memanggil sekaligus instance class EventEmitter. Sebuah objek Adder harus inherit ke EventEmitter, ini ditunjukkan pada baris 8. Kemudian objek Adder emit sebuah event 'display' pada add method ditunjukkan pada baris 10. Dari kode diatas menunjukkan, instance dari Adder bisa membuat sebuah fungsi untuk display hasil penjumlahan kedua parameter yang dimasukkan.

var InstanceAdder = new adder(5,3);

InstanceAdder.on('display', function(result){
  console.log('Output Adder: ' + result);
});

InstanceAdder.add();

Instance adder pada program ini, menampilkan hasil penjumlahan pada console (baris 3). Ketika program ini running, console akan mengeluarkan: Output Adder: 8.
Untuk referensi lengkap mengenai EventEmitter ini, dokumentasinya dapat baca pada link ini.

Dasar pembuatan modules node

Node memiliki sistem module yang sederhana. Ini akan mudah Anda ikuti. File dan module dalam node itu adalah satu kesatuan. Kita buat kode-kode objek pada sebuah file, dan kemudian file itu kita panggil pada program node sebagai sebuah module. Untuk urusan ini, kita bisa memanfaatkan objek module.export untuk merepresentasikan objek module. Contoh adalah kode objek adder yang sudah kita buat dan kita modifikasi sedikit hingga tampak seperti ini:

var EventEmitter = require('events').EventEmitter,
util = require('util');

var adder = function(){};

util.inherits(adder, EventEmitter);

adder.prototype.add = function(a, b){
  this.emit('display', a+b);
};

module.exports=new adder();

Kemudian kita simpan pada sebuah file dengan nama adder.js. Untuk pemanggilan module, kita bisa memanfaatkan fungsi require yang diikuti path dari module tersebut.

var InstanceAdder = require('./adder2');

InstanceAdder.on('display', function(result){
  console.log('Output Adder: ' + result);
});

InstanceAdder.add();

Ada beberapa trik yang dapat kita ikuti untuk module node ini, Anda dapat melihat referensi lengkap pada link dokumentasi node di sini.

Penutup

Dengan memahami topik yang ada pada bagian pertama dan kedua ini, saya rasa kita tidak akan merasa kesulitan untuk mempelajari node ini lebih lanjut. Saat ini ada 6 ribu lebih module node yang dapat kita manfaatkan di NPM. Dengan mempelajari beberapa module yang sudah ada itu, kita dapat menciptakan sebuah aplikasi atau mungkin sebuah tool server yang keren.

Terakhir, jika memang artikel ini dapat membantu Anda dalam memahami teknologi node, saya berharap Anda dapat meninggalkan sebuah komentar disini. Dengan komentar yang Anda tinggalkan, itu akan membantu saya dalam menyelesaikan bagian terakhir dari artikel tentang node ini. Semoga bermanfaat :)

*Artikel ini pernah publis di bisakomputer,com tertanggal 6 Agustus 2012

NodeJS part I: Asynchronous I/O dan Event-driven

Pada artikel terdahulu di Bisakomputer.com, saya pernah menulis tutorial artikel tentang pembuatan web dengan platform nodejs. Pada bahasan NodeJS  ini saya akan coba menulis ke dalam tiga bagian artikel, dan pada artikel pertama ini, saya akan memberikan contoh pemrograman NodeJS dengan beberapa operasi synchronous dan operasi asynchronous I/O event-driven yang juga dimiliki oleh NodeJS. Disini saya ingin menunjukkan kekuatan yang dimiliki NodeJS untuk membangun aplikasi server dan real-time website.

Definisi synchronous dan asynchronous I/O event-driven

Asynchronous disini berarti non-blocking I/O. Ini berarti setiap operasi asynchronous harus segera mungkin mengembalikan nilai agar program tidak perlu menunggu proses baca tulis ke I/O. I/O sendiri adalah komponen sebuah mesin atau komputer untuk urusan input dan output data. Komponen I/O memiliki kecepatan baca tulis jauh lebih kecil dari kecepatan prosesor dalam memproses data. Kebalikan dari asynchronous, sebuah program yang menjalankan operasi synchronous akan menunggu operasi itu selesai baru kemudian program dapat melanjutkan operasi lainnya.

Sedangkan istilah event-driven disini sama dengan event-based programming yaitu urutan atau flow program ditentukan oleh sebuah events. Jika diartikan secara bahasa event itu sama dengan kejadian, sedangkan Wiki mendefinisikan events ini dengan perubahan pada sebuah kondisi objek. Perpindahan mouse dari window satu ke window lain, penekanan tut-tut keyboard, sampai pada request halaman website. Paling dasar sekaligus terpenting dari event-driven ini adalah event-handler atau callback. Callback ini sebuah fungsi atau subroutine yang bisa sebagai argument pada operasi-operasi asynchronous. Dia akan dipanggil sekali setelah operasi selesai dilakukan.

Di dalam NodeJS terdapat operasi-operasi yang sifatnya synchronous dan asynchronous, tapi keunggulan NodeJS ini ada pada non-blocking I/O alias asynchronous nya.
Asynchronous dan event-driven yang ada pada NodeJS ini disebut-sebut sebagai bentuk pemrograman baru dari pendahulunya, multi-threaded. Berikut adalah dua program yang mengerjakan operasi yang sama tapi berbeda, satu menggunakan synchronous dan yang satunya lagi menggunakan asynchronous

var fs = require('fs');
try {
 var data = fs.readFileSync('README.md', 'ascii');
 console.log(data);
}catch (err) {
 console.error("There was an error opening the file:");
 console.log(err);
}

Operasi membaca atau memperoleh data file yang dilakukan program diatas, menggunakan operasi synchronous readFileSync(). Program tidak akan melanjutkan operasi lain sebelum readFileSync() selesai dieksekusi dan mengembalikan teks file README.md. Ketika menggunakan operasi synchronous terkadang juga mengembalikan exception atau kesalahan, sehingga penggunaan try/catch harus dilakukan untuk kestabilan dan debugging program. Pemrograman seperti diatas tentu tidak asing lagi bagi Anda, karena hampir semua pemrograman yang Anda lakukan memiliki operasi synchronous seperti diatas.

var fs = require('fs');
fs.readFile('README.md', 'ascii', function(err,data){
 if(err) {
 console.error("Could not open file: %s", err);
 process.exit(1);
 }
console.log(data.toString('ascii'));
});

Program ini sama dengan program yang pertama, yaitu mendapatkan isi dari sebuah file README tapi bedanya pada penggunaan fungsi operasi asynchronous. Pada program yang kedua ini menggunakan fungsi asynchronous readFile(). Semua fungsi asynchronous nodejs memiliki argument callback yang biasanya harus dimasukkan pada akhir parameter. Fungsi readFile() diatas memiliki callback yang akan beroperasi untuk display isi file ke console. Ini dilakukan jika operasi readFile() selesai dilakukan.

Kemudahan Asynchronous I/O dan Event-driven NodeJS

1. Independent Code
Prinsipnya semua operasi yang dependent terhadap operasi asynchronous dapat diletakkan pada callback operasi asynchronous tersebut. Hal ini tentunya dapat menciptakan blok-blok operasi yang independent terhadap yang lain.

2. Nested Callbacks
Pada pemrograman synchronous, fungsi operasi tergantung pada operasi lain yang berada pada baris atasnya, ini yang dinamakan dengan linier sequence. Tetapi pada nodejs dengan dukungan asynchronous dan event-driven nya, urutan eksekusi operasi dapat dilakukan dengan nested callbacks. Ini bukan dari atas ke bawah seperti pada linier sequence, tapi secara prinsip fungsi callback dieksekusi setelah fungsi asynchronous selesai dilakukan.

var fs = require('fs');
var Filename='README.md';
fs.chmod(Filename, 777, function (err) { 
 fs.rename(Filename, "READ.md", function (err) {
 fs.stat("READ.md", function (err, stats) {
 var isFile = stats.isFile();
  });
 });
});

Pada contoh program diatas, terdapat tiga operasi yang dilakukan. Mengubah permission file README.md, mengubah nama file README.md dan terakhir mendapatkan informasi seputar file READ.md. Callback fungsi chmod() merupakan fungsi rename(), sedangkan callback rename() adalah stat(). Dengan cara nested callbacks seperti inilah urutan eksekusi program dilakukan.

3. Parallelisation
non-blocking I/O pada NodeJS memungkinkan untuk menjalankan operasi-operasi secara pararel. Kode program berikut adalah contoh parallelisation operasi fungsi stat(). Tujuan dari program ini adalah menghitung total size file pada sebuah direktori.

var fs = require('fs');
var count = 0,
 totalBytes = 0;
fs.readdir(".", function (err, filenames) {
 var i;
 count = filenames.length;
 for (i = 0; i < filenames.length; i++) {
 fs.stat("./" + filenames[i], function (err, stats) {
 totalBytes += stats.size;
 count--;
 if (count === 0) {
 console.log(totalBytes);
 }
 });
 }
 });

Fungsi stat() akan dilakukan pada masing-masing file. Tiap fungsi stat() akan dijalankan secara pararel satu dengan lainnya.

4. Code Reuse
Dalam pemrograman NodeJS, Anda dapat me-wrapper kode yang Anda buat kedalam sebuah fungsi. Semua bahasa pemrograman apapun tentunya dapat melakukannya, tapi kemudahaannya disini adalah kode yang di-wrapper dapat dimasukkan sebagai argument pada fungsi lain.

var fs = require('fs');
var path1 = "./",
 path2 = ".././",
 logCount;
function countFiles(path, callback) {
 fs.readdir(path, function (err, filenames) {
 callback(err, path, filenames.length);
 });
}
logCount = function (err, path, count) {
 console.log(count + " files in " + path);
};
countFiles(path1, logCount); 
countFiles(path2, logCount);

Pada contoh, kita me-wrapper kode untuk display teks ke console dengan nama logCount. Sehingga kita dapat memakai ulang wrapper logCount pada operasi menghitung jumlah file pada path1 dan juga operasi pada path2.

Penutup

Pada artikel pertama ini merupakan dasar pemrograman yang ada pada NodeJS. Kekuatan NodeJS itu terletak pada asynchronous I/O dan event-driven nya, sehingga untuk membangun aplikasi server atau website yang berjalan diatasnya, kita harus memahami dulu kedua istilah ini dan bagaimana penerapannya pada NodeJS.

Beberapa aplikasi keren sudah banyak yang dibuat diatas platform ini, diantaranya yang saya ketahui adalah Blaast Backend (http://blaast.com/) yang dibangun diatas NodeJS, sebuah tool kolaborasi projek yaitu trello (https://trello.com/), dan lagi sebuah IDE online development yaitu Cloud9 IDE (https://c9.io/).

*Artikel ini pernah publis di bisakomputer.com tertanggal 17 Juli 2012

Duh...

Lebih dari dua bulan ini aku fokus mempelajari protokol XMPP. Bukan protokol ini saja sih, aku rasa banyak banget yang telah aku pelajari. Mulai dari berlembar-lembar RFC dan XEP protokol ini sampai buat module erlang pada ejabberd. Ditambah lagi, aku harus memperbaiki keahlianku dalam pemrograman android platform. Pertanyaannya adalah demi apa??

Hampir tiap malam aku kagak tidur, tapi nanti paginya baru aku tidur :p_. Mulai bulan puasa kemaren sampai sekarang, jam hidup itu mulai tidak normal. Yah ini mungkin juga karena aku mulai tidak ngantor lagi, jadinya seleksi alam milih waktu yang tepat untuk didepan laptop dan waktu yang tepat untuk istirahat. Pertanyaannya adalah demi apa??

Persis satu bulan sebelum puasa kemaren, aku kedapatan sebuah projek yang harusnya menyita semua waktuku. Harusnya aku fokus disini untuk bisa menyelesaikan, tapi ternyata tidak begitu. Dan terakhir pertanyaannya adalah demi apa??

Tahun ini merupakan tahun terakhir kesempatanku untuk menyelesaikan kuliah. Yah tinggal selangkah lagi lah bisa selesai, eh dua langkah deng, eh bukan tiga langkah kayaknya, aaarrgg terserahlah pokoknya tinggal skripsi ini aja yang harus aku perjuangkan. Tapi mahasiswa telat lulus kayak aku ini, memang semuanya serba sulit. Mau ke kampus tidak ada temen, mau ngurus ini itu tidak ada yang bisa dititipi, serba #hufft wes pokoknya. Teman-teman seangkatan yang belum selesai disini, mungkin tidak lebih dari jumlah keseluruhan jari normal manusia. Sekarang denger kabar adek angkatan akan wisuda aja, aku hanya bisa berkata "selamat yah, kawan" dengan mengheningkan cipta untuk sesaat. Yang pasti tinggal tugas akhir aja ini yang harus segera aku selesaikan.

Tugas akhir yang sedang aku kerjakan adalah mengenai messenger dalam lingkungan kampus. Teknologi yang digunakan sudah ada lebih dari sepuluh tahun ini yaitu XMPP protokol, tapi tetep saja protokol ini masih populer dalam pembuatan messenger. Aku tertarik dengan pembuatan messenger ini mungkin karena akan banyak manfaatnya jika memang jadi terimplementasikan pada lingkungan kampus. Messenger bisa jadi satu-satunya media komunikasi yang dapat dipakai bersama, mahasiswa, dosen, staf dan pejabat kampus. Problem-problem yang muncul karena kurangnya komunikasi mungkin saja dapat diselesaikan dengan implementasi aplikasi messenger ini. Yah aku harap begitu.

Aku sih baru pertama kali kerja dengan protokol ini. Aku juga pertama kali membuat messenger, eh kagak deng, aku pernah buat aplikasi chatting long polling yang tampilannya mirip facebook. Tapi aplikasi chatting ini tidak dapat diimplementasikan karena memang long polling tidak bisa diandalkan untuk urusan ini. Melihat beberapa aplikasi yang sukses memakai protokol XMPP ini, aku yakin bahwa protokol ini dapat diandalkan untuk komunikasi real-time messenger. Sampai artikel ini ditulis, aku sudah berhasil menggunakan external autentikasinya ejabberd. Autentikasi ini memungkinkan kita berbagi session antara ejabberd server dengan sistem diluar itu. Masih banyak sebenarnya yang harus aku kerjakan untuk menyelesaikannya, yah pasti bisalah, harus bisa. #AkuSemangato #Yosh

Menu

Group

Contact

Contact menu actionbar

Chat message

Action dan Filter Hook pada Wordpress

Wordpress adalah CMS yang paling powerful saat ini menurut saya, tapi masih sedikit developer yang saya kenal yang fokus pada CMS ini. Sudah hampir setahun ini saya mempelajari wordpress. Banyak yang sudah saya pelajari dan saya rasa masih banyak lagi yang harus dipelajari dari CMS ini. Setiap kali membaca codex, selalu ada cara yang berbeda yang biasa dilakukan. Hal yang paling sulit menurut saya adalah ketika pertama kali mempelajari lingkungan kerja yang tidak "umum" pada CMS ini. Artikel yang Anda baca ini merupakan artikel kedua saya tentang Wordpress yang saya sharing pada BisaKomputer.com. Saya pernah menulis bagaimana translasi bahasa pada Wordpress yang dapat Anda lihat di sini. Beberapa artikel lain tentang Wordpress juga akan saya share untuk para pembaca BisaKomputer kedepannya.

Artikel ini merupakan dasar dan sekaligus bagian paling penting jika hendak bekerja dengan plugin dan theme Wordpress. Bagian penting yang saya maksud adalah action dan filter Aordpress. Action dan filter ini merupakan sebuah cara yang disediakan oleh Wordpress bertujuan untuk "hook into" ke sistem core Wordpress. Kedua hal ini jika dalam codex, masuk dalam bahasan Plugin API.

Wordpress mengenalkan action dan filter, bertujuan mengikutsertakan kode yang kita buat untuk dieksekusi pada titik-titik yang telah ditentukan. Kedua cara ini hampir sama untuk dipahami, oleh sebab itu banyak developer yang baru belajar Wordpress sukar untuk dapat membedakannya. Pengalaman saya, dengan memahami kedua hal ini, semua tutorial dan dokumentasi yang diberikan oleh para top-developer akan dengan mudah kita ikuti. Berikut ini saya berikan beberapa penjelasan tentang perbedaan kedua jenis hook ini dalam Wordpress.

Actions Hook

Bagian ini sebenarnya memang sangat mudah untuk dipahami, tapi juga sangat sulit untuk dijelaskan. Berikut adalah beberapa definisi bagus tentang action hook:

Action hooks are essentially placeholders. Wherever an action hook is placed, it will execute any code that has been "hooked" to it.

WordPress action hooks are a means of providing a way for other developers to insert their own code in specific locations within your code, in order to change or expand the functionality of your code.

Definisi pertama dijelaskan bahwa action hook adalah sebuah poin atau tanda yang kita letakkan pada sembarang proses dan nantinya akan mengeksekusi semua kode komputer yang kita kaitkan padanya. Pada definisi yang kedua dijelaskan bahwa dengan cara action hook inilah Wordpress mengikutsertakan developer-developer-nya untuk ikut menyisipkan kode-kode buatan mereka untuk diikutkan pada banyak "placeholder" yang telah disediakan oleh core Wordpress.

Action hook function reference

- has_action()
- add_action()
- do_action()
- do_action_ref_array()
- did_action()
- remove_action()
- remove_all_actions()

Ada 7 function reference action hook yang saya dapat dalam dokumentasi plugin API. Tapi yang akan sering kita temukan pada plugin atau theme sekarang adalah function do_action() dan add_action(). Fungsi do_action akan mengeksekusi semua hook action yang telah kita tambahkan dengan fungsi add_action. Kedua fungsi saling melengkapi, yang satu mengeksekusi proses yang diikutsertakan dan yang lain menambahkan proses untuk diikutsertakan. Contohnya kita meletakkan sebuah poin action dengan tag 'before_checkout_product'. Misalkan kita menginginkan agar sebelum proses checkout produk dieksekusi, mungkin ada developer lain yang ingin mengikutsertakan proses lain (hook) disini. Maka skenario kode yang akan kita buat akan tampak seperti ini:

$cart=["product_id1"=>1,"product_id2"=>2];

$customer=["name"=>"Mustofa","email"=>"...", ...];

do_action("before_checkout_product",$cart,$customer);

checkout();

Untuk lebih memahami do_action diatas saya sarankanu untuk membaca dokumentasinya di sini. Pada parameter pertama adalah nama tag action yang ingin Anda eksekusi, sedangkan parameter selanjutnya, kedua, ketiga dan seterusnya adalah arguments yang bisa Anda lewatkan pada fungsi hook yang developer lain dapat mengakses. Cukup simple bukan, dengan cara seperti inilah Wordpress bekerja. Ada banyak poin-poin action hook yang dibuat oleh core Wordpress, Anda dapat menemukan semuanya pada codex atau pada website Adam R Brown di sini.

Sekarang untuk mengkaitkan kode yang kita buat pada action hook 'before_checkout_product', kita dapat melakukannya dengan menggunakan fungsi add_action().

add_action('before_checkout_product',function($cart,$customer){

notify_admin($cart,$customer['email']);

},10,2);

Kita dapat meletakkan action hook diatas pada sembarang tempat pada function.php atau pada plugin wordpress kita. Kalau Anda membaca dokumentasi tentang fungsi ini, maka Anda akan mendapati bahwa ada 4 arguments yang diterima fungsi ini yaitu tag, fungsi callback, prioritas, dan jumlah arguments yang diterima fungsi callback.

add_action( $tag, $function_to_add, $priority, $accepted_args );

Argument prioritas(ketiga) secara default bernilai 10, ini artinya hook yang kita buat akan dieksekusi setelah fungsi hook bernilai 1,2,3,...,9 selesai dieksekusi. Sedangkan argument keempat secara default bernilai 1, ini artinya ada 1 arguments yang harus diikutkan oleh fungsi callback.  Pada tag 'before_checkout_product' ada 2 variabel yang diikutkan($cart dan $customer), maka pada argument keempat ini, harus kita isi dengan nilai 2.

Filter Hook

Filter hook ini sama mudahnya dipahami. Alasan kita memakai filter hook adalah memodifikasi sebuah nilai, memfilter sebuah nilai atau juga mereplace sebuah nilai dengan nilai baru. Sama seperti action hook, disini juga ada fungsi yang memfilter sebuah nilai dengan fungsi-fungsi filter hook yang dikaitkan (apply_filter) dan juga ada fungsi wordpress untuk menambahkan filter hook untuk dikaitkan (add_filter). Contohnya seperti kita memiliki sebuah fungsi dengan nama email_notify yang tampak seperti ini:

...
$message='Dear Mustofa, Bisakomputer telah memperbarui tampilan website menjadi responsive website. Sekarang Anda dapat membuka bisakomputer.com dengan memakai beberapa device mobile yang Anda gunakan.';

$message=apply_filter('email_notify_message',$message);

wp_mail( $to, $subject, $message, $headers, $attachments );

Dari kode diatas, kita menginginkan nilai sebuah variabel $message dapat difilter oleh developer lain. Difilter disini, bisa bermaksud mengganti nilai message, menambahkan sesuatu ke message dan lain-lain. Kemudian kita mendefinisikan apply_filter dengan tag 'email_notify_message' untuk memfilter, memodifikasi, atau mereplace nilai $message dengan filter hook yang dikaitkan pada 'email_notify_message'. Core Wordpress banyak menyediakan filter-filter tag yang dapat mengubah nilai varibel pada pemrosesannya. Kita dapat menemukannnya pada dokumentasi codex atau link berikut di sini.

Sama seperti action yang memanfaatkan fungsi add_action, kita dapat memanfaatkan add_filter untuk menambahkan filter fungsi buatan kita dengan cara seperti ini:

add_filter('email_notify_message',function($message){

// Mengganti nilai message
$new_message ='Hello Mustofa, bla..bla..bla';

// Menambahkan nilai message
$new_message = $message.' Salam bisakomputer.com';

return $new_message;

});

Yang perlu kita perhatikan disini adalah fungsi filter hook mengembalikan sebuah nilai. Pada add_filter juga terdapat 4 arguments yang bisa dimasukkan yaitu tag filter, fungsi callback, prioritas dan terakhir jumlah arguments yang diikutkan.

add_filter( $tag, $function_to_add, $priority, $accepted_args );

Filter hook ini banyak dipakai oleh developer theme Wordpress agar theme buatannya dapat dibuat child theme. Berikut adalah fungsi-fungsi referensi Wordpress untuk keperluan filter hook ini.

Filter hook function reference

- has_filter()
- add_filter()
- apply_filters()
- current_filter()
- merge_filters()
- remove_filter()
- remove_all_filters()

Penutup

Baik action dan filter penting harus kita pahami untuk menjadi developer Wordpress. Perbedaan fungsi hook action dan filter adalah fungsi hook tidak perlu mengembalikan nilai sedangkan fungsi hook filter mengembalikan nilai. Dengan memahami kedua hal ini, menurut saya, kita akan cepat menguasai Wordpress dan kemudian membuat plugin dan theme sendiri. Oke, demikian artikel ini. Ada banyak hal yang ingin saya share tentang Wordpress di BisaKomputer ini dan kalau memang ini bermanfaat bagi teman-teman, saya harap Anda dapat meninggalkan sebuah komentar disini :)

* Artikel ini pernah diposting bisakomputer.com tertanggal September 12, 2012 

Android Dev. For Dummy II: Activity

Kenapa activity ini dinamakan activity?. Dan apakah yang dimaksud activity ini sama dengan kata aktivitas pada bahasa kita?. Apa yang kita pahami dari sebuah kata aktivitas, definisi yang sama juga istilah activity pada pemrograman android. Aktivitas adalah kerja, atau salah satu kegiatan kerja yang dilaksanakan dalam tiap bagian dalam perusahaan. Ini merupakan definisi umum yang saya ambil dari situs artikata.com.

Sedangkan definisi activity pada dokumentasinya adalah "An activity is a single, focused thing that the user can do". Fokus pada apa yang dilakukan user/kerja user. Apa dikatakan sama tapi dengan bahasa yang berbeda, menurutku sih :P_. Banyak dari temen2 developer yang baru belajar, masih mengalami kesulitan memahami ini. Yah itu mungkin karena mereka langsung menulis kode-kode contoh program tanpa membaca dokumentasi untuk memahami apa yang sebenarnya mereka tulis. Disini mungkin akan saya tulis beberapa penjabaran (bukan contoh atau tutorial) mengenai sebuah activity pada pemrograman android.

Ketika kita melakukan sebuah aktivitas, maka minimal akan ada hal berikut ini:
1. Kapan atau ketika ada aksi apa, aktivitas mulai dilakukan (action).
2. Bagaimana cara kita memanggil aktifitas (intent).
3. Bagaimana aktivitas dilakukan (lifecycle activity).

Activity pada android dibentuk dengan menjawab minim ketiga pertanyaan diatas. Itu artinya kita harus mendefinisikan ketiga atribut ini ketika membuat sebuah activity. Apa yang saya tulis disini akan saya batasi untuk ketiga hal ini saja. Sebenarnya ada beberapa bahasan lagi tentang activity, tapi dilain kesempatan saja mungkin akan saya tulis :))_.

1. Action

Action pada activity lebih menjawab pertanyaan, aksi apa sebuah activity dilakukan. Yah kalo kita bermaksud melakukan sebuah aktifitas, pastinya ada sesuatu hal sehingga kita melakukan itu bukan!!. Nah action disini sama seperti itu :D_. Sebuah activity dipanggil bisa darimana saja bukan!! karena hal inilah tujuan digunakan action. Kita mendefinisikan action-action apa saja yang dapat di handle oleh activity yang kita buat.

Untuk mendefinisikan action, kita melakukannya dibagian intent, melalui method setAction dan getAction. Kita bebas memberikan nilai apa saja, tapi tentu saja ada beberapa dan mungkin banyak (saya belum tahu keseluruhan) dari action-action dari seluruh activity (yang sudah ada pada) sistem android. Contoh action-action android yang biasa kita pake:

Contoh kalo kita mau menelepon seseorang maka yang akan kita buat adalah,

public static final String ACTION_CALL = "android.intent.action.CALL";
Intent phoneIntent = new Intent();
phoneIntent.setAction(ACTION_CALL);

contoh lain lagi kalau kita mau memanggil semua activity yang meng-"handle" kirim message email,

public static final String ACTION_SEND = "android.intent.action.SEND";
Intent emailIntent = new Intent();
emailIntent.setAction(ACTION_SEND);
emailIntent.putExtra("android.intent.extra.EMAIL", new String[] { emailAddress });

Ada yang beda disini, action ACTION_SEND bukanlah action spesifik untuk memanggil activity kirim email. Dia sebenarnya general action untuk activity-activity untuk mengirim pesan keluar tidak hanya email, maka dari itu kita memberikan informasi yang memberikan detail mengenai intent yang kita buat, dengan kita memberikan sebuah extras.

Membuat sebuah action mudah dilakukan, cek link berikut ini untuk dokumentasi pemberian nama dari action yang kita buat.

For actions you define, it's best to use the package name as a prefix to ensure uniqueness. For example, a TRANSMOGRIFY action might be specified as follows:

<action android:name="com.example.project.TRANSMOGRIFY" />

2. Intent

Di artikel sebelumnya saya sudah nulis beberapa hal mengenai intent. Saya menulis beberapa hal yang harus kita pahami dari intent android. Yang mau saya tambahkan disini mengenai intent-filter. Biasa kita temukan di file manifest, bukan!!. #eh iyah tapi sebelumnya ada beberapa atribut selain action pada intent. Atribut intent itu seperti data, extras, category dan flag. Data disini merupakan data yang kita berikan pada intent, contohnya kalau intent ACTION_EDIT maka kita memberikan data dokumen apa yang akan kita edit, atau intent ACTION_CALL maka data yang harus kita berikan tentunya nomer telpon. Extras merupakan key-value sebagai additional information intent, sedangkan category berisi informasi mengenai komponen (activity) seperti apa yang akan meng-handle intent ini. Ada beberapa category disini, diantaranya adalah,

sumber: http://developer.android.com/guide/components/intents-filters.html

intent-filter. apa tujuan kita mendefinisikan intent-filter pada activity?? Kita mendefinisikan intent-filter disini untuk memberitahu sistem android bahwa action-action apa saja yang dapat di-handle oleh activity ini. Tujuannya sih juga agar aplikasi lain dapat memanfaatkan activity yang kita bikin. Yah dengan membuat intent dan spesifik action yang kita bikin, aplikasi lain dapat menggunakannya. Ehhmmm bukan itu aja sih tujuannya. Banyak action pada sistem android, dan itu terbagi menjadi beberapa category seperti yang saya tulis diatas. satu action yang harus ada pada aplikasi adalah ACTION_MAIN dengan category-nya LAUNCHER. Action ini adalah saat pengguna android, menekan icon aplikasi pada halaman menu. Action ini harus ada karena memang semua aplikasi yang kita bikin, pastinya akan ada pada halaman menu, right!!!.

<activity android:name="com.uin.messager.ui.ContactList">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
     <intent-filter>
      <action android:name="android.intent.action.CREATE_SHORTCUT" />
      <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
...
</activity>

3. Lifecycle activity

Semua yang hidup pasti punya lifecycle!!! ya iyalah namanya aja life+cycle :D_. Activity disini juga punya lifecycle. kalo yang ini tidak ada cara lain, kita harus membaca "buku manual" untuk memahaminya. Sama seperti kita, manusia, kita diberi "buku manual" yang senantiasa kita baca untuk hidup karena memang itu dari pencipta kita.
Yang harus kita ketahui disini adalah kapan sistem android mengeksekusi activity dan apa yang dilakukan kemudian. lanjut lagi kapan sistem menghentikan aplikasi dan apa yang kemudian dilakukan activity. contoh lainnya, apa yang kemudian dilakukan activity ketika sistem android mengalami low memory. Pertanyaan disini lebih kepada apa yang dapat dilakukan activity ketika ada event pada sistem android. Yah semuanya itu dapat kita aksees dengan adanya lifecycle activity. Berikut lifecycle diagram untuk activity,

oke, manual dokumentasinya disini, silahkan membaca yak :))_.

public class ExampleActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // The activity is being created.
    }

    @Override
    protected void onStart() {
        super.onStart();
        // The activity is about to become visible.
    }

    @Override
    protected void onResume() {
        super.onResume();
        // The activity has become visible (it is now "resumed").
    }

    @Override
    protected void onPause() {
        super.onPause();
        // Another activity is taking focus (this activity is about to be "paused").
    }

    @Override
    protected void onStop() {
        super.onStop();
        // The activity is no longer visible (it is now "stopped")
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // The activity is about to be destroyed.
    }
}

Activity pasti memiliki ketiga hal yang sudah saya tulis diatas. tapi ada satu lagi yang penting dari sebuah activity ini, yaitu View. View ini tidak dapat berdiri sendiri, dia masih memerlukan komponen (activity). Yah ini sama seperti wujud kongkretnya dari activity. Ada banyak macam class View yang dapat kita gunakan, dan insyaallah akan saya tulis di artikel berikutnya.

To be continued...