ElectronJS İlk Proje

ElectronJS İlk Proje

ElectronJS İlk Proje

  7 dakika Okuma Süresi
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', () => {
    const 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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ElectronJS Örnekleri</title>
    </head>
    <body>
        <h1>Hello World !</h1>
    </body>
</html>
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.

Projemizi bu halde çalıştırdığınızda şöyle bir ekran gelmesi gerekmektedir;
ElectronJS İlk Proje
Bu ekranı gördüyseniz sorun yok demektir ve yazıyı sonlandırabiliriz. 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 electron = require('electron');
const { app, BrowserWindow } = 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.


  • İçeriği Paylaş:

İÇERİĞİ DEĞERLENDİR

Toplam Değerlendirme Sayısı: 0
Toplam Değerlendirme: 0 / 5

Cevap Yaz