Electron JS — Kurulum, İlk Uygulamamız ( Bölüm 1 )
Electron JS, NodeJS ve Chromium projelerini birleştirerek oluşturulmuş olan bir Desktop uygulaması geliştirme platformudur.
Temel olarak HTML + CSS + JS ile desktop uygulaması geliştirebilmemizi sağlar ayrıca Native Desktop API entegrasyonları sayesinde üzerinde koşulan işletim sistemi ile ilgili native GUI işlemleri de yapabiliriz. Örnek olarak Mac ortamında menüye yeni seçenekler ekleyip seçilenleri yakalayabiliriz.
Kurulum
Electron JS kurulumu için NodeJS kurulumu yapmanız gerekiyor öncelikle. Bu noktada NodeJS’in en son stabil sürüm olması tavsiye ediliyor. Bu kurulum ile hem NodeJS hem de npm kurulmuş olacak
node -v
npm -v
Komutları ile kurulumların düzgün olup olmadığını test edebilirsiniz.
NodeJS kurulumunda bilmemiz gereken önemli nokta kurduğumuz NodeJS ile Electron içinde kullanılan NodeJS’in aynı olmadıklarını bilmemiz gerektiğidir. Electron kodlarımızı kendisi ile birlikte gelen NodeJS ile çalıştırıyor ama geliştirme yaparken bizim sistemimize kurduğumuz NodeJS yardımı ile build scriptleri, webpack gibi yardımcı geliştirme ve build araçlarını çalıştırıyor.
İlk Uygulama
İlk Electron uygulamasını oluşturmak için öncelikle npm init komutunu vermemiz gerekiyor. Bu komut normalde bir npm projesi için kullanılıyor fakat biz ufak modifikasyonlar ile Electron uygulamasının kullanabileceği hale getireceğiz.
npm init tamamlandıktan sonra electron alt yapısını node modülü olarak kurabiliriz. Bunun için ;
komutunu vermemiz gerekiyor bu sayede electron dev dependency olarak kurulacak. Bu noktada önemli normal dependency değil dev dependency olarak kurmamız gerekiyor.
Sıradaki adımda npm init komutu sonrasında oluşan package.json dosyası içinde main alanında main.js dosyasını belirteceğiz ve scripts alanında “start” : “electron .” girişini yapacağız. Bu sayede npm start komutunu verdiğimiz zaman npm electron uygulamasını çalıştıracak ve electron uygulaması package.json yardımı ile kendi içerisindeki NodeJS’yi çalıştıracak. Değişiklikleri uyguladıktan sonra package.json aşağıdaki gibi görünecek.
En basit Electron uygulaması için 3 dosyanın olması yeterlidir.
package.json, main.js, index.html
package.json dosyasını bir önceki adımda oluşturduk sırada main.js dosyasını oluşturacağız, main.js en temel şekilde aşağıdaki gibi olmalıdır :
main.js Electron içindeki NodeJS tarafından çalıştırılıyor ve kodlardan da görebildiğiniz gibi BrowserWindow nesnesinden bir örnek yaratılıyor ve index.html dosyası load ettirilerek HTML render başlatılıyor. Renderi yapan Chromium kütüphanesinden özelleştirilmiş browserdir.
index.html dosyasında şu kodlar yer alıyor :
index.html dosyası ekstra bir CSS veya JS dosyası yükletmiyor fakat body kısmında embedded JS çalıştırıyor ve kodlardan da göreceğiniz üzere normal bir tarayıcıda olmayan process objesinin değerlerini ekranda gösteriyor.
Tebrikler !
Electron ile ilk uygulamamızı yazdık ! Bir sonraki yazıda Electron ortamının detaylarına gireceğiz ve bu sayede NodeJS, Chromium alt yapılarını nasıl entegre ettiğini göreceğiz ve Main process ile Renderer process kavramlarını kavrayacağız.
Bonus
Bu yazı dizisini aynı zamanda Code42 kanalında video serisi halinde bulabilirsiniz eğer vide anlatım ile daha kolay anlıyorsanız aşağıdaki video ile seriyi izlemeye başlayabilirsiniz.
