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.

 

Advertisements

Angular2: 5min quickstart project setup with Visual Studio 2015

This post is a beginner level post for all those users who does their development mainly for enterprise applications and loves to code in Visual Studio and wants to do Angular2 development using Visual Studio Currently Visual Studio doesn’t have any Angular2 template out of the box. So we will be using a HTML Application Template with Typescript.

There are many nice lite editors (Sublime/Visual Studio Code/Atom/Bracket) available in market for doing all front-end development and you can install additional plugins to ease your development and help in quick coding. Coding editor preference is more of your comfort level and ease of use with the features, which editors provides by default/or with add on plugins.

Microsoft has started releasing their Visual Studio enterprise editor as a community editor with some limited features for last few years, for details you can visit Microsoft website. To download the free community edition, you have to register it with your live/hotmail email account. (That’s what I had to do).

Editors like Web Storm, or Visual Studio  are great editor for creating and managing enterprise apps compared to lighter JavaScript/HTML5 editors cited above, because of additional enterprise management tool these editors provide out of the box for your day to day development.

Angular2 is a framework/platform to create enterprise application not a simple website with 4-5 pages, because if you want to do that you will be better off avoiding it, as carrying over so much payload for that small work is not recommended for a good programmers

Create a new Angular Project: We will be using angular.io 5 min quick start sample project to show how to setup Angular2 project in it. You can download the whole project from github. To start creating Angular2 project in Visual studio we will use a HTML Application with Typescript template: typescript-template as it doesn’t have default template to setup Angular2 project yet.

Next go to 5 min quick start sample project page and start following the steps listed in the tutorial. Create tsconfig.json, typings.json & package.json file at root of project and copy paste the code from the page and copy paste the code from the page.

Install modules automatically: As soon as you will save the package.json file Visual studio will start downloading all the node modules into node_modules folder. package_jsonYou can varify that from output tab in visual studio or you can visit the file explorer and see the files and folders there.

Add all ts files, html files and css files as instructed. You can remove app.ts & app.css from folder as that’s not part of this quick start sample. If you don’t see anything listed in Task Runner explorer task_explorertab click refresh icon (marked in orange rectangle image above) in that it will automatically update the Task runner explorer tab with all available npm commands from package.json file. You can right click – install and click Run to make sure all the npm modules and typings files are installed for the project.

Run project from editor: Double click start or right click start and then click Run command from it. It will launch the angular2 sample app in default associated browser.start_project_from_vs

It will be linked with BrowserSync so any update you will make in app.component.ts file will automatically refresh the browser and you can view all the task runner in Task Runner explorer at the same time.

Real-time error listing: You can view the errors in error list tab as soon as you will make any kind of error in your ts/css/html file and that too without you saving the file.error_list

By clicking on a variable definition with ctrl+click when it turned into hyperlink it will display the definition of that variable there itself for quick help with file name appearing in window as where that definition is coming fromvariable_definition.

Hide files not needed in development: One other quick feature which I liked is when I create a project with Typscript template it doesn’t show me Javascript files or other node_modules folder automatically, you don’t have to do anything extra.

hide_files

files/folders listed in brown rectangle will show/hide if you click on icon highlighted with orange rectangle at top of above image.

There are many other additional features which Visual Studio editor provides out of the box like checking code coverage and other great features which helps you in validating your code or it’s efficiency which are beyond the scope of this article, but they are definitely nice features to help in small or big projects.

You can download the whole project from github.

 

Learning Angular2 online – my experience…

To start with I would like to say that I am fairly new to Angular framework but knows JavaScript for a while now and knows a bit of JavaScript (SPA) frameworks as well,

I have started learning Angular2 back in December 2015, started with going through quite a few blogs, most of these blogs had same TodoMVC example with bit different design examples and most of them were written by developers who were already working with previous version  of Angular i.e. AngularJS and most of the time they skipped the basic explanations.
With Angular2 I realized that sometimes it would be hard for even an AngularJS developer to grasp few things which are totally new in Angular2. For example the concept of Annotation, no Scope and Component based architecture. No more MV* pattern, concept of web component is used.

I watched quite a few online videos, introducing Angular2 in the best possible way you can introduce some of the concept within 30min to 1hr long live presentations.

1 hr lunch session/webinar

Thanks for rangle.io they conducted quite a few sessions during January which I attended.

  • 1 hour lunch time sessions
  • Gave you the links to the recordings of sessions which you can watch again later.
  • Some of these sessions were covered from the standpoint of how you can jump to or convert your existing projects to Angular2.
  • They wrote a wonderful Angular 2 Training book available for free.
  • They still do lunch time 1 hr sessions from time to time. you can check on their website.

And then in last 2 months I attended 2 different types of online courses/events in Angular2 with both of them covering almost all the topics with bonus topics of Typescript and Packaging and unit testing.

1 to 2 days workshops/live event

Thanks to a free tickets to attend live event online from https://frontendmasters.com. It was great 2 day event from 9-5 and luckily I was off from office for whole week. So I was able to attend this live event online from home un-interrupted. Here is my assessment of attending the event:

  • Great introduction to almost all the topics which you need to know to work in Angular2. Presenter (Lukas Ruebbelke) were great, very knowledgeable.
  • They covered almost everything you can think of in straight 2 days with one or two bonus topics covered on 3rd day but it wasn’t available for online view.
  • It was a too much to consume in 2 days on the trot with no break(except for lunch break or 5/10min break between sessions) in between to retrospect upon stuff you are learning.
  • I would say It was great session to all the folks who had intermediate to advance knowledge of JavaScript and MV* frameworks. Presenters did explain every topic nicely but if you are new to some of the stuff it sometimes take time to really make a mental picture of concept and how it will work in the whole context of web app development.
  • Presenters did provide with github repository url and plunker url for all the solutions they covered in the event so for all developers who were not that good with npm stuff they had the option to go and get final solution from Github and try it later.
  • They also gave url to plunker for all the solutions/topics the presented in event so that if you were not able to grasp something you can go later and pick up the stuff from there.
  • For all registered paid members all the recorded videos of event were available for later dates.

6 weeks online course

In Feb 2016, I enrolled for a 6 week course with http://faratasystems.com/upcoming-training/ . It was done by Yakov and Anton they have written a book on angular 2 on meap

  • It was a great 6 week course with classes every Sunday morning for 3hours and 1hour every Saturday you go over the past week lesson project assignment.
  • All the topics of Angular2 were covered with detailed Introduction to the usage of Typescript and Webpack bundling and Unit testing in Angular2.
  • One of the best thing I liked was no prior knowledge of AngularJS was required, so you were explained everything as if you don’t know how things were working earlier in Angular and how it will work now. But you definitely needs to know how JavaScript works and what’s SPA(Single Page Application) architecture.
  • You had a full week within every new topic/lesson to go over what you have covered in the last topic and you can always discuss with presenter about the topic during project assignment go over on next Saturday.
  • The pace of course was slow if you are not new to some of advance concepts of JavaScript, so I would say it was best course for beginners with Angular2 with some JavaScript knowledge.
  • If you are coming from Java Enterprise background(server side developers) and trying to get up to speed with these SPA architecture of Angular2 in Front end space this course is best as you are not expected to know a lot of front end technologies during this course.

Some of the interesting blogs with better Angular2 insight:

All the best for all the developers who are looking forward to working with Angular2 and I hope some of the information provided above will be of some help to folks looking for some information to learn Angular2.