Contoh Sederhana Membuat Mashup dengan Popfly

Mashup adalah aplikasi web yang mengkombinasikan beberapa data atau konten menjadi enjadi satu aplikasi terintegrasi. Pada pembuatan contoh sederhana kali ini kita akan mencoba membuat Mashup pencari gambar di Internet. Hasil dari pencarian gambar akan ditayangkan dengan slideshow. Sebut saja “Image Search Slideshow Tool” :p.

Langkah-langkahnya adalah sebagai berikut:

1. Login ke Popfly.com (dengan account Windows Live/MSN/Hotmail) dengan mengklik button di pojok kanan atas.

2. Setelah login klik menu “Create” -> “Mashup” diantara button-button yang terdapat di kanan atas.

3. Kita akan dibawa ke halaman pembuatan Mashup seperti gambar di bawah ini. Yang harus kita lakukan hanya men-drag block-block (di kolom sebelah kanan) yang memiliki berbagai macam fungsi ke dalam design surface (tengah) sehingga menjadi Mashup yang kita inginkan.

Design Surface

Pada kolom Blocks kita dapat mencari block dengan menggunakan pencarian term atau cari berdasarkan kelompoknya (New & Updated, Display, Fun & Games, dll).

4. Dalam mencari gambar, kita harus memiliki input term sebagai petunjuk pencarian gambar itu sendiri. Karena itu kita harus memasukkan block yang berfungsi meminta user input ke dalam Mashup. Pada kolom blocks klik “Tools” lalu drag block “User Input” ke dalam design surface.

Dragging Block

Pada kanan atas block, ada 3 tombol. Tombol X berfungsi untuk menghapus block, tombol lampu (get some mashing ideas) berfungsi untuk memberikan saran block apa yang dibuat berikutnya. Tombol kunci inggris berfungsi untuk mengeset properti block.

5. Kemudian, dalam pencarian gambar kita membutuhkan block yang berfungsi melakukan pencarian gambar. Misalnya pada kelompok “Images & Video” kita pilih “Live Image Search”. Drag ke dalam design surface.

6. Setelah input, mencari gambar, selanjutnya yang kita butuhkan adalah block yang berfungsi menampilkan gambar. Dalam contoh kali ini tampilan yang diinginkan adalah slideshow. Pilih “ImageSlideshow” pada kelompok “Display” di kolom Blocks. Tampilan setelah ketiga block di-drag adalah seperti ini.

Mashup from Three Block

7. Klik ganda pada block “User Input”. Isi propertiesnya sesuai dengan yang diinginkan. Misalnya:

operations : getTwoTextValues

label 1 : Gambar yang ingin dicari:

label 2 : Jumlah maksimum hasil pencarian:

buttonText : Tampilkan Hasil!

Contoh Properties

Setelah itu tekan tombol kunci inggris untuk kembali ke design surface.

8. Buat koneksi dari block “User Input“ menuju block “Live Image Search” (arah panah biru). Edit properti dari block “Live Image Search” sedemikian rupa. Value dari query dan count diambil dari “User Input” dimana value1 adalah term dari gambar yang ingin dicari, dan value2 adalah jumlah maksimum hasil pencarian sehingga:

operations : search

query : (source: User Input) value1

count : (source: User Input) value2

9. Buat koneksi dari block “Live Image Search” menuju block “ImageSlideshow“. Edit properti dari block “ImageSlideshow” sesuai keinginan. Jangan lupa semua sourcenya adalah dari block “Live Image Search”

10. Klik “Run” di kanan atas. Dengan Mashup ini kita dapat melakukan pencarian gambar dan hasilnya di tampilkan dengan slideshow.

Mashup Final

Mashup ini cuma salah satu dari contoh sederhana yang dapat dibuat di Popfly.com. Banyak sekali gadget yang dapat dibangun dengan semua tools yang ada pada Popfly. Semua tergantung dari kreatifitas anda. Selamat berkreasi =).