Masaüstü uygulamaları geliştirmek için eskiden her platform için ayrı dil ve araçlarla çalışmak zorundaydık. Ancak günümüzde, bir web geliştiricisiyseniz ve masaüstü uygulaması oluşturmak istiyorsanız, alışık olduğunuz HTML, CSS ve JavaScript dillerini kullanarak kolayca masaüstü uygulaması geliştirebilirsiniz.
İşte tam da bu noktada Electron.js devreye giriyor.

Electron.js Nedir?

Electron.js, masaüstü uygulamaları geliştirmek için kullanılan açık kaynaklı bir framework’tür. JavaScript, HTML ve CSS gibi web teknolojilerini kullanarak, Windows, macOS ve Linux platformlarında çalışabilen uygulamalar geliştirmenizi sağlar.
Electron.js‘in en dikkat çeken yönü, Node.js ile Chromium motorunu birleştirerek hem arka plan işlemleri hem de kullanıcı arayüzü oluşturulmasına olanak tanımasıdır. Böylece bir web uygulamasını, herhangi bir ek efor harcamadan masaüstü uygulamasına dönüştürmek mümkün hale gelir.

Electron.js Nasıl Çalışır?

Electron.js üç ana bileşenden oluşur:

  • Main Process (Ana İşlem):
    • Node.js üzerinde çalışır ve uygulamanın temel mantığını yönetir.
    • Pencereleri oluşturur ve kontrol eder.
    • Dosya sistemine erişim, arka plan işlemleri ve ana uygulama mantığı burada yer alır.
  • Renderer Process (Render İşlemi):
    • Chromium üzerinde çalışır ve bir tarayıcı penceresi gibi davranır.
    • HTML, CSS ve JavaScript ile UI oluşturulur.
    • Web teknolojilerini kullanarak kullanıcı arayüzü (UI) işlenir.
  • Inter-Process Communication (IPC) “Process’ler arası iletişim”:
    • Ana işlem ve render işlemi arasında iletişimi sağlar.

Electron.js ile Geliştirilen Bazı Popüler Uygulamalar

  • Visual Studio Code: Microsoft tarafından geliştirilen, açık kaynak kodlu bir kaynak kodu düzenleyicisidir.
  • Slack: Popüler bir takım içi mesajlaşma aracıdır.
  • Discord: Oyun toplulukları için bir sesli ve yazılı iletişim platformudur.
  • Trello: Proje yönetimi ve görev takibi için popüler bir araçtır.
  • Spotify: Müzik dinleme uygulaması.
  • Postman: API testi ve geliştirme için kullanılan uygulama.

Electron.js ile Örnek Uygulama

Sürüm Kontrolü

Bilgisayarınızda Node.js ile npm’in kurulu olduğundan emin olun, değilse kurulumunu yapın.

node -v 
npm -v

Bu komutları termimalde çalıştırıp, yüklü Node.js ve npm sürümlerini görüntüleyebilirsiniz.
Eğer versiyon numaraları görünüyorsa tamam demektir, hata veriyorsa kurulum yaparsınız.

Proje Dizinini Oluşturun

Öncelikle bir proje dizini oluşturarak başlayalım.

mkdir electron-ornek
cd electron-ornek

package.json dosyasını oluşturun

Bu dizinde npm init komutunu çalıştırarak bir package.json dosyası oluşturun. Komutu çalıştırdığınızda birkaç soruya yanıt vermeniz gerekecek, ancak varsayılan yanıtları kabul edebilirsiniz.

npm init

Bu komut, projemiz için gerekli temel bilgileri içeren bir package.json dosyası oluşturur.

örnek package.json

{
  "name": "electronjssample",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "license": "ISC",
  "devDependencies": {
    "electron": "^33.2.0"
  }
}

Electron.js’i yükleyin

Electron.js’i projemize dahil etmek için şu komutu kullanarak kurulum yapın;

npm install electron --save-dev

Uygulama dosyalarını oluşturun

Projede ihtiyaç duyduğumuz temel dosyaları oluşturacağız. Bunlar;

  • main.js: Electron’un ana süreci (main process) burada çalışacak.
  • index.html: Bu dosya, Electron uygulamanızın kullanıcı arayüzünü tanımlar.
  • renderer.js: Bu dosya, ‘index.html’ dosyasındaki öğelere dinamik olarak erişilmesini ve değiştirilmesini sağlar.

main.js

const { app, BrowserWindow } = require('electron');//Electron eklenir

function createWindow() {
    //Tarayıcı penceresi oluşturulur
    let win = new BrowserWindow({
        width: 800,//En
        height: 600,//Boy
        webPreferences: {
            nodeIntegration: true
        },
    });

    //Pencerede yüklenmesi istenilen html dosyası seçilir
    win.loadFile('index.html');
}

//Electron başlatıldığında penceremizi oluşturalım
app.whenReady().then(createWindow);

//Tüm pencereler kapandığında uygulamayı kapansın
app.on('window-all-closed', () => {
    app.quit();
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

Bu kod, Electron uygulamasını başlatır, 800×600 boyutlarında bir pencere açar ve index.html dosyasını yükler.

index.html

index.html dosyasını açarak basit bir arayüz ekleyin;

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Uygulaması</title>
</head>
<body>
  <h1>Merhaba, Electron!</h1>
  <p id="icerik"></p>
  <script src="renderer.js"></script></body>
</html>

Bu HTML dosyası, tarayıcı penceresinde “Merhaba, Electron!” metnini ve altındaki paragrafı gösterecek.

renderer.js

‘index.html’ dosyasındaki öğelere dinamik olarak erişilmesini ve değiştirilmesini sağlar.

//Html tamamen yüklendiğinde çalışacak kod
document.addEventListener('DOMContentLoaded', () => {
  
    //Html dokümanındaki paragrafın içeriğini güncelleme
    document.getElementById('icerik').innerHTML = 'Merhaba Dünya :)';
    
});

Uygulamayı çalıştırma

Uygulamanızı başlatmak için terminalden şu komutu çalıştırın;

npm start

Uygulama açıldığında hedeflemiş olduğumuz html dosyası, javascript dosyası ile birlikte derlenerek istediğimiz pencere boyutlarında açılmış olacaktır.

Electron Packager ile uygulama dağıtma

Electron Packager, Electron uygulamamızı Windows, macOS ve Linux platformlarına dağıtmaya yarar. Electron uygulamasını paketleyip ilgili platforma özgü .exe, .dmg, .AppImage gibi dosyalar oluşturmamıza olanak tanır.

electron-packager’ı yükleyin

Öncelikle electron-packager’ı projenize eklemeniz gerekiyor. Terminalde şu komutu çalıştırarak yükleyebilirsiniz;

npm install electron-packager --save-dev

Şimdi Electron uygulamanızı farklı platformlar için paketlemeye başlayalım.

Linux için paketleme

Linux için Electron uygulaması paketlemek için aşağıdaki komutu kullanabilirsiniz;

npx electron-packager . electronjssample --platform=linux --arch=x64 --out=release --overwrite
  • . : Proje dizini
  • electronjssample: Uygulamanın adı
  • --platform=linux: Hedef platform (Linux)
  • --arch=x64: Hedef işlemci mimarisi (64-bit). Eğer 32-bit bir platform hedefliyorsanız, --arch=ia32 kullanabilirsiniz.
  • --out=release: Çıkartılacak paketlerin konulacağı dizin.
  • --overwrite: Eğer daha önce aynı isimle paketlenmiş bir uygulama varsa, üzerine yazılmasını sağlar.

Windows için paketleme

Windows için paketleme yapmak için şu komutu kullanabilirsiniz;

npx electron-packager . electronjssample --platform=win32 --arch=x64 --out=release --overwrite
  • --platform=win32: Hedef platform (Windows).
  • --arch=x64: Hedef işlemci mimarisi (64-bit). Eğer 32-bit bir platform hedefliyorsanız, --arch=ia32 kullanabilirsiniz.

macOS için paketleme

macOS için paketleme yapmak için şu komutu kullanabilirsiniz;

npx electron-packager . electronjssample --platform=darwin --arch=x64 --out=release --overwrite
  • --platform=darwin: Hedef platform (macOS).
  • --arch=x64: Hedef işlemci mimarisi (64-bit).

Windows için örnek çıktı

Resimde görüldüğü gibi .exe dosyası ile birlikte tüm kaynak dosyaları /release klasörü altına çıkarıldı.

Özet

Bu yazımda, Electron.js kullanımını detaylı bir şekilde ele aldım. Web teknolojilerini kullanarak platform bağımsız masaüstü uygulamaları geliştirme fırsatı sunan bu teknolojinin temel yapısını inceledik. Ayrıca, Electron.js ile basit bir masaüstü uygulamasının nasıl oluşturulacağını adım adım gösterdim.
Electron.js, web geliştiricileri için masaüstü dünyasının kapılarını açan güçlü bir araçtır. Eğer web teknolojilerine hakimseniz ve masaüstü uygulama geliştirmeyi düşünüyorsanız, Electron.js sizin için mükemmel bir başlangıç olabilir.
Yazıda teknolojiyi açıklarken uzun olmaması için basit kod örnekleriyle anlatmaya çalıştım. Biraz daha gelişmiş versiyonuna github hesabımdan ulaşabilirsiniz.

Github repository linki: ElectronJsSample

Okuduğunuz için teşekkürler, İyi kodlamalar 😉

Kategoriler:

JavaScript,