Electron ile Masaüstü Uygulaması Geliştirmek

Electron JS, web teknolojileri kullanarak Mac, Windows ve Linux için masaüstü uygulama geliştirmenizi sağlayan açık kaynaklı bir framework’tür. HTML, CSS ve JavaScript bilen her geliştirici, Electron ile platform bağımsız masaüstü uygulamaları oluşturabilir. Visual Studio Code, Microsoft Teams, Slack ve GitHub Desktop gibi geniş kullanıcı tabanına sahip uygulamalar Electron ile geliştirilmiştir. Bu yazıda Electron’un nasıl çalıştığını, temel mimarisini ve sıfırdan bir masaüstü uygulamasının nasıl yazılacağını adım adım ele alıyoruz.

Electron JS Nedir?

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 framework’tü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ükleyicileri bulundurur.

Günümüzde kullandığımız birçok popüler masaüstü uygulaması Electron ile geliştirilmiştir:

• Visual Studio Code
• Microsoft Teams
• Skype
• Slack
• Twitch
• GitHub Desktop

Electron Mimarisi: Main ve Renderer İşlemleri

Electron, temelde iki ana işlemden oluşur: main işlemi ve renderer işlemi.

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 (Inter-Process Communication) katmanı kullanılır. Bu katman renderer’dan aldığı bilgiyi main işlemine iletir. Main işlemi gelen isteği gerçekleştirdikten sonra IPC katmanına sonucu iletir, IPC katmanı da sonucu renderer işlemine tekrar iletir.

Temelde 3 farklı Electron sürümü bulunmaktadır:

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

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

1. Node.js Kurulumu

İlk olarak bilgisayarınıza Node.js kuruyoruz. Kurulum için nodejs.org/en/download adresinden bilgisayarınıza uygun sürümü indirebilirsiniz. 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. Proje Oluşturma

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 Electron’u 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 ."

3. BrowserWindow Oluşturma

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:

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);

Login Ekranı ve HTML Arayüzü

Ş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ı 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">
  <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>

IPC Katmanı ile Masaüstü Bildirimi Oluşturma

Uygulama ilk çalıştığında artık bizi bu ekran karşılıyor olacak. Ş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 ayarlama
    }
  });

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

app.on('ready', createMainWindow);

// ipcMain işlemlerini 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.

Uygulamayı Paketleme ve Kurulum Dosyası Oluşturma

Ş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 çalıştırıldığında, yukarıdaki kod bloğu uygulamanı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.

Benzer cross-platform uygulama geliştirme yaklaşımını mobil tarafta da uygulayabilirsiniz. React Native ile Apple Watch uygulaması geliştirme konusunda da kapsamlı bir rehberimiz bulunmaktadır. Ayrıca API tabanlı uygulamalar yazıyorsanız Node.js ile API testinin nasıl yapılacağını anlatan yazımızı inceleyebilirsiniz.

Sık Sorulan Sorular

Electron JS öğrenmek için hangi ön bilgiler gereklidir?

Electron JS ile masaüstü uygulama geliştirebilmek için temel HTML, CSS ve JavaScript bilgisi yeterlidir. Node.js’e aşinalık da faydalı olmakla birlikte zorunlu değildir. Web geliştirme deneyimi olan birinin Electron’a geçişi oldukça hızlı olur; zira framework web teknolojilerini doğrudan masaüstü ortamına taşır.

Electron ile geliştirilen uygulama kaç platforma yayınlanabilir?

Electron ile tek bir kod tabanından Mac, Windows ve Linux platformlarının tamamına uygulama derlenebilir. Electron-builder paketi ile her platform için ayrı kurulum dosyaları (.exe, .dmg, .AppImage vb.) otomatik olarak oluşturulur. Bu cross-platform özellik, Electron’un en büyük avantajlarından biridir.

Electron uygulamalarının performansı native uygulamalarla karşılaştırıldığında nasıldır?

Electron, her uygulama örneğiyle birlikte tam bir Chromium motoru çalıştırdığından bellek tüketimi native uygulamalara göre daha yüksektir. Bu durum özellikle kaynak kısıtlı sistemlerde hissedilir. Ancak büyük çoğunluk iş uygulaması için bu fark kabul edilebilir düzeyde kalır. VS Code ve Slack gibi milyonlarca kullanıcıya ulaşan uygulamaların Electron üzerinde sorunsuz çalıştığı pratikte kanıtlanmıştır.

IPC katmanı olmadan renderer ve main arasında iletişim kurulabilir mi?

Electron’un güvenli yapısında renderer işlemi, main işlemine doğrudan erişemez. IPC (Inter-Process Communication) katmanı bu iki süreç arasındaki tek resmi iletişim kanalıdır. Eski sürümlerde nodeIntegration: true ile bu kısıtlama atlatılabiliyordu; ancak güvenlik nedeniyle modern Electron sürümlerinde contextIsolation ve preload script kullanımı önerilmektedir.

Referanslar

Electron JS — Resmi Dokümantasyon
Node.js — İndirme Sayfası
Node.js ile API Testi — MDP Group
React Native ile Apple Watch Uygulaması Geliştirme — MDP Group

Burak Yılmazer

Software Developer