Ana içeriğe atla

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');
  }

}























Bu blogdaki popüler yayınlar

SQL DATEADD() Fonksiyonu(Sql de tarihe ay,gün,yıl ekleme)

Kullanım Kalıbı : DATEADD (datepart , number , date ) . datepart ksımına month,year,day vs artırmak istediğimiz tarih birimini yazıyoruz. . number ksımına arttırmak istediğimiz miktarı yazıyoruz. . date kısmına da hangi tarih e ekleneceğini belirtiyoruz. Örnek olarak şu an ki tarihten 1 ay sonrasını görmek için : Şu anki tarih '10-1-2011' olsun(gün,ay,yıl) Sorgu : SELECT DATEADD(MONTH,+1,GETDATE()) Çıktı alacağımız tarih : '10-2-2011' şekinde olacaktır.

Cannot resolve the collation conflict between "Turkish_CI_AS" and "SQL_Latin1_General_CP1_CI_AS" in the equal to operation.

iki ayrı veri tabanı içindeki tablolar ile işlem yapılmak istendiğinde eğer dil sorunu çıkıyor ise sorgumuzun sonuna 'COLLATE TURKISH_CI_AS' sözcüğünü ekleyerek sorunu çözebiliriz.Örnek : SELECT * FROM veritabani1.dbo.URUN u1 INNER JOIN veritabani2.dbo.URUNLER u2 ON u1.kod = u2.kod COLLATE TURKISH_CI_AS umarım faydalı olmuştur.

Logo (LOJECTS.exe ve LOBJECTS.dll) Register İşlemleri

LOBJECTS.dll register işlemi : başlat-> çalıştır -> cmd yazıp konsole ekranına geçiyoruz REGİSTER İÇİN : regsvr32 logoDosyaYolu\LOBJECTS.dll yazıyoruz ve dll imizi register ediyoruz UNREGISTER İÇİN : regsvr32 -u logoDosyaYolu\LOBJECTS.dll ile de unregister edebiliriz. LOBJECTS.exe register işlemi : başlat-> çalıştır -> cmd yazıp konsole ekranına geçiyoruz REGİSTER İÇİN : logoDosyaYolu\LOBJECTS.exe -REGSERVER yazıyoruz ve LOBJECTS.exe mizi register ediyoruz. UNREGISTER İÇİN : logoDosyaYolu\LOBJECTS.exe -UNREGSERVER yazıyoruz ve LOBJECTS.exe mizi unregister ediyoruz. Umarım yararlı olmuştur.