Electron.io Nedir?

Herkese merhaba arkadaşlar. Bugün ki konumuz Electron.io. Kısaca tanımlayacak olursak. Javascript ile yazılmış olan, Html, Css ve JAVASCRİPT teknolojilerini kullanarak masaüstü uygulama yazmamıza imkanı tanıyan bir NPM paketidir kendisi.

Javascript’in çok popüler ve esnek bir dil olması şimdiye kadar bize onlarca şey yaptırdı. Şimdi ise masaüstü uygulaması yapıyoruz.

Javascript ile desktop/masaüstü uygulaması geliştimenin en önemli özelliği, yalnızca tek bir paket ile aynı kodu her işletim sistemi için(Windows, OSX, Linux) kullanabiliyor olmanız olabilir. Yani uygulamayı yazıp çıktısını(.exe) almak istediğimizde birkaç komutla her platformda çalışacak hale getirebiliriz.

Nasıl çalışıyor?

Programımızı Html, Css, Javascript teknolojileri ile kullanıyoruz demiştik. Bildiğiniz gibi bu teknolojileri biz Web’te arayüz tasarlama ve client-side programlamada kullanıyoruz. Aslında bakacak olursak biz masaüstü uygulaması değil bir web sitesi tasarlıyoruz. Electron’un görevi bunu gömülü bir sistem olan Chromium web tarayıcısında açması. Program çalıştığında karşınızda duran, ne kadar öyle gözükmese de, bir web tarayıcısı yani. (Evet bütün sihir bozuldu. Ama ne yapalım bilmenizde fayda var!)

Electron.io ile yazılan programlar

Şimdi demeyin vay efendim Html, Css, Javascript ile ne kadar çeşitli masaüstü uygulaması yazılabilir ki diye. Electron ile yazılmış bir kaç program’a örnek vermek istiyorum. Yazılmış programların en başında herhalde Visual Studio Code ve Atom gelir. Ve tabiki beraberinde kullanışlı 100’lerce uygulama yazılmış şimdiye kadar. Tam listeyi buradan görebilirsiniz.

Başlayalım

Bu yazdıklarımı, bilgisayarınızda Node.js/NPM yüklü olduğunu HTML/CSS/Javascript bilginiz olduğunu ve bilgisayarınızda basit bir text editör olduğunu varsayarak anlatıyorum.

Öncelikle projemizi oluşturmak istediğimiz bir yer seçip orada yeni bir klasor oluşturuyoruz. Ben masaüstüne 'electron-app' adında bir klasor oluşturdum. Daha sonra terminali açıyoruz.

npm install -g electron  
npm install -g electron-prebuit

npm install -g electron:

Öncelikle Electron’u bilgisayarımıza global olarak yüklüyoruz.

npm install -g electron-prebuit: Bu modül herhangi birşeyi derlemeye gerek kalmadan Electron’u NPM üzerinden komut satırları ile kolayca kullanmaya yarıyor.

Yüklememiz tamamlandıysa proje klosörümüzün içinde iki adet dosya oluşturacağız. index.html ve index.js. Bu dosyalardan bir tanesi Electron’u kullanmak için oluşturuğumuz JS dosyası. Bu dosyanın içinde Electron modülüne ait pencere oluşturma, boyutlandırma gibi kodlar yer almakta. HTML uzantılı dosyamızda ise uygulamamızın içerisinde göreceğimiz kodlar yer alıyor. Sırayla bakalım;

index.js;

//Electron paketini kullanarak bir uygulama oluşuturuyoruz.
const {app, BrowserWindow} = require('electron')


// Burada pencere objesini global referans olarak tutuyoruz. Eğer bunu yapmaz isek pencere otomatik olarak kapanacak.
let win

function createWindow () {
  // Yeni bir pencere oluşturuyoruz.
  // Pencere ilk açıldığında genişliği 800, yüksekliği 600 px olacak.
  win = new BrowserWindow({width: 800, height: 600})

  // Uygulamanın içerisine index.html dosyasını yükle.
  win.loadURL(`file://${__dirname}/index.html`)

  // Bu kısım şart değil, yazarsanız uygulama başladığında sağ tarafta konsolu görürsünüz. Kodları incelemek açısından şimdilik kalsın.
   win.webContents.openDevTools()

  // Pencere kapandığında uygulamayı kapat.
  win.on('closed', () => {
    win = null
  })
}

// Bu metod Electron başladığında çağırılacak ve bir tarayıcı penceresi oluşturacak.
app.on('ready', createWindow)

// Tüm pencereler kapatıldığında uygulamayı sonlandır.
app.on('window-all-closed', () => {
  // MacOS sistemlerde uygulama ekranı kapanmasına rağman menü çubuğu hala aktif kalabildiğinden dolayı MacOs için ayriyetten bu kodu yazıyoruz.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // Yine MacOS'ta Dock üzerinde uygulama iconuna tekrar tıklayınca bir pencere daha açar.
  if (win === null) {
    createWindow()
  }
})

// Bu dosyada uygulama ile ilgili başka ana işlemler kodları yazmaya devam edebiliriz.
// Ayrıca onları başka bir dosyaya yazıp buraya referans vererek kullanabiliriz.

index.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>

kodlarını yazıp kaydettikten sonra terminalde projemizin bulunduğu klosöre geliyoruz;

cd C:\Users\IbrahimPc\Desktop\electron

Daha sonra

electron .  //Noktayı kullanmayı unutmayın :)

komutu ile uygulamamızı başlatıyoruz.

Bu kadar basit. Gördüğünüz üzere index.html sayfamız uygulama içerisinde bize sunuldu. Sağdaki konsol ile kodlarımızı kontrol edebiliriz. Başta bu uygulamanın Chromium denilen browser üzerinde açıldığından bahsetmiştim. Bu konsol bir nevi onun kanıtı.

Electron’u kullanmanın farklı yolları var. Biz en basit yollardan biri ile uygulama oluşturduk. İleriki derslerde Electron.io ile ilgili farklı paylaşımlarda bulunacağım. Şimdilik bu kadar. Okuduğunuz için teşekkür ederim!