NativeScript Example Application for Advanced System

Requirements

Visual Studio Code
node.js
npm
nativescript CLI
nativescript build stuff

you can find all the instructions here

Start from 0

The instructions to create an App from 0 with the blank template:

tns create app-name --template tns-template-blank-ts

NOTE: if the folder doesn't contains "node_modules" folder you must launch the:

npm install

command into the folder.

After that you must execute the follow command to generate the platform folder for android:

tns build android --bundle

Go into the "platforms" folder and set the:

org.gradle.jvmargs=-Xmx512M

to prevent the Java Virtual Machine exception for excessive use of memory.

Visual studio Code - Extensions and configurations

Install the following Visual Studio's extensions:

Auto Close Tag by Jun Han
Auto Rename Tag by Jun Han
GitLens - Git supercharged by Eric Amodio
JSON Tools by Erik Lynd
ignore "g" it by Andrea Vincenzo Abbondanza
NativeScript by Telerik
NativeScript Extend by Tsevetan Ganev
npm Intellisense by Christian Kohler
Prettier-Standard - Javascript Formatter by numso
Setting Sync by Shan Khan | (facoltative)
stack-tabs by Kyle Paulsen | (facoltative)
Surround by Mehmet Yatki | (facoltative)
TSLint by egemma

Git

Before use git in VSCode, you must install it. Go here to download it.

After installed, you don't have to do anything else.

NB: When you clone something, if you're not registred to the service and you just want use git on your machine, you must set an username and an email to execute commits.

Here the commands to execute to set them:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

This will set the GLOBAL user data in your system (so you can use it in every project).

If you want scope the credentials locally, just execute commands without global:

$ git config user.name "John Doe"
$ git config user.email johndoe@example.com

Default shell

In VSCODE when you press F1 button you'll open the prompt where you can execute commands.

One of this commands let you select your default shell (you can open pressing ctrl+ò).

Press F1 and write:

>Terminal: Select Default Shell

and select your favourite shell.

LAST UPDATE FOR THE PROJECT

Generic ViewModel

All viewmodels must extends ViewModel class that contains utilities and the TokenManager object.

Improvements for notifyPropertyChanges methods

Instead of the classic:

this.notifyPropertyChanged("PropName", this.PropName);

now you can use a shorten syntax for single notification with:

this.npc("PropName");

Or you can use a shorten syntax for multiple notification with:

this.npc(["PropName", "PropName1", "PropName2"]);

RestClient throw HTTPError exceptions for non 2XX status code

const client = new RestClient();
try
{
    const json = {
        email: this.Email,
        password: this.Password,
        remember: this.Remember
    };
    const req = await client.request(
        {
            headers: client.headers,
            url: "https://corso.dev.dewstudio.eu/api/login",
            method: "POST",
            content: JSON.stringify(json)
        }
    );
    const response = StandardResponse.jsonToStandardResponse<any>(req.content.toJSON());
    this.tManager.setToken(response.data.token);
    this.npc(["VisToken", "VisTokenInverse"]);
} catch (err)
{
    const error = err as HttpError;
    // is an httperror
    if (error !== null)
    {
        const response = StandardResponse.jsonToStandardResponse<any>(error.response.content.toJSON());
        await dialogs.alert(response.errorMessage);
    }
    else{
        // manage differently
    }
}

All the non 2XX response from server are managed like exception.

So, in the catch we check if the exception is of type HttpError (as operator return null if cast doesn't work). In this case, we manage the error via statuscode or errorMessage.

To Standard Response

Now we have the type StandardResponse that is the standard response we get from server:

{
    errorMessage: "string"
    data: "anything",
    error: {
        number: "number",
        desc: "string"
    }
}

We have also a static methods in StandardResponse class that convert our data in generics T type:

    const client = new RestClient();
    const req = await client.request(/*options*/);
    const response = StandardResponse.jsonToStandardResponse<any>(req.content.toJSON());
    // any type, you can access to data in javascript style
    console.log(response.data.pippo);
    // or for example
    const response = StandardResponse.jsonToStandardResponse<User>(req.content.toJSON());
    // now you can access to data as User type object
    console.log(response.data.name); // exists
    console.log(response.data.burp); // error in complie time

End

Good work guys

andreabbondanza / advanced-systems-course-app