🧝🏾 🍪 🤸🏻 दोस्तों इलेक्ट्रॉन और वेबिक्स कैसे बनाये ☪️ ✴️ 🤼

परिचय

दिन का अच्छा समय! मैं इलेक्ट्रॉन और वेबिक्स के संयोजन का उपयोग करके डेस्कटॉप जावास्क्रिप्ट एप्लिकेशन बनाने में अपने व्यक्तिगत अनुभव को आपके साथ साझा करना चाहता हूं। इस तरह की एक बंडल आपको इंटरफ़ेस के लेआउट की प्रक्रिया को तेज करने की अनुमति देती है, खासकर लेआउट और अन्य वेब चीजों पर समय बर्बाद किए बिना जो कि वेबिक्स फ्रेमवर्क कर सकता है।

उपकरण

तो चलिए शुरू करते हैं, हमें निम्नलिखित उपकरणों की आवश्यकता होगी:

एक संपादक जिसमें हम अपना कोड सीधे लिखेंगे। मैं दृश्य स्टूडियो कोड (VSC) का उपयोग करूंगा, जिसे यहां से लिया जा सकता है ;
Node.js सर्वर, जिसे यहाँ से लिया जा सकता है । इसे डाउनलोड करें और इंस्टॉल करें;
वेबिक्स फ्रेमवर्क एक नि: शुल्क संस्करण है (वेबिक्स स्टैंडर्ड जीएनयू जीपीएलवी 3 लाइसेंस के तहत एक निशुल्क यूआई लाइब्रेरी है), जिसे हम यहां से लेते हैं। वेबनिक्स . com/get-webix-gpl । इसे डाउनलोड करने के लिए, आपको ऊपर दिए गए लिंक पर जाना होगा, एक ईमेल दर्ज करना होगा, पहला और अंतिम नाम, तीन चेकमार्क डालें, क्लिक करें, और फिर आपके मेल पर एक डाउनलोड लिंक भेजा जाएगा।

सामान्य तौर पर, वह सब जो हमें चाहिए।

आवश्यक उपकरण स्थापित करें

तो, हम सीधे निर्माण के लिए आगे बढ़ते हैं:

1. "नोड.जेएस" स्थापित करें। मैं यहां नहीं रुकता। मुझे यकीन है कि आप मेरे बिना ऐसा कर सकते हैं।

2. एक फ़ोल्डर बनाएं जिसमें हम अपना कोड लिखेंगे - उदाहरण के लिए electron_webix (चित्र। 1)।

अंजीर। 1 - एक कार्यशील फ़ोल्डर बनाना

3. VSC लॉन्च करें और इस फ़ोल्डर को खोलें (छवि 2)।

अंजीर। 2 - कार्यशील फ़ोल्डर

खोलें 4. "सीटीआर +` "कुंजी संयोजन के साथ वीएससी टर्मिनल खोलें और" एनपीएम इनिट "कमांड दर्ज करें, जो हमारे" नोड.जेएस "प्रोजेक्ट को आरंभ करेगा। जिसके बाद सिस्टम विभिन्न और बहुत उपयोगी प्रश्नों का एक गुच्छा मांगेगा, जिनका उत्तर देना आवश्यक नहीं है। फिर हम "एंटर" बटन पर हर समय आत्मविश्वास से दबाते हैं और कुछ भी बुरा नहीं सोचते हैं (चित्र 3)।

अंजीर। 3 - परियोजना का प्रारंभ

5. सीधे इलेक्ट्रॉन ही स्थापित करें। हम VSC कंसोल में कमांड "npm install --save-dev इलेक्ट्रॉन" क्यों दर्ज करते हैं, तब हम बैठते हैं और तब तक इंतजार करते हैं जब तक कि सब कुछ स्थापित न हो जाए (चित्र 4)।

अंजीर। 4 - इलेक्ट्रॉन की स्थापना

कार्यक्षेत्र संगठन

अब हम कार्यक्षेत्र के संगठन की ओर मुड़ते हैं। पहली चीज़ जो हमें करने की ज़रूरत है वह है कई फ़ोल्डर्स और फ़ाइलें बनाना जो हम बिना नहीं कर सकते (चित्र 5):

“libs” फ़ोल्डर, यहाँ हम “Webix” साइट से डाउनलोड की गई फ़ाइलों को डालते हैं;
".vscode" फ़ोल्डर, यहाँ हम JSC फ़ाइल डालते हैं जो VSC में हमारे एप्लिकेशन को चलाएगी;
फ़ाइल "main.js", मुख्य फ़ाइल जो हमारे इलेक्ट्रॉन एप्लिकेशन को चलाएगी;
"index.html" फ़ाइल में हमारी सामग्री और मार्कअप होगा;
फ़ाइल "रेंडरर.जेएस", हमारे आवेदन का ईवेंट हैंडलर। Index.html के साथ मिलकर काम करता है;
फ़ाइल "launch.json", फ़ोल्डर ".vscode" में "FSC" बटन का उपयोग करके "VSC" वातावरण में हमारे कोड को चलाने के लिए आवश्यक फ़ाइल;
फ़ाइल "style.css", इस फ़ाइल में हमें अभी भी कुछ शैलियों को पंजीकृत करना है ताकि हमारी खिड़की सभ्य दिखे।

अंजीर। 5 - आवश्यक फ़ोल्डर और फ़ाइलें

प्रारंभिक सामग्री के साथ कार्यक्षेत्र भरें

चलो कार्यक्षेत्र को "launch.json" फ़ाइल से भरना शुरू करते हैं, जिसका उपयोग कंसोल से किसी भी अतिरिक्त कमांड के बिना "VSC" वातावरण में हमारे एप्लिकेशन को लॉन्च करने के लिए किया जाता है।
"Launch.json" फ़ाइल की सामग्री यहाँ से ली गई थी । यहां हम इस फ़ाइल की सामग्री में नहीं करेंगे, बस इसे कॉपी करें और इसे सहेजें। फ़ाइल की सामग्री नीचे प्रस्तुत की गई है (चित्र 6)।

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

अंजीर। 6 - "VSC" वातावरण में "launch.json" फ़ाइल

अगला, हमें "package.json" फ़ाइल को सही करने की आवश्यकता है, जो "npm init" कमांड चलने पर स्वचालित रूप से बनाई गई थी। इसे दो लाइनों में बदलना होगा जैसा कि नीचे दिखाया गया है (चित्र 7):

इस तरह का एक "पैकेज.जॉन" था:

  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

यहाँ एक पैकेज है। आगजनी:

{
  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

अंजीर। 7 - "VSC" वातावरण में "package.json" फ़ाइल

अब हम "main.js" फ़ाइल को भरने की ओर मुड़ते हैं , यहाँ से इसकी सामग्री की प्रतिलिपि बनाएँ । डालें और सहेजें।

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

function createWindow () {
  //   .
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  //   .
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
//  API       .
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  //       macOS    
  //    ,       Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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

// In this file you can include the rest of your app's specific main process
// code.            require.

अंजीर। 8 - "VSC" वातावरण में "main.js" फ़ाइल

जिसके बाद हम अंत में अपने आवेदन के "F5 कुंजी" का पहला लॉन्च कर सकते हैं। तो, "F5" दबाएं और यहां यह हमारी विंडो (छवि 9) है।

अंजीर। 9 - फ़ाइल "main.js" "VSC" वातावरण में।

हम अंजीर में क्या देखते हैं। 9? यह बाईं ओर हमारे एप्लिकेशन का कार्य क्षेत्र है, और दाईं ओर डिबगिंग टूल है।

अब index.html फ़ाइल में प्रारंभिक मार्कअप बनाएँ। "VSC" में निम्नलिखित क्यों करें: फ़ाइल को "index.html" =>> "दर्ज करें" खोलें! => और "दर्ज करें" = और फिर जादू और निम्न परिणाम पर क्लिक करें:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

खैर, जैसा कि "" टैग के बीच कोड लिखने की सबसे अच्छी परंपरा है, "हैलो वर्ल्ड !!!" टेक्स्ट डालें।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello world!!!
</body>
</html>

जिसके बाद हम फिर से "F5" दबाने की कोशिश करते हैं और जाँचते हैं कि सब कुछ हमारे लिए काम करता है (चित्र 10)

अंजीर। 10 - "हैलो वर्ल्ड !!!" विंडो

अब हमें webix.zip संग्रह से "कोडबेस" फ़ोल्डर की संपूर्ण सामग्री निकालने की जरूरत है, जिसे हमने डाउनलोड किया और इसे अपने लिबास फ़ोल्डर (चित्र 11) में स्थानांतरित कर दिया।

संग्रह खोलें, कोडबेस फ़ोल्डर पर जाएं, इसकी सामग्री लें और इसे libs पैक में स्थानांतरित करें।

अंजीर। 11 - "libs" फ़ोल्डर की सामग्री "libs" फ़ोल्डर

की सामग्री को भरने के बाद, "renderer.js" फ़ाइल खोलें और उसमें निम्नलिखित लिखें:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
// ,              
webix.ui({
})

अगला, हम अपना इंटरफ़ेस टाइप करने जा रहे हैं। यहां क्यों जाएं डिज़ाइनर ।webix.com/ welcome "क्विक स्टार्ट" बटन पर क्लिक करें और आगे इंटरफ़ेस के लेआउट पर जाएँ। उदाहरण के लिए, जैसे कि चित्र 12 में दिखाया गया है।

अंजीर। 12 - वेबिक्स वेब डिज़ाइनर में इंटरफ़ेस का लेआउट

चित्र 12 में दिखाया गया लेआउट बहुत सरल है और इसमें वांछित तत्व को डिजाइनर कार्यक्षेत्र में खींचने और छोड़ने में शामिल है। कंस्ट्रक्टर का सही हिस्सा तत्वों के गुणों के संपादन के लिए है। जब लेआउट पूरा हो जाता है (छवि 13), तो आपको इसे रेंडरर.जेएस फ़ाइल में स्थानांतरित करना होगा। क्यों "कोड" बटन पर क्लिक करें और पाठ के रूप में एक तैयार लेआउट प्राप्त करें। इस पाठ का चयन करें और इसे कॉपी करें।

अंजीर। 13 - लेआउट को टेक्स्ट में बदलें

उसके बाद हम "वीएससी" में "रेंडरर.जेएस" फ़ाइल खोलते हैं और कॉपी किए गए टेक्स्ट को पहले से तैयार फ़ंक्शन "वेबिक्स.यूआई" (छवि 14) में पेस्ट करते हैं।

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    { "view": "label", "label": "Elcetron +Webix its cool!"},
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40},
                    { "label": "x", "view": "button", "height": 38, "width": 40}
                ]
            },
            {
                "width": 0,
                "height": 0,
                "cols": [
                    { "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
                    {
                        "width": 0,
                        "height": 0,
                        "rows": [
                            { "template": "Hello WORLD! ", "view": "template" },
                            {
                                "url": "demo->5ea58f0e73f4cf00126e376d",
                                "type": "bar",
                                "xAxis": "#value#",
                                "yAxis": {},
                                "view": "chart"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)

अंजीर। 14 - डिज़ाइनर

सफ़र के साथ बनाए गए लेआउट को थोड़ा और जोड़ना । इसके बाद, "VSC" में हमारी पूर्व-तैयार index.html फ़ाइल को लें और खोलें और वहाँ वस्तुतः तीन पंक्तियों को जोड़ दें: और
index.html फ़ाइल निम्न रूप लेगी:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./libs/webix.css">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <script src="./renderer.js"></script>
</body>
</html>

अगला, "F5" पर क्लिक करें और वेबिक्स (चित्र 15) अंजीर से लेआउट के साथ हमारे आवेदन प्राप्त करें

। 15 - वेबिक्स से लेआउट के साथ एप्लिकेशन की कार्यशील विंडो

कुछ चिप्स जोड़ें।

सब कुछ काम करने लगता है। लेकिन मैं उस खिड़की के फ्रेम को हटाना चाहूंगा जिसकी हमें जरूरत नहीं है, जो वास्तव में हमारे डिजाइन में फिट नहीं है। हम आपके साथ एक कस्टम समाधान का उपयोग करेंगे। हम "main.js" फ़ाइल को क्यों खोलते हैं और वहां फ्रेम पैरामीटर जोड़ते हैं: BrowserWindow बनाते समय झूठा, यह ध्वज मानक मेनू और विंडो बॉर्डर को हटा देता है। इसे ऐसा दिखना चाहिए:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      nodeIntegration: true
    }
  })

"F5" पर क्लिक करें और एक फ्रेम विंडो (छवि 16) के बिना परिणाम को देखें।

अंजीर। 16 - वेबिक्स से लेआउट के साथ एप्लिकेशन की कार्यशील खिड़की यह

माउस से घटना का जवाब देने के लिए हमारी खिड़की को पढ़ाने के लिए बनी हुई है। शुरुआत में, हम शीर्षक को सक्रिय कर देंगे ताकि यह मॉनिटर विंडो के चारों ओर हमारी खिड़की को स्थानांतरित कर सके। "रेंडरर.जेएस" फ़ाइल को क्यों खोलें, इसमें दृश्य: लेबल तत्व को ढूंढें और इसमें सीएसएस जोड़ें: "हेड_विन" संपत्ति को चित्र 17 में दिखाया जाना चाहिए।

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40 },
                    { "label": "x", "view": "button", "height": 38, "width": 40}

अंजीर। 17 - दृश्य में एक शैली जोड़ना: लेबल तत्व

अब आपको इस शैली को विशेष रूप से इस उद्देश्य के लिए बनाई गई फ़ाइल में पंजीकृत करने की आवश्यकता है। फ़ाइल "style.css" खोलें और निम्न शैली बनाएँ:

.head_win {
    -webkit-app-region: drag;
}

उसके बाद हम "F5" एप्लिकेशन लॉन्च करते हैं और शीर्षक द्वारा हमारी विंडो को खींचने का प्रयास करते हैं। सब कुछ काम करना चाहिए।

अंत में, हमारा एप्लिकेशन "-, +, x" विंडो के शीर्षक बटन पर क्लिक करने का जवाब देगा। रेंडरर.जेएस फ़ाइल के अंत में निम्न कोड क्यों जोड़ें:

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

इस कोड में, "$ $ (" अधिकतम-बीटी ") फॉर्म की प्रविष्टि का अर्थ है" वेब आईडी "तत्व तक इसकी" आईडी "। इसलिए, हेडर बटन के लिए "रेंडरर.जेएस" फाइल में इन आईडी को निर्दिष्ट करना आवश्यक है, जिसे हम करेंगे जैसा कि चित्र 18 में दिखाया गया है:

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }

अंजीर। 18 - दृश्य में एक शैली जोड़ना: लेबल तत्व

यह सब अभी के लिए है। कोशिश करें कि यह काम करे। स्रोत कोड को जीथब से डाउनलोड किया जा सकता है, यहां लिंक दिया गया है । ध्यान देने के लिए धन्यवाद।