Build a Desktop App with GitHub Electron and Couchbase

그래서 저는 Atom 를 제가 선택한 텍스트 편집기로 1년 넘게 사용하고 있습니다. 혹시
모르는 분들을 위해 설명하자면, GitHub 자체에서 실행되는 오픈 소스 텍스트 편집기입니다. 전자 플랫폼입니다. 요약하자면
Electron을 사용하면 HTML, 자바스크립트, CSS와 같은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 앱을 구축할 수 있습니다. 기본적으로 Electron은 데스크톱용입니다,
모바일용 아파치 코르도바가 무엇인지 알아보세요.

이걸로 어디로 갈까요? 일렉트론과 다양한 웹 기술을 사용하여 다음과 같은 크로스 플랫폼 데스크톱 애플리케이션을 구축할 수 있습니다.
카우치베이스 서버와 잘 동기화됩니다!

제가 이전에 작성한 작업 예제를 Mac에 배포할 수 있는 독립 실행형 데스크톱 애플리케이션으로 변환해 보겠습니다,
Windows, 심지어 Linux까지. 특히 제가 작성한 AngularJS를 사용한 PouchDB 튜토리얼을 예로 들어보겠습니다. 아직 읽어보지 않으셨다면
이 튜토리얼을 읽어보시기 바랍니다. 여기에서 읽기,
그렇지 않으면 바로 튜토리얼 소스 코드 를 클릭하세요.

머신에 개발용 Electron 설치

애플리케이션을 일렉트론과 번들링하려면 먼저 컴퓨터에 설치해야 합니다. 노드 패키지 관리자(NPM)를 사용하여 다음을 수행합니다.
종속성을 설치해야 하므로 아직 컴퓨터에 Node.js를 설치하지 않은 경우 다음 페이지로 이동하세요.
의 Node.js 웹사이트를 방문하여 지금 바로 신청하세요.

Node.js가 설치된 상태에서 명령 프롬프트(Windows) 또는 터미널(Linux 및 Mac)에서 다음을 실행하여 Electron을 전역적으로 다음과 같이 설치합니다.
컴퓨터로 이동합니다:


npm install -g electron-prebuilt

npm 설치 -g 전자-사전 구축

Mac 또는 Linux를 사용하는 경우 관리자 권한으로 명령을 실행해야 할 수 있습니다. 이 작업은 다음을 사용하여 수행할 수 있습니다. sudo 다음과 같은 경우에만
필요.

전자 애플리케이션 컨테이너 준비하기

대부분의 경우 일렉트론을 사용하기 위해 정적 웹 애플리케이션(HTML, JavaScript, CSS)을 수정할 필요가 없습니다.
하지만 Electron이 프로젝트를 이해할 수 있도록 몇 가지 파일을 설정해야 합니다.

데스크톱에 다음과 같은 새 디렉터리를 만듭니다. 카우치베이스 프로젝트. 이 디렉터리 안에
main.js 그리고 package.json 파일로 이동합니다. 부터 시작하여 package.json 파일에 다음을 추가합니다.
코드:


{
    "name"    : "electron-couchbase",
    "version" : "0.0.1",
    "main"    : "main.js"
}

{

"name" : "전자 카우치베이스",

"버전" : "0.0.1",

"main" : "main.js"

}

일렉트로닉 문서에 따르면 메인 속성에서 생성한 파일 이름과 일치하는 파일 이름을 사용합니다.
프로젝트.

이제 프로젝트에 코드를 추가할 수 있습니다. main.js 파일을 만듭니다. 파일을 열고 다음을 추가합니다:


var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    mainWindow.loadUrl('file://' + __dirname + '/public/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

var 앱 = require('app'); // 애플리케이션 수명을 제어하는 모듈입니다.

var 브라우저 창 = require('브라우저-창'); // 기본 브라우저 창을 생성하는 모듈입니다.

// 서버에 충돌을 보고하세요.

require('크래시 리포터').시작();

// 창 객체의 전역 참조를 유지하지 않으면 창은 다음과 같습니다.

// 자바스크립트 객체가 가비지 수집되면 자동으로 닫힙니다.

var 메인 윈도우 = null;

// 모든 창이 닫히면 종료합니다.

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

// OS X에서는 응용 프로그램과 해당 메뉴 표시줄이 일반적입니다.

// 사용자가 Cmd + Q로 명시적으로 종료할 때까지 활성 상태를 유지합니다.

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

앱.종료();

}

});

// 이 메서드는 Electron이 완료되면 호출됩니다.

// 초기화하여 브라우저 창을 만들 준비가 되었습니다.

앱.on('ready', 함수() {

// 브라우저 창을 만듭니다.

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

//로 이동하여 앱의 index.html을 로드합니다.

메인 윈도우.loadUl('file://' + __dirname + '/public/index.html');

// 창이 닫힐 때 발생합니다.

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

// 창 객체를 참조 해제하면 일반적으로 창을 저장합니다.

// 앱이 다중 창을 지원하는 경우 배열에 다음을 입력합니다.

// 해당 요소를 삭제해야 하는 경우.

메인 윈도우 = null;

});

공정하게 말하자면, 이것은 main.js 코드는 Electron 빠른 시작 문서에서 거의 그대로 복사한 것입니다. 참고해야 할 사항은 다음과 같습니다.
이 둘의 차이점은 내 버전에는 크롬 인스펙터가 표시되지 않고 웹 파일이
public 디렉터리로 이동합니다.

카우치베이스와 일렉트로닉을 사용하여 웹 하이브리드 데스크톱 애플리케이션 코딩하기

여기서 마법이 일어납니다. 이전 글에서 AngularJS, PouchDB, Couchbase 프로젝트 소스 코드를 사용한다고 말씀드린 것을 기억하세요.
튜토리얼을 참조하세요. 튜토리얼을 통해 카우치베이스 프로젝트 를 명령 프롬프트 또는 터미널에서 현재 작업 디렉터리로 지정하고 다음을 실행합니다:


git clone https://github.com/couchbaselabs/pouchdb-angularjs-app public

git 복제 https://github.com/couchbaselabs/pouchdb-angularjs-app 공개

위 명령은 이전 프로젝트를 복제하고 이름을 다음과 같이 변경합니다. public 에서 설정한 요구 사항을 수용하기 위해
main.js 파일을 만듭니다.

전자 데스크톱 애플리케이션 실행

현재로서는 프로젝트를 실행할 수 있어야 합니다. With 카우치베이스 프로젝트 를 명령 프롬프트의 현재 작업 디렉터리로 설정합니다.
또는 터미널에서 다음을 실행합니다:


electron .

전자 .

운이 좋으면 실행이 시작될 것입니다. 그러나 애플리케이션이 실행되고 데이터를 저장하고 있다고 해서
가 Couchbase 서버와 동기화되고 있습니다. 실제로 Couchbase 동기화 게이트웨이를 시작해야 합니다.

카우치베이스 동기화 게이트웨이 실행하기

카우치베이스 동기화 게이트웨이는 로컬 애플리케이션에서 서버로, 서버에서 다시 로컬로 동기화하는 작업을 담당합니다.
애플리케이션에서 작동합니다. 모바일 애플리케이션은 물론, 저희의 경우 PouchDB에서 영감을 받은 데스크톱 애플리케이션에서도 작동합니다. Couchbase 동기화 게이트웨이
다운로드 가능 여기.

GitHub에서 AngularJS/PouchDB 프로젝트를 복제할 때 동기화 게이트웨이 구성 파일도 포함되어 있습니다. 자유롭게 사용하세요.
파일을 다운로드합니다. 파일을 데스크톱 또는 애플리케이션 디렉터리 외부로 이동하고 다음을 실행합니다:


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

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

웹 브라우저에서 http://localhost:4985 을 방문하여 실행 중인지 확인할 수 있습니다.

카우치베이스 동기화 게이트웨이를 실행한 상태에서 일렉트론 애플리케이션을 다시 시작하면 데이터가 복제되는 것을 확인할 수 있습니다.

결론

축하합니다! 방금 HTML, JavaScript, 다음과 같은 웹 기술만을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 구축하셨습니다.
CSS. 더 좋은 점은 이 데스크톱 애플리케이션이 Couchbase Server와 동기화된다는 점입니다.

이 애플리케이션을 독립 실행형 바이너리로 배포하는 방법에 대한 자세한 내용은 공식 GitHub에서 확인할 수 있습니다.
전자 문서.

Nic Raboy, 개발자 옹호자, Couchbase

이 문서 공유하기

댓글 하나

모건 헤이즈 2월 5, 2016에서 3:38 오후

동기화 게이트웨이에 데이터의 출처를 알려주려면 전자에서 어떤 주소를 사용해야 하나요? 앱에서는 localhost:9000을 사용했습니다. 앱을 팀에 배포할 때 이 주소가 맞나요?

로그인 하여 답글 남기기
1. 모건 헤이즈 2월 5, 2016에서 3:41 오후
  
  동기화 게이트웨이와 함께 사무실에서 카우치베이스를 사용하고 있습니다. 노트북의 앱은 윈도우에서 전자.
  
  로그인 하여 답글 남기기
2. 닉 라보이 2월 5, 2016에서 3:55 오후
  
  전자 애플리케이션은 웹 애플리케이션으로 간주되지 않습니다. CORS(교차 출처 리소스 공유) 문제가 없어야 합니다. Electron 애플리케이션이 동기화 게이트웨이를 가리키고 있는지 확인하기만 하면 됩니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 모건 헤이즈 2월 5, 2016에서 4:54 오후
    
    귀하의 답변에 감사드립니다. 귀하의 각도 앱이 카우치베이스 동기화 게이트웨이와 사전 전자 동기화되어 있습니다. 위의 추가 사항을 추가해도 여전히 동기화 될 것으로 예상한다는 의미입니까?
    
    또한 콘솔에 jquery가 누락되었다고 표시됩니까?
    
    로그인 하여 답글 남기기
    1. 닉 라보이 2월 5, 2016에서 5:19 오후
      
      예, 일렉트론에 애플리케이션을 번들로 제공하면 됩니다. jQuery를 추가하지 않아서 누락되었습니다. 이 기능을 사용하는 부트스트랩 기능을 사용하지 않았기 때문에 추가하지 않았습니다. 무시해도 됩니다.
      
      최고,
      
      로그인 하여 답글 남기기
  2. 모건 헤이즈 2월 5, 2016에서 5:17 오후
    
    이 모든 문제 해결은 내가 주석 처리 한 줄을 놓쳤습니다. 정말 감사합니다. 튜토리얼이 매우 도움이됩니다. 다른 튜토리얼도 따라합니다.
    
    로그인 하여 답글 남기기
    1. 닉 라보이 2월 5, 2016에서 5:20 오후
      
      문제 없습니다 :-)
      
      로그인 하여 답글 남기기
트래비스 4월 29, 2016에서 2:56 오전

q

로그인 하여 답글 남기기
트래비스 4월 29, 2016에서 2:56 오전

무슨 일인지 아세요?

2016-04-28T22:55:47.375-04:00 Changes+: 변경 사항 피드 종료 확인을 위한 알림
2016-04-28T22:55:47.375-04:00 Changes: 다중 변경 피드 완료
2016-04-28T22:55:48.294-04:00 HTTP: #040: GET /test-database/_changes?timeout=25000&style=all_docs&feed=longpoll&since=5&limit=96&_nonce=1461898548292
2016-04-28T22:55:48.294-04:00 변경+: Int 시퀀스 다중 변경 피드 ...
2016-04-28T22:55:48.294-04:00 Changes: MultiChangesFeed({*}, {Since:5 제한:96 충돌:true IncludeDocs:false 대기:true 연속:false 종결자:0xc820875a40 하트비트:0 타임아웃:25000 액티브온리:거짓}) ...
2016-04-28T22:55:48.294-04:00 Changes+: MultiChangesFeed: 채널이 channels.TimedSet{\"!\":channels.VbSequence{VbNo:(*uint16)(nil), Sequence:0x1}, \"*\":channels.VbSequence{VbNo:(*uint16)(nil), Sequence:0x1}}로 확장됩니다. ...
2016-04-28T22:55:48.294-04:00 Changes+: 멀티체인지피드 대기 중...
2016-04-28T22:55:48.294-04:00 Changes+: "test-database\"\의 카운트가 7을 넘길 때까지 기다리는 중입니다.

로그인 하여 답글 남기기
1. 닉 라보이 4월 29, 2016에서 2:59 오후
  
  평소와 다른 점이 보이지 않습니다. 무엇을 하고 있고 무엇을 하지 않나요? 상황을 좀 더 자세히 설명해 주시면 도움이 될 것 같습니다.
  
  최고,
  
  로그인 하여 답글 남기기
  1. 트래비스 4월 29, 2016에서 3:29 오후
    
    제가 뭔가 오해하고 있는 것 같습니다. 제가 올린 내용은 제가 실행할 때의 터미널 출력입니다:
    
    /경로/대상/동기화 게이트웨이/빈/sync_게이트웨이 /경로/대상/프로젝트/동기화 게이트웨이-config.json
    
    그런 다음 전자로 앱을 다시 실행합니다.
    
    브라우저 창에서 http://localhost:4985를 클릭하면 일부 버전 정보만 표시됩니다.
    
    {\"ADMIN\":true,\"couchdb\":\"Welcome\",\"vendor\":{\"name\":\"Couchbase Sync Gateway\",\"version\":1.2},\"version\":\"Couchbase Sync Gateway/1.2.0(79;9df63a5)\"}
    
    앱에 기록이 동기화되고 있다는 것을 암시하는 내용이 없습니다. 앱에 두 개의 레코드(이름, 이메일 등)를 넣으면 해당 레코드가 표시되지 않습니다. http://localhost:4985. 거기서 볼 수 있나요?
    
    다음을 방문하여 실행 중인지 확인하려고 하면 어떤 메시지가 표시되나요? http://localhost:4985 웹 브라우저에서? 아마도 한 가지 또는 많은 것을 놓치고 있을 것입니다. 힌트를 주시면 감사하겠습니다.
    
    로그인 하여 답글 남기기
    1. 닉 라보이 4월 29, 2016에서 9:21 오후
      
      4985 포트가 아닌 4984 포트를 사용하고 싶을 것입니다.
      
      문제가 해결되었는지 알려주세요.
      
      최고,
      
      로그인 하여 답글 남기기
      1. 트래비스 5월 1, 2016에서 1:47 오후
        
        답변 주셔서 감사합니다. 시간이 좀 더 있을 때 이 문제를 살펴봐야겠습니다. 나열한 두 포트(하나는 관리자이고 다른 하나는 관리자가 아님)를 모두 시도해 보았습니다. 둘 다 애플리케이션에서 데이터를 복제하지 못했습니다. 제 Mac의 문제일 수도 있고, 파악하는 데 시간이 걸리는 어리석은 실수일 수도 있습니다.
thakur90 5월 13, 2016에서 6:34 오전

Mac에서 로컬로 예제를 시도했는데 예상대로 잘 작동했습니다. 이제 전자 앱을 컴파일하여 다른 Mac 또는 Windows 컴퓨터에서 사용하려면 모든 사용자가 다른 데이터 버킷 세트를 가질 수 있고 개별적으로 앱을 사용할 수 있도록 변경해야 할 사항이 무엇인지 궁금합니다.

로그인 하여 답글 남기기
1. 닉 라보이 5월 13, 2016에서 2:05 오후
  
  각 사용자에게 고유한 버킷을 제공하지 않습니다. 대신 동기화 게이트웨이에 구워진 인증 기능을 사용하여 읽기 및 쓰기 권한을 부여해야 합니다.
  
  그러면 많은 사용자와 함께 본격적인 앱을 만들 수 있습니다.
  
  로그인 하여 답글 남기기
Electron, PouchDB, Ionic 2 및 CouchBase를 사용하여 동기화되는 데스크톱 앱 만들기 - CouchBase 블로그 2월 14, 2017에서 1:31 오후

[...] 몇 년 전에 AngularJS 1.0과 Electron을 사용하는 데스크톱 애플리케이션에서 Couchbase를 사용하는 것에 대해 썼지만, 그 당시에는 공룡이나 다름없는 기술이었을지도 모릅니다. 많은 것이 바뀌었습니다 [...]

로그인 하여 답글 남기기
CEAN 스택과 Electron을 사용하여 데스크톱 채팅 애플리케이션 만들기 - Couchbase 블로그 4월 25, 2017에서 3:54 오후

[위의 내용은 두 가지 이유로 익숙해 보일 수 있습니다. 하나는 제가 이전에 일렉트론에 쓴 글에서 가져온 것이고, 두 번째는 일렉트론 문서에서 거의 그대로 가져온 것입니다. 우리의 [...]

로그인 하여 답글 남기기

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

GitHub Electron 및 Couchbase로 데스크톱 앱 빌드하기

머신에 개발용 Electron 설치

전자 애플리케이션 컨테이너 준비하기

카우치베이스와 일렉트로닉을 사용하여 웹 하이브리드 데스크톱 애플리케이션 코딩하기

전자 데스크톱 애플리케이션 실행

카우치베이스 동기화 게이트웨이 실행하기

결론

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

작성자

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

댓글 하나

댓글 남기기 응답 취소

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

구축 시작

카펠라 무료 사용

연락하기