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.

admin

Hi. I’m Ali. I’m 23. I graduated Mehmet Akif Ersoy University from CS Related Department.

I can code with all programming languages. But today I’m writing .NET and JavaScript.

You may also like...

  • Orkun

    Örneğin sayfamızda formdan aldığımız bilgileri js tarafında nasıl elde edeceğimizi söyler misiniz?

    • Ali

      Orkun merhaba. Standart olarak formları serialize edip (eğer jQuery ile yaparsan direkt serialize metodu) gönderebiliyorsun.

      İstersen bununla ilgili bir yazı yayınlayabilirim. Ayrıca NodeJS’in imkanlarını kullanabildiği için http.request’i kullanabileceğini düşünüyorum (https://nodejs.org/dist/latest-v4.x/docs/api/http.html#http_http_request_options_callback)

      Post etmek istemiyorsan eğer, form elemanlarına ya da herhangi bir elemana direkt erişebiliyorsun. Örneğin;

      var test = document.querySelector("#test").value

      Sormak istediğin bu ise cevabı böyle şimdilik 🙂

      • Orkun

        Cevabınız için teşekkürler.Peki bu script tagleri arasındaki kodları örneğin index.js dosyamda yazarak da kullanabilir miyim?

        • Ali

          Öncelikle rica ederim. Dediğin işlemi require ile yapabiliyorsun. Ayrıca aşağıdaki gibi bir kullanımı ben gerçekleştiriyorum. Standartı bu mu peki diye sorarsan o konuya henüz hakim değilim.

          Yazının başında belirtmemişim ama ben de bu yazı ile öğreniyorum diyebilirim. Yazıdan önce hedeflediğim uygulamayı yapıp, başarılı çalıştırdıysam bu uygulamayı yazmak gibi bir hedefim var sadece 🙂

          Script importunda kullandığım standart kod:


          http://jsdosyasi.js