Dasar-Dasar Elektron: Cara Mengonfigurasi dan Menjalankan Aplikasi Elektron Sudut

Electron menghadirkan kekuatan web ke aplikasi lintas platform, termasuk yang Anda buat dengan Angular.

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 Instal node.js. Anda dapat mengonfirmasi bahwa Anda telah menginstalnya dengan benar dengan memeriksa versi:
    node -v

    Node juga menyertakan npm, pengelola 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 file yang diperlukan agar proyek Angular berfungsi.
    ng new electron-app
  3. Di folder root aplikasi Anda, gunakan npm untuk menginstal Elektron.
    npm install 
  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 electron


See also  Cara Membuat Game Petualangan Berbasis Teks dengan Python

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="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-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.
    const { app, BrowserWindow } = require('electron');
  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”.
    function createWindow() {
    win = new BrowserWindow({width: 800, height: 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(() => {
    createWindow()
    })
  4. Dalam src/index.html file, di basis tag, ubah atribut href menjadi “./”.
    <base href="./">
  5. Di package.jsontambah 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.
    {
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "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.
    last 1 Chrome version
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  7. Hapus konten default di src/app/app.component.html mengajukan. Ganti dengan beberapa konten baru.
    <div class="content">
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. Tambahkan beberapa gaya untuk konten di src/app/app.component.css mengajukan.
    .content {
    line-height: 2rem;
    font-size: 1.2em;
    margin: 48px 10%;
    font-family: Arial, sans-serif
    }
    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 85%;
    padding: 16px 48px;
    margin: 24px 0px;
    background-color: whitesmoke;
    font-family: sans-serif;
    }
  9. Tambahkan beberapa gaya keseluruhan ke src/styles.css file untuk menghapus margin dan padding default.
    html {
    margin: 0;
    padding: 0;
    }


See also  Cara Menyalin Teks Dari Video di Mac

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.
    "scripts": {
    ...
    "electron": "ng build && electron ."
    },
  2. Untuk menjalankan aplikasi Angular baru Anda di jendela desktop, jalankan perintah berikut di baris perintah, di folder root proyek Anda:
    npm run electron
  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 serve
  5. Jika Anda menggunakan ng melayani perintah, konten aplikasi Anda akan tetap ditampilkan di browser web di localhost:4200.


Membangun Aplikasi Desktop Dengan Electron

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#.

See also  Cara Menangani Kesalahan dalam JavaScript