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

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

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

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

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

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

1. डाउनलोड करो और इंस्टॉल करो नोड.जेएस. आप संस्करण की जाँच करके पुष्टि कर सकते हैं कि आपने इसे ठीक से स्थापित किया है:

   नोड -v

   नोड भी शामिल है npm, जावास्क्रिप्ट पैकेज मैनेजर. आप पुष्टि कर सकते हैं कि आपके पास npm संस्करण की जाँच करके npm स्थापित है:

   एनपीएम -वी

instagram viewer
2. का उपयोग करके एक नया कोणीय एप्लिकेशन बनाएं एनजी न्यू आज्ञा। यह एक फ़ोल्डर बनाएगा जिसमें सभी आवश्यक होंगे एक कोणीय परियोजना के लिए आवश्यक फ़ाइलें काम करने के लिए।

   एनजी नया इलेक्ट्रॉन-ऐप

3. अपने एप्लिकेशन के रूट फ़ोल्डर में, उपयोग करें NPM इलेक्ट्रॉन स्थापित करने के लिए।

   NPM इंस्टॉल--सेव-देव इलेक्ट्रॉन

4. यह ऐप के नोड_मॉड्यूल फ़ोल्डर में इलेक्ट्रॉन के लिए एक नया फ़ोल्डर बनाएगा।
5. आप अपने कंप्यूटर पर विश्व स्तर पर इलेक्ट्रॉन भी स्थापित कर सकते हैं।

   NPM इंस्टॉल -जी इलेक्ट्रॉन
   

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

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

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

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

<!डॉक्ट टाइप एचटीएमएल>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा वर्णसेट ="यूटीएफ-8">
<शीर्षक> इलेक्ट्रॉन ऐप </title>
<आधार href="./">
<मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1">
<लिंक रिले ="आइकन" प्रकार ="छवि/एक्स-आइकन" href="favicon.ico">
</head>
<तन>
<ऐप-रूट></app-root>
</body>
</html>

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

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

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

1. नाम के अपने प्रोजेक्ट के रूट में एक फाइल बनाएं main.js. इस फ़ाइल में, इलेक्ट्रॉन को इनिशियलाइज़ करें ताकि आप इसका उपयोग एप्लिकेशन विंडो बनाने के लिए कर सकें।

   स्थिरांक {ऐप, ब्राउजरविंडो} = ज़रूरत होना('इलेक्ट्रॉन');

2. एक निश्चित चौड़ाई और ऊंचाई की एक नई डेस्कटॉप विंडो बनाएं। अनुक्रमणिका फ़ाइल को विंडो में प्रदर्शित करने के लिए सामग्री के रूप में लोड करें। सुनिश्चित करें कि अनुक्रमणिका फ़ाइल का पथ आपके ऐप के नाम से मेल खाता है। उदाहरण के लिए, यदि आपने अपने ऐप का नाम "इलेक्ट्रॉन-ऐप" रखा है, तो पथ "dist/electron-app/index.html" होगा।

   समारोहक्रिएटविंडो() {
    जीत = नया ब्राउज़रविंडो({चौड़ाई: 800, कद: 800});
    win.loadFile('dist/electron-app/index.html');
   }

3. जब ऐप तैयार हो जाए, तो createWindow () फ़ंक्शन को कॉल करें। यह आपके ऐप के लिए एप्लिकेशन विंडो बनाएगा।

   ऐप। जब रेडी ()। तब (() => {
    क्रिएटविंडो ()
   })

4. में src/index.html फ़ाइल, में आधार टैग, href विशेषता को "./" में बदलें।

   <आधार href="./">

5. में पैकेज.जेसन, एक जोड़ना मुख्य फ़ील्ड, और मान के रूप में main.js फ़ाइल शामिल करें। यह ऐप के लिए प्रवेश बिंदु होगा, ताकि ऐप लॉन्च होते ही एप्लिकेशन main.js फ़ाइल चलाए।

   {
   "नाम": "इलेक्ट्रॉन-ऐप",
   "संस्करण": "0.0.0",
   "मुख्य": "main.js",
    ...
   }

6. में .ब्राउज़रसूचीआरसी फ़ाइल, आईओएस सफारी संस्करण 15.2-15.3 को हटाने के लिए सूची को संशोधित करें। यह संकलन करते समय संगतता त्रुटियों को कंसोल में प्रदर्शित होने से रोकेगा।

   पिछला 1 क्रोम संस्करण
   अंतिम 1 फ़ायरफ़ॉक्स संस्करण
   पिछले 2 एज प्रमुख संस्करण
   पिछले 2 सफारी प्रमुख संस्करण
   पिछले 2 आईओएस प्रमुख संस्करण
   फ़ायरफ़ॉक्स ईएसआर
   नहींios_saf 15.2-15.3
   नहींसफारी 15.2-15.3

7. में डिफ़ॉल्ट सामग्री हटाएं src/app/app.component.html फ़ाइल। इसे कुछ नई सामग्री से बदलें।

   <डिव क्लास ="विषय">
   <डिव क्लास ="कार्ड">
   <एच 2> घर </h2>
   <पी>
    मेरे कोणीय इलेक्ट्रॉन एप्लिकेशन में आपका स्वागत है!
   </पी>
   </div>
   </div>

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

   ।विषय {
    लाइन-ऊंचाई: 2rem;
   फ़ॉन्ट आकार: 1.2em;
    मार्जिन: 48px 10%;
    फ़ॉन्ट-फ़ैमिली: एरियल, सेन्स-सेरिफ़
   }
   कार्ड {
   डब्बे की छाया: 0 4पिक्सल 8पिक्सल 0 आरजीबीए(0, 0, 0, 0.2);
    चौड़ाई: 85%;
    पैडिंग: 16px 48px;
    मार्जिन: 24px 0px;
    पृष्ठभूमि-रंग: सफेद धुआं;
    फ़ॉन्ट-फ़ैमिली: सेन्स-सेरिफ़;
   }

9. इसमें कुछ समग्र स्टाइल जोड़ें src/styles.css डिफ़ॉल्ट मार्जिन और पैडिंग को हटाने के लिए फ़ाइल।

   एचटीएमएल {
    मार्जिन: 0;
    पैडिंग: 0;
   }

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

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

1. में पैकेज.जेसन, स्क्रिप्ट ऐरे के अंदर, एंगुलर ऐप बनाने और इलेक्ट्रॉन चलाने के लिए एक कमांड जोड़ें। सुनिश्चित करें कि आप स्क्रिप्ट सरणी में पिछली प्रविष्टि के बाद अल्पविराम जोड़ते हैं।

   "स्क्रिप्ट": {
    ...
   "इलेक्ट्रॉन": "एनजी बिल्ड && इलेक्ट्रॉन।"
   },

2. डेस्कटॉप विंडो में अपना नया कोणीय एप्लिकेशन चलाने के लिए, अपने प्रोजेक्ट के रूट फ़ोल्डर में कमांड लाइन में निम्नलिखित चलाएँ:

   एनपीएम रन इलेक्ट्रॉन

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

   एनजी सर्व

5. यदि आप का उपयोग कर रहे हैं एनजी सर्व आदेश, आपके ऐप की सामग्री अभी भी एक वेब ब्राउज़र में प्रदर्शित होगी लोकलहोस्ट: 4200।

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

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

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

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