News Feed?


#1

Has anyone made a newsfeed with Ionic Creator? I’ve thought about trying to expand the chat app tutorial, but could use some guidance. Or, is there a better, easier way to go about this?

Thanks,
J


#2

Yes, have got a basic newsfeed running. The app basically pulls in a json feed and then populates a newsfeed. A couple quick bits:

You need to put something like this in your services.js:

angular.module('app.services', [])

 .service('Newsfeed', ['$http', function($http){
     var newsfeed_url = 'https://YOUR_URL_HERE';
     var ret = {
         all: function() {
             return $http.get(newsfeed_url).then(function(resp) {
                 // if(resp.data.length > 0) currentID = parseInt(resp.data[resp.data.length-1].id);
                 return resp.data;
             });
         }
     }
     ret.all();
     return ret;
 }])

And then in the page that you want the newsfeed:

 function ($scope, $stateParams, Newsfeed) {

     $scope.newsfeeds = [];

     $scope.loadData = function(){
         Newsfeed.all().then(function(res) {
             $scope.newsfeeds = res;
             $scope.$broadcast('scroll.refreshComplete');
         })
     }
     
     $scope.loadData();
 }

Also add the following as a custom html snippet to the top of the newsfeed page and you will have a nice pull-down-to-refresh function:

<ion-refresher pulling-text="Pull to refresh..." on-refresh="loadData()"></ion-refresher>

Then, on the page of the feed, you can insert some elements to populate using ‘ng-repeat’ (as per other tutorials etc.). In the above example ng-repeat: newsfeed in newsfeeds and then can refer to items in the newsfeed via {{newsfeed.whatever_you_specify_in_the_json}}

You can also use ng-show to adjust appearance of feed items based on values that you might set in the json feed, e.g. if your feed includes video and non-video items, you might use the following to show an embedded video where video is present, but otherwise is hidden:

ng-show="newsfeed.media=='video'"

The json feed itself should be properly formatted, e.g.

[ { "feed_item": "1" }, { "feed_item": "2"}, .... ]

Hope that helps…! It works for me anyway!

P.S. It’s basically a fusion of the chat tutorial and the web api tutorials.


#3

That’s very helpful. Thank you! I’m giving this a try now.

For the newsfeed url, is this my blog url, or the WP Rest API url? Also, where should I place [ { “feed_item”: “1” }, { “feed_item”: “2”}, … ] ?

Lastly, would you recommend using a card element for this?

Thanks for the help!


#4

I’m struggling a bit figuring this out as I’m a newbie.
Any chance you’re on upWork or goLance and want some paid work?