Bina aplikasi desktop dengan elektron dan sudut

Membina Aplikasi Desktop Cross-Platform: Gabungan sempurna elektron dan sudut

Tutorial ini menunjukkan cara membina aplikasi desktop silang platform menggunakan elektron dan sudut. Electron.js adalah platform yang popular untuk membuat aplikasi desktop untuk Windows, Linux, dan macOS menggunakan JavaScript, HTML, dan CSS. Ia memanfaatkan platform yang kuat seperti Google Chromium dan Node.js dan menyediakan set API sendiri untuk berinteraksi dengan sistem operasi.

Kami akan belajar cara memasang CLI sudut, membuat projek sudut baru, dan memasang versi terkini elektron dari NPM sebagai kebergantungan pembangunan. Tutorial ini juga termasuk membuat tetingkap GUI dan memuatkan fail index.html, menetapkan fail main.js sebagai titik masuk utama, dan menambah skrip untuk memulakan aplikasi elektron selepas membina projek sudut.

Di samping itu, kita akan belajar bagaimana memanggil API elektron dari sudut menggunakan IPC (komunikasi interprocess), yang membolehkan komunikasi antara proses yang berbeza. Kami akan menunjukkan cara memanggil API BrowserWindow dari aplikasi sudut, dan bagaimana untuk membuat tetingkap submodal di mana URL dimuatkan dan memaparkannya apabila siap.

Kelebihan Elektron

Electron menggunakan platform yang kuat seperti Google Chromium dan Node.js, sambil menyediakan API yang kaya untuk berinteraksi dengan sistem operasi yang mendasari. Ia menyediakan bekas asli untuk merangkum aplikasi web, menjadikannya kelihatan dan berasa seperti aplikasi desktop, dan mempunyai akses kepada ciri sistem operasi (serupa dengan Cordova untuk aplikasi mudah alih). Ini bermakna kita boleh menggunakan mana -mana perpustakaan atau rangka kerja JavaScript untuk membina aplikasi kami. Dalam tutorial ini, kami akan menggunakan Angular.

Langkah berjaga -jaga

tutorial ini perlu memenuhi prasyarat berikut:

biasa dengan typescript dan sudut.
Pasang Node.js dan NPM pada mesin pembangunan.

pemasangan sudut cli

Pertama, pasangkan CLI sudut, alat rasmi untuk membuat dan menggunakan projek sudut. Buka terminal baru dan jalankan arahan berikut:

npm install -g @angular/cli

Kami akan memasang CLI sudut di seluruh dunia. Jika arahan gagal disebabkan oleh ralat EACCESS, tambahkan sudo sebelum arahan di Linux atau macOS, atau jalankan arahan arahan sebagai pentadbir di Windows.

Jika CLI dipasang dengan jayanya, navigasi ke direktori kerja anda dan buat projek sudut baru menggunakan arahan berikut:

cd ~
ng new electron-angular-demo

Menunggu penjanaan fail projek dan kebergantungan dipasang dari npm. Seterusnya, navigasi ke direktori root projek dan jalankan arahan berikut untuk memasang versi terkini elektron dari NPM sebagai kebergantungan pembangunan:

npm install --save-dev electron@latest

Sebagai penulisan ini, arahan ini akan memasang elektron v4.1.4.

Buat fail main.js

Seterusnya, buat fail main.js dan tambahkan kod berikut:

npm install -g @angular/cli

Kod ini hanya mencipta tetingkap GUI dan memuat fail index.html (yang sepatutnya tersedia dalam folder Dist selepas aplikasi sudut dibina). Kod sampel ini disesuaikan daripada repositori pengenalan rasmi.

Package.json konfigurasi

Seterusnya, buka fail pakej.json projek dan tambahkan kunci utama untuk menetapkan fail main.js sebagai titik entri utama:

cd ~
ng new electron-angular-demo

Tambahkan skrip permulaan

Seterusnya, kita perlu menambah skrip untuk memulakan aplikasi elektron dengan mudah selepas membina projek sudut:

npm install --save-dev electron@latest

Kami menambah permulaan: skrip elektron, yang menjalankan ng binaan-base-href ./ && elektron

NG Build--base-href ./ Sebahagian daripada arahan

membina aplikasi sudut dan menetapkan asas href ke ./.
• ELEKTRA KEPUTUSAN
.

Sekarang, di terminal anda, jalankan perintah berikut:

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

akan membuka tetingkap GUI elektron, tetapi ia akan kosong. Dalam konsol, anda akan melihat ralat "Memuatkan Sumber Tempatan:/Electron-angular-demo/dist/index.html".

Elektron tidak dapat memuatkan fail dari folder Dist kerana ia tidak wujud sama sekali. Jika anda melihat folder projek anda, anda akan melihat bahawa CLI sudut membina aplikasi anda dalam folder Dist/Electron-Angular-Demo, bukan folder Dist.

Dalam fail Main.js kami, kami memberitahu Electron untuk mencari fail index.html dalam folder Dist tanpa subfolder:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

merujuk kepada folder semasa di mana kita menjalankan elektron. __dirname

Kami menggunakan kaedah Path.Join () untuk menyambungkan laluan folder semasa dengan laluan /dist/index.html.

Anda boleh menukar bahagian kedua laluan ke /dist/electron-angular-demo/index.html, atau lebih baik lagi, ubah konfigurasi sudut ke fail output dalam folder Dist tanpa menggunakan subfolder.

Buka fail angular.json, cari projek → Arkitek → Bina → Pilihan → Kunci OutputPath dan Tukar Nilainya dari Dist/Electron-Angular-Demo ke Dist:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

kembali ke terminal anda dan jalankan perintah berikut sekali lagi:

npm run start:electron

Skrip memanggil perintah membina NG untuk membina aplikasi sudut dalam folder Dist dan memanggil elektron dari folder semasa untuk memulakan tetingkap elektron memuatkan aplikasi sudut.

Ini adalah tangkapan skrin aplikasi desktop kami yang menjalankan Angular:

(berikut adalah konsisten dengan teks asal, tetapi perenggan dan tajuk telah diselaraskan untuk menjadikannya lebih mudah untuk dibaca dan difahami.)

memanggil API elektron dari sudut

Sekarang mari kita lihat bagaimana memanggil API elektron dari Angular.

Aplikasi elektron menggunakan proses utama yang menjalankan node.js dan proses penyokong yang menjalankan penyemak imbas kromium. Kami tidak dapat mengakses semua API elektron secara langsung dari aplikasi sudut.

kita perlu menggunakan komunikasi IPC atau antara proses, yang merupakan mekanisme yang disediakan oleh sistem operasi untuk membolehkan komunikasi antara proses yang berbeza.

tidak semua API elektron perlu diakses dari proses utama. Sesetengah API boleh diakses dari proses penyokong, dan beberapa API boleh diakses dari proses utama dan proses penyokong.

BrowserWindow (digunakan untuk membuat dan mengawal tingkap penyemak imbas) hanya tersedia dalam proses utama. API Desktopcapturer (untuk menangkap audio dan video dari desktop menggunakan navigator.mediadevices.getusermedia API) hanya tersedia dalam proses penyair. Sementara itu, API clipboard (untuk melakukan operasi salinan dan tampal pada papan klip sistem) boleh didapati dalam proses utama dan proses penyokong.

anda boleh melihat senarai lengkap API dari dokumentasi rasmi.

mari kita lihat contoh memanggil API BrowserWindow dari aplikasi sudut (hanya tersedia dalam proses utama).

Buka fail main.js dan import ipcmain:

npm install -g @angular/cli

Seterusnya, tentukan fungsi OpenModal ():

cd ~
ng new electron-angular-demo

Kaedah ini akan membuat tetingkap submodal di mana https://www.php.cn/link/aeda4e5a3a222f1e1b0cfe7a8191fb21a url dimuat dan memaparkannya apabila ia siap.

Seterusnya, dengar mesej OpenModal yang dihantar dari proses penyokong dan hubungi fungsi OpenModal () apabila mesej diterima:

npm install --save-dev electron@latest

Sekarang, buka fail SRC/APP/APP.Component.ts dan tambahkan import berikut:

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

Seterusnya, tentukan pembolehubah IPC dan panggilan memerlukan ('elektron'). Ipcrenderer untuk mengimport IPCrenderer dalam komponen sudut anda:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

Kaedah

yang memerlukan () disuntik oleh elektron ke dalam proses penyokong semasa runtime, jadi ia hanya tersedia semasa menjalankan aplikasi web dalam elektron.

Akhirnya, tambahkan kaedah OpenModal () berikut:

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

Kami menggunakan kaedah hantar () ipcrenderer untuk menghantar mesej openModal ke proses utama.

Buka fail src/app/app.component.html dan tambahkan butang, dan mengikatnya ke kaedah OpenModal ():

npm run start:electron

Sekarang, jalankan aplikasi desktop anda dengan arahan berikut:

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

Ini adalah tangkapan skrin tetingkap utama dengan butang:

Jika anda mengklik butang "Buka Modal", tetingkap modal dengan laman web SitePoint harus dibuka:

Anda boleh mencari kod sumber untuk demo ini dari repositori GitHub ini.

Kesimpulan

Dalam tutorial ini, kami melihat cara menjalankan aplikasi web yang dibina menggunakan Angular sebagai aplikasi desktop menggunakan elektron. Kami berharap anda telah belajar betapa mudahnya untuk memulakan aplikasi desktop membina dengan kit pembangunan web!

(kandungan berikut adalah bahagian FAQ yang asal, dan ia sedikit diselaraskan untuk menjadikannya lebih sesuai dengan tabiat ekspresi Cina.)

FAQs (FAQs)

Bagaimana cara debug aplikasi elektron dan sudut?

Debugging adalah bahagian penting dalam proses pembangunan. Untuk aplikasi elektron dan sudut, anda boleh menggunakan alat pemaju Chrome. Untuk membuka alat pemaju, anda boleh menggunakan shift Ctrl Shift I, atau anda boleh menambah baris kod ke fail main.js: mainWindow.webContents.openDevTools(). Ini akan membuka alat pemaju apabila aplikasi bermula. Anda kemudian boleh menyemak elemen, melihat log konsol, dan kod debug seperti yang anda lakukan dalam aplikasi web anda.

Bagaimana untuk membungkus aplikasi elektron dan sudut untuk diedarkan?

Aplikasi elektron dan sudut boleh dibungkus untuk pengedaran menggunakan pembungkus elektron atau pembina elektron. Alat ini membantu anda membungkus aplikasi anda ke dalam fail yang boleh dieksekusi untuk sistem pengendalian yang berbeza. Anda boleh menyesuaikan nama, keterangan, versi, dan banyak lagi aplikasi. Anda perlu memasang pakej ini sebagai DevDependency dan kemudian tambahkan skrip dalam fail Package.json untuk menjalankan arahan pakej.

Bolehkah anda menggunakan bahan sudut dalam elektron?

Ya. Bahan sudut adalah perpustakaan komponen UI yang melaksanakan reka bentuk bahan dalam sudut. Ia menawarkan pelbagai komponen pra-bina yang boleh anda gunakan untuk membuat aplikasi mesra pengguna dan responsif. Untuk menggunakan bahan sudut, anda perlu memasangnya menggunakan npm atau benang dan kemudian mengimport modul yang diperlukan dalam aplikasi.

Bagaimana untuk mengendalikan operasi sistem fail dalam elektron dan sudut?

Electron menyediakan modul terbina dalam yang dipanggil FS (sistem fail) yang boleh anda gunakan untuk mengendalikan operasi sistem fail seperti membaca dan menulis fail. Anda boleh menggunakannya dalam proses utama aplikasi elektron. Walau bagaimanapun, jika anda mahu menggunakannya dalam proses penyajian (sudut), anda perlu menggunakan IPC Electron (komunikasi antara proses) untuk berkomunikasi antara proses utama dan proses penyokong.

Bagaimana menggunakan modul Node.js dalam aplikasi elektron dan sudut?

Electron membolehkan anda menggunakan modul Node.js dalam aplikasi anda. Anda boleh menggunakannya secara langsung dalam proses utama. Walau bagaimanapun, jika anda mahu menggunakannya dalam proses penerima (sudut), anda perlu mengaktifkan nodeintegrasi dalam konfigurasi elektron anda. Ambil perhatian bahawa membolehkan nodeintegration menimbulkan risiko keselamatan jika aplikasi anda memuatkan kandungan jauh, jadi disyorkan untuk menggunakan pilihan yang lebih selamat seperti konteksisolasi dan skrip preload.

Bagaimana untuk mengemas kini aplikasi elektron dan sudut?

Aplikasi elektron dan sudut boleh dikemas kini menggunakan modul AutoupDater Electron. Modul ini membolehkan anda memuat turun dan memasang kemas kini secara automatik di latar belakang. Anda juga boleh menyediakan antara muka pengguna untuk pengguna menyemak secara manual untuk kemas kini.

Bolehkah anda menggunakan CLI sudut dengan elektron?

Ya. CLI Angular adalah antara muka baris arahan Angular yang membantu anda membuat, membangun, dan mengekalkan aplikasi sudut. Anda boleh menggunakannya untuk menghasilkan komponen, perkhidmatan, modul, dan banyak lagi. Anda juga boleh menggunakannya untuk membina aplikasi sudut sebelum berjalan dengan elektron.

Bagaimana untuk melindungi keselamatan aplikasi elektron dan sudut?

Melindungi keselamatan aplikasi elektron dan sudut adalah penting untuk melindungi data pengguna. Electron menyediakan beberapa cadangan keselamatan, seperti membolehkan konteksisolasi, melumpuhkan nodeintegrasi, menggunakan mod kotak pasir, dan banyak lagi. Anda juga harus mengikuti amalan terbaik keselamatan sudut seperti membersihkan input pengguna, menggunakan protokol HTTPS, dan banyak lagi.

Bagaimana untuk menguji aplikasi elektron dan sudut?

Anda boleh menggunakan rangka kerja ujian seperti melati dan karma (untuk sudut) dan spektron (untuk elektron) untuk menguji aplikasi elektron dan sudut. Rangka kerja ini membolehkan anda menulis ujian unit dan ujian akhir-ke-akhir untuk memastikan aplikasi anda berfungsi seperti yang diharapkan.

Bolehkah elektron digunakan dengan rangka kerja atau perpustakaan lain?

Ya. Elektron bukan mengenai rangka kerja, yang bermaksud anda boleh menggunakannya dengan mana -mana kerangka JavaScript atau perpustakaan. Sebagai tambahan kepada sudut, anda juga boleh menggunakannya dengan react, vue.js, svelte dan banyak lagi. Anda juga boleh menggunakannya dengan JavaScript asli jika anda lebih suka.

Atas ialah kandungan terperinci Bina aplikasi desktop dengan elektron dan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!