Rss reader tutorial

nativescriptrocks

#1

I am looking for tutorial about RSS reader. These which i found are very old and can`t run them on my side.
The task is to have App which read RSS (with posts) in first view and open single post content in another view.
Can someone help me with this?

I am absolutely newbie in nativescript.

Thanks in advance.
Regards
Danail


#2

@thenilko so basically asking for somebody to write an application for you?

I think you would attract more helpful responses if you first show you’ve put some effort into getting to where you want to get.

Doing the NativeScript tutorials is a good way to get familiar with the framework, and what you can do with it.

If I am not wrong it also shows how to make http requests, which is what you will want to do to fetch rss feeds.

Parsing them is another matter, but there are plenty of tutorials online how to parse xml. Then you will want to display the extrapolated data, and this is where data-binding comes into play - you will learn that by doing the tutorial on the official Docs portal.

http://docs.nativescript.org/tutorial/chapter-0 is where you should start if you decide to work with JavaScript/TypeScript

http://docs.nativescript.org/angular/tutorial/ng-chapter-0.html is the angular alternative if you are already familiar with Angular + TypeScript


#3

@Pete.K No, i just giving full info for the task, and if someone knows such a tutorial just share with me.
Yes i am now on the official documentation and learning.
In your case, this info

“If I am not wrong it also shows how to make http requests, which is what you will want to do to fetch rss feeds.
Parsing them is another matter, but there are plenty of tutorials online how to parse xml. Then you will want to display the extrapolated data, and this is where data-binding comes into play - you will learn that by doing the tutorial on the official Docs portal.”

is absolutely helpful for the beginning.

Thanks.


#4

Hello again,

I have some difficulties how to show the parsed object in the view.

Here is my rss-list-view-model.js

var observable = require('data/observable');
var ObservableArray = require('data/observable-array').ObservableArray;
var fetchModule = require('fetch');
var config = require('../config');

function handleErrors(response) {
	if (!response.ok) {
		console.log(JSON.stringify(response));
		throw Error(response.statusText);
	}
	return response;
}

exports.empty = function() {
	while (feedItems.length) {
		feedItems.pop();
	}
};

exports.load = function name(params) {
	console.log('CALLING LOAD');
	//handle caching
	if(feedItems.length > 0) {
		console.log('leaving early');
		return;
	}

	return fetch('https://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22'+encodeURIComponent(config.rssURL)+'%22&format=json&diagnostics=true', {
	})
	.then(handleErrors)
	.then(function(response) {
		return response.json();
	}).then(function(data) {
		console.log('number of rss entries: '+data.query.results.item.length);
		data.query.results.item.forEach(function(feedItem) {
			feedItems.push({
						title: feedItem.title,
						link: feedItem.link,
						description: feedItem.description
					}
			);
		});
	});

}

var feedItems = new ObservableArray();
exports.feedItems = feedItems;

var viewModel = new observable.Observable();
exports.viewModel = viewModel;

And here is my main-page.xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="loaded">

	<Page.actionBar>
		<ActionBar title="{{ title }}" />
	</Page.actionBar>

	
		<ListView items="{{ rssList.feedItems }}" itemTap="loadItem">
			<ListView.itemTemplate>
				<Label text="{{ title }}" horizontalAlignment="left" verticalAlignment="center" />
			</ListView.itemTemplate>
		</ListView>
</Page>

When i dump my objects in this function its shows them in the console.

.then(function(data) {
		console.log('number of rss entries: '+data.query.results.item.length);
		data.query.results.item.forEach(function(feedItem) {
			feedItems.push({
						title: feedItem.title,
						link: feedItem.link,
						description: feedItem.description
					}
			);
		});

And here is my main-page.js

var RssListViewModel = require('../shared/view-models/rss-list-view-model');
var frameModule = require('ui/frame');

var config = require('../shared/config');

var Observable = require('data/observable').Observable;
var viewModule = require('ui/core/view');
var page;

var pageData = new Observable({
	rssList:RssListViewModel,
	title:config.title
});

exports.loaded = function(args) {
	page = args.object;
	page.bindingContext = pageData;
	RssListViewModel.load();
};

exports.loadItem = function(args) {
	//rssList.viewModel.set('selectedItem', args.view.bindingContext);
	RssListViewModel.viewModel.set('selectedItem', args.view.bindingContext);
	frameModule.topmost().navigate('views/item-page');
}

Why cant display them in the view?