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.
RSS dengan zRSSFeed
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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| src | |
| gen | |
| assets | |
| www | |
| rss | |
| jquery-1.7.2.min | |
| jquery.zrssfeed.js | |
| jquery.zrssfeed.css | |
| index.html | |
| cordova-1.9.0.js | |
| bin | |
| libs | |
| res |
by 4. Kemudian di dalam file index.html, tulis kode seperti berikut ini :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta name=”viewport” content=”width=320; user-scalable=no” /> | |
| <meta http-equiv=”Content-type” content=”text/html; charset=utf-8“> | |
| <title>RSS Feed Ku</title> | |
| <link href=”rss/jquery.zrssfeed.css” rel=”stylesheet” type=”text/css“> | |
| <script type=”text/javascript” charset=”utf-8” src=”cordova-1.9.0.js“></script> | |
| <script type=”text/javascript” charset=”utf-8” src=”rss/jquery-1.7.2.min“></script> | |
| <script type=”text/javascript” charset=”utf-8” src=”rss/jquery.zrssfeed.min.js“></script> | |
| <script type=”text/javascript” charset=”utf-8“> | |
| function init() { | |
| document.addEventListener(“deviceready”, onDeviceReady, true); | |
| } | |
| function onDeviceReady() { | |
| //loading rss secara otomatis saat aplikasi dibuka | |
| $(document).ready(function () { | |
| $(‘#rss’).rssfeed(‘http://feeds.feedburner.com/mkhudablog’); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload=”init();” id=”stage” class=”theme“> | |
| <h2>RSS Feed</h2> | |
| <div id=”rss“> | |
| <!– RSS akan tampil di sini –> | |
| </div> | |
| </body> | |
| </html> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <access origin=“http://127.0.0.1*“/> <!– allow local pages –> | |
| <access origin=“.*“/> <!– kode yang ditambahkan –> |
6. Silahkan debug atau run aplikasi Anda. Atau dicoba dahulu dibuka melalui web browser. Dan rss Anda akan tampil pada foto di atas.
