Membuat berita (RSS Feed Reader) dengan Ionic dan Angluar

Dalam pembuatan aplikasi mobile, terkadang kita memerlukan sebuah menu yang menyediakan berita live yang merujuk kepada website tertentu. Salah satu contoh dalam aplikasi saya saya ingin menyediakan fitur yang menampilkan berita postingan saya yang terbaru. Dengan adanya fitur tersebut user dapat dengan mudah mendapatkan informasi artikel terbaru dari saya. Dalam aplikasi android fitur tersebut kita sebut dengan RSS Reader. Dimana RSS Reader ini merujuk kepada artikel yang disediak pada RSS Feed yang kita tuju.

Tutorial kali ini akan menjelaskan bagaimana membuat aplikasi untuk menyediakan RSS Reader dengan Ionic dan Angular.
Untuk persiapak awal buka CMD dan masuk kedalam directory dimana aplikasi kita akan dibuat. kemudian masukan rangkaian instruksi berikut:

ionic start RSSReader blank
cd RSSReader
ionic platform add android

Pada aplikasi RSS Reader ini, kita memerlukan plugin tambahan yang disediakan oleh cordova, plugin tersebut bernama inAppBrowser. Langkah untuk menginstall plugin inAppBrowser adalah sebagai berikut: masih dalam CMD di directory aplikasi kita, masukan code dibawah ini

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Setelah plugin inAppBrowser terpasang, selanjutnya perlu kita fahami bahwa informasi berita yang disediakan oleh RSS Feed nanti akan dibantu dipanggil oleh Google Feed API. Api ini akan kita panggil dengan instruksi get http://ajax.googleapis.com/ajax/services/feed/load dimana API tersebut memiliki beberapa parameter sebagai berikut:

Parameter	Deskripsi
v	Versi dari API, dimana saat ini versi tersebut adalah 1.0
q	Alamat RSS Feed yang akan kita gunakan
num	Jumlah data yang diambil dari RSS. Secara default bernilai 4 dan maksimal 100

selanjutnya kita buka text editor, dan kita buka app.js yang terletak di directory www/js/app.js

kemudian masukan code dibawah ini.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller("feedCtrl", function($http, $scope) {
    $scope.init = function() {
        $http.get("http://ajax.googleapis.com/ajax/services/feed/load", {
                params: {
                    "v": "1.0",
                    "num": "8",
                    "q": "http://feeds.feedburner.com/prawitorss"
                }
            })
            .success(function(data) {
                $scope.rssTitle = data.responseData.feed.title;
                $scope.rssUrl = data.responseData.feed.feedUrl;
                $scope.rssSiteUrl = data.responseData.feed.link;
                $scope.entries = data.responseData.feed.entries;
            })
            .error(function(data) {
                console.log("ERROR: " + data);
            });
    }

    $scope.browse = function(v) {
        window.open(v, "_system", "location=yes")
    }
});

Instruksi diatas adalah instruksi untuk memanggil RSS Feed yang telah disediakan. Alamat RSS Feed yang disediakan pada aplikasi ini adalah http://feeds.feedburner.com/prawitorss.

Selanjutnya kita berlanjut pada tampilan dari RSS Feed itu sendiri pada aplikasi kita. Kita buka index.html pada www/index.html. Untuk membuat nya lebih mudah silahkan ikuti code dibawah ini:

<!DOCTYPE html>
<html>

<head>
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>

 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-stable">
   <h1 class="title">RSS Feed</h1>
  </ion-header-bar>
  <ion-content class="padding" ng-controller="feedCtrl" ng-init="init()">
   <div class="list">
    <a class="item" href="https://www.blogger.com/null" ng-click="browse(entry.link)" ng-repeat="entry in entries">
     <b>{{entry.title}}</b>
     <span ng-bind-html="entry.contentSnippet"></span>
    </a>
   </div>
  </ion-content>
 </ion-pane>
</body>

</html>

Selanjutnya tinggal kita jalankan aplikasi kita di android. Perlu menjadi catatan. aplikasi rss feed ini hanya akan berhasil di running di device/smartphone. Jika aplikasi ini dicoba di web browser akan menampilkan pesan error. Namun ada cara lain agar aplikasi kita bisa di running di web browser, yaitu dengan menginstall chrome extensions jika kita menggunakan chrome. extensi tersebut dapat di unduh disini.

Contoh tampilan aplikasi RSS Reader yang saya buat.

Demikian semoga bermanfaat.

4 comments

Balas

Unknown

December 30, 2016 at 3:09 PM

bang saya mau tanya, link yang http://code.prawito.com/2015/11/membuat-berita-rss-feed-reader-dengan.html saya coba di handphone tapi kok tidak muncul apa-apa ya?

Prawito Hudoro

December 30, 2016 at 5:09 PM

Ini ada halamannya??masa kosong?

January 3, 2017 at 9:07 AM

codingnya sama persis kayak diatas bang, tapi gak muncul apa-apa

template yang blank bang, ngikutin tutornya agan

January 3, 2017 at 1:06 PM

Oh,,saya kira page blog saya yang gak ke load di hp agan.
Untuk RSS Feed di ionic ini, ketika di test menggunakan browser, coba agan install dulu plugin chrome untuk masalah CORS. Soalnya default nya chrome gak mau dia get data dari url yang berbeda.
Coba cari di chrome web store CORS, nanti di enable aja. kalau udah enable warnanya ijo biasanya.
Nanti kalau sudah di build di handphone bisa biasanya. Ga ada problem.

EmoticonEmoticon