🍦 👩🏾‍🏭 ♊️ हम कोणीय पर एक क्रॉस-प्लेटफॉर्म देशी डेस्कटॉप एप्लिकेशन बनाते हैं 🗣️ 👦🏻 🔵

कोणीय nodegui

जैसा कि आप शायद पहले से ही जानते हैं, कोणीय पहले से ही कई प्लेटफार्मों पर मौजूद है:

आयनिक ( https://ionicframework.com/ )
नेटिवस्क्रिप्ट ( https://www.nativescript.org/ )
NestJs ( https://nestjs.com/ )
यूनिवर्सल ( https://github.com/angular/universal )
प्लेटफ़ॉर्म-टर्मिनल, कंसोल एप्लिकेशन ( https://github.com/Tibing/platform-terminal )

खैर, निश्चित रूप से, यहां पर्याप्त डेस्कटॉप नहीं था (चलो अभी तक इलेक्ट्रॉन के बारे में बात नहीं करते हैं)।

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

लेकिन क्या होगा अगर हम परिचित ढांचे का उपयोग करना चाहते हैं और उस पर एक देशी आवेदन करना चाहते हैं? दरअसल, मैंने यही किया है।

शुरू करने के लिए, मैंने देखा कि वर्तमान में क्या उपलब्ध है, और क्या पहले से ही कोणीय के तहत किया जा सकता है।

वास्तव में, इस तरह से मैं यह दिखाना चाहता हूं कि आप कोणीय पर कुछ भी कर सकते हैं, और कई वर्षों से मैं उसके लिए सभी तरह के काम कर रहा हूं ।

खोज

libui नोड

यह एक हल्का, पोर्टेबल जीयूआई पुस्तकालय है जो प्रत्येक प्लेटफॉर्म के लिए जीयूआई की मूल सुविधाओं का लाभ उठाता है। यह इलेक्ट्रॉन के विकल्प के रूप में आता है।

एक साधारण आवेदन उदाहरण:

const win = new libui.UiWindow('Test window', 800, 600, false);

हुड के तहत, उसके पास साधारण लिबुई बाइंडर्स हैं। (libui: C के लिए एक पोर्टेबल GUI लाइब्रेरी)। यह सब नोड-जिप के माध्यम से हो रहा है, एक उपयोगिता जिसे Node.js. के लिए देशी एक्सटेंशन को संकलित करने के लिए डिज़ाइन किया गया है। libui- नोड में 30 से अधिक तैयार घटक शामिल हैं, अच्छी तरह से, और यदि आप अचानक कुछ कस्टम बनाने का निर्णय लेते हैं, तो आपको सी में कोड में गोता लगाने की आवश्यकता होगी और इसके अलावा, घटक स्वयं 2 साल पहले लिखे गए थे, और तब से अपडेट किया गया। शायद सब कुछ इतना अच्छा है कि बदलाव करने की आवश्यकता नहीं है, और ये 30 घटक विकास के लिए पर्याप्त हैं, अच्छी तरह से, या किसी को भी परियोजना की आवश्यकता नहीं है।

ठीक है, वास्तव में, समाप्त आवेदन इस तरह लग सकता है:

libui नोड

प्रोटॉन-देशी और वुइडो

और यहाँ यह थोड़ा और दिलचस्प है, प्रोटॉन-देशी और वूडो एक ही लिब्यु-नोड है, जो केवल रिएक्ट और वीयू के तहत है। संबंधित आवरण लिबई-नोड के घटकों के तहत लिखे गए हैं। गिथब (9k और 6k) पर सितारों की संख्या के बावजूद, परियोजनाओं को छोड़ दिया जाता है, और लगभग कोई भी उनका उपयोग नहीं करता है। उन सभी में से जो मुझे मिल सकते थे, ये बहुत ही सरल अनुप्रयोग थे। एक और समस्या जो मुझे पता चली है वह यूआई के स्वयं के अनुकूलन के साथ समस्याएं हैं, यह कामेच्छा के भीतर करना असंभव है, और परियोजना के लेखक क्यूटी में सब कुछ फिर से लिखने पर विचार कर रहे हैं।

लिबुई खुद सभी प्रकार के बाइंडिंग के लिए काफी लोकप्रिय है, उत्साही लोगों ने इसे php में भी खींच लिया

समाप्त आवेदन इस तरह दिख सकता है:

प्रोटोन-देशी

अनुकूलन के बिना एक उबाऊ इंटरफ़ेस, इसलिए यह विकल्प तुरंत गायब हो गया।

या शायद क्यूटी ले?

क्यूटी, जेएस, सीएसएस

बेशक आपने क्यूटी के बारे में सुना है, और यह तथ्य कि यह हर जगह पाया जा सकता है, लेकिन बहुतों ने नहीं सुना है कि यह अब बॉक्स से बाहर जावास्क्रिप्ट के साथ एकीकृत है। QML संपत्ति बाइंडरों का उपयोग करके उपयोगकर्ता इंटरफेस के घोषणात्मक निर्माण की अनुमति देता है, जिससे मौजूदा क्यूएमएल तत्वों की क्षमता का विस्तार होता है। बेशक, यह वेब पर की तुलना में अधिक कठोर जावास्क्रिप्ट है। आप QML ऑब्जेक्ट का उपयोग करके ES5 के समान कुछ लिख सकते हैं, लेकिन आपके पास DOM API नहीं होगा।

बस एक त्वरित टिप्पणी, आप C ++ के तहत Qt में कैसे लिखेंगे:

 #include <QApplication> #include <QPushButton> int main(int argc, char *argv[]) { QApplication app(argc, argv); *// Important * QPushButton hello("Hello world!"); hello.resize(100, 30); hello.show(); return app.exec(); *// Important *}

Qml में आपका कोड कैसा दिख सकता है:

 Item { function factorial(a) { a = parseInt(a); if (a <= 0) return 1; else return a * factorial(a - 1); } MouseArea { anchors.fill: parent onClicked: console.log(factorial(10)) } }

इन घटकों को गतिशील रूप से बनाया जा सकता है।

क्यूएमएल में एक बड़ी प्रकार की प्रणाली भी है, जो निस्संदेह टाइपस्क्रिप्ट में यह सब परिभाषित करते समय उपयोगी होगी।

आप आसानी से घटकों को भी अनुकूलित कर सकते हैं:

 Reactangle { id: redRectId width: 50 color: red }

लगभग सीएसएस, है ना?

सभी को जोड़ा जाना चाहिए कि Qt अधिकांश प्लेटफार्मों पर क्या कर सकता है।

और हमारे पास Node.js होगा

"नोडज + क्यूटी" की खोज करते समय, हम तुरंत नोड-क्यूटी प्राप्त करेंगे, लेकिन यह तुरंत आंख को पकड़ता है कि उत्पाद लंबे समय से मृत हो गया है, और आखिरी बार 8 साल पहले जीवन के लक्षण दिखाई दिए थे।

फिर भी, खोज में आप एक बहुत ही ताजा परियोजना पा सकते हैं - नोडेगुई।

NodeGui

गुई के लिए कई पुस्तकालयों की तरह, क्यूटी विगेट्स से घटनाओं को संसाधित करने के लिए अपने ईवेंट / संदेश लूप का उपयोग करता है। इसलिए, जब हम सशर्त रूप से app.exec () कहते हैं, तो Qt संदेश लूप शुरू करता है और इसे वहां अवरुद्ध करता है। यह सब अच्छा है जब पूरे आवेदन में केवल एक संदेश लूप है। लेकिन चूँकि हमें NodeJs के साथ Qt का उपयोग करने की आवश्यकता होती है, और बाद में इसका अपना ईवेंट लूप भी होता है, इसलिए उन्हें इतनी आसानी से एकीकृत करना असंभव है। लेकिन इस तरह के निर्णय पहले से ही किए गए हैं, उदाहरण के लिए, इलेक्ट्रॉन या योड के साथ एक ही बंडल। इन समाधानों की अपनी ख़ासियत है, वे कम से कम 2 प्रक्रियाओं को बढ़ाते हैं - मुख्य धागे के लिए, और रेंडरर के लिए। इसके बावजूद, इस दृष्टिकोण का एक महत्वपूर्ण लाभ है, NodeJs या क्रोमियम को संशोधित करने की कोई आवश्यकता नहीं है।

NodeGui के मामले में, स्थिति थोड़ी अलग है, सब कुछ के लिए एक प्रक्रिया है, और इस प्रकार, प्रक्रियाओं के बीच घटनाओं को धूमिल करने की कोई आवश्यकता नहीं है। इसके लिए नॉडज को फोर्क किया गया था - और क्यूटी में आवश्यक बाइंडरों में मामूली सुधार किया गया था। और अब आपको हमेशा की तरह main.js नहीं, बल्कि qode main.js. की प्रक्रिया शुरू करनी होगी। सौभाग्य से, qode को @ nggui / qode पैकेज में npm मॉड्यूल के रूप में प्रकाशित किया गया है। एक साधारण हैलो दुनिया शुरू करने के लिए आपको कुछ और पैकेजों को स्थापित करने की आवश्यकता है, प्रत्येक ओएस के लिए अधिक विवरण के लिए आप आधिकारिक वेबसाइट पर देख सकते हैं: https://docs.nodegui.org/docs/guides/getting-started

डिफ़ॉल्ट रूप से, नोडगई में, सब कुछ एक विजेट है, और उन्हें विभिन्न टेम्पलेट्स में खराब किया जा सकता है। वर्तमान में नोडगई में 2 प्रकार के टेम्प्लेट हैं: फ्लेक्सलैट और क्यूग्रिड लयआउट।

नोड्गुई में शैलियाँ

फिलहाल, आप विजेट्स को इनलाइन और स्टाइलशीट के माध्यम से सेट कर सकते हैं।

 widget.setInlineStyle(`color: green`) view.setStyleSheet(` `#helloLabel { color: red; padding: 10px; } #worldLabel { color: green; padding: 10px; } #rootView { background-color: black; } `);

डिफ़ॉल्ट रूप से Qt सभी CSS2 चयनकर्ताओं ( https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types ) का समर्थन करता है

यह स्टाइल घटकों के लिए कस्टम गुणों के बिना भी नहीं करता है। सौभाग्य से, इस तरह के गुणों को पहले से ही क्यूटी के डॉक्स में वर्णित किया गया है और स्टैकओवरफ्लो पर चबाया गया है।

 *QPushButton* { qproperty-iconsize: 20px 20px; }

कोणीय

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

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

लेकिन यह सब अंदर से बाहर कैसे काम करता है?

हमारे पास एक सशर्त main.ts है, और हम इसके साथ शुरू करेंगे।

बूट प्रक्रिया में दो भाग होते हैं: एक प्लेटफ़ॉर्म बनाना और उसमें एक स्टार्ट मॉड्यूल फेंकना।

 platformBrowserDynamic().bootstrapModule(AppModule);

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

प्रारंभ मॉड्यूल में, हम पहले वर्णन करने के लिए कौन से घटक का वर्णन करते हैं। एक घटक का एक उदाहरण बनाते समय, कोणीय, renderComponent कॉल renderComponent और इसे वांछित घटक के साथ जोड़कर, उस घटक के उदाहरण के साथ प्राप्त करता है। सब कुछ जो कि कोणीय घटक के प्रतिपादन (तत्वों को बनाने, विशेषताओं को स्थापित करने, घटनाओं की सदस्यता लेने आदि) के बारे में करेगा, इस रेंडर के माध्यम से जाएगा। इसलिए, हमें RendererFactory को बदलने की आवश्यकता है।

सबसे पहले, Renderer में हम createElement मेथड में रुचि लेंगे। इस पद्धति में, हमें टैग का नाम मिलता है, और इसमें से हमें वांछित घटक बनाने की आवश्यकता होती है। सौभाग्य से, नोडगुई के पास घटकों का एक मूल सेट है, जिसे मैंने सावधानी से चित्रित किया और वर्णित किया कि कैसे उन्हें सामान्य घटक निर्देशिका में सब कुछ फेंकते हुए, कोणीय के ढांचे के भीतर प्रस्तुत किया जाएगा। मानक घटकों के साथ अन्य क्रियाएं भी इस रेंडरर से गुजरेंगी। अधिक जानकारी ।

[Https://blog.nrwl.io/](https://blog.nrwl.io/) https://blog.nrwl.io/

रेंडरर में घटनाओं को सुनने के लिए, इवेंट का नाम फेंका जाता है, और इन घटकों के लिए हम सामान्य ईवेंटलिस्ट को लटकाते हैं।

 listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void { const callbackFunc = (e: NativeEvent) => callback.call(target, e); target.addEventListener(eventName, callbackFunc); return () => target.removeEventListener(eventName, callbackFunc); }

घटक ईवेंट बिल्कुल Qt के समान हैं, उदाहरण के लिए, सामान्य (click)=”clickFunc($event)” बजाय (click)=”clickFunc($event)” आपको लिखना होगा (clicked) = ”clickFunc($event)” ।

वर्तमान में 16 मानक घटक उपलब्ध हैं। लेकिन अगर आपको अपने कस्टम घटक को लिखने की आवश्यकता है, तो QWidget के माध्यम से हमेशा ऐसा करने का अवसर होता है।

एंगुलर के साथ हमारे एप्लिकेशन को यथासंभव संगत बनाने के लिए एक राउटर भी बनाया गया था।

 const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; // AppModule imports ... NodeguiRouterModule.forRoot(appRoutes),

कोणीय नोडगई ऐप

मौसम ऐप

हम ठेस में इकट्ठा करते हैं

रेडी-मेड एप्लिकेशन बनाने के लिए, नोडगई का अपना पैकर है - @nodegui/packer.

उपयोगिता बहुत सरल है, अब तक 2 टीम शामिल हैं।

npx नोडगई-पैकर - इनिट मायप

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

npx नोडगई-पैकर - पैक

यह कमांड पैकेजिंग के लिए आवश्यक उपकरण लॉन्च करता है (उदाहरण के लिए, मैक के लिए macdeployqt) और निर्भरता को पैक करता है।

निष्कर्ष में

अंत में, मैं डेस्कटॉप पर अन्य वेब समाधानों के साथ परिणामों की तुलना करना चाहता हूं (मैक ओएस के तहत लॉन्च करने के परिणाम)।

डाउनलोड का आकार

मेमोरी का उपयोग

परियोजना से लिंक करें:
irustm / कोणीय-नोडगुई
* एंगुलर के साथ प्रदर्शन, देशी और क्रॉस-प्लेटफॉर्म डेस्कटॉप अनुप्रयोगों का निर्माण करें। कोणीय NodeGUI कोणीय द्वारा संचालित किया जाता है

परियोजना के बारे में जानकारी:
https://t.me/ngFanatic

मेरे ओपन सोर्स प्रोजेक्ट्स के बारे में जानकारी
https://twitter.com/irustm

हम कोणीय पर एक क्रॉस-प्लेटफॉर्म देशी डेस्कटॉप एप्लिकेशन बनाते हैं

खोज