Elektron - Halo Dunia
Kami telah membuat package.jsonfile untuk proyek kami. Sekarang kita akan membuat aplikasi desktop pertama kita menggunakan Electron.
Buat file baru yang disebut main.js . Masukkan kode berikut di dalamnya -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Buat file lain, kali ini file HTML bernama index.html . Masukkan kode berikut di dalamnya.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>Jalankan aplikasi ini menggunakan perintah berikut -
$ electron ./main.jsJendela baru akan terbuka. Ini akan terlihat seperti berikut -
Bagaimana Aplikasi Ini Bekerja?
Kami membuat file utama dan file HTML. File utama menggunakan dua modul - app dan BrowserWindow . Modul aplikasi digunakan untuk mengontrol siklus hidup kejadian aplikasi Anda sementara modul BrowserWindow digunakan untuk membuat dan mengontrol jendela browser.
Kami mendefinisikan fungsi createWindow , di mana kami membuat BrowserWindow baru dan melampirkan URL ke BrowserWindow ini. Ini adalah file HTML yang di-render dan ditampilkan kepada kami saat kami menjalankan aplikasi.
Kami telah menggunakan proses objek Electron asli di file html kami. Objek ini diperluas dari objek proses Node.js dan mencakup semuat=its fungsi sambil menambahkan lebih banyak lagi.