Syncing Couchbase Documents Between Mobile Platforms and Devices with NativeScript and Angular

지난 며칠 동안 네이티브스크립트, 앵귤러, 카우치베이스를 사용하여 간단한 안드로이드 및 iOS 애플리케이션을 만드는 방법을 살펴봤습니다. 먼저 다음과 같은 방법을 살펴보았습니다. 기본 키-값 연산에 카우치베이스 사용 그리고 나서 우리는 카우치베이스를 문서 데이터베이스로 쿼리하는 방법. 마지막 장은 Couchbase 동기화 게이트웨이를 사용하여 네이티브스크립트 애플리케이션에 복제 지원을 추가하는 것입니다.

앞의 두 가지 예제를 확장하여 Couchbase 동기화 게이트웨이, NativeScript 및 Angular를 사용하여 플랫폼과 디바이스 간에 데이터를 동기화하겠습니다. 다음 애니메이션 이미지를 예로 들어보겠습니다:

iOS 디바이스에 새 프로필이 추가되면 Android 디바이스와 반대 방향으로도 동기화됩니다. 이는 아주 적은 코드를 통해 가능합니다.

요구 사항

이 예제와 이전 두 예제 사이의 요구 사항이 약간 변경되었습니다. 성공하려면 다음이 필요합니다:

네이티브 스크립트 2.0+
카우치베이스 동기화 게이트웨이

NativeScript, Angular 및 Couchbase Lite 플러그인은 모두 NativeScript CLI를 통해 얻을 수 있습니다. 이 예제에서는 데이터를 Couchbase Server에 동기화하지는 않겠지만 아주 약간의 변경만으로 쉽게 동기화할 수 있습니다.

중단한 부분부터 다시 시작하기

이 튜토리얼을 성공적으로 완료하려면 다음을 확인해야 합니다. 파트 2 를 본 적이 있다는 자체 종속성이 있습니다. 파트 1. 이전 가이드에 있는 대부분의 코드를 복사하여 프로젝트에 붙여넣을 수 있습니다.

계속하기 전에 모달 대화 상자가 있는 두 페이지의 네이티브 스크립트 애플리케이션이 작동해야 합니다. 이 애플리케이션의 데이터는 카우치베이스 를 사용하여 쿼리했습니다.

Couchbase용 Angular 서비스 만들기

데이터 복제가 포함되므로 애플리케이션에서 Couchbase 인스턴스가 하나만 실행되고 있는지 확인해야 합니다. 이전 예제에서는 페이지 단위로 새 인스턴스를 만들었습니다. 복제를 사용하면 여러 번 복제하게 되어 비효율적일 수 있으므로 그렇게 할 수 없습니다.

Couchbase의 싱글톤 인스턴스를 생성하려면 Angular 서비스를 생성해야 합니다. 프로젝트 내에서 다음 위치에 파일을 생성합니다. app/couchbase.service.ts 를 열고 다음 TypeScript 코드를 포함합니다:

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";

@Injectable()
export class CouchbaseService {

    private database: any;
    private pull: any;
    private push: any;

    public constructor() { }

    public getDatabase() { }

    public startSync(gateway: string, continuous: boolean) { }

    public stopSync() { }

}

가져오기 { 주사제 } 에서 "@angular/core";

가져오기 { 카우치베이스 } 에서 "네이티브 스크립트-카우치베이스";

@주사제()

내보내기 클래스 카우치베이스 서비스 {

비공개 데이터베이스: any;

비공개 pull: any;

비공개 push: any;

public 생성자() { }

public getDatabase() { }

public 시작 동기화(게이트웨이: 문자열, 연속: 부울) { }

public stopSync() { }

}

이 서비스는 모든 페이지에 삽입할 수 있습니다. Couchbase의 단일 인스턴스는 다음과 같은 위치에 저장됩니다. 데이터베이스 변수에 저장되며 푸시 및 풀 리플리케이터에 대한 정보는 해당 변수에 저장됩니다.

내 생성자 메서드에는 다음과 같은 것이 있습니다:

public constructor() {
    if(!this.database) {
        this.database = new Couchbase("data");
        this.database.createView("profiles", "1", function(document, emitter) {
            emitter.emit(document._id, document);
        });
    }
}

public 생성자() {

만약(!이.데이터베이스) {

이.데이터베이스 = new 카우치베이스("데이터");

이.데이터베이스.createView("프로필", "1", 함수(문서, emitter) {

emitter.emit(문서._id, 문서);

});

}

새 Couchbase 인스턴스를 생성하기 전에 이미 인스턴스가 없는지 확인합니다. 그렇지 않은 경우 데이터베이스를 열고 이전 예제에서 이미 본 적이 있는 MapReduce 보기를 생성합니다.

public getDatabase() {
    return this.database;
}

public getDatabase() {

반환 이.데이터베이스;

}

이 인스턴스를 얻을 때가 되면 다음을 통해 반환할 수 있습니다. getDatabase 함수를 호출합니다. 이는 데이터 복제로 이어집니다.

public startSync(gateway: string, continuous: boolean) {
    this.push = this.database.createPushReplication(gateway);
    this.pull = this.database.createPullReplication(gateway);

    this.push.setContinuous(continuous);
    this.pull.setContinuous(continuous);

    this.push.start();
    this.pull.start();
}

public 시작 동기화(게이트웨이: 문자열, 연속: 부울) {

이.push = 이.데이터베이스.createPushReplication(게이트웨이);

이.pull = 이.데이터베이스.createPullReplication(게이트웨이);

이.push.setContinuous(연속);

이.pull.setContinuous(연속);

이.push.시작();

이.pull.시작();

}

이 예에서는 동기화 게이트웨이 인스턴스에 대해 양방향 동기화를 수행하겠습니다. 한 번만 동기화하거나 애플리케이션이 열려 있는 동안 지속적으로 동기화할 수 있습니다. 복제를 중지하고 싶을 때는 stopSync 함수입니다:

public stopSync() {
    this.push.stop();
    this.pull.stop();
}

public stopSync() {

이.push.중지();

이.pull.중지();

}

공유 서비스가 될 것이므로 프로젝트의 @NgModule 블록을 클릭합니다. 프로젝트의 앱/앱.모듈.ts 파일을 열고 다음 TypeScript를 포함합니다:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ModalDialogService } from "nativescript-angular/modal-dialog";

import { appComponents, appRoutes } from "./app.routing";
import { AppComponent } from "./app.component";
import { ModalComponent } from "./app.modal";
import { CouchbaseService } from "./couchbase.service";

@NgModule({
    declarations: [AppComponent, ModalComponent, ...appComponents],
    entryComponents: [ModalComponent],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [ModalDialogService, CouchbaseService],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

가져오기 { NgModule, NO_ERRORS_SCHEMA } 에서 "@angular/core";

가져오기 { 네이티브 스크립트 모듈 } 에서 "네이티브스크립트-각형/플랫폼";

가져오기 { 네이티브 스크립트 양식 모듈 } 에서 "네이티브스크립트-각형/양식";

가져오기 { 네이티브스크립트 라우터 모듈 } 에서 "네이티브스크립트-각/라우터";

가져오기 { 모달다이얼로그 서비스 } 에서 "네이티브 스크립트 각/모달 다이얼로그";

가져오기 { 앱 컴포넌트, 앱 경로 } 에서 "./app.routing";

가져오기 { 앱 컴포넌트 } 에서 "./app.component";

가져오기 { 모달 컴포넌트 } 에서 "./app.modal";

가져오기 { 카우치베이스 서비스 } 에서 "./couchbase.service";

@NgModule({

선언: [앱 컴포넌트, 모달 컴포넌트, ...앱 컴포넌트],

항목 구성 요소: [모달 컴포넌트],

부트스트랩: [앱 컴포넌트],

수입: [

네이티브 스크립트 모듈,

네이티브 스크립트 양식 모듈,

네이티브스크립트 라우터 모듈,

네이티브스크립트 라우터 모듈.forRoot(앱 경로)

공급자: [모달다이얼로그 서비스, 카우치베이스 서비스],

스키마: [no_errors_schema]

})

내보내기 클래스 앱 모듈 { }

위는 이전에 보았던 내용이지만 이번에는 다음을 가져왔습니다. 카우치베이스 서비스 에 주입하여 공급자 배열의 @NgModule 블록.

이제 각 페이지가 새로운 Angular 서비스를 사용하도록 업그레이드할 수 있습니다.

네이티브스크립트 애플리케이션 페이지 업그레이드

Angular 서비스를 반영하기 위해 업데이트해야 하는 페이지가 두 개 있습니다. 프로젝트의 앱/컴포넌트/프로필 목록/프로필 목록.ts 파일에 있는 카우치베이스 코드를 제거하고 생성자 메서드를 사용해야 합니다. 대신 또는 파일은 다음과 같아야 합니다:

import { Component, OnInit, OnDestroy, NgZone } from "@angular/core";
import { Location } from "@angular/common";
import { Router } from "@angular/router";
import { CouchbaseService } from "../../couchbase.service";

@Component({
    selector: "profile-list",
    templateUrl: "./components/profile-list/profile-list.html",
})
export class ProfileListComponent implements OnInit, OnDestroy {

    public profiles: Array;
    private database: any;

    public constructor(private router: Router, private location: Location, private zone: NgZone, private couchbase: CouchbaseService) {
        this.database = this.couchbase.getDatabase();
        this.profiles = [];
    }

    public ngOnInit() {
        this.location.subscribe(() =&gt; {
            this.refresh();
        });
        this.refresh();
    }

    public refresh() {
        this.profiles = [];
        let rows = this.database.executeQuery("profiles");
        for(let i = 0; i &lt; rows.length; i++) {
            this.profiles.push(rows[i]);
        }
    }

    public create() {
        this.router.navigate(["profile"]);
    }

}

가져오기 { 구성 요소, OnInit, OnDestroy, NgZone } 에서 "@angular/core";

가져오기 { 위치 } 에서 "@각형/공통";

가져오기 { 라우터 } 에서 "@각/라우터";

가져오기 { 카우치베이스 서비스 } 에서 "../../couchbase.service";

@구성 요소({

선택기: "프로필 목록",

templateUl: "./components/프로필 목록/프로필 목록.html",

})

내보내기 클래스 프로필 목록 구성 요소 구현 OnInit, OnDestroy {

public 프로필: 배열;

비공개 데이터베이스: any;

public 생성자(비공개 라우터: 라우터, 비공개 위치: 위치, 비공개 영역: NgZone, 비공개 카우치베이스: 카우치베이스 서비스) {

이.데이터베이스 = 이.카우치베이스.getDatabase();

이.프로필 = [];

}

public ngOnInit() {

이.위치.구독(() => {

이.새로 고침();

});

이.새로 고침();

}

public 새로 고침() {

이.프로필 = [];

let 행 = 이.데이터베이스.실행 쿼리("프로필");

에 대한(let i = 0; i < 행.길이; i++) {

이.프로필.push(행[i]);

}

public create() {

이.라우터.탐색(["프로필"]);

}

위 그림에서 다음을 가져온 것을 확인할 수 있습니다. 카우치베이스 서비스 에 주입하여 생성자 메서드와 함께 NgZone. 데이터베이스를 가져와서 뷰를 만드는 대신 getDatabase 기능을 제공합니다.

지금까지는 나쁘지 않죠?

이제 프로젝트의 앱/컴포넌트/프로필/프로필.ts 파일을 만듭니다. 이 파일에 다음 코드를 포함하세요:

import { Component, ViewContainerRef } from "@angular/core";
import { Location } from "@angular/common";
import { ModalDialogService } from "nativescript-angular/directives/dialogs";
import { CouchbaseService } from "../../couchbase.service";
import { ModalComponent } from "../../app.modal";

@Component({
    selector: "profile",
    templateUrl: "./components/profile/profile.html",
})
export class ProfileComponent {

    public profile: any;
    private database: any;

    public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private location: Location, private couchbase: CouchbaseService) {
        this.profile = {
            photo: "~/kitten1.jpg",
            firstname: "",
            lastname: ""
        }
        this.database = this.couchbase.getDatabase();
    }

    public showModal(fullscreen: boolean) {
        let options = {
            context: { promptMsg: "Pick your avatar!" },
            fullscreen: fullscreen,
            viewContainerRef: this.vcRef
        };
        this.modal.showModal(ModalComponent, options).then((res: string) =&gt; {
            this.profile.photo = res || "~/kitten1.jpg";
        });
    }

    public save() {
        this.database.createDocument(this.profile);
        this.location.back();
    }

}

가져오기 { 구성 요소, ViewContainerRef } 에서 "@angular/core";

가져오기 { 위치 } 에서 "@각형/공통";

가져오기 { 모달다이얼로그 서비스 } 에서 "nativescript-각/지시/다이얼로그";

가져오기 { 카우치베이스 서비스 } 에서 "../../couchbase.service";

가져오기 { 모달 컴포넌트 } 에서 "../../app.modal";

@구성 요소({

선택기: "프로필",

templateUl: "./components/profile/profile.html",

})

내보내기 클래스 프로필 컴포넌트 {

public 프로필: any;

비공개 데이터베이스: any;

public 생성자(비공개 모달: 모달다이얼로그 서비스, 비공개 vcRef: ViewContainerRef, 비공개 위치: 위치, 비공개 카우치베이스: 카우치베이스 서비스) {

이.프로필 = {

사진: "~/kitten1.jpg",

이름: "",

성: ""

}

이.데이터베이스 = 이.카우치베이스.getDatabase();

}

public 쇼모달(전체 화면: 부울) {

let 옵션 = {

컨텍스트: { promptMsg: "아바타를 선택하세요!" },

전체 화면: 전체 화면,

viewContainerRef: 이.vcRef

};

이.모달.쇼모달(모달 컴포넌트, 옵션).다음((res: 문자열) => {

이.프로필.사진 = res || "~/kitten1.jpg";

});

}

public 저장() {

이.데이터베이스.createDocument(이.프로필);

이.위치.뒤로();

}

다음을 제외하고 NgZone에서 이전 페이지에서와 동일하게 Couchbase를 변경했습니다. 이제 NgZone 가 곧 출시됩니다.

이 시점에서 데이터 동기화를 준비하기 위해 동기화 게이트웨이 구성을 진행할 수 있습니다.

동기화 게이트웨이 복제 구성 구축하기

이미 다운로드하셨을 것입니다. 카우치베이스 동기화 게이트웨이 를 설치했을 것입니다. 설치가 완료되면 프로젝트에 대한 구성 파일을 만들어야 합니다. 다음은 매우 간단한 구성의 예입니다:

{
    "log":["CRUD+", "REST+", "Changes+", "Attach+"],
    "databases": {
        "example": {
            "server":"walrus:",
            "sync":`
                function (doc) {
                    channel (doc.channels);
                }
            `,
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    }
}

{

"log":["CRUD+", "REST+", "변경 사항+", "Attach+"],

"데이터베이스": {

"예제": {

"서버":"월러스:",

"동기화":`

함수 (doc) {

채널 (doc.채널);

}

"users": {

"GUEST": {

"disabled": false,

"admin_channels": ["*"]

}

위의 구성은 다음과 같은 파일에 저장할 수 있습니다. 동기화 게이트웨이-config.json 또는 이와 유사한 이름을 사용합니다. 기본적으로 다음과 같은 인메모리 스토리지를 사용합니다. 월러스: 데이터베이스 이름을 예제. 이 예에서는 읽기 또는 쓰기 권한이 없습니다. 모든 데이터는 모든 플랫폼과 장치에 동기화됩니다.

동기화 게이트웨이를 Couchbase Server에 연결하는 것은 다음과 같이 간단하게 변경할 수 있습니다. 월러스: 를 카우치베이스 서버 인스턴스의 호스트에 추가합니다.

명령줄에서 동기화 게이트웨이를 실행하려면 다음을 실행합니다:

/path/to/sync_gateway /path/to/sync-gateway-config.json

1	/경로/에/동기화 게이트웨이 /경로/에/동기화-게이트웨이-구성.json

http://localhost:4985/_admin/ 에서 액세스할 수 있는 대시보드가 시작됩니다. 애플리케이션 수준에서는 포트 4984를 사용합니다.

카우치베이스 및 네이티브스크립트용 동기화 로직 포함

애플리케이션에서 데이터 복제를 위한 모든 준비가 완료되었습니다. 데이터 복제를 통해 필요에 따라 변경 리스너를 사용하여 UI를 업데이트할 수 있습니다.

프로젝트의 앱/컴포넌트/프로필 목록/프로필 목록.ts 에 다음을 포함시켜야 합니다. ngOnInit 메서드를 사용합니다:

public ngOnInit() {
    this.location.subscribe(() =&gt; {
        this.refresh();
    });
    this.couchbase.startSync("http://192.168.57.1:4984/example", true);
    this.database.addDatabaseChangeListener((changes) =&gt; {
        for (let i = 0; i &lt; changes.length; i++) { let document = this.database.getDocument(changes[i].getDocumentId()); this.zone.run(() =&gt; {
                this.profiles.push(document);
            });
        }
    });
    this.refresh();
}

public ngOnInit() {

이.위치.구독(() => {

이.새로 고침();

});

이.카우치베이스.시작 동기화("http://192.168.57.1:4984/example", true);

이.데이터베이스.데이터베이스 변경 리스너 추가((변경 사항) => {

에 대한 (let i = 0; i < 변경 사항.길이; i++) { let 문서 = 이.데이터베이스.getDocument(변경 사항[i].getDocumentId()); 이.영역.실행(() => {

이.프로필.push(문서);

});

}

});

이.새로 고침();

}

언제 ngOnInit 트리거가 발생하면 로컬에서 실행 중인 동기화 게이트웨이와 동기화를 시작합니다. 호스트 이름은 원하는 대로 자유롭게 설정하세요. 동기화를 시작한 후에는 변경 리스너를 설정하여 변경 사항을 우리의 프로필 배열이 필요합니다. 리스너이기 때문에, 우리는 NgZone 그렇지 않으면 UI에 반영되지 않습니다.

위는 모든 변경 사항을 추가한 간단한 예일 뿐입니다. 실제로는 데이터가 변경되었는지, 생성되었는지, 삭제되었는지 확인해야 합니다. 모든 시나리오는 데이터베이스 변경 리스너 추가.

애플리케이션이 중지되면 동기화를 우아하게 중지하려고 합니다. 애플리케이션의 ngOnDestroy 메서드에 다음을 포함하세요:

public ngOnDestroy() {
    this.couchbase.stopSync();
}

public ngOnDestroy() {

이.카우치베이스.stopSync();

}

위의 Angular 메서드가 호출되면 Couchbase 동기화 게이트웨이로의 복제가 중지됩니다.

결론

이 튜토리얼에서는 네이티브스크립트 앵귤러 모바일 애플리케이션에 동기화 지원을 추가하는 방법을 살펴봤습니다. 튜토리얼 시리즈 3부 중 3부입니다. 이전에는 다음을 수행하는 방법을 살펴봤습니다. 데이터 저장 및 로드를 위한 기본 카우치베이스 작업 뿐만 아니라 문서 쿼리. 다음과 같은 프레임워크를 사용하는 모바일 애플리케이션 개발의 데이터 네이티브 스크립트 와 Angular를 쉽게 사용할 수 있습니다. JavaScript 객체와 JSON 데이터를 NoSQL 데이터베이스에 저장하고 동기화할 수 있다는 것은 개발자의 부담을 크게 덜어줍니다.

Nic Raboy, 개발자 옹호자, Couchbase

댓글 하나

fhackenb 3월 28, 2018에서 9:32 오전

이 튜토리얼 시리즈에 감사드립니다. 정말 깔끔합니다. 안드로이드와 iOS 기기 사이에서 작동하도록 할 수 있었고 매우 매끄럽게 작동했습니다. 이 예제에서는 기본적으로 네트워크의 다른 디바이스가 동기화할 수 있는 중개자 역할을 하는 Mac의 동기화 게이트웨이를 사용했습니다.

동일한 네트워크에 여러 디바이스가 있는 모바일 애플리케이션에 이 동기화 기능을 사용하고 싶고 오프라인 모드에서 작동하도록 하고 싶기 때문에 여러 네트워크에 대해 별도의 기능이 있어야 할 것입니다. 네트워크의 컴퓨터에서 동기화 게이트웨이를 설정할 필요 없이 네트워크의 모바일 장치 간에만 동기화 게이트웨이를 설정할 수 있는 방법이 있나요? 아니면 모든 네트워크에 제가 제공하는 동기화 게이트웨이 구성 파일을 사용하여 자체 동기화 게이트웨이를 설치하고 설정해야 하나요?

로그인 하여 답글 남기기
1. Nic Raboy, 개발자 옹호자, Couchbase 3월 28, 2018에서 10:18 오전
  
  기본 Android 및 iOS API에는 P2P 지원이 있지만 NativeScript 플러그인에는 추가되지 않았습니다.
  
  Couchbase Lite 2.0이 곧 출시될 예정이니 많은 변화가 있을 것입니다. 가능하다면 그 내용을 읽어보시고 조금만 기다려주세요.
  
  로그인 하여 답글 남기기
fhackenb 4월 2, 2018에서 7:14 오전

빠른 답변 감사합니다, Nic. 이 새로운 P2P 기능 중 궁극적으로 NativeScript 플러그인에 포함될 수 있는 기능이 있는지 알고 있나요?

로그인 하여 답글 남기기
aesquivel24 5월 24, 2018에서 11:24 오후

안녕하세요 닉, 질문이 있습니다. 제가 구축중인 프로젝트에서 네이티브 스크립트가있는 카우치베이스 라이트를 사용하여 문서를 저장하려고하는데 어떻게 든 내 논리가 작동하지 않습니다. 제 코드를 살펴보고 제가 뭔가 잘못하고 있는지 알려주실 수 있는지 궁금합니다. 제 코드에 대한 링크입니다: https://i.gyazo.com/99914e2c1c54b37ea7486ff050bc6dd0.png미리 감사드립니다.

로그인 하여 답글 남기기

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

모든 게시물

네이티브스크립트 및 Angular를 사용하여 모바일 플랫폼과 디바이스 간에 Couchbase 문서 동기화하기

요구 사항

중단한 부분부터 다시 시작하기

Couchbase용 Angular 서비스 만들기

네이티브스크립트 애플리케이션 페이지 업그레이드

동기화 게이트웨이 복제 구성 구축하기

카우치베이스 및 네이티브스크립트용 동기화 로직 포함

결론

작성자

게시자 Nic Raboy, 개발자 옹호자, Couchbase

댓글 하나

댓글 남기기 응답 취소