Electron JS nedir ? İlk uygulamamızı oluşturalım.
Electron Js temel olarak chromium ve Node.js alt yapısına sahip açık kaynak kodlu, JavaScript, HTML ve CSS kullanarak Windows, macOS ve Linux işletim sistemleri için masaüstü uygulamalar geliştirmemizi sağlayan bir framework’tür.
Electron Js geliştirmek için gerekli ön bilgiler
Node.js ve temel web geliştirme bilgisine sahip olması.
Electron Js çalışma mantığı
Main process ve Renderer process olmak üzere iki yapı üzerine kurgulanmıştır.
Basit olarak açıklamak istersek; NodeJS tarafını “Main process”, Chromium tarafını ise “Renderer process” olarak isimlendiriyoruz.
Main process
Electron Js ile geliştirilmiş uygulamaların en az bir Main process’ı olmak zorundadır. Main process Node.js kodlarının yazılmış olduğu katmana denk gelmektedir. Özetle bu katmana Electron Js’in back-end kısmı diyebiliriz.
Renderer process
Renderer process ise Chromium tarafını temsil eder, her bir Renderer process bir Chromium tab’a denk gelir. Özetlemek gerekirse Renderer process bizim JavaScript, Html ve Css yazdığımız kısımdır. Burada istediğimiz tüm JavaScript kütüphanelerini kullanabiliriz,Vue Js, React Js, Angular vb kütüphaneleri kullanabiliriz.
IPC
Inter Process Communication kelimelerin kısaltmasıdır.Main process ve Renderer process arasındaki veri alışverişini sağlar.
İlk Uygulamızı oluşturmaya başlayalım.
ilk olarak eğer bilgisayarımızda Node.js yüklü değil ise https://nodejs.org/en/download/ adresinden Node.js indirip kuralım.Terminal üzerinden npm -v diyip Node.js yüklenip yüklenmediğini kontrol edebiliriz.
Kurulum tamamlandıktan istediğiniz dizine bir klasör oluşturup bir editör aracılığı ile açalım. (örnek resimlerde vs code kullanılmıştır)
Terminali açıyoruz ve npm init Node.js projesi oluştuyoruz ve package.json dosyamız oluşuyor.
npm init
Ardından electronjs.org’a girip en son npm i -D electron@latest komutuyla npm electron paketlerini projemize dahil ediyoruz.
main: alanı default olarak index.js olarak geliyor, onu main.js olarak değiştiriyoruz, ve package.json dosyamızın bağımlılıklarına electron eklenmiş oluyor.
Not : Bilgisayarımızda kurulu olan Node.js sürümü ile Electron JS üzerindeki Node.js sürümü farklı olabilir.
main.js dosyamızı oluşturmadan önce “scripts” nesnesinin değerini Node.js ile başlatmak istediğim için
“start”:”electron .” olarak değiştiriyorum. Daha sonra main.js dosyamı uygulamamın ana dizininde oluşturuyorum.
en başa const olarak electron,url,path Node.js modüllerini import ediyoruz.
const {app,BrowserWindow} = electron; yazarak electron js üzerindeki iki objeyi kullanıyoruz.
app.on(‘ready’,() => {
})
yazarak ise uygulama başladığında çalışacak olan olan kodları yazıyoruz.
yukarıda tanımladığımız “mainWindow” değişkenine new BrowserWindow()’u atıyoruz ve loadURL methoduna projemizde oluşturduğumuz “firstpage.html” dosyasının url adresini veriyoruz, tabi direkt olarak “https://www.google.com/” gibi bir adreste verebiliriz.
son olarak npm start yaparak projemizi çalıştırıyoruz. Sol menü barımıza uygulamamızın iconu ve yukarıya Electron’un varsayılan menü yapısıda geliyor, tabiki istediğimiz gibi menü yapısını özelleştirebiliyoruz.
html dosyamızın içeriğini ve son proje yapımızı göstereyim
daha sonraki yazılarımda görüşmek üzere.
