# 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