Electron ile Masaüstü Uygulaması Geliştirmek

Electron, Github’da mühendis olarak çalışan Cheng Zhao tarafından başlatılan açık kaynaklı bir projedir. Temel olarak popüler iki teknolojinin bir karışımıdır; Node.js ve Chromium. Chromium web sayfalarının oluşturulmasında, Node.js ise ağ ve dosya sisteminde görev alır. Birleşimleri bize Electron JS frameworkünü oluşturur. 

Electron JS, HTML ve CSS ile masaüstü uygulamalar oluşturmamızı sağlayan bir frameworktür. Eğer bir web sitesi oluşturabiliyorsanız, web sitesinin masaüstü uygulamasını da oluşturabilirsiniz. Mac, Windows ve Linux ile uyumlu uygulamalar geliştirebilirsiniz. Açık kaynaklı bir framework olup, katılımcı toplulukları tarafından sürekli geliştirilir. Kendi içerisinde otomatik güncellemeler, bildirimler, kilitlenme bildirimleri, hata ayıklama ve windows yükleyicilieri bulundurur. Böylelikle dışarıdan bir paket kurmadan temel işlemleri yapabileceğiniz bir masaüstü uygulamasını rahatlıkla oluşturabilirsiniz. 

Temel İşlemler

Electron, temelde iki ana işlemden oluşur. Birisi main işlemi, diğeri ise renderer işlemidir. Main işleminde native modüller bulunur; örneğin uygulamayı kapatıp açmak gibi. Bir uygulamada minimize butonu tıklandığında, main tarafında bir fonksiyon çalıştırılır ve uygulama minimize olur. Main işleminin bir modülü olan browserWindow tarafından renderer işlemi oluşturulmaktadır. Renderer bir DOM (Document Object Model) oluşturur. Renderer ve main işlemi haberleşmesi işin IPC katmanı kullanılır. Bu katman rendererdan aldığı bilgiyi main işlemine iletir. Main işlemi gelen isteği gerçekleştirdikten sonra, IPC katmanına sonucu iletir. IPC katmanı sonucu renderer işlemine tekrar iletir. Örneğin, uygulamamızda bir buton var ve bu buton uygulamayı kapatıyor. Buton tıklandığında IPC katmanı devreye girer, isteği main işlemine iletir. Main işlemi gerçekleştirir ve uygulamayı kapatır. 

Temelde 3 farklı electron sürümü bulunuyor. Bunlar;

• Stable : Uygulamanın kararlı sürümüdür. 
• Beta : Uygulamayı yaklaşan değişimler için test edebileceğimiz sürümüdür. 
• Nightly : En son özelliklerle deneme yapabileceğiniz sürümdür.  

Günümüzde kullandığımız birçok popüler masaüstü uygulaması electron ile geliştirildi. Bunlardan birkaç tanesi:

• Visual Studio Code 
• Microsoft Teams 
• Skype 
• Slack 
• Twicth 
• Github Desktop 

Masaüstü Uygulaması Nasıl Yazılır? 

1 - İlk olarak bilgisayarımıza node.js kuruyoruz. Kurulum için aşağıdaki linkten bilgisayarınıza uygun olan sürümü indirebilirsiniz. 

https://nodejs.org/en/download

Node.js kurulumuyla birlikte bilgisayarınızın komut istemcisinde npm komutu aktif hale gelecektir. Kontrol etmek için komut istemcisine npm -v yazarak kontrol edebilirsiniz. 

2 - Bir proje dosyası oluşturun ve komut istemcisinde proje klasörünün yolunu açın.  

npm init

komutu ile package.json dosyasını oluşturun. 

npm i -d electron  

komutu ile electronu uygulamamıza dahil edelim. Kök klasörümüze “index.js” isimli bir dosya oluşturalım. Oluşturduğumuz package.json dosyasında bulunan script alanına aşağıdaki kodu ekleyelim.

"start": "electron ." 

Artık electron ile masaüstü uygulamamızı oluşturmaya başlayabiliriz. Az önce oluşturduğumuz index.js dosyası bizim main işlemlerimizi yönettiğimiz dosyamız olacak. Index dosyası içerisine bir BrowserWindow oluşturalım. Uygulamamız çalıştığında BrowserWindow çalışacak şekilde ayarlarımızı yapalım.

const electron = require('electron'); 

const BrowserWindow = electron.BrowserWindow; 
const app = electron.app; 
let mainWindow; 

async function createMainWindow() { 
  mainWindow = new BrowserWindow({ 
    width: 1200, // açılacak pencerenin genişliği 
    height: 800, // açılacak pencerenin yüksekliği 
    title: 'Electron Exmp', // açılacak pencerenin başlığı 
  }); 

  // pencerenin içerisinde açılacak olan html sayfasının belirlenmesi 
  mainWindow.loadFile('./html/login.html');  
} 

// uygulamanın başlatılması 
app.on('ready', createMainWindow); 

index.js dosyamızı yukarıdaki örnekte gibi düzenleyip Npm start komutu ile çalıştırdığımızda, karşımıza aşağıdaki gibi bir ekran açılacaktır. 

Şimdi bu ekranımızı bir login ekranı haline getirelim. Bu işlem için kök klasörümüze bir html klasörü ve içerisine login.html dosyası içeriğini aşağıdaki gibi oluşturalım ve npm start ile çalıştıralım. 

<html>
<head> 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> 
  <style> 
    #mainContainer{ 
      display: flex; 
      background-color: cadetblue; 
      justify-content: space-evenly; 
      align-items: center; 
    } 

    .imgContainer{ 
      width: 400; 
      height: 300; 
      display: flex; 
      flex-direction: column; 
      justify-content: space-evenly; 
    } 
  </style> 
</head> 
  <body id="mainContainer"> 
    <div> 
      <img width="400" src="../images/logo.png"> 
    </div> 
    <div  class="form-group imgContainer"> 
      <input type="email" placeholder="Email" class="form-control"> 
      <input type="password" placeholder="Şifre" class="form-control"> 
      <button onclick="login()" type="button" class="btn btn-dark">Giriş Yap</button> 
    </div> 
    <script src="../js/renderer.js" type="application/javascript" ></script> 
  </body> 
</html> 

Uygulama ilk çalıştığında artık bizi bu ekran karşılıyor olacak. Buraya kadar bir main ve renderer işlemini gerçekleştirmiş olduk. Şimdi IPC katmanı sayesinde giriş yap butonu tıklandığında bir masaüstü bildirimi oluşturalım. Bunun için html dosyamızda çağırmak için kök klasörümüze js klasörü ve içerisine bir renderer.js dosyası oluşturalım. 

const { ipcRenderer } = require("electron"); 

function login() { 
  ipcRenderer.send('show-notification',  
    { 
      title: 'MDP Group',  
      body: 'Electron uygulamamıza hoşgeldiniz' 
    } 
  ); 
} 

index.js dosyamızda gerekli ayarlamaları yapalım;

const electron = require('electron'); 

const BrowserWindow = electron.BrowserWindow; 
const Notification = electron.Notification; 
const ipcMain = electron.ipcMain; 
const app = electron.app; 
let mainWindow; 

async function createMainWindow() { 
  mainWindow = new BrowserWindow({ 
    width: 1200, 
    height: 800, 
    title: 'MDP Group', 
    webPreferences: { 
      nodeIntegration: true 
    } // ipc katmanını kullanmak için gerekli olan ayarlama  
  }); 

  mainWindow.loadFile('./html/login.html') 
} 

app.on('ready', createMainWindow); 

// ipcMain işlemlerinin gerçekleştirdiğimiz kısım 
ipcMain.on('show-notification', (event, arg) => { 
  const notification = { 
    title: arg.title, 
    body: arg.body 
  } 

  new Notification(notification).show() 
});  

Artık bir electron uygulaması oluşturduk. Oluşturduğumuz uygulama bize bir login ekranı açtı. Ekranda bulunan “giriş yap” butonu tıklandığında, ipc katmanı, renderer ve main işlemleri haberleşti ve bir bildirim oluşturuldu. 

Şimdi uygulamamızı paketleyelim ve kurulum dosyamızı oluşturalım. Bunun için gerekli olan npm paketini kurarak işe başlayabiliriz.  

npm i electron-builder 

Burada alternatif olarak electron-packager, electron-wix-msi paketleri kullanılabilir. Electron-builder paketinin kullanımı kolaydır; ayrıca github üzerinden uygulamanızı güncelleyebileceğiniz bir yapı içeriyor. Bu yüzden electron-builder paketini kullanmayı tercih ediyoruz.  

Paket kurulduktan sonra package.json dosyamızı düzenliyoruz. Script alanına aşağıdaki kodu ekleyin. 

"build": "electron-builder build –win –publish never" 

Komut istemcisinde ;

npm run build

Komut çalıştırıldığında, yukarıdaki kod bloğu uygulamamızın “windows” cihazlarda kullanabilmek için “setup.exe” ve diğer gerekli dosyalarını oluşturacaktır. Komut çalıştıktan sonra kök klasörünüze dist isimli bir klasör oluşturacaktır. Bu klasör içerisinden uygulamanızı bilgisayarınıza kurabilir, uygulamanızı bir yerde paylaşarak kullanılmasını sağlayabilirsiniz.