Skip to main content

Ionic RSS feed using Feednami

Tutorial of how to make a RSS feed using Feednami which is an alternative to google api which no longer works. This is a basic example and can be improved.

First go ahead and make a new ionic project

$ npm install -g cordova ionic

$ ionic start exampleProject blank

Now find index.html and insert...

<script src="https://storage.googleapis.com/feednami-static
/js/feednami-client-v1.0.1.js"></script>

Into the header, then in <ion-content> below Ionic Blank Starter insert a new div

<div id ="feed" ng-controller="feedCtrl"> </div>

Open app.js, now we are going to make the controller from Feednami that will get our rss feed.

.controller('feedCntl', function(){ var url = 'http://daringfireball.net/feeds/articles' feednami.load(url,function(result){ if(result.error){ console.log(result.error) } else{ var entries = result.feed.entries for(var i = 0; i < entries.length; i++){ var entry = entries[i] console.log(entry.title) } } }) })


Now run the app using $ Ionic serve --lab in cmd line. Then right click inspect  and the feed will appear in the console. Now we need the function to get that feed and make new divs for every title.
Go back to app.js and add these changes to the function.


var blogDiv = document.getElementById("feed") //get our div of feed var url = 'http://daringfireball.net/feeds/articles' //url of rss feed feednami.load(url,function(result){ if(result.error){ console.log(result.error) //if it doesnt work } else{ var entries = result.feed.entries for(var i = 0; i < entries.length; i++){ var entry = entries[i] //create div elemets for entries var div = document.createElement('div') div.setAttribute('class','entry') div.innerHTML = '<p class="card">
<a href="'+entry.link+'" target="_blank">'+entry.title+'</a></p>' blogDiv.appendChild(div) } } })


And there you have it one rss feed thanks to the people at feednami. You can style it up in the css anyway you like and just add or change the class in the function here '<p class="card">.

Useful links

make twitter rss feed - Twitter-rss

find rss feed of wordpress - wp-rss

git for tut - github

let me know what you think in the comments below any improvements welcome :)




Comments

Popular posts from this blog

Sunday funday project - LightReact

Sunday fun day project - LightReact Update every week So I'm in my third year (finally!) and decided to do more things this year (2017)  1. To increase my skills and 2. To have fun! This year we are having our end of year show at The University of Winchester and I wanted to make a VR game for Google cardboard. The winner at the end of the day would get a £10 steam gift voucher. Below is my WIP for this mini project. Week 1 - inspiration and 3d modelling  I wanted to make a very simple game for VR, no not a horror game. LightReact is based on a game you would typically play at an arcade where you have a bunch of lights and you have to switch them off as fast as possible. However, instead of switching them off with your hands you use your eyes. The example in the video below. So you get the point you look at them they switch off. The person to do it in quickest time wins.  The wonderful world of blender  I am primarily a dev...

Signing apk from ionic

This post will show you how to sign your apk manually, from ionic framework for release. Recently I signed my first apk from ionic and ran into some issues that will be ironed out in this blog. 1. You will need to have the sdk and jdk / jdr tools installed. 2. Have a ionic project with the Android platform installed. LETS START You need to build your app using below in the cmd line then move that project-release.apk file into this directory   ionic build android --release exampleApp\platforms\android MAKING THE KEYSTORE You then need to make the key store in that file and write in all the info. Do not lose the key file and keep a record of the information. keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 SIGN THE APK Now we have to sign the apk jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name no...