इस ट्यूटोरियल में हम इलेक्ट्रॉन और वेब तकनीकों जैसे टाइपस्क्रिप्ट और एंगुलर के साथ एक क्रॉस-प्लेटफ़ॉर्म डेस्कटॉप एप्लिकेशन बनाएंगे।
इलेक्ट्रॉन.जेएस क्रॉस-प्लेटफ़ॉर्म बनाने के लिए एक लोकप्रिय मंच है डेस्कटॉप ऐप्स के लिये विंडोज, लिनक्स तथा मैक ओएस साथ जावास्क्रिप्ट , एचटीएमएल , तथा सीएसएस . इसे बनाया और बनाए रखा है GitHub और यह एमआईटी अनुमेय लाइसेंस के तहत उपलब्ध है। इसे शुरुआत में GitHub के लिए बनाया गया था परमाणु संपादक , लेकिन तब से इसका उपयोग जैसी कंपनियों द्वारा एप्लिकेशन बनाने के लिए किया जाता है माइक्रोसॉफ्ट (विजुअल स्टूडियो कोड), फेसबुक , ढीला , तथा डाक में काम करनेवाला मज़दूर .
इलेक्ट्रॉन जैसे शक्तिशाली प्लेटफार्मों का उपयोग करता है गूगल क्रोमियम तथा Node.js , बल्कि अमीरों का अपना समूह भी प्रदान करता है शहद की मक्खी अंतर्निहित ऑपरेटिंग सिस्टम के साथ बातचीत करने के लिए।
इलेक्ट्रॉन एक देशी कंटेनर प्रदान करता है जो लपेटता है वेब ऐप्स इसलिए वे दिखते और महसूस करते हैं डेस्कटॉप ऐप्स ऑपरेटिंग सिस्टम सुविधाओं तक पहुंच के साथ (इसी तरह कॉर्डोबा के लिये मोबाईल ऐप्स ) इसका मतलब है कि हम कोई भी उपयोग कर सकते हैं जावास्क्रिप्ट पुस्तकालय या ढांचा हमारा निर्माण करने के लिए आवेदन . इसमें ट्यूटोरियल , हम उपयोग करेंगे कोणीय .
आवश्यक शर्तें
इस ट्यूटोरियल के लिए, आपको इन पूर्वापेक्षाओं को पूरा करना होगा:
- से पहचान टाइपप्रति तथा कोणीय .
- Node.js और npm आपकी विकास मशीन पर स्थापित हैं।
कोणीय सीएलआई स्थापित करना
आइए शुरू करते हैं स्थापना कोणीय सीएलआई , जो बनाने और काम करने के लिए आधिकारिक उपकरण है कोणीय परियोजनाओं . एक नया टर्मिनल खोलें और निम्न कमांड चलाएँ:
npm install -g @angular/cli हम स्थापित करेंगे कोणीय सीएलआई हमारे सिस्टम पर विश्व स्तर पर। यदि आदेश के साथ विफल रहता है पहुंच त्रुटि, जोड़ें |_+_| आपके आदेश से पहले लिनक्स या मैक ओएस , या कमांड प्रॉम्प्ट को an . के रूप में चलाएँ विंडोज़ में व्यवस्थापक .
यदि सीएलआई सफलतापूर्वक स्थापित हो गया है, तो अपनी कार्यशील निर्देशिका पर नेविगेट करें और एक नया बनाएं कोणीय परियोजना निम्नलिखित आदेशों का उपयोग करना:
sudoअपनी परियोजना की फ़ाइलों के उत्पन्न होने और निर्भरताएँ स्थापित होने की प्रतीक्षा करें समुद्र तल के ऊपर . इसके बाद, अपने प्रोजेक्ट के रूट पर नेविगेट करें और के नवीनतम संस्करण को स्थापित करने के लिए निम्न कमांड चलाएँ इलेक्ट्रॉन से समुद्र तल के ऊपर विकास निर्भरता के रूप में:
cd ~ ng new electron-angular-demo इस लेखन के रूप में, यह आदेश स्थापित होगा इलेक्ट्रॉन v4.1.4 .
यह भी पढ़ें: नोड और रिएक्ट के साथ एक बेसिक सीआरयूडी ऐप बनाएं
इसके बाद एक |_+_| . बनाएं फ़ाइल और निम्न कोड जोड़ें:
npm install --save-dev electron@latest यह कोड केवल एक GUI विंडो बनाता है और |_+_| . को लोड करता है फ़ाइल जो |_+_| . के अंतर्गत उपलब्ध होनी चाहिए फ़ोल्डर बनाने के बाद हम अपना कोणीय अनुप्रयोग . यह उदाहरण कोड से अनुकूलित है आधिकारिक स्टार्टर रिपोजिटरी .
इसके बाद |_+_| . खोलें अपने प्रोजेक्ट की फ़ाइल और |_+_| . जोड़ें |_+_| . सेट करने के लिए कुंजी मुख्य प्रवेश बिंदु के रूप में फ़ाइल:
main.jsअगला, हमें कोणीय परियोजना के निर्माण के बाद इलेक्ट्रॉन ऐप को आसानी से शुरू करने के लिए एक स्क्रिप्ट जोड़ने की आवश्यकता है:
const {app, BrowserWindow} = require('electron') const url = require('url'); const path = require('path'); let mainWindow function createWindow () { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) mainWindow.loadURL( url.format({ pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true }) ); // Open the DevTools. mainWindow.webContents.openDevTools() mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) app.on('activate', function () { if (mainWindow === null) createWindow() }) हमने |_+_| . जोड़ा स्क्रिप्ट जो |_+_| . चलाती है आदेश:
- |_+_| कमांड का हिस्सा एंगुलर ऐप बनाता है और आधार href को |_+_| पर सेट करता है।
- |_+_| कमांड का हिस्सा हमारे इलेक्ट्रॉन ऐप को वर्तमान निर्देशिका से शुरू करता है।
अब, अपने टर्मिनल में, निम्न कमांड चलाएँ:
index.htmlएक इलेक्ट्रॉन जीयूआई विंडो खुल जाएगी, लेकिन खाली रहेगी। कंसोल में, आप देखेंगे स्थानीय संसाधन लोड करने की अनुमति नहीं है: /electron-angular-demo/dist/index.html त्रुटि।
इलेक्ट्रॉन |_+_| . से फ़ाइल लोड करने में असमर्थ है फ़ोल्डर क्योंकि यह बस मौजूद नहीं है। यदि आप अपने प्रोजेक्ट के फ़ोल्डर में देखते हैं, तो आप देखेंगे कि कोणीय सीएलआई आपके ऐप को |_+_| . में बनाता है सिर्फ |_+_| . के बजाय फ़ोल्डर फ़ोल्डर।
हमारे में |_+_| फाइल, हम बता रहे हैं इलेक्ट्रॉन देखने के लिए |_+_| फ़ाइल में |_+_| सबफ़ोल्डर के बिना फ़ोल्डर:
dist|_+_| वर्तमान फ़ोल्डर को संदर्भित करता है जिससे हम इलेक्ट्रॉन चला रहे हैं।
हम |_+_| . का उपयोग करते हैं |_+_| . के साथ वर्तमान फ़ोल्डर के पथ में शामिल होने की विधि पथ।
आप या तो पथ के दूसरे भाग को |_+_| . में बदल सकते हैं या, बेहतर अभी तक, फाइलों को आउटपुट करने के लिए कोणीय विन्यास को बदलें |_+_| सबफ़ोल्डर का उपयोग किए बिना फ़ोल्डर।
सेंटोस 8 . पर क्रोम स्थापित करें
|_+_| . खोलें फ़ाइल खोजें |_+_| कुंजी और इसके मान को |_+_| . से बदलें बस के लिए |_+_|:
package.jsonअपने टर्मिनल पर वापस जाएँ और फिर से निम्न कमांड चलाएँ:
mainस्क्रिप्ट कॉल करेगी |_+_| बनाने की आज्ञा कोणीय ऐप में |_+_| फ़ोल्डर, और कॉल |_+_| वर्तमान फ़ोल्डर से शुरू करने के लिए इलेक्ट्रॉन के साथ खिड़की कोणीय ऐप लदा हुआ।
यह हमारे का स्क्रीनशॉट है desktop ap पी चल रहा है कोणीय :
कोणीय से इलेक्ट्रॉन एपीआई को कॉल करना
आइए अब देखें कि हम एंगुलर से इलेक्ट्रॉन एपीआई को कैसे कॉल कर सकते हैं।
यह भी पढ़ें: Node.js, ExpressJs, MongoDB और Vue.js (MEVN स्टैक) एप्लिकेशन ट्यूटोरियल
इलेक्ट्रॉन ऐप्स चल रही एक मुख्य प्रक्रिया का उपयोग करें Node.js और एक रेंडरर प्रक्रिया चल रही है क्रोमियम ब्राउज़र . हम सभी को सीधे एक्सेस नहीं कर सकते इलेक्ट्रॉन के एपीआई से कोणीय ऐप .
हमें IPC का उपयोग करने की आवश्यकता है या अंतःप्रक्रम संचार , जो विभिन्न प्रक्रियाओं के बीच संचार की अनुमति देने के लिए ऑपरेटिंग सिस्टम द्वारा प्रदान किया गया एक तंत्र है।
सभी नहीं इलेक्ट्रॉन एपीआई मुख्य प्रक्रिया से एक्सेस करने की आवश्यकता है। कुछ एपीआई को रेंडरर प्रक्रिया से एक्सेस किया जा सकता है, और कुछ एपीआई को मुख्य और रेंडरर दोनों प्रक्रियाओं से एक्सेस किया जा सकता है।
ब्राउज़रविंडो , जिसका उपयोग ब्राउज़र विंडो बनाने और नियंत्रित करने के लिए किया जाता है, केवल मुख्य प्रक्रिया में उपलब्ध है। NS डेस्कटॉपकैप्चरर एपीआई (|_+_| एपीआई का उपयोग करके डेस्कटॉप से ऑडियो और वीडियो को कैप्चर करने के लिए प्रयुक्त) केवल रेंडरर प्रक्रिया में उपलब्ध है। इस बीच क्लिपबोर्ड एपीआई (सिस्टम क्लिपबोर्ड पर कॉपी और पेस्ट ऑपरेशन करने के लिए) मुख्य और रेंडरर दोनों प्रक्रियाओं पर उपलब्ध है।
आप की पूरी सूची देख सकते हैं शहद की मक्खी से आधिकारिक दस्तावेज़ .
आइए |_+_| . को कॉल करने का एक उदाहरण देखें एपीआई, केवल मुख्य प्रक्रिया में उपलब्ध है कोणीय ऐप .
|_+_| . खोलें फ़ाइल और आयात |_+_|:
main.jsइसके बाद |_+_| . को परिभाषित करें समारोह:
{ 'name': 'electron-angular-demo', 'version': '0.0.0', 'main': 'main.js', // [...] } यह विधि एक चाइल्ड मोडल विंडो बनाएगी, |_+_| . लोड करें इसके अंदर URL, और तैयार होने पर इसे प्रदर्शित करें।
यह भी पढ़ें: नोड, एक्सप्रेस, React.js, Graphql और MongoDB CRUD वेब अनुप्रयोग
इसके बाद, एक |_+_| . सुनें संदेश जो रेंडरर प्रक्रिया से भेजा जाएगा और |_+_| संदेश प्राप्त होने पर कार्य करें:
{ 'name': 'electron-angular-demo', 'version': '0.0.0', 'main': 'main.js', 'scripts': { 'ng': 'ng', 'start': 'ng serve', 'build': 'ng build', 'test': 'ng test', 'lint': 'ng lint', 'e2e': 'ng e2e', 'start:electron': 'ng build --base-href ./ && electron .' }, // [...] } अब, |_+_| . खोलें फ़ाइल और निम्न आयात जोड़ें:
start:electronइसके बाद, एक |_+_| . परिभाषित करें चर और कॉल |_+_| आयात करने के लिए |_+_| आपके कोणीय घटक में:
ng build --base-href ./ && electron .|_+_| विधि को इलेक्ट्रॉन द्वारा रेंडरर प्रक्रिया में रनटाइम पर इंजेक्ट किया जाता है और इस तरह, यह केवल तभी उपलब्ध होगा जब आपका वेब अनुप्रयोग में इलेक्ट्रॉन .
यह भी पढ़ें: WebSocket + Node.js + Express — टाइपस्क्रिप्ट का उपयोग करके चरण-दर-चरण ट्यूटोरियल
अंत में, निम्नलिखित जोड़ें |_+_| तरीका:
ng build --base-href ./हम |_+_| . का उपयोग करते हैं की विधि |_+_| भेजने के लिए |_+_| मुख्य प्रक्रिया के लिए संदेश।
|_+_| . खोलें फ़ाइल और एक बटन जोड़ें, फिर उसे |_+_| तरीका:
./अब, निम्न आदेश का उपयोग करके अपना डेस्कटॉप ऐप चलाएं:
लार्वा 2 कारक प्रमाणीकरण
electron .यह एक बटन के साथ मुख्य विंडो का स्क्रीनशॉट है:
आप इस डेमो का सोर्स कोड इस से पा सकते हैं गिटहब भंडार .
निष्कर्ष
इस ट्यूटोरियल में, हमने देखा कि a को कैसे चलाया जाता है? वेब अनुप्रयोग के साथ बनाया गया कोणीय लीजिये Electron.js . का उपयोग कर डेस्कटॉप एप्लिकेशन . हमें उम्मीद है कि आपने सीखा होगा कि शुरुआत करना कितना आसान हो सकता है डेस्कटॉप ऐप्स बनाना आपके साथ वेब विकास टूलकिट!
#इलेक्ट्रॉन #कोणीय #टाइपस्क्रिप्ट #वेब-विकास
www.sitepoint.com
Electron.js . के साथ क्रॉस-प्लेटफ़ॉर्म डेस्कटॉप ऐप बनाएँ
इस ट्यूटोरियल में हम इलेक्ट्रॉन और वेब तकनीकों जैसे टाइपस्क्रिप्ट और एंगुलर के साथ एक क्रॉस-प्लेटफ़ॉर्म डेस्कटॉप एप्लिकेशन बनाएंगे।