Sync Couchbase in Ionic Framework and PouchDB

아이오닉 프레임워크는 여전히 하이브리드 모바일 애플리케이션 개발의 선두주자 중 하나입니다. 이를 통해 Android 및 iOS 애플리케이션을 만들 수 있습니다.
HTML, JavaScript, CSS만 사용합니다.

이전 글에서 사용 방법에 대해 설명한 적이 있습니다. 카우치베이스의
아이오닉 프레임워크 모바일 안드로이드 및 iOS 애플리케이션를 사용했지만 Couchbase
Lite를 임베디드 NoSQL 데이터베이스로 사용했습니다. 이번에는 Couchbase Lite를 PouchDB로 대체하는 방법을 살펴보겠습니다. 사용해야 하는 이유
방법 중 어느 것이 더 낫다고 생각하시나요? 아니요, 결국 선호도에 따라 결정됩니다.

다음과 관련된 제 게시물을 아직 보지 않으셨다면 PouchDB
및 Couchbase를 사용한 AngularJS에서도 동일한 개념과 코드를 많이 사용하므로 이 튜토리얼을 살펴보는 것이 좋습니다.

필요한 것

우리가 만들 애플리케이션에는 몇 가지 요구 사항이 있습니다. 이를 확보하는 방법은 나중에 살펴보겠지만 여기에는
취향에 따라 선택할 수 있습니다.

카우치베이스 동기화 게이트웨이
PouchDB 4
아이오닉 프레임워크 1

Couchbase 동기화 게이트웨이 받기

이 프로젝트가 성공하려면 Couchbase 동기화 게이트웨이가 필요합니다. 익숙하지 않으시다면, Couchbase 동기화 게이트웨이는
미들맨 서비스는 로컬 애플리케이션(Ionic 프레임워크 애플리케이션)과 Couchbase 서버 간의 데이터 처리를 처리하는 서비스입니다. We
이 예제에서는 Couchbase Server를 사용하지 않으므로 동기화 게이트웨이가 클라우드의 인메모리 스토리지 솔루션으로 작동합니다.

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

아이오닉 프레임워크 프로젝트 만들기

더 진행하기 전에 Mac을 사용하지 않는 경우 iOS 플랫폼용으로 추가 및 빌드할 수 없다는 점을 알아두는 것이 좋습니다. Windows, Mac,
및 Linux 컴퓨터는 Android용으로 빌드할 수 있지만 Mac에서만 iOS용으로 빌드할 수 있습니다.

명령 프롬프트(Windows) 또는 터미널(Mac 및 Linux)에서 다음 명령을 실행하여 새 Ionic 프레임워크 프로젝트를 생성합니다:


ionic start PouchProject blank
cd PouchProject
ionic platform add android
ionic platform add ios

ionic start PouchProject blank

cd PouchProject

ionic platform add android

ionic platform add ios

이제 빈 템플릿 프로젝트를 사용할 준비가 되었습니다.

종속성 포함

아직 가입하지 않으셨다면요, PouchDB 4 다운로드 를 클릭하고 min.js 파일을
프로젝트를 통해 사용하게 될 것입니다. 프로젝트의
PouchDB min.js 파일을 Ionic 프로젝트의 www/js 디렉터리로 이동합니다.

파일이 제자리에 있으면 프로젝트의 www/index.html 파일을 열고 다음을 포함하세요:

이 스크립트 줄은 app.js 줄을 포함해야 하며 버전 정보는 실제 버전과 일치해야 합니다.
파일 대신 여기에 포함시킨 버전을 사용하세요.

인덱스 파일 수정

AngularJS 코드로 들어가기 전에 프로젝트의 최종 수정이 필요합니다. www/index.html 파일을 엽니다. 파일을 열고
태그를 다음으로 바꿉니다:

Ionic 프레임워크와 함께 제공되는 AngularJS UI-Router를 사용하고 있기 때문에 기본적인 www/index.html 파일을 만듭니다.

PouchDB AngularJS 서비스 만들기

PouchDB를 사용하기 전에 AngularJS 및 Ionic Framework와 잘 맞도록 래퍼를 만들어야 합니다. 즉시 사용 가능한 PouchDB
는 바닐라 자바스크립트 라이브러리이므로 AngularJS를 사용할 때 가장 사용하기 쉬운 것은 아닙니다.

프로젝트의 www/js/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();
    }

}])

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

}

}])

이 코드가 익숙하다고 생각할 수도 있습니다. 실제로 제가 사용한 코드와 정확히 일치합니다.
의 이전 앵귤러JS용 파우치DB 예제.
이제 프로젝트에서 PouchDB를 쉽게 사용할 수 있습니다.

로컬 데이터베이스 생성 및 동기화 시작

여기서 목표는 애플리케이션이 시작될 때(아직 존재하지 않는 경우) 로컬 데이터베이스를 생성한 다음
카우치베이스 동기화 게이트웨이. 이 작업은 AngularJS에서 수행할 수 있습니다. run() 기능의 www/js/app.js
file:


.run(function($ionicPlatform, $pouchDB) {
    $ionicPlatform.ready(function() {
        if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
    $pouchDB.setDatabase("nraboy-test");
    if(ionic.Platform.isAndroid()) {
        $pouchDB.sync("https://192.168.57.1:4984/test-database");
    } else {
        $pouchDB.sync("https://localhost:4984/test-database");
    }
})

.run(function($ionicPlatform, $pouchDB) {

$ionicPlatform.ready(function() {

if(window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

}

if(window.StatusBar) {

StatusBar.styleDefault();

}

});

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

if(ionic.Platform.isAndroid()) {

$pouchDB.sync("https://192.168.57.1:4984/test-database");

} else {

$pouchDB.sync("https://localhost:4984/test-database");

}

})

제가 사용한 IP 주소는 시뮬레이터의 경우 다를 수 있지만 프로덕션의 경우 iOS와
Android.

뷰를 위한 컨트롤러 디자인

아직 뷰를 만들지 않았지만 이제 뷰에 대한 컨트롤러 로직을 만들어 보겠습니다. 프로젝트의
www/js/app.js 파일에 다음 컨트롤러를 포함하세요:


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

    $scope.items = {};

    $scope.save = function(firstname, lastname, email) { }

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

    $scope.back = function() { }

})

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

$scope.items = {};

$scope.save = function(firstname, lastname, email) { }

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

$scope.back = function() { }

})

현재로서는 기본 컨트롤러가 있습니다. 우리는 항목을 저장하고 삭제할 것이라는 것을 알고 있으므로 다음과 같은 함수를 정의했습니다.
작업을 수행합니다. 또한 다음과 같은 함수도 있습니다. back() 를 누르면 기록 스택에서 항목이 팝업(뒤로 가기)됩니다.

상향식으로 돌아가서 다음과 같이 시작하겠습니다. back() 함수를 추가합니다. 여기에는 다음 코드가 포함되어야 합니다:


$scope.back = function() {
    $ionicHistory.goBack();
}

$scope.back = function() {

$ionicHistory.goBack();

}

데이터베이스에서 항목을 삭제하려면 삭제할 특정 문서 ID와 특정 수정본을 제공해야 합니다.
를 삭제하려고 합니다. 이 모든 것이 뷰에서 전달되지만 로직은 다음과 같습니다:


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

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

$pouchDB.delete(id, rev);

}

그리고 delete(id, rev) 함수는 우리가 만든 PouchDB 서비스를 호출합니다.

이로 인해 저장() 함수를 사용할 수 있습니다. 애플리케이션의 단순성을 고려하여 다음 세 가지 데이터만 저장합니다.
속성을 사용하지만 필요한 경우 쉽게 변경할 수 있습니다. 컨트롤러 내부에서 저장() 함수는 다음과 같이 작동합니다:


$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.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 -> " + error);

});

}

이 함수는 두 가지 작업을 수행합니다. 삽입을 준비하거나 문서 ID와 문서 수정이 필요한 경우 업데이트를 준비합니다.
를 사용할 수 있습니다.

하지만 아직 끝나지 않았습니다. 모든 함수를 완성했지만, 아직 다음 항목에 대한
변경됩니다. 전화할 때 $pouchDB.startListening(); 를 컨트롤러에 추가하면, 파우치DB 서비스가
AngularJS $broadcast. 방송하는 동안에는 다음과 같은 것을 사용하여 해당 방송을 들을 수 있습니다:


$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();
});

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

});

이제 뷰 컨트롤러 로직을 사용할 수 있습니다!

Ionic 프레임워크 뷰 정의

마지막 부분은 www/js/app.js 파일은 뷰를 정의하는 데 사용됩니다. 이 작업은 AngularJS
config() 함수는 다음과 같이 작동합니다:


.config(function($stateProvider, $urlRouterProvider) {
    $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");
})

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

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

})

모든 목록 항목에 대한 보기와 새 목록 항목 생성 및 업데이트를 위한 보기, 두 가지 보기를 정의했습니다. 목록의 항목 상태는 선택적
문서 ID와 문서 수정본 매개변수가 있습니다. 이 매개변수가 있으면 특정 문서를 업데이트할 예정이라는 뜻입니다.

이제 모든 AngularJS 로직이 완성되었습니다. 데이터베이스를 초기화하고, 동기화를 시작하고, 뷰를 정의하고, 상호 작용을 계획했습니다.
의 뷰에서

목록 보기 만들기

여기서는 목록에 데이터가 표시되는 방식을 정의하겠습니다. 프로젝트의 www/templates/list.html 파일에 다음 코드를 추가합니다:



    
        <button class="right button button-icon icon ion-plus"></button>
    
    
        
            
                {{value.firstname}} {{value.lastname}}

목록 항목을 스와이프하면 삭제 버튼이 표시되며, 이 버튼을 누르면 삭제() 기능을 제공합니다.

양식 보기 만들기

여기서는 데이터베이스에 삽입되거나 업데이트될 문서를 정의합니다. 기본적으로 이 보기는 양식일 뿐입니다. 프로젝트의
www/templates/item.html 파일에 다음 코드를 추가합니다:

동기화 게이트웨이 구성

PouchDB와 Ionic 프레임워크는 여기서 절반의 이야기일 뿐입니다. 물론 로컬에서 실행되는 멋진 애플리케이션을 만들 수 있지만, 우리는 동기화를 원합니다. 이를 위한 엔드포인트가 바로 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": ["https://localhost:9000"],
        "LoginOrigin": ["https://localhost:9000"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

{

"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": ["https://localhost:9000"],

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

"Headers": ["Content-Type"],

"MaxAge": 17280000

}

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

메모리에 저장되며 지속되지 않는 저장소로 walrus:data를 사용합니다. 프로덕션에는 사용하지 않습니다.
모든 데이터는 GUEST 사용자를 통해 동기화되므로 여기서는 인증이 발생하지 않지만 인증이 발생할 수 있습니다.
브라우저 테스트를 위해 Python으로 서비스를 제공하려는 경우 localhost:9000에서 요청을 허용하여 CORS 문제를 해결하고 있습니다.

애플리케이션 테스트

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


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

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

이제 동기화 게이트웨이가 실행 중일 것이며, 웹 브라우저에서 https://localhost:4984 으로 이동하여 이를 확인할 수 있습니다.

Android용 테스트

장치가 연결되었거나 시뮬레이터가 실행 중인 상태에서 명령 프롬프트 또는 터미널에서 다음 두 명령을 실행하여 빌드하고
APK 파일을 설치합니다:


ionic build android
adb install -r platforms/android/build/outputs/apk/android-debug.apk

ionic build android

adb install -r platforms/android/build/outputs/apk/android-debug.apk

iOS용 테스트

이 작업을 수행하는 좋은 방법은 두 가지가 있습니다. 프로젝트를 빌드하고 Xcode로 열거나, 프로젝트를 빌드한 후
를 사용하면 Xcode를 실행하지 않고도 애플리케이션을 에뮬레이트할 수 있습니다. 첫 번째는 다음과 같이 할 수 있습니다:


ionic build ios

ionic build ios

그런 다음 프로젝트의 platform/ios/ 디렉터리를 열고 Xcode 프로젝트 파일을 실행합니다.

노드 패키지 관리자(NPM) 패키지 ios-sim을 설치한 경우 다음을 수행할 수 있습니다:


ionic build ios
ionic emulate ios

ionic build ios

ionic emulate ios

결론

이제 아이오닉 프레임워크 모바일 Android 및 iOS 애플리케이션에서 Couchbase를 사용할 수 있는 두 가지 방법이 있다는 것을 알았습니다. 다음을 사용할 수 있습니다.
에서 설명한 것처럼 Apache Cordova Couchbase 플러그인
의 이전 블로그 시리즈를 클릭하거나
PouchDB를 사용하세요. 이 두 가지 모두 애플리케이션의 크로스 플랫폼 데이터 저장 및 동기화에 매우 적합한 옵션입니다.

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

Nic Raboy, 개발자 옹호자, Couchbase

이 문서 공유하기

댓글 하나

로익 크누첼 11월 11, 2015에서 6:45 오후

안녕하세요, 흥미로운 기사입니다. 앱 데이터를 저장/동기화하기 위한 CouchDB용 호스팅을 알고 계신가요?

로그인 하여 답글 남기기
1. 닉 라보이 11월 11, 2015에서 7:08 오후
  
  안녕하세요,
  
  이 글은 카우치베이스에 대한 이야기입니다. CouchDB는 완전히 다른 소프트웨어입니다.
  
  거의 모든 호스팅 솔루션에서 카우치베이스를 호스팅할 수 있습니다. 인기 있는 호스팅 솔루션으로는 AWS와 Joyent가 있지만, 그 외에도 수많은 업체가 있습니다.
  
  질문에 대한 답변이 되었나요?
  
  최고,
  
  로그인 하여 답글 남기기
  1. 로익 크누첼 11월 11, 2015에서 7:32 오후
    
    죄송해요, 항상 실수하죠...
    예를 들어 헤로쿠와 같은 정말 간단한 카우치베이스 호스팅을 찾고 있습니다...
    PouchDB에 대한 많은 튜토리얼이 로컬에서 사용하는 방법을 설명하지만 서버와 장치 간의 실제 동기화(및 호스팅, 보안에 대한 몇 가지 권장 사항...)를 보여주는 튜토리얼은 찾을 수 없습니다.
    
    앱의 기본 스토리지로 PouchDB/Couchbase를 사용하는 방법에 대해서는 아직 조금 혼란스럽지만 더 조사/테스트해봐야겠습니다.)
    
    로그인 하여 답글 남기기
    1. 닉 라보이 11월 11, 2015에서 7:47 오후
      
      이 글을 읽으실 수도 있습니다:
      
      https://www.couchbase.com/2015...
      
      2부로 구성된 시리즈 중 1부에서는 AWS에서 Couchbase Server 및 Couchbase 동기화 게이트웨이를 작동시키기 위한 방법을 설명합니다.
      
      최고,
      
      로그인 하여 답글 남기기
      1. 로익 크누첼 11월 11, 2015에서 9:28 오후
        
        확인해 보겠습니다. 감사합니다.
      2. 닉 라보이 11월 11, 2015에서 10:22 오후
        
        문제없습니다! 발견한 것이 있으면 다시 보고해 주세요 :-)
R.O. 11월 11, 2015에서 10:03 오후

이 훌륭한 튜토리얼을 제공해 주셔서 감사합니다.

로그인 하여 답글 남기기
1. 닉 라보이 11월 11, 2015에서 10:22 오후
  
  문제 없습니다!
  
  로그인 하여 답글 남기기
  1. R.O. 11월 14, 2015에서 6:18 오전
    
    안녕하세요,
    감사합니다.
    또한 다른 입력, 즉 날짜 입력을 추가하려고 했습니다. 저장 함수 매개 변수와 인수에 제공했습니다.
    그리고 DB에 저장한 후에는 괜찮았지만 편집 모드에서는 날짜 값이 표시되지 않았습니다.
    감사합니다.
    
    로그인 하여 답글 남기기
    1. R.O. 11월 14, 2015에서 6:39 오전
      
      안녕하세요,
      결국 저는 이것을 get 함수에 포함시켜 문제를 해결했습니다.
      
      $scope.inputForm.Date = 새 날짜($scope.inputForm.Date);
      
      로그인 하여 답글 남기기
R.O. 11월 15, 2015에서 10:46 오전

안녕하세요,
튜토리얼을 제공해 주셔서 다시 한 번 감사드립니다.
얼마 후 앱을 테스트할 때 콘솔에서 이 문제가 발생했습니다.
(윈도우, 아이오닉, 앵귤러JS, 크롬)을 사용하고 있습니다.

\"(노드) 경고: 이벤트이미터 메모리 누수 가능성이 감지되었습니다. 리스너 11개가 추가되었습니다. emitter.setMaxListeners()를 사용하여 제한 \"

Thnaks

로그인 하여 답글 남기기
1. 닉 라보이 11월 16, 2015에서 5:00 오후
  
  PouchDB의 창시자인 Nolan Lawson에 따르면 이는 오류가 아니라 경고일 뿐이라고 합니다:
  
  https://pouchdb.com/errors.html...
  
  오류를 해결하려면 PouchDB 5로 업데이트하고 제한을 늘릴 것을 권장합니다.
  
  최고,
  
  로그인 하여 답글 남기기
다나일 11월 19, 2015에서 9:38 오후

안녕하세요 닉,

튜토리얼을 제공해 주셔서 감사합니다!

동기화 게이트웨이의 클라이언트로 \"Couchbase Lite PhoneGap\"과 \"PouchDB + SQLite\"를 모두 사용해 보았습니다.
"카우치베이스 라이트 폰갭"에 몇 가지 문제가 있는 것 같습니다: https://github.com/couchbasela(웹앱에서도 코드를 재사용할 수 있습니다.) 또한 PouchDB는 더 크로스 플랫폼 IMHO입니다. Couchbase 동기화 게이트웨이가 PouchDB와의 통합을 깨지 않기를 바라며 그 반대의 경우도 마찬가지입니다.

그래서 예제를 최신 PouchDB 5.1.0으로 업그레이드하려고 했는데 오류와 문제가 발생했습니다(CORS 통합과 관련된 것으로 생각되며 이 문제와도 유사합니다): https://github.com/pouchdb/pou...

PouchDB 5.1.0 최신 버전 또는 일부 버그가 수정된 최신 야간 빌드를 사용해 보셨나요?

의도적으로 최신 4.x 버전을 사용하셨나요? 4.0.3을 사용하셨나요? 아니면 위의 오류나 다른 문제로 인해 4.0.4를 사용하셨나요?

제가 작성한 PouchDB 5.x 서비스 예제입니다: https://gist.github.com/Danail...

로그인 하여 답글 남기기
1. 닉 라보이 11월 19, 2015에서 11:15 오후
  
  안녕하세요,
  
  이 글은 5.x가 출시되기 며칠 전에 작성/게시되었습니다. 이전 버전을 사용하려는 의도는 아니었습니다. PouchDB의 창시자인 Nolan Lawson과 이야기를 나눴는데, 그는 작동할 것이라고 말했습니다.
  
  몇 가지 테스트를 해보고 알려드리겠습니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 다나일 11월 20, 2015에서 2:26 오후
    
    빠른 답변에 감사드립니다!
    
    최신 \"Couchbase 동기화 게이트웨이 커뮤니티 에디션 1.1.1\" 및 \"PouchDB 5.0.1\"로 테스트했습니다. - 최신 버전이 아닌 도커 이미지를 사용하기 전에 테스트했습니다(최신 도커 이미지는 1.1.0입니다. https://hub.docker.com/r/couch... 그리고 심각한 버그가 있습니다. https://developer.couchbase.com....
    
    테스트 앱을 쉽게 마이그레이션할 수 있습니다: https://github.com/DanailMinch... 특별한 변경이 필요하지 않습니다.
    
    따라서 결과는 동일합니다:
    
    앱을 시작할 때와 앱에서:
    1. 첫 번째 레코드 삽입
    2. 동일한 레코드 편집
    3. 동일한 레코드 삭제
    다음에서 변경 사항을 확인할 수 있습니다. https://localhost:4985/_admin/db/test-database
    
    하지만 그 후 동기화 게이트웨이 콘솔에서 이상한 오류가 발생했습니다:
    
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드: 채널이 채널.TimedSet{\"*\":0x0}로 확장됨 ...
    2015-11-20T13:59:55.370Z Changes: 다중 변경 피드 완료
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드: 채널이 채널.TimedSet{\"*\":0x0}로 확장됨 ...
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드 대기 중...
    2015-11-20T13:59:55.370Z Changes+: "test-database\"\의 카운트가 6을 넘길 때까지 기다림
    2015-11-20T13:59:55.761Z HTTP: #791: GET /?_nonce=1448027995207
    2015-11-20T13:59:55.786Z HTTP: #792: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995234
    2015-11-20T13:59:55.787Z HTTP: #792: -> 404 누락 (0.4ms)
    2015-11-20T13:59:55.824Z HTTP: #793: POST /test-database/_revs_diff?_nonce=1448027995276
    2015-11-20T13:59:55.839Z HTTP: #794: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995290
    2015-11-20T13:59:55.840Z HTTP: #794: -> 404 누락 (0.3ms)
    2015-11-20T13:59:55.859Z HTTP: #795: POST /test-database/_bulk_docs?_nonce=1448027995309
    2015-11-20T13:59:55.860Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:56.174Z HTTP: #796: GET /?_nonce=1448027995616
    2015-11-20T13:59:56.200Z HTTP: #797: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995646
    2015-11-20T13:59:56.200Z HTTP: #797: -> 404 누락 (0.2ms)
    2015-11-20T13:59:56.231Z HTTP: #798: POST /test-database/_revs_diff?_nonce=1448027995683
    2015-11-20T13:59:56.246Z HTTP: #799: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995698
    2015-11-20T13:59:56.247Z HTTP: #799: -> 404 누락 (0.3ms)
    2015-11-20T13:59:56.265Z HTTP: #800: POST /test-database/_bulk_docs?_nonce=1448027995718
    2015-11-20T13:59:56.265Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:57.988Z HTTP: #801: GET /?_nonce=1448027997429
    2015-11-20T13:59:58.015Z HTTP: #802: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997462
    2015-11-20T13:59:58.015Z HTTP: #802: -> 404 누락 (0.4ms)
    2015-11-20T13:59:58.065Z HTTP: #803: POST /test-database/_revs_diff?_nonce=1448027997511
    2015-11-20T13:59:58.087Z HTTP: #804: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997531
    2015-11-20T13:59:58.087Z HTTP: #804: -> 404 누락 (0.3ms)
    2015-11-20T13:59:58.106Z HTTP: #805: POST /test-database/_bulk_docs?_nonce=1448027997558
    2015-11-20T13:59:58.106Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:58.545Z HTTP: #806: GET /?_nonce=1448027997993
    2015-11-20T13:59:58.574Z HTTP: #807: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027998022
    2015-11-20T13:59:58.574Z HTTP: #807: -> 404 누락 (0.3ms)
    
    계속 반복되고 두 번째 레코드가 게이트웨이와 동기화되지 않습니다.
    
    로그인 하여 답글 남기기
  2. 다나일 11월 24, 2015에서 11:16 오전
    
    답변해 주셔서 감사합니다!
    
    최신 \"Couchbase 동기화 게이트웨이 커뮤니티 에디션 1.1.1\" 및 \"PouchDB 5.0.1\"로 테스트했습니다(또한 Docker 이미지 포함).
    
    결과는 동일합니다:
    
    앱을 시작할 때와 앱에서:
    1. 첫 번째 레코드 삽입
    2. 동일한 레코드 편집
    3. 동일한 레코드 삭제
    다음에서 변경 사항을 확인할 수 있습니다. https://localhost:4985/_admin/db/test-database
    
    하지만 그 후 동기화 게이트웨이 콘솔에서 이상한 오류가 발생했습니다:
    
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드: 채널이 채널.TimedSet{\"*\":0x0}로 확장됨 ...
    2015-11-20T13:59:55.370Z Changes: 다중 변경 피드 완료
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드: 채널이 채널.TimedSet{\"*\":0x0}로 확장됨 ...
    2015-11-20T13:59:55.370Z Changes+: 멀티체인지피드 대기 중...
    2015-11-20T13:59:55.370Z Changes+: "test-database\"\의 카운트가 6을 넘길 때까지 기다림
    2015-11-20T13:59:55.761Z HTTP: #791: GET /?_nonce=1448027995207
    2015-11-20T13:59:55.786Z HTTP: #792: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995234
    2015-11-20T13:59:55.787Z HTTP: #792: -> 404 누락 (0.4ms)
    2015-11-20T13:59:55.824Z HTTP: #793: POST /test-database/_revs_diff?_nonce=1448027995276
    2015-11-20T13:59:55.839Z HTTP: #794: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995290
    2015-11-20T13:59:55.840Z HTTP: #794: -> 404 누락 (0.3ms)
    2015-11-20T13:59:55.859Z HTTP: #795: POST /test-database/_bulk_docs?_nonce=1448027995309
    2015-11-20T13:59:55.860Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:56.174Z HTTP: #796: GET /?_nonce=1448027995616
    2015-11-20T13:59:56.200Z HTTP: #797: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995646
    2015-11-20T13:59:56.200Z HTTP: #797: -> 404 누락 (0.2ms)
    2015-11-20T13:59:56.231Z HTTP: #798: POST /test-database/_revs_diff?_nonce=1448027995683
    2015-11-20T13:59:56.246Z HTTP: #799: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027995698
    2015-11-20T13:59:56.247Z HTTP: #799: -> 404 누락 (0.3ms)
    2015-11-20T13:59:56.265Z HTTP: #800: POST /test-database/_bulk_docs?_nonce=1448027995718
    2015-11-20T13:59:56.265Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:57.988Z HTTP: #801: GET /?_nonce=1448027997429
    2015-11-20T13:59:58.015Z HTTP: #802: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997462
    2015-11-20T13:59:58.015Z HTTP: #802: -> 404 누락 (0.4ms)
    2015-11-20T13:59:58.065Z HTTP: #803: POST /test-database/_revs_diff?_nonce=1448027997511
    2015-11-20T13:59:58.087Z HTTP: #804: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027997531
    2015-11-20T13:59:58.087Z HTTP: #804: -> 404 누락 (0.3ms)
    2015-11-20T13:59:58.106Z HTTP: #805: POST /test-database/_bulk_docs?_nonce=1448027997558
    2015-11-20T13:59:58.106Z BulkDocs: 문서 \"_local/pqPlGGz4hPigHnXAGLPSNg==\" -> 400 잘못된 문서 ID (400 잘못된 문서 ID)
    2015-11-20T13:59:58.545Z HTTP: #806: GET /?_nonce=1448027997993
    2015-11-20T13:59:58.574Z HTTP: #807: GET /test-database/_local/pqPlGGz4hPigHnXAGLPSNg==?&_nonce=1448027998022
    2015-11-20T13:59:58.574Z HTTP: #807: -> 404 누락(0.3ms)
    
    계속 반복되고 두 번째 레코드가 게이트웨이와 동기화되지 않습니다.
    
    로그인 하여 답글 남기기
  3. 다나일 11월 24, 2015에서 2:59 오후
    
    안녕하세요,
    
    PouchDB 5.0.0은 프로젝트에서 작동하는 것 같지만 5.1.0은 작동하지 않습니다.
    
    여기에 문제를 만들었습니다: https://github.com/pouchdb/pou...
    
    최신 5.1.0 버전으로 업데이트하거나 다른 소식이 있으면 알려주세요, 감사합니다!
    
    로그인 하여 답글 남기기
페어윈드테크놀로지 1월 22, 2016에서 10:01 오후

ADHD 아동을 위해 개발 중인 솔루션에 거의 정확히 이 패러다임을 사용하려고 합니다. 카우치베이스 동기화를 사용하여 Ionic의 사용자 로컬 앱과 클라우드의 마스터 DB간에 사용자 데이터를 동기화하고 싶습니다. DB의 사용자 인증이 웹 사이트 및/또는 기타 모바일 기능에서 데이터베이스 환경 외부의 사용자 요청을 인증하기 위해 Spring Security에서 사용할 CAS /OAuth 2 서비스와 어떻게 작동 / 동기화되는지 잘 모르겠습니다. 카우치베이스 사용자 계정을 oauth 또는 CAS 또는 기타 토큰 기반 서비스와 같은 다른 인증 서비스와 동기화할 수 있는 방법이 있나요? 내 원래 아키텍처는 오프라인 우선 설계가 아니었고 모바일 및 웹 구성 요소에서 웹 서비스에 대한 토큰 기반 액세스를 사용하려고했지만 동기화 기능이있는 CouchBase는 DB 동기화를 수행하는 데 너무 멋져 보이므로이를 활용하고 싶습니다! 어떤 생각이라도 감사하겠습니다! 혹시 카우치베이스에서 아키텍처 컨설팅 서비스를 제공하시나요? 어쨌든 사용자 계정 동기화에 대해 알려주세요!

참고로, 저는 AWS를 사용하고 있으며 다음 게시물도 읽었습니다. https://www.couchbase.com/2015... 제가 하고자 하는 일과도 관련이 있습니다. 웹 버전에서도 데이터와 사용자 계정을 두 플랫폼에서 동기화하려고 한다고 상상해 보세요...

감사합니다,

Rich

로그인 하여 답글 남기기
1. 닉 라보이 1월 22, 2016에서 11:08 오후
  
  CAS라고 하면 Jasig CAS를 말하는 건가요? 싱글 사인온 솔루션과 함께 연동하는 것은 문제가 되지 않는다고 생각합니다.
  
  아키텍처 컨설팅에 대한 요청을 저희 팀에 언급했습니다. 이메일을 보내주실 수 있나요? services@couchbase.com. 이 게시물을 참조하세요.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 페어윈드테크놀로지 1월 22, 2016에서 11:16 오후
    
    닉, 네, JASIG CAS를 말씀드렸습니다. 간단히 말해서, 예, 저는 토큰 기반 SSO 솔루션과 CB를 가장 잘 통합하는 방법을 찾고 있습니다. 서비스 팀에 이메일을 보내겠습니다.
    
    로그인 하여 답글 남기기
    1. 닉 라보이 1월 22, 2016에서 11:42 오후
      
      멋지네요. 다시 연락드릴게요 :-)
      
      로그인 하여 답글 남기기
타렉 무바라크 4월 26, 2016에서 11:39 오전

안녕하세요 닉,

이 튜토리얼에 많은 도움을 주셔서 감사합니다!

내 동기화 게이트웨이에 문서를 저장하려고 할 때 약간의 문제가 있는 것 같지만 (해마 또는 Couchbase 서버의 버킷을 통해 ).

또한 동기화 게이트웨이에서 이상한 출력이 나옵니다(\'기본\' 버킷을 사용하고 있습니다):

Tareks-MacBook-Pro:ionic-framework-pouchdb-master Tarek$ sync_gateway sync-gateway-config.json
2016-04-26T14:36:38.840+03:00 로깅을 활성화합니다: [CRUD+ REST+ 변경+ 첨부+]
2016-04-26T14:36:38.840+03:00 ==== 카우치베이스 동기화 게이트웨이/1.1.1(10;2fff9eb) ====
2016-04-26T14:36:38.841+03:00 구성됨 4개의 CPU를 모두 사용하도록 이동; 이것을 재정의하려면 setenv GOMAXPROCS를 설정합니다.
2016-04-26T14:36:38.841+03:00 5000개의 파일 디스크립터를 허용하도록 구성된 프로세스
2016-04-26T14:36:38.841+03:00 db /default를 버킷 \"default\", 풀 \"default\", 서버 로 여는 중입니다.
2016-04-26T14:36:38.841+03:00 에서 Couchbase 데이터베이스 기본값 열기
2016/04/26 14:36:38 시도 중 https://127.0.0.1:8091/pools/default/bucketsStreaming/default
2016/04/26 14:36:38 선택한 노드에서 시도 중 0
2016/04/26 14:36:38 버킷 기본값에 대한 새로운 구성이 추가되었습니다.
2016/04/26 14:36:38 선택한 노드에서 시도 중 0
2016-04-26T14:36:38.987+03:00 게스트 사용자 구성 재설정
2016-04-26T14:36:38.987+03:00 127.0.0.1:4985에서 관리자 서버 시작
2016-04-26T14:36:38.991+03:00 서버 시작 :4984 ...
2016-04-26T14:36:49.750+03:00 HTTP: #001: GET /default/?_nonce=1461670609748
2016-04-26T14:37:49.464+03:00 HTTP: #002: GET /default/?_nonce=1461670669460
2016-04-26T14:37:50.572+03:00 HTTP: #003: GET /default/?_nonce=1461670670570
2016-04-26T14:37:50.833+03:00 HTTP: #004: GET /default/?_nonce=1461670670831
2016-04-26T14:37:52.465+03:00 HTTP: #005: GET /default/?_nonce=1461670672463
2016-04-26T14:37:52.793+03:00 HTTP: #006: GET /default/?_nonce=1461670672792
2016-04-26T14:37:55.567+03:00 HTTP: #007: GET /default/?_nonce=1461670675566
2016-04-26T14:37:56.393+03:00 HTTP: #008: GET /default/?_nonce=1461670676392
2016-04-26T14:38:00.794+03:00 HTTP: #009: GET /default/?_nonce=1461670680792
2016-04-26T14:38:02.589+03:00 HTTP: #010: GET /default/?_nonce=1461670682587
...

제 쪽에서도 더 필요한 정보가 있으면 알려주세요.

잘 부탁드립니다,
타렉 엠

로그인 하여 답글 남기기
1. 닉 라보이 4월 26, 2016에서 8:15 오후
  
  안녕하세요, 타렉
  
  동기화 게이트웨이 로그에 비정상적인 내용이 보이지 않습니다. 저장할 때 문제가 있는 부분에 대해 자세히 알려주실 수 있나요?
  
  최고,
  
  로그인 하여 답글 남기기
  1. 타렉 무바라크 4월 26, 2016에서 8:28 오후
    
    안녕하세요 닉,
    
    신속한 답변에 감사드립니다! 문제는 현재 내 CouchBase 서버에서 새 문서를 볼 수 없다는 것입니다 (내 주요 우선 순위는 해마 사용시 대신 버킷의 데이터를 보는 것입니다). 제가 동기화 게이트웨이를 구성한 방법은 다음과 같습니다(현재 버전 1.2 사용 중):
    
    {
    \"log\":[\"CRUD+\", \"REST+\", \"Changes+\", \"Attach+\"],
    \"데이터베이스\": {
    \"default\": {
    \"server\":\"https://localhost:8091\",
    \"버킷\":\"기본값\",
    \"동기화\":함수 (문서) { 채널(doc.channels); },
    \"users\": {
    \"GUEST\": {
    \"disabled\": false,
    \"admin_channels\": [\"*\"]
    }
    }
    }
    },
    \"CORS\": {
    \"Origin\": [\"https://localhost:9000\"],
    \"LoginOrigin\": [\"https://localhost:9000\"],
    \"헤더\": [\"콘텐츠 유형\"],
    \"MaxAge\": 17280000
    }
    }
    
    동기화 게이트웨이에 로깅 레벨을 추가하려고 시도했지만 호출되는 POST 또는 PUT 메시지를 볼 수 없었고 동기화 게이트웨이에서도 볼 수 없었습니다.
    
    또한 CORS용 python -m SimpleHTTPServer 9000 명령을 사용했습니다.
    
    단계를 놓쳤거나 구성이 잘못되어 있을까요?
    
    미리 감사드립니다. :)
    
    로그인 하여 답글 남기기
    1. 닉 라보이 4월 27, 2016에서 9:57 오후
      
      아이오닉 서브, 아이오닉 아이오닉-라이브 리로드 또는 아이오닉 뷰를 사용하려는 건 아니시죠? 이러한 플러그인은 기본 플러그인에서는 작동하지 않는 경향이 있습니다. 또한 애플리케이션 로그에 어떤 내용이 있나요? 아마 거기서부터 시작하고 싶을 겁니다.
      
      최고,
      
      로그인 하여 답글 남기기
      1. 타렉 무바라크 5월 5, 2016에서 1:21 오후
        
        안녕하세요 닉,
        
        정말 고마워요! 처음에는 아이오닉 서브에서 사용하다가 모바일 기기에서 직접 사용해 보니 원활하게 작동했습니다.
        하지만 이전 시도에서는 모바일 디바이스와 서버가 서로 다른 네트워크에 연결되어 있어 약간의 혼란을 일으켰기 때문에 실패했습니다.
        
        닉, 정말 감사합니다!
      2. 닉 라보이 5월 6, 2016에서 12:20 오후
        
        문제 없습니다!

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

크로스 플랫폼 스토리지 및 Ionic 프레임워크, Couchbase, PouchDB와의 동기화

필요한 것

Couchbase 동기화 게이트웨이 받기

아이오닉 프레임워크 프로젝트 만들기

종속성 포함

인덱스 파일 수정

PouchDB AngularJS 서비스 만들기

로컬 데이터베이스 생성 및 동기화 시작

뷰를 위한 컨트롤러 디자인

Ionic 프레임워크 뷰 정의

목록 보기 만들기

양식 보기 만들기

동기화 게이트웨이 구성

애플리케이션 테스트

Android용 테스트

iOS용 테스트

결론

받은 편지함에서 카우치베이스 블로그 업데이트 받기

작성자

게시자 닉 라보이

댓글 하나

댓글 남기기 응답 취소

카우치베이스 카펠라를 시작할 준비가 되셨나요?

구축 시작

카펠라 무료 사용

연락하기