Web Sitenizi Bilgisayar Programına Dönüştürün ( MacOS , Linux ,Windows )

VinciSoft · 17 May 2021

Web sitenizi Electron çerçevesine dayalı yerel bir masaüstü uygulamasına dönüştürür . Herhangi bir programlama dili öğrenmeden, bu belgeleri izleyerek macOS, Windows ve Linux uygulamanızı birkaç dakika içinde oluşturabilirsiniz.

Kurulum Aşamaları ;

Uygulama URL'sini değiştirin

Proje klasörünüzde config.js dosyasını açın. WebsiteUrl değerini değiştirin .

[CODE title="Config.js"]//Site Url
'websiteUrl' : 'https://forum.turkmmo.com',[/CODE]

Uygulama adını değiştir

Öncelikle, uygulama kök dizinindeki package.json dosyasının ad özniteliğini değiştirmeniz gerekir .

Kod:

"name": "New_App_Name",

Uygulama açıklamasını değiştir

Öncelikle uygulama kök dizini package.json açıklama özniteliğini değiştirmeniz gerekir .

Kod:

"description": "Convert Website to a Desktop application",

Genişliği ve yüksekliği değiştirin

Uygulama config.js dosyanızı açın, ardından yükseklik, genişlik, minHeight ve minWidth değerlerini değiştirin.

Kod:

 //Uygulama Pencere Boyutları
    'width' : 1280,
    'height' : 800,
    'minWidth' : 1280,
    'minHeight' : 800,

Uygulama Simgesi değişikliği

Tüm uygulama Simgeleri, build klasöründe bulunur. Aynı adı kullanarak resimleri değiştirin.

Yerel sayfaları yeniden tasarlayın veya düzenleyin

Uygulamanızın tüm yerel web sayfaları (Hakkında, İletişim ve Yükleme sayfası) public dizinde bulunur. Düzenlemek istediğiniz sayfalardan herhangi birini açabilir ve tercihinize göre değişiklik yapabilirsiniz.

Ana / Sağ menüyü özelleştirin

İki menü türü vardır

Ana uygulama menüsü - menu-config.js
Sağ menü - right-menü-config.js

Yerel sayfaları menüye bağlayın

Öncelikle uygulamanızın ortak klasöründe bir .html sayfası oluşturun. Aşağıdaki biçimi kullanarak, yeni oluşturduğunuz html sayfası dosya adı değerinizin değerlerini değiştirin.

Kod:

{label : 'Home', click : () => { require('./main')("home") }},
{label : 'About', click : () => { require('./main')("about") }},

Yeni bir menü bölümü ekle - (Ana menü)

Aşağıdaki kod bloğu için kopyalayıp yapıştırın ve ihtiyaç duyduğunuzda değerleri değiştirin.

Kod:

{
label: 'New_Menu_Name',
submenu: [
{role : 'reload'},
{role : 'zoomIn'},
{role : 'zoomOut'},
]
},

Kullanılabilir Menü Rolleri Listesi

Kod:

Undo, redo, cut, copy, paste, pasteAndMatchStyle, delete, selectAll, reload, forceReload, toggleDevTools, resetZoom, zoomIn, zoomOut, togglefullscreen, window, minimize, close, help, about, services, hide, hideOthers, unhide, quit, startSpeaking, stopSpeaking, close, minimize, zoom, front, appMenu, fileMenu, editMenu, viewMenu, recentDocuments, toggleTabBar, selectNextTab

Web sitesi öğelerini gizle

Uygulamanıza yerel bir görünüm verin. Web sitenizin unsurlarını tercih ettiğiniz gibi gizleyebilirsiniz. Bunu yapmak için config.js dosyasını açın .

Ardından, sınıf veya kimlik değerinizi virgülle ayırarak ekleyebilirsiniz.

Kod:

//Hide elements by ID

'hideElementsId' : ['id_1', 'id_2', 'id_3'],



//Hide elements by Class

'hideElementsClass' : ['class_1', 'class_2', 'class_3'],

Test Olarak Uygulamayı Çalıştırın

Proje klasörünüzde komut (cmd) satırı araçlarını açın.

Öncelikle bilgisayarınızın Node.js letest sürümünü kurmanız gerekir

Aşağıdaki komutu çalıştırın.

Kod: