Using Couchbase Mobile in a Web Application with only Angular 2 and PouchDB

작년에 저는 다음과 같은 방법을 설명하는 글을 썼습니다. AngularJS와 PouchDB만으로 플랫폼과 카우치베이스 간 동기화 가능. 그 당시 AngularJS는 호황을 누리고 있었고 아마도 제가 가장 좋아하는 프레임워크였을 것입니다. 1년이 지난 지금도 AngularJS는 여전히 사용되고 있지만, 인기 있는 프레임워크의 다음 버전인 Angular 2로 서서히 대체되고 있습니다. Angular 2를 사용한 후 AngularJS 1.0을 되돌아보면 Angular 2는 정말 대단하기 때문에 제 머릿속에서 무슨 일이 벌어지고 있는지 궁금합니다.

이번에는 Angular 2, PouchDB 및 Couchbase Mobile만을 사용하여 동기화되는 간단한 웹 애플리케이션을 만드는 방법을 살펴보겠습니다.

요구 사항

이 프로젝트를 성공적으로 수행하기 위한 몇 가지 요건은 다음과 같습니다:

Node.js 4.0+
Angular 2 CLI
타이핑
카우치베이스 동기화 게이트웨이

Angular 2 CLI는 Node.js에 포함된 Node 패키지 관리자(NPM)를 사용하여 설치할 수 있습니다. NPM은 다양한 프로젝트 종속성을 수집할 때도 사용됩니다. 이 예제에서는 Couchbase Server를 사용하지 않겠지만, 사용할 수도 있습니다. 대신 Couchbase 동기화 게이트웨이와 프로토타이핑 기능만 사용하겠습니다.

카우치베이스 동기화 게이트웨이 구성하기

모든 동기화를 처리하려면 Couchbase 동기화 게이트웨이가 필요합니다. 이 기능이 없으면 웹 애플리케이션에 로컬 저장소만 있고, 솔직히 말해서 로컬 저장소만 원한다면 PouchDB보다 훨씬 더 나은 솔루션이 있습니다.

다운로드 최신 동기화 게이트웨이를 다운로드하고 다음 구성으로 배포하세요:

{
    "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:4200"],
        "LoginOrigin": ["http://localhost:4200"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

{

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

"데이터베이스": {

"예제": {

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

"동기화":`

함수 (doc) {

채널 (doc.채널);

}

"users": {

"GUEST": {

"disabled": false,

"admin_channels": ["*"]

}

"CORS": {

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

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

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

"MaxAge": 17280000

}

라는 파일에 저장합니다. 동기화 게이트웨이-config.json 를 사용할 수 있습니다. 이것은 매우 기본적인 구성으로, 여기서는 인메모리 데이터베이스 호출 예제. 읽기 및 쓰기 권한이 없으므로 무엇이든 가능합니다. 이 구성의 맨 아래에는 CORS(교차 출처 리소스 공유)와 관련된 몇 가지 항목이 있습니다. 애플리케이션을 로컬에서 서비스할 것이므로 JavaScript 오류를 방지하기 위해 이를 식별해야 합니다.

새 Angular 2 프로젝트 만들기

이해하기 쉽도록 매우 단순한 디자인의 프로젝트를 만들어 보겠습니다. 간단한 사용자 관리 애플리케이션을 만들어 사람들을 추가하고 원하는 곳으로 동기화할 수 있도록 하겠습니다. 예를 들어 아래 애니메이션을 확인하세요:

위의 애니메이션에는 두 개의 웹 브라우저가 있습니다. 한 쪽에 사람을 추가하면 다른 쪽과 동기화됩니다. 이것은 Couchbase가 없었다면 특히 어려웠을 기능입니다.

먼저 Angular CLI를 사용하여 새 Angular 2 프로젝트를 생성해 보겠습니다. 명령 프롬프트(Windows) 또는 터미널(Mac 및 Linux)에서 다음을 실행합니다:

ng new PouchDBProject

1	ng new 파우치DB프로젝트

시간이 좀 걸릴 수 있지만 프로젝트가 생성되면 PouchDB와 필요한 종속 요소를 설치하려고 합니다. 다음을 실행하여 최신 PouchDB를 설치합니다:

npm install pouchdb --save

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

PouchDB의 유지 관리자는 Angular 2 개발에서 중요한 기술인 TypeScript에 대해 여러 가지 감정을 가지고 있습니다. 이러한 이유로 신뢰할 수 있는 타입 정의가 없습니다. 하지만 이것은 큰 문제가 아닙니다.

타이핑을 사용하여 다음을 설치하겠습니다:

typings install dt~require --save --global

1	타이핑 설치 dt~require --저장 --글로벌

위의 유형 정의를 통해 우리는 require 키워드를 추가합니다. 이를 통해 다운로드한 PouchDB를 프로젝트에 가져올 수 있습니다.

이제 프로젝트 개발을 시작할 수 있습니다!

데이터 유지를 위한 Angular 2 공급자 개발하기

데이터로 작업할 때는 항상 프로바이더라고도 하는 Angular 2 서비스를 생성하는 것이 좋습니다. 이렇게 하면 싱글톤 인스턴스와 나머지 코드와 분리된 클래스를 가질 수 있습니다. 이는 유지보수성 측면에서 매우 좋습니다.

공급자는 수동으로 만들거나 CLI를 사용하여 만들 수 있습니다. CLI에서 다음을 실행합니다:

ng g service pouchdb

1	ng g 서비스 파우치DB

프로젝트에 두 개의 파일을 만들어야 합니다. src/app 디렉토리에 있습니다. 디렉터리가 있어야 합니다. pouchdb.service.ts 및 pouchdb.service.spec.ts 파일에 저장합니다. 이름이 비슷할 수도 있지만 이름은 크게 중요하지 않습니다.

그리고 사양 파일은 단위 테스트 파일로, 이 예제에서는 걱정하지 않겠습니다. 대신에 이 예제에서는 pouchdb.service.ts 파일을 만듭니다.

파일을 열고 다음 TypeScript 코드를 포함합니다:

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

@Injectable()
export class PouchDBService {

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

    public constructor() { }

    public fetch() { }

    public get(id: string) { }

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

    public sync(remote: string) { }

    public getChangeListener() { }

}

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

var PouchDB = require("pouchdb");

@주사제()

내보내기 클래스 PouchDBService {

비공개 isInstantiated: 부울;

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

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

public 생성자() { }

public fetch() { }

public get(id: 문자열) { }

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

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

public getChangeListener() { }

}

각 메서드를 채우기 전에 우리가 무엇을 하려는지 알아봅시다. 애플리케이션이 실행되는 동안에는 하나의 데이터베이스 인스턴스만 필요합니다. 이 작업은 생성자 메서드를 사용합니다:

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

public 생성자() {

만약(!이.isInstantiated) {

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

이.isInstantiated = true;

}

이 경우 로컬 데이터베이스가 호출됩니다. nraboy. 이제 PouchDB에는 정말 훌륭한 API가 있습니다. 다만 Angular 2에 최적화되지 않았기 때문에 프로젝트에서 바닐라 상태의 PouchDB로 작업할 때 약간의 문제가 발생할 수 있습니다.

모든 로컬 문서를 가져오려는 시나리오에서는 다음과 같은 작업을 수행할 수 있습니다:

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);

}

지금까지는 문서에서 권장하는 대로 PouchDB API를 사용했습니다. 조금 바꿔보는 것은 어떨까요? API는 문서를 생성하거나 업데이트하는 방법을 제공하지만 이를 하나의 방법으로 결합해 보겠습니다:

public put(id: string, document: any) {
    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(id: 문자열, 문서: any) {

문서._id = id;

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

문서._rev = 결과._rev;

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

}, 오류 => {

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

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

} else {

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

거부(오류);

});

}

});

}

위 put 메서드는 문서 ID를 기준으로 문서가 존재하는지 확인합니다. 문서가 있으면 수정본을 새 데이터에 복사하고 다시 저장합니다. 문서가 존재하지 않으면 리비전 없이 문서를 만듭니다.

여러분은 아마도 이벤트 이미터 를 클릭하세요. 이는 Angular 2 페이지에서 변경 이벤트를 구독하는 데 필요합니다. 다음을 수행합니다. 동기화 메서드를 예로 들 수 있습니다:

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

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

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

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

라이브: true

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

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

});

}

여기서는 원격 데이터 소스를 정의하고, Couchbase 동기화 게이트웨이가 될 원격 데이터 소스를 정의하고, 실시간 양방향 동기화를 선택하고, 변경 사항이 발견될 때마다 이를 내보냅니다.

변경 리스너는 모든 페이지에서 다음에 액세스하여 액세스할 수 있습니다:

public getChangeListener() {
    return this.listener;
}

public getChangeListener() {

반환 이.리스너;

}

위에서는 청취자를 구독하는 것으로 끝납니다.

공급자가 생성되었지만 아직 모든 페이지에서 사용할 수 있는 것은 아닙니다. 프로젝트의 @NgModule 에서 찾을 수 있습니다. src/app/app.module.ts 파일을 만듭니다. 이 파일은 다음과 같은 모양입니다:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { PouchDBService } from "./pouchdb.service";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [PouchDBService],
    bootstrap: [AppComponent]
})
export class AppModule { }

가져오기 { 브라우저 모듈 } 에서 '@각/플랫폼-브라우저';

가져오기 { NgModule } 에서 '@angular/core';

가져오기 { 폼 모듈 } 에서 '@각형/양식';

가져오기 { HttpModule } 에서 '@angular/http';

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

가져오기 { PouchDBService } 에서 "./pouchdb.service";

@NgModule({

선언: [

앱 컴포넌트

수입: [

브라우저 모듈,

폼 모듈,

HttpModule

공급자: [PouchDBService],

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

})

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

공급자 클래스를 가져와서 공급자 클래스를 공급자 배열의 @NgModule 블록을 추가합니다. 이제 애플리케이션 전체에서 공급자를 사용할 수 있습니다.

Angular 2 애플리케이션 내에서 데이터베이스 공급자 적용하기

간단하게 설명하기 위해 한 페이지짜리 애플리케이션으로 만들겠습니다. 나머지 시간은 프로젝트의 src/app/app.component.ts 그리고 src/app/app.component.html 파일.

프로젝트의 src/app/app.component.ts 파일을 열고 다음 TypeScript 코드를 포함합니다:

import { Component, OnInit, NgZone } from '@angular/core';
import { PouchDBService } from "./pouchdb.service";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    public people: Array;
    public form: any;

    public constructor(private database: PouchDBService, private zone: NgZone) {
        this.people = [];
        this.form = {
            "username": "",
            "firstname": "",
            "lastname": ""
        }
    }

    public ngOnInit() { }

    public insert() { }

}

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

가져오기 { PouchDBService } 에서 "./pouchdb.service";

@구성 요소({

선택기: 'app-root',

templateUl: './app.component.html',

styleUrls: ['./app.component.css']

})

내보내기 클래스 앱 컴포넌트 구현 OnInit {

public 사람들: 배열;

public 양식: any;

public 생성자(비공개 데이터베이스: PouchDBService, 비공개 영역: NgZone) {

이.사람들 = [];

이.양식 = {

"username": "",

"이름": "",

"성": ""

}

public ngOnInit() { }

public 삽입() { }

}

우리가 가져오는 것을 알 수 있습니다. PouchDBService 다른 몇 가지 사항과 함께요. 차근차근 살펴보도록 하겠습니다.

내부 앱 컴포넌트 라는 공용 배열이 있습니다. 사람들 를 생성하여 UI에 바인딩합니다. 여기에는 저장 및 동기화되는 모든 데이터가 포함됩니다. 그리고 양식 변수는 각 양식 요소를 포함하는 객체를 나타냅니다. 문자열로 분할할 수도 있지만, 결국 전체 객체를 Couchbase에 문서로 저장할 것이므로 객체가 더 편리합니다.

에서 생성자 메서드에 파우치DB 서비스를 주입하고 NgZone. 우리는 NgZone 를 사용하여 이벤트 및 기타 종류의 리스너로 작업할 때 때때로 모양이 휘어지는 각도 2 영역을 새로 고칩니다. 곧 알게 되겠지만 그리 큰 문제는 아닙니다. 마지막으로 생성자 메서드는 두 변수를 초기화합니다.

에 데이터를 로드하는 것은 잘못된 관행입니다. 생성자 메서드를 사용하므로 대신 ngOnInit 메서드를 사용합니다:

public ngOnInit() {
    this.database.sync("http://localhost:4984/example");
    this.database.getChangeListener().subscribe(data =&gt; {
        for(let i = 0; i  {
                this.people.push(data.change.docs[i]);
            });
        }
    });
    this.database.fetch().then(result =&gt; {
        this.people = [];
        for(let i = 0; i  {
        console.error(error);
    });
}

public ngOnInit() {

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

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

에 대한(let i = 0; i {

이.사람들.push(데이터.변경.문서[i]);

});

}

});

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

이.사람들 = [];

에 대한(let i = 0; i {

콘솔.오류(오류);

});

}

대부분의 애플리케이션 잡일 작업은 위에서 이루어집니다. 위 코드에서는 원격 동기화 게이트웨이 호스트와 데이터베이스 이름을 정의하고 있습니다. 로컬 데이터베이스의 이름과 일치할 필요는 없습니다. 그런 다음 리스너를 구독하고 변경 사항이 들어올 때마다 반복합니다. 모든 변경 사항은 공용 배열 내의 NgZone 를 클릭하면 화면에서 새로 고침됩니다.

변경 이벤트가 발생할 때만 트리거되므로 애플리케이션을 처음 초기화할 때 모든 문서를 가져와야 합니다.

이로 인해 삽입 메서드를 사용합니다:

public insert() {
    if(this.form.username &amp;&amp; this.form.firstname &amp;&amp; this.form.lastname) {
        this.database.put(this.form.username, this.form);
        this.form = {
            "username": "",
            "firstname": "",
            "lastname": ""
        }
    }
}

public 삽입() {

만약(이.양식.사용자 이름 && 이.양식.이름 && 이.양식.성) {

이.데이터베이스.put(이.양식.사용자 이름, 이.양식);

이.양식 = {

"username": "",

"이름": "",

"성": ""

}

양식 요소가 비어 있지 않으면 데이터를 데이터베이스에 문서로 저장할 수 있습니다. 저장되면 변경 이벤트가 트리거되고 데이터가 공개 배열에 추가되어 화면에 표시됩니다.

이 모든 것이 웹 애플리케이션과 카우치베이스 동기화 게이트웨이 간에 원활하게 이루어집니다.

시승 체험하기

이 Angular 2 및 PouchDB 가이드에는 많은 내용이 담겨 있습니다. I 작업 중인 프로젝트를 업로드했습니다. 를 직접 사용해보고 싶으시다면 GitHub로 이동하세요.

프로젝트를 다운로드하고 터미널 또는 명령 프롬프트에서 다음을 실행합니다:

npm install

npm 설치

위의 명령은 모든 프로젝트 종속성을 가져옵니다. 프로젝트의 src/app/app.component.ts 파일을 동기화 게이트웨이의 올바른 호스트 이름을 반영하도록 수정하면 정상적으로 작동합니다.

프로젝트를 실행하여 실행할 수 있습니다:

ng serve

ng serve

봉사하는 동안 프로젝트는 http://localhost:4200 에서 액세스할 수 있습니다.

결론

방금 PouchDB를 사용하여 데이터를 동기화하는 간단한 웹 애플리케이션을 구축하는 방법과 카우치베이스. 이것은 한 단계 업그레이드된 Angular 2 애플리케이션입니다. 작년에 쓴 가이드 는 AngularJS 1.0을 사용했습니다.

Nic Raboy, 개발자 옹호자, Couchbase

댓글 하나

드 라 만차 1월 15, 2018에서 5:07 오전

안녕하세요! 튜토리얼에 감사드립니다. 제안 된 명령에 따라 "필요"를 설치하려고하지만 운이 좋지 않습니다. 앵귤러 5를 실행 중입니다.

입력 설치 dt~-require -save -global

"ng serve"에서 다음과 같은 결과가 표시됩니다:

"src/app/services/pouchdb.service.ts(3,17)의 오류: 오류 TS2304: 'require'라는 이름을 찾을 수 없습니다."

아이디어가 있으신가요?

로그인 하여 답글 남기기
1. 토니 베이커 2월 10, 2018에서 7:18 오후
  
  나도 같은 문제가 있습니다! 나는 제거해야 할 오래된 angular-cli를 포함하여 오래된 npm 패키지를 발견하고 @angular / cli로 대체해야했는데, 타이핑을 설치할 때 @types를 사용하기 위해 더 이상 사용되지 않는다는 알림을 받았기 때문에 비슷한 것인지 궁금합니다. 한번 시도해 보겠습니다...
  
  로그인 하여 답글 남기기
jkurtz 4월 22, 2018에서 7:49 오후

이제 PouchDB는 require.js를 사용하지 않고도 TypeScript와 함께 작동합니다. PouchDB 설명서를 참조하세요: https://pouchdb.com/guides/setup-pouchdb.html#typescript

단계:
1. PoutchDB 설치
> npm 설치 pouchdb -save
2. PouchDB 유형 설치
> npm 설치 pouchdb @types/pouchdb
3. tsconfig.json을 편집하고 합성 기본 가져오기를 활성화합니다.
{
"컴파일러옵션": {
"허용 합성 기본값 가져오기": true
}
}
4. 타입스크립트 클래스에서 PouchDB를 가져옵니다: pouchdb.service.ts.
'pouchdb'에서 PouchDB를 가져옵니다;

로그인 하여 답글 남기기

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 2 및 PouchDB만 있는 웹 애플리케이션에서 Couchbase Mobile 사용