Electron Js Nedir ? Neler Yapılabilir ?

Herkese merhabalar. Bu yazımızda son zamanlarda uygulama geliştiriciler tarafında sıkça kullanılmaya başlanılan ve şirketlerin de hibrit platformlarda uygulama geliştirirken tercih ettiği Electron’dan bahsedip tanıtmaya çalışacağız.

Açık kaynaklı olan bu platformu kendi ifadeleriyle anlatacak olursak “Javascript, HTML ve CSS ile çapraz platform Masaüstü uygulamaları geliştir”. şeklinde bir kullanımı söz konusu. Peki nedir bu cümlenin özü ne anlama geliyor dediğinizi duyar gibiyim ya da ben kendim böyle bir soru sormuş olayım. Cevabını ise hepimizin kullandığı bir web uygulamasını Linux,Windows,MacOS yani tüm platformlara sunabiliriz. Javascript tabanlı bir yapı olduğunu belirtmiştik. Tabii ki bunun yanında React,Angular,JQuery,Vue gibi kütüphaneleri de kullanabilir ve geliştirme yapılabilir.

Peki olayı ne ? Piyasada nasıl kullanabilirim ?

Electron’un normal bir ortama göre çok çok fazla esnek olduğunu belirtmem gerekir. Node.js ve Chromium tabanlı bir uygulamadır. Bu nedenle tarayıcı(chrome,mozilla,edge vs.) için uygulama geliştirmeye çok benzerdir. Bir developer için hayati önem taşıyan debug,inspect,dev-tools gibi özelliklerin yanında build,update gibi paketler de kullanımımızda! Genelde web geliştiriciler masaüstü uygulama geliştirmesi yapmazlar. Olmaz diye bir şey yok oldu profesyonel piyasa bu. Oldu da bir iş geldi ve masaüstü platform geliştirme isteniyor. Oturup Java,C#,C öğrenmek yerine burda da yardımımıza Electron koşuyor. Kısacası zaman,performans,geliştirme maliyeti gibi aktörleri ortaya koyup düşündüğümüzde gayet avantajlı ve geliştirmesi eğlenceli bir teknoloji ile karşı karşıyayız.

Daha önce açık kaynak kodlu olduğundan bahsetmiştim. Merak eden ve incelemek isteyenler için Github repo’nu da böyle bırakayım. Çalışma mantığı render() ve main() olmak üzere 2 ana proses’ten oluşmaktadır. DOM(Document Object Model) tarafını React’tan gelenler bilir. Bunun için ayrı bir yazı hazırlayıp link vermeyi düşünüyorum. Son olarak Electron ile geliştirme yapılan uygulamalardan birkaçının Skype,Slack,TwitchiWordpress gibi çok sık karşılaştığımız uygulamalar olduğunu söyleyip daha fazla sıkmadan başlangıç uygulamamızı yapmaya geçelim.

Geliştirilen uygulamalara gerçekten çok güçlü!

Hello World !

Öncelikle geliştirme yapabilmemiz için bilgisayarımızda küçük birkaç kurulum yapmamamız gerek. Bilgisayarımızda npm kurulu olması gerekiyor. Bununla beraber bir de text editörü lazım bize. Github’un kendi geliştirdiği Atom’u kurabilirsiniz. Ben kendim Visual Studio Code kullanıyorum size de tavsiyemdir ekstraları çok fazla. Şimdi program tanıtımlarının klasik olayı Hello World ! programını bakalım. Vscode kullanıdığım için burdan devam ediyorum. Üstteki bar’dan Edit menüsü altından Terminalimizi açalım. Ardından aşağıdaki kodları satır satır kopyalayarak devam edelim.

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Şu an kendi başlangıç uygulaması olan repoyu bilgisayarımıza klonlamış olduk. npm start komutu sonucunda ekranımızda Hello World komutunu görmeyi bekliyoruz. Eğer gelmediyse buradaki adımları net bir şekilde yazmaya çalıştım. Adımları tekrarlayabilirsiniz. Gelen kodda değişiklik yapmadığımız için şimdilik ekranda yeni bir pencere açlıarak mesajımızı ekrana verecek.

Sizde kod tarafında herhangi bir değişiklik yapmamışsanız Hello World yazısı görünecektir. Bir electron uygulamasının ayağa kalkması için minimum olarak 1 tane main. js dosyamız, 1 tane package.json ve bir tane de index.html dosyası lazım. Aşağıda Main.js dosyasını örnek teşkil etmesi açısından paylaşıyorum ki ne ile uğraştığımız ne yaptığımız hakkında ufak bir fikir sahibi olabilirsiniz.

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})

Aşağı yukarı basit bir Electronjs uygulama nasıl ayağa kaldırılır, nedir, piyasadaki yeri gibi özellikleri anlatıp bilgi vermeye çalıştım. Umarım ufak da olsa biraz katkım olmuştur. Bu alanda geliştikçe güzel projeleri sizinle paylaşmaya devam etmeyi düşünüyorum. Herkese iyi öğrenmeler…

Bu arada şu an bir şey ama ileride geliştirme yapılırken bu proje üzerinden yapmayı düşünüyorum diğer projeler ve bu konu hakkında başka projelerim için Github hesabına göz atabilirsiniz. → https://github.com/sadikkaplan/Electronjs-Starter Takip zorunlu değil :)