ElectronJS nedir
ElectronJS, Html, javascript ve css yazarak masaüstü native(Windows,Mac,Linux) uygulamalar geliştirmemizi sağlar.
Github tarafından geliştirilmiştir ve açık kaynak bir kütüphanedir. Electron ile yazmış olduğunuz uygulama, Chromium web tabanlı bir tarayıcıda açılarak uygulamanızı çalıştırır. Geliştirme süreçlerinde dev-tools ve debug eklentilerini uygulamamıza dahil ederek yazılım tarafında kendimize kolaylıklar sağlayabiliriz.
Electron en temelde iki yapıdan oluşmaktadır bunlar “Main” ve “Render Processes” .
Main tarafında Electronu kapatıp açmak ve menü işlemleriyle alakalı modüller bulunur.
Main modülü olan browser-window tarafında Render modülü ile birlikte web uygulamasını ayağa kaldırmaya yarar.
fak ufak ilk uygulamamızı yapmaya başlayalım.
Projemize başlarken yazacağımız klasörde terminali açarak node.js projesinde gerekli olacak olan package.json dosyasını oluşturalım.
npm initElectronu projemize ekleyelim .
npm install --save-dev electronPackage.json dosyamızın bu şekilde olması gerekmektedir.
{“name”: “electronanalyst”,“version”: “1.0.0”,“description”: “”,“main”: “main.js”,“scripts”: {“start”: “electron .”},“author”: “”,“license”: “ISC”,“dependencies”: {“electron”: “⁷.0.0”,“electron-chrome-extension”: “⁴.0.3”}}
Electron yüklendiğine göre artık kodlamaya hazırız. Şimdi main.js dosyası oluşturalım ve yazmaya başlayalım.
Öncelikle electron node modülünü main.js içerisinde kullanacağımızı belirtmeliyiz.
const electron = require("electron");— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
const {app,BrowserWindow} = require(‘electron’)function createWindow() {// Açılacak olan pencerenin özelliklerini belirtelim.let win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})// Uygulamada açılacak olan html dosyamızı verelim.win.loadFile(‘index.html’)}app.on(‘ready’, createWindow)
createWindow() ile uygulamızı açarkenwin.loadFile() ile yayınlayacak olduğumuz index.html dosyasını vererek uygulamamızı hazır hale getirelim.
index.html
<!DOCTYPE html><html><head><meta charset=”UTF-8" /><title>ElectronDeneme</title></head><body><h1>Electron Medium</h1>Bu yazımda sizlerle Electron masaüstü uygulama geliştirmeye giriş yaptık, okuduğunuz için teşekkürler.</body></html>
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
