La prima applicazione Electron
Segua una guida passo passo per creare una semplice applicazione Electron "Hello World", comprendendo i fondamenti dei processi main e renderer.
La prima applicazione Electron è una lezione Electron Desktop App Development gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Electron Desktop App Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Electron Desktop App Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Hello, Electron World!
Time to build your first Electron app — a simple desktop "Hello World." It introduces the core files that bring web tech to the desktop.
Setting Up Your Project
First, scaffold the project: make a folder, run npm init, then install Electron as a dev dependency. The commands are below.
The Main Process (main.js)
Every app has a main process — a Node.js environment that controls the lifecycle, talks to the OS, and creates windows. It starts in main.js.
main.js: Basic Window Setup
In main.js, you import Electron modules and define how to create a window that will host your web content. Try the basic setup below.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// We'll load our HTML file here soon!
}
app.whenReady().then(createWindow);
// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// Handle re-activating app on macOS
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});The Renderer Process (index.html)
The renderer process is where your UI lives — essentially a Chromium window rendering HTML, CSS, and JS. It loads from index.html.
index.html: Our UI Content
This index.html holds your Hello World message — just an ordinary web page, exactly like any you'd build for the browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron App</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>This is your very first desktop application.</p>
</body>
</html>Connecting Main & Renderer
Now connect the two: tell the window to display your page with win.loadFile() inside createWindow. One line wires UI to the main process.
main.js: Loading HTML
Here is main.js updated to load the page. Note how __dirname locates index.html relative to the script, no matter where it runs.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Running Your Electron App
Add a start script to package.json so you can launch the app with one command instead of typing electron each time.
package.json: Start Script
Your package.json should look like this. "electron ." runs main.js in the current folder — save it, then run "npm start" to launch.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My first Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^28.0.0"
}
}Quick Check: Main Process Role
You've seen how main.js and index.html work together. Let's test your understanding of their primary roles.
Recap: Your First Electron App
You built your first Electron app: a main process for lifecycle and windows, a renderer for UI, wired together with a start script.
Domande Frequenti
La lezione «La prima applicazione Electron» è gratuita?
Sì — il testo completo di «La prima applicazione Electron» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Electron Desktop App Development, passa a CoddyKit PRO. Il corso Electron Desktop App Development include 4 lezioni in totale.
Cosa imparerò in «La prima applicazione Electron»?
Segua una guida passo passo per creare una semplice applicazione Electron "Hello World", comprendendo i fondamenti dei processi main e renderer. Eserciti Electron Desktop App Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Electron Desktop App Development?
Non è richiesta alcuna esperienza precedente. Electron Desktop App Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «La prima applicazione Electron»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Electron Desktop App Development?
Sì. Ogni lezione Electron Desktop App Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Cos’è Electron?
- Configurazione dell’ambiente di sviluppo
- La prima applicazione Electron
- Capire l’architettura di Electron