Introducción a Electron.js – Parte 1: Configuración

En este artículo, aprenderemos a desarrollar nuestras propias aplicaciones de escritorio nativas con Electron.js. Crearemos una aplicación de lista de tareas básica para dominar los conceptos básicos de la creación de menús, el trabajo con datos locales y la agrupación de nuestras aplicaciones en algo que podamos ejecutar en nuestra máquina local. Si alguna vez deseas explorar más a fondo alguna de estas opciones, te recomiendo que eches un vistazo a la documentación oficial.
Prerrequisitos
Solo son necesarios algunos conceptos básicos de Node.js, pero como usaremos Nedb, que está construido sobre MongoDB y Mongoose, será muy útil estar familiarizado con el uso de una base de datos NoSQL, sobre lo cual puede obtener más información aquí.
Instalación
Sólo necesitamos unas pocas cosas para empezar.
electron
electromon
Una versión de nodemon para recargar aplicaciones electrónicas en vivo.nedb
Una versión de MongoDB y Mongoose que nos permite guardar datos directamente en nuestra máquina.electron-packager
Un constructor para nuestra aplicación para que podamos enviarla y descargarla más tarde.
$ npm i electron electromon nedb electron-packager
Estructura de archivo
Todo lo que realmente necesitamos para empezar es un lugar donde colocar los íconos para nuestros diferentes sistemas operativos, una página HTML con un archivo JavaScript del lado del cliente y un archivo para nuestro servidor. También dividiremos nuestra barra de menú en su propio componente, ya que puede resultar un poco engorroso.
* assets * icons // electron-packager needs a different logo format for every platform * mac // mac and linux, since they take the same file type * win * src * MenuBar.js * index.html * script.js* app.js* package.json
Configuración
Para el archivo package.json de nuestro proyecto, el objeto scripts puede parecer complicado, pero solo estamos agregando un script de inicio y algunos comandos de compilación para cuando estemos listos para implementar en varias plataformas. En los comandos de compilación, asegúrate de que la --icon
ruta lleve a la ubicación correcta y ProductName
sea igual al nombre de tu aplicación. Nos ocuparemos de los íconos más adelante.
paquete.json
{ "dependencies": { "electromon": "^1.0.10", "electron": "^5.0.8", "electron-packager": "^14.0.3", "nedb": "^1.8.0" }, "name": "electron-app", "version": "1.0.0", "main": "app.js", "devDependencies": {}, "scripts": { "start": "electromon .", "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds", "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron App""""No related posts.
Deja una respuesta