code.visualstudio.com<\/a>) gibi modern bir metin d\u00fczenleyici veya entegre geli\u015ftirme ortam\u0131 (IDE) kullanman\u0131z \u00f6nerilir. Bu, kod yazmay\u0131 ve hata ay\u0131klamay\u0131 kolayla\u015ft\u0131racakt\u0131r.<\/p>\n<\/li>\n<\/ul>\nAngular Uygulamas\u0131 Olu\u015fturma<\/h2>\n \u0130lk ad\u0131m\u0131m\u0131z, temel bir Angular uygulamas\u0131 olu\u015fturmak olacak. Bu uygulama, daha sonra Electron i\u00e7ine entegre edece\u011fimiz \u00f6n u\u00e7 k\u0131sm\u0131n\u0131 olu\u015fturacak.<\/p>\n
Angular CLI Kurulumu<\/h3>\n Angular CLI (Command Line Interface), Angular uygulamalar\u0131 olu\u015fturmak, geli\u015ftirmek ve da\u011f\u0131tmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir komut sat\u0131r\u0131 arac\u0131d\u0131r. Hen\u00fcz kurulu de\u011filse, a\u015fa\u011f\u0131daki npm komutuyla global olarak kurabilirsiniz:<\/p>\n
npm install -g @angular\/cli<\/code><\/pre>\nKurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in:<\/p>\n
ng version<\/code><\/pre>\nYeni Bir Angular Projesi Olu\u015fturma<\/h3>\n \u015eimdi Angular CLI kullanarak yeni bir Angular projesi olu\u015ftural\u0131m. Projemize ‘angular-electron-app’ ad\u0131n\u0131 verelim:<\/p>\n
ng new angular-electron-app --skip-install<\/code><\/pre>\n--skip-install<\/code> parametresi, projenin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n otomatik olarak y\u00fcklenmesini engeller. Bunu daha sonra manuel olarak yapaca\u011f\u0131z. Komut \u00e7al\u0131\u015ft\u0131ktan sonra size baz\u0131 sorular sorabilir (\u00f6rne\u011fin, “Would you like to add Angular routing?”). Genellikle varsay\u0131lan de\u011ferleri kabul edebilirsiniz (No<\/code> veya Enter<\/code>). CSS preprocessor sorusunda CSS<\/code> se\u00e7ene\u011fini se\u00e7ebilirsiniz.<\/p>\nProje dizinine gidin ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin:<\/p>\n
cd angular-electron-app\nnpm install<\/code><\/pre>\nAngular Uygulamas\u0131n\u0131 \u00c7al\u0131\u015ft\u0131rma<\/h3>\n Angular uygulamas\u0131n\u0131n do\u011fru \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n
ng serve --open<\/code><\/pre>\nBu komut, uygulamay\u0131 derler ve genellikle http:\/\/localhost:4200<\/code> adresinde bir taray\u0131c\u0131 penceresinde a\u00e7ar. Taray\u0131c\u0131n\u0131zda “angular-electron-app app is running!” gibi bir mesaj g\u00f6rmelisiniz. Bu, Angular uygulaman\u0131z\u0131n ba\u015far\u0131yla \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir.<\/p>\nElectron’a Giri\u015f<\/h2>\n Angular uygulamam\u0131z\u0131 Electron ile birle\u015ftirmeden \u00f6nce, Electron’un ne oldu\u011funu ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 k\u0131saca anlayal\u0131m.<\/p>\n
Electron Nedir?<\/h3>\n Electron, GitHub taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir framework’t\u00fcr. HTML, CSS ve JavaScript kullanarak masa\u00fcst\u00fc uygulamalar\u0131 geli\u015ftirmenize olanak tan\u0131r. Temelinde Chromium ve Node.js’i bar\u0131nd\u0131r\u0131r. Chromium, web i\u00e7eri\u011fini g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131l\u0131rken (t\u0131pk\u0131 bir web taray\u0131c\u0131s\u0131 gibi), Node.js ise i\u015fletim sistemiyle etkile\u015fim kurmak ve web teknolojileriyle eri\u015filemeyen yerel i\u015flevleri sa\u011flamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Electron ile geli\u015ftirilen pop\u00fcler uygulamalara \u00f6rnek olarak Visual Studio Code, Slack, Discord ve Figma’n\u0131n masa\u00fcst\u00fc s\u00fcr\u00fcmleri verilebilir.<\/p>\n
Electron’un Temel Bile\u015fenleri<\/h3>\n Electron uygulamalar\u0131 genellikle iki ana i\u015flem (process) t\u00fcr\u00fcnden olu\u015fur:<\/p>\n
\n\nMain Process (Ana \u0130\u015flem)<\/h3>\n Bu, uygulaman\u0131z\u0131n ana kontrolc\u00fcs\u00fcd\u00fcr. Her Electron uygulamas\u0131n\u0131n yaln\u0131zca bir ana i\u015flemi vard\u0131r. Ana i\u015flem, uygulaman\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc y\u00f6netir (uygulama a\u00e7\u0131l\u0131\u015f\u0131, kapan\u0131\u015f\u0131), yerel i\u015fletim sistemi API’lerine eri\u015fimi sa\u011flar (dosya sistemi, men\u00fcler, bildirimler), yeni taray\u0131c\u0131 pencereleri (renderer process’ler) olu\u015fturur ve y\u00f6netir. Node.js API’lerine tam eri\u015fimi vard\u0131r. Genellikle main.js<\/code> veya benzeri bir dosyada bulunur.<\/p>\n<\/li>\n\nRenderer Process (\u0130\u015fleyici \u0130\u015flem)<\/h3>\n Her taray\u0131c\u0131 penceresi (BrowserWindow<\/code> \u00f6rne\u011fi), kendi ayr\u0131 i\u015fleyici s\u00fcrecinde \u00e7al\u0131\u015f\u0131r. \u0130\u015fleyici s\u00fcre\u00e7leri, web sayfalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemekten sorumludur. T\u0131pk\u0131 bir web taray\u0131c\u0131s\u0131ndaki sekmeler gibi d\u00fc\u015f\u00fcnebilirsiniz. Her i\u015fleyici s\u00fcreci kendi izole ortam\u0131nda \u00e7al\u0131\u015f\u0131r ve Node.js API’lerine do\u011frudan eri\u015fimi yoktur (g\u00fcvenlik nedeniyle, ancak bu davran\u0131\u015f de\u011fi\u015ftirilebilir). Angular uygulaman\u0131z bu i\u015fleyici s\u00fcre\u00e7lerinden birinde \u00e7al\u0131\u015facakt\u0131r.<\/p>\n<\/li>\n<\/ul>\nAna i\u015flem ve i\u015fleyici s\u00fcre\u00e7leri aras\u0131nda ileti\u015fim kurmak i\u00e7in Electron’un Inter-Process Communication (IPC) mod\u00fclleri (ipcMain<\/code> ve ipcRenderer<\/code>) kullan\u0131l\u0131r.<\/p>\nAngular Uygulamas\u0131n\u0131 Electron ile Birle\u015ftirme<\/h2>\n \u015eimdi Angular uygulamam\u0131z\u0131 Electron’un i\u00e7ine entegre etme zaman\u0131. Bu, Angular uygulamas\u0131n\u0131 Electron penceresinde g\u00f6sterecek ve ona masa\u00fcst\u00fc yetenekleri kazand\u0131racak.<\/p>\n
Electron Ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 Ekleme<\/h3>\n \u00d6ncelikle, Angular projemizin k\u00f6k dizininde Electron’u ve ilgili ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklememiz gerekiyor:<\/p>\n
npm install electron electron-builder --save-dev<\/code><\/pre>\nelectron-builder<\/code>, uygulaman\u0131z\u0131 farkl\u0131 i\u015fletim sistemleri i\u00e7in paketlemek (installer olu\u015fturmak) i\u00e7in kullanaca\u011f\u0131m\u0131z g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\nmain.js<\/code> Dosyas\u0131 Olu\u015fturma<\/h3>\nElectron’un ana s\u00fcrecini y\u00f6netecek olan main.js<\/code> dosyas\u0131n\u0131 Angular projemizin k\u00f6k dizininde (angular-electron-app\/<\/code>) olu\u015ftural\u0131m. Bu dosya, Electron uygulamas\u0131n\u0131n ba\u015flang\u0131\u00e7 noktas\u0131n\u0131 tan\u0131mlayacak ve Angular uygulamas\u0131n\u0131 y\u00fckleyecek pencereyi olu\u015fturacakt\u0131r.<\/p>\nmain.js<\/code> i\u00e7eri\u011fi:<\/p>\nconst { app, BrowserWindow, ipcMain } = require('electron');\nconst path = require('path');\nconst url = require('url');\n\nlet win;\n\nfunction createWindow() {\n \/\/ Taray\u0131c\u0131 penceresini olu\u015ftur.\n win = new BrowserWindow({\n width: 800,\n height: 600,\n webPreferences: {\n nodeIntegration: true, \/\/ Node.js API'lerini renderer s\u00fcrecinde etkinle\u015ftirir (g\u00fcvenlik uyar\u0131s\u0131: geli\u015ftirme i\u00e7in uygun, \u00fcretim i\u00e7in \u00f6nerilmez)\n contextIsolation: false, \/\/ Node.js API'lerini do\u011frudan window objesine ekler (g\u00fcvenlik uyar\u0131s\u0131: geli\u015ftirme i\u00e7in uygun, \u00fcretim i\u00e7in \u00f6nerilmez)\n preload: path.join(__dirname, 'preload.js') \/\/ G\u00fcvenli IPC i\u00e7in preload script'i\n }\n });\n\n \/\/ Angular uygulamas\u0131n\u0131n derlenmi\u015f \u00e7\u0131kt\u0131s\u0131n\u0131 y\u00fckle\n \/\/ Geli\u015ftirme modunda: Angular'\u0131n geli\u015ftirme sunucusuna i\u015faret et\n \/\/ \u00dcretim modunda: Angular'\u0131n build \u00e7\u0131kt\u0131s\u0131na i\u015faret et\n const isDev = process.env.NODE_ENV === 'development';\n\n if (isDev) {\n win.loadURL('http:\/\/localhost:4200'); \/\/ Angular geli\u015ftirme sunucusu\n win.webContents.openDevTools(); \/\/ Geli\u015ftirici ara\u00e7lar\u0131n\u0131 a\u00e7\n } else {\n \/\/ \u00dcretim i\u00e7in Angular uygulamas\u0131n\u0131n derlenmi\u015f dosyalar\u0131n\u0131 y\u00fckle\n win.loadURL(url.format({\n pathname: path.join(__dirname, 'dist\/angular-electron-app\/index.html'),\n protocol: 'file:',\n slashes: true\n }));\n }\n\n \/\/ Pencere kapand\u0131\u011f\u0131nda null yap\n win.on('closed', () => {\n win = null;\n });\n}\n\n\/\/ Electron haz\u0131r oldu\u011funda pencere olu\u015ftur\napp.on('ready', createWindow);\n\n\/\/ T\u00fcm pencereler kapat\u0131ld\u0131\u011f\u0131nda uygulamadan \u00e7\u0131k (macOS hari\u00e7)\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit();\n }\n});\n\napp.on('activate', () => {\n \/\/ macOS'ta dock ikonuna t\u0131kland\u0131\u011f\u0131nda pencere yoksa yeni bir pencere olu\u015ftur\n if (win === null) {\n createWindow();\n }\n});\n\n\/\/ \u00d6rnek IPC ileti\u015fimi (main process'ten renderer process'e)\nipcMain.on('asynchronous-message', (event, arg) => {\n console.log(arg); \/\/ \"ping\" \u00e7\u0131kt\u0131s\u0131 verir\n event.reply('asynchronous-reply', 'pong');\n});\n<\/code><\/pre>\nYukar\u0131daki kodda \u00f6nemli noktalar:<\/p>\n
\nBrowserWindow<\/code>: Masa\u00fcst\u00fc penceresini olu\u015fturur.<\/li>\nwebPreferences<\/code>: Bu nesne, Electron penceresinin web \u00f6zelliklerini yap\u0131land\u0131r\u0131r. nodeIntegration: true<\/code> ve contextIsolation: false<\/code> geli\u015ftirme s\u0131ras\u0131nda Node.js API’lerine do\u011frudan eri\u015fim sa\u011flar, ancak g\u00fcvenlik a\u00e7\u0131klar\u0131 olu\u015fturabilir. \u00dcretim uygulamalar\u0131nda bu ayarlar dikkatli kullan\u0131lmal\u0131 veya contextBridge<\/code> ile g\u00fcvenli bir ileti\u015fim katman\u0131 olu\u015fturulmal\u0131d\u0131r.<\/li>\nloadURL<\/code>: Angular uygulamas\u0131n\u0131n nerede \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 Electron’a bildirir. Geli\u015ftirme modunda Angular’\u0131n geli\u015ftirme sunucusuna (http:\/\/localhost:4200<\/code>), \u00fcretim modunda ise derlenmi\u015f index.html<\/code> dosyas\u0131na i\u015faret eder.<\/li>\npreload.js<\/code>: G\u00fcvenli IPC ileti\u015fimi i\u00e7in kullan\u0131lacak bir betiktir. Hen\u00fcz olu\u015fturmad\u0131k ama bu, ileri seviye g\u00fcvenlik i\u00e7in \u00f6nemlidir.<\/li>\n<\/ul>\npreload.js<\/code> Dosyas\u0131 Olu\u015fturma (G\u00fcvenli IPC i\u00e7in)<\/h3>\nElectron’da g\u00fcvenlik, \u00f6zellikle nodeIntegration<\/code> ve contextIsolation<\/code> ayarlar\u0131 nedeniyle \u00f6nemlidir. \u00dcretim uygulamalar\u0131nda nodeIntegration: false<\/code> ve contextIsolation: true<\/code> olarak ayarlanmas\u0131 \u00f6nerilir. Bu durumda, ana s\u00fcre\u00e7 ile i\u015fleyici s\u00fcre\u00e7 (Angular) aras\u0131nda g\u00fcvenli ileti\u015fim kurmak i\u00e7in bir preload beti\u011fi kullan\u0131r\u0131z.<\/p>\nProje k\u00f6k dizininde preload.js<\/code> ad\u0131nda bir dosya olu\u015fturun ve i\u00e7ine \u015funlar\u0131 ekleyin:<\/p>\nconst { contextBridge, ipcRenderer } = require('electron');\n\n\/\/ Renderer s\u00fcrecinde (Angular) eri\u015filebilecek API'leri tan\u0131mla\ncontextBridge.exposeInMainWorld('electronAPI', {\n send: (channel, data) => ipcRenderer.send(channel, data),\n on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),\n \/\/ ipcRenderer.once i\u00e7in de benzer bir metod eklenebilir\n});\n<\/code><\/pre>\nBu betik, electronAPI<\/code> ad\u0131nda global bir obje tan\u0131mlar ve Angular uygulaman\u0131z\u0131n ana s\u00fcre\u00e7le g\u00fcvenli bir \u015fekilde ileti\u015fim kurmas\u0131n\u0131 sa\u011flar. main.js<\/code> dosyas\u0131nda preload<\/code> \u00f6zelli\u011fini bu dosyaya i\u015faret etti\u011fimizden emin olun.<\/p>\npackage.json<\/code> Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/h3>\nElectron uygulamas\u0131n\u0131 ba\u015flatmak i\u00e7in package.json<\/code> dosyam\u0131za baz\u0131 betikler (scripts) eklememiz gerekiyor. Bu betikler, Angular uygulamas\u0131n\u0131 derlememize ve Electron’u ba\u015flatmam\u0131za yard\u0131mc\u0131 olacak.<\/p>\npackage.json<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve \"scripts\"<\/code> b\u00f6l\u00fcm\u00fcne a\u015fa\u011f\u0131daki sat\u0131rlar\u0131 ekleyin:<\/p>\n \"main\": \"main.js\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"npm run build:electron-dev\",\n \"build\": \"ng build\",\n \"watch\": \"ng build --watch --configuration development\",\n \"test\": \"ng test\",\n \"electron\": \"electron .\",\n \"electron-dev\": \"concurrently \\\"ng serve --port 4200\\\" \\\"wait-on http:\/\/localhost:4200 && electron .\\\"\",\n \"build:electron\": \"ng build --base-href .\/ && electron-builder\",\n \"build:electron-dev\": \"ng build --base-href .\/ && electron .\"\n },\n \"private\": true,\n<\/code><\/pre>\nA\u00e7\u0131klamalar:<\/p>\n
\n\"main\": \"main.js\"<\/code>: Electron’a uygulaman\u0131n ana giri\u015f noktas\u0131n\u0131n main.js<\/code> oldu\u011funu bildirir.<\/li>\n\"electron\": \"electron .\"<\/code>: Electron’u mevcut dizinde ba\u015flat\u0131r ve main.js<\/code> dosyas\u0131n\u0131 ana i\u015flem olarak kullan\u0131r.<\/li>\n\"electron-dev\"<\/code>: Geli\u015ftirme i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131 bir betiktir. concurrently<\/code> ve wait-on<\/code> k\u00fct\u00fcphanelerini kullanarak Angular geli\u015ftirme sunucusunu ve Electron’u ayn\u0131 anda ba\u015flat\u0131r. wait-on<\/code>, Angular sunucusunun haz\u0131r olmas\u0131n\u0131 bekler.<\/li>\n\"build:electron\"<\/code>: Angular uygulamas\u0131n\u0131 \u00fcretim i\u00e7in derler (--base-href .\/<\/code>, Electron’da do\u011fru yol \u00e7\u00f6z\u00fcmlemesi i\u00e7in \u00f6nemlidir) ve ard\u0131ndan electron-builder<\/code> ile uygulamay\u0131 paketler.<\/li>\n\"build:electron-dev\"<\/code>: Angular uygulamas\u0131n\u0131 derler ve ard\u0131ndan Electron’u ba\u015flat\u0131r. Bu, Angular’\u0131n statik \u00e7\u0131kt\u0131 dosyalar\u0131n\u0131 Electron i\u00e7inde g\u00f6rmek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\nconcurrently<\/code> ve wait-on<\/code> paketlerini y\u00fcklemeyi unutmay\u0131n:<\/p>\nnpm install concurrently wait-on --save-dev<\/code><\/pre>\nAngular Uygulamas\u0131n\u0131 Electron \u0130\u00e7inde \u00c7al\u0131\u015ft\u0131rma<\/h3>\n Art\u0131k her \u015fey haz\u0131r! Angular uygulaman\u0131z\u0131 Electron i\u00e7inde geli\u015ftirmek i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
npm run electron-dev<\/code><\/pre>\nBu komut s\u0131ras\u0131yla \u015funlar\u0131 yapacakt\u0131r:<\/p>\n
\nAngular geli\u015ftirme sunucusunu http:\/\/localhost:4200<\/code> adresinde ba\u015flat\u0131r.<\/li>\nAngular sunucusunun haz\u0131r olmas\u0131n\u0131 bekler.<\/li>\n Electron uygulamas\u0131n\u0131 ba\u015flat\u0131r. Electron, main.js<\/code> dosyas\u0131nda belirtildi\u011fi gibi http:\/\/localhost:4200<\/code> adresindeki Angular uygulamas\u0131n\u0131 y\u00fckleyecektir.<\/li>\n<\/ol>\nBir Electron penceresi a\u00e7\u0131lmal\u0131 ve i\u00e7inde Angular uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmelisiniz. Geli\u015ftirme s\u00fcrecinde Angular kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler, canl\u0131 yenileme (live reload) sayesinde Electron penceresinde otomatik olarak g\u00fcncellenecektir.<\/p>\n
Geli\u015ftirme S\u00fcreci \u0130yile\u015ftirmeleri<\/h2>\n Geli\u015ftirme deneyimini daha da verimli hale getirmek i\u00e7in baz\u0131 ek ara\u00e7lar ve yakla\u015f\u0131mlar kullanabiliriz.<\/p>\n
Otomatik Yenileme (Hot Reloading\/Live Reloading)<\/h3>\n Yukar\u0131daki npm run electron-dev<\/code> beti\u011fi, Angular CLI’\u0131n yerle\u015fik canl\u0131 yenileme \u00f6zelli\u011fini kullan\u0131r. Angular kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler otomatik olarak alg\u0131lan\u0131r ve Electron penceresinde yenilenir. Bu, geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\nAncak, Electron’un ana s\u00fcrecinde (main.js<\/code>) yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler otomatik olarak yenilenmez. Bu durumda, Electron uygulamas\u0131n\u0131 kapat\u0131p tekrar ba\u015flatman\u0131z gerekir. Geli\u015ftirme s\u0131ras\u0131nda bu manuel ad\u0131m\u0131 otomatikle\u015ftirmek i\u00e7in electronmon<\/code> veya nodemon<\/code> gibi ara\u00e7lar kullanabilirsiniz. \u00d6rne\u011fin:<\/p>\nnpm install electronmon --save-dev<\/code><\/pre>\nArd\u0131ndan package.json<\/code> dosyan\u0131zdaki \"electron-dev\"<\/code> beti\u011fini g\u00fcncelleyebilirsiniz (bu \u00f6rnekte main.js<\/code> de\u011fi\u015fikliklerini izlemek i\u00e7in):<\/p>\n \"electron-dev\": \"concurrently \\\"ng serve --port 4200\\\" \\\"wait-on http:\/\/localhost:4200 && electronmon .\\\"\"\n<\/code><\/pre>\nelectronmon<\/code>, main.js<\/code> veya di\u011fer Electron ile ilgili dosyalarda de\u011fi\u015fiklik alg\u0131lad\u0131\u011f\u0131nda Electron uygulamas\u0131n\u0131 otomatik olarak yeniden ba\u015flatacakt\u0131r.<\/p>\nElectron Builder ile Uygulama Paketleme<\/h3>\n Uygulaman\u0131z\u0131 son kullan\u0131c\u0131lara da\u011f\u0131tmak i\u00e7in paketlemeniz gerekir. electron-builder<\/code>, bu s\u00fcreci otomatikle\u015ftiren ve Windows (.exe), macOS (.dmg) ve Linux (.deb, .AppImage) i\u00e7in y\u00fckleyiciler olu\u015fturan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\nElectron Builder Kurulumu<\/h4>\n Daha \u00f6nce y\u00fcklemi\u015ftik: npm install electron electron-builder --save-dev<\/code><\/p>\npackage.json<\/code> Yap\u0131land\u0131rmas\u0131<\/h4>\npackage.json<\/code> dosyan\u0131za \"build\"<\/code> anahtar\u0131n\u0131 ekleyerek electron-builder<\/code>‘\u0131 yap\u0131land\u0131rman\u0131z gerekir. Bu b\u00f6l\u00fcm, uygulaman\u0131z\u0131n ad\u0131, s\u00fcr\u00fcm\u00fc, simgeleri, \u00e7\u0131k\u0131\u015f dizinleri ve hedef platformlar gibi bilgileri i\u00e7erir.<\/p>\n\u00d6rnek \"build\"<\/code> yap\u0131land\u0131rmas\u0131:<\/p>\n \"build\": {\n \"appId\": \"com.yourcompany.angularelectronapp\",\n \"productName\": \"Angular Electron App\",\n \"copyright\": \"Copyright \u00a9 2023 ${author}\",\n \"directories\": {\n \"output\": \"release\/\"\n },\n \"files\": [\n \"dist\/angular-electron-app\/<\/em>\/*\",\n \"main.js\",\n \"preload.js\"\n ],\n \"win\": {\n \"target\": \"nsis\",\n \"icon\": \"build\/icon.ico\"\n },\n \"mac\": {\n \"target\": \"dmg\",\n \"icon\": \"build\/icon.icns\"\n },\n \"linux\": {\n \"target\": \"AppImage\",\n \"icon\": \"build\/icon.png\"\n }\n }\n<\/code><\/pre>\nBu yap\u0131land\u0131rmada:<\/p>\n
\nappId<\/code>: Uygulaman\u0131z\u0131n benzersiz kimli\u011fi.<\/li>\nproductName<\/code>: Uygulaman\u0131z\u0131n g\u00f6r\u00fcnen ad\u0131.<\/li>\ndirectories.output<\/code>: Olu\u015fturulan y\u00fckleyicilerin kaydedilece\u011fi dizin.<\/li>\nfiles<\/code>: Paketlenecek dosyalar\u0131 belirtir. Angular’\u0131n derlenmi\u015f \u00e7\u0131kt\u0131s\u0131 (dist\/angular-electron-app\/<\/em>\/*<\/code>), main.js<\/code> ve preload.js<\/code> dosyalar\u0131n\u0131n dahil edildi\u011finden emin olun.<\/li>\nwin<\/code>, mac<\/code>, linux<\/code>: Her i\u015fletim sistemi i\u00e7in hedef formatlar\u0131 ve simgeleri belirtir. build\/icon.ico<\/code>, build\/icon.icns<\/code>, build\/icon.png<\/code> gibi simge dosyalar\u0131n\u0131 projenizin k\u00f6k dizinindeki build<\/code> klas\u00f6r\u00fcne yerle\u015ftirmeniz gerekecektir.<\/li>\n<\/ul>\nUygulamay\u0131 Olu\u015fturma<\/h4>\n Uygulaman\u0131z\u0131 paketlemek i\u00e7in \u00f6nce Angular uygulamas\u0131n\u0131 \u00fcretim modunda derlemeli, ard\u0131ndan electron-builder<\/code>‘\u0131 \u00e7al\u0131\u015ft\u0131rmal\u0131s\u0131n\u0131z:<\/p>\nnpm run build:electron<\/code><\/pre>\nBu komut, package.json<\/code>‘daki \"build:electron\"<\/code> beti\u011fini \u00e7al\u0131\u015ft\u0131r\u0131r. Angular uygulamas\u0131n\u0131 derler ve ard\u0131ndan electron-builder<\/code>‘\u0131 kullanarak release\/<\/code> dizinine platforma \u00f6zel y\u00fckleyiciler olu\u015fturur.<\/p>\nAngular ve Electron Aras\u0131nda \u0130leti\u015fim<\/h2>\n Electron’un ger\u00e7ek g\u00fcc\u00fc, Angular uygulaman\u0131z\u0131n (renderer process) ile ana s\u00fcre\u00e7 (main process) aras\u0131nda ileti\u015fim kurabilme yetene\u011finden gelir. Bu, Angular uygulaman\u0131z\u0131n Node.js API’lerine ve i\u015fletim sistemi kaynaklar\u0131na eri\u015fmesini sa\u011flar.<\/p>\n
ipcRenderer<\/code> ve ipcMain<\/code> Kullan\u0131m\u0131<\/h3>\n\u0130ki s\u00fcre\u00e7 aras\u0131nda ileti\u015fim kurmak i\u00e7in Electron’un Inter-Process Communication (IPC) mod\u00fclleri kullan\u0131l\u0131r:<\/p>\n
\nipcRenderer<\/code>: Renderer s\u00fcre\u00e7lerinde (Angular bile\u015fenleri) kullan\u0131l\u0131r ve ana s\u00fcrece mesaj g\u00f6ndermek veya ana s\u00fcre\u00e7ten mesaj almak i\u00e7in kullan\u0131l\u0131r.<\/li>\nipcMain<\/code>: Ana s\u00fcre\u00e7te (main.js<\/code>) kullan\u0131l\u0131r ve renderer s\u00fcre\u00e7lerinden gelen mesajlar\u0131 dinlemek veya onlara mesaj g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\nDaha \u00f6nce olu\u015fturdu\u011fumuz preload.js<\/code> dosyas\u0131 ve contextBridge<\/code>, bu ileti\u015fimi g\u00fcvenli bir \u015fekilde sa\u011flamak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Angular bile\u015feniniz do\u011frudan Node.js mod\u00fcllerine eri\u015fmek yerine, preload.js<\/code> taraf\u0131ndan a\u00e7\u0131\u011fa \u00e7\u0131kar\u0131lan g\u00fcvenli bir API’yi kullanacakt\u0131r.<\/p>\n\u00d6rnek: Dosya Okuma<\/h3>\n Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda Angular uygulamas\u0131n\u0131n Electron ana s\u00fcrecinden bir dosya okumas\u0131n\u0131 isteyelim.<\/p>\n
Ana \u0130\u015flemde (main.js<\/code>)<\/h4>\nmain.js<\/code> dosyan\u0131za, bir dosya okuma iste\u011fini dinleyecek bir ipcMain<\/code> olay\u0131 ekleyin:<\/p>\nconst { app, BrowserWindow, ipcMain } = require('electron');\nconst path = require('path');\nconst url = require('url');\nconst fs = require('fs'); \/\/ Node.js'in dosya sistemi mod\u00fcl\u00fc\n\n\/\/ ... (createWindow ve di\u011fer kodlar) ...\n\nipcMain.handle('read-file', async (event, filePath) => {\n try {\n const data = await fs.promises.readFile(filePath, 'utf8');\n return data;\n } catch (error) {\n console.error('Dosya okuma hatas\u0131:', error);\n throw error; \/\/ Hata durumunda renderer s\u00fcrece ilet\n }\n});\n<\/code><\/pre>\nBurada ipcMain.handle<\/code> kullan\u0131yoruz. Bu, renderer s\u00fcrecinden bir istek ald\u0131\u011f\u0131nda bir Promise d\u00f6nd\u00fcren asenkron bir i\u015fleyici tan\u0131mlar. Bu sayede renderer s\u00fcreci, ana s\u00fcre\u00e7ten bir yan\u0131t bekleyebilir.<\/p>\n\u0130\u015fleyici \u0130\u015flemde (Renderer Process – Angular Component)<\/h4>\n Angular uygulaman\u0131zda, bir bile\u015fen i\u00e7inde bu API’yi kullanabilirsiniz. \u00d6rne\u011fin, app.component.ts<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki kodu ekleyelim:<\/p>\n\/\/ src\/app\/app.component.ts\nimport { Component } from '@angular\/core';\n\n\/\/ window.electronAPI'yi TypeScript'e tan\u0131tmak i\u00e7in\ndeclare global {\n interface Window {\n electronAPI?: {\n send: (channel: string, data?: any) => void;\n on: (channel: string, func: (...args: any[]) => void) => void;\n };\n }\n}\n\n@Component({\n selector: 'app-root',\n template: \n Angular Electron Uygulamas\u0131<\/h1>\n Dosya Oku<\/button>\n Dosya \u0130\u00e7eri\u011fi: {{ fileContent }}<\/p>\n <\/code>,\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n fileContent: string = 'Hen\u00fcz okunmad\u0131.';\n\n async readFile() {\n if (window.electronAPI) {\n try {\n \/\/ Ana s\u00fcrece 'read-file' mesaj\u0131 g\u00f6nder ve yan\u0131t bekle\n const data = await window.electronAPI.send('read-file', path.join(app.getAppPath(), 'README.md')); \/\/ \u00d6rnek olarak README.md okuyal\u0131m\n this.fileContent = data;\n } catch (error) {\n this.fileContent = 'Dosya okunamad\u0131: ' + error.message;\n console.error('Angular taraf\u0131nda dosya okuma hatas\u0131:', error);\n }\n } else {\n this.fileContent = 'Electron API kullan\u0131lam\u0131yor.';\n console.warn('Electron API (window.electronAPI) mevcut de\u011fil. Uygulama taray\u0131c\u0131da m\u0131 \u00e7al\u0131\u015f\u0131yor?');\n }\n }\n}\n<\/code><\/pre>\n
Bu \u00f6rnekte, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda readFile()<\/code> metodu \u00e7a\u011fr\u0131l\u0131r. Bu metod, window.electronAPI.send()<\/code> kullanarak ana s\u00fcrece 'read-file'<\/code> kanal\u0131ndan bir mesaj g\u00f6nderir ve yan\u0131t\u0131 bekler. Ana s\u00fcre\u00e7, fs<\/code> mod\u00fcl\u00fcn\u00fc kullanarak dosyay\u0131 okur ve i\u00e7eri\u011fini geri d\u00f6nd\u00fcr\u00fcr.<\/p>\n\u00d6nemli Not:<\/strong> Yukar\u0131daki \u00f6rnekte path.join(app.getAppPath(), 'README.md')<\/code> ifadesi, Electron ana s\u00fcrecinde \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda uygulaman\u0131n k\u00f6k dizinindeki README.md<\/code> dosyas\u0131n\u0131 okumay\u0131 deneyecektir. Angular taraf\u0131nda do\u011frudan path<\/code> veya app<\/code> objelerine eri\u015fiminiz yoktur. Bu nedenle, dosya yolunu Angular taraf\u0131ndan bir string olarak iletmeniz veya ana s\u00fcrecin kendisinin bir dosya yolu belirlemesini sa\u011flaman\u0131z gerekir. Yukar\u0131daki main.js<\/code> taraf\u0131ndaki ipcMain.handle<\/code> fonksiyonuna dikkat edin, filePath<\/code> parametresini al\u0131yor. Angular taraf\u0131nda bu parametreyi uygun bir \u015fekilde (\u00f6rne\u011fin bir diyalog penceresi ile kullan\u0131c\u0131dan dosya se\u00e7mesini isteyerek) sa\u011flaman\u0131z gerekir. Basitlik ad\u0131na, ben \u00f6rnekte README.md<\/code> dosyas\u0131n\u0131 okumay\u0131 g\u00f6sterdim.<\/p>\nS\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n Angular ve Electron ile \u00e7al\u0131\u015f\u0131rken kar\u015f\u0131la\u015fabilece\u011finiz baz\u0131 yayg\u0131n sorunlar ve bunlar\u0131n \u00e7\u00f6z\u00fcmleri:<\/p>\n
\n\nnodeIntegration<\/code> ve G\u00fcvenlik<\/h3>\nGeli\u015ftirme s\u0131ras\u0131nda webPreferences: { nodeIntegration: true, contextIsolation: false }<\/code> kullanmak kolayl\u0131k sa\u011flar. Ancak, \u00fcretim uygulamalar\u0131nda bu ciddi g\u00fcvenlik a\u00e7\u0131klar\u0131 yaratabilir. K\u00f6t\u00fc niyetli bir web i\u00e7eri\u011fi, Node.js API’lerine tam eri\u015fim sa\u011flayabilir.<\/p>\n\u00c7\u00f6z\u00fcm:<\/strong> \u00dcretim i\u00e7in nodeIntegration: false<\/code> ve contextIsolation: true<\/code> olarak ayarlay\u0131n. Ard\u0131ndan, Node.js API’lerine eri\u015fim sa\u011flamak i\u00e7in preload.js<\/code> beti\u011fi ve contextBridge<\/code> kullan\u0131n. Bu, Angular uygulaman\u0131z\u0131n Node.js API’lerine do\u011frudan de\u011fil, yaln\u0131zca preload.js<\/code> taraf\u0131ndan g\u00fcvenli bir \u015fekilde a\u00e7\u0131\u011fa \u00e7\u0131kar\u0131lan API’lere eri\u015fmesini sa\u011flar.<\/p>\n<\/li>\n\ncontextBridge<\/code> Kullan\u0131m\u0131<\/h3>\ncontextBridge<\/code>, ana s\u00fcre\u00e7ten g\u00fcvenli bir \u015fekilde i\u015fleyici s\u00fcrece API’ler aktarman\u0131n en iyi yoludur. \u0130\u015fleyici s\u00fcrecin (Angular) Node.js ortam\u0131ndan tamamen izole kalmas\u0131n\u0131 sa\u011flarken, yine de ana s\u00fcre\u00e7le ileti\u015fim kurmas\u0131na olanak tan\u0131r.<\/p>\npreload.js<\/code> dosyas\u0131nda contextBridge.exposeInMainWorld()<\/code> kullanarak API’lerinizi tan\u0131mlay\u0131n ve Angular uygulaman\u0131zda window.electronAPI<\/code> (veya verdi\u011finiz herhangi bir isim) \u00fczerinden bunlara eri\u015fin. Bu, daha \u00f6nce dosya okuma \u00f6rne\u011finde g\u00f6sterildi\u011fi gibidir.<\/p>\n<\/li>\n\nDosya Yollar\u0131<\/h3>\n Electron uygulamas\u0131nda dosya yollar\u0131n\u0131 y\u00f6netmek kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle Angular uygulamas\u0131n\u0131 derledikten sonra (ng build<\/code>), statik varl\u0131klar\u0131n yollar\u0131 de\u011fi\u015febilir.<\/p>\n