This post is also published in my blog

Electron는 크로스플랫폼 응용 프로그램을 구축하는 절호의 프레임워크이다.Electron이 있으면 웹 기술로 데스크톱 응용 프로그램을 쉽게 구축할 수 있습니다.
Electron을 사용하면 웹 기술 위에서 크로스플랫폼 응용 프로그램을 쉽게 만들 수 있습니다.Electron 응용 프로그램은 여전히 웹 응용 프로그램이기 때문에, 데이터 저장에 대해 이야기할 때, 우리는 HTTP 요청을 보내서 데이터를 원격 서버에 저장하는 것에 익숙하다.
만약 내가 로컬에 데이터를 저장하고 싶다면?
본고에서 저는 지속적인 로컬 데이터 저장을 사용하여 전자 응용 프로그램을 구축한 경험을 공유할 것입니다.

전자 국부 데이터 저장

간단한 용례

간단한 용례에서 다음 두 가지 옵션을 선택할 수 있습니다.

브라우저 로컬 저장소: Electron은 Chromium을 바탕으로 구축되었다. 즉, 브라우저 로컬 저장소는 좋은 지원을 받았다.

electron-store: 간단한 장면에 대해electronstore만 선택하면 됩니다.API 사용이 용이함

복잡한 용례

용례가 좀 복잡할 때, 데이터를 SQL이나 NoSQL과 유사한 데이터베이스에 저장하는 것을 고려하는 것이 더 좋은 생각이다.
일부 연구를 하고 Electron을 사용하여 SQL과 NoSQL 사이를 이용한 후에 저는 최종적으로 NoSQL 솔루션을 선택했습니다.
전자 응용 프로그램과 nedb 통합하는 방법을 소개하겠습니다.
NeDB doc에서 설명한 것처럼 NeDB는

Embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency. API is a subset of MongoDB's and it's plenty fast.

NedB를 사용하여 생산 준비 제품을 구축하게 되어 매우 기쁩니다.

NeDB를 사용하여 작업 목록 전자 애플리케이션 구축

이 생각을 이해하는 데 도움을 주기 위해 Todo list Electron app with NoSQL storage 를 구축합시다.

Electron 설치

이 아이디어를 신속하게 이해할 수 있도록 electron-quick-start 템플릿을 사용하고 빠른 체험을 하도록 하겠습니다.
설치 지침을 따르십시오.

# Clone this repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies
$ npm install
# Run the app
$ npm start

새 폴더

db 폴더를 만듭니다.그리고 schemas 에서 stores 및 db 폴더를 만듭니다.
환매는 다음과 같아야 한다.

.
├── LICENSE.md
├── README.md
├── db
│   ├── schemas
│   └── stores
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── preload.js
└── renderer.js

nedb promises 설치

nedb-promises은nedb 주위의 포장입니다."""약속이 있음""을 사용하면 다이얼 백 처리 시간을 크게 절약할 수 있습니다."

$ yarn add nedb-promises

ajv 설치

ajv는 JSON 모드 검증기 라이브러리입니다.모드 검증기는 NoSQL 데이터베이스를 구축하는 선택할 수 있는 도구이지만, 좋은 모드와 검증기를 정의하면 더욱 좋은 유지보수성을 가져올 수 있기 때문에 사용하는 것을 권장합니다.
NIT: ajv 를 기본 모드 인증기로 교체할 수도 있습니다.

$ yarn add ajv

대기사항 목록 구조 만들기

업무 목록 프로그램의 구성 요소를 삭제합시다.
대기사항 목록 응용 프로그램은 대기사항 목록을 가지고 있어야 한다.간단한 업무는 todo content, is it finished?모드는 다음과 같습니다.
db/schemas/todoItem.회사 명

const todoItemSchema = {
  type: 'object',
  properties: {
    content: {
      type: 'string',
    },
    isDone: {
      type: 'boolean',
      default: false
    }
  },
};

module.exports = todoItemSchema;

todolist 상점 만들기

스토리지에는 NeDBCreate / Update / Delete의 인터페이스가 포함됩니다.
Main thread 이 저장소를 가져오고 렌더링 라인에서 이 방법을 호출합니다.
먼저 NeDB, 즉 구조 함수의 검증기를 초기화합니다.
db/stores/todoItem.회사 명

const Datastore = require('nedb-promises');
const Ajv = require('ajv');
const todoItemSchema = require('../schemas/todoItem');

class TodoItemStore {
    constructor() {
        const ajv = new Ajv({
            allErrors: true,
            useDefaults: true
        });

        this.schemaValidator = ajv.compile(todoItemSchema);
        const dbPath = `${process.cwd()}/todolist.db`;
        this.db = Datastore.create({
            filename: dbPath,
            timestampData: true,
        });
    }
}

그리고 데이터를 제어할 수 있는 방법을 추가합니다.
db/stores/todoItem.회사 명

const Datastore = require('nedb-promises');
const Ajv = require('ajv');
const todoItemSchema = require('../schemas/todoItem');

class TodoItemStore {
    constructor() {
        const ajv = new Ajv({
            allErrors: true,
            useDefaults: true
        });

        this.schemaValidator = ajv.compile(todoItemSchema);
        const dbPath = `${process.cwd()}/todolist.db`;
        this.db = Datastore.create({
            filename: dbPath,
            timestampData: true,
        });
    }

    validate(data) {
        return this.schemaValidator(data);
    }

    create(data) {
        const isValid = this.validate(data);
        if (isValid) {
            return this.db.insert(data);
        }
    }

    read(_id) {
        return this.db.findOne({_id}).exec()
    }

    readAll() {
        return this.db.find()
    }

    readActive() {
        return this.db.find({isDone: false}).exec();
    }

    archive({_id}) {
        return this.db.update({_id}, {$set: {isDone: true}})
    }
}

module.exports = new TodoItemStore();

본고의 목표는 NeDB와 Electron을 통합하는 방법을 공유하는 것이기 때문에 나는 NeDB의 API에 대해 너무 많이 논술하지 않을 것이다.이 아이디어를 먼저 얻고 NeDB를 통과하는 데 시간이 좀 걸릴 수 있다.
주의해야 할 것은 우리가 모듈을 내보낼 때 클래스를 초기화했다는 것이다.이 정책은 응용 프로그램에 저장 실례를 보존하는 데 도움을 줄 수 있습니다.
이것은 간단한 예이기 때문에 상점이 하나밖에 없다.실제 상황에서 당신은 같은 구조를 사용하여 응용 프로그램을 확장할 수 있습니다.

모든 것을 통합하다

지금까지 우리는 데이터베이스를 제어하는 모든 작업을 완성했다.환매는 다음과 같아야 한다.

.
├── LICENSE.md
├── README.md
├── db
│   ├── schemas
│   │   └── todoItem.js
│   └── stores
│       └── todoItem.js
├── index.html
├── main.js
├── package.json
├── preload.js
├── renderer.js
└── yarn.lock

이제 우리 총괄해 봅시다.

main을 업데이트합니다.회사 명

main.js는 전자의 주선이다.업데이트 사용main.js

요구사항 ./db/stores/todoItem

전역 변수에 todo store instance 값 부여

옵션에서 nodeIntegration 을 사용합니다.렌더링 라인이 webPreferences electron 방법으로 바뀌기 때문이다.이를 위해 렌더링 스레드가 있어야 합니다require.

주요했어회사 명

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
const db = require('./db/stores/todoItem');

global.db = db;

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  })
  mainWindow.loadFile('index.html')
}

...the same...

렌더기를 업데이트합니다.회사 명

우선, 메인 라인에서 nodeIntegration 실례 얻기
렌더기.회사 명

const {remote} = require('electron');
const dbInstance = remote.getGlobal('db');

db를 사용하면 데이터베이스를 업데이트할 수 있습니다.
우리는 모든 업무 목록을 읽을 수 있다

dbInstance.readAll()
    .then(allTodolists => {
        console.log(allTodolists)
    })

또는 우리는 다음 시간에 처리해야 할 사항을 끝낼 수 있다.

dbInstance.archive("really-fake-id")
    .then(() => {
            console.log('done')
        })

그래서 우리는 보기 논리를 추가하기 시작할 수 있다.나는 이 점을 할 수 있는 많은 방법이 있기 때문에 눈맞춤 도면층의 해석을 뛰어넘을 것이다.
최종 구현

회사 명 / 전자nedbtodolist

전자nedbtodolist

NeDB와 Electron을 통합하는 작업 목록 데모 애플리케이션
View on GitHub
우리의 Nedb+Electron 대기 항목 목록은 다음과 같다.

결론

다른 해결 방안을 시도한 후에 나는 이런 구조에 대해 만족을 느꼈다.좋은 점은

데이터 논리를 주 스레드 및 렌더링 스레드와 분리

전자는 데이터 흐름의 엄격한 제한이 없다.로컬 저장소에 데이터를 저장할 수도 있고, 메인 라인에 데이터를 저장하여 전 세계에 공개할 수도 있습니다.또는 간단한 키 값 저장을 위해 dbInstance 을 사용할 수도 있습니다.
응용 프로그램이 점점 커지면 데이터 흐름은 더욱 유지하기 어려워진다.localStorage에 복사본이 있을 수 있습니다. 클라이언트 상태 관리 프레임워크인 redux를 사용하면 클라이언트도 다른 복사본이 있습니다.
만약 적당한 데이터 흐름이 없다면, 데이터 흐름은 엉망이 될 것이다.

이러한 구조로 NeDB를 도입하면 뚜렷한 데이터 흐름을 가져올 뿐만 아니라 electron-store, Main thread, Renderer thread 사이에 더욱 뚜렷한 경계가 있다.이것은 마치 data storage 양식의 디자인 모델을 전자 응용 프로그램에 도입하는 것과 같다.

물론 localStorage에 데이터를 추가할 수 있습니다.그러나 데이터베이스에서 모든 데이터에 접근하는 방법을 사용하면 대부분의 경우 데이터를 로컬 저장소에 저장할 필요가 없습니다.

DB 논리적 확장 가능

프레젠테이션은 간단한 사례입니다.실제 상황에서 성능을 향상시키거나 데이터베이스 접근을 보호하기 위해 더 많은 검증을 추가할 수 있습니다.
또한 NeDB는 항상 텍스트 파일에 데이터를 저장하므로 데이터 가져오기/내보내기가 쉽습니다.

테스트 가능

이것은 나에게 있어서 가장 중요한 장점이다.상기에서 보듯이 모든 메모리 클래스에 단위 테스트를 작성할 수 있습니다.

플러스: 뷰 레이어

너는 네가 좋아하는 보기 프레임워크를 사용할 수 있다.웹 요청을 호출하지 않고react+redux를 사용한다면, MVC 을 cache 에 놓고, 다른 작업에서db 방법을 호출합니다.
읽어주셔서 감사합니다.이것은 내가 전자 데이터베이스로 NeDB를 사용한 개인적인 경험이다.너의 생각을 나에게 알려줘!