252 lines
8.3 KiB
Markdown
252 lines
8.3 KiB
Markdown
|
# 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`](../api/ipc-renderer.md) gibi ve mesaj gönderimi icin
|
|||
|
[`ipcMain`](../api/ipc-main.md) modülleri, RPC tarzında kommunikasyon
|
|||
|
için ise [remote](../api/remote.md) modülü barındırmakta.
|
|||
|
Ayrıca SSS başlıkları [how to share data between web pages][share-data] adresinde bulunabilir.
|
|||
|
|
|||
|
## İlk Electron uygulamanızı yazın
|
|||
|
|
|||
|
Electron uygulaması genellikle aşağıdaki gibi yapılandırılmıştır:
|
|||
|
|
|||
|
```text
|
|||
|
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:
|
|||
|
|
|||
|
|
|||
|
```json
|
|||
|
{
|
|||
|
"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:
|
|||
|
|
|||
|
```javascript
|
|||
|
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ı:
|
|||
|
|
|||
|
```html
|
|||
|
<!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`](https://github.com/electron-userland/electron-prebuilt),
|
|||
|
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:
|
|||
|
|
|||
|
```bash
|
|||
|
electron .
|
|||
|
```
|
|||
|
|
|||
|
Eğer lokal olarak yüklediyseniz, o zaman aşağıda ki gibi
|
|||
|
çalıştırın:
|
|||
|
|
|||
|
#### macOS / Linux
|
|||
|
|
|||
|
```bash
|
|||
|
$ ./node_modules/.bin/electron .
|
|||
|
```
|
|||
|
|
|||
|
#### Windows
|
|||
|
|
|||
|
```bash
|
|||
|
$ .\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
|
|||
|
|
|||
|
```bash
|
|||
|
$ .\electron\electron.exe your-app\
|
|||
|
```
|
|||
|
|
|||
|
#### Linux
|
|||
|
|
|||
|
```bash
|
|||
|
$ ./electron/electron your-app/
|
|||
|
```
|
|||
|
|
|||
|
#### macOS
|
|||
|
|
|||
|
```bash
|
|||
|
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
|||
|
```
|
|||
|
|
|||
|
`Electron.app` Electron un dağı₺tım paketinin bir parçasıdır,
|
|||
|
bunu [adresinden](https://github.com/electron/electron/releases) indirebilirsiniz.
|
|||
|
|
|||
|
### Dağıtım olarak çalıştır
|
|||
|
|
|||
|
Uygulamanızı yazdıktan sonra, bir dağıtım oluşturmak için
|
|||
|
[Application Distribution](./application-distribution.md)
|
|||
|
sayfasında ki yönergeleri izleyin ve daha sonra arşivlenmiş uygulamayı çalıştırın.
|
|||
|
|
|||
|
### Örneği deneyin
|
|||
|
|
|||
|
[`electron/electron-quick-start`](https://github.com/electron/electron-quick-start) repository klonlayarak bu eğitimdeki kodu çalıştıra bilirsiniz.
|
|||
|
|
|||
|
**Note**: Bu işlemleri uygulamak için [Git](https://git-scm.com) ve [Node.js](https://nodejs.org/en/download/) ([npm](https://npmjs.org) da bununla birlikte gelir) sisteminizde yüklü olması gerekmektedir.
|
|||
|
|
|||
|
```bash
|
|||
|
# 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](https://electron.atom.io/community/#boilerplates)
|
|||
|
sayfasını ziyaret edin.
|
|||
|
|
|||
|
[share-data]: ../faq.md#how-to-share-data-between-web-pages
|