Using the JSDO and the Data Source Modules in an Existing NativeScript App

High-level tasks:

1. Install the @progress/jsdo-nativescript npm package in your NativeScript project by running the command, npm install @progress/jsdo-nativescript.

2. Import the @progress/jsdo-core and @progress/jsdo-nativescript packages into the app's code-behind file.

3. In the code-behind file:

a. Add code to create a JSDOSession instance.

b. Add code to create a Data Source instance.

c. Modify the app's primary component.html file to display the new data.

d. Save your changes.

e. Run the app on an emulator.

The following example shows the changes that need to be made to the Cars app (generated using the tns-template-master-detail-ng template) to use the JSDO and the Data Source modules:

1. Install @progress/jsdo-nativescript.

2. In \app\cars\shared\car.service.ts:

Add the following import statements.

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

Comment out the following lines of code.

load(): Observable<any> {
return new Observable((observer: any) => {
const path = "cars";

const onValueEvent = (snapshot: any) => {
this._ngZone.run(() => {
const results = this.handleSnapshot(snapshot.value);
observer.next(results);
});
};
firebase.addValueEventListener(onValueEvent, `/${path}`);
}).catch(this.handleErrors);
}

Add the following lines of code.

private dataSource: DataSource;
createSession(successFn, errorFn): void {
const serviceURI = "https://oemobiledemo.progress.com/OEMobileDemoServices";

progress.data.getSession({
serviceURI,
catalogURI: serviceURI + "/static/SportsService.json",
authenticationModel: "anonymous"
}).then((object) => {
this.dataSource = new DataSource({
jsdo: new progress.data.JSDO({ name: "Customer" })
});
successFn();
}, () => errorFn());
}

load(): Observable<any> {
const promise = new Promise((resolve, reject) => {
this.createSession(() => {
this.dataSource.read().subscribe((myData: DataResult) => {
resolve(myData.data);
});
}, (error) => {
const message = (error && error.message) ? error.message : "Error reading records.";
reject(new Error(message));
});
});
return Observable.fromPromise(promise).catch(this.handleErrors);
}

3. In \app\cars\car-list.component.html, change car.name to car.Name.

4. Save the changes.

As a result of these changes, when you launch the Cars app on the emulator, you will see that the app is connected to OEMobileDemoServices and that it displays customer names instead of car names.