Phenquestions
Bu makale, Electron'u yükleme ve Linux'ta basit bir "Merhaba Dünya" Elektron uygulaması oluşturmayla ilgili bir kılavuzu kapsayacaktır.
Elektron Hakkında
Electron, bağımsız bir web tarayıcısında web teknolojilerini kullanarak platformlar arası masaüstü uygulamaları oluşturmak için kullanılan bir uygulama geliştirme çerçevesidir. Ayrıca, uygulamaların daha kolay dağıtımı için işletim sistemine özel API'ler ve sağlam bir paketleme sistemi sağlar. Tipik bir Elektron uygulamasının çalışması için üç şey gerekir: Düğüm.js runtime, Electron ve OS'ye özel API'lerle birlikte gelen bağımsız bir Chromium tabanlı tarayıcı.
Düğüm Yükle.js
Düğümü yükleyebilirsiniz.Ubuntu'da aşağıdaki komutu çalıştırarak js ve “npm” paket yöneticisi:
$ sudo apt kurulum düğümü npmBu paketleri diğer Linux dağıtımlarına paket yöneticisinden kurabilirsiniz. Alternatif olarak, Node'da bulunan resmi ikili dosyaları indirin.js web sitesi.
Yeni Düğüm Oluştur.js Projesi
Düğümü yükledikten sonra.js ve "npm" için aşağıdaki komutları arka arkaya çalıştırarak "HelloWorld" adlı yeni bir proje oluşturun:
$ mkdir MerhabaDünya$ cd MerhabaDünya
Ardından, “HelloWorld” dizininde bir terminali çalıştırın ve yeni bir paketi başlatmak için aşağıdaki komutu çalıştırın:
$ npm başlangıçTerminaldeki etkileşimli sihirbazı gözden geçirin ve gerektiğinde adları ve değerleri girin.
Kurulumun bitmesini bekleyin. Artık bir “paketiniz” olmalıdır.json” dosyasını “HelloWorld” dizininde. bir "paket".json” dosyası, proje parametrelerini yapılandırmayı kolaylaştırır ve daha kolay paylaşılabilirlik için projeyi taşınabilir hale getirir.
“paket.json” dosyasında şöyle bir giriş olmalıdır:
"ana": "dizin.js"“endeks.js”, ana programınız için tüm mantığın bulunacağı yerdir. ek oluşturabilirsiniz”.js”, “.html” ve “.css” dosyalarını ihtiyaçlarınıza göre. Bu kılavuzda açıklanan “HelloWorld” programı için aşağıdaki komut gerekli üç dosyayı oluşturacaktır:
$ dokunma endeksi.js dizini.html dizini.cssElektron yükleyin
Electron'u aşağıdaki komutu çalıştırarak proje dizininize kurabilirsiniz:
$ npm elektron yükleme --save-devKurulumun bitmesini bekleyin. Electron şimdi projenize bir bağımlılık olarak eklenecek ve proje dizininizde bir “node_modules” klasörü görmelisiniz. Electron'u proje başına bağımlılık olarak kurmak, Electron'u resmi Electron belgelerine göre kurmanın önerilen yoludur. Ancak Electron'u sisteminize global olarak kurmak istiyorsanız, aşağıda belirtilen komutu kullanabilirsiniz:
$ npm elektron -g yükleyin"Paket" içindeki "komut dosyaları" bölümüne aşağıdaki satırı ekleyin.Elektron kurulumunu tamamlamak için json” dosyası:
"start": "elektron ."Ana Uygulama Oluştur
Dizini aç.js” dosyasını istediğiniz metin düzenleyicide açın ve aşağıdaki kodu ekleyin:
const app, BrowserWindow = require('elektron');function createWindow ()
const pencere = yeni BrowserWindow(
genişlik: 1600,
yükseklik: 900,
webTercihler:
nodeIntegration: true
);
pencere.loadFile('indeks.html');
uygulama.hazır olduğunda().sonra(createWindow);
Dizini aç.html” dosyasını favori metin düzenleyicinizde açın ve içine aşağıdaki kodu yerleştirin:
Selam Dünya !!
Javascript kodu oldukça açıklayıcı. İlk satır, uygulamanın çalışması için gereken gerekli Elektron modüllerini içe aktarır. Ardından, Electron ile birlikte gelen bağımsız tarayıcının yeni bir penceresini oluşturur ve “dizini” yüklersiniz.html” dosyası içinde. "dizin"deki işaretleme.html” dosyası yeni bir “Merhaba Dünya” paragrafı oluşturur !!” sarılmış”
" etiket. Ayrıca, “endekse” bir referans bağlantısı da içerir.makalenin ilerleyen kısımlarında kullanılan css” stil sayfası dosyası.
Elektron Uygulamanızı Çalıştırın
Electron uygulamanızı başlatmak için aşağıdaki komutu çalıştırın:
$ npm başlangıçŞimdiye kadar talimatları doğru bir şekilde takip ettiyseniz, şuna benzer yeni bir pencere açmalısınız:
Dizini aç.css” dosyasını açın ve “Merhaba Dünya”nın rengini değiştirmek için aşağıdaki kodu ekleyin !!” dize.
kırmızı renk;
“Merhaba Dünya”ya uygulanan CSS stilini görmek için aşağıdaki komutu tekrar çalıştırın !!” dize.
$ npm başlangıç
Artık temel bir Electron uygulamasını çalıştırmak için gereken minimum dosya setine sahipsiniz. “endeksine sahipsin”.js” program mantığını yazmak için, “index.HTML işaretlemesi eklemek için html” ve “index”.çeşitli öğeleri şekillendirmek için css”. Ayrıca bir “paketiniz” var.json” dosyası ve gerekli bağımlılıkları ve modülleri içeren “node_modules” klasörü.
Paket Elektron Uygulaması
Resmi Electron belgelerinde önerildiği gibi, başvurunuzu paketlemek için Electron Forge'u kullanabilirsiniz.
Projenize Electron Forge eklemek için aşağıdaki komutu çalıştırın:
$ npx @elektron-forge/cli@en son içe aktarmaBunun gibi bir çıktı görmelisiniz:
✔ Sisteminizi kontrol etme✔ Git Deposunu Başlatma
✔ Değiştirilmiş paket yazma.json dosyası
✔ Bağımlılıkları yükleme
✔ Değiştirilmiş paket yazma.json dosyası
✔ Sabitleme .gitignore
Uygulamanızı elektron-forge'un anlayacağı bir formata dönüştürmeye ÇALIŞTIK.
"Elektron-dövme" kullandığınız için teşekkürler!!!
Paketi gözden geçirin.json” dosyası oluşturun ve “maker” bölümlerindeki girdileri ihtiyaçlarınıza göre düzenleyin veya kaldırın. Örneğin, bir "RPM" dosyası oluşturmak istemiyorsanız, "RPM" paketlerinin oluşturulmasıyla ilgili girişi kaldırın.
Uygulama paketini oluşturmak için aşağıdaki komutu çalıştırın:
$ npm çalıştır makeBuna benzer bir çıktı almalısınız:
> merhabadü[email protected] marka /home/nit/HelloWorld> elektron dövme yapmak
✔ Sisteminizi kontrol etme
✔ Forge Config'i Çözümleme
Başvurunuzu yapabilmemiz için önce paketlememiz gerekiyor
✔ Arch: x64 için Paket Uygulamasına Hazırlanma
✔ Yerel bağımlılıkları hazırlama
✔ Paketleme Uygulaması
Aşağıdaki hedefler için yapma: deb
✔ Hedef için yapım: deb - Platformda: linux - Arch için: x64
"Paketi" düzenledim.json” dosyasını yalnızca “DEB” paketini oluşturmak için. Yerleşik paketleri proje dizininizin içindeki “out” klasöründe bulabilirsiniz.
Sonuç
Electron, işletim sistemine özgü küçük değişikliklerle tek bir kod tabanına dayalı platformlar arası uygulamalar oluşturmak için mükemmeldir. Kendine has bazı sorunları var, en önemlisi kaynak tüketimi. Her şey bağımsız bir tarayıcıda işlendiğinden ve her Electron uygulamasıyla yeni bir tarayıcı penceresi başlatıldığından, bu uygulamalar yerel işletim sistemine özel uygulama geliştirme araç setlerini kullanan diğer uygulamalara kıyasla kaynak yoğun olabilir.
