Using the JSDO and DataSource with an existing NativeScript app

The following steps assume that you have an existing NativeScript app.

• If you do not have an existing app, you can create a new one using the blank template:
  tns create testapp --template tns-template-blank-ng

• From the project folder, install the npm package @progress/jsdo-nativescript:
  npm install @progress/jsdo-nativescript

• JSDO 5.0 uses rxjs 5.x. To work with Angular 6 and rxjs 6.x, you would need to add rxjs-compat to your environment:
  npm install rxjs-compat

• Build app and launch the emulator:
  tns run android

• Import @progress/jsdo-core and @progress/jsdo-nativescript from home.component.ts.

• Add code to create a JSDOSession and DataSource instance.

• Add code to access the data from home.component.html.

Sample code for home.component.ts

import { Component, OnInit } from "@angular/core";
import { progress } from "@progress/jsdo-core";
import { DataSource, DataSourceOptions } from "@progress/jsdo-nativescript";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    items: Array<object> = [];

    constructor() {
        this.createSession(() => {
            this.readCustomers((myData) => {
                this.items = myData.data;
            });
        });
    }

    ngOnInit(): void {
        // Empty
    }

    createSession(callback) {
        const serviceURI = "https://oemobiledemo.progress.com/OEMobileDemoServices";

        progress.data.getSession({
            serviceURI,
            catalogURI: serviceURI + "/static/SportsService.json",
            authenticationModel: "anonymous"
        }).then((object) => {
            callback(object);
        }, (object) => {
            console.log("Error accessing data.");
        });
    }

    readCustomers(callback) {
        const dataSource = new DataSource({
            jsdo: new progress.data.JSDO({ name: "Customer" })
        });

        return dataSource.read({
            filter: "CustNum < 11"
        }).subscribe((data) => {
            callback(data);
        }, () => {
            console.log("Error reading records.");
        });
    }
}

Sample code for home.component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <Label [text]="item.Name" class="list-group-item"></Label>
        </ng-template>
    </ListView>
</GridLayout>