Angular Projemizi Electron.js ile Masaüstü Uygulamaya Çevirme

Electron.js son zamanlarda oldukça popüler hale gelmeye başladı. Hibrit uygulamalar öncelikle web uygulamalarının mobil uygulama olarak kullanmaya imkan verdikten sonra, sonrasında masaüstü uygulamalara da el attı ve electron.js framework ü ciddi anlamda bu konuda destek sağlayarak windows app geliştirilerini de web e yönlendirecek kıvama geldi.

Bu yazımda kısaca mevcut bir angular2+ uygulamanızı nasıl electron.js ile masaüstü uygulamasına çevirebilirsiniz bunu anlatıyor olacağım.

Electron.js Nedir
Kısaca bahsetmem gerekirse electron.js açık kaynak olarak geliştirilen web uygulamalarımızı mac,windows ve linux ortamlarında çalışabilen masaüstü uygulamasına çeviren bir frameworktür. Bu framework ile geliştirilen uygulamaları görmek isterseniz https://electronjs.org/apps linkine göz atabilirsiniz.

Electron.js kullanarak masaüstü uygulama hizmeti sunan en bilindik uygulamaları aşağıdaki gibi sıralayabiliriz.

• 
• 
• 
• 
• 
• 
• 
• 
• 

Angular Projemizi Electron.js ile Masaüstü Uygulamasına Çevirme

Bu kadar konuştuktan sonra hadi şimdi mevcut uygulamamızı nasıl electron.js ile çalıştırabileceğimze bakalım.

1.Öncelikle electron.js ortamını yüklemek için aşağıdaki linkten işletim sisteminize göre gerekli düzenlemeleri yapıyorsunuz.
https://electronjs.org/docs/tutorial/development-environment

2.Angular uygulamanızın src/index.html dosyasındaki <base href="/"> ifadesini<base href="./">şeklinde değiştirelim.

3. npm install electron --save-dev komutunu çalıştırarak electron yüklemesini yapalım.

4. Uygulamanın root dizininde main.js adında bir dosya oluşturun ve içeriği aşağıdaki gibi olsun.
Bu main.js console dan başlatılacak olan ilk dosya ve exe oluşturduğumuzda çalışacak ilk dosyadır, bize bir masaüstü ekranı oluşturmamızı sağlar.

const {app, BrowserWindow} = require('electron') 
const path = require('path') 
const url = require('url') 
let win 
function createWindow () { 
win = new BrowserWindow({width: 800, height: 600}) // load the dist folder from Angular 
win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })) 
// Open the DevTools optionally: 
// win.webContents.openDevTools() 
win.on('closed', () => { win = null }) 
} 

app.on('ready', createWindow) 
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) 
app.on('activate', () => { if (win === null) { createWindow() } })

5.package.json dosyasınızın root objesine "main":"main.js" eklemesini yapınız.

Örnek :

 "name": "uygulama-adı",

  "version": "0.0.0",

  "main": "main.js",

6. yine package.json dosyamızın scripts tag ı içine aşağıdaki kod bloğunu ekleyelim.

"electron": "electron .", // <-- run electron 
"electron-build": "ng build --prod && electron ." // <-- build app, then run electron 

Aşağıdaki gibi bi durumda olacak scripts kısmımız :

"scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e",

    "electron": "electron .",

    "electron-build": "ng build --prod && electron ."

  },

7. Şimdi uygulamamızı test edip çalıştrmak için aşağıdaki komutu çalıştırmamız yeterli.

npm run electron-build

8. Test ve geliştirmelerimizi yaptıktan sonra uygulamamızı build edip yayınlamak için aşağıdaki komutları kullanıyoruz.
Aşağıdaki kod satırları ile paketleme yöneticisini yüklüyoruz.

npm install electron-packager -g​​
npm install electron-packager --save-dev

Yukarıdaki komutları çalıştırdıktan sonra artık aşağıdaki komut ile uygulamamızın exe çıktısı üretmesini sağlayabiliriz.

electron-packager . --platform=win32​


Bu komutu bir defa çalıştırdıktan sonra tekrar çalıştırmamız gerektiğinde var olan exe mizin üzerine yazması için --overwrite komutu eklemesi yapmamız gerekiyor.



Yukarıdaki işlemleri uyguladığımızda projemiz hazır olacaktır.

Angular Projemize Electron.js kütüphanesini dahil edip electron.js fonksiyonlarını angular içerisine çağırma
Bu işlem için npm de bir yükleme ve app.module.ts e bir referans eklememiz yeterli olacaktır.

1. Console da aşağıdaki komut ile npm instlal yapalım.

npm install ngx-electron --save​

2. app.module.ts dosyamıza electron referansını ekleyelim.

Import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  ...
  imports: [
    BrowserModule,
    NgxElectronModule   // buraya ekle
  ],
  ...
})
export class AppModule { }​

4.App.component.ts de electronu dependency injection ile kullanmak için aşağıdaki eklemeleri yapmamız yeterli.

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';​

export class AppComponent {

  constructor(private _electronService: ElectronService) {}   // DI

  launchWindow() {
    this._electronService.shell.openExternal('http://google.com');
  }

}