Electron.jsの紹介-パート2：Todoアプリ

投稿日: 2022-04-20 2022-04-20

このElectron.jsの紹介の最初の部分で、バンドルスクリプトとローカルウィンドウを使用してElectronをセットアップしました。基盤が整ったので、アプリのより興味深い機能を開始できます。

クライアントとサーバー間でのデータの受け渡し

データベースはまだセットアップされていないため、todo機能は他のバニラJavaScripttodoアプリとほぼ同じです。唯一の違いは、最初にipcRenderer.sendを使用して、データを含むイベントをサーバーに送信し、ipcMain.onでリッスンしてから、データを使用して必要な処理を実行することです。データベースに保存します）、成功した場合はレンダリングするためにクライアントに送り返します。

script.js

const electron = require('electron')
const { ipcRenderer } = electron

const form = document.querySelector('form')
const item = document.querySelector('input')
const list = document.querySelector('ul')

// Render Items to Screen
const render = item => {
  const li = document.createElement('li')
  li.innerHTML = item
  list.appendChild(li)
}

// Get All Items After Starting 
window.addEventListener('load', () => ipcRenderer.send('loadAll'))
ipcRenderer.on('loaded', (e, items) => items.forEach(item => render(item.item)))

// Send Item to the server and clear the form
form.addEventListener('submit', e => {
  e.preventDefault()
  ipcRenderer.send('addItem', { item: item.value })
  form.reset()
})

次に、Datastoreを使用して新しいデータベースを開始し、クライアントからイベントをキャッチするときにマングースのようなメソッドを使用する必要があります。

ご想像のとおり、ipcMainのメソッドの代わりに、適用するウィンドウでwebcontents.sendを使用する必要があります。後でこれにより、電子から何も破壊することなく、メニューからイベントを送信することもできます。

NeDB は、Mongooseがデータを操作およびクエリするために行うのと同じオプションの多くを提供します。 NedbとMongooseにはいくつかの違いがあるため、docsを確認することを強くお勧めします。

必要な主なメソッドは、返品アイテムを照合するプロパティを持つオブジェクトと、それが完了したときのコールバック関数を取得するだけです。

insert新しいアイテムをオブジェクトとして取得し、データベースに追加します。
removeクエリとオプションのオブジェクトを取得し、データベースから削除します。
findクエリを受け取り、オブジェクトを返します。
update更新するプロパティのクエリとオブジェクトを取得します。

app.js

const db = new Datastore({
  filename: './items.db',
  autoload: true
})

// Get all items from db and send them to the client
ipcMain.on('loadAll', () => db.find({}, (err, items) => mainWindow.webContents.send('loaded', items)))

// Saves item and returns it to client
ipcMain.on('addItem', (e, item) => {
  db.insert(item, err => {
    if (err) throw new Error(err)
  })

  mainWindow.webContents.send('added', item)
})

これで、メニューバーにさらに興味深い機能を追加できるようになりました。配列内のすべてのオブジェクトについて、それをカスタマイズするためのいくつかのオプションがあります。

labelメニューバーに表示される名前を設定します
submenuサブディレクトリとしてのオブジェクトのセットと配列。これらは、無限に続く可能性があります。
click onClickハンドラーを設定し、それ自体と現在フォーカスされているウィンドウを取り込みます。
acceleratorキーボードショートカットを設定します。MacとWindowsにはいくつかの異なるキーがあるため、process.platformを使用して使用されているOSを確認できます。
typeメニュー項目を電子プリセットフォーマットの1つとして設定します。 normal、separator、checkbox、およびradio。

ファイルメニューに加えて、アプリケーションのデバッグに役立つ開発ツールを切り替えるオプションを追加します。

MenuBar.js

const menuBar = [
  {
    label: 'file',
    submenu: [
      {
        label: 'Clear All',
        accelerator: process.platform == 'darwin' ? 'Command+C' : 'Ctrl+C',
        click(item, currentWindow) { currentWindow.webContents.send('clearAll') }
      }
    ]
  }, {
    label: 'DevTools',
    accelerator: process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
    click(item, mainWindow) { mainWindow.toggleDevTools() }
  }
]

クリアされたイベントが送信されると、ulをクリアできます。

script.js

// Catches ClearAll from menu, sends the event to server to clear the db.
ipcRenderer.on('clearAll', () => ipcRenderer.send('clearAll'))
ipcRenderer.on('cleared', () => list.innerHTML = '')

app.js

// Clears database and send event to client if successful
ipcMain.on('clearAll', () => {
  // Without multi being set to true only the first matching item with be removed.
  db.remove({}, { multi: true }, (err) => {
    if (err) throw new Error(err)
    mainWindow.webContents.send('cleared')
  })
})

バンドル

新しいアプリをバンドルする前に、それに合わせていくつかのアイコンが必要ですが、それらはオペレーティングシステムに適した形式である必要があります。 MacとLinuxの場合はicns、Windowsの場合はico。これを行うには、 CloudConvertを使用することをお勧めします。

それらがすべて正しい場所にある場合は、package.jsonファイルからスクリプトを実行するだけで、新しいrelease-buildsフォルダーが作成されます。 OSのフォルダには、マシン上でネイティブに実行できる新しいアプリケーションがあります。

$ npm run package-mac
$ npm run package-win
$ npm run package-linux

結論

これは少し長いプロセスだったかもしれませんが、Electronを使用して独自のデスクトップアプリを構築するための基本を理解するのに役立つことを願っています。この例の完全なリポジトリはここにあります。

getdocs

13036