Introducción a Electron.js – Parte 2: Aplicación Todo

En la primera parte de esta introducción a Electron.js, configuramos Electron con nuestros scripts de agrupación y una ventana local. Una vez que ya hemos dejado las bases claras, podemos comenzar con la funcionalidad más interesante de nuestra aplicación.

Pasando datos entre cliente y servidor

Dado que aún no tenemos una base de datos configurada, la funcionalidad de tareas pendientes es casi la misma que la de cualquier aplicación de tareas pendientes de JavaScript. La única diferencia es que primero usaremos ipcRenderer.sendpara enviar un evento a nuestro servidor con nuestros datos, que podemos escuchar con ipcMain.on, luego haremos lo que necesitemos con los datos (como guardarlos en nuestra base de datos) y los enviaremos de regreso al cliente para que se procesen si se realiza correctamente.

script.js

const electron = require('electron')const { ipcRenderer } = electronconst form = document.querySelector('form')const item = document.querySelector('input')const list = document.querySelector('ul')// Render Items to Screenconst 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 formform.addEventListener('submit', e = {  e.preventDefault()  ipcRenderer.send('addItem', { item: item.value })  form.reset()})

A continuación solo necesitamos iniciar una nueva base de datos Datastorey usar algunos métodos similares a mongoose cuando capturamos nuestros eventos del cliente.

En lugar de un método en ipcMain, como se puede esperar, necesitamos usar webcontents.senden la ventana a la que queremos que se aplique. Más adelante, esto también nos permitirá enviar eventos desde nuestro menú sin desestructurar nada de Electron.

NeDB nos ofrece muchas de las mismas opciones que Mongoose para manipular y consultar nuestros datos. Recomiendo encarecidamente consultar la documentación, ya que existen algunas diferencias entre NeDB y Mongoose.

Los métodos principales que necesitamos solo toman un objeto con las propiedades que desea que coincida el elemento de retorno y una función de devolución de llamada para cuando esté completo.

• insertToma el nuevo elemento como un objeto y lo agrega a la base de datos.
• removeToma la consulta y el objeto de opciones y los elimina de la base de datos.
• findToma la consulta y devuelve los objetos.
• updateToma la consulta y un objeto de propiedades que desea actualizar.

aplicación.js

const db = new Datastore({  filename: './items.db',  autoload: true})// Get all items from db and send them to the clientipcMain.on('loadAll', () = db.find({}, (err, items) = mainWindow.webContents.send('loaded', items)))// Saves item and returns it to clientipcMain.on('addItem', (e, item) = {  db.insert(item, err = {    if (err) throw new Error(err)  })  mainWindow.webContents.send('added', item)})

Barra de menú

Ahora podemos comenzar a agregar más funciones interesantes a nuestra barra de menú. Para cada objeto de nuestra matriz tenemos algunas opciones para personalizarlo.

• labelEstablecer el nombre que se muestra en la barra de menú
• submenuConjuntos y matrices de objetos como subdirectorios, que pueden continuar infinitamente.
• clickEstablece un controlador onClick, lo toma a sí mismo y a la ventana enfocada actual.
• acceleratorEstablece cualquier atajo de teclado que podamos usar process.platformpara verificar qué sistema operativo se está utilizando, ya que Mac y Windows tienen algunas teclas diferentes.
• typeEstablezca el elemento del menú como uno de los formatos preestablecidos de electrones; normal, separator, checkboxy radio.

Junto con nuestro menú de archivo, agregaremos la opción para alternar las herramientas de desarrollo para ayudar a depurar nuestra aplicación.

Barra de menú.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() }  }]

Con el envío del evento borrado, podemos borrar nuestro 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 = '')

aplicación.js

// Clears database and send event to client if successfulipcMain.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')  })})

Agrupamiento

Antes de poder incluir nuestra nueva aplicación, necesitamos algunos íconos que la acompañen, pero deben tener el formato correcto para su sistema operativo, icnspara Mac y Linux y icopara Windows. Recomiendo usar Cloud Convert para hacer esto.

Cuando estén todos en las ubicaciones correctas, puedes ejecutar el script desde nuestro package.jsonarchivo y release-buildsse creará una nueva carpeta. En la carpeta de tu sistema operativo, puedes encontrar tu nueva aplicación lista para ejecutarse de forma nativa en tu máquina.

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

Conclusión

Si bien este puede haber sido un proceso un poco largo, espero que te haya resultado útil para comprender los conceptos básicos de la creación de tus propias aplicaciones de escritorio con Electron. Puedes encontrar el repositorio completo de este ejemplo aquí.