Home-theater-designers
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 menghapus malware dari iphone
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.
- Unduh dan pasang node.js . Anda dapat mengonfirmasi bahwa Anda telah menginstalnya dengan benar dengan memeriksa versi:
Node juga termasuk npm, manajer paket JavaScript . Anda dapat mengonfirmasi bahwa Anda telah menginstal npm dengan memeriksa versi npm:node -vnpm -v - Buat aplikasi Angular baru menggunakan dari yang baru memerintah. Ini akan membuat folder yang berisi semua yang diperlukan file yang diperlukan untuk proyek Angular untuk bekerja.
ng new electron-app - Di folder root aplikasi Anda, gunakan npm untuk menginstal Electron.
npm install --save-dev electron - Ini akan membuat folder baru untuk Electron di folder node_modules aplikasi.
- Anda juga dapat menginstal Electron secara global di komputer Anda.
npm install -g electron
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.
bisakah kamu menghapus postingan di facebook
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 body terdapat tag
Cara Menggunakan Elektron untuk Membuka Aplikasi Sudut di Jendela Desktop
Buat file main.js, dan konfigurasikan untuk membuka konten aplikasi di dalam jendela desktop.
- 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'); - 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');
} - Saat aplikasi sudah siap, panggil fungsi createWindow(). Ini akan membuat jendela aplikasi untuk aplikasi Anda.
app.whenReady().then(() => {
createWindow()
}) - Dalam src/index.html file, di basis tag, ubah atribut href menjadi './'.
<base href="./"> - 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.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - Dalam .browserlistrc 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 - 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> - Tambahkan beberapa gaya untuk konten di src/app/app.component.css file.
.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;
} - Tambahkan beberapa gaya keseluruhan ke src/styles.css file untuk menghapus margin dan bantalan default.
html {
margin: 0;
padding: 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.
- 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 ."
}, - Untuk menjalankan aplikasi Angular baru Anda di jendela desktop, jalankan perintah berikut di baris perintah, di folder root proyek Anda:
npm run electron - 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.
- Jika Anda ingin tetap melihat aplikasi Anda di browser web, Anda masih dapat menjalankan perintah ng serve.
ng serve - Jika Anda menggunakan dari melayani perintah, konten aplikasi Anda akan tetap ditampilkan di browser web di localhost: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.
cara cek facebook kamu di hack
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#.