Elektron Temelleri: Bir Açısal Elektron Uygulamasını Yapılandırma ve Çalıştırma

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 penceresinden önizleyebilir ve çalıştırabilirsiniz.

Bir Angular uygulamasını normal web tarayıcısı yerine bir masaüstü penceresinde başlatılacak şekilde yapılandırmak için Electron'u kullanabilirsiniz. Bunu, uygulamanın kendi içindeki bir JavaScript dosyası kullanarak yapabilirsiniz.

samsung telefonumda bixby nedir

Electron'u yapılandırdıktan sonra, normal bir Angular uygulamasında yaptığınız 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 Electron Nasıl Kurulur

Electron'u kullanmak için node.js'yi indirip yüklemeniz ve uygulamanıza Electron eklemek için npm kurulumunu kullanmanız gerekir.

İndir ve Yükle düğüm.js . Sürümü kontrol ederek doğru şekilde kurduğunuzu onaylayabilirsiniz:
```
node -v
```
Düğüm ayrıca şunları içerir: npm, JavaScript paket yöneticisi . npm sürümünü kontrol ederek npm'nin kurulu olduğunu onaylayabilirsiniz:
```
npm -v
```
kullanarak yeni bir Angular uygulaması oluşturun. yeni emretmek. Bu, gerekli tüm bilgileri içeren bir klasör oluşturacaktır. Angular projesi için gerekli dosyalar çalışmak.
```
ng new electron-app
```
Uygulamanızın kök klasöründe şunu kullanın: npm Electron.
```
npm install --save-dev electron'yı kurmak için
```
Bu, uygulamanın node_modules klasöründe Electron için yeni bir klasör oluşturacaktır.
Electron'u bilgisayarınıza global olarak da yükleyebilirsiniz.
```
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ına ihtiyaç duyacaktır. Bu pencere, uygulamanızın içeriğini içinde gösterecektir. JavaScript dosyası, kullanıcının pencereyi kapatması gibi meydana gelebilecek diğer olayları da içerecektir.

Çalışma zamanında, görüntülenen içerik index.html dosyasından gelecektir. Varsayılan olarak, index.html dosyasını içinde bulabilirsiniz. kaynak klasör ve çalışma zamanında bunun yerleşik bir kopyası otomatik olarak içinde oluşturulur. uzak dosya.

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 etiketi bulunur. Bu, Angular uygulaması için ana uygulama bileşenini gösterecektir. Ana uygulama bileşenini şurada bulabilirsiniz: kaynak/uygulama dosya.

Masaüstü Penceresinde Açısal Bir Uygulama 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.

adlı projenizin kökünde bir dosya oluşturun. ana.js . 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. Pencerede görüntülenecek içerik olarak dizin dosyasını yükleyin. Dizin dosyasının yolunun uygulamanızın adıyla eşleştiğinden emin olun. Örneğin, uygulamanıza 'elektron-app' adını verdiyseniz, yol 'dist/elektron-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() 
})
```
İçinde kaynak/index.html dosyada, temel etiketi, href niteliğini './'.
```
<base href="./"> olarak değiştirin
```
İçinde paket.json , ekle ana alanına girin ve main.js dosyasını değer olarak ekleyin. Bu, uygulamanın giriş noktası olacaktır, böylece uygulama, app.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}'yi başlatırken main.js dosyasını çalıştırır.
```

İçinde .browserslistrc dosya, 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örünmesini engeller.

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

içindeki varsayılan içeriği silin. src/app/app.component.html dosya. Yeni bir içerikle değiştirin.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

içindeki içerik için biraz stil ekleyin. src/app/app.component.css dosya.FDE9CAEBA24E71D05A2C58FB723378D2E9YÜZ
Bazı genel stiller ekleyin kaynak/styles.css varsayılan kenar boşluklarını ve dolguları kaldırmak için dosya.
```
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 dosyasının komut dizileri dizisinde bir komut yapılandırın. Ardından, terminaldeki komutu kullanarak uygulamanızı çalıştırın.

biri seni snapchatte engellediyse

İçinde paket.json , scripts dizisinin içine, Angular uygulamasını oluşturmak ve Electron'u çalıştırmak için bir komut ekleyin. Scripts dizisindeki önceki girişten sonra 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.
Uygulamanızı hala web tarayıcısında görüntülemek istiyorsanız, yine de ng serve komutunu çalıştırabilirsiniz.
```
ng serve
```
kullanıyorsanız hizmet etmek komut, uygulamanızın içeriği hala şu adresteki bir web tarayıcısında görüntülenecektir. yerel ana bilgisayar: 4200.

Electron ile Masaüstü Uygulamaları Oluşturma

Electron'u Windows, Mac ve Linux'ta masaüstü uygulamaları oluşturmak için kullanabilirsiniz. Varsayılan olarak, ng serve komutu aracılığıyla bir web tarayıcısı kullanarak bir Angular uygulamasını test edebilirsiniz. Angular uygulamanızı bir web tarayıcısı yerine bir masaüstü penceresinde de açılacak şekilde 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 yine de normal bir Angular uygulamasıyla aynı yapıyı izleyecektir.

Masaüstü uygulamaları oluşturma 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.