Pierwsza aplikacja Electron
Postępuj zgodnie z instrukcją krok po kroku, aby utworzyć podstawową aplikację Electron „Hello World” i poznać podstawy procesu głównego oraz procesu renderera.
Pierwsza aplikacja Electron to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Często zadawane pytania
Czy lekcja „Pierwsza aplikacja Electron” jest bezpłatna?
Tak — pełny tekst „Pierwsza aplikacja Electron” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.
Co nauczysz się w „Pierwsza aplikacja Electron”?
Postępuj zgodnie z instrukcją krok po kroku, aby utworzyć podstawową aplikację Electron „Hello World” i poznać podstawy procesu głównego oraz procesu renderera. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?
Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Pierwsza aplikacja Electron”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?
Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest Electron
- Konfiguracja środowiska programistycznego
- Pierwsza aplikacja Electron
- Architektura Electron