Ana Sayfa
Bilgi
Electron

Electron Kurulumu ve İlk Proje

Electron Kurulumu ve İlk Proje

Electron Nedir?

Electron, geliştiricilere web teknolojilerini kullanarak masaüstü uygulamaları oluşturma imkanı veren bir framework'tur. JavaScript, HTML ve CSS gibi yaygın web dillerini kullanarak, Windows, macOS ve Linux için platformlar arası uygulamalar geliştirmeyi sağlar. Geliştiriciler için sunduğu olanaklar sayesinde, uygulama geliştirme süreci daha hızlı ve esnek hale gelir.

Electron Kurulumu

Electron kurulumunu başlatmak için Node.js'in bilgisayarınızda yüklü olması gerekir. Eğer Node.js'i henüz yüklemediyseniz, Node.js'in resmi web sitesinden indirip kurabilirsiniz.

Node.js Yükleme

Node.js'i indirmek için aşağıdaki adımları izleyebilirsiniz:

  1. Node.js'in resmi web sitesine gidin: nodejs.org
  2. İşletim sisteminize uygun sürümü indirin.
  3. İndirdiğiniz dosyayı açın ve yükleme talimatlarını izleyin.

Electron Yükleme

Node.js yükledikten sonra, terminal açarak Electron'u global olarak yükleyebilirsiniz. Aşağıdaki komutu terminale yazın:

npm install -g electron

İlk Electron Projemizi Oluşturma

Electron kurulduktan sonra, ilk projemizi oluşturmak için yeni bir klasör oluşturup içine gitmemiz gerekiyor.

Klasör Oluşturma

mkdir my-electron-app
cd my-electron-app

package.json Dosyası Oluşturma

Projemizi başlatmak için bir package.json dosyasına ihtiyacımız var. Aşağıdaki komut ile bu dosyayı oluşturabiliriz:

npm init -y

Ana Uygulama Dosyasını Oluşturma

Projemiz için bir ana dosya oluşturalım. Aşağıda main.js dosyasını oluşturup içine yazmamız gereken kodu bulabilirsiniz:

const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

HTML Dosyasını Oluşturma

Ayrıca index.html adında bir dosya oluşturarak, aşağıdaki HTML içeriğini ekleyelim:

<!DOCTYPE html>
<html>
<head>
    <title>My First Electron App</title>
</head>
<body>
    <h1>Merhaba Electron!</h1>
</body>
</html>

Uygulamayı Çalıştırma

Her şey hazır olduğunda, uygulamamızı başlatmak için terminalden şu komutu çalıştırmalıyız:

npm start

Sonuç

Artık Electron ile ilk projemizi oluşturduk ve çalıştırdık. Electron, bağımsız ve platformlar arası masaüstü uygulamaları geliştirmek isteyenler için güçlü bir araçtır. Bu makalede, kurulum adımlarını ve ilk projenin nasıl oluşturulduğunu inceledik. Geliştirdiğiniz projeleri daha da zenginleştirebilir, genişletebilir ve yeni özellikler ekleyebilirsiniz.

Yorum Gönder