Working on my NativeScript RSS Application

This post is more than 2 years old.

A few days ago I blogged about my experiences building a simple RSS reader with NativeScript. Today I'm coming back to the application to take care of two problems I mentioned in the previous post.

The first problem I wanted to handle was checking for network connectivity before trying to load the RSS feed. In Apache Cordova, this is done via the Network Information plugin. I began searching the NativeScript docs for something similar and was surprised to discover that nothing like that existed.

Except I was wrong.

I kinda touched on the docs in my first post on NativeScript. I mentioned how I thought the tutorial was well done, but I found the rest of the docs a bit awkward at times. I'm upgrading that initial impression from "awkward" to "frustrating." There are multiple issues with the docs that makes finding particular APIs kind of difficult. As an example, I needed to figure out how to navigate to a page but specify no back button. I knew that existed but it took maybe 15 minutes to find the darn docs, and I only found it this time because I remembered the particular name of a class. I couldn't get there via straight clicking.

To make matters worse, the code that handles what I needed to do is found under the "Cookbook" section of the docs. Now I don't know about you - but to me - "Cookbook" implies a set of examples in the form of, "Do X with NativeScript". It absolutely does not imply "API Reference", but that's what it is. Kinda. I honestly don't know. I did find the network connectivity stuff there, but then other things like UI components are not there. The docs really need a clearer TOC or organization. All the stuff is there, but now that I'm beyond "Hello World" in NativeScript, I'm struggling to actually use it.

Enough complaining - and as an FYI - I did the right thing and tried to summarize this in reported issues on their GitHub repo.

To detect a network connection, you simply need to import the connectivity module. I added this to my initial JavaScript file for my view. Maybe I should do this in my app.js instead. I then simply ran connectivity.getConnectionType(); to get the type. This returns a value that represents either none, wifi, or mobile. You can also use it to monitor changes as well. To keep things simple, I just check it once. Here's my new main-page.js.


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

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;
	var connectionType = connectivity.getConnectionType();
	if(connectivity.getConnectionType() === connectivity.connectionType.none) {
		var navigationEntry = {
			backstackVisible:false,
			clearHistory:true,
			moduleName:'views/no-network'
		}
		frameModule.topmost().navigate(navigationEntry);
	} else {
		RssListViewModel.load();
	}
};

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

As you can see, I simply navigate to a new view if the user is offline. Note the use of navigationEnty as a way to pass configuration information about the transition itself. For my new view, I simply added a message and a button the user could click to see if they were online. Again - the connectivity module supports events so I could have automated this. First - the view.


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

	<Page.actionBar>
		<ActionBar title="Offline" />
	</Page.actionBar>

	<StackLayout orientation="vertical">
		<TextView text="Sorry, but you are currently offline." />
		<Button text="Check Again" tap="checkConnectivity" />
	</StackLayout>
</Page>

And here is how it looks.

Offline screen

Not the prettiest UI, but that's my fault, not NativeScript. For now, it gets the job done. Here's how the button works.


var frameModule = require('ui/frame');
var connectivity = require('connectivity');
var dialogs = require("ui/dialogs");

var viewModule = require('ui/core/view');
var page;

exports.loaded = function(args) {
	page = args.object;
};

exports.checkConnectivity = function(args) {
	var connectionType = connectivity.getConnectionType();
	if(connectivity.getConnectionType() === connectivity.connectionType.none) {
		dialogs.alert({
			message:'Sorry, but you are still offline.',
			title:'Offline',
			okButtonText:'Close'
		});
	} else {
		frameModule.topmost().navigate('views/main-page');
	}
}

This is pretty much what you would expect - check connectivity and if still bad, let the user know, otherwise send them to the home page.

Woot! Ok, now for the next change. Some RSS feeds only provide a snippet of text. I wanted to do something similar to Cordova's InAppBrowser, a "mini" web browser that can be closed leaving the user back in the app. I was not able to find that for NativeScript. I did, however, find a way to at least open the system browser. I began by modifying the view to include a bottom at the end of the page. (Thanks to the helpful folks in the NativeScript Slack channel!) Here's the new code.


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

	<Page.actionBar>
		<ActionBar title="{{ title }}" />
	</Page.actionBar>
	<GridLayout rows="*,auto">
		<ScrollView>
			<HtmlView html="{{ text }}" />
		</ScrollView>
		<Button text="Open in Browser" class="openButton" row="1" tap="openURL" />
	</GridLayout>
</Page>

And here's the result:

New button

The code for this is pretty simple:


var utils = require('utils/utils');

//stuff here I cut out for space

exports.openURL = function() {
	utils.openUrl(RssListViewModel.viewModel.get('selectedItem').link);	
}

And it works as expected:

Web view

The big issue though is that the user has now left the app and may not know how to return. Maybe someone in the NativeScript community would have a suggestion to help out here.

Anyway - as before - I've included the full source code of this in my NativeScript GitHub repo. You can find it here: https://github.com/cfjedimaster/NativeScriptDemos/tree/master/rssTest2

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by TJ VanToll posted on 5/27/2016 at 3:49 PM

Hey Ray,

Love the article and definitely agree with you about the “cookbook”. I’ll see what I can do about improving the UX there.

For your example you probably want to use the {N} <WebView> control, so something like <WebView url="{{ link }}"></WebView>. The docs are hidden in the same cookbook section, and quite frankly aren’t very good: http://docs.nativescript.or.... Feel free to ping me on Slack if you want help getting that up and running.

Comment 2 (In reply to #1) by Raymond Camden posted on 5/27/2016 at 3:53 PM

I saw that and considered it, but I wasn't sure how it would look. One thing the Ionic docs do well (although not 100%) is show visual examples of controls. NativeScript could use that as well.

So I assume I'd swap out my HtmlView tag with this? And that's it? (And of course change the attributes.) How does it look?

Comment 3 (In reply to #2) by Raymond Camden posted on 5/27/2016 at 3:55 PM

Ok, I tried that, but no go. I just get a white screen. I'm boarding a plane so will be AFK for 3 hours. Gist of my change (and I change code behind to support the link) - https://gist.github.com/cfj...

Comment 4 (In reply to #3) by Raymond Camden posted on 5/27/2016 at 3:57 PM

Ok ignore me. I got it working. Boarding in seconds. I'll post more thoughts later. Frankly, this is superior - although I like this *and* the option to open in the system browser too. Now I'll have a "part 3" for later next week.

Comment 5 (In reply to #2) by TJ VanToll posted on 5/27/2016 at 4:27 PM

Agreed about the visual controls. It’s a bit tricky for us, since we’re not web based and can’t actually render our controls in the browser, but we could certainly be better about embedding images. The best we have right now is on the “Components” page in the docs. Here’s the WebView there http://docs.nativescript.or....

Comment 6 (In reply to #5) by Raymond Camden posted on 5/27/2016 at 7:42 PM

Hmm - that's pretty clear. I must have missed it before. Oh - I think I know why - I went here: https://docs.nativescript.o...

Comment 7 (In reply to #4) by Simon Grimm posted on 7/2/2016 at 6:13 PM

Hey Ray, I'm also currently getting into NativeScript, so I just wanted to check if you will post your new solution as part 3 of the tutorial? Thanks anyway for the first 2 posts!

Comment 8 (In reply to #7) by Raymond Camden posted on 7/4/2016 at 1:36 PM

Um - did I say I was doing a part 3? (Honest question - I don't remember. ;)