Mashup : cara mudah untuk mengintegrasikan data anda …

6 02 2009

Aplikasi Web pada zaman sekarang, tidak lagi bisa berdiri sendiri untuk memenuhi kebutuhan user. Sebagaimana usernya (manusia), Aplikasi Web lambat laun menjadi “makhluk sosial” yang butuh “pergaulan” dengan aplikasi web lain untuk mendapatkan data dari aplikasi web lain tersebut.

Nah, kalau manusia menggunakan panca inderanya untuk mendapatkan informasi dari manusia lain, maka suatu aplikasi web juga menggunakan alat bantu untuk mendapatkan data dari banyak sumber data. Mashup merupakan salah satu contoh alat bantu ini. Definisi formal dari mashup adalah sbb : a mashup is a web application that combines data from more than one source into a single integrated tool (definisi ini dikutip dari wikipedia.org) .

Contoh aplikasi web yang menggunakan mashup adalah : Havaria Information Services (AlertMap) yang mengkombinasikan data dari 200 sumber untuk menyajikan informasi tentang kondisi cuaca, informasi gempa di dalam sebuah peta dunia. Adapun contoh mashup yang jauuuuh lebih sederhana adalah getPhotosByName. Mashup ini mengambil foto/image dari user tertentu di facebook untuk ditampilkan dalam format slide show.

Untuk membuat sebuah mashup, kita membutuhkan mashup editor. Salah satu dari mashup editor yang sudah penulis coba adalah Microsoft popfly. Di postingan ini, penulis akan menshare langkah-langkah membuat mashup  seperti getPhotosByName menggunakan Microsoft popfly sebagai editornya.

Berikut langkah-langkahnya :

1. Buat account Windows Live ID.

2. Gunakan account Windows Live ID untuk log in ke Microsoft popfly

3. Setelah berhasil log in, di sisi kanan atas layar akan muncul gbr sbb :mashup0

4. Pilih sub menu Mashup dari menu Create. Ketika sub menu Mashup dipilih, maka di sisi kiri bawah akan muncul pilihan blocks seperti gambar berikut :

mashup01

5. Klik block Social Networks, dan klik serta drag block Facebook ke sisi tengah layar (lihat gambar di bawah ini).

mashup021

6. Klik “You Have a Key” (yang ada di gambar di atas). Maka akan muncul pop-up form sepeti gambar di bawah :  mashup037. Masukkan “one-time Facebook code” yang diminta dengan cara mengklik “Click here to generate a one-time Facebook code”.

8. Ubah settingan block facebook dengan mengclick icon kunci yang ada di sebelah block facebook.

9. Pilih operasi yang diinginkan. Misal : kita ingin menampilkan foto teman kita yang ada di facebook. Maka kita akan memilih operasi getPhotosByName.

mashup0410. Isi Field user name dengan nama teman kita, misal Kemas Rahmat. Kemudian klik OK .

11. Klik block Display, dan klik serta drag block ImageSlideShow ke sisi tengah layar (lihat gambar di bawah ini).

mashup05

12. Klik bulatan yang ada di sebelah kiri block facebook, lalu tanpa melepas mouse tarik panah menuju bulatan yang ada di sisi kiri block ImageSlideShow (lihat gambar).

mashup0613. Ubah settingan block ImageSlideShow dengan mengclick icon kunci yang ada di sebelah block ImageSlideShow.

14. Pilih value caption untuk title, value owner untuk name dan value imageUrl untuk url (lihat gambar).

mashup07

15. Konfigurasi sudah selesai. Berikutnya tinggal klik icon run yang ada di sisi kanan atas layar (lihat gambar).

mashup01116. And this is the result :

mashuplagirunMashup yang sudah jadi seperti gambar di atas bisa diletakkan di blog pribadi.

Sekian, semoga bermanfaat.

Trims,

Kemas Rahmat SW


Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: