ElectronJS İlk Proje

Merhabalar, ElectronJS derslerimizin üçüncüsüne geçtik ve artık kod yazmaya başlayalım diyorum ve bu dersimizde artık grafiksel bir çıktı alacağız. Hadi başlayalım !

Öncelikle istediğimiz bir yerde bi klasör oluşturalım ve bu klasöre CMD (Linux ve MacOS’ta terminal) ile geçiş yapalım. Örneğin klasörümüz c:/users/kullanici/desktop/electron yolunda olduğunu varsayarsak, CMD ekranında cd c:/users/kullanici/desktop/electron komutunu girelim. Terminal ile geçiş yapmamızın sebebi, oluşturduğumuz klasörü NodeJS proje klasörü haline çevireceğiz.

npm init

komutunu girip ilgili alanları doldurduktan sonra

npm install electron

komutunu girerek ElectronJS’i indirip projemize ekleyebiliriz.

ElectronJS, NodeJS’in kurulumuyla beraber gelmediği için her proje oluşturduğumuzda tekrardan indirip kurmamız gerekiyor. Her seferinde ElectronJS’i indirmekle uğraşmayayım diyorsanız npm install -g electron komutu ile ElectronJS’i global olarak kurarak NodeJS’in paketleri arasına ekleyebilir ve sonraki zamanlarda tekrar tekrar kurma zorunluluğundan kurtulabilirsiniz. Evet ElectronJS kurulumundan sonra her modülde olduğu gibi olduğu gibi Electron modülünü de sayfada çağırmamız gerekiyor, bunun için sayfanın en başına

const electron = require('electron');

kod satırını eklememiz gerekiyor.

Ardından bizim uygulamamızın grafik arayüzü olan BrowserWindow nesnesini oluşturmamız gerekiyor. BrowserWindow sınıfı ise electron nesnesi içerisinde tutuluyor ve bunu da sayfaya getirmemiz gerekiyor. NodeJS’in en sevdiğim yönlendiren biri olan sınıf içerisinden birden fazla modülü çıkarmayı kullanarak

const { app, BrowserWindow } = electron;

kod satırıyla bizim için gerekli olan şeyleri getirtiyoruz. Sayfanın görünmesi için öncelikle programın çalışması ve hazır olması gerekiyor biliyorsunuz ki, işte bizde uygulama hazır olduğunda BrowserWindow nesnesini türetmeyi tetikleyecek ve ekranda göstereceğiz. Bunu da bir önceki satırda çağırdığımız app nesnesinin ready eventi ile yapacağız. Javascript’te event tanımlamalarını da nesne.on(‘event’, fonksiyon(){ }); şeklinde yaptığımız için aynı şekilde kullanım yapacağız. Kısacası;

app.on('ready', () => { });

Uygulamamız hazır olduğunda BrowserWindow nesnesi üreteceğiz demiştik ya, hadi onu da yapalım;

app.on('ready', () => {
    mainWindow = new BrowserWindow();
}

Projeyi şu anki haliyle terminal ekranından electron . komutu ile çalıştırdığımızda bembeyaz bir sayfanın geleceğini göreceksiniz fakat bu sayfa boş bir sayfa olacaktır, çünkü biz herhangi bir şey eklemedik. Daha önceki yazılarımızda ElectronJS sayfalarını HTML ile oluşturabildiğimizi söylemiştik ya, bizde bir Javascript dosyamızla aynı dizinde olan sayfa.html adında bir dosya oluşturalım ve içerisine

<h1>Hello World !</h1>

kodlarını yazıp kaydedelim. Bu HTML sayfamızı BrowserWindow içinde çağırmak için loadURL() fonksiyonundan faydalanacağız ve bu fonksiyon parametre olarak az önce oluşturduğumuz HTML dosyasının yolunu istiyor fakat yolu direk sayfa.html olarak verirsek dosyayı bulamayacaktır. Özellikle diğer işletim sistemlerinde sorunlar çıkacaktır. Aslında sorun ElectronJS’de değil, işletim sistemlerinin dosya yollarında olan farklılıklarından kaynaklanmaktadır.loadURL() fonksiyonu bizden URL tipinde veri istediği için, URL oluşturmaya yarayan ve NodeJS ile beraber gelen url modülünü sayfamıza ekleyelim. Bunun için sayfanın başına

const url = require('url');

kod satırını ekleyelim. URL işlemleri de olsa dizin yolu belirteceğimiz için NodeJS’de bu işlemleri yapmamızı sağlayan path modülünü de sayfaya dahil edelim ve bunun için de sayfanın başına

const path = require('path');

kod satırını ekleyelim. Şimdi dönelim loadURL() fonksiyonunu doldurmaya;

mainWindow.loadURL(
    url.format({
        pathname: path.join(__dirname, 'sayfa.html'),
        protocol: 'file:',
        slashes:true
    });
);

Şimdi satırları biraz açıklayalım. En üstteki mainWindow.loadURL() fonksiyonunu zaten biliyoruz, url.format() fonksiyonu ise parametre olarak aldığı url bilgisi objesini birleştirir ve geriye URL olarak geri döndürmektedir (url modülü ile ilgili detaylı bilgi için buraya tıklayabilirsiniz.). pathname ile dosyanın bulunduğu dizini, protocol ile URL’nin bir dosya yolu olduğunu, slashes ile de dosya yollarını birbirinden ayırmak için slash (/) işaretleri kullanılması gerektiğini belirtiyoruz. Ve az önce de dediğim gibi sonuç olarak bize sayfa.html dosyamızın yolu geri dönecek ve o yolu da loadURL() fonksiyonu içine dolduracaktır. Kodlarınız başarılı bir şekilde çalıştıysa sorun yok demektir ve bende yazıyı sonlandırabilirim. Aksi takdirde sizi yazının başına davet ediyorum 🙂 Evet bu dersimizde bu kadardı, yazdığımız tüm kodları daha toplu olması için aşağıya bırakıyorum;

const url = require('url');
const path = require('path');
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
    mainWindow = new BrowserWindow();
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'sayfa.html'),
            protocol: 'file:'
            slashes: true
        })
    };
});

Evet bu dersimizde bu kadardı, tüm ElectronJS derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.