Setup:

This setup uses the NativeScript Cars app to demonstrate this functionality.

1. Run the following command to create the master template: tns create my-master-detail-ng --template tns-template-master-detail-ng.
2. Use the following command to access the master template: cd my-master-detail-ng.
3. Use the following command to set up your desired operating system: tns run <android/ios>.
4. Install the @progress/jsdo-nativescript and @progress/jsdo-core npm packages in your NativeScript project by running the following command: npm install @progress/jsdo-nativescript @progress/jsdo-core.
5. Make the following changes to the Cars app to use the JSDO and the Data Source modules:
   1. In src/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";
        import { Observable, from } from "rxjs";
        import { catchError } from "rxjs/operators";
        

      • Find 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}`);
                }).pipe(catchError(this.handleErrors));
        }

      • Replace the above code with the following:

        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 from(promise).pipe(catchError(this.handleErrors));
        }

   2. In src/app/cars/car-list.component.html, change car.name to car.Name:

      <Label [text]="car.Name" class="text-primary font-weight-bold"></Label>

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.