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.