Couchbase Mobile in an Android and iOS Ionic 2 applicat

작년에 저는 Ionic 프레임워크 모바일 애플리케이션의 카우치베이스 모바일. 당시에는 Ionic 프레임워크 1.0과 AngularJS 1.0을 사용했습니다. 몇 달 동안 기술이 변화하여 고대 프레임워크처럼 보이는 것에서 훨씬 더 현대적인 반복 작업으로 이동했습니다.

앵귤러 2가 출시되고 아이오닉 2가 안정적으로 출시됨에 따라 이전에 했던 작업을 다시 살펴보고 안드로이드 및 iOS 아이오닉 2 애플리케이션에서 카우치베이스 모바일을 살펴보는 것이 좋겠다고 생각했습니다.

요구 사항

이 프로젝트를 가능하게 하려면 몇 가지를 설치하여 사용할 수 있어야 합니다. 다음과 같습니다:

Node.js 4.0+
Ionic 프레임워크 2.0
Android SDK 또는 Xcode
카우치베이스 동기화 게이트웨이

아이오닉 프레임워크는 모든 프로젝트 종속성을 처리하기 위해 Node.js와 함께 제공되는 노드 패키지 관리자(NPM)를 사용합니다. Android 애플리케이션을 빌드하려면 Android SDK가 설치되어 있어야 하고, iOS 애플리케이션을 빌드하려면 Xcode가 설치된 Mac이 필요합니다. 마지막으로 동기화를 데모하려면 Couchbase 동기화 게이트웨이가 설치되어 있고 사용 가능한 상태여야 합니다.

새 Ionic 2 프로젝트 만들기

Ionic 2, Angular 2, TypeScript로 매우 간단한 할 일 목록 애플리케이션을 만들어 보겠습니다. 이 할 일 목록은 아래 애니메이션 이미지에 표시된 것처럼 여러 장치와 플랫폼 간에 동기화됩니다.

이것은 Ionic 프레임워크 1.0 튜토리얼과 다른 많은 애플리케이션에서 보았던 것과 동일한 애플리케이션입니다. 모바일 튜토리얼. 이는 매우 유용한 예시이기 때문에 동일한 애플리케이션입니다.

간단하게 설명하기 위해 새 프로젝트부터 시작하겠습니다. 명령 프롬프트(Windows) 또는 터미널(Linux 및 Mac)에서 다음을 실행합니다:

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

이온 시작 카우치베이스 프로젝트 빈 --v2

cd 카우치베이스 프로젝트

이온 플랫폼 추가 ios

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

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

이 프로젝트는 카우치베이스 폰갭 플러그인 을 클릭해야 작동합니다. 놀라지 마세요. 이름에는 PhoneGap이라고 되어 있지만 실제로는 Ionic 2와 매우 호환되는 아파치 코르도바 플러그인일 뿐입니다. 이 플러그인을 프로젝트에 설치하려면 다음을 실행하세요:

ionic plugin add https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git

1	이온 플러그인 추가 https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git

Apache Cordova용 Couchbase Lite 플러그인은 전적으로 사용 가능한 RESTful API에서 작동합니다. 저는 개인적으로 애플리케이션에서 API로 작업하고 싶지 않았기 때문에 API를 멋진 JavaScript 래퍼를 만들어서 쾌적한 클래스로 전환했습니다. 래퍼입니다,코도바-카우치베이스를 사용하면 엔드포인트에 대한 HTTP 요청에 대해 걱정하지 않고 메서드를 사용할 수 있습니다.

프로젝트에 코도바-카우치베이스를 설치하려면 다음을 실행하세요:

npm install cordova-couchbase --save

1	npm 설치 코도바-카우치베이스 --저장

이제 Ionic 2 애플리케이션 개발을 시작할 준비가 되었습니다.

Angular 2 공급자를 통해 Couchbase 관리하기

Angular 2 애플리케이션에서 데이터베이스로 작업할 때는 제공자라고도 하는 서비스 안에 데이터베이스를 보관하는 것이 좋습니다. 이렇게 하면 단일 파일에 많은 데이터베이스 로직을 부트스트랩할 수 있을 뿐만 아니라 데이터베이스 계층을 나머지 코드와 분리된 상태로 유지할 수 있습니다.

Ionic CLI를 사용하여 다음을 실행하여 공급자 클래스를 생성합니다:

ionic g provider CouchbaseProvider

1	이온 g 공급자 카우치베이스 공급자

기본적으로 이 명령은 다음 위치에 디렉터리와 파일을 생성합니다. src/providers/couchbase-provider.ts 를 추가합니다. 이 공급자는 다음과 같은 모양이어야 합니다:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Platform } from 'ionic-angular';
import { Couchbase, Database } from 'cordova-couchbase/core';
import 'rxjs/add/operator/map'; 

@Injectable()
export class CouchbaseProvider {
    public constructor(public http:Http) { }
}

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

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

가져오기 { 플랫폼 } 에서 '이온-각형';

가져오기 { 카우치베이스, 데이터베이스 } 에서 '코도바-카우치베이스/코어';

가져오기 'rxjs/add/operator/map';

@주사제()

내보내기 클래스 카우치베이스 공급자 {

public 생성자(public http:Http) { }

}

카우치베이스 서비스가 어떻게 작동할지, 그리고 이 서비스가 성공하기 위해 어떤 코드가 들어가야 할지 생각해 보겠습니다.

우리는 데이터베이스 서비스가 싱글톤으로 작동하기를 원합니다. 즉, 전체 애플리케이션에 대해 하나의 단일 데이터베이스 클래스가 인스턴스화되기를 원합니다. 일종의 공유 서비스와 비슷합니다. 이를 구성하려면 생성자 메소드를 사용합니다:

private isInstantiated:boolean;
private database:Database;
public constructor(public http:Http, platform:Platform) {
    if(!this.isInstantiated) {
        platform.ready().then(() => {
            (new Couchbase()).openDatabase("nraboy").then(database => {
                this.database = database; 
                this.isInstantiated = true;
            }, error => {
                console.error(error);
            });
        });
    }
}

비공개 인스턴스화됩니다:부울;

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

public 생성자(public http:Http, 플랫폼:플랫폼) {

만약(!이.isInstantiated) {

플랫폼.준비().다음(() => {

(new 카우치베이스()).오픈 데이터베이스("nraboy").다음(데이터베이스 => {

이.데이터베이스 = 데이터베이스;

이.isInstantiated = true;

}, 오류 => {

콘솔.오류(오류);

});

}

그렇다면 지금까지 위 코드에서 무슨 일이 일어나고 있을까요? 먼저 두 개의 개인 변수를 만들었습니다. 이 부울은 데이터베이스가 이미 인스턴스화되었는지 여부를 알려줍니다. 그리고 데이터베이스 변수는 현재 열려 있는 데이터베이스를 저장합니다.

내부 생성자 메서드 자체에서 조건부 논리 검사를 수행합니다. 아파치 코르도바 플러그인은 네이티브 코드를 사용하기 때문에 디바이스가 준비되었는지 확인해야 합니다. 이는 Ionic의 platform.ready 메서드를 호출합니다. 장치가 준비되면 데이터베이스가 존재하지 않더라도 데이터베이스를 열고 개인 변수로 설정할 수 있습니다.

public getDatabase() {
    return this.database;
}

public getDatabase() {

반환 이.데이터베이스;

}

오픈 데이터베이스는 위의 방법을 사용하여 제공업체에서 검색할 수 있습니다. getDatabase 메서드를 사용합니다.

아직 끝나지 않았습니다. 카우치베이스 공급자 클래스를 아직 만들지 않았습니다. 향후 쿼리를 위해 MapReduce 뷰를 생성하고 변경 리스너를 설정해야 합니다. 이 모든 작업은 생성자 메서드를 사용하여 데이터베이스를 열 수 있습니다.

예를 들어, 이제 다음을 살펴봅시다:

private isInstantiated:boolean;
private database:Database;
private listener:EventEmitter = new EventEmitter();
 
public constructor(public http:Http, platform:Platform) {
    if(!this.isInstantiated) {
        platform.ready().then(() => {
            (new Couchbase()).openDatabase("nraboy").then(database => {
                this.database = database;
                let views = {
                    items: {
                        map:function(doc) {
                            if (doc.type == "list" && doc.title) {
                                emit(doc._id,{ title: doc.title, rev: doc._rev })
                            }
                        }.toString()
                    }
                };
                this.database.createDesignDocument("_design/todo", views);
                this.database.listen(change => {
                    this.listener.emit(change.detail);
                });
                this.isInstantiated = true;
            },error => {
                console.error(error);
            });
        });
    }
}

비공개 isInstantiated:부울;

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

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

public 생성자(public http:Http, 플랫폼:플랫폼) {

만약(!이.isInstantiated) {

플랫폼.준비().다음(() => {

(new 카우치베이스()).오픈 데이터베이스("nraboy").다음(데이터베이스 => {

이.데이터베이스 = 데이터베이스;

let 조회수 = {

항목: {

지도:함수(doc) {

만약 (doc.유형 == "목록" && doc.title) {

emit(doc._id,{ title: doc.title, rev: doc._rev })

}

}.toString()

}

};

이.데이터베이스.디자인 문서 생성("_디자인/할일", 조회수);

이.데이터베이스.듣기(변경 => {

이.리스너.emit(변경.세부 정보);

});

이.isInstantiated = true;

},오류 => {

콘솔.오류(오류);

});

}

위의 코드에서 리스너 변수를 생성하여 Angular 2 코드에서 구독할 수 있는 변경 사항을 방출합니다. 내에서 생성자 메서드를 사용하여 다음과 같은 MapReduce 뷰를 만듭니다. 항목 라는 속성이 문서에 포함된 경우에만 키-값 쌍을 생성하는 논리를 사용하여 유형 라는 속성과 "목록"과 같은 title 그 무엇과도 바꿀 수 없습니다.

그런 다음 선택한 디자인 문서에 뷰를 추가하고 리스너를 활성화합니다. 리스너가 활성화되면 데이터베이스가 변경되면 리스너가 트리거됩니다. 즉, 문서를 추가하거나, 문서를 변경하거나, 문서를 삭제하면 리스너가 변경 사항을 내보냅니다.

public getChangeListener(): EventEmitter {
    return this.listener;
}

public getChangeListener(): 이벤트 이미터 {

반환 이.리스너;

}

리스너는 애플리케이션의 다양한 페이지에서 다음과 같이 호출하여 액세스할 수 있습니다. 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 { CouchbaseProvider } from "../providers/couchbase-provider";

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

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

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

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

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

가져오기 { 카우치베이스 공급자 } 에서 "../providers/couchbase-provider";

@NgModule({

선언: [

MyApp,

홈 페이지

수입: [

이온 모듈.forRoot(MyApp)

부트스트랩: [IonicApp],

항목 구성 요소: [

MyApp,

홈 페이지

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

})

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

공급자를 가져와서 다음과 같이 추가되었습니다. 공급자 배열이 필요하신가요? 이제 애플리케이션 로직을 추가하는 데 집중할 수 있습니다.

Ionic 2 애플리케이션 내에서 Couchbase 사용

애플리케이션이 시작될 때 데이터베이스를 여는 것이 좋습니다. 첫 페이지가 로드될 때 이 작업을 수행할 수도 있지만 반드시 그럴 필요는 없습니다.

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

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';
import { CouchbaseProvider } from "../providers/couchbase-provider";

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage = HomePage;
    constructor(platform: Platform, couchbase: CouchbaseProvider) { 
        platform.ready().then(() => {
            StatusBar.styleDefault(); 
            Splashscreen.hide();
        });
    }
}

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

가져오기 { 플랫폼 } 에서 '이온-각형';

가져오기 { 상태 표시줄, 스플래시 화면 } 에서 '이온 네이티브';

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

가져오기 { 카우치베이스 공급자 } 에서 "../providers/couchbase-provider";

@구성 요소({

templateUl: 'app.html'

})

내보내기 클래스 MyApp {

rootPage = 홈 페이지;

생성자(플랫폼: 플랫폼, 카우치베이스: 카우치베이스 공급자) {

플랫폼.준비().다음(() => {

상태 표시줄.스타일 기본값();

스플래시 화면.숨기기();

});

}

위의 코드에서 우리는 공급자를 가져와서 이를 생성자 메서드를 호출합니다. 첫 페이지가 로드되기 전에 트리거되어 데이터베이스를 열고 뷰를 생성하고 리스너를 시작합니다.

이제부터는 처음이자 유일한 신청 페이지에서 시간을 보내겠습니다. 즉, 우리는 프로젝트의 src/pages/home/home.ts 그리고 src/pages/home/home.html 파일.

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

import { Component, NgZone } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { CouchbaseProvider } from "../../providers/couchbase-provider";

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

    public items: Array;

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

    public ionViewDidEnter() { }

    public refresh() { }

    public add() { }

}

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

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

가져오기 { 카우치베이스 공급자 } 에서 "../../제공자/카우치베이스 제공자";

@구성 요소({

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

templateUl: 'home.html'

})

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

public 항목: 배열;

public 생성자(public navCtrl: NavController, public alertCtrl: AlertController, public 카우치베이스: 카우치베이스 공급자, public 영역: NgZone) {

이.항목 = [];

}

public ionViewDidEnter() { }

public 새로 고침() { }

public 추가() { }

}

이것이 의미하는 바를 세분화하여 각 방법을 하나씩 추가해 보겠습니다.

우리가 가져오는 것을 볼 수 있습니다. 카우치베이스 공급자 다른 구성 요소와 함께. 각 구성 요소가 무엇을 의미하는지 살펴보겠습니다.

그리고 항목 배열은 UI에 표시될 모든 할 일 항목을 보유하게 되므로 공개 배열인 이유입니다. 이 배열의 생성자 메서드에는 사용하려는 각 컴포넌트에 대한 많은 인젝션이 있습니다. 또한 공용 배열을 초기화하는 곳이기도 합니다.

에 데이터를 로드하는 것은 절대 바람직하지 않습니다. 생성자 메서드에 대한 ionViewDidEnter 메서드를 사용합니다. 이 방법은 대부분의 무거운 작업이 이루어지는 곳입니다:

public ionViewDidEnter() {
    setTimeout(() => {
        this.couchbase.getChangeListener().subscribe(data => {
            for(let i = 0; i < data.length; i++) {
                if(!data[i].hasOwnProperty("deleted") && data[i].id.indexOf("_design") === -1) {
                    this.couchbase.getDatabase().getDocument(data[i].id).then(result => {
                        if(result.type === "list") {
                            this.zone.run(() => {
                                this.items.push(result);
                            });
                        }
                    });
                }
            }
        });
        this.refresh();
    }, 100);
}

public ionViewDidEnter() {

setTimeout(() => {

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

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

만약(!데이터[i].hasOwnProperty("삭제됨") && 데이터[i].id.indexOf("_design") === -1) {

이.카우치베이스.getDatabase().getDocument(데이터[i].id).다음(결과 => {

만약(결과.유형 === "목록") {

이.영역.실행(() => {

이.항목.push(결과);

});

}

});

}

});

이.새로 고침();

}, 100);

}

먼저 시간 초과를 확인할 수 있습니다. 우리는 많은 비동기 컴포넌트, 특히 Couchbase 컴포넌트로 작업하고 있습니다. 데이터베이스를 사용하고자 할 때 제때에 데이터베이스가 준비되지 않는 경쟁 조건이 종종 발생합니다. 100ms의 간단한 타임아웃을 추가하는 것만으로도 충분합니다. 이 작업을 수행하는 다른 방법도 있지만 저는 타임아웃을 선호합니다.

페이지가 로드되면 공급자에서 생성한 리스너를 구독하려고 합니다. 방출되는 모든 데이터를 반복할 것입니다. 이 특정 예에서는 삭제를 무시하고 변경과 추가를 동일하게 처리합니다. 여러분의 애플리케이션에서는 좀 더 구체적인 로직을 추가할 수 있습니다. 기본적으로 변경이 삭제가 아닌 한, 변경된 키를 가져와 문서에서 조회를 수행한다는 것입니다. 문서가 할 일 문서 중 하나인 경우 공개 배열에 추가하려고 합니다.

그렇다면 영역 물건? 이미터가 이상해질 수 있으므로 이벤트를 받으면 앵귤러 2 영역을 업데이트하고 싶습니다. 이 작업이 필요하지 않을 수도 있지만, 변경 사항으로 UI가 업데이트되지 않으면 영역 물건이 그 이유입니다.

변경 리스너를 만든 후에는 현재 상태 그대로 데이터베이스를 쿼리하려고 합니다. 여기에서 새로 고침 메서드가 작동합니다:

public refresh() {
    this.couchbase.getDatabase().queryView("_design/todo", "items", {}).then(result => {
        this.items = [];
        for(var i = 0; i < result.rows.length; i++) { this.items.push(result.rows[i].value); } }, error => {
        console.error("ERROR: " + JSON.stringify(error));
    });
}

public 새로 고침() {

이.카우치베이스.getDatabase().쿼리 뷰("_디자인/할일", "items", {}).다음(결과 => {

이.항목 = [];

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

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

});

}

그리고 새로 고침 메서드는 뷰를 쿼리하고 각 결과 항목을 공용 배열에 추가합니다. 편의를 위해 들어오는 변경 사항이 자동으로 추가되므로 한 번만 쿼리하면 됩니다.

그리고 추가 메서드가 이 Ionic 2 페이지의 마지막 메서드입니다:

public add() {
    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 => {}
            },
            {
                text: 'Save',
                handler: data => {
                    this.couchbase.getDatabase().createDocument({type: "list", title: data.title});
                }
            }
        ]
    });
    prompt.present();
}

public 추가() {

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

title: '할 일 항목',

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

입력: [

{

이름: 'title',

플레이스홀더: 'Title'

버튼: [

{

텍스트: '취소',

핸들러: 데이터 => {}

{

텍스트: '저장',

핸들러: 데이터 => {

이.카우치베이스.getDatabase().createDocument({유형: "목록", title: 데이터.title});

}

]

});

프롬프트.현재();

}

실행하면 프롬프트가 표시됩니다. 사용자가 프롬프트에 정보를 입력하면 Couchbase 내에 문서로 저장됩니다. 변경 리스너는 이 로컬 변경 사항을 수신하여 목록에 추가합니다.

이 애플리케이션의 기본이 되는 간단한 UI는 src/pages/home/home.html 파일은 다음과 같이 생겼습니다:

<ion-header>
    <ion-navbar>
        <ion-title>
            Couchbase w/ Ionic 2
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="add()">
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let item of items">
            {{ item.title }}
        </ion-item>
    </ion-list>
</ion-content>

<ion-헤더>

<ion-navbar>

<ion-title>

카우치베이스 w/ Ionic 2

</ion-title>

<ion-버튼 끝>

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

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

</버튼>

</ion-버튼>

</ion-navbar>

</ion-헤더>

<ion-콘텐츠 패딩>

<ion-목록>

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

</ion-항목>

</ion-목록>

</ion-콘텐츠>

UI에는 프롬프트를 표시하는 버튼이 있는 작업 표시줄이 있습니다. 핵심 콘텐츠는 타입스크립트 파일의 공용 배열을 반복하는 목록 보기입니다.

장치와 플랫폼 간 동기화

지금까지는 모든 것이 하나의 장치에 로컬로만 동기화되었습니다. 지금까지 추가한 어떤 기능도 Couchbase 동기화 게이트웨이 또는 다른 장치와의 동기화를 담당하지 않았습니다. 그러나 동기화 지원을 추가하는 데는 거의 노력이 필요하지 않습니다.

프로젝트의 src/providers/couchbase-provider.ts 파일을 열고 데이터베이스를 연 후 다음 줄을 추가합니다:

this.database.sync("http://192.168.57.1:4984/example", true);

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

물론 호스트 이름과 데이터베이스 이름을 원격 동기화 게이트웨이 인스턴스의 이름으로 바꾸세요. 이제 애플리케이션이 지속적으로 동기화됩니다. 코드 한 줄로 동기화를 지원한다는 것이 정말 대단하지 않나요?

간단한 동기화 게이트웨이 인스턴스를 스핀업하려면 지금 여기에서 다음을 생성하세요. 동기화 게이트웨이-config.json file:

{
    "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": ["*"]

}

동기화 게이트웨이를 시작할 때 해당 특정 구성 파일을 가리키세요. 업데이트 동기화 함수를 사용하여 호스트와 데이터베이스를 일치시킬 수 있습니다.

완성된 프로젝트를 테스트 드라이브에 가져가기

이 가이드가 다소 길었다면 이해합니다. 저는 이 가이드에 앞서 샘플 프로젝트 를 실행하고 검토하여 이 튜토리얼을 보완할 수 있습니다.

실행하여 프로젝트를 복제합니다:

git clone https://github.com/couchbaselabs/todolite-ionic2

1	git 복제 https://github.com/couchbaselabs/todolite-ionic2

프로젝트가 다운로드되면 프로젝트 종속성, 플러그인 및 플랫폼을 복원해야 합니다. 이러한 종속성을 복원하려면 다음을 실행하세요:

npm install
ionic state restore

1 2	npm 설치 이온 상태 복원

이제 기기 또는 시뮬레이터에서 애플리케이션을 실행할 수 있습니다. 잊지 말고 Couchbase 동기화 게이트웨이를 실행하고 동기화 메서드를 사용하여 원격 설정의 메서드를 반영합니다.

결론

방금 다음을 사용하여 크로스 플랫폼 iOS 및 Android 하이브리드 모바일 애플리케이션을 만드는 방법을 살펴보았습니다. 아이오닉 2 를 사용하고 있습니다. 이것은 한 단계 더 나아가서 저의 이전 기사 아이오닉 프레임워크 1.0과 카우치베이스 모바일을 시연했습니다.

Nic Raboy, 개발자 옹호자, Couchbase

이 문서 공유하기

댓글 하나

ibkar 5월 23, 2017에서 2:49 오전

안녕하세요 팀,

앱을 실행하려고 하는데 홈 화면에 "Couchbase Lite가 설치되어 있지 않습니다"라는 경고가 표시됩니다.

심지어 아래 플러그인도 설치했습니다.

코도바 플러그인 추가 코도바 플러그인 화이트리스트 추가

코도바 플러그인 추가 https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git

로그인 하여 답글 남기기
1. Nic Raboy, 개발자 옹호자, Couchbase 5월 23, 2017에서 5:48 오전
  
  라이브 리로드, 아이오닉 서브 또는 아이오닉 뷰를 사용하려고 하나요? 네이티브 플러그인은 이러한 방식으로 에뮬레이션할 수 없으며 실제 디바이스나 시뮬레이터에 바이너리로 설치해야 합니다.
  
  이 세 가지 중 하나라도 하지 않는다고 확인하실 수 있나요?
  
  로그인 하여 답글 남기기
ibkar 5월 24, 2017에서 12:51 오전

빠른 답변에 감사드립니다.

"이온 코도바 실행 안드로이드"명령을 실행하면 컴파일하는 동안 아래 메시지가 표시됩니다. 스크린 샷 링크도 제공합니다.

https://firebasestorage.googleapis.com/v0/b/tw-chatapp.appspot.com/o/Capture.PNG?alt=media&token=c3bfa5d6-8246-4196-9a89-7ef6941502a4

[13:03:02] tslint: E:/E WORKS/CouchBase/src/pages/home/home.ts, 줄: 4
사용하지 않은 가져오기: '카우치베이스'
L3: "../../providers/couchbase/couchbase"에서 { CouchbaseProvider }를 가져옵니다;
L4: "cordova-couchbase/core"에서 { 카우치베이스, 데이터베이스 }를 가져옵니다;
[13:03:02] tslint: E:/E WORKS/CouchBase/src/pages/home/home.ts, 줄: 4
사용하지 않은 가져오기: '데이터베이스'
L3: "../../providers/couchbase/couchbase"에서 { CouchbaseProvider }를 가져옵니다;
L4: "cordova-couchbase/core"에서 { 카우치베이스, 데이터베이스 }를 가져옵니다;

앱을 실행한 후 아래 오류가 발생했습니다.
https://firebasestorage.googleapis.com/v0/b/tw-chatapp.appspot.com/o/mobile.PNG?alt=media&token=e24e91f7-dce9-4c0c-a258-844001d72f0c

여러분의 답변을 기다리겠습니다.
감사합니다.

로그인 하여 답글 남기기
Marburg 6월 7, 2017에서 11:54 오후

안녕하세요,

이 예제를 따르려고 하는데 Couchbase-Lite-PhoneGap 플러그인을 설치할 수 없습니다.
다음을 사용하여 추가하려고 할 때
"아이오닉 코도바 플러그인 추가 https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git”
연결에 문제가 있거나 플러그인 사양이 잘못되었다는 오류가 발생합니다. 연결 문제가 아니며 동일한 명령으로 깃허브에서 다른 플러그인을 추가할 수 있습니다.
이 문제를 우회하여 플러그인을 수동으로 다운로드하여 압축을 풀고 폴더 경로와 함께 로컬 플러그인으로 추가하려고 하면 유효한 package.json이 누락되었다는 오류가 발생합니다.

로그인 하여 답글 남기기
1. Nic Raboy, 개발자 옹호자, Couchbase 6월 8, 2017에서 7:37 오전
  
  명령은 '이온 플러그인 추가' 또는 '코도바 플러그인 추가' 중 하나입니다. '이온 코도바 플러그인 추가' 명령은 없습니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. leschap 7월 12, 2017에서 5:43 오전
    
    실제로 이온 플러그인 명령은 이온 코도바 플러그인으로 이름이 변경되었습니다.
    "아이오닉 코도바 플러그인 추가 https://github.com/couchbaselabs/Couchbase-Lite-PhoneGap-Plugin.git"가 플러그인을 설치하는 올바른 명령인지, Marburg 문제를 해결하는 방법을 모르겠습니다.
    
    로그인 하여 답글 남기기
  2. Marburg 10월 10, 2017에서 6:28 오전
    
    이제 드디어 설정에 성공했습니다.
    하지만 앱을 이온 서비스하려고 하면 this.couchbase.getDatabase(...)가 정의되지 않았다는 메시지가 표시됩니다.
    
    로그인 하여 답글 남기기
    1. Nic Raboy, 개발자 옹호자, Couchbase 10월 10, 2017에서 7:16 오전
      
      이 플러그인은 네이티브 플러그인이므로 제공할 수 없습니다. 실제 작업하는 것처럼 컴파일하고 설치해야 합니다.
      
      로그인 하여 답글 남기기
      1. Marburg 10월 10, 2017에서 2:08 오후
        
        물론이죠! 피드백 주셔서 감사합니다. 개발 및 라이브 리로드가 더 어려워지긴 하지만 에뮬레이트 모드에서도 가능한 것 같습니다.
      2. Marburg 10월 11, 2017에서 7:59 오전
        
        에서 예기치 않은 JSON 입력 종료
        Couchbase()).openDatabase("todolite").then(......)
        
        [16:54:48] console.log: Ionic Native: 2325ms 후에 디바이스 준비 이벤트가 발생했습니다.
        [16:54:48] ws 메시지를 여는 중 오류가 발생했습니다: {"카테고리":"콘솔","유형":"로그","데이터"
        ["장치 준비 완료",2152,"ms"]}
        [16:54:48] console.error: ERROR
        [개체 개체]
        [16:54:48] console.error: ERROR
        [개체 개체]
ashishtyd 8월 13, 2017에서 11:49 오후

안녕하세요 닉 라보이입니다,

저는 Couchbase 초보자이며 데이터 동기화 기능을 갖춘 다중 사용자 하이브리드 모바일 애플리케이션을 개발하고자 합니다.
이미 MySQL을 백엔드로 사용하는 안드로이드(네이티브) 앱을 개발하고 있으며 오프라인 지원을 위해 해당 MySQL 데이터베이스를 Couchbase로 변환하고 싶습니다. 그렇다면 어떤 사항을 따라야하며 MySQL 데이터베이스를 Couchbase로 변환하는 방법은 무엇입니까?
미리 감사드립니다.

로그인 하여 답글 남기기
Marburg 10월 12, 2017에서 3:16 오전

오류 스크린샷과 함께 모든 세부 정보를 첨부하세요.
동기화 게이트웨이에 연결하는 것을 주석 처리했기 때문에 이미 로컬 데이터베이스를 설정할 때 json 오류가 발생했습니다.

https://drive.google.com/file/d/0B0KRHtKNSw4xUXdfMWhEcU16Nms/view?usp=sharing

로그인 하여 답글 남기기
1. Marburg 10월 12, 2017에서 5:45 오전
  
  코도바-카우치베이스 래퍼 안에 있습니다. 이제 해당 파일을 프로젝트에 추가하고 로컬에서 호출합니다.
  지금까지는 데이터베이스.ts 메서드 makeRequest로 추적할 수 있었습니다.
  
  로그인 하여 답글 남기기
  1. Marburg 10월 12, 2017에서 8:51 오전
    
    네, 제가 할 수 있는 한 최대한 노력했습니다.
    프로젝트 내부에서 코드바-카우치베이스 래퍼를 가져와서 Murilo Perrone이 한 것처럼 #3 버그를 수정하면 json 파싱 오류가 수정되었지만 데모가 작동하지는 않습니다.
    콘솔 로그에 몇 가지 디버깅 정보를 추가하여 13초 후에 실제로 디바이스 준비 이벤트가 실행되도록 했습니다,
    couchbase.openDatabase()는 데이터베이스.getDatabase()를 호출하고, 이 데이터베이스는 메서드 GET 및 url을 사용하여 makeRequest 메서드를 호출합니다. http://c3c19c87-dcc1-4b6d-a3db-fc7be65a427f:7adfa00d-0fd7-44ea-95b9-3cbe7f0609dd@localhost:5984/councilapp
    
    모든 것이 잘 진행되는 것 같습니다. 이.couchbase.getDatabase()가 정의되지 않은 상태로 유지되기 때문에 아무것도 반환하지 않는 것 같습니다,
    정의되지 않은 쿼리 뷰를 읽을 수 없습니다,
    정의되지 않은 getDocument를 읽을 수 없습니다.
    
    그래서 제가 가진 제한된 지식으로 3일 동안 시도해 보았지만 더 이상 작동할 수 없습니다. 아마 이쯤에서 포기할 것 같습니다.
    
    17:39:22] console.log: Angular가 개발 모드에서 실행 중입니다. enableProdMode()를 호출하여 프로덕션을 활성화합니다.
    모드로 전환합니다.
    17:39:23] console.log: deviceready가 5초 후에도 실행되지 않았습니다.
    17:39:23] console.warn: Ionic Native: deviceready가 5000ms 이내에 실행되지 않았습니다. 이 문제는 플러그인이
    일관되지 않은 상태입니다. 플러그인에서 플러그인을 제거했다가 다시 설치해 보세요.
    17:39:23] console.warn: 네이티브: deviceready가 5000ms 이내에 실행되지 않았습니다. 이 문제는 플러그인이
    일관되지 않은 상태입니다. 플러그인에서 플러그인을 제거했다가 다시 설치해 보세요.
    17:39:23] console.log: Ionic Native: 12030ms 후에 디바이스 준비 이벤트가 발생했습니다.
    17:39:23] console.log: 11374ms 후 장치 준비 완료
    17:39:23] console.log: method: GET, url:
    http://c3c19c87-dcc1-4b6d-a3db-fc7be65a427f:7adfa00d-0fd7-44ea-95b9-3cbe7f0609dd@localhost:5984/councilapp
    17:39:26] console.error: 오류 [객체 객체]
    
    로그인 하여 답글 남기기
Marburg 10월 13, 2017에서 3:28 오전

저에게 작동하지 않는 이유는 코도바-카우치베이스 래퍼에 있습니다.
해당 프로젝트의 couchbase.ts 18줄에서 database.getDatabase().then(result......)로 약속이 이루어집니다.
21줄에서 가능한 오류를 포착하지만 error.status가 존재한다고 가정합니다.
제 경우에는 오류 자체가 널이므로 나머지 오류도 모두 실패합니다.

로그인 하여 답글 남기기
1. Marburg 10월 30, 2017에서 6:54 오전
  
  버전이 작동합니다.
  이제 플러그인이 -livereload와 잘 재생되지 않는 것을 발견했습니다.
  에뮬레이터에서 실행하면 앱이 간부하 없이 작동합니다.
  간부하가 있는 에뮬레이터에서 플러그인을 실행하면 플러그인에서 수행되는 첫 번째 작업에서 플러그인이 충돌합니다.
  
  로그인 하여 답글 남기기
라가벤드라 10월 16, 2017에서 3:02 오전

590ms 후 장치 준비 완료
카우치베이스 라이트가 설치되지 않았습니다!
예외: 정의되지 않은 'queryView' 속성을 읽을 수 없습니다.
원본 스택트레이스:
TypeError: 정의되지 않은 '쿼리 뷰' 속성을 읽을 수 없습니다.
t.refresh(파일:///android_asset/www/build/main.js:10:22154)에서
파일:///android_asset/www/build/main.js:10:22067에서
t.invokeTask(파일:///android_asset/www/build/polyfills.js:3:14051)에서
에서 Object.onInvokeTask(파일:///android_asset/www/build/main.js:3:29640)
t.invokeTask(파일:///android_asset/www/build/polyfills.js:3:13987)에서
e.runTask(파일:///android_asset/www/build/polyfills.js:3:11411)에서
호출 시(파일:///android_asset/www/build/polyfills.js:3:15164)

다음 스크린샷을 참조하세요.
http://prntscr.com/gy09lz

로그인 하여 답글 남기기

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 2 하이브리드 모바일 앱에서 Couchbase와 데이터 동기화

요구 사항

새 Ionic 2 프로젝트 만들기

Angular 2 공급자를 통해 Couchbase 관리하기

Ionic 2 애플리케이션 내에서 Couchbase 사용

장치와 플랫폼 간 동기화

완성된 프로젝트를 테스트 드라이브에 가져가기

결론

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

작성자

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

댓글 하나

댓글 남기기 응답 취소

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

구축 시작

카펠라 무료 사용

연락하기