Come creare un'applicazione di Note con Electron

Introduzione

Electron è un framework che permette di creare applicazioni desktop native utilizzando tecnologie web come JavaScript, HTML e CSS. In questo tutorial, costruiremo un'applicazione di note semplice utilizzabile su Linux, MacOS e Windows.

Prerequisiti

Avere Node.js e npm installati. Se non li hai già, scarica e installa da https://nodejs.org/.

Configurazione iniziale

Crea una nuova cartella per il tuo progetto e naviga all'interno:

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

Inizializza un nuovo progetto npm:

npm init -y

Installa Electron

npm install electron --save-dev

Creazione della struttura del progetto

Crea i seguenti file e cartelle:

main.js (il file principale dell'app Electron)
index.html (l'interfaccia utente dell'app)
styles.css (stili dell'app)

Strutturazione dell'interfaccia utente

Nel file index.html, inserisci il seguente codice:

<!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>

In styles.css, aggiungi alcuni stili di base:

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

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

button {
    align-self: flex-end;
}

Logica Electron

In main.js, aggiungi:

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();
    }
});

Logica dell'applicazione

Crea un file renderer.js e aggiungi:

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!');
});

Questo codice salverà il contenuto della textarea in un file chiamato nota.txt ogni volta che viene premuto il pulsante.

Avvia l'applicazione

Nel file package.json, modifica la sezione "scripts" per includere:

"start": "electron main.js"

Ora puoi avviare l'applicazione con:

npm start

Conclusione

Hai creato un'applicazione di note con Electron che può essere eseguita su Linux, MacOS e Windows. Puoi espandere ulteriormente quest'app, aggiungendo funzionalità come la gestione di più note, l'implementazione di un database o l'integrazione con servizi cloud.

Creare un'applicazione di Note con Electron per Linux, MacOS e Windows