Pembangunan Aplikasi Desktop Electron · Pelajaran

Proses Utama vs. Pemapar

Terokai peranan dan tanggungjawab proses utama serta proses pemapar, dan cara kedua-duanya berinteraksi untuk membentuk aplikasi Electron yang lengkap.

Pelajaran 1 daripada 411 langkah

Proses Utama vs. Pemapar ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Sifat Dwi Electron

Selamat datang! Electron membolehkan anda membina aplikasi desktop menggunakan teknologi web. Namun, ia bukan sekadar pelayar web biasa. Electron menggunakan seni bina dua proses yang unik untuk merealisasikan perkara ini.

Anda akan mempelajari dua jenis proses utama: Proses Utama dan Proses Pemapar. Memahami peranan kedua-duanya penting untuk membina aplikasi Electron yang kukuh.

Proses Utama: Pengemudi

Anggaplah Proses Utama sebagai pengemudi aplikasi Electron anda. Ia ialah persekitaran Node.js, bermakna ia mempunyai akses penuh kepada API Node.js dan boleh berinteraksi secara langsung dengan sistem pengendalian.

Biasanya hanya terdapat satu Proses Utama yang berjalan bagi setiap aplikasi Electron.

Tanggungjawab Proses Utama

Proses utama bertanggungjawab terhadap tugas teras aplikasi, termasuk:

Mencipta dan mengurus tetingkap pelayar: Setiap tetingkap dalam aplikasi anda dikawal oleh Proses Utama.
Mengendalikan peristiwa kitar hayat aplikasi: Contohnya apabila aplikasi bermula, ditutup, atau menjadi aktif.
Mengakses ciri OS natif: Seperti mencipta menu, membuka dialog, dan berinteraksi dengan sistem fail.
Mengurus sumber seluruh aplikasi: Tetapan, keadaan global, dan sebagainya.

Proses Utama dalam Tindakan

Ini ialah fail main.js biasa, iaitu titik masuk untuk aplikasi Electron. Fail ini mencipta dan mengurus tetingkap. Perhatikan bahawa ia menggunakan modul Electron dan ciri Node.js.

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false, // Keep false for security
      contextIsolation: true  // Keep true for security
    }
  });

  // Load the index.html of the app.
  mainWindow.loadFile('index.html');

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.whenReady().then(createWindow);

// Quit when all windows are closed, except on macOS.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Proses Pemapar: Paparan Antara Muka Pengguna

Proses Pemapar ialah tempat antara muka pengguna anda berada. Setiap tetingkap Electron (yang dicipta oleh Proses Utama) menjalankan Proses Pemapar khususnya sendiri. Pada asasnya, ia ialah tika pelayar Chromium yang lengkap, seperti tab dalam Chrome.

Di sinilah HTML, CSS, dan JavaScript untuk antara muka pengguna anda dilaksanakan.

Tanggungjawab Proses Pemapar

Proses pemapar memberi tumpuan kepada pemaparan kandungan dan interaksi dengan pengguna:

Memaparkan kandungan web: Ia mengambil HTML, CSS, dan JavaScript anda lalu memaparkannya secara visual.
Mengendalikan interaksi pengguna: Memberi respons kepada klik, input papan kekunci, penghantaran borang, dan sebagainya.
Melaksanakan API web: Semua API pelayar standard seperti manipulasi DOM, Fetch API, Web Workers, dan sebagainya tersedia di sini.
Akses OS secara langsung yang terhad: Demi keselamatan, ia tidak mempunyai akses langsung kepada modul Node.js atau ciri OS natif secara lalai.

Proses Pemapar dalam Tindakan

index.html ini dimuatkan oleh Proses Utama ke dalam tetingkap. JavaScript di dalamnya berjalan dalam Proses Pemapar, sama seperti dalam pelayar web.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App UI</title>
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 50px; background-color: #f0f2f5; color: #333; }
    h1 { color: #2c3e50; }
    p { margin-top: 20px; font-size: 1.1em; }
    code { background-color: #e0e0e0; padding: 2px 4px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>Hello from the Renderer!</h1>
  <p>This content is displayed by Chromium inside an Electron window.</p>
  <p>The script below runs in the <code>Renderer Process</code>.</p>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const messageDiv = document.createElement('div');
      messageDiv.innerHTML = '<p><b>DOM Content Loaded!</b> This is a Renderer process event.</p>';
      document.body.appendChild(messageDiv);
      console.log('Renderer process is ready!');
    });
  </script>
</body>
</html>

Utama berbanding Pemapar: Perbezaan Utama

Berikut ialah ringkasan pantas tentang perbezaan teras:

Persekitaran:
Utama: masa jalan Node.js
Pemapar: masa jalan web Chromium
Tika:
Utama: Satu tika bagi setiap aplikasi
Pemapar: Satu bagi setiap BrowserWindow
Akses OS:
Utama: Akses penuh kepada Node.js dan OS natif
Pemapar: API web sahaja yang terhad (secara lalai)
Tujuan:
Utama: Kitar hayat aplikasi, pengurusan tetingkap, ciri natif
Pemapar: Pemaparan antara muka pengguna, interaksi pengguna

Mengapa Model Dua Proses?

Seni bina ini bukan semata-mata untuk menambah kerumitan; ia menawarkan manfaat yang besar:

Keselamatan: Mengasingkan kandungan web yang berpotensi tidak dipercayai daripada akses OS secara langsung. Jika proses pemapar terjejas, proses utama dan sistem masih dilindungi.
Kestabilan: Jika halaman web tertentu (pemapar) ranap akibat pepijat, keseluruhan aplikasi atau tetingkap lain tidak akan turut terhenti.
Prestasi: Tugas berat boleh dijalankan dalam Proses Utama (atau proses pekerja berasingan), sambil memastikan antara muka pengguna (Pemapar) kekal responsif dan lancar.

Semakan Peranan Proses

Uji pemahaman anda tentang proses Utama dan Pemapar.

Jawab dalam pelajaran interaktif

Ringkasan: Utama dan Pemapar

Syabas! Kini anda telah memahami seni bina asas aplikasi Electron.

Proses Utama (Node.js) ialah pusat kawalan yang mengurus tetingkap dan mengakses ciri OS natif.
Setiap proses Pemapar (Chromium) memaparkan kandungan antara muka pengguna berasaskan web anda dalam tetingkap.

Pemisahan ini menyediakan keselamatan, kestabilan, dan prestasi. Dalam pelajaran seterusnya, anda akan mengetahui cara proses-proses ini berkomunikasi antara satu sama lain!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Proses Utama vs. Pemapar” percuma?

Ya — teks penuh “Proses Utama vs. Pemapar” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Proses Utama vs. Pemapar”?

Terokai peranan dan tanggungjawab proses utama serta proses pemapar, dan cara kedua-duanya berinteraksi untuk membentuk aplikasi Electron yang lengkap. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Proses Utama vs. Pemapar” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Desktop Electron