Desktop App using Electron, PouchDB, Ionic 2 & Couchbase

저는 자바스크립트 관련 일을 해왔고 카우치베이스. 지난 몇 주 동안 저는 Angular 2 프레임워크, 자바스크립트 라이브러리 PouchDB, 모바일용 Ionic 프레임워크를 중심으로 콘텐츠를 제작해 왔습니다. 아직 살펴보지 않은 것은 Angular 2로 구축된 데스크톱 애플리케이션의 Couchbase입니다.

2년 전에 저는 AngularJS 1.0 및 Electron을 사용하는 데스크톱 애플리케이션의 Couchbase하지만 기술 덕분에 그 시대에는 공룡이 존재했을지도 모릅니다. 많은 것이 변했고 한때 훌륭했던 게시물도 새로 고쳐야 할 필요가 있습니다.

다음을 사용하여 데스크톱 애플리케이션을 만드는 방법을 살펴보겠습니다. 전자 Angular 2, PouchDB, Ionic 2 및 Couchbase로 구동됩니다.

요구 사항

이 프로젝트를 성공으로 이끌기 위해 충족해야 할 요구 사항이 많이 있습니다. 그 요건은 다음과 같습니다:

이 튜토리얼의 초점과 요점은 Ionic 2가 아닙니다. 그러나 Ionic 2에는 부트스트랩이나 파운데이션과 같은 대체 솔루션보다 시간을 절약할 수 있는 강력한 미세 UI 레이어가 있습니다. 또한 Ionic 2에는 Angular 2가 내장되어 있습니다. 단, Ionic 2 CLI가 설치되어 있어야 합니다. 종속성을 수집하는 데 사용할 노드 패키지 관리자(NPM) 때문에 Node.js는 필수입니다.

이 예제에서는 Couchbase Server를 포함하지 않고 대신 Couchbase 동기화 게이트웨이와 인메모리 프로토타이핑 데이터베이스를 사용하겠습니다. 이 예제에서 Couchbase Server로 전환하는 데는 한 줄도 걸리지 않습니다. PouchDB는 데스크톱 애플리케이션에서 동기화 게이트웨이로 그리고 다른 방향으로도 통신합니다.

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

동기화 게이트웨이는 모든 데이터 오케스트레이션을 처리하며 애플리케이션별로 구성해야 합니다. 이 특정 애플리케이션의 경우 모든 연결 장치가 데이터를 읽고 쓸 수 있도록 허용하겠습니다.

이러한 구성은 다음과 같습니다:

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

}

위의 샘플 구성에서는 다음과 같은 데이터베이스를 사용합니다. 예제라고 부르지만 실제로는 원하는 대로 불러도 됩니다. 예를 들어 구성은 파일에 저장해야 합니다, 동기화 게이트웨이-config.json.

카우치베이스 동기화 게이트웨이를 다운로드하여 설치한 후 다음과 같이 구성을 실행할 수 있습니다:

/path/to/sync_gateway /path/to/sync-gateway-config.json

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

그런 다음 http://localhost:4985/_admin/ 에서 동기화 게이트웨이에 액세스할 수 있습니다.

PC용 Ionic 2 프로젝트 만들기

다음 주제에 대한 이전 가이드를 보셨다면 Ionic 2 및 PouchDB가 포함된 Couchbase에서 무엇이 달라질지 궁금하실 것입니다. 사실 달라지는 것은 없습니다. 기본 Android 및 iOS 기능을 사용하지 않는 Ionic 2 애플리케이션은 문제 없이 Electron 애플리케이션에 번들로 사용할 수 있습니다. 그러나 이 애플리케이션은 이전 애플리케이션과 비교하여 일부 최적화가 이루어졌습니다.

위의 애니메이션에서 목록에 항목을 추가하고 Couchbase 동기화 게이트웨이 및 다른 장치 및 Couchbase 서버와 동기화할 수 있는 간단한 할 일 목록 Electron 애플리케이션을 볼 수 있습니다.

간단한 예제를 만들어 보겠습니다.

종속성으로 새 프로젝트 만들기

애플리케이션 개발을 시작하고 일렉트론에서 패키징하기 전에 각 종속성이 포함된 새 프로젝트를 만들어야 합니다.

명령 프롬프트 또는 터미널에서 다음을 실행합니다:

ionic start ElectronExample blank --v2
cd ElectronExample

1 2	이온 시작 전자 예제 빈 --v2 cd 전자 예제

Ionic 2 프로젝트가 생성되면 Electron 및 PouchDB와 같은 몇 가지 종속성을 수집해야 합니다. 이를 위해 다음을 실행합니다:

npm install pouchdb --save
npm install uuid @types/uuid --save
npm install electron --save-dev

npm 설치 파우치DB --저장

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

npm 설치 전자 --저장-dev

이 Angular 2 애플리케이션은 타입스크립트를 사용할 것이므로 타입 정의가 있는 JavaScript 라이브러리를 사용하는 것이 가장 좋습니다. 그러나 PouchDB에는 공식적인 타입 정의 세트가 없기 때문에 구식이 됩니다. 다음 종속성을 포함하면 이 문제를 해결할 수 있습니다:

npm install @types/node --save

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

위의 종속성을 통해 우리는 require 키워드를 사용하여 자바스크립트 라이브러리를 프로젝트로 가져올 수 있습니다.

데스크톱 지원용 전자 추가

프로젝트가 생성되면 Electron 지원을 추가해야 합니다. 이는 일렉트론이 부팅 시 처리하는 특수 JavaScript 구성 파일을 추가하여 수행됩니다.

프로젝트의 루트에서 다음과 같은 파일을 만듭니다. electron.js 를 다음 자바스크립트 코드로 대체합니다:

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

let mainWindow

function createWindow () {
    mainWindow = new BrowserWindow({width: 800, height: 600})

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'www/index.html'),
        protocol: 'file:',
        slashes: true
    }))

    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

const 전자 = require('electron')

const 앱 = 전자.앱

const 브라우저 창 = 전자.브라우저 창

const 경로 = require('경로')

const URL = require('url')

let 메인 윈도우

함수 createWindow () {

메인 윈도우 = new 브라우저 창({너비: 800, 높이: 600})

메인 윈도우.loadURL(URL.형식({

경로명: 경로.join(__dirname, 'www/index.html'),

프로토콜: 'file:',

슬래시: true

}))

메인 윈도우.on('closed', 함수 () {

메인 윈도우 = null

})

}

앱.on('ready', createWindow)

앱.on('window-all-closed', 함수 () {

만약 (프로세스.플랫폼 !== 'darwin') {

앱.종료()

}

})

앱.on('활성화', 함수 () {

만약 (메인 윈도우 === null) {

createWindow()

}

})

위의 코드 대부분은 전자 스타터 템플릿이 줄을 제외한 나머지 줄은 제외됩니다:

pathname: path.join(__dirname, 'www/index.html'),

1	경로명: 경로.join(__dirname, 'www/index.html'),

위 줄에서는 애플리케이션이 시작될 때 어떤 Ionic 2 페이지를 로드할지 일렉트론에 알려주고 있습니다. 일렉트론 부트스트랩이 완료되는 동안 빌드 스크립트 내에 번들로 제공해야 합니다.

프로젝트의 package.json 파일에 이 줄을 포함하세요:

"main": "electron.js",

1	"main": "electron.js",

위의 줄은 Electron에게 어떤 파일이 구성 파일인지 알려줍니다. 파일 이름을 지정하지 않았을 수 있기 때문에 필요합니다. electron.js 를 추가해야 합니다. 또한 프로젝트를 빌드하고 Electron으로 실행할 특정 스크립트를 추가해야 합니다:

"scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "electron": "ionic-app-scripts build; electron ."
},

"스크립트": {

"ionic:build": "이온-앱-스크립트 빌드",

"ionic:serve": "ionic-app-scripts serve",

"electron": "ionic-app-scripts build; electron ."

앱 스토어에 배포하기 위해 애플리케이션을 패키지화하지는 않지만 컴퓨터에서 Electron을 사용하여 올바르게 테스트할 수 있습니다.

이 시점에서는 이전에 보셨을 수도 있고 그렇지 않을 수도 있는 Angular 2 코드에 집중할 수 있습니다.

Angular 2용 PouchDB 공급자 개발하기

데이터 관련 코드를 페이지 로직과 분리하여 유지하는 것이 좋습니다. Angular 2에서는 공유 공급자를 사용하여 이러한 분리를 수행할 수 있습니다.

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

ionic g provider pouchdb-provider

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

다음과 같이 끝나야 합니다. src/providers/pouchdb-provider.ts 또는 이와 유사한 이름입니다. 이름이 무엇인지 기억하기만 하면 이름은 크게 중요하지 않습니다.

공급자 파일을 열고 다음 TypeScript를 포함합니다:

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 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 get(id: 문자열) { }

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

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

public getChangeListener() { }

}

공급자는 다양한 페이지에 주입되어 변경 사항을 방출하므로 주사제 그리고 이벤트 이미터 가져오기. 또한 PouchDB JavaScript 라이브러리도 가져오고 있습니다.

공급자는 애플리케이션이 열려 있는 동안 하나의 데이터베이스 인스턴스가 열려 있는 싱글톤으로 작동합니다. 이 설정은 생성자 메서드를 사용합니다:

public constructor() {
    if(!this.isInstantiated) {
        this.database = new PouchDB("nraboy");
        this.database.changes({
            live: true,
            include_docs: true
        }).on('change', change =&gt; {
            this.listener.emit(change);
        });
        this.isInstantiated = true;
    }
}

public 생성자() {

만약(!이.isInstantiated) {

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

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

라이브: true,

include_docs: true

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

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

});

이.isInstantiated = true;

}

에서 생성자 메서드에서 데이터베이스가 아직 인스턴스화되지 않은 경우 데이터베이스를 인스턴스화하고, 열고, 변경 이벤트를 구성합니다. 데이터베이스에 대한 모든 변경 사항에 대해 변경 이벤트를 방출하고 결국 수신기를 구독하여 수신합니다.

특정 NoSQL 문서를 ID로 가져오고 싶다고 가정해 보겠습니다. 다음과 같은 함수를 만들 수 있습니다:

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

public get(id: 문자열) {

반환 이.데이터베이스.get(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 약속((해결, 거부) => {

거부(오류);

});

}

});

}

문서가 존재하지 않으면 업데이트되는 대신 문서가 만들어집니다.

여기서는 데스크톱 Electron 애플리케이션에서 Couchbase를 사용하는 것이 목표이므로 동기화 기능이 필요합니다:

public sync(remote: string) {
    let remoteDatabase = new PouchDB(remote);
    this.database.sync(remoteDatabase, {
        live: true,
        retry: true
    });
}

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

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

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

라이브: true,

다시 시도: true

});

}

그리고 동기화 메서드는 동기화 게이트웨이 호스트 이름과 데이터베이스를 가져와 로컬 데이터베이스와 원격 데이터베이스 간에 양방향 동기화를 수행합니다.

public getChangeListener() {
    return this.listener;
}

public getChangeListener() {

반환 이.리스너;

}

마지막으로 변경 리스너를 가져와 구독하는 방법을 제공합니다.

PouchDB 공급자는 완료되었지만 아직 사용할 준비가 되지 않았습니다. 각 페이지에서 사용하려면 애플리케이션의 @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]

})

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

기본적으로 공급자를 가져와서 공급자를 공급자 배열의 @NgModule 블록을 추가합니다. 이제 애플리케이션 페이지에서 공급자를 사용할 수 있습니다.

함수형 애플리케이션을 위한 페이지 로직 추가하기

이 특정 애플리케이션은 화면이 하나뿐이며 그 화면은 다소 단순합니다. 데이터 목록을 표시하고 새 데이터를 입력할 수 있습니다.

타입스크립트 로직부터 시작해서, 프로젝트의 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 zone: NgZone, private database: PouchDBProvider) {
        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, 비공개 영역: NgZone, 비공개 데이터베이스: PouchDBProvider) {

이.항목 = [];

}

public ionViewDidEnter() { }

public 삽입() { }

}

여러 Angular 2, Ionic 2 및 사용자 정의 컴포넌트를 페이지로 가져와서 많은 컴포넌트들을 생성자 메서드를 사용합니다. The 항목 배열에는 화면에 표시될 동기화된 데이터가 저장됩니다. 그리고 생성자 메서드는 변수만 초기화합니다.

변수에 데이터를 로드하려면 다음을 사용해야 합니다. ionViewDidEnter 메서드를 사용합니다:

public ionViewDidEnter() {
    this.database.sync("http://192.168.57.1:4984/example");
    this.database.getChangeListener().subscribe(data =&gt; {
        this.zone.run(() =&gt; {
            this.items.push(data.doc);
        });
    });
}

public ionViewDidEnter() {

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

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

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

이.항목.push(데이터.doc);

});

}

에서 ionViewDidEnter 메서드를 사용하여 동기화 게이트웨이와 동기화를 시작하고 변경 이벤트를 구독합니다. 변경 사항이 들어오면 변경 사항이 항목 배열을 사용합니다. 우리는 NgZone 변경 리스너는 Angular 2에서 불확실하며 UI가 올바르게 업데이트되도록 보장하고 싶기 때문입니다.

그리고 삽입 메서드는 거의 모든 Ionic 2 로직입니다:

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; {
                    if(data.title) {
                        this.database.put({type: "list", title: data.title}, Uuid.v4());
                    }
                }
            }
        ]
    });
    prompt.present();
}

public 삽입() {

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

title: '할 일 항목',

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

입력: [

{

이름: 'title',

플레이스홀더: 'Title'

버튼: [

{

텍스트: '취소',

핸들러: 데이터 => {}

{

텍스트: '저장',

핸들러: 데이터 => {

만약(데이터.title) {

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

}

]

});

프롬프트.현재();

}

메서드를 호출하면 사용자가 입력할 수 있는 프롬프트가 표시됩니다. 저장되면 데이터는 PouchDB에 문서로 저장되고 Couchbase Server에 동기화됩니다.

사용자 인터페이스 디자인

타입스크립트 로직의 UI는 짧고 간결합니다. 프로젝트의 src/pages/home/home.html 파일을 열고 다음 HTML 마크업을 포함합니다:

&lt;ion-header&gt;
    &lt;ion-navbar&gt;
        &lt;ion-title&gt;
            Electron w/ Couchbase
        &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>

전자 w/ 카우치베이스

</ion-title>

<ion-버튼 끝>

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

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

</버튼>

</ion-버튼>

</ion-navbar>

</ion-헤더>

<ion-콘텐츠 패딩>

<ion-목록>

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

</ion-항목>

</ion-목록>

</ion-콘텐츠>

UI에는 버튼이 있는 작업 표시줄이 있습니다. 삽입 메서드를 눌러야 합니다. 화면의 콘텐츠는 각 요소를 표시하는 목록입니다. 항목 배열을 행으로 저장합니다.

실제 프로젝트 보기

일렉트로닉 위드 카우치베이스 예제에서 많은 작업을 수행했습니다. 저는 작업 중인 프로젝트를 업로드했습니다. 를 직접 사용해보고 싶으시다면 GitHub로 이동하세요.

프로젝트를 다운로드하고 다음 명령을 실행합니다:

npm install

npm 설치

위의 명령은 모든 프로젝트 종속성을 복원합니다. 동기화 게이트웨이가 실행 중인 상태에서 다음을 실행하여 일렉트론으로 애플리케이션을 실행합니다:

npm run electron

npm 실행 전자

동기화 게이트웨이 호스트를 변경해야 할 수도 있습니다. src/pages/home/home.ts 파일을 호스트 이름과 일치하도록 변경합니다.

결론

방금 다음과 동기화되는 데스크톱 애플리케이션을 만드는 방법을 살펴보셨습니다. 카우치베이스. 이 애플리케이션은 다음에 의해 구동됩니다. 전자를 사용하지만 Angular 2와 PouchDB를 사용합니다. UI 레이어는 Ionic 2를 사용했지만 반드시 그럴 필요는 없습니다. Bootstrap과 같은 자체 UI 프레임워크를 사용할 수도 있습니다. 이 가이드의 목표는 카우치베이스와 앵귤러 2로 일렉트론을 시연하는 것이었습니다. 이 가이드는 이전 주제에서 한 단계 더 발전한 것입니다. 카우치베이스와 일렉트로닉이 포함된 AngularJS 1.0.

Nic Raboy, 개발자 옹호자, Couchbase

이 문서 공유하기

댓글 하나

마르틴 롬바나 2월 23, 2017에서 10:54 오전

실행 중일 때 npm 실행 전자
결과는 오류입니다:

[19:46:53] ionic-app-scripts 0.0.47
[19:46:53] ionic-app-script task: "build;"
[19:46:53] 오류: '../dist/build;' 모듈을 찾을 수 없습니다.

(그리고 이것은 직접 만든 깃허브 예제에서 다운로드하고, npm을 설치한 다음, npm을 실행한 것입니다.)

아이디어가 있으신가요?

고마워요 :)

로그인 하여 답글 남기기
1. 앱마이스터리 3월 11, 2017에서 6:51 오전
  
  안녕하세요 마르틴과 닉입니다,
  
  Ionic 2.1.12를 사용하면서 동일한 오류가 발생하고 있습니다.
  [15:44:02] ionic-app-scripts 1.1.4
  [15:44:02] ionic-app-script task: "build;"
  [15:44:02] 오류: '../dist/build;' 모듈을 찾을 수 없습니다.
  
  여러분 중 한 명이 해결하셨나요?
  
  고마워요 :)
  
  로그인 하여 답글 남기기
Nic Raboy, 개발자 옹호자, Couchbase 2월 23, 2017에서 11:53 오전

어떤 버전의 Ionic을 사용하고 있나요? Ionic은 현재 릴리스와 제가 게시한 시점 사이에 큰 변화가 있었다고 생각합니다.

콘텐츠와 로직은 정확하게 유지되어야 하지만 빌드 명령은 약간 다를 수 있습니다.

로그인 하여 답글 남기기
베르트랑 괴츠만 5월 5, 2017에서 1:51 오후

안녕하세요,

먼저, 이 포스팅을 작성해 주신 Nic님께 감사드립니다!

동일한 오류("오류: '../dist/build;' 모듈을 찾을 수 없습니다.")가 발생했는데, "electron" 스크립트가 전자 npm 모듈이 전역적으로 설치되어 있다고 가정하기 때문인 것 같습니다.
로컬에 일렉트로닉을 설치한 경우 이와 같은 것을 사용해야 합니다:
"./node_modules/.bin/electron ."
참조 https://electron.atom.io/docs/tutorial/quick-start/

그래서 이걸로 전자 스크립트를 변경했습니다(저는 Windows OS를 사용 중입니다):

"스크립트": {
…
"electron": "ionic-app-scripts 빌드 && .\\node_modules\\.bin\\electron ."
}

마지막으로, "npm run electron"을 실행하면 작동합니다!

로그인 하여 답글 남기기

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

Electron, PouchDB, Ionic 2 및 Couchbase를 사용하여 동기화되는 데스크톱 앱 만들기

요구 사항

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

PC용 Ionic 2 프로젝트 만들기

종속성으로 새 프로젝트 만들기

데스크톱 지원용 전자 추가

Angular 2용 PouchDB 공급자 개발하기

함수형 애플리케이션을 위한 페이지 로직 추가하기

사용자 인터페이스 디자인

실제 프로젝트 보기

결론

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

작성자

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

댓글 하나

댓글 남기기 응답 취소

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

구축 시작

카펠라 무료 사용

연락하기