Aplikasi RSS Berbasis Phonegap Menggunakan zRSSFeed

Written by: Muhammad K Huda
April 30, 2013

Salah satu bentuk problem ketika mendevelop aplikasi RSS berbasis HTML5 atau Ajax adalah permasalahan Same Origin Policy. Konsep Same Origin Policy adalah tameng keamanan aplikasi berbasis Javascript. Sehingga hal ini berimbas pada sulitnya developer saat membuat aplikasi RSS untuk memfetching url dari domain yang berbeda. Setelah beberapa saat mencari solusi, akhirnya penulis menemukan sebuah library javascript bernama zRSSFeed. Library memanfaatkan Google Feed API untuk membaca feed url.

zRSSFeed adalah library javascript yang dapat pula diimplementasikan ke dalam aplikasi HTML5 Phonegap. Bagi pembaca yang akan membuat aplikasi mobile baik Android, iPhone, Blackberry, Windows Phone tak ada salahnya untuk menjajal library js satu ini. Berikut adalah implementasi zRSSFeed untuk Phonegap Android Application :

1. Pertama, download library dari situs resmi zRSSFeed di http://www.zazar.net/developers/jquery/zrssfeed/zrssfeed-120.zip

2.Mulailah dengan project Phonegap menggunakan Eclipse atau Adobe Dreamweaver 5.5 yang sudah mendukung Phonegap. Dalam praktik ini, penulis menamai aplikasi ini dengan nama “rssku”. Mengenai nama silahkan pembaca bisa mengubahnya.

3. Buat folder baru bernama rss di dalam /assests/www . Setelah itu ekstrak file zrssfeed-120.zip, taruh file jquery.zrssfeed.js dan jquery.zrssfeed.css ke dalam folder rss tersebut project Anda. Sertakan juga library Jquery. Pengaturan file folder seperti di bawah ini :

4. Kemudian di dalam file index.html, tulis kode seperti berikut ini :

5. Sebelum anda membuild / debug aplikasi, pastikan anda menambah kode <access origin=”.*” /> dibawah ini pada file cordova.xml yang terletak di dalam folder /res/xml/. Kode ini memungkinkan aplikasi melakukan request ke seluruh domain web online.

6. Silahkan debug atau run aplikasi Anda. Atau dicoba dahulu dibuka melalui web browser. Dan rss Anda akan tampil pada foto di atas.

11 Comments

Putra
October 8, 2013
Artikel yang bener2 membantu buat pemula seperti saya.
Banyak yang ingin ditanyakan nih 😀
Untuk ngetest melalui web browser gimana yah? pake localhost atau gmn? krn sebelumnya saya udah install xampp.
Thx
Reply
- Muhammad K Huda
  October 10, 2013
  bisa pakai xampp, tapi konfigurasi javascriptnya diatur dahulu..
  nanti akan saya buat tutorialnya ya ! 🙂
  Reply
  - agus
    May 20, 2014
    ini udah ada tutornya gan?
    Reply
catur
December 27, 2013
saya ekstrak file zrssfeed-120.zip, tp tidak ada file:
jquery-1.7.2.min

download 1.7.2.jquery.min.js
tp malah error.
tlg di bantu gan. thx b4.
Reply
- Muhammad K Huda
  January 6, 2014
  hapus aja .js , jadi file jquerynya menjadi jquery-1.7.2.min
  Reply
  - catur
    January 7, 2014
    sukses gan, thx infonya.
    skrg bingung gmn cr edit tampilannya.(cr gabungin dgn Navigation Drawer)
    kl bs tlg dshare. thx alot.
    Reply
    - Muhammad K Huda
      January 7, 2014
      Oke ya, kalo ada waktu saya buatin tutorialnya.
      Reply
thea
February 28, 2014
mas mkhuda, saya mau tanya. kalo yang diambil seluruh post terus ada pagingnya solusinya seperti apa mas? terima kasih mas
Reply
roni
March 2, 2014
alhamdulillah jalan pak.
tapi saya punya masalah pak pagenya hanya bisa ngeload rss kalo jadi index. jadi itu kalo jadi sub menu ga jalan di aplikasi mobile pak. mungkin ada pencerahan?
Reply
kamal
March 19, 2014
kalau hasil rss nya ingin keluar pict thumbnail gimana ?biar ga polos tulisan aja.
Reply
enda setiyo
December 12, 2017
Artikel menarik, kalau ada waktu saya boleh saya request artikel untuk membuat android webview dari phonegap buat pemula seperti saya ?
Terimakasih
Reply