AlgorithmsCodilityPatternsTutorials

All righty then, you made it this far, so kudos to you!

In this section we will cover basic Nativescript and Angular 2 concepts, get familiar with typescript,  and build a login and register page as well.

Nativescript

Nativescript is a Javascript framework for building crossplatform apps. It uses Google’s V8 (for Android) and WebKit’s JavaScriptCore (for iOS)  virtual machines to evaluate Javascript code, and convert it to native methods. I know i am oversimplifying this, and for a more thorough understanding, please read the official docs. Now, i could have gone with Ionic on this project, but using a web browser to emulate native functionality is not very performant. Come to speak, if you need to create an app with high graphics performance, i suggest you go native. But for quick prototypes, limited budgets, heavy logic, crossplatform apps, Nativescript is the king! At the time of writing this article, ReactNative only supports Android, but watch out for the new player on the market…

As i dont have all the time in the world, i will test only on Android, but all code is available on Github, so feel free to mess around with it and try to get it running on an iOS device.

Oh, I almost forgot! To truly master Nativescript, Javascript is not enough. As sooner or later the Nativescript runtime will not have you covered and you will be forced to mess with underlying iOS and Android APIs, and that is where the knowledge of Java and Objective C/Swift will come real in handy. Enough with the chitchat, lets see some code!

First you are going to need a global installation of Nativescript CLI.

that will make the Nativescript ‘tns’ command available in your console. Go to the folder where you keep your projects, and run

In my case, the app is named app.footprints.

Now, add the android platform

Allright, the project is bootstraped! Now we need to see it running somehow. Here you have a number of options, there is the emulator that comes with android sdk, but Nativescript is suggesting Genymotion, and due to its popularity and ease of usage, it is not odd. If you dont have it already, install android studio and the SDK.

With all installed and console open, run

After some compiling, you should see the starter button press counter app.

Did you notice the –ng at the end of ‘create’ command, that tells the tns to create an angular app, with some default angular 2 boilerplate. Take some time to look around and figure out the way the code works. If you are not familiar with RxJS, you should first finish a few tutorials on that subject, because Angular2 comes with it and heavily relies on it. I suggest this one, as it comes in video or text version and pretty much sums up the points and ideas behind reactive streams. Also, if you like marbles, the Cycle.js creator made something to make it easier to visualize how this works.

Apart form Rx, Angular 2 comes with Typescript. I know i know, you write javascript because you don’t want to mess with interfaces, types or classes and kill the tiniest bit of how expressive the language is. But trust me on this one, there are cases where javascript needs them (All you Java/iOS devs can look away now). Furthermore, i claim that all javascript libs should be authored in Typescript, or Flow if you like it. At the current state of things, types are rarely documented, and having to be able to tell what goes in and what comes out of a function/module with absolute certainty is clearly an advantage. But that is a subject for another post.

And now for the concrete part:

Angular 2

If you are familiar with the original Angular, you are 20 minutes ahead from someone who didn’t have that privilege. There are some similar concepts, but all in all, it is an entirely different framework. Modules, injectors, services, directives, templates… explaining these concepts is beyond the scope of this tutorial, but you can read more on that here. I will try to explain how and why we structured our app and generally cover some of them as we go. You’ll see, you will get a hang of it.

The starting point of our app is the ‘main.ts’ file in the root of our project.

As you can see, all it does is bootstraps our main component, so lets see that one:

Here you can see that we are importing our pages and connecting them to routes, every route has a path, a main component and a name. As simply as that, using nativescript-angular router we have created our routes. we are making Login are default route, so lets take a look at that component.

There are three main methods here, Login, Register and Check. In case of successful login, we are storing the token we got from our RESTfull api and redirecting to Map page. For storage we are using the application-settings module, that works pretty similar to localstorage on browser. For more serious storage options, there are some plugins for syncing and managing sqlite database in nativescript.

Check method retrieves the token from our storage, and appends it to Authorization header to verify our user against our api. If all went well, the method returns a success response signaling that user credentials are valid and the token has not expired.

Another important part here is the Config class

Declaration of your apiUrl should not contain localhost, as nativescript wont know how to resolve it. So punch in ipconfig in your console to see your local ip.

The Register view and component is pretty similar to Login, so i wont cover it. For further info, refer to the github repo.

In the next section we will see how the map was built. From angular component and view, to native adapter for Mapbox.