🤹🏻 ⏏️ 🙌🏽 इलेक्ट्रॉन: एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके डेस्कटॉप एप्लिकेशन विकसित करना 🧜🏽 🧘🏻 👩🏻‍🤝‍👨🏽

क्या एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके डेस्कटॉप एप्लिकेशन बनाना संभव है? लेख के लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, इस सवाल का एक सकारात्मक जवाब देता है। यहां वह डेस्कटॉप ऑपरेटिंग सिस्टम के लिए क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन बनाने के लिए, वेब प्रौद्योगिकियों का उपयोग करने और इलेक्ट्रॉन ढांचे की क्षमताओं का उपयोग करने के बारे में बात करेंगे।

इलेक्ट्रॉन

इलेक्ट्रॉन HTML, सीएसएस और जावास्क्रिप्ट का उपयोग करके डेस्कटॉप अनुप्रयोगों को विकसित करने के लिए एक रूपरेखा है। ऐसे एप्लिकेशन विभिन्न प्लेटफार्मों पर चल सकते हैं। उनमें से विंडोज, मैक और लिनक्स हैं।

इलेक्ट्रॉन क्रोमियम और Node.js परियोजनाओं पर आधारित है, जो अनुप्रयोगों को प्रदान करने वाले एकल वातावरण में संयुक्त है। यह डेस्कटॉप कार्यक्रमों के विकास में वेब प्रौद्योगिकियों का उपयोग करना संभव बनाता है।

इलेक्ट्रॉन एक गंभीर परियोजना है जिसका उपयोग कई लोकप्रिय अनुप्रयोगों को बनाने के लिए किया गया था। इनमें स्काइप और डिसॉर्डर मैसेंजर, विजुअल स्टूडियो कोड और एटम कोड के संपादकों के साथ-साथ 700 से अधिक एप्लिकेशन शामिल हैं , जिनके बारे में जानकारी इलेक्ट्रॉन वेबसाइट पर प्रकाशित हुई है।

इलेक्ट्रॉन फोर्ज

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

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

इसके अलावा, इलेक्ट्रॉन फोर्ज विधानसभा और अनुप्रयोगों की पैकेजिंग को सरल करता है। वास्तव में, इस उपकरण में कई अन्य उपयोगी विशेषताएं हैं, जिनके बारे में आप इसके प्रलेखन से सीख सकते हैं।

इलेक्ट्रॉन फोर्ज का उपयोग करके एक सरल इलेक्ट्रॉन अनुप्रयोग विकसित करने की प्रक्रिया पर विचार करें।

प्रारंभिक तैयारी

इलेक्ट्रॉन फोर्ज का उपयोग करके इलेक्ट्रॉन अनुप्रयोगों को विकसित करना शुरू करने के लिए, आपको Node.js प्लेटफ़ॉर्म स्थापित करने के साथ एक सिस्टम की आवश्यकता होगी। आप इसे यहाँ डाउनलोड कर सकते हैं ।

विश्व स्तर पर इलेक्ट्रॉन फोर्ज को स्थापित करने के लिए, आप निम्न कमांड का उपयोग कर सकते हैं:

npm install -g electron-forge

एक अस्थायी आवेदन बनाना

इलेक्ट्रॉन फोर्ज का उपयोग करके एक टेम्प्लेट एप्लिकेशन बनाने के लिए, निम्नलिखित कमांड निष्पादित करें:

 electron-forge init simple-desktop-app-electronjs

यह कमांड एक नए एप्लिकेशन प्रोजेक्ट को इनिशियलाइज़ करता है, जिसका नाम simple-desktop-app-electronjs । इस कमांड को पूरा होने में कुछ समय लगेगा। टेम्प्लेट एप्लिकेशन बनने के बाद, आप इसे इस तरह से शुरू कर सकते हैं:

 cd simple-desktop-app-electronjs npm start

यहाँ हम इसके फोल्डर में जाते हैं और संबंधित npm स्क्रिप्ट को कॉल करते हैं।

उसके बाद, एक विंडो खुलनी चाहिए, जिसकी सामग्री निम्न आकृति में दर्शाई गई के समान है।

इलेक्ट्रॉन फोर्ज एप्लीकेशन विंडो

आइए बात करते हैं कि यह एप्लिकेशन कैसे काम करता है।

टेम्पलेट अनुप्रयोग संरचना

इलेक्ट्रॉन फोर्ज द्वारा बनाई गई टेम्प्लेट एप्लिकेशन बनाने वाली सामग्री को फ़ाइलों और फ़ोल्डरों के एक समूह द्वारा दर्शाया गया है। आवेदन के सबसे महत्वपूर्ण घटकों पर विचार करें।

▍फाइल पैकेज। Json

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

config.forge फ़ाइल config.forge आप इलेक्ट्रॉन के लिए विशिष्ट सेटिंग्स पा सकते हैं। उदाहरण के लिए, make_targets अनुभाग में Windows ( win32 ), Mac ( darwin ), और Linux ( linux ) प्लेटफार्मों के लिए प्रोजेक्ट बिल्ड लक्ष्यों का वर्णन करने वाले उपखंड शामिल हैं।

package.json आप निम्नलिखित प्रविष्टि पा सकते हैं: "main": "src/index.js" , जो इंगित करता है कि आवेदन के लिए प्रवेश बिंदु src/index.js पर स्थित फ़ाइल है।

▍Src / index.js फ़ाइल

package.json में जानकारी के अनुसार, मुख्य एप्लिकेशन स्क्रिप्ट index.js । इस स्क्रिप्ट को चलाने वाली प्रक्रिया को मुख्य प्रक्रिया कहा जाता है। यह प्रक्रिया एप्लिकेशन को नियंत्रित करती है। इसका उपयोग एप्लिकेशन इंटरफ़ेस के निर्माण में किया जाता है, जो ब्राउज़र की क्षमताओं पर आधारित है। यह ऑपरेटिंग सिस्टम के साथ बातचीत करने की जिम्मेदारी भी उठाता है। एप्लिकेशन इंटरफ़ेस वेब पृष्ठों द्वारा दर्शाया गया है। रेंडरर प्रक्रिया वेब पेजों के आउटपुट और उनके कोड के निष्पादन के लिए जिम्मेदार है।

Rendering मुख्य प्रक्रिया और प्रतिपादन प्रक्रिया

मुख्य प्रक्रिया का लक्ष्य BrowserWindow ऑब्जेक्ट के उदाहरण का उपयोग करके ब्राउज़र विंडो बनाना है। यह ऑब्जेक्ट वेब पेज के संचालन को व्यवस्थित करने के लिए रेंडरिंग प्रक्रिया का उपयोग करता है।

प्रत्येक इलेक्ट्रॉन एप्लिकेशन में केवल एक मुख्य प्रक्रिया हो सकती है, लेकिन कई प्रतिपादन प्रक्रियाएं हो सकती हैं। इसके अलावा, आप मुख्य प्रक्रिया और प्रतिपादन प्रक्रियाओं के बीच बातचीत स्थापित कर सकते हैं, लेकिन हम इस बारे में यहां नहीं बोलेंगे। यहाँ एक इलेक्ट्रॉन-आधारित अनुप्रयोग की वास्तुकला का एक आरेख है जो मुख्य प्रक्रिया और दो प्रतिपादन प्रक्रियाओं को दर्शाता है।

इलेक्ट्रॉन अनुप्रयोग वास्तुकला

यह आरेख दो वेब पेजों को दिखाता है - index.html और abcd.html । हमारे उदाहरण में, केवल एक पृष्ठ का उपयोग किया जाएगा, जो index.html फ़ाइल द्वारा दर्शाया गया है।

▍ src / index.html फ़ाइल

BrowserWindow की स्क्रिप्ट index.html फ़ाइल को BrowserWindow एक नए उदाहरण में BrowserWindow । यदि आप सरल शब्दों में इस प्रक्रिया का वर्णन करते हैं, तो यह पता चलता है कि index.js एक नई ब्राउज़र विंडो बनाता है और index.html वर्णित पृष्ठ को लोड करता index.html । यह पृष्ठ अपनी ही प्रतिपादन प्रक्रिया में चलता है।

▍ index.js फ़ाइल का पार्स कोड

index.js के लिए कोड अच्छी तरह से टिप्पणी की है। इसके सबसे महत्वपूर्ण भागों पर विचार करें। तो, createWindow() फ़ंक्शन का निम्न कोड टुकड़ा BrowserWindow ऑब्जेक्ट का एक उदाहरण बनाता है, इस ऑब्जेक्ट द्वारा BrowserWindow गई विंडो में index.html फ़ाइल को लोड करता है, और डेवलपर टूल खोलता है।

 //   . mainWindow = new BrowserWindow({ width: 800, height: 600, }); //       index.html. mainWindow.loadURL(`file://${__dirname}/index.html`); //   . mainWindow.webContents.openDevTools();

एक तैयार एप्लिकेशन में, कोड की एक पंक्ति जो डेवलपर के टूल को खोलती है, टिप्पणी करने के लिए समझ में आती है।

इस फ़ाइल के कोड में अक्सर एक app ऑब्जेक्ट होता है। उदाहरण के लिए, निम्नलिखित स्निपेट में:

 //      ,  Electron  //        . //  API       . app.on('ready', createWindow);

app ऑब्जेक्ट का उपयोग एप्लिकेशन जीवन चक्र को प्रबंधित करने के लिए किया जाता है। इस मामले में, इलेक्ट्रॉन के आरंभीकरण के पूरा होने के बाद, एप्लिकेशन विंडो बनाने के लिए जिम्मेदार फ़ंक्शन को कहा जाता है।

विभिन्न घटनाओं के होने पर अन्य कार्यों को करने के लिए app ऑब्जेक्ट का भी उपयोग किया जाता है। उदाहरण के लिए, इसकी मदद से आप एप्लिकेशन को बंद करने से पहले कुछ कार्यों के निष्पादन को व्यवस्थित कर सकते हैं।

अब जब हमने इलेक्ट्रॉन अनुप्रयोग की संरचना से खुद को परिचित कर लिया है, तो आइए ऐसे अनुप्रयोग के विकास के एक उदाहरण पर विचार करें।

डेस्कटॉप अनुप्रयोग विकास - तापमान परिवर्तक

इस प्रशिक्षण एप्लिकेशन के लिए एक आधार के रूप में, हम पहले से तैयार किए गए टेम्प्लेट प्रोजेक्ट simple-desktop-app-electronjs ।

सबसे पहले, प्रोजेक्ट फ़ोल्डर में निम्नलिखित कमांड का उपयोग करके बूटस्ट्रैप पैकेज स्थापित करें:

 npm install bootstrap --save

अब index.html फ़ाइल के लिए कोड को निम्नलिखित के साथ बदलें:

 <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>Temperature Converter</title>   <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> </head> <body>   <h1>Temperature Converter</h1>   <div class="form-group col-md-3">     <label for="usr">Celcius:</label>     <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">   </div>   <div class="form-group col-md-3">     <label for="pwd">Fahrenheit:</label>     <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">   </div>   <script src='./renderer.js'></script> </body> </body> </html>

यहां बताया गया है कि यह कोड कैसे काम करता है:

यह पहचानकर्ता celcius साथ एक पाठ क्षेत्र बनाता है। जब उपयोगकर्ता इस क्षेत्र में एक निश्चित मूल्य में प्रवेश करता है, जो डिग्री सेल्सियस में तापमान होना चाहिए, celciusToFahrenheit() फ़ंक्शन celciusToFahrenheit() ।
इस कोड में बनाए गए पहचानकर्ता fahrenheit साथ पाठ क्षेत्र, उपयोगकर्ता से डेटा प्राप्त करता है, जो कि डिग्री फ़ारेनहाइट में तापमान होना चाहिए, जिसके बाद fahrenheitToCelcius() फ़ंक्शन fahrenheitToCelcius() कहा जाता है।
celciusToFahrenheit() फ़ंक्शन तापमान को परिवर्तित करता है, डिग्री सेल्सियस में व्यक्त किया जाता है और celcius फ़ील्ड में डिग्री फ़ारेनहाइट में तापमान में प्रवेश किया जाता है, और फिर यह प्रदर्शित करता है कि यह fahrenheit फ़ील्ड में क्या निकला।
fahrenheitToCelcius() फ़ंक्शन उलटा रूपांतरण करता है - यह डिग्री फ़ारेनहाइट में व्यक्त तापमान मान लेता है और fahrenheit फ़ील्ड में दर्ज किया जाता है, इसे डिग्री सेल्सियस में व्यक्त मूल्य में परिवर्तित करता है, और फिर लिखता है कि यह elcius फ़ील्ड में क्या निकला।

हम जिन दो कार्यों के बारे में बात करते हैं, वे renderer.js फ़ाइल में घोषित किए जाते हैं। इस फ़ाइल को src फ़ोल्डर में बनाया जाना चाहिए और इसमें निम्नलिखित कोड डालना चाहिए:

 function celciusToFahrenheit(){   let celcius = document.getElementById('celcius').value;   let fahrenheit = (celcius* 9/5) + 32;   document.getElementById('fahrenheit').value = fahrenheit; } function fahrenheitToCelcius(){   let fahrenheit = document.getElementById('fahrenheit').value;   let celcius = (fahrenheit - 32) * 5/9   document.getElementById('celcius').value = celcius; }

जैसा कि आप देख सकते हैं, इनमें से प्रत्येक फ़ंक्शन संबंधित पृष्ठ फ़ील्ड का मान प्राप्त करेगा, प्राप्त मान को रूपांतरित करेगा, और लिख सकता है कि किसी अन्य फ़ील्ड में क्या हुआ है। कार्य बहुत सरल हैं, विशेष रूप से, जिन मूल्यों के साथ वे काम करते हैं, उन्हें किसी भी तरह से जांचा नहीं जाता है, लेकिन हमारे मामले में यह कोई फर्क नहीं पड़ता।

हम मानते हैं कि आवेदन तैयार है। हम इसका परीक्षण करेंगे।

एप्लिकेशन लॉन्च

एप्लिकेशन लॉन्च करने के लिए, निम्नलिखित कमांड का उपयोग करें:

 npm start

इसके सफल निष्पादन के बाद, निम्न सामग्रियों के साथ एक एप्लिकेशन विंडो खुल जाएगी।

कनवर्टर अनुप्रयोग विंडो

खेतों में विभिन्न मूल्यों को दर्ज करके आवेदन के साथ प्रयोग करें।
अब जब हमने सुनिश्चित कर लिया है कि आवेदन अपेक्षित रूप से काम करता है, तो इसे पैक करने का समय आ गया है

अनुप्रयोग पैकेजिंग

एप्लिकेशन को पैक करने के लिए, निम्नलिखित कमांड का उपयोग करें:

 npm run package

इस कमांड को निष्पादित करने के लिए सिस्टम को कुछ समय की आवश्यकता होगी। इसका काम पूरा होने के बाद, out फ़ोल्डर में देखें, जो प्रोजेक्ट फ़ोल्डर में दिखाई देगा।

यहां वर्णित इलेक्ट्रॉन एप्लिकेशन को विकसित करने में प्रयोग विंडोज चलाने वाले कंप्यूटर पर किया गया था। इसलिए, out फ़ोल्डर में, simple-desktop-app-electronjs-win32-x64 फ़ोल्डर बनाया गया था। इस फ़ोल्डर में, अन्य चीजों के अलावा, आप .exe एप्लिकेशन फ़ाइल पा सकते हैं। हमारे मामले में, इसे simple-desktop-app-electronjs.exe कहा जाता simple-desktop-app-electronjs.exe । एप्लिकेशन लॉन्च करने के लिए, इस फ़ाइल पर एक साधारण डबल-क्लिक करना पर्याप्त है।

आइए उस फ़ोल्डर के नाम का विश्लेषण करें जिसमें एप्लिकेशन की निष्पादन योग्य फ़ाइल मिली है। अर्थात्, यह टेम्पलेट - - अनुसार बनाया गया है। हमारे मामले में, इसकी संरचना निम्नानुसार है:

एप्लिकेशन का नाम simple-desktop-app-electronjs ।
प्लेटफ़ॉर्म win32 ।
आर्किटेक्चर - x64 ।

कृपया ध्यान दें कि जब आप npm run package कमांड को मापदंडों के बिना कॉल करते हैं, तो डिफ़ॉल्ट रूप से, एक एप्लिकेशन निष्पादन योग्य फ़ाइल उस प्लेटफॉर्म के लिए बनाई जाती है जो विकास के लिए उपयोग किया जाता है।

मान लीजिए कि आपको किसी अन्य प्लेटफ़ॉर्म और आर्किटेक्चर के लिए एप्लिकेशन पैकेज करने की आवश्यकता है। ऐसा करने के लिए, आप उपरोक्त कमांड के विस्तारित संस्करण का उपयोग कर सकते हैं। इस कमांड की संरचना इस प्रकार है:

 npm run package -- --platform=<platform> arch=<architecture>

उदाहरण के लिए, लिनक्स के लिए एक एप्लीकेशन पैकेज बनाने के लिए, आप निम्न कमांड का उपयोग कर सकते हैं:

 npm run package -- --platform=linux --arch=x64

अपना काम पूरा करने के बाद, संबंधित सामग्री के साथ निर्देशिका simple-desktop-app-electronjs-linux-x64 out प्रोजेक्ट फ़ोल्डर में दिखाई देगा।

एप्लिकेशन इंस्टॉलेशन फ़ाइलें बनाना

एप्लिकेशन इंस्टॉलेशन फ़ाइल बनाने के लिए, निम्न कमांड का उपयोग करें:

 npm run make

उसके काम के परिणाम पहले से ही परिचित फ़ोल्डर में होंगे। अर्थात्, इस आदेश को एक विंडोज़ मशीन पर उपरोक्त रूप में चलाने से out\make\squirrel.windows\x64 फ़ोल्डर में एक विंडोज़ एप्लिकेशन इंस्टॉलेशन फ़ाइल बन जाएगी। package कमांड की तरह, make , बिना मापदंडों के लागू किया गया, विकास के दौरान उपयोग किए जाने वाले प्लेटफ़ॉर्म के लिए एक इंस्टॉलर बनाता है।

परिणाम

इस लेख में, हमने इलेक्ट्रॉन अनुप्रयोगों की वास्तुकला की मूल बातों की जांच की और एक सरल कार्यक्रम लिखा। यदि आप इलेक्ट्रॉन के आधार पर अपने स्वयं के अनुप्रयोग को विकसित करने के बारे में सोच रहे थे, तो अब आपके पास अपने आप को जानने और विस्तार करने का मूल ज्ञान है, आप जो चाहें बना सकते हैं।

प्रिय पाठकों! क्या आप इलेक्ट्रॉन डेस्कटॉप विकास ढांचे का उपयोग करते हैं?

इलेक्ट्रॉन: एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके डेस्कटॉप एप्लिकेशन विकसित करना