Nasıl Electron Uygulaması Yazarım

Merhaba. Daha önceden github üzerinde bir repo oluşturdum. Bu repo, electron uygulaması ile yapılan (yapılacak olan) bir todo list uygulaması.

/images/posts/electron.svg Logo: https://github.com/electron/electron

Gereksinimler

Başlamadan önce bazı gereksinimlerin kurulu olması gerekiyor. Şu anda son KARARLI sürümün 1.6.9 olmasından yola çıkarak basit bi package.json dosyası hazırlayalım. Bu işe başlamadan önce bi kaç şeyi açıklığa kavuşturalım ve sonra buna göre json dosyamızı yazalım. NPM ile alakalı olanları buraya yazmıyorum. Sadece scriptlerin npm üzerinden yönetimi kolaylaştırdığını bilin.

KeyValue
nameUygulamanızın adı.
productNameUygulamanızın ürün adı. Aslında Buraya açıklama yazmasanız da olur.
versionUygulamanız şu anda hangi sürümde?
mainElectron uygulamasının entry pointi. Kodların bu dosya olması beklenir.

Bunlar haricinde devDependencies için electron ~ 1.6.9 olsa iyi olur. Genel itibariyle package.json dosyamıza bakarsak şöyle oluyor:

Paket bilgilerini yazdıktan sonra aşağıdaki komutları verelim. Bu komut bağımlılıkları yükleyip, electron uygulamamızı başlatacaktır.

Bu arada henüz herhangi bir home.js dosyası yazmadık. Dolayısıyla da electron’a dair bir uygulama da elimizde bulunmamakta. O zaman uygulamamızın entry pointini yazalım.

Kodlama Evresi

Öncelikle direkt olarak katı kurala sahip proje yapısı yok. Bir web sitesi kodluyormuş gibi electron uygulaması yazabilirsiniz. Örneğin;

Basit bir tree böyle olsun işte. Bu tamamen sizin hayal gücünüze bağlı. Ben angular ve Vue.JS kullandığımı da söyleyebilirim. Sanırım kafanızda az uz fikirler oluştu.

/images/posts/homer.png

Entry Point Yazalım

Lafı gevelemeden home.js dosyasını oluşturalım. OLuşturduğumuz bu dosyaya öncelikle gerekli kütüphaneleri dahil edelim. NodeJS biliyorsunuzdur zaten.

Bu let win ne ola?

/images/posts/shocked.jpg

Yukarıdaki çocuk gibi bir şaşkınlığınız olmayacaktır muhtemelen, yazıda görsel olsun diye koydum onu. Bu let win olayı tamamen garbage collectionla alakalı. Bunu yaparak global bi referansını elimizde tutuyoruz. Hafıza kalıyor yani. Aksi durumda az önce de değindiğin garbage collectiondan dolayı pencere kapanacaktır. Ve bu açıkcası hızlı oluyor.

Şimdi asıl önemli nokta pencerenin nasıl yaratılacağıdır. Bunun için basit bir JavaScript fonksiyonu yazmanız yeterli. Ama bu koda değinelim. Öncelikle kodumuza bir bakalım:

Yukarıdaki pencereYarat fonksiyonu, electron ile gelen BrowserWindow nesnesini kullanacağımız, entry pointin hangi dosyayı çağıracağını belirteceğimiz ve bazı spesifik ayarları belirtebileceğimiz bir fonksiyon.

Bu fonksiyonun içerisinde global tanımlı win nesnemiz de yer almakta. Burada ayrıca bildiğimiz eventlar da yer almakta. Aslında biz şu an için sadece closed eventini görüyor olsak bile kullanabileceğinizi bilin.

Yeni bir nesne yaratmak için aşağıdaki kodu kullanacağımızı zaten belirttik.

Bu kod BrowserWindow nesnesinin yükseklik ve genişliğine ait varsayılan değerleri temsil etmektedir. Kısacası uygulama 800×600 boyutlarında açılacaktır. Dilerseniz bunu değiştirebilirsiniz. Ayrıca win.setFullScreen(BOOLEAN DEĞER) kullanılarak full screen olup olmadığını ayarlayabilirsiniz.

Bilseniz iyi olur

BrowserWindow

KeyValue
win.setFullScreen(true)Uygulamayı full ekran yapar, buna toolbar vs. dahil
win.maximize()Uygulamayı maksimum boyutta başlatır. Tam ekran yapmaz

Bir diğer önemli kısım ise loadURL fonksiyonu. Standart olarak gelen örneğimizde kod şu şekildedir:

Burada yer alan protocol sizin için adeta hayat kurtarır nitelikte. Olay zaten bir browser olduğundan bu kısma yabancılık duymayacaksanız.

Eğer protocol standart olarak file: şeklinde ise, local olarak bu projenin kendi dizininde ya da herhangi bir yerde yer alan bir dosyayı çağırırsınız. Bu local dosya çağırma yöntemidir. Ayrıca slashes değeri true olursa sizin yerinize protokol slashlarını koyar.

Basit Bir Web Tarayıcısı

Dilerseniz herhangi bir web sitesini de çağırabilirsiniz. Bu durumda pathname ve protocol değerlerinde değişiklik yapmamız gerekiyor:

Upps kendi tarayıcımızı yaptık. Neden olmasın ki. Hiç denemedim ama muhtemelen webkit tabanlı olduğundan iş görür gibi.

Projemiz şu an hala çalışabilir vaziyette değil ancak ilk paylaşılan kod parçacığına bakarsak win.webContents.openDevTools(); gibi bir kodu gördük. Geliştirici araçlarını otomatik olarak getirir. Buraya dair çok fazla bilgi vermeye gerek yok. Zaten yukarıda yer alan açıklama satırlar bu işleri yapıyor.

Uygulamadan Çıkış

Uygulama hazır durumda olduğunda pencereyi yani daha doğrusu pencereYarat fonksiyonunu şöyle çağıralım:

Uygulamaya gerçek bi exit işlemi gerçekleştirmek için tarayıcılarda da işe yarayan CTRL / CMD + Q ya da CTRL / CMD + W kombinasyonlarını handle edip, tüm pencereleri kapatmamız gerekiyor. macOS için uyarıları varmış. Eğer kullanıcı açıkca CMD + Q yapmazsa uygulamalar ve menü çubukları aktif kalırmış. Kullanmadığım için bilgim yok.

Son bir adım. Yine macOS’tan bahsediliyor. Eğer ki başka herhangi bir açık pencere yok ise yani global win nesnemiz null durumda ise activate eventini kullanmak yaygın bir yöntemmiş.

İlk index.html Dosyası

Eğer local olarak dosya çağırıyorsanız HTML dosyanızı aşağıdaki yazabilirsiniz. Burada NodeJS’e has fonksiyonelliğin tadını çıkarabilirsiniz.

Uygulamayı Çalıştıralım

İlk aşamada da bahsettiğimiz şeyleri orayı atladıysanız burada tekrar yapabiliriz.

Tüm hepsi bu kadar. Okuduğunuz için teşekkür ederim. Yanlışlarım var ise aşağıdan bildirirseniz sevinirim.