Buat aplikasi nod desktop silang platform dengan elektron

Takeaways Key

Electron, alat yang dibangunkan oleh GitHub, membolehkan pemaju membuat aplikasi desktop silang platform menggunakan teknologi JavaScript dan Web. Ia menawarkan penyelesaian yang lebih stabil dan selamat daripada pilihan sebelumnya seperti Flash, Air, Java dan Silverlight.
Projek elektron memerlukan tiga fail: index.html, main.js, dan pakej.json. Fail index.html adalah laman web yang diberikan secara lalai, fail main.js memulakan aplikasi dan membuat tetingkap penyemak imbas untuk menjadikan HTML, dan fail Package.json menyenaraikan kebergantungan aplikasi, metadata dan fail yang diperlukan.
• Aplikasi elektron boleh dibungkus ke dalam aplikasi 'asli' menggunakan alat seperti modul NPM Pemasangan Elektron. Ini mewujudkan binari yang boleh dilaksanakan yang boleh dijalankan di pelbagai platform, termasuk Windows, MacOS, dan Linux.
• Electron bukan hanya untuk aplikasi mudah. Ia boleh mengendalikan fungsi kompleks dan menawarkan akses kepada ciri -ciri seperti akses papan klip, alat bar menu aplikasi, dan alat dev Chrome untuk debugging. Beberapa aplikasi popular seperti Atom, Slack, dan Kitematic dibina dengan elektron.
panggil saya kuno, tetapi saya lebih suka menggunakan aplikasi desktop yang sesuai untuk setiap tujuan. Saya rasa jika semua yang saya akan gunakan adalah penyemak imbas untuk semua yang saya lakukan, maka mengapa komputer 'betul'? Pada tahap praktikal, saya sering melakukan perjalanan dan secara umumnya 'antara' sambungan internet atau menggunakan sambungan internet yang tidak stabil, dan aplikasi 'sebenar' biasanya jauh lebih baik untuk membolehkan kerja luar talian yang berkesan.

Saya menghargai betapa kompleksnya membangun dan mengekalkan aplikasi desktop asli dan dapat memahami mengapa syarikat mendorong pengguna ke arah web atau versi silang platform. Terdapat banyak pilihan untuk mencapai ini selama beberapa dekad. Flash, Air, Java dan Sliverlight adalah semua pilihan yang menjanjikan keupayaan ini dengan pelbagai tahap kejayaan.

Masalah utama dengan pilihan ini ialah mereka secara umumnya melibatkan pembelajaran bahasa lain (yang mengalahkan titik) atau pengguna terpaksa memasang plugin yang dilanda kestabilan, prestasi dan masalah keselamatan.

kita semua tahu kuasa teknologi JavaScript dan Web dan telah melihat gelombang pilihan untuk membangun dan membungkus aplikasi desktop silang platform menggunakan pengetahuan ini.

Electron, oleh GitHub adalah satu pilihan, tetapi kerana saya sudah dengan senang hati menggunakan beberapa aplikasi yang dibina dengannya, nampaknya pilihan yang baik untuk disiasat. Selepas dua tahun pembangunan, termasuk satu perubahan nama (dari Atom Shell), Electron baru -baru ini mencapai versi 1.0, sentiasa menjadi peristiwa penting dalam kewujudan projek. Apa masa yang lebih baik untuk melihat apa yang mampu.

Memasang elektron

Electron mempunyai projek permulaan yang cepat dan siaran pra-bina yang ada, tetapi mari menyelam lurus di ujung dalam dan pasang elektron melalui NPM:

atau untuk pencinta homebrew mac, melalui cask:

<span>npm install electron-prebuilt -g
</span>

mana pilihan yang anda ikuti, anda harus berakhir dengan binari elektron yang boleh dilaksanakan.

Aplikasi ini hanya digunakan untuk mengikat dan menjalankan projek akhir anda, bukan untuk mencipta satu. Untuk ini anda boleh menggunakan mana -mana editor teks standard atau IDE.

Projek elektron memerlukan tiga fail:

index.html: Halaman web diberikan secara lalai.
main.js: Memulakan aplikasi dan membuat tetingkap penyemak imbas untuk menjadikan HTML.
pakej.json: Menyenaraikan kebergantungan aplikasi, data meta dan fail yang diperlukan.

anda memerlukan wira

Dalam contoh ini saya akan membuat aplikasi mudah yang menghubungkan ke API Marvel, menarik 25 pahlawan super dan memaparkan nama dan imej kecil mereka. Ia akan memaparkan pemberitahuan sistem apabila proses selesai dan mempunyai ikon aplikasi seperti OS. Pengguna akhir tidak akan menyedari bagaimana permohonan itu dibuat atau dapat melihat kod sumber.

anda boleh mencari projek akhir di GitHub.

buka pakej.json dan tambahkan yang berikut:

Ini adalah fail pakej.json standard dan mengikuti format dan pilihan yang sama seperti node.js. Di sini menetapkan nama aplikasi, versi, fail javascript utama dan kebergantungan.

brew <span>install Caskroom/cask/electron
</span>

Jalankan NPM Pasang selepas menambahkan ini untuk memastikan anda mempunyai dependensi dipasang.

main.js mengendalikan interaksi antara sistem operasi tuan rumah dan kod JavaScript anda. Ini akan menjadi contoh mudah, anda boleh mengetahui lebih lanjut mengenai apa yang mungkin dalam dokumentasi Electron.

Pertama, mari kita sediakan keperluan yang diperlukan (iaitu elektron), buat aplikasi, tetingkap penyemak imbas asli dan tempat letak tetingkap utama untuk bekerja dengan.

Pemegang seterusnya berhenti aplikasi jika Windows ditutup. Jika platform adalah OS X, aplikasi biasanya tetap terbuka selepas semua tingkap ditutup dan pengguna biasanya akan berhenti secara eksplisit, jadi mengendalikan kes penggunaan.

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

Setelah elektron diasaskan, buat tetingkap penyemak imbas dan muatkan kod aplikasi. Jika tetingkap ditutup, dereference objek tetingkap.

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

Buat subfolder yang dipanggil App. Dalam app/index.html tambahkan rujukan kepada stylesheets dan fail JavaScript yang diperlukan dan sediakan struktur HTML antara muka.

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

Buat apl/css/index.css dan tambahkan beberapa CSS asas untuk membantu susun atur.

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

Buat apl/js/index.js. Ini akan menjadi tempat kebanyakan fungsi aplikasi berlaku. Mulakan dengan menubuhkan kebergantungan dan pembolehubah yang diperlukan:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Marvel Super Hero Browser<span><span></span>></span>
</span>    <span><span><span><link> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Marvel Super Hero Browser<span><span></span>></span>
</span>    <span><span><span><em>></em></span>Thanks to Marvel for their API.<span><span></span>></span>
</span>
    <span><span><span><div> id<span>="character_list"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><span><span><script> src<span >="js/index.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span>

<span>npm install electron-prebuilt -g
</span>

API Marvel adalah API yang menyeronokkan untuk digunakan, tetapi ia adalah pengesahan dan struktur data boleh mengelirukan. Daftar di sini untuk kunci dan ikuti arahan ini untuk mendapatkan tiga parameter yang diperlukan di atas. Kekunci awam dan peribadi yang diperlukan untuk pengesahan disimpan dalam fail .env dan diakses menggunakan pakej dotenv.

brew <span>install Caskroom/cask/electron
</span>

Nilai had menetapkan berapa banyak rekod yang diminta dan terdapat parameter lain yang boleh ditetapkan.

Jika anda lebih suka melangkau menyambung dan mengesahkan dengan API Marvel, maka saya membuat fail data JSON untuk anda gunakan sebaliknya. Gantikan kod JavaScript di atas dengan:

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

seterusnya Buat pembolehubah HTML dan tempat pemegang letak yang diperlukan untuk mengeluarkan setiap aksara ke dalam div aksara:

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

Seterusnya, buat panggilan ke API dan memproses respons, menggerudi ke dalam struktur JSON untuk senarai sebenar aksara di dalam resp.data.results.

Buat elemen HTML untuk setiap watak, memasuki mereka ke Watak_LIST. Imej dalam API Marvel dipisahkan ke dalam nama fail dan lanjutan. Sekiranya tidak ada imej yang tersedia, ia memaparkan imej 'tiada imej yang tersedia', kita boleh mengendalikan ini, tetapi tidak akan dalam contoh ini.

Apabila gelung selesai, paparkan pemberitahuan sistem, kaedah rapat dan mengendalikan kesilapan yang berpotensi yang menghubungkan ke API.

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

Jalankan permohonan dengan melaksanakan arahan di bawah dalam direktori root projek:

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

Pembungkusan Aplikasi

Pembungkusan kod ke dalam aplikasi 'asli' adalah mudah tetapi memerlukan beberapa keping. Pertama ikon untuk lencana aplikasi. Jenis rupa dan fail ini bergantung kepada sistem operasi yang anda targetkan, tetapi inilah ikon yang saya gunakan, diambil dari aplikasi Android rasmi Marvel.

NOTA: Kami menggunakan sifat Marvel yang berhak cipta di sini untuk tujuan ilustrasi. Tolong jangan mengedarkannya sebagai anda sendiri!

Saya kemudian menggunakan iconverticons.com/online/ untuk menukar PNG ke fail ikon Mac, tetapi ada alat lain yang tersedia.

Cara paling mudah untuk membungkus projek ini adalah dengan menggunakan modul NPM Pemasangan Elektron (nota: ini perlu dipasang secara berasingan). Ia boleh menjana binari yang besar, untuk aplikasi desktop ini mungkin tidak menjadi masalah, tetapi jika ia, pilihan lain diterangkan di sini.

Jika anda pembungkusan untuk Windows pada platform bukan Windows, anda perlu memasang wain, yang merupakan kebergantungan yang besar.

mereka berkumpul, inilah cara membuat permohonan permohonan. Dalam folder projek anda, jalankan (

menggantikan dengan nilai yang relevan untuk projek anda

):

mengikut urutan, parameter ini ditetapkan:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Marvel Super Hero Browser<span><span></span>></span>
</span>    <span><span><span><link> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><h1 id="gt">></h1></span>Marvel Super Hero Browser<span><span></span>></span>
</span>    <span><span><span><em>></em></span>Thanks to Marvel for their API.<span><span></span>></span>
</span>
    <span><span><span><div> id<span>="character_list"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><span><span><script> src<span >="js/index.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span>

• Folder Projek.
• nama aplikasi yang dihasilkan.
• Platform: Ini adalah Win32 untuk Windows, Linux, Darwin untuk Vanilla Mac OS X dan MAS untuk pelepasan Mac App Store. Menetapkan semua, akan menghasilkan binari untuk semua platform.
• Senibina: IA32 dan X64 untuk seni bina CPU 32 dan 64 bit, atau semua.
• versi elektron untuk digunakan.
• lokasi binari output dan lebih baik untuk menimpa fail sedia ada.
• ikon untuk digunakan.

Nota: Semua parameter boleh dipisahkan koma untuk pelbagai nilai dan jika anda ingin menghasilkan semua platform dan seni bina, anda boleh menggantikan parameter yang berkaitan dengan -semua.

Langkah selanjutnya

Ini adalah contoh mudah untuk menggambarkan potensi elektron dan banyak lagi yang mungkin. Mengetepikan apa yang dapat dicapai dengan JavaScript tulen, anda mungkin ingin melihat:

penyerahan kedai aplikasi Mac.
menggunakan alat dev chrome.
akses papan klip.
Membuat alat bar menu aplikasi.
Explorer API Interaktif Baru Electron.
Devtron, lanjutan kepada alat dev Chrome, khususnya untuk pembangunan elektron.

masih ragu -ragu? Saya ingin menunjukkan bahawa sambil menulis artikel ini di Atom, saya berkomunikasi dengan editor artikel ini di Slack dan menguji permohonan dalam bekas Docker yang dibuat dalam Kitematik. Kesemuanya adalah aplikasi yang dihasilkan oleh elektron. Ok, mereka mempunyai masalah mereka, tetapi itu cukup mengagumkan!

Saya suka mendengar tentang aplikasi yang anda bina dengan elektron dalam komen di bawah.

soalan yang sering ditanya mengenai aplikasi nod desktop dengan elektron

Apakah prasyarat untuk membangunkan aplikasi desktop dengan elektron? Node.js adalah runtime JavaScript yang membolehkan anda menjalankan JavaScript pada pelayan anda atau mesin anda, sementara NPM adalah pengurus pakej untuk pakej Node.js. Anda boleh memuat turun Node.js dan NPM dari laman web rasmi Node.js. Sebaik sahaja anda memasangnya, anda boleh memasang elektron menggunakan npm.

Bagaimana saya memasang elektron pada sistem saya?

Memasang elektron agak mudah. Sebaik sahaja anda mempunyai Node.js dan NPM yang dipasang, anda boleh memasang elektron secara global pada sistem anda menggunakan arahan berikut di terminal atau command prompt: NPM Install -g Electron. Perintah ini memasang elektron secara global, membolehkan anda mengaksesnya dari mana -mana direktori pada sistem anda.

Bagaimana saya membuat projek elektron baru?

Untuk membuat projek elektron baru, pertama, membuat direktori baru untuk projek anda. Navigasi ke direktori ini di terminal anda atau command prompt, dan kemudian mulakan projek node.js baru menggunakan perintah NPM init. Perintah ini mewujudkan fail pakej.json baru dalam direktori projek anda. Anda kemudian boleh memasang elektron dalam projek anda menggunakan perintah NPM Install -Save Electron.

Apakah struktur aplikasi elektron? pakej.json, main.js, dan index.html. Fail Package.json mengandungi metadata mengenai permohonan anda dan kebergantungannya. Fail Main.js adalah titik masuk aplikasi anda, di mana anda boleh mengawal peristiwa kitaran hayat aplikasi anda. Fail index.html adalah laman web yang dipaparkan apabila aplikasi anda bermula. terminal atau arahan arahan, dan kemudian gunakan elektron perintah .. Perintah ini memulakan aplikasi anda.

Bagaimana saya boleh membungkus aplikasi elektron saya untuk pengedaran? Boleh menggunakan modul seperti pembungkus elektron atau pembina elektron. Modul -modul ini membolehkan anda membungkus aplikasi anda ke dalam fail yang boleh dilaksanakan yang boleh dijalankan di pelbagai platform. .js modul dalam aplikasi elektron anda. Electron menggunakan runtime node.js, jadi anda boleh menggunakan modul node.js dalam aplikasi anda.

Bolehkah saya menggunakan teknologi web dalam aplikasi elektron saya? permohonan elektron anda. Elektron pada dasarnya adalah penyemak imbas web yang membolehkan anda membuat aplikasi desktop menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Menggunakan alat pemaju krom. Elektron dibina di atas kromium, jadi ia termasuk alat pemaju terbina dalam yang boleh anda gunakan untuk debug aplikasi anda. Membina aplikasi silang platform dengan elektron. Elektron membolehkan anda membina aplikasi yang berjalan pada Windows, MacOS, dan Linux.

Atas ialah kandungan terperinci Buat aplikasi nod desktop silang platform dengan elektron. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!