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

Índice
  1. Prerrequisitos
  2. Instalación
  3. Estructura de archivo
  4. 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
  • electromonUna versión de nodemon para recargar aplicaciones electrónicas en vivo.
  • nedbUna versión de MongoDB y Mongoose que nos permite guardar datos directamente en nuestra máquina.
  • electron-packagerUn 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 --iconruta lleve a la ubicación correcta y ProductNamesea 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.

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion