Angular ve Electron ile Başlangıç

Günümüz masaüstü uygulama geliştirme dünyasında, web teknolojilerinin gücünü ve esnekliğini masaüstüne taşımak, geliştiriciler için giderek daha cazip hale gelmektedir. Bu yaklaşımın en popüler temsilcilerinden biri de Electron‘dur. Electron, web teknolojileri (HTML, CSS, JavaScript) kullanarak platformlar arası masaüstü uygulamaları geliştirmenize olanak tanır. Modern ve güçlü bir ön uç (frontend) framework’ü olan Angular ile Electron’u birleştirmek ise, zengin kullanıcı arayüzleri ve karmaşık iş mantığına sahip, performanslı masaüstü uygulamaları oluşturmanın kapılarını aralar.

Bu makalede, Angular ve Electron’u kullanarak sıfırdan bir masaüstü uygulaması geliştirmeye başlayacağız. Temel kurulumdan, iki teknolojiyi bir araya getirmeye, geliştirme sürecini iyileştirmeye ve hatta Angular uygulamanız ile Electron’un ana süreçleri arasında nasıl iletişim kurulacağına kadar birçok konuyu adım adım ele alacağız. Amacımız, web geliştirme bilginizi masaüstü dünyasına taşımanız için size sağlam bir temel sunmaktır.

Neden Angular ve Electron?

Angular ve Electron’un birleşimi, geliştiricilere bir dizi önemli avantaj sunar:

Platformlar Arası Uyumluluk

Electron, uygulamanızı Windows, macOS ve Linux gibi farklı işletim sistemlerinde tek bir kod tabanıyla çalıştırmanıza olanak tanır. Bu, geliştirme maliyetlerini düşürür ve pazar erişiminizi genişletir. Angular ile oluşturulan web uygulamaları da doğal olarak platformdan bağımsızdır, bu da bu iki teknolojinin uyumunu artırır.
Web Teknolojilerinin Gücü

HTML, CSS ve JavaScript (TypeScript) gibi web standartlarını kullanarak masaüstü uygulamaları geliştirmek, web geliştiricilerinin mevcut bilgi birikimlerini doğrudan kullanmalarını sağlar. Bu, öğrenme eğrisini azaltır ve geliştirme sürecini hızlandırır. Angular’ın bileşen tabanlı mimarisi, modüler yapısı ve güçlü veri bağlama yetenekleri, karmaşık kullanıcı arayüzlerini kolayca oluşturmanıza yardımcı olur.
Zengin Kullanıcı Deneyimi

Angular, dinamik ve interaktif kullanıcı arayüzleri oluşturmak için güçlü araçlar sunar. Electron ise, Chromium’un rendering motorunu kullanarak bu arayüzleri masaüstü ortamında, tarayıcı kısıtlamaları olmadan, yüksek performansla çalıştırma yeteneği sağlar. Bu sayede, tarayıcı tabanlı uygulamalardan çok daha zengin ve entegre bir masaüstü deneyimi sunabilirsiniz.
Node.js Entegrasyonu

Electron, Node.js çalışma zamanını (runtime) içinde barındırır. Bu, Electron uygulamalarının dosya sistemi erişimi, işletim sistemi etkileşimi ve ağ işlemleri gibi Node.js modüllerini kullanabileceği anlamına gelir. Angular uygulamanızın tarayıcıda yapamayacağı birçok işlemi (örneğin, yerel dosya okuma/yazma, sistem bildirimleri gönderme) Electron sayesinde gerçekleştirebilirsiniz.
Geniş Ekosistem ve Topluluk Desteği

Hem Angular hem de Electron, geniş ve aktif geliştirici topluluklarına sahiptir. Bu, sorun yaşadığınızda veya yeni özellikler eklemek istediğinizde kolayca destek bulabileceğiniz anlamına gelir. Ayrıca, her iki teknoloji için de zengin kütüphane ve araç ekosistemi mevcuttur.

Ön Koşullar

Bu makaledeki adımları takip edebilmek için bilgisayarınızda aşağıdaki yazılımların kurulu olması gerekmektedir:

Node.js ve npm

Angular CLI ve Electron’u çalıştırmak için Node.js ve paket yöneticisi npm’e ihtiyacınız olacak. Node.js’i resmi web sitesinden (nodejs.org) indirebilirsiniz. Kurulumla birlikte npm de otomatik olarak kurulacaktır. Kurulum sonrası terminalinizde node -v ve npm -v komutlarını çalıştırarak sürümleri kontrol edebilirsiniz.
Metin Düzenleyici / IDE

Visual Studio Code (code.visualstudio.com) gibi modern bir metin düzenleyici veya entegre geliştirme ortamı (IDE) kullanmanız önerilir. Bu, kod yazmayı ve hata ayıklamayı kolaylaştıracaktır.

Angular Uygulaması Oluşturma

İlk adımımız, temel bir Angular uygulaması oluşturmak olacak. Bu uygulama, daha sonra Electron içine entegre edeceğimiz ön uç kısmını oluşturacak.

Angular CLI Kurulumu

Angular CLI (Command Line Interface), Angular uygulamaları oluşturmak, geliştirmek ve dağıtmak için kullanılan güçlü bir komut satırı aracıdır. Henüz kurulu değilse, aşağıdaki npm komutuyla global olarak kurabilirsiniz:

npm install -g @angular/cli

Kurulumun başarılı olup olmadığını kontrol etmek için:

ng version

Yeni Bir Angular Projesi Oluşturma

Şimdi Angular CLI kullanarak yeni bir Angular projesi oluşturalım. Projemize ‘angular-electron-app’ adını verelim:

ng new angular-electron-app --skip-install

--skip-install parametresi, projenin bağımlılıklarının otomatik olarak yüklenmesini engeller. Bunu daha sonra manuel olarak yapacağız. Komut çalıştıktan sonra size bazı sorular sorabilir (örneğin, “Would you like to add Angular routing?”). Genellikle varsayılan değerleri kabul edebilirsiniz (No veya Enter). CSS preprocessor sorusunda CSS seçeneğini seçebilirsiniz.

Proje dizinine gidin ve bağımlılıkları yükleyin:

cd angular-electron-app
npm install

Angular Uygulamasını Çalıştırma

Angular uygulamasının doğru şekilde çalıştığından emin olmak için geliştirme sunucusunu başlatın:

ng serve --open

Bu komut, uygulamayı derler ve genellikle http://localhost:4200 adresinde bir tarayıcı penceresinde açar. Tarayıcınızda “angular-electron-app app is running!” gibi bir mesaj görmelisiniz. Bu, Angular uygulamanızın başarıyla çalıştığı anlamına gelir.

Electron’a Giriş

Angular uygulamamızı Electron ile birleştirmeden önce, Electron’un ne olduğunu ve nasıl çalıştığını kısaca anlayalım.

Electron Nedir?

Electron, GitHub tarafından geliştirilen açık kaynaklı bir framework’tür. HTML, CSS ve JavaScript kullanarak masaüstü uygulamaları geliştirmenize olanak tanır. Temelinde Chromium ve Node.js’i barındırır. Chromium, web içeriğini görüntülemek için kullanılırken (tıpkı bir web tarayıcısı gibi), Node.js ise işletim sistemiyle etkileşim kurmak ve web teknolojileriyle erişilemeyen yerel işlevleri sağlamak için kullanılır.

Electron ile geliştirilen popüler uygulamalara örnek olarak Visual Studio Code, Slack, Discord ve Figma’nın masaüstü sürümleri verilebilir.

Electron’un Temel Bileşenleri

Electron uygulamaları genellikle iki ana işlem (process) türünden oluşur:

Main Process (Ana İşlem)

Bu, uygulamanızın ana kontrolcüsüdür. Her Electron uygulamasının yalnızca bir ana işlemi vardır. Ana işlem, uygulamanın yaşam döngüsünü yönetir (uygulama açılışı, kapanışı), yerel işletim sistemi API’lerine erişimi sağlar (dosya sistemi, menüler, bildirimler), yeni tarayıcı pencereleri (renderer process’ler) oluşturur ve yönetir. Node.js API’lerine tam erişimi vardır. Genellikle main.js veya benzeri bir dosyada bulunur.
Renderer Process (İşleyici İşlem)

Her tarayıcı penceresi (BrowserWindow örneği), kendi ayrı işleyici sürecinde çalışır. İşleyici süreçleri, web sayfalarını görüntülemekten sorumludur. Tıpkı bir web tarayıcısındaki sekmeler gibi düşünebilirsiniz. Her işleyici süreci kendi izole ortamında çalışır ve Node.js API’lerine doğrudan erişimi yoktur (güvenlik nedeniyle, ancak bu davranış değiştirilebilir). Angular uygulamanız bu işleyici süreçlerinden birinde çalışacaktır.

Ana işlem ve işleyici süreçleri arasında iletişim kurmak için Electron’un Inter-Process Communication (IPC) modülleri (ipcMain ve ipcRenderer) kullanılır.

Angular Uygulamasını Electron ile Birleştirme

Şimdi Angular uygulamamızı Electron’un içine entegre etme zamanı. Bu, Angular uygulamasını Electron penceresinde gösterecek ve ona masaüstü yetenekleri kazandıracak.

Electron Bağımlılıklarını Ekleme

Öncelikle, Angular projemizin kök dizininde Electron’u ve ilgili bağımlılıkları yüklememiz gerekiyor:

npm install electron electron-builder --save-dev

electron-builder, uygulamanızı farklı işletim sistemleri için paketlemek (installer oluşturmak) için kullanacağımız güçlü bir araçtır.

`main.js` Dosyası Oluşturma

Electron’un ana sürecini yönetecek olan main.js dosyasını Angular projemizin kök dizininde (angular-electron-app/) oluşturalım. Bu dosya, Electron uygulamasının başlangıç noktasını tanımlayacak ve Angular uygulamasını yükleyecek pencereyi oluşturacaktır.

main.js içeriği:

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

let win;

function createWindow() {
  // Tarayıcı penceresini oluştur.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Node.js API'lerini renderer sürecinde etkinleştirir (güvenlik uyarısı: geliştirme için uygun, üretim için önerilmez)
      contextIsolation: false, // Node.js API'lerini doğrudan window objesine ekler (güvenlik uyarısı: geliştirme için uygun, üretim için önerilmez)
      preload: path.join(__dirname, 'preload.js') // Güvenli IPC için preload script'i
    }
  });

  // Angular uygulamasının derlenmiş çıktısını yükle
  // Geliştirme modunda: Angular'ın geliştirme sunucusuna işaret et
  // Üretim modunda: Angular'ın build çıktısına işaret et
  const isDev = process.env.NODE_ENV === 'development';

  if (isDev) {
    win.loadURL('http://localhost:4200'); // Angular geliştirme sunucusu
    win.webContents.openDevTools(); // Geliştirici araçlarını aç
  } else {
    // Üretim için Angular uygulamasının derlenmiş dosyalarını yükle
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/angular-electron-app/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  // Pencere kapandığında null yap
  win.on('closed', () => {
    win = null;
  });
}

// Electron hazır olduğunda pencere oluştur
app.on('ready', createWindow);

// Tüm pencereler kapatıldığında uygulamadan çık (macOS hariç)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // macOS'ta dock ikonuna tıklandığında pencere yoksa yeni bir pencere oluştur
  if (win === null) {
    createWindow();
  }
});

// Örnek IPC iletişimi (main process'ten renderer process'e)
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // "ping" çıktısı verir
  event.reply('asynchronous-reply', 'pong');
});

Yukarıdaki kodda önemli noktalar:

BrowserWindow: Masaüstü penceresini oluşturur.
webPreferences: Bu nesne, Electron penceresinin web özelliklerini yapılandırır. nodeIntegration: true ve contextIsolation: false geliştirme sırasında Node.js API’lerine doğrudan erişim sağlar, ancak güvenlik açıkları oluşturabilir. Üretim uygulamalarında bu ayarlar dikkatli kullanılmalı veya contextBridge ile güvenli bir iletişim katmanı oluşturulmalıdır.
loadURL: Angular uygulamasının nerede çalıştığını Electron’a bildirir. Geliştirme modunda Angular’ın geliştirme sunucusuna (http://localhost:4200), üretim modunda ise derlenmiş index.html dosyasına işaret eder.
preload.js: Güvenli IPC iletişimi için kullanılacak bir betiktir. Henüz oluşturmadık ama bu, ileri seviye güvenlik için önemlidir.

`preload.js` Dosyası Oluşturma (Güvenli IPC için)

Electron’da güvenlik, özellikle nodeIntegration ve contextIsolation ayarları nedeniyle önemlidir. Üretim uygulamalarında nodeIntegration: false ve contextIsolation: true olarak ayarlanması önerilir. Bu durumda, ana süreç ile işleyici süreç (Angular) arasında güvenli iletişim kurmak için bir preload betiği kullanırız.

Proje kök dizininde preload.js adında bir dosya oluşturun ve içine şunları ekleyin:

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

// Renderer sürecinde (Angular) erişilebilecek API'leri tanımla
contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),
  // ipcRenderer.once için de benzer bir metod eklenebilir
});

Bu betik, electronAPI adında global bir obje tanımlar ve Angular uygulamanızın ana süreçle güvenli bir şekilde iletişim kurmasını sağlar. main.js dosyasında preload özelliğini bu dosyaya işaret ettiğimizden emin olun.

`package.json` Dosyasını Yapılandırma

Electron uygulamasını başlatmak için package.json dosyamıza bazı betikler (scripts) eklememiz gerekiyor. Bu betikler, Angular uygulamasını derlememize ve Electron’u başlatmamıza yardımcı olacak.

package.json dosyanızı açın ve "scripts" bölümüne aşağıdaki satırları ekleyin:

  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "npm run build:electron-dev",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "electron": "electron .",
    "electron-dev": "concurrently \"ng serve --port 4200\" \"wait-on http://localhost:4200 && electron .\"",
    "build:electron": "ng build --base-href ./ && electron-builder",
    "build:electron-dev": "ng build --base-href ./ && electron ."
  },
  "private": true,

Açıklamalar:

"main": "main.js": Electron’a uygulamanın ana giriş noktasının main.js olduğunu bildirir.
"electron": "electron .": Electron’u mevcut dizinde başlatır ve main.js dosyasını ana işlem olarak kullanır.
"electron-dev": Geliştirme için çok kullanışlı bir betiktir. concurrently ve wait-on kütüphanelerini kullanarak Angular geliştirme sunucusunu ve Electron’u aynı anda başlatır. wait-on, Angular sunucusunun hazır olmasını bekler.
"build:electron": Angular uygulamasını üretim için derler (--base-href ./, Electron’da doğru yol çözümlemesi için önemlidir) ve ardından electron-builder ile uygulamayı paketler.
"build:electron-dev": Angular uygulamasını derler ve ardından Electron’u başlatır. Bu, Angular’ın statik çıktı dosyalarını Electron içinde görmek istediğinizde kullanışlıdır.

concurrently ve wait-on paketlerini yüklemeyi unutmayın:

npm install concurrently wait-on --save-dev

Angular Uygulamasını Electron İçinde Çalıştırma

Artık her şey hazır! Angular uygulamanızı Electron içinde geliştirmek için aşağıdaki komutu çalıştırın:

npm run electron-dev

Bu komut sırasıyla şunları yapacaktır:

Angular geliştirme sunucusunu http://localhost:4200 adresinde başlatır.
Angular sunucusunun hazır olmasını bekler.
Electron uygulamasını başlatır. Electron, main.js dosyasında belirtildiği gibi http://localhost:4200 adresindeki Angular uygulamasını yükleyecektir.

Bir Electron penceresi açılmalı ve içinde Angular uygulamanızın çalıştığını görmelisiniz. Geliştirme sürecinde Angular kodunuzda yaptığınız değişiklikler, canlı yenileme (live reload) sayesinde Electron penceresinde otomatik olarak güncellenecektir.

Geliştirme Süreci İyileştirmeleri

Geliştirme deneyimini daha da verimli hale getirmek için bazı ek araçlar ve yaklaşımlar kullanabiliriz.

Otomatik Yenileme (Hot Reloading/Live Reloading)

Yukarıdaki npm run electron-dev betiği, Angular CLI’ın yerleşik canlı yenileme özelliğini kullanır. Angular kodunuzda yaptığınız değişiklikler otomatik olarak algılanır ve Electron penceresinde yenilenir. Bu, geliştirme hızınızı önemli ölçüde artırır.

Ancak, Electron’un ana sürecinde (main.js) yaptığınız değişiklikler otomatik olarak yenilenmez. Bu durumda, Electron uygulamasını kapatıp tekrar başlatmanız gerekir. Geliştirme sırasında bu manuel adımı otomatikleştirmek için electronmon veya nodemon gibi araçlar kullanabilirsiniz. Örneğin:

npm install electronmon --save-dev

Ardından package.json dosyanızdaki "electron-dev" betiğini güncelleyebilirsiniz (bu örnekte main.js değişikliklerini izlemek için):

    "electron-dev": "concurrently \"ng serve --port 4200\" \"wait-on http://localhost:4200 && electronmon .\""

electronmon, main.js veya diğer Electron ile ilgili dosyalarda değişiklik algıladığında Electron uygulamasını otomatik olarak yeniden başlatacaktır.

Electron Builder ile Uygulama Paketleme

Uygulamanızı son kullanıcılara dağıtmak için paketlemeniz gerekir. electron-builder, bu süreci otomatikleştiren ve Windows (.exe), macOS (.dmg) ve Linux (.deb, .AppImage) için yükleyiciler oluşturan güçlü bir araçtır.

Electron Builder Kurulumu

Daha önce yüklemiştik: npm install electron electron-builder --save-dev

`package.json` Yapılandırması

package.json dosyanıza "build" anahtarını ekleyerek electron-builder‘ı yapılandırmanız gerekir. Bu bölüm, uygulamanızın adı, sürümü, simgeleri, çıkış dizinleri ve hedef platformlar gibi bilgileri içerir.

Örnek "build" yapılandırması:

  "build": {
    "appId": "com.yourcompany.angularelectronapp",
    "productName": "Angular Electron App",
    "copyright": "Copyright © 2023 ${author}",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist/angular-electron-app//*",
      "main.js",
      "preload.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png"
    }
  }

Bu yapılandırmada:

appId: Uygulamanızın benzersiz kimliği.
productName: Uygulamanızın görünen adı.
directories.output: Oluşturulan yükleyicilerin kaydedileceği dizin.
files: Paketlenecek dosyaları belirtir. Angular’ın derlenmiş çıktısı (dist/angular-electron-app//*), main.js ve preload.js dosyalarının dahil edildiğinden emin olun.
win, mac, linux: Her işletim sistemi için hedef formatları ve simgeleri belirtir. build/icon.ico, build/icon.icns, build/icon.png gibi simge dosyalarını projenizin kök dizinindeki build klasörüne yerleştirmeniz gerekecektir.

Uygulamayı Oluşturma

Uygulamanızı paketlemek için önce Angular uygulamasını üretim modunda derlemeli, ardından electron-builder‘ı çalıştırmalısınız:

npm run build:electron

Bu komut, package.json‘daki "build:electron" betiğini çalıştırır. Angular uygulamasını derler ve ardından electron-builder‘ı kullanarak release/ dizinine platforma özel yükleyiciler oluşturur.

Angular ve Electron Arasında İletişim

Electron’un gerçek gücü, Angular uygulamanızın (renderer process) ile ana süreç (main process) arasında iletişim kurabilme yeteneğinden gelir. Bu, Angular uygulamanızın Node.js API’lerine ve işletim sistemi kaynaklarına erişmesini sağlar.

`ipcRenderer` ve `ipcMain` Kullanımı

İki süreç arasında iletişim kurmak için Electron’un Inter-Process Communication (IPC) modülleri kullanılır:

ipcRenderer: Renderer süreçlerinde (Angular bileşenleri) kullanılır ve ana sürece mesaj göndermek veya ana süreçten mesaj almak için kullanılır.
ipcMain: Ana süreçte (main.js) kullanılır ve renderer süreçlerinden gelen mesajları dinlemek veya onlara mesaj göndermek için kullanılır.

Daha önce oluşturduğumuz preload.js dosyası ve contextBridge, bu iletişimi güvenli bir şekilde sağlamak için tasarlanmıştır. Angular bileşeniniz doğrudan Node.js modüllerine erişmek yerine, preload.js tarafından açığa çıkarılan güvenli bir API’yi kullanacaktır.

Örnek: Dosya Okuma

Bir düğmeye tıklandığında Angular uygulamasının Electron ana sürecinden bir dosya okumasını isteyelim.

Ana İşlemde (`main.js`)

main.js dosyanıza, bir dosya okuma isteğini dinleyecek bir ipcMain olayı ekleyin:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const url = require('url');
const fs = require('fs'); // Node.js'in dosya sistemi modülü

// ... (createWindow ve diğer kodlar) ...

ipcMain.handle('read-file', async (event, filePath) => {
  try {
    const data = await fs.promises.readFile(filePath, 'utf8');
    return data;
  } catch (error) {
    console.error('Dosya okuma hatası:', error);
    throw error; // Hata durumunda renderer sürece ilet
  }
});

Burada ipcMain.handle kullanıyoruz. Bu, renderer sürecinden bir istek aldığında bir Promise döndüren asenkron bir işleyici tanımlar. Bu sayede renderer süreci, ana süreçten bir yanıt bekleyebilir.

İşleyici İşlemde (Renderer Process – Angular Component)

Angular uygulamanızda, bir bileşen içinde bu API’yi kullanabilirsiniz. Örneğin, app.component.ts dosyanıza aşağıdaki kodu ekleyelim:

// src/app/app.component.ts
import { Component } from '@angular/core';

// window.electronAPI'yi TypeScript'e tanıtmak için
declare global {
  interface Window {
    electronAPI?: {
      send: (channel: string, data?: any) => void;
      on: (channel: string, func: (...args: any[]) => void) => void;
    };
  }
}

@Component({
  selector: 'app-root',
  template: 
    Angular Electron Uygulaması
    
    Dosya İçeriği: {{ fileContent }}
  ,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fileContent: string = 'Henüz okunmadı.';

  async readFile() {
    if (window.electronAPI) {
      try {
        // Ana sürece 'read-file' mesajı gönder ve yanıt bekle
        const data = await window.electronAPI.send('read-file', path.join(app.getAppPath(), 'README.md')); // Örnek olarak README.md okuyalım
        this.fileContent = data;
      } catch (error) {
        this.fileContent = 'Dosya okunamadı: ' + error.message;
        console.error('Angular tarafında dosya okuma hatası:', error);
      }
    } else {
      this.fileContent = 'Electron API kullanılamıyor.';
      console.warn('Electron API (window.electronAPI) mevcut değil. Uygulama tarayıcıda mı çalışıyor?');
    }
  }
}

Bu örnekte, bir düğmeye tıklandığında readFile() metodu çağrılır. Bu metod, window.electronAPI.send() kullanarak ana sürece 'read-file' kanalından bir mesaj gönderir ve yanıtı bekler. Ana süreç, fs modülünü kullanarak dosyayı okur ve içeriğini geri döndürür.

Önemli Not: Yukarıdaki örnekte path.join(app.getAppPath(), 'README.md') ifadesi, Electron ana sürecinde çalıştırıldığında uygulamanın kök dizinindeki README.md dosyasını okumayı deneyecektir. Angular tarafında doğrudan path veya app objelerine erişiminiz yoktur. Bu nedenle, dosya yolunu Angular tarafından bir string olarak iletmeniz veya ana sürecin kendisinin bir dosya yolu belirlemesini sağlamanız gerekir. Yukarıdaki main.js tarafındaki ipcMain.handle fonksiyonuna dikkat edin, filePath parametresini alıyor. Angular tarafında bu parametreyi uygun bir şekilde (örneğin bir diyalog penceresi ile kullanıcıdan dosya seçmesini isteyerek) sağlamanız gerekir. Basitlik adına, ben örnekte README.md dosyasını okumayı gösterdim.

Sık Karşılaşılan Sorunlar ve Çözümleri

Angular ve Electron ile çalışırken karşılaşabileceğiniz bazı yaygın sorunlar ve bunların çözümleri:

nodeIntegration ve Güvenlik

Geliştirme sırasında webPreferences: { nodeIntegration: true, contextIsolation: false } kullanmak kolaylık sağlar. Ancak, üretim uygulamalarında bu ciddi güvenlik açıkları yaratabilir. Kötü niyetli bir web içeriği, Node.js API’lerine tam erişim sağlayabilir.

Çözüm: Üretim için nodeIntegration: false ve contextIsolation: true olarak ayarlayın. Ardından, Node.js API’lerine erişim sağlamak için preload.js betiği ve contextBridge kullanın. Bu, Angular uygulamanızın Node.js API’lerine doğrudan değil, yalnızca preload.js tarafından güvenli bir şekilde açığa çıkarılan API’lere erişmesini sağlar.
contextBridge Kullanımı

contextBridge, ana süreçten güvenli bir şekilde işleyici sürece API’ler aktarmanın en iyi yoludur. İşleyici sürecin (Angular) Node.js ortamından tamamen izole kalmasını sağlarken, yine de ana süreçle iletişim kurmasına olanak tanır.

preload.js dosyasında contextBridge.exposeInMainWorld() kullanarak API’lerinizi tanımlayın ve Angular uygulamanızda window.electronAPI (veya verdiğiniz herhangi bir isim) üzerinden bunlara erişin. Bu, daha önce dosya okuma örneğinde gösterildiği gibidir.
Dosya Yolları

Electron uygulamasında dosya yollarını yönetmek kafa karıştırıcı olabilir. Özellikle Angular uygulamasını derledikten sonra (ng build), statik varlıkların yolları değişebilir.

Çözüm:
- Angular’ı derlerken --base-href ./ kullanın: ng build --base-href ./. Bu, göreceli yolların doğru şekilde çalışmasına yardımcı olur.
- Electron’da statik dosyaları işaret ederken path.join(__dirname, 'dist/your-app-name/index.html') gibi ifadeler kullanın. __dirname, mevcut betiğin (genellikle main.js) dizinini temsil eder.
- Uygulama içinde dosya veya dizinlere erişirken Electron’un app.getPath() veya app.getAppPath() gibi metodlarını kullanın. Bu, işletim sistemleri arasında tutarlı yollar sağlar.
Angular Router ve HashLocationStrategy

Electron, dosya tabanlı bir protokol (file://) kullandığından, Angular Router’ın varsayılan PathLocationStrategy‘si sorunlara neden olabilir. Tarayıcıda olduğu gibi bir web sunucusu olmadığından, URL’deki yolların sunucu tarafından işlenmesi beklenmez.

Çözüm: Angular uygulamanızda HashLocationStrategy kullanın. Bunu app.module.ts dosyanızda aşağıdaki gibi yapılandırabilirsiniz:
```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; // Ekleyin

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy } // Ekleyin
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
Bu, rotaları URL’de # işaretiyle yönetir (örneğin, file:///path/to/index.html#/home), bu da Electron’un dosya protokolüyle uyumludur.

Performans İpuçları

Electron uygulamaları, özellikle büyük Angular uygulamaları, kaynak tüketimi açısından ağır olabilir. Performansı artırmak için bazı ipuçları:

Gereksiz Modülleri Yüklemeyin

Ana süreçte (main.js) yalnızca ihtiyacınız olan Node.js modüllerini yükleyin. Angular tarafında da gereksiz kütüphanelerden kaçının.
Lazy Loading Kullanın

Angular’ın tembel yükleme (lazy loading) özelliğini kullanarak modülleri yalnızca ihtiyaç duyulduğunda yükleyin. Bu, uygulamanızın başlangıç süresini ve bellek kullanımını azaltır.
Bellek Kullanımını İzleyin

Electron geliştirici araçlarını (Chromium DevTools) kullanarak uygulamanızın bellek ve CPU kullanımını izleyin. Bellek sızıntılarını ve performans darboğazlarını tespit edin.
Gereksiz Renderer Süreçlerinden Kaçının

Her BrowserWindow bir renderer süreci demektir ve kendi kaynaklarını tüketir. Mümkünse, tek bir pencereyle veya minimum sayıda pencereyle çalışmaya özen gösterin.
Uygulama Boyutunu Optimize Edin

Angular uygulamanızı üretim için derlerken ağaç sallama (tree-shaking) ve AOT (Ahead-of-Time) derleme gibi optimizasyonları kullanın. electron-builder, paketleme sırasında gereksiz dosyaları temizleyerek uygulama boyutunu daha da küçültmenize yardımcı olabilir.
Yerel Modülleri Dikkatli Kullanın

Node.js’in yerel modülleri (C++ eklentileri) performanslı olabilir ancak Electron’un farklı sürümleriyle uyumluluk sorunları yaşayabilir. Bu tür modülleri kullanırken dikkatli olun ve electron-rebuild gibi araçları kullanmanız gerekebilir.

Sonuç

Bu makalede, Angular ve Electron’u kullanarak sıfırdan bir masaüstü uygulaması geliştirme sürecini adım adım inceledik. Angular’ın güçlü ön uç yeteneklerini Electron’un masaüstü entegrasyonu ile birleştirmenin ne kadar kolay ve etkili olabileceğini gördük. Temel kurulumdan, geliştirme ve üretim ortamı yapılandırmasına, iki teknoloji arasında güvenli iletişim kurmaya ve sık karşılaşılan sorunların çözümüne kadar birçok konuya değindik.

Artık web geliştirme bilginizi kullanarak platformlar arası, zengin özelliklere sahip masaüstü uygulamaları oluşturmak için sağlam bir temele sahipsiniz. Angular ve Electron’un sunduğu bu sinerji, modern masaüstü uygulamaları geliştirme şeklinizi değiştirebilir. Başarılar dileriz!

Angular ve Electron ile Başlangıç