JavaScript ile Electron Kullanarak Masaüstü Uygulamaları Geliştirme

Günümüzde masaüstü uygulamaları, özellikle platform bağımsızlığı ve geliştirme hızı açısından büyük önem taşır. Electron, JavaScript kullanarak Windows, MacOS, ve Linux için masaüstü uygulamaları geliştirmenizi sağlayan açık kaynaklı bir framework’tür. Electron, Chromium ve Node.js’i bir araya getirerek, web teknolojilerini masaüstü uygulamalarına entegre eder. Bu yazıda, Electron ile masaüstü uygulamaları geliştirmek için gerekli adımları, temel kavramları ve örneklerle açıklayacağız.

1. Electron Nedir?

Electron, GitHub tarafından geliştirilen bir framework’tür ve JavaScript, HTML ve CSS kullanarak masaüstü uygulamaları oluşturmanıza olanak tanır. Electron, aslında iki ana bileşenden oluşur:

  • Chromium: Uygulamanızın arayüzünü oluşturmak için kullanılan web tarayıcısı motoru.
  • Node.js: Arka uç işlemleri gerçekleştiren JavaScript çalışma zamanı.

Electron sayesinde, web geliştiricileri masaüstü uygulamaları oluşturabilir ve bu uygulamalar, web teknolojileri kullanılarak her platformda çalışabilir.

Electron'un Avantajları:

  • Çoklu Platform Desteği: Electron ile tek bir kod tabanı kullanarak, Windows, MacOS, ve Linux platformlarında çalışabilen uygulamalar geliştirebilirsiniz.
  • Web Teknolojileri Kullanımı: HTML, CSS ve JavaScript gibi web teknolojileriyle masaüstü uygulamaları geliştirmek, web geliştiricilerinin masaüstü uygulamaları oluşturmasına olanak tanır.
  • Zengin Ekosistem: Node.js ve Chromium’un birleşimi sayesinde, Electron geniş bir modül ve paket ekosistemine sahiptir.

2. Electron İle İlk Uygulamanızı Oluşturma

Adım 1: Elektron Projesini Başlatma

Başlamak için önce Node.js'in bilgisayarınızda kurulu olduğundan emin olun. Ardından, terminal veya komut istemcisini açarak aşağıdaki adımları takip edebilirsiniz.

  1. Yeni bir dizin oluşturun:

    mkdir my-electron-app
cd my-electron-app

  2. Node.js projesi başlatın:

    npm init -y

  3. Electron'u yükleyin:

    npm install electron --save-dev

Adım 2: Basit Bir Electron Uygulaması Oluşturma

Şimdi, temel bir Electron uygulaması oluşturacağız. Bu uygulama, yalnızca bir pencere açacak ve içinde basit bir HTML sayfası gösterecek.

  1. Ana dosya oluşturun: Proje klasörünüzde bir main.js dosyası oluşturun. Bu dosya, uygulamanın ana süreçlerini yönetecek.

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadURL('https://www.example.com');
}

app.whenReady().then(createWindow);

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

    Açıklama:

    • BrowserWindow ile yeni bir pencere oluşturuluyor ve loadURL() metodu ile URL yükleniyor. Bu örnekte bir web sayfası yükleniyor.
    • app.whenReady() ile Electron başlatıldığında createWindow() fonksiyonu çağrılır.
    • app.on('window-all-closed'), tüm pencereler kapatıldığında uygulamanın sonlanmasını sağlar.

  2. Ana HTML dosyasını oluşturun: Uygulamanın yükleyeceği HTML dosyasını oluşturun. Bu dosya, index.html olarak adlandırılabilir.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Electron App</title>
</head>
<body>
    <h1>Welcome to My Electron App!</h1>
</body>
</html>

Adım 3: Uygulamanızı Çalıştırma

package.json dosyasına şu komutu ekleyin:

"scripts": {
  "start": "electron ."
}

Terminalde aşağıdaki komutla uygulamanızı çalıştırabilirsiniz:

npm start

3. Electron ile Gelişmiş Özellikler

3.1. Uygulama Penceresi Özelleştirme

Electron, masaüstü uygulamanızın penceresini özelleştirebilmeniz için birçok özellik sunar. Pencerelerin boyutlarını, menülerini ve etkileşimlerini değiştirebilirsiniz.

Örnek: Basit bir pencere başlığı değiştirme:

mainWindow.setTitle('My Custom Title');

3.2. Yerel Dosya Sistemi Erişimi

Node.js entegrasyonu sayesinde Electron, uygulamanızın yerel dosya sistemine erişmesini sağlar. Bu özellik, dosya okuma ve yazma işlemleri için oldukça kullanışlıdır.

Örnek: Bir dosyayı okuma:

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

3.3. Çift Süreçli İletişim

Electron, Main Process ve Renderer Process arasında iletişim kurmanıza olanak tanır. ipcMain ve ipcRenderer kullanarak veri alışverişi yapabilirsiniz.

Örnek: Renderer process'ten veri gönderme:

// main.js
const { ipcMain } = require('electron');

ipcMain.on('send-data', (event, arg) => {
    console.log(arg); // 'Hello from Renderer Process'
});

Renderer Process (index.html):

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

ipcRenderer.send('send-data', 'Hello from Renderer Process');

4. Elektron ile Dağıtım

Electron ile geliştirdiğiniz uygulamaları dağıtmak için çeşitli araçlar ve yöntemler mevcuttur. Electron uygulamanızı paketlemek için electron-packager veya electron-builder gibi araçları kullanabilirsiniz.

Örnek:

  1. electron-packager ile paketleme:

    npm install electron-packager --save-dev
npx electron-packager . my-electron-app --platform=win32 --arch=x64

  2. electron-builder ile dağıtım:

    npm install electron-builder --save-dev

5. Sonuç

Electron, web geliştiricilerinin kolayca masaüstü uygulamaları geliştirmesine olanak tanır. Web teknolojilerini kullanarak, farklı platformlarda çalışan masaüstü uygulamaları oluşturmak mümkündür. Bu yazıda, Electron ile basit bir uygulama oluşturmayı, özellikleri ve dağıtım süreçlerini inceledik. Artık Electron kullanarak güçlü masaüstü uygulamaları geliştirmeye başlayabilirsiniz!