Electron Desktop App Development · Pelajaran

Aplikasi Electron Pertama Anda

Ikuti panduan langkah demi langkah untuk membuat aplikasi Electron dasar “Hello World”, termasuk dasar-dasar proses utama dan proses perender.

Pelajaran 3 dari 412 langkah

Aplikasi Electron Pertama Anda adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Electron Desktop App Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Jawab di pelajaran interaktif

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.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 12
Pelajaran: 47

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Aplikasi Electron Pertama Anda” gratis?

Ya — teks lengkap “Aplikasi Electron Pertama Anda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Electron Desktop App Development, upgrade ke CoddyKit PRO. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Aplikasi Electron Pertama Anda”?

Ikuti panduan langkah demi langkah untuk membuat aplikasi Electron dasar “Hello World”, termasuk dasar-dasar proses utama dan proses perender. Kamu berlatih Electron Desktop App Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Electron Desktop App Development?

Tidak diperlukan pengalaman sebelumnya. Electron Desktop App Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Aplikasi Electron Pertama Anda” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Electron Desktop App Development ini?

Ya. Setiap pelajaran Electron Desktop App Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Electron Desktop App Development