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

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.

IEnumerable ile List Arasındaki Farklar

Sık kullandığımız iki tip olan IEnumerable ve List tipleri ile ilgili sürekli kullanılmasına rağmen farkının çok bilinmediğini düşünerek bu konuda kısa bir yazı yazmak istedim. Bakalım aralarında farklar nelermiş. IEnumerable bir interface iken, List yine IEnumerable sınıftan türeyen somut ( concrete) bir sınıftır. Arasındaki Farklar :  IEnumerable  - List e göre iteration çok daha hızlıdır. Performans için kullanılabilir.  - Read Only bir tip olduğu için Add, Remove gibi işlemler yapılamaz, IEnumerable ile sadece iteration, sort, filter gibi işlemler yapılabilir.  - Soyut bir class olduğu için istenen tipe somutlaştırılabilir.  - yield tipi ile birlikte kullanılabilir.(Promise veri döndürme,state-machine liste kullanımı)  - Linq sorguları veri tabanı sorgularınızın cevaplarınızı IEnumerable olarak döndürür, bu size siz ilgili IEnumerable list i iterate edene kadar ilgili sorguyu çalıştırmama performansı verir, böylece ilgili listeyi kullanmaya ihtiyacınız olmadığı bir durumda yada k

Sql Hatası : " The data types ntext and varchar are incompatible in the equal to operator. "

bu sabah böyle bir hata ile karşılaştım ilk defa karşıma çıktı :) Mesela "SELECT * FROM urunler WHERE Aciklama = 'HP NOTEBOOK' " şeklinde bir arama yaptığımızı düşünelim.Eğer "Aciklama" ntext bir tanım ise veri tabanında bu sorgu şu hatayı veriyor : "The data types ntext and varchar are incompatible in the equal to operator." Çözüm Basit :) arama işlemini "LIKE" ile yapıcaksınız :) Bu hatayı zaten kolayca çözüp giderebilirsiniz ama gördüğü her hatayı direk google a yazan arkadaşlar için bir kaynak olsun dedim :D Yeni Sorgu : SELECT * FROM urunler WHERE Aciklama LIKE 'HP NOTEBOOK' Umarım faydalı olmuştur.