Electron memungkinkan Anda membangun aplikasi desktop untuk Windows, Mac, dan Linux. Saat Anda membuat aplikasi menggunakan Electron, Anda dapat melihat pratinjau dan menjalankan aplikasi melalui jendela aplikasi desktop.

Anda dapat menggunakan Electron untuk mengonfigurasi aplikasi Angular agar diluncurkan di jendela desktop, alih-alih browser web biasa. Anda dapat melakukan ini menggunakan file JavaScript di dalam aplikasi itu sendiri.

Setelah Anda mengonfigurasi Electron, Anda dapat melanjutkan pengembangan seperti yang Anda lakukan pada aplikasi Angular biasa. Bagian utama dari aplikasi akan tetap mengikuti struktur Angular standar yang sama.

Cara Memasang Elektron sebagai Bagian dari Aplikasi Anda

Untuk menggunakan Electron, Anda perlu mengunduh dan menginstal node.js, dan menggunakan npm install untuk menambahkan Electron ke aplikasi Anda.

  1. Unduh dan pasang node.js. Anda dapat mengonfirmasi bahwa Anda telah menginstalnya dengan benar dengan memeriksa versi:
    simpul -v
    Node juga termasuk npm, manajer paket JavaScript. Anda dapat mengonfirmasi bahwa Anda telah menginstal npm dengan memeriksa versi npm:
    npm -v
  2. Buat aplikasi Angular baru menggunakan baru memerintah. Ini akan membuat folder yang berisi semua yang diperlukan file yang diperlukan untuk proyek Angular bekerja.
    ng baru elektron-aplikasi
  3. Di folder root aplikasi Anda, gunakan npm untuk menginstal Elektron.
    npm Install--save-dev elektron
  4. Ini akan membuat folder baru untuk Electron di folder node_modules aplikasi.
  5. Anda juga dapat menginstal Electron secara global di komputer Anda.
    npm Install -g elektron

Struktur File Aplikasi Elektron Sudut

Electron akan membutuhkan file JavaScript utama untuk membuat dan mengelola jendela desktop. Jendela ini akan menampilkan konten aplikasi Anda di dalamnya. File JavaScript juga akan berisi peristiwa lain yang dapat terjadi, seperti jika pengguna menutup jendela.

Saat runtime, konten yang ditampilkan akan berasal dari file index.html. Secara default, Anda dapat menemukan file index.html di dalam src folder, dan saat runtime salinan bawaannya dibuat secara otomatis di dalam jarak map.

File index.html biasanya terlihat seperti ini:

<!doctype html>
<html lang="id">
<kepala>
<rangkaian meta ="utf-8">
<judul> Aplikasi Elektron </title>
<dasar href="./">
<nama meta ="area pandang" konten="lebar = lebar perangkat, skala awal = 1">
<link rel="ikon" jenis="gambar/ikon-x" href="favicon.ico">
</head>
<tubuh>
<aplikasi-root></app-root>
</body>
</html>

Di dalam tag tubuh ada menandai. Ini akan menampilkan komponen aplikasi utama untuk aplikasi Angular. Anda dapat menemukan komponen aplikasi utama di src/aplikasi map.

Cara Menggunakan Elektron untuk Membuka Aplikasi Sudut di Jendela Desktop

Buat file main.js, dan konfigurasikan untuk membuka konten aplikasi di dalam jendela desktop.

  1. Buat file di root proyek Anda bernama main.js. Dalam file ini, inisialisasi Electron sehingga Anda dapat menggunakannya untuk membuat jendela aplikasi.
    konstan { aplikasi, BrowserWindow } = memerlukan('elektron');
  2. Buat jendela desktop baru dengan lebar dan tinggi tertentu. Muat file indeks sebagai konten yang akan ditampilkan di jendela. Pastikan jalur ke file indeks cocok dengan nama aplikasi Anda. Misalnya, jika Anda menamai aplikasi Anda "aplikasi elektron", jalurnya akan menjadi "dist/electron-app/index.html".
    fungsibuatJendela() {
     menang = baru Jendela Browser({lebar: 800, tinggi: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Saat aplikasi sudah siap, panggil fungsi createWindow(). Ini akan membuat jendela aplikasi untuk aplikasi Anda.
    app.whenReady().then(() => {
     buatJendela()
    })
  4. Dalam src/index.html file, di basis tag, ubah atribut href menjadi "./".
    <dasar href="./">
  5. Di package.json, tambah sebuah utama bidang, dan sertakan file main.js sebagai nilainya. Ini akan menjadi titik masuk aplikasi, sehingga aplikasi menjalankan file main.js saat meluncurkan aplikasi.
    {
    "nama": "elektron-aplikasi",
    "Versi: kapan": "0.0.0",
    "utama": "main.js",
     ...
    }
  6. Dalam .browslistrc file, ubah daftar untuk menghapus iOS safari versi 15.2-15.3. Ini akan mencegah kesalahan kompatibilitas ditampilkan di konsol saat kompilasi.
    1 versi Chrome terakhir
    1 versi Firefox terakhir
    2 versi utama Edge terakhir
    2 versi utama Safari terakhir
    2 versi utama iOS terakhir
    Firefox ESR
    bukanios_saf 15.2-15.3
    bukansafari 15.2-15.3
  7. Hapus konten default di src/app/app.component.html mengajukan. Ganti dengan beberapa konten baru.
    <kelas div="isi">
    <kelas div="kartu">
    <h2> Rumah </h2>
    <p>
     Selamat datang di aplikasi Angular Electron saya!
    </p>
    </div>
    </div>
  8. Tambahkan beberapa gaya untuk konten di src/app/app.component.css mengajukan.
    .isi {
     tinggi garis: 2rem;
    ukuran huruf: 1.2em;
     margin: 48px 10%;
     font-family: Arial, sans-serif
    }
    .kartu {
    bayangan kotak: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     lebar: 85%;
     bantalan: 16px 48px;
     margin: 24px 0px;
     warna latar: asap putih;
     font-family: sans-serif;
    }
  9. Tambahkan beberapa gaya keseluruhan ke src/styles.css file untuk menghapus margin dan padding default.
    html {
     margin: 0;
     bantalan: 0;
    }

Cara Menjalankan Aplikasi Elektron

Untuk menjalankan aplikasi Anda di jendela, konfigurasikan perintah di larik skrip package.json. Kemudian, jalankan aplikasi Anda menggunakan perintah di terminal.

  1. Di package.json, di dalam larik skrip, tambahkan perintah untuk membangun aplikasi Angular dan menjalankan Electron. Pastikan Anda menambahkan koma setelah entri sebelumnya dalam larik Skrip.
    "skrip": {
     ...
    "elektron": "membangun && elektron."
    },
  2. Untuk menjalankan aplikasi Angular baru Anda di jendela desktop, jalankan perintah berikut di baris perintah, di folder root proyek Anda:
    npm menjalankan elektron
  3. Tunggu hingga aplikasi Anda dikompilasi. Setelah selesai, alih-alih membuka aplikasi Angular Anda di browser web, jendela desktop akan terbuka sebagai gantinya. Jendela desktop akan menampilkan konten aplikasi Angular Anda.
  4. Jika Anda ingin tetap melihat aplikasi Anda di browser web, Anda masih dapat menjalankan perintah ng serve.
    ng melayani
  5. Jika Anda menggunakan ng melayani perintah, konten aplikasi Anda akan tetap ditampilkan di browser web di host lokal: 4200.

Membangun Aplikasi Desktop Dengan Elektron

Anda dapat menggunakan Electron untuk membangun aplikasi desktop di Windows, Mac, dan Linux. Secara default, Anda dapat menguji aplikasi Angular menggunakan browser web melalui perintah ng serve. Anda dapat mengonfigurasi aplikasi Angular Anda untuk juga terbuka di jendela desktop alih-alih browser web.

Anda dapat melakukan ini menggunakan file JavaScript. Anda juga perlu mengonfigurasi file index.html, dan package.json Anda. Aplikasi keseluruhan masih akan mengikuti struktur yang sama seperti aplikasi Angular biasa.

Jika Anda ingin mempelajari lebih lanjut tentang cara membuat aplikasi desktop, Anda juga dapat menjelajahi aplikasi Windows Forms. Aplikasi Windows Forms memungkinkan Anda untuk mengeklik dan menyeret elemen UI ke kanvas sambil menambahkan logika pengkodean apa pun ke dalam file C#.