PricingLoginStart free
Electron Desktop App Development · Ders

İlk Electron Uygulamanız

Ana ve işleyici süreçlerin temellerini ele alan adım adım kılavuzu izleyerek temel bir 'Hello World' Electron uygulaması oluşturun.

3. ders / 412 adım

İlk Electron Uygulamanız, CoddyKit'te ücretsiz bir Electron Desktop App Development dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Electron Desktop App Development öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

İnteraktif derste cevapla

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.

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
12
Dersler
47
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“İlk Electron Uygulamanız” dersi ücretsiz mi?

Evet — “İlk Electron Uygulamanız” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Electron Desktop App Development kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

“İlk Electron Uygulamanız” dersinde ne öğreneceğim?

Ana ve işleyici süreçlerin temellerini ele alan adım adım kılavuzu izleyerek temel bir 'Hello World' Electron uygulaması oluşturun. Electron Desktop App Development ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Electron Desktop App Development öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Electron Desktop App Development, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İlk Electron Uygulamanız” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Electron Desktop App Development dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Electron Desktop App Development dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Electron Nedir
  2. Geliştirme Ortamınızı Kurma
  3. İlk Electron Uygulamanız
  4. Electron Mimarısını Anlama
← Electron Desktop App Development Sayfasına Dön