Phenquestions
Artikel ini akan membahas panduan tentang menginstal Electron dan membuat aplikasi Electron “Hello World” sederhana di Linux.
Tentang Elektron
Electron adalah kerangka kerja pengembangan aplikasi yang digunakan untuk membuat aplikasi desktop lintas platform menggunakan teknologi web di browser web mandiri. Ini juga menyediakan API khusus sistem operasi dan sistem pengemasan yang kuat untuk distribusi aplikasi yang lebih mudah. Aplikasi Electron yang khas membutuhkan tiga hal untuk bekerja: Node.js runtime, browser berbasis Chromium mandiri yang dilengkapi dengan API khusus Electron dan OS.
Instal Node.js
Anda dapat menginstal Node.js dan manajer paket "npm" dengan menjalankan perintah berikut di Ubuntu:
$ sudo apt install nodejs npmAnda dapat menginstal paket-paket ini di distribusi Linux lainnya dari manajer paket. Atau, unduh binari resmi yang tersedia di Node.js situs web.
Buat Node Baru.Proyek js
Setelah Anda menginstal Node.js dan “npm”, buat proyek baru bernama “HelloWorld” dengan menjalankan perintah berikut secara berurutan:
$mkdir HelloWorld$cd Halo Dunia
Selanjutnya, jalankan terminal di direktori "HelloWorld" dan jalankan perintah di bawah ini untuk menginisialisasi paket baru:
$npm initBuka wizard interaktif di terminal dan masukkan nama dan nilai sesuai kebutuhan.
Tunggu penginstalan selesai. Anda sekarang harus memiliki "paket".json" di direktori "HelloWorld". Memiliki "paket".json” di direktori proyek Anda memudahkan untuk mengonfigurasi parameter proyek dan menjadikan proyek portabel untuk kemudahan berbagi.
Paket.json” file harus memiliki entri seperti ini:
"utama": "indeks.js""Indeks.js” adalah tempat semua logika untuk program utama Anda berada. Anda dapat membuat tambahan “.js”, “.html” dan “.css” sesuai dengan kebutuhan Anda. Untuk tujuan program "HelloWorld" yang dijelaskan dalam panduan ini, perintah di bawah ini akan membuat tiga file yang diperlukan:
$ indeks sentuh.indeks js.indeks html.cssInstal Elektron
Anda dapat menginstal Electron di direktori proyek Anda dengan menjalankan perintah di bawah ini:
$npm instal elektron --save-devTunggu penginstalan selesai. Elektron sekarang akan ditambahkan ke proyek Anda sebagai ketergantungan dan Anda akan melihat folder "node_modules" di direktori proyek Anda. Memasang Electron sebagai ketergantungan per proyek adalah cara yang disarankan untuk memasang Electron menurut dokumentasi Electron resmi. Namun, jika Anda ingin menginstal Electron secara global di sistem Anda, Anda dapat menggunakan perintah yang disebutkan di bawah ini:
$npm pasang elektron -gTambahkan baris berikut ke bagian "skrip" di "paket".json” untuk menyelesaikan penyiapan Elektron:
"mulai": "elektron ."Buat Aplikasi Utama
Buka "indeks".js” di editor teks pilihan Anda dan tambahkan kode berikut ke dalamnya:
const aplikasi, BrowserWindow = membutuhkan('elektron');fungsi createWindow()
jendela const = jendela Browser baru(
lebar: 1600,
tinggi: 900,
webPreferensi:
simpulIntegrasi: benar
);
jendela.loadFile('indeks.html');
aplikasi.kapan siap().lalu (buat Jendela);
Buka "indeks".html” di editor teks favorit Anda, dan masukkan kode berikut di dalamnya:
Halo Dunia !!
Kode javascript cukup jelas. Baris pertama mengimpor modul Elektron yang diperlukan agar aplikasi berfungsi. Selanjutnya, Anda membuat jendela baru browser mandiri yang dilengkapi dengan Electron dan memuat "indeks".html” di dalamnya. Markup di "indeks".html” membuat paragraf baru “Hello World !!”terbungkus dalam”
tandai. Ini juga mencakup tautan referensi ke "indeks".css” file stylesheet yang digunakan nanti di artikel.
Jalankan Aplikasi Elektron Anda
Jalankan perintah di bawah ini untuk meluncurkan aplikasi Electron Anda:
$npm mulaiJika Anda telah mengikuti instruksi dengan benar sejauh ini, Anda akan mendapatkan jendela baru yang mirip dengan ini:
Buka "indeks".css” dan tambahkan kode di bawah ini untuk mengubah warna “Hello World !!” tali.
warna merah;
Jalankan perintah berikut lagi untuk melihat gaya CSS diterapkan ke “Hello World !!” tali.
$npm mulai
Anda sekarang memiliki set minimum file yang diperlukan untuk menjalankan aplikasi Electron dasar. Anda memiliki "indeks".js” untuk menulis logika program, “indeks.html” untuk menambahkan markup HTML dan “indeks.css” untuk menata berbagai elemen. Anda juga memiliki "paket".json" dan folder "node_modules" yang berisi dependensi dan modul yang diperlukan.
Paket Aplikasi Elektron
Anda dapat menggunakan Electron Forge untuk mengemas aplikasi Anda, seperti yang direkomendasikan oleh dokumentasi resmi Electron.
Jalankan perintah di bawah ini untuk menambahkan Electron Forge ke proyek Anda:
$npx @electron-forge/cli@impor terbaruAnda akan melihat beberapa output seperti ini:
Memeriksa sistem AndaMenginisialisasi Repositori Git
Menulis paket yang dimodifikasi.file json
Menginstal dependensi
Menulis paket yang dimodifikasi.file json
Memperbaiki .gitignore
Kami telah BERUSAHA untuk mengonversi aplikasi Anda menjadi format yang dimengerti oleh tempa elektron.
Terima kasih telah menggunakan "penempaan elektron"!!!
Ulasan “paket.json" dan edit atau hapus entri dari bagian "pembuat" sesuai dengan kebutuhan Anda. Misalnya, jika Anda tidak ingin membuat file “RPM”, hapus entri yang terkait dengan pembuatan paket “RPM”.
Jalankan perintah berikut untuk membangun paket aplikasi:
$npm menjalankan makeAnda harus mendapatkan beberapa output yang mirip dengan ini:
> [email protected] buat /home/nit/HelloWorld> pembuatan penempaan elektron
Memeriksa sistem Anda
Menyelesaikan Forge Config
Kami perlu mengemas aplikasi Anda sebelum kami dapat membuatnya
Mempersiapkan Paket Aplikasi untuk arch: x64
Mempersiapkan dependensi asli
Aplikasi Kemasan
Membuat untuk target berikut: deb
Membuat target: deb - Pada platform: linux - Untuk arch: x64
Saya mengedit "paket".json" untuk membuat hanya paket "DEB". Anda dapat menemukan paket bawaan di folder "keluar" yang terletak di dalam direktori proyek Anda.
Kesimpulan
Electron sangat bagus untuk membuat aplikasi lintas platform berdasarkan basis kode tunggal dengan sedikit perubahan spesifik OS. Itu memang memiliki beberapa masalah sendiri, yang paling penting adalah konsumsi sumber daya. Karena semuanya dirender dalam browser mandiri dan jendela browser baru diluncurkan dengan setiap aplikasi Electron, aplikasi ini dapat menjadi sumber daya yang intensif dibandingkan dengan aplikasi lain yang menggunakan toolkit pengembangan aplikasi khusus OS asli.
