Electron, Windows, Mac ve Linux için masaüstü uygulamaları oluşturmanıza olanak tanır. Electron kullanarak bir uygulama oluşturduğunuzda, uygulamayı bir masaüstü uygulama penceresi aracılığıyla önizleyebilir ve çalıştırabilirsiniz.
Bir Angular uygulamasını normal web tarayıcısı yerine bir masaüstü penceresinde başlayacak şekilde yapılandırmak için Electron’u kullanabilirsiniz. Bunu uygulamanın kendisinde bir JavaScript dosyası kullanarak yapabilirsiniz.
Electron’u yapılandırdıktan sonra, normal bir Angular uygulamasında olduğu gibi geliştirmeye devam edebilirsiniz. Uygulamanın ana bölümleri yine aynı standart Açısal yapıyı izleyecektir.
Uygulamanızın Bir Parçası Olarak Elektron Nasıl Kurulur
Electron’u kullanmak için node.js’yi indirip yüklemeniz ve Electron’u uygulamanıza eklemek için npm kurulumunu kullanmanız gerekir.
node.js’yi indirin ve yükleyin . Sürümü kontrol ederek düzgün bir şekilde yüklediğinizi onaylayabilirsiniz:
node -v
Düğüm ayrıca JavaScript paket yöneticisi olan npm’yi de içerir . npm sürümünü kontrol ederek npm’nin kurulu olduğunu onaylayabilirsiniz:
npm -v
ng new komutunu kullanarak yeni bir Açısal uygulama oluşturun . Bu, bir Angular projesinin çalışması için gereken tüm gerekli dosyaları içeren bir klasör yaratacaktır .
ng new electron-app
Uygulamanızın kök klasöründe Electron’u kurmak için npm’yi kullanın.
npm install –save-dev electron
Bu, uygulamanın node_modules klasöründe Electron için yeni bir klasör oluşturacaktır.
Düğüm modüllerinde elektron klasörü
Electron’u bilgisayarınıza global olarak da kurabilirsiniz.
npm install -g electron
Açısal Elektron Uygulamasının Dosya Yapısı
Electron, masaüstü penceresini oluşturmak ve yönetmek için bir ana JavaScript dosyası gerektirecektir. Bu pencere, içindeki uygulamanızın içeriğini gösterecektir. JavaScript dosyası, kullanıcının pencereyi kapatması gibi meydana gelebilecek diğer olayları da içerir.
proje içindeki ana JS dosyası konumu
Çalışma zamanında, görüntülenen içerik index.html dosyasından gelir. Varsayılan olarak, index.html dosyasını src klasörünün içinde bulabilirsiniz ve çalışma zamanında bunun yerleşik bir kopyası otomatik olarak dist klasörü içinde oluşturulur.
projedeki dizin HTML dosyası konumu
index.html dosyası genellikle şöyle görünür:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> ElectronApp </title>
<base href=”./”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>
<app-root> </app-root>
</body>
</html>
Gövde etiketinin içinde bir <app-root> etiketi bulunur. Bu, Açısal uygulama için ana uygulama bileşenini görüntüler. Ana uygulama bileşenini src/app klasöründe bulabilirsiniz.
Klasördeki ana uygulama bileşeni konumu
Açısal Uygulamayı Masaüstü Penceresinde Açmak İçin Elektron Nasıl Kullanılır
main.js dosyasını oluşturun ve uygulamanın içeriğini bir masaüstü penceresinde açacak şekilde yapılandırın.
Projenizin kök dizininde main.js adlı bir dosya oluşturun . Bu dosyada, uygulama penceresini oluşturmak için kullanabilmeniz için Electron’u başlatın.
const { app, BrowserWindow } = require(‘electron’);
Belirli bir genişlik ve yükseklikte yeni bir masaüstü penceresi oluşturun. İndeks dosyasını pencerede görüntülenecek içerik olarak yükleyin. Dizin dosyasının yolunun uygulamanızın adıyla eşleştiğinden emin olun. Örneğin, uygulamanızı “electron-app” olarak adlandırdıysanız, yol “dist/electron-app/index.html” olacaktır.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile(‘dist/electron-app/index.html’);
}
Uygulama hazır olduğunda, createWindow() işlevini çağırın. Bu, uygulamanız için uygulama penceresini oluşturacaktır.
app.whenReady().then(() => {
createWindow()
})
src/index.html dosyasında , base etiketinde href niteliğini “./” olarak değiştirin.
<base href=”./”>
package.json içinde bir ana alan ekleyin ve değer olarak main.js dosyasını dahil edin. Bu, uygulamanın giriş noktası olacaktır, böylece uygulama, uygulamayı başlatırken main.js dosyasını çalıştırır.
{
“name”: “electron-app”,
“version”: “0.0.0”,
“main” : “main.js”,
….
}
.browserslistrc dosyasında, iOS safari sürüm 15.2-15.3’ü kaldırmak için listeyi değiştirin. Bu, derleme sırasında uyumluluk hatalarının konsolda gösterilmesini engelleyecektir.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3
src/app/app.component.html dosyasındaki varsayılan içeriği silin . Bazı yeni içerikle değiştirin.
<div class=”content”>
<div class=”card”>
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div>
src/app/app.component.css dosyasındaki içerik için biraz stil ekleyin .
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
}
Varsayılan kenar boşluklarını ve dolguları kaldırmak için src/styles.css dosyasına bazı genel stiller ekleyin .
html {
margin: 0;
padding: 0;
}
Elektron Uygulaması Nasıl Çalıştırılır?
Uygulamanızı bir pencerede çalıştırmak için package.json’un scripts dizisinde bir komut yapılandırın. Ardından, terminaldeki komutu kullanarak uygulamanızı çalıştırın.
package.json dosyasında , scripts dizisinin içinde, Angular uygulamasını oluşturmak ve Electron’u çalıştırmak için bir komut ekleyin. Scripts dizisindeki önceki girişten sonra bir virgül eklediğinizden emin olun.
“scripts”: {
…
“electron”: “ng build && electron .”
},
Yeni Angular uygulamanızı bir masaüstü penceresinde çalıştırmak için, projenizin kök klasöründeki komut satırında aşağıdakini çalıştırın:
npm run electron
Uygulamanızın derlenmesini bekleyin. Tamamlandığında, Angular uygulamanızın web tarayıcısında açılması yerine, bunun yerine bir masaüstü penceresi açılacaktır. Masaüstü penceresi, Angular uygulamanızın içeriğini gösterecektir.
Masaüstü penceresinde çalışma zamanında elektron
Uygulamanızı hala web tarayıcısında görüntülemek istiyorsanız, yine de ng serve komutunu çalıştırabilirsiniz.
ng serve
ng serve komutunu kullanıyorsanız, uygulamanızın içeriği bir web tarayıcısında localhost:4200 adresinde görüntülenmeye devam edecektir.
Tarayıcıda çalışma zamanında elektron
Electron ile Masaüstü Uygulamaları Oluşturmak
Electron’u Windows, Mac ve Linux’ta masaüstü uygulamaları oluşturmak için kullanabilirsiniz. Varsayılan olarak, bir Angular uygulamasını ng serve komutu aracılığıyla bir web tarayıcısı kullanarak test edebilirsiniz. Açısal uygulamanızı web tarayıcısı yerine bir masaüstü penceresinde açılacak şekilde de yapılandırabilirsiniz.
Bunu bir JavaScript dosyası kullanarak yapabilirsiniz. Ayrıca index.html ve package.json dosyalarınızı da yapılandırmanız gerekecektir. Genel uygulama, normal bir Açısal uygulama ile aynı yapıyı takip edecektir.
Masaüstü uygulamalarının nasıl oluşturulacağı hakkında daha fazla bilgi edinmek istiyorsanız, Windows Forms uygulamalarını da keşfedebilirsiniz. Windows Forms uygulamaları, C# dosyalarına herhangi bir kodlama mantığı eklerken, UI öğelerini tıklayıp bir tuval üzerine sürüklemenize olanak tanır.