इलेक्ट्रॉन मूल बातें: एक कोणीय इलेक्ट्रॉन ऐप को कैसे कॉन्फ़िगर और चलाएं

इलेक्ट्रॉन आपको विंडोज, मैक और लिनक्स के लिए डेस्कटॉप एप्लिकेशन बनाने देता है। जब आप इलेक्ट्रॉन का उपयोग करके ऐप बनाते हैं, तो आप डेस्कटॉप एप्लिकेशन विंडो के माध्यम से ऐप का पूर्वावलोकन कर सकते हैं और चला सकते हैं।

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

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

मेरे कंप्यूटर को ठंडा कैसे करें

अपने आवेदन के हिस्से के रूप में इलेक्ट्रॉन कैसे स्थापित करें

इलेक्ट्रॉन का उपयोग करने के लिए, आपको node.js डाउनलोड और इंस्टॉल करना होगा, और अपने ऐप में इलेक्ट्रॉन जोड़ने के लिए npm इंस्टॉल का उपयोग करना होगा।

डाउनलोड करो और इंस्टॉल करो नोड.जेएस . आप संस्करण की जांच करके पुष्टि कर सकते हैं कि आपने इसे ठीक से स्थापित किया है:
```
node -v
```
नोड भी शामिल है npm, जावास्क्रिप्ट पैकेज मैनेजर . आप पुष्टि कर सकते हैं कि आपने npm संस्करण की जाँच करके npm स्थापित किया है:
```
npm -v
```
का उपयोग करके एक नया कोणीय एप्लिकेशन बनाएं नए के आज्ञा। यह एक फ़ोल्डर बनाएगा जिसमें सभी आवश्यक होंगे एक कोणीय परियोजना के लिए आवश्यक फ़ाइलें काम करने के लिए।
```
ng new electron-app
```
अपने आवेदन के रूट फ़ोल्डर में, उपयोग करें NPM Electron.
```
npm install --save-dev electron स्थापित करने के लिए
```
यह ऐप के नोड_मॉड्यूल फ़ोल्डर में इलेक्ट्रॉन के लिए एक नया फ़ोल्डर बनाएगा।
आप अपने कंप्यूटर पर विश्व स्तर पर इलेक्ट्रॉन भी स्थापित कर सकते हैं।
```
npm install -g electron 
```

कोणीय इलेक्ट्रॉन अनुप्रयोग की फ़ाइल संरचना

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

परियोजना में अनुक्रमणिका HTML फ़ाइल स्थान

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

विंडोज़ 10 अपग्रेड के बाद इंटरनेट धीमा

index.html फ़ाइल आमतौर पर इस तरह दिखती है:

<!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>

बॉडी टैग के अंदर एक टैग होता है। यह कोणीय अनुप्रयोग के लिए मुख्य ऐप घटक प्रदर्शित करेगा। आप इसमें मुख्य ऐप घटक पा सकते हैं src/app फ़ोल्डर।

डेस्कटॉप विंडो में एंगुलर एप्लिकेशन खोलने के लिए इलेक्ट्रॉन का उपयोग कैसे करें

main.js फ़ाइल बनाएं, और इसे डेस्कटॉप विंडो के अंदर एप्लिकेशन की सामग्री खोलने के लिए कॉन्फ़िगर करें।

नाम के अपने प्रोजेक्ट के रूट में एक फाइल बनाएं main.js . इस फ़ाइल में, इलेक्ट्रॉन को इनिशियलाइज़ करें ताकि आप इसका उपयोग एप्लिकेशन विंडो बनाने के लिए कर सकें।
```
const { app, BrowserWindow } = require('electron');
```
एक निश्चित चौड़ाई और ऊंचाई की एक नई डेस्कटॉप विंडो बनाएं। अनुक्रमणिका फ़ाइल को विंडो में प्रदर्शित करने के लिए सामग्री के रूप में लोड करें। सुनिश्चित करें कि अनुक्रमणिका फ़ाइल का पथ आपके ऐप के नाम से मेल खाता है। उदाहरण के लिए, यदि आपने अपने ऐप का नाम 'इलेक्ट्रॉन-ऐप' रखा है, तो पथ 'dist/electron-app/index.html' होगा।
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
जब ऐप तैयार हो जाए, तो createWindow () फ़ंक्शन को कॉल करें। यह आपके ऐप के लिए एप्लिकेशन विंडो बनाएगा।
```
app.whenReady().then(() => { 
  createWindow() 
})
```
में src/index.html फ़ाइल, में आधार टैग, href विशेषता को './' में बदलें।
```
<base href="./">
```
में पैकेज.जेसन , एक जोड़ना मुख्य फ़ील्ड, और मान के रूप में main.js फ़ाइल शामिल करें। यह ऐप के लिए प्रवेश बिंदु होगा, ताकि ऐप लॉन्च होने पर एप्लिकेशन main.js फ़ाइल चलाए।
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
में .ब्राउज़रसूचीआरसी फ़ाइल, आईओएस सफारी संस्करण 15.2-15.3 को हटाने के लिए सूची को संशोधित करें। यह संकलन करते समय संगतता त्रुटियों को कंसोल में प्रदर्शित होने से रोकेगा।
```
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 
```
में डिफ़ॉल्ट सामग्री हटाएं src/app/app.component.html फ़ाइल। इसे कुछ नई सामग्री से बदलें।
```
<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>
```

सामग्री के लिए कुछ स्टाइल जोड़ें src/app/app.component.css फ़ाइल.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

इसमें कुछ समग्र स्टाइल जोड़ें src/styles.css डिफ़ॉल्ट मार्जिन और पैडिंग को हटाने के लिए फ़ाइल।
```
html { 
  margin: 0; 
  padding: 0; 
}
```

इलेक्ट्रॉन एप्लिकेशन कैसे चलाएं

अपने एप्लिकेशन को विंडो में चलाने के लिए, package.json के स्क्रिप्ट ऐरे में कमांड को कॉन्फ़िगर करें। फिर, टर्मिनल में कमांड का उपयोग करके अपना ऐप चलाएं।

इमेज पर पहले मैसेज पर कैसे जाएं

में पैकेज.जेसन , स्क्रिप्ट ऐरे के अंदर, एंगुलर ऐप बनाने और इलेक्ट्रॉन चलाने के लिए एक कमांड जोड़ें। सुनिश्चित करें कि आप स्क्रिप्ट सरणी में पिछली प्रविष्टि के बाद अल्पविराम जोड़ते हैं।
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
डेस्कटॉप विंडो में अपना नया कोणीय एप्लिकेशन चलाने के लिए, अपने प्रोजेक्ट के रूट फ़ोल्डर में कमांड लाइन में निम्नलिखित चलाएँ:
```
npm run electron
```
अपने आवेदन के संकलन के लिए प्रतीक्षा करें। एक बार पूरा हो जाने पर, वेब ब्राउज़र में आपका एंगुलर ऐप खुलने के बजाय, इसके बजाय एक डेस्कटॉप विंडो खुलेगी। डेस्कटॉप विंडो आपके एंगुलर ऐप की सामग्री दिखाएगी।
यदि आप अभी भी वेब ब्राउज़र में अपना एप्लिकेशन देखना चाहते हैं, तो भी आप एनजी सर्व कमांड चला सकते हैं।
```
ng serve
```
यदि आप का उपयोग कर रहे हैं सेवा का आदेश, आपके ऐप की सामग्री अभी भी एक वेब ब्राउज़र में प्रदर्शित होगी लोकलहोस्ट: 4200।

इलेक्ट्रॉन के साथ डेस्कटॉप अनुप्रयोगों का निर्माण

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

आप इसे एक जावास्क्रिप्ट फ़ाइल का उपयोग करके कर सकते हैं। आपको अपनी index.html, और package.json फ़ाइलों को भी कॉन्फ़िगर करने की आवश्यकता होगी। समग्र अनुप्रयोग अभी भी एक नियमित कोणीय अनुप्रयोग के समान संरचना का पालन करेगा।

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