Sync With Couchbase Using Only AngularJS And PouchDB

다양한 언어 SDK 중 하나를 통해 웹 또는 모바일 애플리케이션에서 Couchbase를 사용하는 방법은 여러 가지가 있습니다. 하지만 PHP와 같은 백엔드 언어나 Objective-C와 같은 모바일 언어를 사용하지 않는다면 어떻게 될까요? Amazon S3와 같은 정적으로 호스팅되는 웹 서비스에서 HTML, CSS, JavaScript 기능만 사용한다면 어떻게 될까요?

바로 이 부분에서 PouchDB가 유용할 수 있습니다. PouchDB 는 JavaScript를 사용하여 웹 브라우저에서 작동하도록 설계된 동기화 및 저장 라이브러리입니다. 이 라이브러리를 Couchbase와 함께 사용하기 위해 백엔드 코드나 SDK가 필요하지 않습니다. PouchDB는 클라이언트 측 SDK의 역할을 수행하여 Couchbase 동기화 게이트웨이와 데이터를 주고받을 수 있습니다. 하지만 PouchDB는 바닐라 JavaScript를 사용하므로 애플리케이션에서 AngularJS를 사용하면 어떻게 될까요?

PouchDB에서 다양한 함수를 래핑하여 보다 AngularJS 친화적으로 만드는 방법을 살펴보겠습니다.

필요한 것

우리가 만들 애플리케이션에는 몇 가지 요구 사항이 있습니다. 이 요구 사항을 충족하는 방법은 차차 살펴보겠지만, 여기서는 미리 맛보기로 살펴볼 수 있습니다.

간단한 HTTP 서버 또는 이와 유사한 것을 실행하기 위한 Python
카우치베이스 동기화 게이트웨이
PouchDB 4
AngularJS 1
AngularJS UI-라우터 라이브러리 버전 0.2
트위터 부트스트랩 3

프로젝트의 토대 마련하기

코드에 들어가기 전에 프로젝트 구조와 모든 라이브러리 및 스타일을 제자리에 배치해 보겠습니다.

컴퓨터 어딘가에 디렉터리를 만듭니다. PouchDB 를 열고 루트에 다음 디렉터리를 추가합니다:

css
글꼴
js
템플릿

프로젝트의 루트에는 다음과 같은 파일도 만들어야 합니다. index.html 라는 파일과 동기화 게이트웨이-config.json.

이제 프로젝트에 필요한 모든 라이브러리를 다운로드해야 합니다. 시작은 트위터 부트스트랩에서 최신 버전을 다운로드하고 min.css 파일을 css 프로젝트의 모든 min.js 파일을 js 디렉토리에 있는 모든 글꼴 파일과 프로젝트의 글꼴 디렉터리로 이동합니다.

트위터 부트스트랩을 설치했으면 이제 다음을 다운로드해야 합니다. AngularJS 및 AngularJS UI-라우터. 이러한 라이브러리를 다운로드 한 후 min.js 파일을 프로젝트의 js 디렉터리로 이동합니다.

마지막으로 다운로드할 라이브러리는 PouchDB. 다운로드 후 min.js 파일에 넣고 js 디렉토리에 나머지 모든 프로젝트와 함께 저장합니다.

Couchbase 동기화 게이트웨이 받기

이 프로젝트를 성공하려면 Couchbase Sync Gateway가 필요합니다. 잘 모르시는 분들을 위해 설명하자면, Couchbase Sync Gateway는 로컬 애플리케이션(AngularJS 애플리케이션)과 Couchbase Server 간의 데이터 처리를 처리하는 미들맨 서비스입니다. 이 예제에서는 Couchbase Server를 사용하지 않으므로 동기화 게이트웨이가 클라우드의 인메모리 스토리지 솔루션으로 작동합니다.

카우치베이스 동기화 게이트웨이는 다음을 통해 찾을 수 있습니다. 카우치베이스 다운로드 섹션.

프로젝트 구축

이제 모든 파일이 준비되었으므로 애플리케이션 코딩을 시작할 수 있습니다.

모든 스크립트 및 스타일 포함

먼저 모든 스타일과 스크립트를 우리의 index.html 파일을 만듭니다. 파일을 엽니다. index.html 파일을 열고 다음 코드를 포함하세요:

여기서 주의해야 할 몇 가지 사항은 다음과 같습니다. index.html 파일을 생성합니다. AngularJS 애플리케이션의 이름을 다음과 같이 지정했습니다. 파우치앱 이질적으로 보일 수 있는 태그를 사용하고 있습니다:

해당 태그는 AngularJS UI-Router의 일부입니다. 이것은 각 화면이 해당 태그에 로드되는 부분인 단일 페이지 애플리케이션입니다. 곧 더 이해가 될 것입니다.

AngularJS 로직 파일 만들기

프로젝트의 js 디렉토리에 다음과 같은 파일을 만듭니다. app.js 를 열고 다음 코드를 포함하세요:


angular.module("pouchapp", ["ui.router"])

.run(function($pouchDB) {

})

.config(function($stateProvider, $urlRouterProvider) {

})

.controller("MainController", function($scope, $rootScope, $state, $stateParams, $pouchDB) {

})

각도.모듈("pouchapp", ["ui.라우터"])

.실행(함수($pouchDB) {

})

.구성(함수($stateProvider, $urlRouterProvider) {

})

.컨트롤러("MainController", 함수($범위, $rootScope, $상태, $stateParams, $pouchDB) {

})

이 파일에 대해 일반적으로 주의해야 할 몇 가지 사항과 앞으로 수행할 작업에 대해 설명합니다. 이 파일의 app.js 파일은 모든 애플리케이션 로직이 저장되는 곳입니다. 그 안에는 .run() 함수는 애플리케이션이 시작될 때 실행되는 .config() 애플리케이션의 모든 화면을 구성하는 기능(UI-라우터)과 .controller() 함수에 특정 애플리케이션의 기능에 대한 로직을 포함할 수 있습니다.

다음 사항도 참고하세요. $pouchDB 이 서비스는 나중에 설계할 AngularJS 서비스이기 때문입니다.

AngularJS 구성

AngularJS UI-Router를 사용하고 있으므로 다음에서 경로를 구성해야 합니다. .config() 기능의 app.js 파일에 추가합니다. 코드는 다음과 같습니다:


$stateProvider
    .state("list", {
        "url": "/list",
        "templateUrl": "templates/list.html",
        "controller": "MainController"
    })
    .state("item", {
        "url": "/item/:documentId/:documentRevision",
        "templateUrl": "templates/item.html",
        "controller": "MainController"
    });
$urlRouterProvider.otherwise("list");

$stateProvider

.상태("목록", {

"url": "/list",

"templateUrl": "templates/list.html",

"컨트롤러": "MainController"

})

.상태("item", {

"url": "/아이템/:문서아이디/:문서개정",

"templateUrl": "templates/item.html",

"컨트롤러": "MainController"

});

$urlRouterProvider.그렇지 않으면("목록");

요약하자면, 여기에는 두 가지 경로(화면)가 있습니다. 일종의 목록을 표시하는 화면과 목록의 항목을 추가하거나 업데이트할 수 있는 화면이 있습니다. 두 경로 모두 다음과 같은 AngularJS 컨트롤러를 사용합니다. 메인 컨트롤러를 사용하지만 각각 다른 템플릿이 있습니다.

AngularJS 경로 템플릿

각 화면은 사용자에게 표시할 고유한 HTML이 필요합니다. 프로젝트의 템플릿 디렉토리를 만들고 list.html 그리고 item.html. 를 열고 list.html 를 클릭하고 다음 코드를 추가합니다:

<button class="btn btn-primary">New Item</button>

1	<버튼 클래스="btn btn-primary">신규 항목</버튼>

이름	성	이메일
{{value.firstname}}	{{value.성}}	{{value.email}}	편집 \| 삭제

많은 부분이 이상해 보일 수 있지만 설명해 드리면 이해가 쉬워질 것입니다. 먼저 테이블을 만들고 객체를 반복하여 각 반복에 대해 새로운 테이블 행을 생성합니다. 이 객체는 반복하는 객체이므로 키와 값을 모두 가지게 되므로 키와 값을 분리했습니다. 이 쌍의 값은 이름 정보와 이메일 정보를 포함하는 객체이기도 합니다.

라인과 함께 편집 그리고 삭제 는 개체에서 정보를 가져와 저장소에서 삭제하거나 다른 화면으로 전달하여 편집할 수 있도록 합니다.

이제 애플리케이션의 두 번째이자 마지막 경로로 이동합니다. 애플리케이션의 item.html 파일을 열고 다음 코드를 포함하세요:

이름

성

이메일

기본적으로 이것은 단지 폼일 뿐입니다. 여기에는 저장 함수가 있는데, 이 함수는 다음 AngularJS 컨트롤러 섹션에서 살펴볼 것입니다.

PouchDB AngularJS 서비스

더 진행하기 전에 PouchDB용 AngularJS 서비스에 대해 이야기해야 합니다. 그렇지 않으면 다른 모든 것이 의미가 없습니다. 우리가 서비스를 만드는 이유는 PouchDB를 AngularJS 친화적으로 만들고 싶기 때문입니다. 무엇보다도 반응형 인터페이스를 원합니다. 마지막에 app.js 파일에 다음 코드를 추가합니다:


.service("$pouchDB", ["$rootScope", "$q", function($rootScope, $q) {

    var database;
    var changeListener;

    this.setDatabase = function(databaseName) {
        database = new PouchDB(databaseName);
    }

    this.startListening = function() {
        changeListener = database.changes({
            live: true,
            include_docs: true
        }).on("change", function(change) {
            if(!change.deleted) {
                $rootScope.$broadcast("$pouchDB:change", change);
            } else {
                $rootScope.$broadcast("$pouchDB:delete", change);
            }
        });
    }

    this.stopListening = function() {
        changeListener.cancel();
    }

    this.sync = function(remoteDatabase) {
        database.sync(remoteDatabase, {live: true, retry: true});
    }

    this.save = function(jsonDocument) {
        var deferred = $q.defer();
        if(!jsonDocument._id) {
            database.post(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        } else {
            database.put(jsonDocument).then(function(response) {
                deferred.resolve(response);
            }).catch(function(error) {
                deferred.reject(error);
            });
        }
        return deferred.promise;
    }

    this.delete = function(documentId, documentRevision) {
        return database.remove(documentId, documentRevision);
    }

    this.get = function(documentId) {
        return database.get(documentId);
    }

    this.destroy = function() {
        database.destroy();
    }

}]);

.서비스("$pouchDB", ["$rootScope", "$q", 함수($rootScope, $q) {

var 데이터베이스;

var 변경 리스너;

이.setDatabase = 함수(데이터베이스 이름) {

데이터베이스 = new PouchDB(데이터베이스 이름);

}

이.시작 듣기 = 함수() {

변경 리스너 = 데이터베이스.변경 사항({

라이브: true,

include_docs: true

}).on("change", 함수(변경) {

만약(!변경.삭제됨) {

$rootScope.$방송("$pouchDB:변경", 변경);

} else {

$rootScope.$방송("$pouchDB:삭제", 변경);

}

});

}

이.stopListening = 함수() {

변경 리스너.취소();

}

이.동기화 = 함수(원격 데이터베이스) {

데이터베이스.동기화(원격 데이터베이스, {라이브: true, 다시 시도: true});

}

이.저장 = 함수(jsonDocument) {

var 지연 = $q.defer();

만약(!jsonDocument._id) {

데이터베이스.post(jsonDocument).다음(함수(응답) {

지연.해결(응답);

}).catch(함수(오류) {

지연.거부(오류);

});

} else {

데이터베이스.put(jsonDocument).다음(함수(응답) {

지연.해결(응답);

}).catch(함수(오류) {

지연.거부(오류);

});

}

반환 지연.약속;

}

이.삭제 = 함수(documentId, 문서 수정) {

반환 데이터베이스.제거(documentId, 문서 수정);

}

이.get = 함수(documentId) {

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

}

이.파괴 = 함수() {

데이터베이스.파괴();

}

}]);

받아들여야 할 것이 많습니다. 우리는 본질적으로 많은 PouchDB 함수를 래핑하고 있을 뿐입니다. 하지만 여기서 가장 중요한 것은 시작 듣기 그리고 저장 함수.

내부 시작 듣기 함수를 사용하여 변경 사항을 수신하고 애플리케이션을 통해 브로드캐스트하고 있습니다. $rootScope.$broadcast. 아직 보지 못했지만 AngularJS는 다음을 사용하여 이러한 방송을 수신할 수 있습니다. $rootScope.$on. 이렇게 하면 UI를 매우 쉽게 변경할 수 있습니다.

측면에서 저장 함수를 호출하면 문서 ID가 전달되었는지 확인합니다. 문서 ID가 전달되지 않았다면 삽입할 새 문서이고, 그렇지 않다면 업데이트된 문서입니다.

컨트롤러 및 실행 기능으로 돌아가기

AngularJS부터 시작하겠습니다. .run() 함수가 짧기 때문입니다. 다음 코드를 추가합니다:


.run(function($pouchDB) {
    $pouchDB.setDatabase("nraboy-test");
    $pouchDB.sync("http://localhost:4984/test-database");
})

.실행(함수($pouchDB) {

$pouchDB.setDatabase("nraboy-test");

$pouchDB.동기화("http://localhost:4984/test-database");

})

여기서는 로컬 데이터베이스의 이름을 지정하고 실제로 Couchbase 동기화 게이트웨이인 이 원격 위치로 동기화할 것을 지정합니다. 이 동기화는 호출한 후 지속적으로 발생합니다. 여기서 지속적으로란 애플리케이션이 열려 있는 동안 애플리케이션과 서버 간에 변경 사항이 복제된다는 의미입니다.

컨트롤러 코드로 이동하여 다음을 추가합니다:


.controller("MainController", function($scope, $rootScope, $state, $stateParams, $pouchDB) {

    $scope.items = {};

    $pouchDB.startListening();

    $rootScope.$on("$pouchDB:change", function(event, data) {
        $scope.items[data.doc._id] = data.doc;
        $scope.$apply();
    });

    $rootScope.$on("$pouchDB:delete", function(event, data) {
        delete $scope.items[data.doc._id];
        $scope.$apply();
    });

    if($stateParams.documentId) {
        $pouchDB.get($stateParams.documentId).then(function(result) {
            $scope.inputForm = result;
        });
    }

    $scope.save = function(firstname, lastname, email) {
        var jsonDocument = {
            "firstname": firstname,
            "lastname": lastname,
            "email": email
        };
        if($stateParams.documentId) {
            jsonDocument["_id"] = $stateParams.documentId;
            jsonDocument["_rev"] = $stateParams.documentRevision;
        }
        $pouchDB.save(jsonDocument).then(function(response) {
            $state.go("list");
        }, function(error) {
            console.log("ERROR -&gt; " + error);
        });
    }

    $scope.delete = function(id, rev) {
        $pouchDB.delete(id, rev);
    }

})

.컨트롤러("MainController", 함수($범위, $rootScope, $상태, $stateParams, $pouchDB) {

$범위.항목 = {};

$pouchDB.시작 듣기();

$rootScope.$on("$pouchDB:변경", 함수(이벤트, 데이터) {

$범위.항목[데이터.doc._id] = 데이터.doc;

$범위.$신청하기();

});

$rootScope.$on("$pouchDB:삭제", 함수(이벤트, 데이터) {

삭제 $범위.항목[데이터.doc._id];

$범위.$신청하기();

});

만약($stateParams.documentId) {

$pouchDB.get($stateParams.documentId).다음(함수(결과) {

$범위.입력 양식 = 결과;

});

}

$범위.저장 = 함수(이름, 성, 이메일) {

var jsonDocument = {

"이름": 이름,

"성": 성,

"이메일": 이메일

};

만약($stateParams.documentId) {

jsonDocument["_id"] = $stateParams.documentId;

jsonDocument["_rev"] = $stateParams.문서 수정;

}

$pouchDB.저장(jsonDocument).다음(함수(응답) {

$상태.go("목록");

}, 함수(오류) {

콘솔.로그("오류 -> " + 오류);

});

}

$범위.삭제 = 함수(id, rev) {

$pouchDB.삭제(id, rev);

}

})

애플리케이션이 이미 동기화 중이므로 변경 사항이 있는지 확인해야 합니다. 다음은 $rootScope.$on 앞서 말씀드렸습니다. 하나는 변경(생성 또는 업데이트)을 수신 대기하고 다른 하나는 삭제를 수신 대기하기 때문에 두 개가 있습니다.

만약 list.html 페이지에서 업데이트를 위해 여기로 라우팅하면 문서 ID가 전달됩니다. 이 시나리오에서는 조회를 수행하여 기본값인 공백으로 두는 대신 양식에 표시할 특정 문서 ID에 대한 데이터를 가져올 수 있습니다.

마지막으로 우리는 저장 그리고 삭제 함수.

동기화 게이트웨이 구성

PouchDB와 AngularJS는 여기서 절반의 이야기일 뿐입니다. 물론 로컬에서 실행되는 멋진 애플리케이션을 만들 수 있지만, 우리는 동기화를 원합니다. 이를 위한 엔드포인트가 바로 Couchbase 동기화 게이트웨이이며, 물론 PouchDB는 이 게이트웨이와 잘 작동합니다.

프로젝트의 동기화 게이트웨이-config.json 파일에 다음을 추가합니다:


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

{

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

"데이터베이스": {

"test-database": {

"서버":"walrus:data",

"동기화":`

함수 (doc) {

채널 (doc.채널);

}

"users": {

"GUEST": {

"disabled": false,

"admin_channels": ["*"]

}

"CORS": {

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

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

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

"MaxAge": 17280000

}

이것은 가장 기본적인 구성 중 하나입니다. 몇 가지 주의해야 할 사항이 있습니다:

메모리에 저장되며 지속되지 않는 저장소로 walrus:data를 사용합니다. 프로덕션에는 사용하지 않습니다.
모든 데이터는 GUEST 사용자를 통해 동기화되므로 여기서는 인증이 발생하지 않지만 다음과 같은 경우가 있을 수 있습니다.
localhost:9000에서 요청을 허용하여 CORS 문제를 해결하고 있습니다.

애플리케이션 테스트

이 시점에서 모든 코드가 준비되었으며 동기화 게이트웨이를 실행할 준비가 되었습니다. 명령 프롬프트 또는 터미널에서 다음을 실행하여 동기화 게이트웨이를 시작합니다:

/path/to/sync/gateway/bin/sync-gateway /path/to/project/sync-gateway-config.json

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

이제 파이썬이 등장합니다. 웹 브라우저에서 HTML 파일을 그냥 열 수는 없습니다. CORS 문제를 방지하기 위해 반드시 제공되어야 합니다. 명령 프롬프트 또는 터미널에서 프로젝트를 현재 작업 디렉터리로 설정한 상태에서 다음을 실행합니다:

python -m SimpleHTTPServer 9000

1	python -m SimpleHTTPServer 9000

웹 브라우저에서 http://localhost:9000 을 방문하여 확인해 보세요!

결론

이제 AngularJS와 PouchDB만 사용하여 Couchbase와 동기화할 수 있는 웹 애플리케이션을 만드는 방법을 살펴보았습니다. 백엔드 SDK는 필요하지 않았습니다.

이 블로그 게시물의 전체 작업 소스 코드는 다음을 통해 얻을 수 있습니다. 카우치베이스 랩 GitHub 리포지토리.

Nic Raboy, 개발자 옹호자, Couchbase

에 게시됨: 자바스크립트, 동기화 게이트웨이
태그가 지정되었습니다: angularjs, 자바스크립트, 파우치DB

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

닉 라보이는 최신 웹 및 모바일 개발 기술을 옹호하는 사람입니다. 그는 Java, JavaScript, Golang 및 Angular, NativeScript, Apache Cordova와 같은 다양한 프레임워크에 대한 경험이 있습니다. Nic은 웹 및 모바일 개발을 보다 쉽게 이해할 수 있도록 자신의 개발 경험에 대해 글을 쓰고 있습니다.

모든 게시물 웹사이트

댓글 하나

만벤드라 프라사드 10월 2, 2015에서 4:59 오전

N1QL은 일부 공통 필드에 있는 2개의 버킷에서 조인을 지원하나요? 2개의 버킷이 있고, 두 버킷의 문서에 모두 acct_id 필드가 있습니다. 두 버킷을 모두 acct_id에 조인하여 결과를 얻을 수 있나요?

로그인 하여 답글 남기기
R.O. 11월 7, 2015에서 6:32 오후

훌륭한 튜토리얼을 제공해 주셔서 감사합니다.
오프라인을 이용하고 싶습니다.
이미지를 저장하고 검색하기 위해 PouchDB와 같은 스토리지를 사용하고 있습니다.
꽤 오랫동안 이 문제와 싸우고 있습니다. PouchDB의 홈 웹사이트를 따라갔지만 사진 한 장도 저장할 수 없었습니다.
간단한 그림으로 설명해 주시면 정말 감사하겠습니다.
감사합니다

로그인 하여 답글 남기기
1. 닉 라보이 11월 8, 2015에서 3:23 오후
  
  이미지를 base64 문자열로 변환하고 문자열을 저장하는 것은 어떨까요?
  
  로그인 하여 답글 남기기
  1. R.O. 11월 8, 2015에서 3:33 오후
    
    알겠습니다 제가 할게요.
    감사합니다.
    
    로그인 하여 답글 남기기
  2. R.O. 11월 9, 2015에서 7:25 오후
    
    조언에 따라 카메라의 이미지 데이터에 angular.tojson을 사용하고 그 결과를 pouchdb에 저장했습니다.
    그러나 이미지를 검색하고 표시하려고 시도했지만 성공하지 못했습니다. 이미지는 참조 이름이 있는 객체 배열의 일부입니다. ng-repeat를 사용하여 개체를 반복하여 이름과 생년월일을 추출하지만 표현식 필드에서 이미지를 원래 형식으로 다시 변환하는 방법을 모르겠습니다.
    감사합니다.
    
    로그인 하여 답글 남기기
    1. 닉 라보이 11월 9, 2015에서 7:34 오후
      
      카메라라고 하면 Ionic 프레임워크에 대해 이야기하고 있다면 이걸 보셨나요?
      
      https://blog.nraboy.com/2014/0…
      
      보다 구체적으로 예시에는 이 줄이 있습니다:
      
      $scope.imgURI = \"data:image/jpeg;base64,\" + imageData; 1 $범위.imgURI = \"데이터:이미지/jpeg;base64,\" + 이미지데이터;
      
      base64 이미지를 표시하려면 HTML을 할당해야 합니다. img 태그 \"data:image/jpeg;base64\" 그렇지 않으면 태그가 전달하려는 데이터를 이해하지 못합니다:
      
      <img ng-show=\"imgURI !== undefined\" ng-src=\"{{imgURI}}\"> 1 <img ng-show=\"imgURI !== 정의되지 않음\" ng-src=\"{{imgURI}}\">
      
      도움이 되셨기를 바랍니다.
      
      최고,
      
      로그인 하여 답글 남기기
모건 헤이즈 12월 23, 2015에서 3:40 오후

닉, 블로그 튜토리얼에 감사드립니다. 컨트롤러 코딩 스타일이 제가 배운 것과 달라서 앱에 다른 페이지 링크를 추가하는 데 도움을 줄 수 있는지 궁금합니다. 컨트롤러를 복사 및 복제하려고 시도했지만 작동하지 않았습니다. 감사합니다.

로그인 하여 답글 남기기
모건 헤이즈 12월 23, 2015에서 3:41 오후

Nic, \"동기화 게이트웨이\"와 내 Couchbase 서버를 다시 동기화하는 데 문제가 있습니다. 팁이 있나요? 내 \"cors\"가 켜져 있지 않다는 오류가 발생합니다. 그 이유가 있을까요?

로그인 하여 답글 남기기
1. 닉 라보이 12월 23, 2015에서 4:02 오후
  
  그럴 수 있지만 이는 일반적으로 브라우저 기반 문제입니다.
  
  설정과 관련하여 자세한 내용을 알려주시고 무슨 일이 일어나고 있는지 알려주세요. 정보가 많을수록 더 잘 도와드릴 수 있습니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 모건 헤이즈 12월 29, 2015에서 4:20 오후
    
    닉, 저는 대부분 귀하의 지침에 따라 코드를 사용했습니다. 제 설정은 MS Surface Pro 3에서 앵귤러 PouchDB를 Couchbase 앱으로 개발하는 것입니다. 이것이 제 개발 장치입니다. 제 카우치베이스 서버는 오피스 서버에 있습니다. 대부분의 개발은 카우치베이스 서버와 동일한 네트워크에있을 때이며 주요 목적은 사무실 서버와의 연결이 제한된 현장에서 내 프로그램이 작동하는 것입니다.더 알고 싶은 것이 있으면 알려주세요. 감사합니다
    
    로그인 하여 답글 남기기
    1. 닉 라보이 1월 4, 2016에서 4:50 오후
      
      답변이 늦어져서 죄송합니다. 휴가 중이었어요.
      
      제공해주신 정보가 약간 혼란스럽습니다. 몇 가지를 정리해 주시겠어요?
      
      1. 웹 응용 프로그램(PouchDB, Angular 등)이 Surface Pro에서 실행되고 있나요?
      2. 카우치베이스 동기화 게이트웨이가 Surface Pro 또는 사무실 서버에서 실행되고 있나요?
      3. Couchbase 서버가 방화벽 뒤에 있나요? 즉, 동기화 게이트웨이가 호스팅되는 위치에 관계없이 Couchbase Server에 액세스할 수 있는 방화벽 권한이 있나요?
      
      최고,
      
      로그인 하여 답글 남기기
      1. 모건 헤이즈 1월 5, 2016에서 9:44 오후
        
        1. 애플리케이션은 감독자(30명)의 서피스 프로, 노트북에서 실행됩니다.
        
        2. 카우치베이스와 동기화 게이트웨이가 사무실의 서버에 있습니다.
        
        3. 예, CouchBase 서버에 액세스할 수 있는 권한이 있습니다.
        
        거의 다 설정한 것 같은데 이 오류가 발생하나요? \"400 잘못된 데이터베이스 이름: TCS-Mobile\"
        
        TCS-Mobile이 제 버킷의 정확한 이름입니다.
      2. 닉 라보이 1월 5, 2016에서 10:48 오후
        
        이 오류는 동기화 게이트웨이 또는 웹 애플리케이션의 콘솔 로그를 통해 발생하나요?
      3. 모건 헤이즈 1월 6, 2016에서 3:27 오전
        
        콘솔 로그.
      4. 닉 라보이 1월 6, 2016에서 3:41 오전
        
        제 튜토리얼을 정확히 따라해 달라고 요청해도 되나요? 사용자 지정 설정이 올바르지 않을 수 있습니다.
        
        이것도 살펴볼 수 있습니다:
        
        https://www.youtube.com/watch?…
        
        감사합니다,
짐 데일리 1월 12, 2016에서 12:34 오후

안녕하세요 닉,
복잡한 내용을 이해하기 쉽게 설명하는 방법이 있는 것 같습니다.
저는 스타트업 '제품 소유자'(스크럼)이며 아직 IT 팀을 구성하지 못했습니다. 모바일(네이티브가 아닌) 앱과 웹 브라우저 앱을 구축하여 Couchbase 서버와 함께 작동하도록 할 예정입니다.

"바로 이 부분에서 PouchDB가 도움이 될 수 있습니다. PouchDB는 JavaScript를 사용하여 웹 브라우저에서 작동하도록 설계된 동기화 및 저장 라이브러리입니다."

카우치베이스 라이트/모바일은 PouchDB를 사용했을 때와 유사하게 웹 브라우저에서 자바스크립트를 사용하여 작동할 수 있나요?

감사합니다,

Jim

추신. 웹 앱에는 오프라인 기능이 필요하지 않다는 점을 언급했어야 했는데요.

로그인 하여 답글 남기기
1. 닉 라보이 1월 12, 2016에서 5:04 오후
  
  이걸 보셨나요?
  
  http://www.couchbase.com/cros…
  
  로그인 하여 답글 남기기
리 밀라드 1월 25, 2016에서 7:57 오후

훌륭한 튜토리얼, 저는 현재 오프라인 첫 번째 프로젝트를 진행 중이므로 완벽합니다. 하지만 CORS에 몇 가지 문제가 있습니다. 어리석은 오타가 없는지 확인하기 위해 깃허브에서 코드를 가져왔지만 문제는 여전히 지속되고 있습니다.

Mac에서 Chrome을 사용하고 있습니다.

동기화 게이트웨이를 시작하면 다음과 같은 메시지가 표시됩니다:

MacBook-Pro:~ leigh$ couchbase-sync-gateway/bin/sync_gateway Dropbox/wwwroot/offlinefirst/sync-gateway-config.json
19:52:18.109745 로깅을 활성화합니다: [CRUD+ REST+ 변경+ 첨부+]
19:52:18.109826 ==== 카우치베이스 동기화 게이트웨이/1.0.4(34;04138fd) ====
19:52:18.109840 구성됨 8개의 CPU를 모두 사용하도록 이동; 이것을 재정의하려면 setenv GOMAXPROCS를 설정합니다.
19:52:18.109858 버킷 \"test-database\", 풀 \"default\", 서버 로 db /test-database 열기
19:52:18.109893 에서 Walrus 데이터베이스 테스트 데이터베이스 열기
19:52:18.110497 변경+: "test-database\"가 변경되었음을 알림(키=\"{_sync:사용자:}\") count=2
19:52:18.110505 구성에 게스트 사용자 재설정
19:52:18.110516 127.0.0.1:4985에서 관리자 서버 시작
19:52:18.113169 다음에서 서버 시작 :4984 ...
2016/01/25 19:52:20 Walrus: 경고: Walrus 버킷을 저장할 수 없습니다: open data/walrustemp741838838: 해당 파일 또는 디렉터리가 없습니다.

브라우저에서 이런 메시지가 표시됩니다:

XMLHttpRequest를 로드할 수 없습니다. http://localhost:4984/test-database/?_nonce=1453751478847. 자격 증명 플래그가 참인 경우 \'Access-Control-Allow-Origin\' 헤더에 와일드카드 \'*\'를 사용할 수 없습니다. 따라서 원본 \'http://localhost:9000\'는 액세스가 허용되지 않습니다.

pouchdb-4.0.1.min.js:9 PouchDB 오류: 원격 데이터베이스에 CORS가 활성화되어 있지 않은 것 같습니다. 이 문제를 해결하려면 CORS를 활성화하세요: http://pouchdb.com/errors.html…

로그인 하여 답글 남기기
1. 닉 라보이 1월 26, 2016에서 10:02 오후
  
  흥미롭네요!
  
  Finder를 통해 인덱스 파일을 열지 않고 AngularJS 프로젝트를 서비스하고 있나요? 프로젝트를 로컬 호스트:9000을 통해 서비스하는 경우 어떤 버전의 동기화 게이트웨이를 사용 중인지 알려주시겠어요?
  
  최고,
  
  로그인 하여 답글 남기기
  1. 리 밀라드 1월 27, 2016에서 9:27 오전
    
    답변해 주셔서 감사합니다,
    
    동기화 게이트웨이 1.0.4와 1.1을 사용해 보았고, Pouch 4.0.1과 Pouch 5.2.0을 번갈아 가며 사용해 보았지만 아무 소용이 없었습니다. 파이썬 서버를 사용하여 프로젝트도 확실히 제공했습니다. 결국 저는 유튜브 튜토리얼( https://www.youtube.com/watch이 튜토리얼과 비교하여 sync-gateway-config.json 파일에 약간의 변경 사항이 있습니다.
    
    이 튜토리얼에 따라 \'walrus:data\'를 사용했을 때는 CORS 문제가 발생했지만 유튜브 튜토리얼을 따라 \"server\":\"http://localhost:8091\"를 사용했을 때는 괜찮았습니다.
    
    적어도 저는 지금 실행 중입니다!
    
    마지막 질문은 양방향 동기화를 그대로 처리해야 하나요? Electron 앱, 모바일 앱 및 웹 앱이 모두 Couchbase 데이터베이스에 동기화되므로 푸시 및 풀을 위해 각 PouchDB가 필요합니다.
    
    로그인 하여 답글 남기기
    1. 닉 라보이 1월 27, 2016에서 5:55 오후
      
      그리고 동기화 함수는 양방향 동기화를 처리합니다.
      
      제 동영상에서는 로컬 호스트:8091을 사용했는데, 라이브 Couchbase Server 인스턴스에 연결되어 있었기 때문입니다. 이 글에서는 개발 전용 해마 임시 저장소를 사용하도록 동기화 게이트웨이를 설정했습니다. Couchbase Server로 전환했을 때 CORS 문제가 사라진 것이 이상하지만 작동하게 되어 기쁩니다.
      
      아직 읽어보지 않았다면 제가 만든 전자 튜토리얼을 검색하여 이 게시물을 확장하는 것을 잊지 마세요.
      
      최고,
      
      로그인 하여 답글 남기기

코리 퀼렌 4월 25, 2016에서 7:20 오후

PouchDB 데이터베이스를 동기화하려고 할 때 CORS 오류가 계속 발생합니다. 위의 sync-gateway-config.json과 여기 Couchbase 동기화 게이트웨이 문서에 있는 버전을 사용해 보았습니다:
http://developer.couchbase.com…

두 경우 모두 다음과 같은 오류가 발생합니다:

XMLHttpRequest를 로드할 수 없습니다. http://localhost:4985/test-database/.
요청된 \'Access-Control-Allow-Origin\'헤더가 없습니다.
리소스입니다. 따라서 원본 \'http://localhost:3000\'는
액세스가 허용됩니다.

이 문제를 스택오버플로에 게시했지만 아직 아무도 답변을 제출하지 않았습니다.
http://stackoverflow.com/quest…

로그인 하여 답글 남기기

닉 라보이 4월 26, 2016에서 8:04 오후

다음을 사용하고 있다고 가정합니다:

\"CORS\": {<br>    \"Origin\": [\"http://localhost:9000\"],<br>    \"LoginOrigin\": [\"http://localhost:9000\"],<br>    \"Headers\": [\"Content-Type\"],<br>    \"MaxAge\": 17280000<br>}

1	\"CORS\": {<br> \"원산지\": [\"http://localhost:9000\"],<br> \"LoginOrigin\": [\"http://localhost:9000\"],<br> \"헤더\": [\"콘텐츠 유형\"],<br> \"MaxAge\": 17280000<br>}

오류 메시지에 포트 3000을 통해 액세스하려고 한다는 메시지가 표시됩니다. 동기화 게이트웨이의 CORS 섹션 내 포트를 9000에서 3000으로 변경하셨나요?

최고,

로그인 하여 답글 남기기

코리 퀼렌 4월 26, 2016에서 9:35 오후

연락 주셔서 감사합니다. 그랬어요. 동기화 게이트웨이-config.json 파일에서 \"원본\"과 \"로그인 원본\"이 모두 포트 3000으로 설정되어 있습니다. 지금은 막혀서 무엇을 시도해야 할지 모르겠습니다. 스택 오버플로에 올린 질문에도 아직 답변이 없습니다.

로그인 하여 답글 남기기
1. 닉 라보이 4월 27, 2016에서 10:03 오후
  
  모바일 팀에 이메일을 보냈습니다. 곧 이 게시물에 대한 후속 조치를 취할 것입니다. 개인적으로 무엇이 잘못되었는지 모르겠지만 다른 관점을 가지고 있을 수도 있습니다.
  
  최고,
  
  로그인 하여 답글 남기기
2. 아담 프레이저 4월 27, 2016에서 10:55 오후
  
  제가 알기로는 CORS를 지원하지 않는 동기화 게이트웨이 관리 포트를 사용하려고 하는 것 같습니다. 공용 포트(4984)를 타겟팅해 보셨나요?
  
  로그인 하여 답글 남기기
  1. 코리 퀼렌 4월 29, 2016에서 3:57 오후
    
    그게 문제였습니다. 어떤 이유에서인지 4985를 사용하고 있었습니다. 이유를 모르겠습니다. 도와주셔서 감사합니다.

델칸트 6월 9, 2016에서 4:13 오후

안녕하세요 닉, 훌륭한 튜토리얼입니다!!

어떻게 \"PouchDB\"를 Spring 프레임워크와 통합할 수 있을까요? 따라서 Spring Security, 기타 Java 라이브러리를 사용하고 Restful API를 노출할 수 있습니다(아마도 Couchbase 위에 더미 래퍼일 수도 있습니다). 제 주요 목표는 오프라인 자율성과 자동 동기화 기능을 갖춘 AngularJs 클라이언트를 만드는 것이지만, Java로 작성된 모듈이 많고 다른 라이브러리를 통합해야 하므로 이 모든 것을 백엔드에서 Spring Framework 앱과 결합하고 싶습니다.

튜토리얼도 읽었습니다. http://www.couchbase.com/deve... 하지만 이를 PouchDB와 통합하는 가장 좋은 방법이 무엇인지 모르겠습니다.

조언과 제안을 주시면 감사하겠습니다.

감사합니다,

로그인 하여 답글 남기기
1. 닉 라보이 6월 9, 2016에서 6:03 오후
  
  안녕하세요 @delkan@delkant:disqus,
  
  PouchDB와 동기화 게이트웨이가 모든 데이터를 담당하는 MVC 설정에서 PouchDB를 모델로 사용한다면 어떨까요? 그러면 로직 처리와 렌더링을 위해 기존 Java 애플리케이션을 유지할 수 있습니다.
  
  추가 통합이 필요한 경우, Couchbase 동기화 게이트웨이에는 Java 코드를 통해 통신할 수 있는 RESTful API가 있습니다. 동기화 게이트웨이와 Java 서버로 사용자 지정 인증을 관리할 수도 있습니다.
  
  하고자 하는 일에 대해 좀 더 구체적인 이야기를 들려주면 도움이 될 것 같습니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 델칸트 6월 10, 2016에서 7:42 오후
    
    사실, 그것은 좋은 생각이고 저에게는 효과가 있지만 모든 사용자가 이미 사용 중이므로 Spring 보안을 사용하는 것을 선호합니다. 저는 과거에 이 http 프록시( https://github.com/mitre/HTTP-...)를 사용하여 solr의 http 요청을 스프링 보안으로 보호하기 위해 동기화 게이트웨이에서도 테스트를 실행하여 스프링 보안 인증 사용자만 게이트웨이에 액세스할 수 있도록 했습니다. 아주 잘 작동했습니다! 여기서 제가 좋아하는 또 다른 점은 버킷 수준(URL 기반)에서만 노출할 수 있고, 이 모든 것을 스프링 보안을 사용하여 앱이 있는 동일한 포트에서 클라우드 기반 동기화 게이트웨이를 제공할 새 엔드 포인트를 정의하기만 하면 된다는 것입니다.
    
    로그인 하여 답글 남기기
델칸트 6월 10, 2016에서 5:07 오전

안녕하세요 닉,

다시 한번 좋은 튜토리얼입니다. 질문이 있습니다.

PouchDB 문서에 따르면 https://pouchdb.com/adapters.h…
카우치베이스 동기화 게이트웨이 **지원이 진행 중**입니다. 작동은 되지만 특히 첨부 파일에서 문제가 발생할 수 있습니다.

지원이 진행 중이므로 대신 Couchbase와 함께 PouchDB Server를 사용할 수 있는지 궁금합니다. 이에 대한 문서를 찾지 못했지만 두 데이터베이스 모두 CouchDB와 유사한 프로토콜을 사용하여 구현되었으므로 호환 가능할 것입니다. 이를 확인해 주실 수 있나요?

PouchDB에서 카우치DB와 유사한 데이터베이스에 액세스하려면 항상 동기화 게이트웨이 또는 PouchDB 서버와 같은 것이 필요하나요?

저는 이 분야에 대해 잘 몰라서 질문이 이해가 되지 않는다면 죄송합니다.

감사합니다,

로그인 하여 답글 남기기
알스베리 6월 21, 2016에서 10:47 오후

샘플 코드를 사용할 때 오류가 발생합니다. 컨트롤러는 목록 보기가 로드될 때마다 리스너를 설정하며 아래와 같은 오류가 발생합니다:

pouchdb.js:141(노드) 경고: EventEmitter 메모리 누수 가능성이 감지되었습니다. 리스너 11개가 추가되었습니다. emitter.setMaxListeners()를 사용하여 제한을 늘리세요.

앵귤러 닌자는 아니지만, 해당 코드를 서비스로 옮겨야 할 것 같습니다.

로그인 하여 답글 남기기
하나 8월 5, 2016에서 7:43 오전

안녕하세요!

위의 애플리케이션을 카우치베이스 대신 카우치DB로 개발하고 싶습니다 ? 위와 동일합니까 ? 어느 쪽을 선호하지만 주로 CouchDB를 찾고 있습니까 ? 아니면 위의 코드에서 수정해야합니까 ? CouchDB로 개발하기 위한 링크나 리소스를 제공해 주실 수 있나요 ?

미리 감사드립니다.

로그인 하여 답글 남기기
1. 닉 라보이 8월 5, 2016에서 1:05 오후
  
  Couchbase를 사용하면 훨씬 더 쉽게 사용할 수 있습니다. 기능이 더 풍부하고 사용하기 쉽습니다.
  
  로그인 하여 답글 남기기
무바셔 8월 7, 2016에서 12:27 오후

안녕하세요, 사용자가 인터넷에 액세스 할 수있을 때 오프라인 상태이고 데이터를 동기화하는 POS 애플리케이션을 개발해야합니다. 카우치베이스가 상충되는 상태를 어떻게 처리하는지 알고 싶습니다. 예를 들어 POS 스테이션 1에서 품목 A에 대한 판매가 발생했습니다. 고객이 품목 A의 2 개 수량을 가지고 왔습니다. 동시에 스테이션 1은 오프라인 상태였습니다. 그리고 로컬 데이터에는 항목 A에 대해 남은 수량이 1 개만 표시됩니다. 그러나 실제로 판매 관리자는 스테이션 1이 오프라인 상태 였을 때 얼마 전에 재고를 리필했습니다. 이는 데이터베이스가 동기화 될 때까지 재고 리필이 스테이션 1에 표시되지 않음을 의미합니다. 이 시나리오가 오프라인 / 온라인 DB 상태에서 어떻게 처리되는지 궁금합니다.

로그인 하여 답글 남기기
1. 닉 라보이 8월 7, 2016에서 5:00 오후
  
  수정본 기록은 문서가 변경될 때마다 유지됩니다. 예를 들어 문서를 처음 저장하면 다음과 같이 보일 수 있습니다:
  
  1-AD2348FD
  
  여기서 1은 수정본이고 나머지는 저장과 관련된 해시입니다.
  
  ID와 수정본 번호는 같지만 해시가 다른 문서가 있는 경우, 충돌 표시기가 표시됩니다. 이 시점에서 문서의 수정본 기록을 쿼리하여 같은 깊이(또는 더 깊은)의 수정본 항목을 모두 살펴보고 비즈니스 로직을 적용하여 어떤 저장이 이길지 확인할 수 있습니다.
  
  한 장치에서 수정본 기록 번호가 더 높은 경우, 즉 오프라인 장치가 100번 저장된 경우 충돌 없이 더 높은 수정본 저장이 승리하는 시나리오가 발생할 수 있습니다. 하지만 언제든지 수정본 이력을 살펴보고 추가적인 비즈니스 로직을 적용할 수 있습니다.
  
  질문에 대한 답변이 되었나요?
  
  최고,
  
  로그인 하여 답글 남기기
  1. 무바셔 8월 9, 2016에서 2:00 오후
    
    완전하지는 않습니다. 제가 제공 한 시나리오에서 오프라인 스테이션이 로컬 DB 상태 (제품 A의 남은 품목이 1 개뿐)보다 더 많은 판매 주문 (제품 A의 2 개 품목)을 받았을 때 문제가 발생했습니다. 이 시나리오에서 스테이션 (POS 앱)이 오프라인 모드에있는 동안 어떻게 판매 거래를 수행 할 수 있습니까? 내가 생각할 수있는 유일한 비즈니스 솔루션은 앱이 오프라인 상태 인 기간 동안 마이너스 항목으로 이동하는 것입니다. 1-2 = -1이기 때문에; 그리고 인터넷이 가능 해지면 상태를 동기화하고 말씀하신대로 충돌을 관리합니다. 더 나은 솔루션을 제시 할 수 있습니까?
    
    로그인 하여 답글 남기기
    1. 닉 라보이 8월 9, 2016에서 11:37 오후
      
      무슨 말씀인지 잘 모르겠습니다. 다시 시도해 보시겠어요?
      
      로그인 하여 답글 남기기
leon 4월 14, 2017에서 4:52 오전

안녕하세요 닉,

훌륭한 튜토리얼입니다. 아주 잘 설명되어 있습니다.
한 가지 지적하고 싶은 것은 AngularJs UI 라우터를 주입할 때 app.js에서 ["ui-router"] 대신 ["ui.라우터"]를 주입하면 인젝터 모듈러 오류를 피할 수 있다는 것입니다.

다시 한 번 감사드립니다.

로그인 하여 답글 남기기
leon 4월 14, 2017에서 4:53 오전

안녕하세요 닉,
죄송합니다, 제가 잘못 읽었습니다. 올바르게 주사하셨습니다.

로그인 하여 답글 남기기
친탄 미쉬라 5월 12, 2018에서 9:41 오후

이제 동기화 게이트웨이가 CouchDB 복제 프로토콜을 지원하지 않으므로 이 튜토리얼은 유효하지 않은 것 같습니다.

https://developer.couchbase.com/documentation/mobile/2.0/references/couchbase-lite/release-notes/index.html#deprecation-notices

로그인 하여 답글 남기기

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

모든 게시물

AngularJS 및 PouchDB만 사용하여 Couchbase와 동기화