Özgür Özer

Junior full stack developer

Electron ile Uygulama Geliştirme

Electron, 2013 yılında GitHub tarafından yayınlanıp geliştirilmeye başlanan; HTML, CSS, JS ve NodeJS kullanarak cross platform masaüstü uygulamalar yapabilmemize olanak sağlayan açık kaynak bir framework‘tür. Neler yapabileceğimizle ilgili fikir sahibi olabilmek adına Electron ile geliştirilmiş Atom, Visual Studio Code, WordPress, Ghost, Slack, Brave Browser, WebTorrent, Nylas, Postman, Zoommy gibi uygulamaları inceleyebilir veya Electron API Demos ile kullanabileceğimiz API’lara hızlıca göz atabiliriz.

Yazı üç bölümden oluşmaktadır. İlk bölümde Electron ile uygulama geliştirmek ve paketlemek için gerekli araçları temin etmeyi, ikinci bölümde HTML dosyamızı Electron uygulamamıza include etmeyi, üçüncü bölümde de yazılımsal işlerini tamamladığımız uygulamamızı paketlemeyi göreceğiz.

electron ile uygulama geliştirme

Gerekli Araçları Edinme

Gerekli modüllerin kurulumu ve Electron ile ilgili tüm işlemleri gerçekleştirebilmek için NodeJS ve NPM‘e ihtiyacımız var. Hızlı bir şekilde terminalde node -v ve npm -v komutlarını çalıştırarak NodeJS ve NPM’in sistemimizde kurulu olup olmadığını görebiliriz. Eğer kurulu değilse buraya tıklayarak işletim sistemimize uygun kurulum dosyasını indirebiliriz. NodeJS ile birlikte NPM’de otomatik olarak yükleneceği için sadece NodeJS’i kurmamız yeterli olacaktır.

Kurulum dosyası dışında eğer işletim sistemimizde kullandığımız bir paket yöneticisi (package manager) program (Mac’te Homebrew, MacPorts; Linux’ta apt-get, yum; Windows’ta Chocolatey, Scoop gibi) mevcutsa buraya tıklayarak gerekli kodları alıp çok daha hızlı bir kurulum işlemi gerçekleştirebiliriz.

NodeJS kurulumundan sonra sıra Electron‘ı, paketleme işlemini yapacağımız Electron-builder‘ı ve klasör oluşturabilmemizi sağlayan Mkdirp‘yi kurmaya geliyor. Terminale aşağıdaki komutları girip enter’lıyoruz.

#Paketleri sırayla kurabileceğimiz gibi,
sudo npm i -g electron
sudo npm i -g electron-builder
sudo npm i -g mkdirp

#Tek seferde de kurabiliriz.
sudo npm i -g electron && npm i -g electron-builder && npm i -g mkdirp

Hemen ardından proje klasörümüzü oluşturmamız ve NPM’in link (kısa haliyle ln) komutuyla paketlerimizi uygulamamıza bağlamamız gerekiyor.

#Masaüstü veya dilediğimiz bir klasöre geçiyoruz.
cd /Users/{kullanici}/Desktop

#Proje klasörümüzü oluşturuyoruz.
mkdir ilk-uygulamam

#Proje klasörümüze geçiyoruz.
cd ilk-uygulamam

#Electron'ı uygulamamıza bağlıyoruz.
npm ln electron

#Electron-builder'ı uygulamamıza bağlıyoruz.
npm ln electron-builder

#Mkdirp'yi uygulamamıza bağlıyoruz.
npm ln mkdirp

#Tüm bu 6 işlemi teker teker yapmak yerine tek bir satır kodla da yapabiliriz.
cd /Users/{kullanici}/Desktop && mkdir ilk-uygulamam && cd ilk-uygulamam && npm ln electron && npm ln electron-builder && npm ln mkdirp

Eğer kendi işletim sistemimizde farklı işletim sistemleri için uygulamalar geliştirmek istiyorsak: Örneğin Mac’te Linux uygulamaları geliştirmek için Gnutar ve Rpm veya Linux’ta Windows uygulamaları geliştirmek için Wine ve Mono gibi ekstra paketlere ihtiyacımız olacak. Kurmamız gereken paketleri öğrenebilmek için Electron-builder’ın Multi Platform Build sayfasından bilgi alabiliriz.

Electron’ı Kullanma

Gerekli ortamı hazırladığımıza göre Electron’ın nasıl çalıştırılacağına geçebiliriz. Bir Electron uygulaması için package.json, main.js ve index.html şeklinde minimum 3 dosyaya sahip olmamız gerekiyor.

Uygulama ile ilgili bilgilerin (uygulama adı, açıklaması, versiyonu, web sitesi), uygulamanın çalışması için gerekli paketlerin, uygulamanın build etme aşamasında çalıştırılacak script’lerin ve daha bir çok şeyin içerisine yazıldığı package.json dosyamızı oluşturuyoruz.

{
	"name": "ilk-uygulamam",
	"version": "0.0.1",
	"main": "main.js"
}

Pencere oluşturma, sistem olaylarını yönetme gibi işler için kullanacağımız main.js dosyamızı oluşturuyoruz.

/*Electron'ı include ediyoruz*/
const {app, BrowserWindow} = require("electron")

/*Pencere objesi için global bir referans oluşturuyoruz*/
let win

/*Electron hazır olduğunda çalışacak kodları belirliyoruz*/
function createWindow () {

	/*Tarayıcı penceresi oluşturuyoruz*/
	win = new BrowserWindow({width: 800, height: 600})

	/*Html dosyasını pencereye yüklüyoruz*/
	win.loadURL(`file://${__dirname}/app/prod/html/index.min.html`)

	/*Pencere kapatıldığında*/
	win.on("closed", () => {

		/*Pencere objesinin değerini boşaltıyoruz*/
		win = null

	})/*win.on("closed"*/

}/*function createWindow ()*/

/*Electron hazır olduğunda*/
app.on("ready", createWindow)

/*Tüm pencereler kapatıldığında*/
app.on("window-all-closed", () => {

	/*Eğer işletim sistemi Mac değilse*/
	if (process.platform !== "darwin") {

		/*Uygulamadan çıkış yapıyoruz*/
		app.quit()

	}/*if (process.platform !== "darwin")*/

})/*app.on("window-all-closed")*/

/*Uygulama aktif edildiğinde*/
app.on("activate", () => {

	/*Eğer pencere objesi boşsa*/
	if (win === null) {

		/*Uygulamayı tekrar başlatıyoruz*/
		createWindow()

	}/*if (win === null)*/

})/*app.on("activate")*/

Ve son olarak da uygulamamızın arayüzü olan index.html dosyamızı oluşturuyoruz.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>İlk Uygulamam</title>
</head>
<body>
	<h1>Merhaba Dünya!</h1>
	<p>Node versiyonu: <script>document.write(process.versions.node)</script></p>
	<p>Chrome versiyonu: <script>document.write(process.versions.chrome)</script></p>
	<p>Electron versiyonu: <script>document.write(process.versions.electron)</script></p>
	<p>Platform: <script>document.write(process.platform)</script></p>
	<script>console.log(process)</script>
</body>
</html>

Terminalden proje klasörümüze geçip electron . yazıp enter’layarak Electron uygulamamızı çalıştırabiliriz.

ilk electron uygulamam

Uygulama Paketleme

Uygulamamızın Electron içerisinde nasıl çalıştırılacağını da öğrendiğimize göre, son aşamamız olan kurulum dosyaları hazırlama kısmına geçiyoruz.

Build işlemi için package.json dosyamıza eklememiz gereken bazı parametler var. Eğer Windows için build yapmayacaksak "build" içerisindeki "win" parametresini silebiliriz.

{
	"name": "ilk-uygulamam",
	"version": "0.0.1",
	"main": "main.js",
	"description": "Uygulama açıklaması.",
	"author": "Ad Soyad <email@adresi.com>",
	"build": {
		"appId": "com.electron.$npm_package_name",
		"win": {
			"iconUrl": "https://site.com/ikon.png"
		}
	}
}

Şimdi terminalden proje klasörümüze geçip build dedikten sonra işletim sistemimizi de belirterek enter’a basıyoruz.

#Mac
build -m

#Linux
build -l

#Windows
build -w

İşletim sistemimize uygun kurulum dosyalarının ve hemen çalıştırılabilir dosyaların dist klasörüne eklendiğini görüyoruz.

electron build sonrası dizin yapısı

build komutu ile aynı anda farklı platformlar için kurulumlar ve aynı platform için farklı formatlarda dosyalar hazırlayabiliriz.

Burada dikkat etmemiz gereken şey: build komutundan sonra hata almamız durumunda, hata mesajında bizden istenen değeri package.json dosyasına girmek. Eğer Error: Please specify project homepage gibi bir hata alırsak package.json dosyamıza “homepage” adında bir parametre girmemiz gerektiğini bilmeliyiz.

build komutuyla yapabileceğimiz bazı örneklere bakalım.

#Dosyaları sıkıştırabiliriz.
build -m 7z
build -m zip
build -m tar.xz tar.lz tar.gz tar.bz2

#Dosya formatını belirleyebiliriz.
build -l AppImage
build -l deb
build -l AppImage deb freebsd

#İşlemci mimarisini belirleyebiliriz.
build -w --ia32
build -w --x64
build -w --ia32 --x64

#İşletim sistemlerini belirleyebiliriz.
build -ml
build -lw
build -mlw

#Hepsini birlikte kullanabiliriz.
build -mw --ia32
build -mlw --ia32 --x64
build -m dmg -l deb -w squirrel --x64

Uygulamayı build ettikten sonra kurulum ve hemen çalıştırılabilir dosyalarımız dist klasörüne yukarıdaki resimde de görebileceğimiz üzere düzensiz bir biçimde yerleşiyor. Daha düzenli bir hale getirmek için package.json dosyamızı aşağıdaki gibi değiştirebiliriz.

{
	"name": "ilk-uygulamam",
	"version": "0.0.1",
	"main": "main.js",
	"description": "Uygulama açıklaması.",
	"homepage": "http://site.com",
	"author": "Ad Soyad <email@adresi.com>",
	"build": {
		"appId": "com.electron.$npm_package_name",
		"files": ["**/*", "!releases"],
		"win": {
			"iconUrl": "https://site.com/ikon.png"
		}
	},
	"scripts": {
		"all": "npm run build && npm run release",
		"build": "build -mlw --ia32 --x64",
		"release": "npm run release:mac && npm run release:windows-32 && npm run release:windows-64 && npm run release:linux-32 && npm run release:linux-64",
		"prerelease:mac": "rm -rf releases/$npm_package_version/mac && mkdirp releases/$npm_package_version/mac",
		"release:mac": "cp -R dist/mac/*.dmg releases/$npm_package_version/mac/$npm_package_name-$npm_package_version.dmg",
		"prerelease:windows-32": "rm -rf releases/$npm_package_version/windows && mkdirp releases/$npm_package_version/windows",
		"release:windows-32": "cp -R dist/win-ia32/*.exe releases/$npm_package_version/windows/$npm_package_name-$npm_package_version-32.exe",
		"release:windows-64": "cp -R dist/win/*.exe releases/$npm_package_version/windows/$npm_package_name-$npm_package_version-64.exe",
		"prerelease:linux-32": "rm -rf releases/$npm_package_version/linux && mkdirp releases/$npm_package_version/linux",
		"release:linux-32": "cp -R dist/*-ia32.AppImage releases/$npm_package_version/linux/$npm_package_name-$npm_package_version-32.AppImage",
		"release:linux-64": "cp -R dist/*-x86_64.AppImage releases/$npm_package_version/linux/$npm_package_name-$npm_package_version-64.AppImage",
		"postrelease": "rm -rf dist"
	}
}

Terminalden proje klasörümüze geçip sadece npm run all komutunu çalıştırarak önce Electron-builder’ın; Mac, Linux ve Windows için build işlemi yapmasını, ardından dist klasöründen ihtiyacımız olan dosyaların düzenli bir şekilde releases klasörüne kopyalanmasını, son olarak da dist klasörünün silinmesini sağlıyoruz.

Klasör yapımız aşağıdaki gibi oluyor.

ilk-uygulamam/
├── index.html
├── main.js
├── node_modules/
├── package.json
└── releases/
	├── 0.0.1/
	├── 0.0.2/
	└── 0.0.3/
		├── linux/
			├── ilk-uygulamam-0.0.3-32.AppImage
			└── ilk-uygulamam-0.0.3-64.AppImage
		├── mac/
			└── ilk-uygulamam-0.0.3.dmg
		└── windows/
			├── ilk-uygulamam-0.0.3-32.exe
			└── ilk-uygulamam-0.0.3-64.exe

Eğer Gulp, Grunt, Broccoli veya Mimosa gibi kullandığımız bir task runner varsa build işlemini otomatik bir hale de getirebiliriz.

Son olarak; Electron ile ilgili daha fazla bilgi, API’lar ve gelişmiş konular için Documentation sayfasını, yenilikleri takip etmek için Blog sayfasını, kullanabileceğimiz ekstra araçlar ve faydalı videolar için Community sayfasını, yapılmış uygulamalar için Apps sayfasını, yeni versiyonlar için Releases sayfasını ve her türlü sorularımız için Discussion forumunu kullanabiliriz.