Syncing with Couchbase in an Ionic 2 App using PouchDB

얼마 전에는 Ionic 2 애플리케이션의 Couchbase. 이전 예제에서는 데이터를 저장하고 Couchbase 동기화 게이트웨이로 작업하기 위해 Couchbase Lite 및 RESTful API를 사용하는 방법을 살펴봤습니다. 이것이 선호되는 접근 방식이긴 하지만 유일한 접근 방식은 아닙니다.

라는 훌륭한 자바스크립트 라이브러리가 있습니다. PouchDB 에 실제로 연결할 수 있는 Couchbase 동기화 게이트웨이를 추가하여 Couchbase Lite를 제거했습니다. 즉, PouchDB를 Ionic 2와 함께 사용하여 Couchbase Server와 생성된 모든 애플리케이션 간에 데이터를 동기화할 수 있습니다.

그렇다면 이를 어떻게 실현할 수 있을까요?

요구 사항

이전 튜토리얼을 보셨다면 여기서의 요구 사항도 다르지 않을 것입니다. 요구 사항은 다음과 같습니다:

Node.js 4.0+
아이오닉 프레임워크 2.0
카우치베이스 동기화 게이트웨이
Android용 Android SDK 및 iOS용 Xcode

Ionic 프레임워크 2.0 CLI는 애플리케이션을 만들고 빌드하는 데 사용됩니다. Node.js와 함께 제공되는 Node 패키지 관리자(NPM)를 사용하여 모든 종속성을 다운로드합니다. 이 예제에서는 Couchbase Server와 동기화하지 않지만 Couchbase 동기화 게이트웨이를 계속 사용합니다. 여기서는 동기화 게이트웨이의 인메모리 옵션을 사용하여 프로토타이핑을 할 계획입니다. 이 후에는 Couchbase Server를 포함하는 것이 어렵지 않습니다.

Couchbase 동기화 게이트웨이 준비하기

Couchbase 동기화 게이트웨이는 장치, 플랫폼 및 Couchbase Server 간의 모든 데이터 오케스트레이션을 처리합니다. 여기에는 모든 읽기 및 쓰기 권한이 포함됩니다. 따라서 애플리케이션의 요구 사항에 따라 자체 구성이 필요합니다.

다음 구성을 예로 들어 보겠습니다:

{
    "log":["CRUD+", "REST+", "Changes+", "Attach+"],
    "databases": {
        "example": {
            "server":"walrus:",
            "sync":`
                function (doc) {
                    channel (doc.channels);
                }
            `,
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    },
    "CORS": {
        "Origin": ["http://localhost:8100"],
        "LoginOrigin": ["http://localhost:8100"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

{

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

"데이터베이스": {

"예제": {

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

"동기화":`

함수 (doc) {

채널 (doc.채널);

}

"users": {

"GUEST": {

"disabled": false,

"admin_channels": ["*"]

}

"CORS": {

"Origin": ["http://localhost:8100"],

"LoginOrigin": ["http://localhost:8100"],

"헤더": ["콘텐츠 유형"],

"MaxAge": 17280000

}

위의 구성은 다음과 같은 데이터베이스를 만듭니다. 예제 데이터 채널링에 대한 규칙이 없습니다. 즉, 모든 디바이스에서 읽고 쓸 수 있습니다. 사용자의 요구 사항은 다를 수 있습니다.

구성의 맨 아래에는 CORS(교차 출처 리소스 공유)에 관한 정보가 있습니다. 다음과 같은 기능을 사용할 계획이 아니라면 하단 비트는 필요하지 않습니다. 이온 서브. 동일한 호스트에서 동기화 게이트웨이에 액세스하려고 하지만 포트가 다르면 자바스크립트 오류가 발생합니다. CORS를 추가하면 이를 방지할 수 있습니다. 다시 말하지만, 이는 웹 브라우저에서 애플리케이션을 제공하려는 경우에만 해당됩니다. 디바이스에서 애플리케이션을 실행하면 아무런 문제가 없습니다.

PouchDB 애플리케이션으로 Ionic 프레임워크 만들기

우리가 만드는 애플리케이션은 이전에 Couchbase Lite 및 Ionic 2로 만든 애플리케이션과 일치할 것입니다. 우리는 장치 간에 항목을 동기화하는 간단한 할 일 목록 애플리케이션을 만들 것입니다.

이 프로젝트는 한 페이지짜리 애플리케이션이지만 필요한 모든 Ionic 2 및 Angular 2 모범 사례를 다룹니다. 이 프로젝트를 만들려면 명령 프롬프트(Windows) 또는 터미널(Mac 및 Linux)에서 다음을 실행합니다:

ionic start PouchDBProject blank --v2
cd PouchDBProject
ionic platform add ios
ionic platform add android

이온 시작 파우치DB프로젝트 빈 --v2

cd 파우치DB프로젝트

이온 플랫폼 추가 ios

이온 플랫폼 추가 안드로이드

위의 명령은 Angular 2와 TypeScript를 사용하는 새로운 Ionic 2 프로젝트를 생성합니다. Android 및 iOS 빌드 플랫폼을 모두 추가했지만 Xcode가 설치된 Mac을 사용하지 않는 한 iOS용 빌드를 할 수 없습니다.

이 프로젝트는 PouchDB를 프로젝트에 설치해야 합니다. 다음 명령을 실행하여 설치할 수 있습니다:

npm install pouchdb --save

1	npm 설치 파우치DB --저장

PouchDB는 JavaScript 프로젝트이며 TypeScript를 제대로 지원하지 않습니다. 유형 정의 누락이라는 장애물을 피할 수 있으므로 문제가 되지 않습니다. 하지만 플러그인을 로드할 다른 라이브러리에 대한 타입 정의를 가져와야 합니다.

명령줄에서 다음을 실행합니다:

npm install @type/node --save

1	npm 설치 @유형/노드 --저장

Node.js 유형 정의를 설치하면 다음을 사용할 수 있습니다. require 키워드는 자바스크립트 종속성을 가져올 때 필수적인 키워드입니다.

프로젝트에 자바스크립트 종속성이 하나 더 있지만 이번에는 존재하지 않는 유형 정의에 대해 걱정할 필요가 없습니다. 문서 키를 나타내는 고유 ID 값을 생성하기 위한 라이브러리를 설치해야 합니다. 이 라이브러리는 다음 명령을 통해 설치할 수 있습니다:

npm install uuid @type/uuid --save

1	npm 설치 uuid @유형/uuid --저장

위의 명령은 TypeScript에 대한 라이브러리와 해당 유형 정의를 설치합니다.

이제 애플리케이션 개발에 집중할 수 있습니다!

Angular 2 공유 공급자 개발하기

모든 Angular 2 애플리케이션에서는 데이터베이스 관련 활동을 공유 공급자 또는 공유 서비스라고 하는 곳에서 분리하여 유지하는 것이 좋습니다. 이렇게 하면 싱글톤 데이터베이스 인스턴스를 갖고 데이터베이스 코드를 페이지 로직에서 제외할 수 있습니다.

Ionic 2에서 공급자를 생성하려면 다음 명령을 실행합니다:

ionic g provider pouchdb-provider

1	이온 g 공급자 파우치DB-공급자

위의 명령은 다음 위치에 파일을 생성합니다. src/providers/pouchdb-provider.ts 로 작업할 수 있습니다. 이 새 파일을 열고 다음 코드를 포함하세요:

import { Injectable, EventEmitter } from '@angular/core';
var PouchDB = require("pouchdb");

@Injectable()
export class PouchDBProvider {

    private isInstantiated: boolean;
    private database: any;
    private listener: EventEmitter = new EventEmitter();

    public constructor() { }

    public fetch() { }

    public get(id: string) { }

    public put(document: any, id: string) { }

    public sync(remote: string) { }

    public getChangeListener() { }

}

가져오기 { 주사제, 이벤트 이미터 } 에서 '@angular/core';

var PouchDB = require("pouchdb");

@주사제()

내보내기 클래스 PouchDBProvider {

비공개 isInstantiated: 부울;

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

비공개 리스너: 이벤트 이미터 = new 이벤트 이미터();

public 생성자() { }

public fetch() { }

public get(id: 문자열) { }

public put(문서: any, id: 문자열) { }

public 동기화(원격: 문자열) { }

public getChangeListener() { }

}

각 메서드를 채우기 시작하기 전에 지금까지의 내용을 분석해 보겠습니다.

이 공급자는 우리가 사용하려는 각 페이지에 삽입할 수 있습니다. PouchDB를 사용하면 변경 사항을 동기화할 수 있으므로 해당 변경 사항을 내보내고 구독할 수 있으므로 이벤트이미터 가져오기. PouchDB 라이브러리는 표준 JavaScript처럼 가져옵니다.

우리는 하나의 데이터베이스 인스턴스만 열어두고 싶으며, 이를 위해 isInstantiated 변수를 설정합니다. 이 작업은 생성자 메서드를 사용합니다:

public constructor() {
    if(!this.isInstantiated) {
        this.database = new PouchDB("nraboy");
        this.isInstantiated = true;
    }
}

public 생성자() {

만약(!이.isInstantiated) {

이.데이터베이스 = new PouchDB("nraboy");

이.isInstantiated = true;

}

오픈 데이터베이스를 통해 데이터로 작업할 수 있기를 원합니다. PouchDB에는 데이터 작업을 위한 자체 API가 있지만, 바닐라 자바스크립트이기 때문에 제공업체에서 몇 가지 사항을 개선하여 Angular 2에 더 친화적으로 만들어야 합니다.

public fetch() {
    return this.database.allDocs({include_docs: true});
}

public fetch() {

반환 이.데이터베이스.모든 문서({include_docs: true});

}

모든 데이터 가져오기는 다음을 사용하여 수행할 수 있습니다. 모든 문서 메서드를 호출합니다. 메서드에 include_docs 속성을 사용하면 ID 값만 아니라 문서 데이터도 포함됩니다.

public get(id: string) {
    return this.database.get(id);
}

public get(id: 문자열) {

반환 이.데이터베이스.get(id);

}

찾고자 하는 문서의 ID를 알고 있다면 모든 문서를 쿼리하지 않고 바로 조회할 수 있습니다. 문서를 저장할 때 조금 혼란스러울 수 있습니다:

public put(document: any, id: string) {
    document._id = id;
    return this.get(id).then(result =&gt; {
        document._rev = result._rev;
        return this.database.put(document);
    }, error =&gt; {
        if(error.status == "404") {
            return this.database.put(document);
        } else {
            return new Promise((resolve, reject) =&gt; {
                reject(error);
            });
        }
    });
}

public put(문서: any, id: 문자열) {

문서._id = id;

반환 이.get(id).다음(결과 => {

문서._rev = 결과._rev;

반환 이.데이터베이스.put(문서);

}, 오류 => {

만약(오류.상태 == "404") {

반환 이.데이터베이스.put(문서);

} else {

반환 new 약속((해결, 거부) => {

거부(오류);

});

}

});

}

위의 예에서 put 메서드를 사용하여 문서를 만들거나 업데이트하는 방법이 있습니다. 수정본이 없는 문서는 생성되고, 수정본이 있는 문서는 업데이트됩니다. 먼저 문서의 ID로 문서를 조회하면 됩니다. 문서가 존재하면 리비전을 사용하여 업데이트하고, 그렇지 않으면 문서를 만듭니다.

public sync(remote: string) {
    let remoteDatabase = new PouchDB(remote);
    this.database.sync(remoteDatabase, {
        live: true
    }).on('change', change =&gt; {
        this.listener.emit(change);
    }).on('error', error =&gt; {
        console.error(JSON.stringify(error));
    });
}

public 동기화(원격: 문자열) {

let 원격 데이터베이스 = new PouchDB(원격);

이.데이터베이스.동기화(원격 데이터베이스, {

라이브: true

}).on('change', 변경 => {

이.리스너.emit(변경);

}).on('error', 오류 => {

콘솔.오류(JSON.문자열화(오류));

});

}

동기화가 없으면 기술적으로 스택에서 Couchbase를 사용하는 것이 아닙니다. 또한 로컬 데이터베이스만 찾는다면 PouchDB보다 훨씬 더 나은 데이터 솔루션이 있습니다. 즉, 위의 동기화 함수를 사용하면 원격 데이터베이스에 연결할 수 있습니다. 원격 데이터베이스는 실제로 실행 중인 동기화 게이트웨이 인스턴스입니다. 동기화 게이트웨이와 양방향 동기화를 선택하고 변경 사항을 동기화 게이트웨이의 이벤트 이미터 에서

public getChangeListener() {
    return this.listener;
}

public getChangeListener() {

반환 이.리스너;

}

이러한 변경 사항을 구독하려면 먼저 해당 변경 사항을 내보내는 리스너의 사본을 확보해야 합니다.

이 시점에서 Angular 2 공급자는 완성되었지만 사용할 준비가 되지 않았습니다. 프로젝트의 @NgModule 블록에 있는 src/app/app.module.ts 파일을 만듭니다. 파일은 다음과 같은 모양입니다:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PouchDBProvider } from "../providers/pouchdb-provider";

@NgModule({
    declarations: [
        MyApp,
        HomePage
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, PouchDBProvider]
})
export class AppModule {}

가져오기 { NgModule, 오류 처리기 } 에서 '@angular/core';

가져오기 { IonicApp, 이온 모듈, 이온 오류 처리기 } 에서 '이온-각형';

가져오기 { MyApp } 에서 './app.component';

가져오기 { 홈 페이지 } 에서 '../pages/home/home';

가져오기 { PouchDBProvider } 에서 "../providers/pouchdb-provider";

@NgModule({

선언: [

MyApp,

홈 페이지

수입: [

이온 모듈.forRoot(MyApp)

부트스트랩: [IonicApp],

항목 구성 요소: [

MyApp,

홈 페이지

공급자: [{제공: 오류 처리기, 사용 클래스: 이온 오류 처리기}, PouchDBProvider]

})

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

공급자를 가져온 후 어떻게 공급자 배열을 추가했습니다. 이제 애플리케이션의 각 페이지에서 사용할 수 있습니다.

저장 및 동기화를 위한 PouchDB 로직 추가하기

나머지 애플리케이션은 이제 기반을 마련했으므로 실제로 매우 간단합니다. 데이터 계층. 이 애플리케이션은 매우 간단하지만 데이터 기반이 많다는 점을 기억하세요.

프로젝트의 src/pages/home/home.ts 파일을 열고 다음 코드를 포함하세요:

import { Component, NgZone } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { PouchDBProvider } from "../../providers/pouchdb-provider";
import * as Uuid from "uuid";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    public items: Array;

    public constructor(public navCtrl: NavController, public alertCtrl: AlertController, private database: PouchDBProvider, private zone: NgZone) {
        this.items = [];
    }

    public ionViewDidEnter() { }

    public insert() { }

}

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

가져오기 { NavController, AlertController } 에서 '이온-각형';

가져오기 { PouchDBProvider } 에서 "../../providers/pouchdb-provider";

가져오기 * as Uuid 에서 "uuid";

@구성 요소({

선택기: '페이지-홈',

templateUl: 'home.html'

})

내보내기 클래스 홈 페이지 {

public 항목: 배열;

public 생성자(public navCtrl: NavController, public alertCtrl: AlertController, 비공개 데이터베이스: PouchDBProvider, 비공개 영역: NgZone) {

이.항목 = [];

}

public ionViewDidEnter() { }

public 삽입() { }

}

위 코드에서는 다양한 Ionic 및 Angular 2 컴포넌트와 PouchDB 공급자 및 UUID 라이브러리를 가져오고 있습니다. 이러한 컴포넌트 중 상당수는 생성자 메서드를 사용합니다. The 생성자 메서드는 UI에 바인딩될 공용 배열도 초기화합니다. 이 배열에는 PouchDB와 동기화할 데이터가 포함됩니다.

에서 변수를 초기화할 수 있지만 생성자 메서드에서 데이터를 로드하는 것은 결코 좋은 생각이 아닙니다. 생성자 메서드를 사용해야 합니다. 대신 Ionic ionViewDidEnter 메서드를 사용합니다:

public ionViewDidEnter() {
    this.database.sync("http://192.168.57.1:4984/example");
    this.database.getChangeListener().subscribe(data =&gt; {
        for(let i = 0; i &lt; data.change.docs.length; i++) { this.zone.run(() =&gt; {
                this.items.push(data.change.docs[i]);
            });
        }
    });
    this.database.fetch().then(result =&gt; {
        this.items = [];
        for(let i = 0; i &lt; result.rows.length; i++) { this.items.push(result.rows[i].doc); } }, error =&gt; {
        console.error(error);
    });
}

public ionViewDidEnter() {

이.데이터베이스.동기화("http://192.168.57.1:4984/example");

이.데이터베이스.getChangeListener().구독(데이터 => {

에 대한(let i = 0; i < 데이터.변경.문서.길이; i++) { 이.영역.실행(() => {

이.항목.push(데이터.변경.문서[i]);

});

}

});

이.데이터베이스.fetch().다음(결과 => {

이.항목 = [];

에 대한(let i = 0; i < 결과.행.길이; i++) { 이.항목.push(결과.행[i].doc); } }, 오류 => {

콘솔.오류(오류);

});

}

위의 예에서 ionViewDidEnter 메서드를 사용하여 PouchDB 및 Couchbase 동기화 게이트웨이와의 양방향 동기화를 시작합니다. 호스트 이름은 현재 실행 중인 Couchbase 동기화 게이트웨이 인스턴스의 호스트 이름입니다. 데이터베이스는 내 로컬 데이터베이스와 일치할 필요는 없습니다.

동기화할 때 변경 리스너도 구독할 것입니다. 이것은 간단한 애플리케이션이므로 데이터 변경이나 삭제는 걱정하지 않고 데이터만 추가할 것입니다. 리스너는 앵귤러 2에서 UI와 데이터 사이의 연결이 끊어질 때 약간 불안정할 수 있습니다. 이 연결 단절은 리스너 데이터를 zone.run 메서드를 사용합니다.

애플리케이션이 변경 사항을 구독하는 경우 애플리케이션이 열릴 때 데이터를 처음 쿼리해야 합니다. 우리는 fetch 모든 데이터를 가져와서 공용 배열에 추가합니다.

마지막 방법은 삽입 메서드를 사용하며 대부분 이온으로 구동됩니다:

public insert() {
    let prompt = this.alertCtrl.create({
        title: 'Todo Items',
        message: "Add a new item to the todo list",
        inputs: [
            {
                name: 'title',
                placeholder: 'Title'
            },
        ],
        buttons: [
            {
                text: 'Cancel',
                handler: data =&gt; {}
            },
            {
                text: 'Save',
                handler: data =&gt; {
                    this.database.put({type: "list", title: data.title}, Uuid.v4());
                }
            }
        ]
    });
    prompt.present();
}

public 삽입() {

let 프롬프트 = 이.alertCtrl.create({

title: '할 일 항목',

메시지: "할 일 목록에 새 항목 추가",

입력: [

{

이름: 'title',

플레이스홀더: 'Title'

버튼: [

{

텍스트: '취소',

핸들러: 데이터 => {}

{

텍스트: '저장',

핸들러: 데이터 => {

이.데이터베이스.put({유형: "목록", title: 데이터.title}, Uuid.v4());

}

]

});

프롬프트.현재();

}

여기에서 프롬프트 팝업을 만듭니다. 저장 버튼을 누르면 양식의 텍스트가 PouchDB로 저장됩니다. 문서의 ID는 UUID 라이브러리를 사용하여 고유하게 생성됩니다.

그렇다면 UI는 어떤 모습일까요?

HTML로 간단한 UI 만들기

애플리케이션이 매우 단순하기 때문에 UI는 쉬운 부분입니다. 프로젝트의 src/pages/home/home.html 파일을 열고 다음 HTML 마크업을 포함합니다:

&lt;ion-header&gt;
    &lt;ion-navbar&gt;
        &lt;ion-title&gt;
            PouchDB w/ Ionic 2
        &lt;/ion-title&gt;
        &lt;ion-buttons end&gt;
            &lt;button ion-button icon-only (click)="insert()"&gt;
                &lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;
            &lt;/button&gt;
        &lt;/ion-buttons&gt;
    &lt;/ion-navbar&gt;
&lt;/ion-header&gt;

&lt;ion-content padding&gt;
    &lt;ion-list&gt;
        &lt;ion-item *ngFor="let item of items"&gt;
            {{ item.title }}
        &lt;/ion-item&gt;
    &lt;/ion-list&gt;
&lt;/ion-content&gt;

<ion-헤더>

<ion-navbar>

<ion-title>

PouchDB w/ Ionic 2

</ion-title>

<ion-버튼 끝>

<버튼 ion-버튼 아이콘-만 (클릭)="insert()">

<ion-아이콘 이름="추가"></ion-아이콘>

</버튼>

</ion-버튼>

</ion-navbar>

</ion-헤더>

<ion-콘텐츠 패딩>

<ion-목록>

<ion-항목 *ngFor="항목의 항목">

</ion-항목>

</ion-목록>

</ion-콘텐츠>

UI에는 버튼이 있는 작업 표시줄이 있으며, 이 버튼을 누르면 삽입 메서드에서 찾을 수 있습니다. UI의 핵심 콘텐츠는 공용 배열을 통해 각 항목을 화면에 출력하는 목록을 반복하는 것입니다.

프로젝트 테스트 실행

우리는 많은 개념과 많은 코드를 검토했습니다. 삶을 더 쉽게 만들기 위해 작업 중인 프로젝트를 업로드했습니다. 를 다운로드하여 직접 테스트해 볼 수 있습니다.

프로젝트를 다운로드한 후 다음 명령을 실행하여 종속성, 플러그인 및 플랫폼을 복원합니다:

npm install
ionic state restore

1 2	npm 설치 이온 상태 복원

업데이트하는 것을 잊지 않는 한 동기화 메서드에 있는 src/pages/home/home.ts 파일을 동기화 게이트웨이 호스트와 동기화하면 프로젝트를 실행할 수 있어야 합니다.

결론

방금 Ionic 2, PouchDB 및 Couchbase를 사용하여 동기화되는 Android 및 iOS 애플리케이션을 만드는 방법을 살펴보았습니다. 이것은 이전 가이드 Couchbase Lite를 사용하여 작성했습니다.

Nic Raboy, 개발자 옹호자, Couchbase

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

모든 게시물

PouchDB를 사용하여 Ionic 2 앱에서 Couchbase와 동기화하기