"Electron.js: Web Teknolojileriyle Masaüstü Uygulama Geliştirme"

Günümüzde web teknolojileri büyük bir hızla gelişiyor ve geliştiriciler artık yalnızca tarayıcı üzerinde çalışan uygulamalar değil, masaüstü uygulamalar da geliştirmek istiyor. Electron.js, bu ihtiyaca yönelik en popüler çözümlerden biri olarak öne çıkıyor. Bu makalede, Electron.js’in ne olduğu, nasıl çalıştığı ve nasıl kullanılabileceği hakkında detaylı bir inceleme yapacağız.

Electron.js Nedir?

Electron.js, HTML, CSS ve JavaScript kullanarak masaüstü uygulamaları oluşturmanızı sağlayan bir çerçevedir. Node.js ve Chromium’un birleşimi ile çalışan bu teknoloji, geliştiricilere çapraz platform desteği sunarak Windows, macOS ve Linux için tek kod tabanı ile uygulama geliştirme imkanı tanır.

Electron, web uygulamalarının tüm gücünü masaüstüne taşır. Web teknolojileri kullanarak geliştirdiğiniz bir uygulama, Electron sayesinde masaüstünde bağımsız bir yazılım gibi çalışabilir. Slack, Discord, WhatsApp Desktop gibi popüler uygulamalar Electron kullanılarak geliştirilmiştir.

Electron.js’in Çalışma Mantığı

Electron, iki ana bileşenden oluşur:

1. Ana Süreç (Main Process):

   • Node.js ile çalışır.

   • Dosya sistemine erişebilir.

   • API çağrıları yapabilir.

   • Pencere yönetimini sağlar.

2. Render Süreci (Renderer Process):

   • Chromium tarayıcısı gibi çalışır.

   • HTML, CSS ve JavaScript ile görsel arayüzü oluşturur.

   • Kullanıcı ile etkileşimi yönetir.

Electron’un en büyük avantajı, web teknolojilerini kullanarak güçlü masaüstü uygulamaları geliştirebilmenize olanak tanımasıdır. Bir web uygulamanız varsa, Electron ile onu hızlıca bir masaüstü uygulamasına çevirebilirsiniz.

Electron.js Kurulumu

Electron kullanmaya başlamak için öncelikle Node.js’in sisteminize kurulu olması gerekir. Eğer kurulu değilse, Node.js'in resmi web sitesinden indirerek yükleyebilirsiniz.

Kurulum sonrası terminal veya komut satırında aşağıdaki komut ile Node.js’in yüklü olup olmadığını kontrol edebilirsiniz:

node -v

Daha sonra, bir proje oluşturup Electron’u yükleyebilirsiniz:

mkdir electron-app && cd electron-app
npm init -y
npm install --save-dev electron

Bu işlemler sonucunda Electron, proje dizinine yüklenmiş olacaktır.

İlk Electron.js Uygulaması

Elektron ile basit bir masaüstü uygulaması oluşturmak için bir ana dosya oluşturmamız gerekiyor. Proje klasörüne main.js adında bir dosya ekleyin ve içine şu kodları yazın:

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

let mainWindow;

app.whenReady().then(() => {
    mainWindow = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadURL("https://example.com"); // Buraya kendi web uygulamanızın URL'sini yazabilirsiniz.

    mainWindow.on("closed", () => {
        mainWindow = null;
    });
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

Bu dosya, Electron’un tarayıcı penceresi açmasını ve belirttiğiniz URL’yi yüklemesini sağlar.

Electron uygulamanızı başlatmak için:

npm start

Eğer uygulama bir web sitesi yerine yerel bir HTML dosyasını yüklemek istiyorsa, şu şekilde değiştirebilirsiniz:

mainWindow.loadFile("index.html");

Böylece internet bağlantısı olmadan da çalışan bağımsız bir uygulama elde edebilirsiniz.

Electron.js ile Masaüstü Uygulamalarını Geliştirme

Electron ile masaüstü uygulamalar geliştirirken, arka planda çalışan Node.js API’lerini ve ön yüzde etkileşim sağlayan Chromium özelliklerini birlikte kullanabilirsiniz. İşte bazı temel yetenekler:

✅ Dosya Sistemine Erişim

const fs = require('fs');
fs.writeFileSync('data.txt', 'Electron ile dosya yazıldı!');

✅ Bildirim Gönderme

const { Notification } = require('electron');
new Notification({ title: 'Merhaba!', body: 'Electron.js ile bildirim gönderildi.' }).show();

✅ Masaüstü Kısayolları Kullanma

const { globalShortcut } = require('electron');
app.whenReady().then(() => {
    globalShortcut.register('CommandOrControl+X', () => {
        console.log('CTRL+X tuşu kullanıldı!');
    });
});

Electron.js ile Uygulama Paketleme

Eğer oluşturduğunuz Electron uygulamasını .exe, .dmg veya .AppImage formatına dönüştürmek istiyorsanız, electron-packager veya electron-builder gibi araçları kullanabilirsiniz.

npm install --save-dev electron-packager
npx electron-packager . myApp --platform=win32 --arch=x64 --out=dist

Bu komut, uygulamanızı Windows için .exe dosyası haline getirecektir.

macOS için:

npx electron-packager . myApp --platform=darwin --arch=x64 --out=dist

Linux için:

npx electron-packager . myApp --platform=linux --arch=x64 --out=dist

Sonuç ve Değerlendirme

Electron.js, web teknolojileriyle güçlü ve çapraz platform destekli masaüstü uygulamalar geliştirmeyi mümkün kılan harika bir araçtır. Web geliştirme deneyimi olan herkes, Electron sayesinde kolayca masaüstü yazılımlar oluşturabilir.

Öne Çıkan Avantajlar: ✅ Tek kod tabanı ile Windows, macOS ve Linux için uygulama geliştirme.
✅ Node.js sayesinde arka planda sistem işlemleri yapabilme.
✅ Chromium ile modern bir kullanıcı arayüzü oluşturabilme.
✅ Web uygulamalarını hızlıca masaüstüne taşıma.

Eğer web geliştirme deneyiminiz varsa ve masaüstü yazılım dünyasına adım atmak istiyorsanız, Electron.js harika bir başlangıç noktasıdır! 🚀

Aykhan Gasimzade

Full Stack Developer

Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.