Nativescript app with Angular2: Listing phone contacts

This is a phone contacts listing app created using Nativescript and Angular. The concept for the app is almost similar to the other app I have created using PhoneGap where I have used Phonegap/Cordova plugins to fetch phone contacts and list them, you can get that project from github. In this app I am using Nativescript plugin to fetch phone contacts and list them. (currently it doesn’t have search functionality as the one I have in PhoneGap app).

If you are new to Nativescript I would suggest you first go through a nicely written tutorial post by TJ VanToll and linked repo on github. This tutorial has covered lot’s of basics for both Anuglar2 and Nativescript developers.

I will be sharing my learning during creation of this app, you can find the repository on github

I will not walk through the project step by step but I will list some of the lessons I have learned in this project and how I was able to resolve the issues I came across.

  • Naming convention is important: When you are creating your templates in xml/html (you can name the template file as html as most of the editors will give you better help) make sure you either use CamleCase or kebab-case styling to name the tags for e.g. either <StackLayout> or <stack-layout> not like <stacklayout> or <textfield> I was using all small case with any hyphen and for some reason my ngModel was not working. I tried to raise this issue at multiple places but couldn’t find any answer to it. But I see in one of the tutorial its updated now that you should be using either of the 2 naming conventions to name your tags in xml/html template markup nothing else or you might be wasting lot of time like I did.
  • Permission model for Android SDK 23: if you are developing app using android SDK 23 and you are using device features for which you need user permission. You have to initiate permission dialog from within the app when you will be initiating the call for that functionality and only on it’s successful acceptance you can do that activity on phone. To achieve this functionality in your nativescript app you have to take help of nativescript-permission plugin created by Nathan a very senior developer and very approachable. He helped me on Nativescript slack channel to quickly set this plugin up for Typescript as it’s originally created and setup for JavaScript only, and I was having problem in using it my Angular/Typescript Nativescript app.
    other than what’s listed in plugin usage on npmjs page you have to declare android variable in your typescript project to use it. Something like

    declare var android:any;
  • Use fat arrow within your promises: when you will use .then() in your promise you can’t use “this” access variables declared at class level or functional level because of scoping issue. Your best bet is to use fat arrow “=>” and then use this to access local variable declared at class or outer functional level. It will save lot of headache on figuring out how to return value to variable outside or how to access variable inside .then().
  • Debugging Nativescript app: you can debug your nativescript app using visual studio code integration with debug option, you have to install a Nativescript extension for visual studio code and go through the article on how to debug Nativescript app. But I found it hard to make design tweaks in debug mode as I can do in phonegap/cordova apps in Google chrome using chrome://inspect/#devices but I think that’s the trade of you have to do when you want to go to native level.
  • Useful Nativescript commands: The one I liked most is “tns livesync –watch” it just don’t compile whole code again on every save, it just push the differential on every save. Only issue is sometimes you will suddenly see whole set of error on your screen not because of error in code, but for reasons other then change in code, like the view on the particular page is getting derived from some value from previous screen and when it refresh the view it doesn’t have the value.
  • Nativescript Contacts plugin: For fetching contacts from my android device in this nativescript app I am using nativescript – contacts.
  • As is the case with Permission plugin this plugin also returns promise. all the possible usage of the plugin are explained in detail with proper example. I am just using getAllContacts API.
  • Other good thing I liked in this plugin detail is that author has given a complete data structure  returned by the API. So you can pick what you need.
  • If you are new/beginner to Nativescript and Angular2 development I will suggest you should use use the Nativescript tutorial chatper 1. This chapter covers all the aspect of installing Nativescript, and you can use Nativescript CLI to create project from command line and use –ng to set it up with angular and typescript e.g.
    tns create my-app-name –ng 
  • I have setup contact listing app using default project created with Nativescript CLI as a base. It saves you from lot’s of other details of setting up and preparing your project to be used with npm modules and compilation of native apk file.
  • The idea of this project was that someone who wants to list all contacts or do some manipulation with contacts on phone where the app is install can be done.

I hope you find this post and project useful. Have fun coding apps in Nativescript to get maximum performance without coding a single piece of line in Java or Objective C.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s