Caching Menggunakan Cloud Storage Pada Blaast

Hai Hai, saya lagi. Minggu2 terakhir ini kok jadi produktif bikin tutorial yang panjang2 :D. Tutorial kali ini, akan membahas fitur cloud storage pada platform blaast. Ini adalah tulisan kedua saya mengenai blaast. Sebelumnya, adalah cara membuat Bordered Layout pada blaast.

Sebelum kita mulai, seperti biasa, download dan install dulu emulator blaast. Oh iya, sedikit cerita mengenai blaast:

Blaast merupakan platform development mobile berbasiskan javascript. Blaast juga memiliki fitur cloud storage berbasiskan javascript yang berjalan pada Node.JS. Lebih lengkap, silahkan baca2 di website-nya.

Jalankan blaast rocket dan buat project baru dengan nama BlaastCacheCloudStorage melalui: Application » New Application.... Buka folder project yang dihasilkan.

Kalau anda bingung apa saja kegunaan dari masing2 file yang dihasilkan, berikut adalah keterangannya:

Hello/
    metadata.json       -- Metadata describing the App.
    views/              -- The views of the application.
    views/main.json     -- The main view.
    controller/         -- The controllers of the application.
    controller/main.js  -- Controller for the main view.
    lib/                -- Code common to both client and server.
    res/                -- Resources, such as graphical assets.
    backend.js          -- The server code, also referred as backend code.
    bootstrap.js        -- Bootstrap code for the client.

Note: Informasi ini saya ambil dari user guide blaast.

Sekarang mari kita buka bootstrap.js dan tambahkan kode berikut, untuk memulai dan memastikan koneksi ke backend (backend.js):

app.on('connected', function() {
	console.log('Connected to backend.');
});

Selanjutnya, buka controller/main.js, bersihkan semua handler dan sisakan hanya :load dan :keypress:

var _ = require('common/util');

_.extend(exports, {
	':load': function() {
		console.log('View was loaded');
	},

	':keypress': function(key) {
		console.log('Key press: ' + key);
	}
});

Sekarang kita isi kode pada masing2 handler. Dimulai dari :load, isikan dengan kode berikut:

var self = this;
self.clear();
input = new InputBox ();

input.on('submit', function(){
    console.log('siap mengirim pesan ke backend');
});

result = new TextView();

result.label('masukkan istilah yang anda cari.');

self.add(input);
self.add(result);

Tambahkan kode berikut setelah var _ = require('common/util');:

var InputBox = require('ui').InputBox;
var TextView = require('ui').TextView;

var input  = null;
var result = null;

Kode untuk sisi client sudah siap. Simpan file dan coba jalankan dari emulator. Hasilnya mestinya seperti ini:

Free Image Hosting at www.ImageShack.us

Gampang kan? kalo sudah biasa dengan javascript, develop di blaast sih, mestinya ndak akan terlalu sulit. Baik, sekarang kita buat kode yang akan melakukan request ke backend.js. Buka main.js dan ganti kode berikut:

input.on('submit', function(){
    console.log('siap mengirim pesan ke backend');
});

dengan kode seperti ini:

input.on('submit', function(){
    app.msg('cariArti', {istilah: input.value()});
});

Pada bagian akhir dari :load, tambahkan kode berikut:

app.on('message', function(action, param){
    if( action === 'cariArti'){
        result.label( param.data );
    }
});

Kemudian, buka backend.js dan isikan dengan kode seperti ini:

app.message(function(client, action, param) {
    if(action === 'cariArti'){
        console.log('berhasil mendapatkan definisi');
        client.msg( action, {data: 'berhasil mendapatkan definisi');
    }
});

Sisi client sudah bisa mengirim dan menerima hasil dari backend.js. Coba jalankan, maka hasilnya seharusnya seperti ini, setelah mengisikan kata dan menekan enter:

Free Image Hosting at www.ImageShack.us

Sudah nih? segini aja? Woo, sabar, ini baru tahap awal. Kita belum juga masuk ke cara mengambil data ke kateglo. Mengambil data ini merupakan tugas dari backend, maka sekarang kita buka backend.js dan tambahkan kode berikut sebelum app.message(function(client, action, param) {:

var http = require('blaast/simple-http');
var jsdom = require('jsdom');

function kirimDefinisi( client, action, definisi){
    var definisiIstilah = [];
    if(definisi){
        for(var idx = 0; idx < definisi.length; idx++){
            definisiIstilah[ definisiIstilah.length ] = definisi[ idx ].def_text;
        }
    }

    client.msg( action, {
        word: {
            definisi: definisiIstilah
        }
    });    
}

Lalu, ganti kode berikut:

console.log('berhasil mendapatkan definisi');
client.msg( action, {data: 'berhasil mendapatkan definisi'});

dengan:

http.get("http://bahtera.org/kateglo/api.php?format=json&phrase=" + param.istilah, {
    ok: function(data) {
        var node = JSON.parse(data);
        
        kirimDefinisi(client, action, node.kateglo.definition);
        console.log("berhasil memperoleh informasi definisi dari kateglo: " + node.kateglo.definition.length);
        
        kateglo.set(param.istilah, node.kateglo);                
        kateglo.perluUpdate = true;

    },
    error: function(err) {
        console.log('err: ' + err);
    }
});

Sedikit informasi: API Kateglo masih terbatas, hanya untuk melihat semua hal yang berhubungan dengan suatu kata atau istilah. Sebagai contoh, coba buka URL berikut:

http://kateglo.bahtera.org/api.php?format=json&phrase=batu
http://kateglo.bahtera.org/api.php?format=json&phrase=pilih

Kedua URL di atas akan menghasilkan SEMUA data yang dimiliki kateglo untuk kata batu dan pilih.

Silahkan pelajari terlebih dahulu struktur JSON yang dihasilkan dari API tersebut. Kalau pusing melihat text-text JSON, bisa pakai tool Online JSON Viewer untuk melihat struktur-nya secara lebih manusiawi.

Backend sudah beres. Sekarang kita utak-atik sedikit untuk main.js agar bisa menerima dan memproses definisi istilah yang diperoleh dari backend.js. Coba ganti result.label( param.data ); yang ada pada handler :load dengan kode berikut:

result.label( param.word.definisi.join( "\n" ) );

Beres, sekarang coba jalankan dan lihat hasilnya, mestinya seperti ini:

Free Image Hosting at www.ImageShack.us

Basically, aplikasi kita sudah selesai. Tapi, tujuan tutorial ini adalah bagaimana memanfaatkan cloud storage blaast, agar kita tidak perlu terus-menerus melakukan request untuk data yang sudah pernah diminta.

Maka, beberapa modifikasi perlu dilakukan di sisi backend. Silahkan buka lagi backend.js dan tambahkan kode berikut setelah var jsdom = require('jsdom');:

var _ = require('underscore');
var storage = require('blaast/simple-data');


function Kateglo() {
	this.istilah = [];
	this.refreshCache();
}

Kateglo.prototype = {
	get: function(istilah) {
		return _.detect(this.istilah, function(i) { return i.istilah === istilah; });
	},

	set: function(istilah, definisi) {
		var k = this.get(istilah);
        if(!k){
            this.istilah.push({
                istilah: istilah,
                definisi: definisi
            });
        }
	},


	toArray: function() {
		return this.istilah;
	},

	// Read istilah from persistent storage
	refreshCache: function() {
		var self = this;

		storage.get('kateglo_istilah', function(err, value) {
			if (value && value.istilah) {
				self.istilah = value.istilah;
				log.info('read istilah, count=' + self.istilah.length);
			} else {
				log.info('no istilah found, value=' + JSON.stringify(value));
			}
		});
	},

	// Write istilah to persistent storage
	updateStorage: function() {
		storage.set('kateglo_istilah', { istilah: this.istilah }, function(err, oldData) {
			if (err) {
				log.info('Failed to store istilah: ' + err);
			} else {
				log.info('Stored istilah.');
			}
		});
	}
};

Lalu, sebelum app.message(function(client, action, param) {, tambahkan kode:

var kateglo = new Kateglo();

Selanjutnya, ganti semua isi dari if(action === 'cariArti'){} dengan:

console.log("sedang mencari arti kata: " + param.istilah);

var kata = kateglo.get( param.istilah );

if( !kata ){
    console.log("kita belum punya cache kata: " + param.istilah);
    http.get("http://bahtera.org/kateglo/api.php?format=json&phrase=" + param.istilah, {
        ok: function(data) {
            var node = JSON.parse(data);
            
            kirimDefinisi(client, action, node.kateglo.definition);
            console.log("berhasil memperoleh informasi definisi dari kateglo: " + node.kateglo.definition.length);
            
            kateglo.set(param.istilah, node.kateglo);                
            kateglo.perluUpdate = true;

        },
        error: function(err) {
            console.log('err: ' + err);
        }
    });
} else {
    console.log("sudah punya cache kata: " + param.istilah);
    //console.dir( kata );
    
    kirimDefinisi(client, action, kata.definisi.definition);
}

Bagian terakhir dan yang terpenting, menambahkan kode untuk proses update cache data ke cloud storage berikut di paling bawah dari backend.js:

setInterval(function() {
	if (kateglo.perluUpdate) {
        console.log( "cache database perlu diupdate ke storage." );
		delete kateglo.perluUpdate;
		kateglo.updateStorage();
	}
}, 30 * 1000);

Selesai! Coba jalankan dan cari beberapa kata atau istilah Bahasa Indonesia dan lihat tab Server log. Maka anda akan melihat baris-baris log seperti berikut:

10:58:04.927 DEBUG BlaastCacheCloudStorage - sedang mencari arti kata: batu
10:58:04.928 DEBUG BlaastCacheCloudStorage - kita belum punya cache kata: batu
10:58:06.807 DEBUG BlaastCacheCloudStorage - berhasil memperoleh informasi definisi dari kateglo: 9
10:58:14.282 DEBUG BlaastCacheCloudStorage - sedang mencari arti kata: cuka
10:58:14.282 DEBUG BlaastCacheCloudStorage - kita belum punya cache kata: cuka
10:58:16.010 DEBUG BlaastCacheCloudStorage - berhasil memperoleh informasi definisi dari kateglo: 2
10:58:20.854 DEBUG BlaastCacheCloudStorage - sedang mencari arti kata: garam
10:58:20.854 DEBUG BlaastCacheCloudStorage - kita belum punya cache kata: garam
10:58:22.162 DEBUG BlaastCacheCloudStorage - berhasil memperoleh informasi definisi dari kateglo: 3
10:58:24.685 DEBUG BlaastCacheCloudStorage - cache database perlu diupdate ke storage.
10:58:24.718 INFO  BlaastCacheCloudStorage - Stored istilah.
10:58:32.415 DEBUG BlaastCacheCloudStorage - sedang mencari arti kata: cuka
10:58:32.415 DEBUG BlaastCacheCloudStorage - sudah punya cache kata: cuka

Bagaimana menurut anda? yang pasti, bagi saya, dengan blaast, mobile development is: fun again!


Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.

  • Ardi_cassanova

    Mau coba gan :)

    BTW thank you very much :)