Build Your First Mobile App With The NativeScript and Angular2 - Part 4

Published on July 5, 2016

So, We know what’s hybrid vs native apps, what’s typescripts/es6. We setup everthing. If you are not refer these Part 1, Part 2 and Part 3

Let’s start playing with tns cli and create an application with it.

Open your console from where you want to have your code base(If you have installed Cmder open it by right-clicking in the folder and select Cmder Here)

In Part 2 We have installed NaiveScript. Enter the following command

tns create GitUser --ng

In few seconds project scaffolding will be ready. Observe --ng It tells tns to create nativescirpt with angularjs project scaffolding. Otherwise, Javascript based project scaffolding will be created.

For more information about tns commands type tns --help command.

tns cli creates a new folder GitUser with Angular NativeScript files in it.

Now, we need to add android, ios platforms to the project. Since we are developing on windows we will focus on Android platform. IOS also has the same steps. But if you want to build IOS app you should have Mac os.

To add a platform to the project run this command on the console.

tns platform add android

For IOS.

tns platform add ios

This will install few node packages and configure the platform for us.

Congratulations, you have created your first project. To run the project type this command on the console.

tns run android --emulator

or if you want to use genymotions

tns emulate android --geny "Your Device name"

We can get device name by genyshell -c "devices list" command.

Make sure the Geneymotion android virtual device is turned on that we have installed in Part 2. Or you can use default emulator also.

The first time it will take a while to compile all the code. Hopefully, if everything went well you will see this.

This is the default template we get with nativescript.

We can also check our application directly on our android device. Connect your android device enable debug on your device by going into Settings > Developer tools > Enable debugging. Then run this command.

tns run android

If you getting any console errors just run tns doctor command to know if any issue with your installation.

Watching for changes

Building application every time you change something is a tedious process.

NativeScript cli also have the liveSync with --watch feature. So whenever you change any file it will automatically detect and build and deploy the code on the emulator or on your device.

To do so.

tns livesync android --emulator --watch

If you want to do the same on your device just remove “—emulator`. From now on wards tns will look for code changes.

Inside the project

Inside the native script project we have

app

All our code base will be here. Most of the time we only deal with it.

hooks

Here we can give specific instructions to `tns`. For exmaple if you want to delete some files before livesync you can do it.

node_modules

Third party nodejs modules

platforms

It will have either android or ios or both folders inside it. This will be created when you run `tns run android` or `tns run ios`

package.json

This file contains the list of all npm packages that have been installed for this project.

references.d.ts

This file contains core nativescirpt typescripts defenitions.

tsconfig.json

Configuration for the TypeScript compiler.

Inside app folder, we have app.* files and main.* files.

Ignore other files for now just open app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }
    
    public onTap() {
        this.counter--;
    }
}

It’s a simple angular 2 component. It’s nothing to do anything with nativescirpt just angular 2.

Now, open main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";

nativeScriptBootstrap(AppComponent);

It’s this boot script file. With angular 2 angular code can be used for any platform Node or Web or mobile. Since it NativeScript. NativeScript has created its own bootscript method.

Ok, We now know how to run the application what’s inside the project. In next post, we will start building the application.