Membuat RSSFeed Blog Pada Ionic

Lagi seneng nyobain ionic. Awalnya coba-coba karena sempet ada yang minta bantuan dengan phonegap. Tapi setelah cari informasi, sepertinya ionic lebih oke karena angularjs mungkin yaa. Aplikasi yang awal saya buat dengan ionic ini adalah Feed Blog. Sangat-sangat sederhana kok, ambil data feed blog wordpress dengan bantuan google api.

Saya menginstall ionic di windows saya. Versi ionic yang saya gunakan adalah 1.7.14 supaya jika ada perubahan code dari ionic, temen-temen udah tau juga kalo versi ionic di tutorial ini masih 1.7.14.

Saya tidak menjelaskan cara install ionic di windows ya, saya anggap sudah bisa install dan create project dengan ionic.

Awalnya saya ganti project angular “starter” dengan “myfeed”, lalu saya buat juga handle controller angular dengan nama “FeedCtrl” dan initiate ketika load dengan ng-init=”init()”

1
<body ng-app="myfeed" ng-controller="FeedCtrl" ng-init="init()">

lalu di dalam ion-content saya tambahkan list item yang nanti isinya adalah hasil result dari akses feed blog tertentu

1
2
3
4
5
6
7
8
<div class="list">
          <div ng-repeat="entry in entries" class="item">
            <a href="{{entry.link}}" target="_blank">
              <b>{{entry.title}}</b><br>
            </a>
            <span ng-bind-html="entry.contentSnippet"></span>
          </div>
        </div>

variable entries ini nanti ada di app.js. Saya console.log biar keliatan datanya :). Berikut sekalian proses akses feed nya di app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var app = angular.module('myfeed', ['ionic']);

app.controller('FeedCtrl', function($http, $scope) {
 
  var feedUrl = "http://adiputra.web.id/feed";
  var num = 10;
  $scope.init = function() {
    $http.jsonp(
      'http://ajax.googleapis.com/ajax/services/feed/load?callback=JSON_CALLBACK',
      {
        params: {
          "v": "1.0", "num":num, "q": feedUrl
        }
      }
    ).success(function(data) {
      console.log(data);
      $scope.entries = data.responseData.feed.entries;

    }).error(function(data){
      console.log("Error:" + data);

    });
  }
 
});

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

Variable num adalah angka untuk mengambil jumlah rssfeed. Lalu variable feedUrl adalah url blog yang akan kita ambil rssfeed nya. Jangan lupa pake jsonp ya, jangan pake get nanti kena CORS πŸ™‚

Berikut adalah index.html lengkap nya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body ng-app="myfeed" ng-controller="FeedCtrl" ng-init="init()">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">My Feed</h1>
      </ion-header-bar>
      <ion-content class="has-header">
        <div class="list">
          <div ng-repeat="entry in entries" class="item">
            <a href="{{entry.link}}" target="_blank">
              <b>{{entry.title}}</b><br>
            </a>
            <span ng-bind-html="entry.contentSnippet"></span>
          </div>
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

rssfeed ionicjs

Jika ada perbaikan atau pertanyaan bisa dibantu ya πŸ™‚

ref:
https://developers.google.com/feed/v1/devguide#resultJson

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.