8.3 KiB
Hızlı Başlangıç
Electron, zengin native(işletim sistemi) API runtime sağlayarak, saf Javascript ile masaüstü uygulamalar geliştirmenize yarar. Electron'u Node.js in, web serverları yerine masaüstü uygulamalara odaklanmış bir variyasyonu olarak kabul edebilirsiniz.
Bu Electronun, grafik kullanıcı arayüzüne bir JavaScript bağlantısı olduğu anlamına gelmez. Aksine, Electron web sayfalarını GUI'si olarak kullanır, yani onu Javascript tarafından kontrol edilen bir minimal Chromium tarayıcısı olarak görebilirsiniz.
Ana İşlem
Electron da, package.json nun main skriptini cağıran işlem the main process_ dir.
Ana işlemde çalışan bu script, GUI'yi web sayfalarını oluşturarak gösterebilir.
Render İşlemi
Electron, web sayfalarını görüntülemek için Chromium kullandığından, aynı zamanda Chromiumun multi-işlem mimarisinide kullanmaktadır. Electron da calıştırılan her web sayfası, the renderer process adı altında kendi işlemlerini çalıştırırlar.
Normal tarayıcılarda, web sayfaları genellikle korumalı bir ortamda çalışır ve yerel kaynaklara erişmesine izin verilmez. Bununla birlikte, elektron kullanıcıları, alt düzey işletim sistemi etkileşimlerine izin veren web sayfalarında Node.js API'lerini kullanma imkanina sahiplerdir.
Ana işlem ile render işlemi arasındaki farklar
Ana işlem, BrowserWindow örneklerini oluşturarak, web sayfalarını hazır
hale getirir. Her bir BrowserWindow örneği web sayfasını kendi render
işleminde çalıştırır. Eger bir BrowserWindow örneği ortadan kaldırıldıysa,
bununla bağlantılı olan render işlemide aynı şekilde sonlandırılır.
Ana işlem tüm web sayfaları ve onların ilgili olduğu render işlemlerini yönetir. Her bir render işlemi izole edilmiş ve sadece kendisinde çalışan web sayfasıyla ilgilenir.
Native GUI ile çalışan API ları web sayfalarında çalıştırmaya izin verilmemektedir, çünkü native GUI kaynaklarının web sayfalarında yönetimi çok tehlikeli ve kaynakların sızdırılması gayet kolaydır. Eğer GUI operasyonlarını bir web sayfasinda gerçekleştirmek istiyorsanız, web sayfasının render işlemi, ana işlem ile, bu tür işlemleri gerçekleştirilmesini talep etmek için kommunikasyon halinde olmalı.
Electron da ana işlem ve render işlemi arasında birden fazla kommunikasyon yolu vardır.
ipcRenderer gibi ve mesaj gönderimi icin
ipcMain modülleri, RPC tarzında kommunikasyon
için ise remote modülü barındırmakta.
Ayrıca SSS başlıkları how to share data between web pages adresinde bulunabilir.
İlk Electron uygulamanızı yazın
Electron uygulaması genellikle aşağıdaki gibi yapılandırılmıştır:
your-app/
├── package.json
├── main.js
└── index.html
package.json dosyasının formatı tamamen Node modüllerine benzer veya aynıdır ve
main şeklinde adlandırılmış script uygulamanızı başlatan komut dosyasıdır,
bu komut dosyası daha sonra main process'i çalıştıracak dosyadır.
package.json dosyasınızın bir örneği aşağıdaki gibi olabilir:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
Note: Eğer package.json dosyasında main kısmı bulunmuyorsa, Electron standart olarak
index.js dosyasını cağıracaktır.
main.js dosyası pencereleri oluşturur, sistem durumlarını handle eder, tipik bir
örnek asağıdaki gibidir:
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Pencere objesini daima global referans olarak tanımla, aksi takdirde,
// eğer JavaScript objesi gereksiz veriler toplayacağı için, pencere
// otomatik olarak kapanacaktır.
let win
function createWindow () {
// Tarayıcı pencerelerini oluşturur.
win = new BrowserWindow({width: 800, height: 600})
// ve uygulamanın index.html sayfasını yükler.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// DevTools her uygulama başlatıldığında açılır.
win.webContents.openDevTools()
// Pencere kapandıktan sonra çağrılacaktır.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// Bu metod Electronun başlatılması tamamlandıktan sonra
// çagrılacak ve yeni tarayıcı pencereleri açmaya hazır hale gelecektir.
// Bazı API lar sadece bu event gerçekleştikten sonra kullanılabilir.
app.on('ready', createWindow)
// Eğer tüm pencereler kapandıysa, çıkış yap.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// Bu sayfada, uygulamanızın spesifik main process kodlarını dahil edebilirsiniz.
// Aynı zamanda bu kodları ayrı dosyalar halinde oluştura bilir
// ve buraya require yoluyla ekleye bilirsiniz.
Son olarak index.html yani göstermek istediğiniz web sayfası:
<!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>
Uygulamanızı çalıştırın
main.js, index.html, ve package.json dosyalarını oluşturduktan sonra,
uygulamanızı lokal olarak test ederek, doğru çalışıp çalışmadığını
test etmek isteye bilirsiniz. O halde aşağıdaki yönergeleri takip edin:
electron
electron,
Electron'un pre-compiled versiyonunu içeren bir npm modülüdür.
Eğer bunu global olarak npm yoluyla yüklediyseniz, o halde sadece aşağıdaki komutu
uygulamanızın kaynak klasöründe çalıstırmanız yeterlidir:
electron .
Eğer lokal olarak yüklediyseniz, o zaman aşağıda ki gibi çalıştırın:
macOS / Linux
$ ./node_modules/.bin/electron .
Windows
$ .\node_modules\.bin\electron .
Manuel olarak indirilmiş Electron mimarisi
Eğer Electronu manuel olarak indirdiyseniz, aynı zamanda dahili olan mimariyide kullanarak, uygulamanızı çalıştıra bilirsiniz.
Windows
$ .\electron\electron.exe your-app\
Linux
$ ./electron/electron your-app/
macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron.app Electron un dağı₺tım paketinin bir parçasıdır,
bunu adresinden indirebilirsiniz.
Dağıtım olarak çalıştır
Uygulamanızı yazdıktan sonra, bir dağıtım oluşturmak için
Application Distribution
sayfasında ki yönergeleri izleyin ve daha sonra arşivlenmiş uygulamayı çalıştırın.
Örneği deneyin
electron/electron-quick-start repository klonlayarak bu eğitimdeki kodu çalıştıra bilirsiniz.
Note: Bu işlemleri uygulamak için Git ve Node.js (npm da bununla birlikte gelir) sisteminizde yüklü olması gerekmektedir.
# Repository klonla
$ git clone https://github.com/electron/electron-quick-start
# Electron repositorye git
$ cd electron-quick-start
# Gerekli kütüphaneleri yükle
$ npm install
# Uygulamayı çalıştır
$ npm start
Daha fazla örnek uygulama için, harika electron topluluğu tarafından oluşturulan, list of boilerplates sayfasını ziyaret edin.