Electron, Github’da mühendis olarak çalışan Cheng Zhao tarafından başlatılan açık kaynaklı bir projedir. Temel olarak popüler iki teknolojinin bir karışımıdır; Node.js ve Chromium. Chromium web sayfalarının oluşturulmasında, Node.js ise ağ ve dosya sisteminde görev alır. Birleşimleri bize Electron JS frameworkünü oluşturur.
Electron JS, HTML ve CSS ile masaüstü uygulamalar oluşturmamızı sağlayan bir frameworktür. Eğer bir web sitesi oluşturabiliyorsanız, web sitesinin masaüstü uygulamasını da oluşturabilirsiniz. Mac, Windows ve Linux ile uyumlu uygulamalar geliştirebilirsiniz. Açık kaynaklı bir framework olup, katılımcı toplulukları tarafından sürekli geliştirilir. Kendi içerisinde otomatik güncellemeler, bildirimler, kilitlenme bildirimleri, hata ayıklama ve windows yükleyicilieri bulundurur. Böylelikle dışarıdan bir paket kurmadan temel işlemleri yapabileceğiniz bir masaüstü uygulamasını rahatlıkla oluşturabilirsiniz.
Electron, temelde iki ana işlemden oluşur. Birisi main işlemi, diğeri ise renderer işlemidir. Main işleminde native modüller bulunur; örneğin uygulamayı kapatıp açmak gibi. Bir uygulamada minimize butonu tıklandığında, main tarafında bir fonksiyon çalıştırılır ve uygulama minimize olur. Main işleminin bir modülü olan browserWindow tarafından renderer işlemi oluşturulmaktadır. Renderer bir DOM (Document Object Model) oluşturur. Renderer ve main işlemi haberleşmesi işin IPC katmanı kullanılır. Bu katman rendererdan aldığı bilgiyi main işlemine iletir. Main işlemi gelen isteği gerçekleştirdikten sonra, IPC katmanına sonucu iletir. IPC katmanı sonucu renderer işlemine tekrar iletir. Örneğin, uygulamamızda bir buton var ve bu buton uygulamayı kapatıyor. Buton tıklandığında IPC katmanı devreye girer, isteği main işlemine iletir. Main işlemi gerçekleştirir ve uygulamayı kapatır.
Temelde 3 farklı electron sürümü bulunuyor. Bunlar;
Günümüzde kullandığımız birçok popüler masaüstü uygulaması electron ile geliştirildi. Bunlardan birkaç tanesi:
1 - İlk olarak bilgisayarımıza node.js kuruyoruz. Kurulum için aşağıdaki linkten bilgisayarınıza uygun olan sürümü indirebilirsiniz.
https://nodejs.org/en/download
Node.js kurulumuyla birlikte bilgisayarınızın komut istemcisinde npm komutu aktif hale gelecektir. Kontrol etmek için komut istemcisine npm -v yazarak kontrol edebilirsiniz.
2 - Bir proje dosyası oluşturun ve komut istemcisinde proje klasörünün yolunu açın.
npm init
komutu ile package.json dosyasını oluşturun.
npm i -d electron
komutu ile electronu uygulamamıza dahil edelim. Kök klasörümüze “index.js” isimli bir dosya oluşturalım. Oluşturduğumuz package.json dosyasında bulunan script alanına aşağıdaki kodu ekleyelim.
"start": "electron ."
Artık electron ile masaüstü uygulamamızı oluşturmaya başlayabiliriz. Az önce oluşturduğumuz index.js dosyası bizim main işlemlerimizi yönettiğimiz dosyamız olacak. Index dosyası içerisine bir BrowserWindow oluşturalım. Uygulamamız çalıştığında BrowserWindow çalışacak şekilde ayarlarımızı yapalım.
const electron = require('electron'); const BrowserWindow = electron.BrowserWindow; const app = electron.app; let mainWindow; async function createMainWindow() { mainWindow = new BrowserWindow({ width: 1200, // açılacak pencerenin genişliği height: 800, // açılacak pencerenin yüksekliği title: 'Electron Exmp', // açılacak pencerenin başlığı }); // pencerenin içerisinde açılacak olan html sayfasının belirlenmesi mainWindow.loadFile('./html/login.html'); } // uygulamanın başlatılması app.on('ready', createMainWindow);
index.js dosyamızı yukarıdaki örnekte gibi düzenleyip Npm start komutu ile çalıştırdığımızda, karşımıza aşağıdaki gibi bir ekran açılacaktır.
Şimdi bu ekranımızı bir login ekranı haline getirelim. Bu işlem için kök klasörümüze bir html klasörü ve içerisine login.html dosyası içeriğini aşağıdaki gibi oluşturalım ve npm start ile çalıştıralım.
<html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> <style> #mainContainer{ display: flex; background-color: cadetblue; justify-content: space-evenly; align-items: center; } .imgContainer{ width: 400; height: 300; display: flex; flex-direction: column; justify-content: space-evenly; } </style> </head> <body id="mainContainer"> <div> <img width="400" src="../images/logo.png"> </div> <div class="form-group imgContainer"> <input type="email" placeholder="Email" class="form-control"> <input type="password" placeholder="Şifre" class="form-control"> <button onclick="login()" type="button" class="btn btn-dark">Giriş Yap</button> </div> <script src="../js/renderer.js" type="application/javascript" ></script> </body> </html>
Uygulama ilk çalıştığında artık bizi bu ekran karşılıyor olacak. Buraya kadar bir main ve renderer işlemini gerçekleştirmiş olduk. Şimdi IPC katmanı sayesinde giriş yap butonu tıklandığında bir masaüstü bildirimi oluşturalım. Bunun için html dosyamızda çağırmak için kök klasörümüze js klasörü ve içerisine bir renderer.js dosyası oluşturalım.
const { ipcRenderer } = require("electron"); function login() { ipcRenderer.send('show-notification', { title: 'MDP Group', body: 'Electron uygulamamıza hoşgeldiniz' } ); }
index.js dosyamızda gerekli ayarlamaları yapalım;
const electron = require('electron'); const BrowserWindow = electron.BrowserWindow; const Notification = electron.Notification; const ipcMain = electron.ipcMain; const app = electron.app; let mainWindow; async function createMainWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, title: 'MDP Group', webPreferences: { nodeIntegration: true } // ipc katmanını kullanmak için gerekli olan ayarlama }); mainWindow.loadFile('./html/login.html') } app.on('ready', createMainWindow); // ipcMain işlemlerinin gerçekleştirdiğimiz kısım ipcMain.on('show-notification', (event, arg) => { const notification = { title: arg.title, body: arg.body } new Notification(notification).show() });
Artık bir electron uygulaması oluşturduk. Oluşturduğumuz uygulama bize bir login ekranı açtı. Ekranda bulunan “giriş yap” butonu tıklandığında, ipc katmanı, renderer ve main işlemleri haberleşti ve bir bildirim oluşturuldu.
Şimdi uygulamamızı paketleyelim ve kurulum dosyamızı oluşturalım. Bunun için gerekli olan npm paketini kurarak işe başlayabiliriz.
npm i electron-builder
Burada alternatif olarak electron-packager, electron-wix-msi paketleri kullanılabilir. Electron-builder paketinin kullanımı kolaydır; ayrıca github üzerinden uygulamanızı güncelleyebileceğiniz bir yapı içeriyor. Bu yüzden electron-builder paketini kullanmayı tercih ediyoruz.
Paket kurulduktan sonra package.json dosyamızı düzenliyoruz. Script alanına aşağıdaki kodu ekleyin.
"build": "electron-builder build –win –publish never"
Komut istemcisinde ;
npm run build
Komut çalıştırıldığında, yukarıdaki kod bloğu uygulamamızın “windows” cihazlarda kullanabilmek için “setup.exe” ve diğer gerekli dosyalarını oluşturacaktır. Komut çalıştıktan sonra kök klasörünüze dist isimli bir klasör oluşturacaktır. Bu klasör içerisinden uygulamanızı bilgisayarınıza kurabilir, uygulamanızı bir yerde paylaşarak kullanılmasını sağlayabilirsiniz.
Software Developer
Elektrikli Şarj Hizmetlerinde Faturaların Oluşturulma Süreci
Gelir İdaresi Başkanlığı (GİB) tarafından Aralık 2023 tarihinde paylaşılan "Elektrik Şarj Hizmetlerine İlişkin Fatura Teknik Kılavuzu"...
Şirketler için BT Varlık Yönetiminin Önemi
BT varlıkları, şirketlerin bel kemiğini oluşturmakta ve şirkete ait operasyonların alt yapısı için hayati önem taşımaktadır....
SAP Signavio Faydaları Nelerdir?
Teknolojinin hızla geliştiği, sürekli değişimin ve dönüşümün olduğu bir dünyada yaşamaktayız. Bu değişimler, şirketlerin iş...
SAP Signavio Process Transformation Suite Nedir?
SAP Signavio Process Transformation Suite, şirketlerin dijital dönüşüm yolculuklarını hızlandırmalarına yardımcı olacak güçlü bir...
Intralojistik (İç Lojistik) Nedir?
Lojistiği, mal ve hizmeterin üretim noktasından tüketim noktasına kadar taşınması olarak tanımlayabiliriz. Intralojistik, lojistiğe...
Uzaktan Çalışmayı Daha Verimli Hale Getirmek İçin İpuçları
Evden çalışmanın avantajları vardır, ancak kesinlikle dezavantajları da vardır. Motive olmak birçok insan için büyük bir zorluk olabilir,...
Kimler e-İrsaliye Mükellefidir?
Dijital dönüşüm çözümleri arasında en çok tercih edilen uygulamalarından biri e-İrsaliye uygulamasıdır. Ticari faaliyetlerde bulunan...
Yazılım Varlık Yönetimi Nedir?
Genellikle Software Asset Management (SAM) olarak adlandırılan Yazılım Varlık Yönetimi, yaşam döngülerinin tüm aşamaları boyunca...
SAPUI5’te Veri Bağlama (Data Binding) Nedir?
Bu blog yazımızda SAPUI5’taki veri bağlama türleri nelerdir, hangi durumlarda hangi veri bağlama türünü tercih etmeliyiz gibi soruların...
Mailiniz başarıyla gönderilmiştir en kısa sürede sizinle iletişime geçilecektir.
Mesajınız ulaştırılamadı! Lütfen daha sonra tekrar deneyin.