Bringing Your User Profile Store to Mobile with NativeScript and Angular

Continuing down the path of user profile stores, we had previously seen how to create one with Node.js and Couchbase NoSQL as well as a web client front-end for it using Angular. What if we wanted to take this into a mobile application, which is the norm for all applications as of now.

There are many different mobile frameworks out there and we’re lucky that some even support Angular, which is what we had used in the previous example. We’re going to see how to convert our client front-end to mobile using NativeScript and Angular.

Before going forward, the assumption is that you’ve completely both of the two previous tutorials, one on creating the profile store backend and the other on creating the profile store web front-end. We’re also going to assume that your development environment is property configured for mobile development, whether that be Android, iOS, or both.

The flow of events in this application will match what we saw in the web version.

Create a New NativeScript with Angular Project

Assuming that you’ve gotten the NativeScript CLI installed and configured, execute the following to create a new project:

tns create profile-project-ns –ng

1	tns crear profile–project–ns —ng

El --ng flag in the above command is important because it means we are creating an Angular project rather than a NativeScript Core project.

As of right now, the NativeScript CLI doesn’t share the Angular CLI capabilities of generating components. For this reason, we’re going to have to create each of the HTML and TypeScript files manually.

If you’re on Mac or Linux, execute the following from within the NativeScript project:

mkdir -p app/login
mkdir -p app/register
mkdir -p app/blogs
mkdir -p app/blog
touch app/login/login.component.html
touch app/login/login.component.ts
touch app/register/register.component.html
touch app/register/register.component.ts
touch app/blogs/blogs.component.html
touch app/blogs/blogs.component.ts
touch app/blog/blog.component.html
touch app/blog/blog.component.ts

mkdir –p app/login

mkdir –p app/register

mkdir –p app/blogs

mkdir –p app/blog

touch app/login/login.component.html

touch app/login/login.component.ts

touch app/register/register.component.html

touch app/register/register.component.ts

touch app/blogs/blogs.component.html

touch app/blogs/blogs.component.ts

touch app/blog/blog.component.html

touch app/blog/blog.component.ts

If you’re on Windows, just create those directories and files manually. If you really wanted to, you could copy these directories and files from your web project from the previous tutorial.

Defining the Components to Represent Each Screen

Starting in the same direction as the web version, we’re going to focus on user login. Open the project’s app/login/login.component.ts file and include the following code:

import { Component } from ‘@angular/core’;
import { Http, Headers, RequestOptions } from “@angular/http”;
import { Router } from “@angular/router”;
import “rxjs/Rx”;

@Component({
    moduleId: module.id,
    selector: ‘app-login’,
    templateUrl: ‘./login.component.html’
})
export class LoginComponent {

    public input: any;

    constructor(private http: Http, private router: Router) {
        this.input = {
            “email”: “”,
            “password”: “”
        };
    }

    public login() {
        if(this.input.email && this.input.password) {
            let headers = new Headers({ “content-type”: “application/json” });
            let options = new RequestOptions({ headers: headers });
            this.http.post(“https://localhost:3000/login”, JSON.stringify(this.input), options)
                .map(result => result.json())
                .subscribe(result => {
                    this.router.navigate([“/blogs”], { “queryParams”: result });
                });
        }
    }

}

importar { Component } desde ‘@angular/core’;

importar { Http, Headers, RequestOptions } desde “@angular/http”;

importar { Router } desde “@angular/router”;

importar “rxjs/Rx”;

@Component({

moduleId: module.identificación,

selector: ‘app-login’,

templateUrl: ‘./login.component.html’

})

exportar clase LoginComponent {

público input: any;

constructor(privado http: Http, privado router: Router) {

este.input = {

“email”: “”,

“contraseña”: “”

};

}

público login() {

si(este.input.email && este.input.contraseña) {

let headers = nuevo Headers({ “content-type”: “application/json” });

let Opciones = nuevo RequestOptions({ headers: headers });

este.http.post(“https://localhost:3000/login”, JSON.stringify(este.input), Opciones)

.mapa(resultado =El resultado de tu pregunta se muestra a continuación: resultado.json())

.subscribe(resultado =El resultado de tu pregunta se muestra a continuación: {

este.router.navigate([“/blogs”], { “queryParams”: resultado });

});

}

The above code is exactly what we saw in the web version with two exceptions. I’ve removed the CSS reference since we did not create a CSS file on a component basis. I’ve also added a moduleId so relative paths could work with our component. These are both Angular related items with nothing to do with NativeScript.

The HTML is where things are different. Open the project’s app/login/login.component.html file and include the following XML markup:

<ActionBar title=”{N} Profile Store”></ActionBar>
<StackLayout class=”form”>
    <StackLayout class=”input-field”>
        <Label text=”Email” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” [(ngModel)]=”input.email” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Password” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” secure=”true” [(ngModel)]=”input.password” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Button class=”btn btn-primary” text=”Login” (tap)=”login()”></Button>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Register here.” [nsRouterLink]=”[‘/register’]” class=”text-center”></Label>
    </StackLayout>
</StackLayout>

<ActionBar title=“{N} Profile Store”El resultado de tu pregunta se muestra a continuación:</ActionBarEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“form”El resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Label texto=“Email” clase=“label font-weight-bold m-b-5”El resultado de tu pregunta se muestra a continuación:</LabelEl resultado de tu pregunta se muestra a continuación:

<TextField clase=“input” [(ngModel)]=“input.email” autocapitalizationType=“none”El resultado de tu pregunta se muestra a continuación:</TextFieldEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“hr-light”El resultado de tu pregunta se muestra a continuación:</StackLayoutEl resultado de tu pregunta se muestra a continuación:

</StackLayoutEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Label texto=“Password” clase=“label font-weight-bold m-b-5”El resultado de tu pregunta se muestra a continuación:</LabelEl resultado de tu pregunta se muestra a continuación:

<TextField clase=“input” secure=“true” [(ngModel)]=“input.password” autocapitalizationType=“none”El resultado de tu pregunta se muestra a continuación:</TextFieldEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“hr-light”El resultado de tu pregunta se muestra a continuación:</StackLayoutEl resultado de tu pregunta se muestra a continuación:

</StackLayoutEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Button clase=“btn btn-primary” texto=“Login” (tap)=“login()”El resultado de tu pregunta se muestra a continuación:</ButtonEl resultado de tu pregunta se muestra a continuación:

</StackLayoutEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Label texto=“Register here.” [nsRouterLink]=“[‘/register’]” clase=“text-center”El resultado de tu pregunta se muestra a continuación:</LabelEl resultado de tu pregunta se muestra a continuación:

</StackLayoutEl resultado de tu pregunta se muestra a continuación:

NativeScript has its own markup for the UI. The same rules apply in terms of Angular, but creating UI components is just a bit different.

For example, we are still using the [(ngModel)] attributes, but instead of div tags, we have StackLayout tags.

Now let’s take a look at the registration component. Open the project’s app/register/register.component.ts file and include the following TypeScript:

import { Component } from ‘@angular/core’;
import { Http, Headers, RequestOptions } from “@angular/http”;
import { Router } from “@angular/router”;
import “rxjs/Rx”;

@Component({
    moduleId: module.id,
    selector: ‘app-register’,
    templateUrl: ‘./register.component.html’
})
export class RegisterComponent {

    public input: any;

    public constructor(private http: Http, private router: Router) {
        this.input = {
            “firstname”: “”,
            “lastname”: “”,
            “email”: “”,
            “password”: “”
        };
    }

    public register() {
        if(this.input.email && this.input.password) {
            let headers = new Headers({ “content-type”: “application/json” });
            let options = new RequestOptions({ headers: headers });
            this.http.post(“https://localhost:3000/account”, JSON.stringify(this.input), options)
                .map(result => result.json())
                .subscribe(result => {
                    this.router.navigate([“/login”]);
                });
        }
    }

}

importar { Component } desde ‘@angular/core’;

importar { Http, Headers, RequestOptions } desde “@angular/http”;

importar { Router } desde “@angular/router”;

importar “rxjs/Rx”;

@Component({

moduleId: module.identificación,

selector: ‘app-register’,

templateUrl: ‘./register.component.html’

})

exportar clase RegisterComponent {

público input: any;

público constructor(privado http: Http, privado router: Router) {

este.input = {

“firstname”: “”,

“lastname”: “”,

“email”: “”,

“contraseña”: “”

};

}

público register() {

si(este.input.email && este.input.contraseña) {

let headers = nuevo Headers({ “content-type”: “application/json” });

let Opciones = nuevo RequestOptions({ headers: headers });

este.http.post(“https://localhost:3000/account”, JSON.stringify(este.input), Opciones)

.mapa(resultado =El resultado de tu pregunta se muestra a continuación: resultado.json())

.subscribe(resultado =El resultado de tu pregunta se muestra a continuación: {

este.router.navigate([“/login”]);

});

}

Again, the only changes we made in the above code, compared to the previous example, is in the CSS removal and moduleId addition.

Not bad when it comes to creating cross platform web and mobile applications right?

The HTML for the UI that powers the TypeScript logic is found in the app/register/register.component.html file and it looks like this:

<ActionBar title=”{N} Profile Store”></ActionBar>
<StackLayout class=”form”>
    <StackLayout class=”input-field”>
        <Label text=”First Name” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” [(ngModel)]=”input.firstname” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Last Name” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” [(ngModel)]=”input.lastname” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Email” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” [(ngModel)]=”input.email” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Password” class=”label font-weight-bold m-b-5″></Label>
        <TextField class=”input” secure=”true” [(ngModel)]=”input.password” autocapitalizationType=”none”></TextField>
        <StackLayout class=”hr-light”></StackLayout>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Button class=”btn btn-primary” text=”Register” (tap)=”register()”></Button>
    </StackLayout>
    <StackLayout class=”input-field”>
        <Label text=”Login here.” [nsRouterLink]=”[‘/login’]” class=”text-center”></Label>
    </StackLayout>
</StackLayout>

<ActionBar title=“{N} Profile Store”El resultado de tu pregunta se muestra a continuación:</ActionBarEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“form”El resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Label texto=“First Name” clase=“label font-weight-bold m-b-5”El resultado de tu pregunta se muestra a continuación:</LabelEl resultado de tu pregunta se muestra a continuación:

<TextField clase=“input” [(ngModel)]=“input.firstname” autocapitalizationType=“none”El resultado de tu pregunta se muestra a continuación:</TextFieldEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“hr-light”El resultado de tu pregunta se muestra a continuación:</StackLayoutEl resultado de tu pregunta se muestra a continuación:

</StackLayoutEl resultado de tu pregunta se muestra a continuación:

<StackLayout clase=“input-field”El resultado de tu pregunta se muestra a continuación:

<Label texto=“Last Name” clase=“label font-weight-bold m-b-5”El resultado de tu pregunta se muestra a continuación:</LabelEl resultado de tu pregunta se muestra a continuación:

<TextField clase=“input” [(ngModel)]=“input.lastname” autocapitalizationType=“none”El resultado de tu pregunta se muestra a continuación:</TextFieldEl resultado de tu pregunta se muestra a continuación: