Cree una aplicación de Notas con Electron para Linux, MacOS y Windows

Introducción

Electron es un marco que le permite crear aplicaciones de escritorio nativas utilizando tecnologías web como JavaScript, HTML y CSS. En este tutorial, crearemos una aplicación de notas sencilla que se puede utilizar en Linux, MacOS y Windows.

Requisitos previos

Tenga instalados Node.js y npm. Si aún no los tiene, descárguelos e instálelos desde https://nodejs.org/.

Configuracion inicial

Crea una nueva carpeta para tu proyecto y navega dentro:

mkdir electron-notes-app && cd electron-notes-app

Inicialice un nuevo proyecto npm:

npm init -y

Instalar electrón

npm install electron --save-dev

Creación de la estructura del proyecto.

Cree los siguientes archivos y carpetas:

main.js (el archivo principal de la aplicación Electron)
index.html (la interfaz de usuario de la aplicación)
styles.css (estilos de aplicación)

Estructuración de la interfaz de usuario.

En el archivo index.html, ingrese el siguiente código:

<!DOCTYPE html>
 <html>
 <head>
 <title>Electron Notes App</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <div class="container">
 <textarea id="noteContent"></textarea>
 <button id="saveBtn">Salva Nota</button>
 </div>
 <script src="renderer.js"></script>
 </body>
 </html>

En styles.css, agregue algunos estilos básicos:

.container {
 padding: 20px;
 display: flex;
 flex-direction: column;
 height: 100vh;
 }

 textarea {
 flex: 1;
 margin-bottom: 10px;
 }

 button {
 align-self: flex-end;
 }

lógica electrónica

En main.js, agregue:

const { app, BrowserWindow } = require('electron');

 let win;

 function createWindow() {
 win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true
 }
 });
 win.loadFile('index.html');
 }

 app.whenReady().then(createWindow);

 app.on('window-all-closed', () => {
 if (process.platform!== 'darwin') {
 app.quit();
 }
 });

 app.on('activate', () => {
 if (BrowserWindow.getAllWindows().length === 0) {
 createWindow();
 }
 });

Lógica de aplicación

Cree un archivo renderer.js y agregue:

const fs = require('fs');

 document.getElementById('saveBtn').addEventListener('click', () => {
 const content = document.getElementById('noteContent').value;
 fs.writeFileSync('nota.txt', content);
 alert('Nota salvata con successo!');
 });

Este código guardará el contenido del área de texto en un archivo llamado nota.txt cada vez que se presione el botón.

Iniciar la aplicacion

En el archivo package.json, edite la sección "scripts" para incluir:

"start": "electron main.js"

Ahora puedes iniciar la aplicación con:

npm start

Conclusión

Ha creado una aplicación de notas con Electron que se ejecuta en Linux, MacOS y Windows. Puede ampliar aún más esta aplicación agregando funciones como administrar varias notas, implementar una base de datos o integrarla con servicios en la nube.