Herkese merhabalar. Bu yazımızda Windows, Linux ve MacOS sistemler için aynı anda masaüstü uygulamalar geliştirmek için ortak kod yazabildiğimiz bir framework olan Electron’dan bahsedeceğiz. Electron ile hem NodeJS’in kullanımı oldukça kolay ve zengin kütüphanesinden istifade edebilmekte hem de interaktif arayüzler geliştirebilmek için React, Vue, Solid gibi kütüphaneler kullanabilmekteyiz. Yazılımcılar olarak şüphesiz en çok kullanılan uygulama olan Visual Studio Code bu teknoloji ile yazılmıştır.
Electron Nedir?
Electron ile HTML, CSS ve Javascript kullanarak masaüstü uygulamalar yazabiliyoruz. Bunu mümkün kılmak için NodeJS ve Chromium teknolojilerini barındırmaktadır. Bu sayede bir web tarayıcısına benzer bir geliştirme ortamı oluşmaktadır. Bunun getirdiği bazı komplikasyonlar ve kolaylıklar vardır. Şu şekilde sıralayabiliriz:
Electron.js Avantajları
- Web geliştirilerin aşina olduğu ve kolay adapte olabileceği bir geliştirme deneyimi sunmaktadır.
- NodeJS ekosistemini ve React.js, Vue.js, Next.js gibi frontend kütüphane ve framework’lerini kullanım imkanı sunmaktadır.
- Windows, Linux ve MacOS işletim sistemleri için tek bir kod altyapısı oluşturulmaktadır.
- Hızlı ve esnek bir geliştirme deneyimi sunarak hızlı bir şekilde sonuca ulaşılmaktadır.
Electron.js Dezavantajları
- Native uygulamara göre çok daha az performanslıdır.
- Frontend ve backend kısımlarının ayrı process’ler ile yönetilmeleri sebebiyle bunlar arasında iletişim için boilerplate kodlar yazılması gereklidir.
- İçerisinde gömülü bir şekilde Chromium ve NodeJS ile geldiğinden en basit uygulamar için dahi büyük dosya boyutları ortaya çıkmaktadır. Son çalıştırılabilir çıktılar yaklaşık olarak 1GB’dan başlamaktadır.
Electron.js Kullanımı
Electron le uygulama geliştirmeye başlamak için sisteminizde NodeJS kurulu olması yeterlidir. Projemiz için boş bir dizin oluşturduktan sonra npm init komutu ile NodeJS projemizi oluşturalım.
Ardından Node Package Manager (npm) üzerinden electron paketini indirelim. Bu paketini yalnızca geliştirme aşamasında kullacağımızdan –save-dev parametresini eklemeyi unutmayalım.
Node projemizi oluştururken belirttiğimiz entry point, yani uygulamamızın başlatılacağı dosyayı oluşturalım. Biz bu örneğimizde main.js olarak belirlemiştik. Aynı dizinde main.js dosyamızı ve ilk sayfamızı oluşturacak olan index.html dosyamızı oluşturalım.
Böylece bir pencere oluşturabilmek için gerekli minimum miktarda kodu yazmış bulunuyoruz. Burada yalnızca “Hello World!” başlığı bulunan bir html sayfası, ve bu html sayfasını tarayıcı penceresine yükleyecek bir kod yazmış olduk. İlk uygulamamızı çalıştırmak için aşağıdaki komutu çalıştıralım.
Böylelikle ilk electron.js uygulamamızı çalıştırmış olduk. Daha kolay çalıştırmak adına package.json dosyamıza bir “start” script’i ekleyelim.
Böylece npm start komutu ile uygulamamızı çalıştırabilir durumdayız. Gelin uygulamamızı sistem ile etkileşime geçecek şekilde geliştirmeye devam ekleyelim. Bir button ekleyelim ve tıklandığında bize bir mesaj kutusu göstersin. Bunun için öncelikle index.html dosyamıza bir button ekleyerek başlayalım.
Electron.js mimarisinde asıl uygulama çalıştığı NodeJS ortamında çalışırken her web sayfamız kendi alt process’lerinde çalışır. Bu sayede örneğin web sayfalarımızda oluşabilecek çalışma zamanı hatalarından asıl uygulamamız etkilenmemiş olur. Ayrıca web sayfalarımız doğruca sistem çağrılarına erişim sağlamayamazlar. Web sayfalarımızın NodeJS diğer sistem çağrılarına erişim sağlayabilmesi için bu çağrıların bir process’ler aracı iletişim (inter-process communication) tekniği ile web sayfasının bulunduğu renderer process’lerine sağlanması gerekmektedir.
Bu iletişim için preload script kullanılmaktadır. Bu script hem NodeJS ortamında hem de renderer prosessin global nesnelerine (window, document) erişimi bulunmaktadır. Bu script üzerinden ipc üzerinden ana processes ile konuşulabilir. Öncelikle ana process’imizde (main.js dosyası) bu mesajı dinleyecek bir kod yazalım.
Burada uygulamamız hazır olduğunda ipcMain modülünde show_mesaage mesajını dinleyeceğimizi ve dialog API’ı üzerinden mesaj kutusu göstereceğimizi belirtmiş olduk. Electron paketinden bu modülleri import etmeyi unutmayalım.
Ana process’imizde standart NodeJS modüllerimizi de kullanabildiğimizi hatırlatalım. Bu örnekte path modülünü de kullanacağız. Preload script‘imiz için penceremizi oluştururken kullacağımız dosyamızı da belirtiyoruz.
preload.js doyamızda contextBridge ve ipcRenderer modülleri ile showMessage fonksiyonunu barından electronAPI nesnesini global olarak tanımlıyoruz.
Böylece showMessage fonksiyonumuzu web sayfamızda bulundurduğumuz JavaScript dosyamızda kullanabilir duruma gelmiş olduk.
renderer.js dosyamızda web sayfamız yüklendiğinde button’umuzun click event’inde showMessage fonksiyonunu çağırıyoruz. Bu script dosyasını index.html dosyamıza eklemeyi unutmayalım.
Böylece uygulamamızı tamamlamış olduk 🙂
Web sayfalarımızda NodeJS fonksiyonlarını ve Electron API’larını ana processes ile konuşarak nasıl çağırabileceğimizi bir örnek ile açıklamış olduk. Artık ElectronJS ile masaüstü uygulamarını geliştirmek için gerekli temellere sahipsiniz. Bu yazıda yaptığımız örneğe GitHub üzerinden erişebilirsiniz.
