नेटिवस्क्रिप्ट - त्वरित गाइड
आम तौर पर, एक मोबाइल एप्लिकेशन विकसित करना एक जटिल और चुनौतीपूर्ण काम है। मोबाइल एप्लिकेशन विकसित करने के लिए कई रूपरेखाएँ उपलब्ध हैं। एंड्रॉइड जावा भाषा पर आधारित एक मूल ढांचा प्रदान करता है और iOS उद्देश्य-सी / शिफ्ट भाषा पर आधारित एक मूल ढांचा प्रदान करता है। हालांकि, एक एप्लिकेशन विकसित करने के लिए जो दोनों ऑपरेटिंग सिस्टम का समर्थन करता है, हमें दो अलग-अलग रूपरेखाओं का उपयोग करके दो अलग-अलग भाषाओं में कोड करने की आवश्यकता है।
इस जटिलता को दूर करने के लिए, मोबाइल ढांचे इस सुविधा का समर्थन करते हैं। क्रॉस-प्लेटफ़ॉर्म या हाइब्रिड ढांचे का उपयोग करने के पीछे मुख्य कारण एकल कोड बेस बनाए रखना आसान है। कुछ लोकप्रिय चौखटे NativeScript, Apache Cordova, Xamarin, आदि हैं।
जावास्क्रिप्ट फ्रेमवर्क का अवलोकन
जावास्क्रिप्ट एक बहु-प्रतिमान भाषा है। यह कार्यात्मक प्रोग्रामिंग, ऑब्जेक्ट-ओरिएंटेड और प्रोटोटाइप आधारित प्रोग्रामिंग का समर्थन करता है। शुरुआत में क्लाइंट-साइड के लिए जावास्क्रिप्ट का उपयोग किया गया था। आजकल, जावास्क्रिप्ट का उपयोग सर्वर-साइड प्रोग्रामिंग भाषा के रूप में भी किया जाता है। जावास्क्रिप्ट फ्रेमवर्क एक प्रकार का टूल है जो जावास्क्रिप्ट को आसान और स्मूथ बनाने के साथ काम करता है।
इस ढांचे का उपयोग करके, प्रोग्रामर आसानी से डिवाइस को उत्तरदायी के रूप में एप्लिकेशन को कोड कर सकते हैं। जवाबदेही इसके कारणों में से एक है कि यह ढांचा बहुत लोकप्रिय क्यों हो रहा है।
आइए नज़र डालते हैं कुछ लोकप्रिय जेएस फ्रेमवर्क पर -
कोणीय
सबसे शक्तिशाली, कुशल और खुले स्रोत वाले जावास्क्रिप्ट फ्रेमवर्क में से एक कोणीय है। हम मोबाइल और डेस्कटॉप एप्लिकेशन बना सकते हैं। Google इस ढांचे का उपयोग करता है। इसका उपयोग सिंगल पेज एप्लिकेशन (एसपीए) के विकास के लिए किया जाता है।
Vue.js
VueJS एक प्रगतिशील जावास्क्रिप्ट ढांचा है जिसका उपयोग इंटरैक्टिव वेब इंटरफेस विकसित करने के लिए किया जाता है। यह वेब विकास को सरल बनाने के लिए उपयोग किए जाने वाले प्रसिद्ध ढाँचों में से एक है। इसे बिना किसी मुद्दे के सामने के विकास के लिए बड़ी परियोजनाओं में आसानी से एकीकृत किया जा सकता है। यह हाई-एंड एसपीए या सिंगल पेज एप्लिकेशन के निर्माण के लिए दोहरी एकीकरण मोड सबसे आकर्षक विशेषताओं में से एक है।
प्रतिक्रिया
ReactJS पुन: प्रयोज्य UI घटकों के निर्माण के लिए उपयोग की जाने वाली जावास्क्रिप्ट लाइब्रेरी है। यह फेसबुक द्वारा विकसित किया गया है। यह वर्तमान में सबसे लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में से एक है और इसके पीछे एक मजबूत नींव और बड़े समुदाय हैं।
Node.js
Node.js सर्वर-साइड और नेटवर्किंग अनुप्रयोगों को विकसित करने के लिए एक खुला स्रोत, क्रॉस-प्लेटफॉर्म रनटाइम वातावरण है। यह Google Chrome के जावास्क्रिप्ट इंजन (V8 इंजन) पर बनाया गया है। Node.js एप्लिकेशन जावास्क्रिप्ट में लिखे गए हैं, और इन्हें OS X, Microsoft Windows और Linux पर चलाया जा सकता है। यह विभिन्न जावास्क्रिप्ट मॉड्यूल का एक समृद्ध पुस्तकालय प्रदान करता है जो वेब अनुप्रयोगों के विकास को सरल करता है।
नेटिवस्क्रिप्ट का अवलोकन
नेटिवस्क्रिप्ट एक खुला स्रोत ढांचा है जिसका उपयोग देशी आईओएस और एंड्रॉइड मोबाइल एप्लिकेशन बनाने के लिए किया जाता है। यह एक JIT संकलित ढांचा है। NativeScript कोड JS वर्चुअल मशीन पर चलता है। यह एंड्रॉइड और आईओएस दोनों प्लेटफार्मों के लिए वी 8 इंजन रनटाइम का उपयोग करता है। NativeScript विकास के लिए XML, JS और CSS का उपयोग करता है। इसमें एक वेबइड है जिसे PlayGround के नाम से जाना जाता है। यह PlayGround आसान वर्किंग इंटरफ़ेस, प्रोजेक्ट्स को प्रबंधित करने में आसान, हॉट रीलोड और डिवाइसेस पर डिबग का समर्थन करता है।
नेटिवस्क्रिप्ट डेवलपर्स को मूल, क्रॉस-प्लेटफ़ॉर्म ऐप जल्दी और कुशलता से बनाने और विकास, परीक्षण और प्रशिक्षण की लागतों को बचाने की अनुमति देता है। इसलिए, नेटिव एप्लिकेशन बेहतर और उपयोग करने में आसान बनाने के लिए आने वाले वर्षों के लिए समृद्ध और मजबूत बने रहेंगे।
विशेषताएं
नेटिवस्क्रिप्ट में जीवंत सामुदायिक समर्थन है। नीचे सूचीबद्ध NativeScript की कुछ मुख्य विशेषताएं -
Extensible
हॉट मॉड्यूल रिप्लेसमेंट
सेटअप करने में आसान
हम समृद्ध एनिमेशन, ग्राफ, चार्ट और सूची बना सकते हैं
डेवलपर्स किसी भी दृश्य का उपयोग एप्लिकेशन की जड़ के रूप में कर सकते हैं
आलसी कोडिंग
लाभ
NativeScript छोटे या बड़े पैमाने पर कंपनियों को क्रॉस-प्लेटफॉर्म मोबाइल ऐप बनाने में मदद करता है। कुछ प्रमुख लाभ हैं -
डेवलपर्स मौजूदा टूल और कोड का पुन: उपयोग कर सकते हैं
नए संस्करणों को संशोधित करना, समस्या निवारण और अद्यतन करना आसान है
विकास का अनुभव अच्छा है इसलिए हमें नए उपकरण सीखने के लिए समय नहीं देना है
कॉर्डोवा प्लगइन्स सीखने की आवश्यकता को समाप्त करते हुए, जावास्क्रिप्ट से प्लेटफ़ॉर्म-विशिष्ट एपीआई
विभिन्न साइन-ऑन प्रदाताओं के साथ आसानी से प्रमाणीकरण
यह अनुभाग आपकी मशीन पर नेटिवस्क्रिप्ट कैसे स्थापित करें, इसके बारे में बताता है।
आवश्यक शर्तें
स्थापना के लिए जाने से पहले, हमें निम्नलिखित आवश्यक शर्तें -
Node.js
Android
iOS
Node.js सत्यापित करें
Node.js Google Chrome के आंतरिक जावास्क्रिप्ट इंजन, v8 के शीर्ष पर एक जावास्क्रिप्ट रनटाइम इंजन है। NativeScript विभिन्न उद्देश्यों के लिए बड़े पैमाने पर Node.js का उपयोग करता है जैसे स्टार्टर टेम्पलेट एप्लिकेशन बनाना, एप्लिकेशन को संकलित करना आदि । आपकी मशीन पर Node.js होना अनिवार्य है ।
उम्मीद है, आपने अपनी मशीन पर Node.js स्थापित किया है। यदि यह स्थापित नहीं है, तो लिंक पर जाएं,https://nodejs.org/ और नवीनतम एलटीएस पैकेज डाउनलोड करें और इसे स्थापित करें।
यह सत्यापित करने के लिए कि Node.js ठीक से स्थापित है, अपने टर्मिनल पर निम्न कमांड टाइप करें -
node --versionआप संस्करण देख सकते हैं। अब तक, नोड का वर्तमान स्थिर "एलटीएस" संस्करण 12.14.0 है।
सीएलआई सेटअप
NativeScript CLI एक टर्मिनल / कमांड लाइन आधारित एप्लिकेशन है और आपको NativeScript एप्लिकेशन बनाने और विकसित करने की अनुमति देता है। Node.js पैकेज मैनेजर npm का उपयोग आपकी मशीन पर NativeScript CLI स्थापित करने के लिए किया जाता है।
NativeScript CLI स्थापित करने के लिए नीचे दिए गए आदेश का उपयोग करें -
npm install -g nativescriptइस कमांड को निष्पादित करने के बाद, हम निम्नलिखित आउटपुट देख सकते हैं -
setupcli
हमने अपने सिस्टम में नवीनतम NativeScript CLI, tns स्थापित किया है। अब, अपने टर्मिनल में नीचे कमांड टाइप करें -
tnsयह क्विक-स्टार्ट गाइड को सूचीबद्ध करेगा। आप निम्न आउटपुट देख सकते हैं -
CLI
हम किसी भी अतिरिक्त सेटअप के बिना भी एप्लिकेशन बनाने और विकसित करने के लिए tns का उपयोग कर सकते हैं। लेकिन, हम वास्तविक डिवाइस में एप्लिकेशन को तैनात करने में सक्षम नहीं हो सके। इसके बजाय हम NativeScript PlayGround iOS / Android एप्लिकेशन का उपयोग करके एप्लिकेशन चला सकते हैं । हम इसे आगामी अध्यायों में जाँचेंगे।
NativeScript खेल का मैदान ऐप इंस्टॉल करना
अपने iOS ऐप स्टोर या Google Play Store पर जाएं और नेटिवस्क्रिप्ट प्लेग्राउंड ऐप खोजें। एप्लिकेशन को खोज परिणाम में सूचीबद्ध होने के बाद, इंस्टॉल विकल्प पर क्लिक करें। यह हमारे डिवाइस में नेटिवस्क्रिप्ट प्लेग्राउंड ऐप इंस्टॉल करेगा ।
नेटिवस्क्रिप्ट प्लेग्राउंड एप्लिकेशन वास्तविक डिवाइस या एमुलेटर में एप्लिकेशन को तैनात किए बिना एंड्रॉइड या आईओएस डिवाइस में आपके एप्लिकेशन के परीक्षण के लिए सहायक होगा। इससे एप्लिकेशन को विकसित करने का समय कम हो जाएगा और हमारे मोबाइल एप्लिकेशन के विकास को किक-स्टार्ट करने का आसान तरीका हो जाएगा।
Android और iOS सेटअप
इस अध्याय में, आइए जानें कि आईओएस और एंड्रॉइड ऐप्स को एमुलेटर या वास्तविक डिवाइस में बनाने और चलाने के लिए सिस्टम को कैसे सेटअप किया जाए।
चरण 1: विंडोज निर्भरता
अपनी विंडोज़ कमांड प्रॉम्प्ट में नीचे दिए गए कमांड को निष्पादित करें और व्यवस्थापक के रूप में चलाएं -
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex
((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"इस आदेश के बाद, डाउनलोड किए जा रहे लिपियों पर निर्भरता स्थापित करें और इसे कॉन्फ़िगर करें।
चरण 2: macOS निर्भरता
MacOS में स्थापित करने के लिए, आपको यह सुनिश्चित करना होगा कि Xcode स्थापित है या नहीं। NcodeScript के लिए Xcode अनिवार्य है। यदि Xcode इंस्टॉल नहीं है, तो निम्न लिंक पर जाएंhttps://developer.apple.com/xcode/और डाउनलोड करें; फिर इसे स्थापित करें।
अब अपने टर्मिनल में निम्न कमांड निष्पादित करें -
sudo ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"उपरोक्त कमांड को निष्पादित करने के बाद, स्क्रिप्ट आईओएस और एंड्रॉइड विकास दोनों के लिए निर्भरता स्थापित करेगी। एक बार यह हो जाने के बाद, अपने टर्मिनल को बंद करें और पुनः आरंभ करें।
चरण 3: Android निर्भरता
उम्मीद है, आपने निम्नलिखित पूर्वापेक्षाएँ कॉन्फ़िगर की हैं -
JDK 8 या उच्चतर
Android एसडीके
एंड्रॉयड सपोर्ट रिपॉजिटरी
Google रिपॉजिटरी
Android SDK बिल्ड-टूल्स 28.0.3 या उच्चतर
Android स्टूडियो
यदि उपरोक्त आवश्यक शर्तें कॉन्फ़िगर नहीं की गई हैं, तो निम्न लिंक पर जाएं https://developer.android.com/studio/स्थापित करें और इसे स्थापित करें। अंत में, अपने पर्यावरण चर में JAVA_HOME और ANDROID_HOME जोड़ें।
चरण 4: निर्भरता की जाँच करें
अब सब कुछ हो गया। आप नीचे दिए गए आदेश का उपयोग करके निर्भरता को सत्यापित कर सकते हैं -
tns doctorयह सभी निर्भरता को सत्यापित करेगा और नीचे दिए गए परिणाम को संक्षेप में प्रस्तुत करेगा -
√ Getting environment information
No issues were detected.
√ Your ANDROID_HOME environment variable is set and points to correct directory.
√ Your adb from the Android SDK is correctly installed.
√ The Android SDK is installed.
√ A compatible Android SDK for compilation is found.
√ Javac is installed and is configured properly.
√ The Java Development Kit (JDK) is installed and is configured properly.
√ Local builds for iOS can be executed only on a macOS system.
To build for iOS on a different operating system, you can use the
NativeScript cloud infrastructure.
√ Getting NativeScript components versions information...
√ Component nativescript has 6.3.0 version and is up to date.
√ Component tns-core-modules has 6.3.2 version and is up to date.
√ Component tns-android has 6.3.1 version and is up to date.
√ Component tns-ios has 6.3.0 version and is up to date.यदि आपको कोई समस्या मिलती है, तो कृपया एप्लिकेशन को विकसित करने से पहले मुद्दों को ठीक करें।
मोबाइल एप्लिकेशन बनाने के लिए नेटिवस्क्रिप्ट एक उन्नत ढांचा है। यह मोबाइल एप्लिकेशन बनाने की जटिलता को छुपाता है और अत्यधिक अनुकूलित और उन्नत मोबाइल एप्लिकेशन बनाने के लिए एक साधारण एपीआई को उजागर करता है। NativeScript Android और iOS दोनों में आसानी से मोबाइल एप्लिकेशन बनाने के लिए एंट्री लेवल डेवलपर्स को भी सक्षम बनाता है।
आइए इस अध्याय में NativeScript फ्रेमवर्क की वास्तुकला को समझते हैं।
परिचय
NativeScript फ्रेमवर्क की मुख्य अवधारणा हाइब्रिड स्टाइल मोबाइल एप्लिकेशन बनाने के लिए डेवलपर को सक्षम करना है। हाइब्रिड एप्लिकेशन एक सामान्य मोबाइल एप्लिकेशन के अंदर एक वेब एप्लिकेशन को होस्ट करने के लिए प्लेटफ़ॉर्म विशिष्ट ब्राउज़र एपीआई का उपयोग करता है और जावास्क्रिप्ट एपीआई के माध्यम से एप्लिकेशन को सिस्टम एक्सेस प्रदान करता है।
नेटिवस्क्रिप्ट बहुत अधिक निवेश करता है JavaScript languageडेवलपर्स के लिए एक कुशल ढांचा प्रदान करने के लिए। जबसेJavaScriptक्लाइंट साइड प्रोग्रामिंग (वेब डेवलपमेंट) के लिए डी-फैक्टो मानक है और हर डेवलपर को जावास्क्रिप्ट भाषा की अच्छी जानकारी होती है, यह डेवलपर्स को नेटिवस्क्रिप्ट फ्रेमवर्क में आसानी से प्रवेश करने में मदद करता है। निम्न स्तर पर, नेटिवस्क्रिप्ट देशी एपीआई को जावास्क्रिप्ट प्लगइन्स के संग्रह के माध्यम से उजागर करता हैNative plugins.
नेटिवस्क्रिप्ट नेटिव प्लगइन्स की नींव पर बनाता है और जावास्क्रिप्ट मॉड्यूल का उपयोग करने के लिए कई उच्च स्तर और आसान प्रदान करता है । प्रत्येक मॉड्यूल एक विशिष्ट कार्यक्षमता करता है जैसे कैमरा एक्सेस करना, स्क्रीन डिजाइन करना आदि, इन सभी मॉड्यूलों को एक जटिल मोबाइल एप्लिकेशन को आर्किटेक्ट करने के लिए कई तरीकों से जोड़ा जा सकता है।
नीचे आरेख NativeScript फ्रेमवर्क के उच्च स्तरीय अवलोकन को दर्शाता है -
NativeScript Application - नेटिवस्क्रिप्ट रूपरेखा डेवलपर को या तो कोणीय शैली के अनुप्रयोग या वीयू शैली के अनुप्रयोग का उपयोग करने की अनुमति देती है।
JavaScript Modules - नेटिवस्क्रिप्ट ढांचे में यूआई मॉड्यूल, एप्लिकेशन मॉड्यूल, कोर मॉड्यूल आदि के रूप में स्पष्ट रूप से वर्गीकृत जावास्क्रिप्ट मॉड्यूल का एक समृद्ध सेट प्रदान करता है। किसी भी स्तर के जटिल आवेदन को लिखने के लिए सभी मॉड्यूल को किसी भी समय आवेदन द्वारा एक्सेस किया जा सकता है।
JavaScript plugins- NativeScript फ्रेमवर्क प्लेटफ़ॉर्म संबंधित कार्यक्षमता तक पहुंचने के लिए जावास्क्रिप्ट प्लगइन्स का एक बड़ा संग्रह प्रदान करता है। मंच विशिष्ट कार्यक्षमता प्रदान करने के लिए मॉड्यूल जावास्क्रिप्ट प्लगइन्स का उपयोग करता है।
Native plugins- नेटिव प्लग इन को प्लेटफॉर्म स्पेसिफिक लैंग्वेज में लिखा जाता है ताकि सिस्टम फंक्शनैलिटी को रैपर किया जा सके जो आगे जावास्क्रिप्ट प्लगइन द्वारा उपयोग किया जाएगा
Platform API - प्लेटफॉर्म विक्रेताओं द्वारा उपलब्ध कराई गई एपीआई।
संक्षेप में, नेटिवस्क्रिप्ट एप्लिकेशन को मॉड्यूल का उपयोग करके लिखा और व्यवस्थित किया जाता है। मॉड्यूल शुद्ध जावास्क्रिप्ट में लिखे गए हैं और मॉड्यूल प्लग इन के माध्यम से प्लेटफार्म संबंधी कार्यक्षमता (जब भी जरूरत होती है) तक पहुंचते हैं और अंत में प्लग इन प्लेटफॉर्म एपीआई और जावास्क्रिप्ट एपीआई को पाटते हैं।
एक नेटिवस्क्रिप्ट अनुप्रयोग का वर्कफ़्लो
जैसा कि हमने पहले सीखा, नेटिवस्क्रिप्ट एप्लिकेशन मॉड्यूल से बना है। प्रत्येक और प्रत्येक मॉड्यूल एक विशिष्ट सुविधा को सक्षम करता है। NativeScript एप्लिकेशन को बूटस्ट्रैप करने के लिए मॉड्यूल की दो महत्वपूर्ण श्रेणियां इस प्रकार हैं -
रूट मॉड्यूल
पेज मॉड्यूल
रूट और पेज मॉड्यूल को एप्लिकेशन मॉड्यूल के रूप में वर्गीकृत किया जा सकता है। एप्लिकेशन मॉड्यूल नेटिवस्क्रिप्ट एप्लिकेशन का प्रवेश बिंदु है। यह एक पेज को बूटस्ट्रैप करता है, डेवलपर को पेज का यूजर इंटरफेस बनाने में सक्षम बनाता है और अंत में पेज के बिजनेस लॉजिक के निष्पादन की अनुमति देता है। एक अनुप्रयोग मॉड्यूल में तीन आइटम शामिल हैं -
XML में उपयोगकर्ता इंटरफ़ेस डिज़ाइन कोडित है (उदाहरण के लिए page.xml / page.component.html)
CSS में कोडित शैलियाँ (जैसे page.css / page.component.css)
जावास्क्रिप्ट में मॉड्यूल के वास्तविक व्यापार तर्क (उदाहरण के लिए page.js / page.component.ts)
नेटिवस्क्रिप्ट एप्लिकेशन पृष्ठ को डिजाइन करने के लिए बहुत सारे यूआई घटक (यूआई मॉड्यूल के तहत) प्रदान करता है। UI घटक को XML प्रारूप या HTML प्रारूप में कोणीय आधारित अनुप्रयोग में दर्शाया जा सकता है। एप्लिकेशन मॉड्यूल पृष्ठ को डिज़ाइन करने के लिए UI का उपयोग करता है और डिज़ाइन को अलग XML, page.xml / page.component.html में संग्रहीत करता है । मानक CSS का उपयोग करके डिजाइन को स्टाइल किया जा सकता है।
एप्लिकेशन मॉड्यूल अलग सीएसएस में डिजाइन की शैली को स्टोर करता है, page.css / page.component.css। पृष्ठ की कार्यक्षमता जावास्क्रिप्ट / टाइपस्क्रिप्ट का उपयोग करके की जा सकती है, जिसमें डिज़ाइन के साथ-साथ प्लेटफ़ॉर्म सुविधाओं तक पूरी पहुंच है। एप्लिकेशन मॉड्यूल पेज की वास्तविक कार्यक्षमता को कोड करने के लिए एक अलग फाइल, पेज.जेएस / पेज.कॉमपेंटेंट.ट्स का उपयोग करता है।
रूट मॉड्यूल
नेटिवस्क्रिप्ट यूआई कंटेनरों के माध्यम से उपयोगकर्ता इंटरफ़ेस और उपयोगकर्ता इंटरैक्शन का प्रबंधन करता है। प्रत्येक UI कंटेनर में एक रूट मॉड्यूल होना चाहिए और जिसके माध्यम से UI कंटेनर UI का प्रबंधन करता है। नेटिवस्क्रिप्ट एप्लिकेशन में दो प्रकार के यूआई कंटेनर हैं -
Application Container- प्रत्येक NativeScript एप्लिकेशन में एक एप्लिकेशन कंटेनर होना चाहिए और इसे application.run () विधि का उपयोग करके सेट किया जाएगा। यह एप्लिकेशन के UI को इनिशियलाइज़ करता है।
Model View Container- नेटिवस्क्रिप्ट मॉडल दृश्य कंटेनर का उपयोग करके मोडल संवादों का प्रबंधन करता है। एक नेटिवस्क्रिप्ट एप्लिकेशन में मॉडल व्यू कंटेनर की कोई भी संख्या हो सकती है।
हर रूट मॉड्यूल की सामग्री के रूप में केवल एक UI घटक होना चाहिए। बदले में यूआई घटक अपने बच्चों के रूप में अन्य यूआई घटक रख सकते हैं। नेटिवस्क्रिप्ट बच्चे की सुविधा के साथ बहुत सारे यूआई घटक जैसे कि टैब व्यू, स्क्रोल व्यू इत्यादि प्रदान करता है। हम रूट यूआई घटक के रूप में इनका उपयोग कर सकते हैं। एक अपवाद फ़्रेम है , जिसमें बच्चे का विकल्प नहीं है लेकिन रूट घटक के रूप में उपयोग किया जा सकता है। फ़्रेम पेज मॉड्यूल को लोड करने के लिए विकल्प प्रदान करता है और अन्य पेज मॉड्यूल पर नेविगेट करने के लिए विकल्प भी।
पेज मॉड्यूल
नेटिवस्क्रिप्ट में, प्रत्येक और प्रत्येक पृष्ठ मूल रूप से एक पृष्ठ मॉड्यूल है । पृष्ठ मॉड्यूल NativeScript द्वारा प्रदान की गई UI घटकों के समृद्ध सेट का उपयोग करके बनाया गया है। पृष्ठ मॉड्यूल लोड किए गए हैं फ़्रेम घटक के माध्यम से आवेदन (इसकी डिफ़ॉल्टपेज विशेषता या नेविगेट () विधि का उपयोग करके), जो बदले में रूट मॉड्यूल का उपयोग करके लोड किया जाता है , जो कि आवेदन शुरू होने पर फिर से application.run () का उपयोग करके लोड किया जाता है।
आवेदन के कार्य प्रवाह को निम्न आरेख के रूप में दर्शाया जा सकता है -
उपरोक्त आरेख को निम्नलिखित चरणों में विस्तार से बताया गया है -
NativeScript अनुप्रयोग शुरू होता है और application.run () विधि को कॉल करता है।
application.run () एक रूट मॉड्यूल लोड करता है ।
रूट मॉड्यूल नीचे दिए गए अनुसार यूआई घटक में से किसी एक का उपयोग करके बनाया गया है -
Frame
TabView
SideDrawer
कोई भी लेआउट दृश्य
फ़्रेम घटक निर्दिष्ट पृष्ठ (पृष्ठ मॉड्यूल) को लोड करता है और प्रदान करता है। अन्य यूआई घटकों को रूट मॉड्यूल में निर्दिष्ट किया जाएगा । अन्य UI घटक में पृष्ठ मॉड्यूल को इसकी मुख्य सामग्री के रूप में लोड करने का विकल्प भी है ।
एंगुलर आधारित नेटिवस्क्रिप्ट एप्लिकेशन का वर्कफ़्लो
जैसा कि हमने पहले सीखा था, नेटिवस्क्रिप्ट ढांचा डेवलपर्स की विभिन्न श्रेणी को पूरा करने के लिए कई तरीके प्रदान करता है। नेटिवस्क्रिप्ट द्वारा समर्थित कार्यप्रणाली इस प्रकार हैं -
NativeScript Core - नेटिवस्क्रिप्ट फ्रेमवर्क की मूल या मूल अवधारणा
Angular + NativeScript - कोणीय आधारित कार्यप्रणाली
Vuejs + NativeScript - Vue.js आधारित कार्यप्रणाली
आइए जानें कि एनरिकुलर फ्रेमवर्क में कोणीय ढांचे को कैसे शामिल किया जाता है।
चरण 1
NativeScript एंगुलर एप्लिकेशन को बूटस्ट्रैप करने के लिए ऑब्जेक्ट (platformNativeScriptDynamic) प्रदान करता है। platformNativeScriptDynamic में एक विधि है, bootstrapModule, जिसका उपयोग एप्लिकेशन को शुरू करने के लिए किया जाता है।
एंगुलर फ्रेमवर्क का उपयोग करके एप्लिकेशन को बूटस्ट्रैप करने का सिंटैक्स इस प्रकार है -
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);यहाँ,
AppModule हमारा रूट मॉड्यूल है।
चरण 2
एप्लिकेशन मॉड्यूल का एक सरल कार्यान्वयन (निर्दिष्ट कोड से नीचे)।
import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
{
bootstrap: [
AppComponent
], imports: [
NativeScriptModule,
AppRoutingModule
], declarations: [
AppComponent
]
}
) export class AppModule { }यहाँ,
AppModuleAppComponent घटक लोड करके अनुप्रयोग प्रारंभ करता है। कोणीय घटक पृष्ठों के समान हैं और डिजाइन और प्रोग्रामिंग तर्क दोनों के लिए उपयोग किए जाते हैं।
AppComponent (app.component.ts) और इसकी प्रस्तुति तर्क (app.component.css) का एक सरल कार्यान्वयन इस प्रकार है -
app.component.ts
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }यहाँ,
templateUrl घटक के डिजाइन को संदर्भित करता है।
app.component.html
<page-router-outlet></page-router-outlet>यहाँ,
page-router-outlet वह स्थान है जहाँ कोणीय अनुप्रयोग जुड़ा हुआ है।
सारांश में, कोणीय रूपरेखा मामूली अंतर के साथ नेटिवस्क्रिप्ट ढांचे के समान मॉड्यूल से बना है। एंगुलर के प्रत्येक मॉड्यूल में एक कोणीय घटक और एक राउटर सेटअप फ़ाइल (पृष्ठ- routing.mocdule.ts) होगी। राउटर प्रति मॉड्यूल सेट है और यह नेविगेशन का ख्याल रखता है। कोणीय घटक NativeSctipt कोर में पृष्ठों के अनुरूप होते हैं।
प्रत्येक घटक में एक यूआई डिज़ाइन (page.component.html), एक स्टाइल शीट (page.component.css), और एक जावास्क्रिप्ट / टाइपस्क्रिप्ट कोड फ़ाइल (page.component.ts) होगी।
NativeScript एप्लिकेशन के कार्य प्रवाह को समझने के लिए एक सरल नंगे हड्डी एप्लिकेशन बनाएं।
अनुप्रयोग बनाना
आइए जानें कि NativeScript CLI, tns का उपयोग करके सरल एप्लिकेशन कैसे बनाएं। tns NativeScript में एक नया प्रोजेक्ट बनाने के लिए इस्तेमाल करने के लिए एक कमांड क्रिएट करता है।
नया एप्लिकेशन बनाने के लिए मूल सिंटैक्स निम्नानुसार है -
tns create <projectname> --template <template_name>कहाँ पे,
Projectname परियोजना का नाम है।
template_nameप्रोजेक्ट टेम्प्लेट है। नेटिवस्क्रिप्ट विभिन्न प्रकार के एप्लिकेशन बनाने के लिए बहुत सारे स्टार्टअप टेम्पलेट प्रदान करता है। कोणीय आधारित टेम्पलेट का उपयोग करें।
आइए हम अपने नए एप्लिकेशन पर काम करने के लिए NativeScriptSamples नामक एक नई निर्देशिका बनाएं। अब, एक नया टर्मिनल खोलें फिर हमारी निर्देशिका में जाएं और नीचे कमांड टाइप करें -
tns create BlankNgApp --template tns-template-blank-ngकहाँ पे, tns-template-blank-ng AngularJS पर आधारित एक खाली मोबाइल एप्लिकेशन को संदर्भित करता है।
उत्पादन
.....
.....
.....
Project BlankNgApp was successfully created.
Now you can navigate to your project with $ cd BlankNgApp
After that you can preview it on device by executing $ tns previewअब, हमारा पहला मोबाइल एप्लिकेशन, BlankNgApp बना है।
अनुप्रयोग की संरचना
आइए इस अध्याय में हमारे पहले आवेदन BlankNgApp का विश्लेषण करके नेटिवस्क्रिप्ट एप्लिकेशन की संरचना को समझें। नेटिवस्क्रिप्ट एप्लिकेशन को कई वर्गों में व्यवस्थित किया गया है और वे इस प्रकार हैं -
कॉन्फ़िगरेशन अनुभाग
नोड मॉड्यूल
Android स्रोत
आईओएस स्रोत
आवेदन स्रोत कोड
आवेदन की सामान्य संरचना इस प्रकार है -
│ angular.json
│ LICENSE
│ nsconfig.json
│ package-lock.json
│ package.json
│ tsconfig.json
│ tsconfig.tns.json
│ tsfmt.json
│ webpack.config.js
│
├───App_Resources
│ ├───Android
│ │
│ └───iOS
│
├───hooks
│
├───node_modules
|
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.tsआइए हम आवेदन के प्रत्येक खंड को समझें और यह कैसे हमारे आवेदन को बनाने में हमारी मदद करता है।
कॉन्फ़िगरेशन अनुभाग
आवेदन की जड़ में सभी फाइलें विन्यास फाइल हैं। कॉन्फ़िगरेशन फ़ाइलों का प्रारूप JSON प्रारूप में है, जो डेवलपर को कॉन्फ़िगरेशन विवरण को आसानी से समझने में मदद करता है। सभी उपलब्ध कॉन्फ़िगरेशन जानकारी प्राप्त करने के लिए NativeScript एप्लिकेशन इन फ़ाइलों पर निर्भर करता है। आइए हम इस अनुभाग में सभी कॉन्फ़िगरेशन फ़ाइलों के माध्यम से जाते हैं।
package.json
package.json फाइलें एप्लिकेशन की पहचान (आईडी) और उन सभी मॉड्यूल को सेट करती हैं, जो एप्लिकेशन के उचित कार्य के लिए निर्भर करता है। नीचे हमारा पैकेज है। Json -
{
"nativescript": {
"id": "org.nativescript.BlankNgApp",
"tns-android": {
"version": "6.3.1"
}, "tns-ios": {
"version": "6.3.0"
}
}, "description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nativescript/theme": "~2.2.1",
"nativescript-angular": "~8.20.3",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.0",
"@ngtools/webpack": "~8.2.0",
"nativescript-dev-webpack": "~1.4.0",
"typescript": "~3.5.3"
},
"gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14",
"readme": "NativeScript Application"
}यहाँ,
Identity of the application (nativescript/id)- आवेदन की आईडी को org.nativescript.BlankNgApp के रूप में सेट करता है। इस आईडी का उपयोग हमारे ऐप को Play Store या iTunes में प्रकाशित करने के लिए किया जाता है। यह आईडी हमारी एप्लिकेशन पहचानकर्ता या पैकेज नाम होगी।
Dependencies (dependencies)- हमारे सभी आश्रित नोड मॉड्यूल को निर्दिष्ट करता है। चूंकि, डिफ़ॉल्ट नेटिवस्क्रिप्ट कार्यान्वयन कोणीय फ्रेमवर्क पर निर्भर करता है, कोणीय मॉड्यूल शामिल हैं।
Development dependencies- उन सभी टूल को निर्दिष्ट करता है जो एप्लिकेशन पर निर्भर करता है। चूंकि, हम अपने एप्लिकेशन को टाइपस्क्रिप्ट में विकसित कर रहे हैं, इसमें टाइपस्क्रिप्ट भी निर्भर मॉड्यूल में से एक है।
angular.json - कोणीय रूपरेखा विन्यास सूचना।
nsconfig.json - नेटिवस्क्रिप्ट फ्रेमवर्क कॉन्फ़िगरेशन जानकारी।
tsconfig.json, tsfmt.json & tsconfig.tns.json - टाइपस्क्रिप्ट भाषा विन्यास जानकारी
webpack.config.js - जावास्क्रिप्ट में लिखा गया वेबपैक कॉन्फ़िगरेशन।
नोड मॉड्यूल
चूंकि नेटिवस्क्रिप्ट प्रोजेक्ट नोड आधारित परियोजना है, यह नोड_मॉडल फ़ोल्डर में अपनी सभी निर्भरता को संग्रहीत करता है। हम npm (npm install) या tns का उपयोग कर सकते हैं और सभी एप्लिकेशन निर्भरता को n_moduels में डाउनलोड और इंस्टॉल कर सकते हैं।
Android स्रोत कोड
नेटिवस्क्रिप्ट ऑटो स्रोत कोड उत्पन्न करता है और इसे App_Resources \ Android फ़ोल्डर में रखता है। इसका उपयोग एंड्रॉइड एसडीके का उपयोग करके एंड्रॉइड एप्लिकेशन बनाने के लिए किया जाएगा
iOS स्रोत कोड
नेटिवस्क्रिप्ट ऑटो iOS स्रोत कोड उत्पन्न करता है और इसे App_Resources \ iOS फ़ोल्डर में रखता है। इसका उपयोग iOS SDK और XCode का उपयोग करके iOS एप्लिकेशन बनाने के लिए किया जाएगा
आवेदन स्रोत कोड
वास्तविक एप्लिकेशन कोड src फ़ोल्डर में रखा गया है। हमारे आवेदन में src फ़ोल्डर में फाइलें नीचे हैं।
└───src
│ app.css
│ main.ts
│ package.json
│
└───app
│ app-routing.module.ts
│ app.component.html
│ app.component.ts
│ app.module.ts
│
└───home
home-routing.module.ts
home.component.html
home.component.ts
home.module.tsआइए हम सभी फाइलों के उद्देश्य को समझें और उन्हें इस खंड में कैसे व्यवस्थित किया जाए -
चरण 1
main.ts - आवेदन का प्रवेश बिंदु।
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);यहां, हमने AppModule को एप्लिकेशन के बूटस्ट्रैपिंग मॉड्यूल के रूप में सेट किया है।
चरण 2
app.css - आवेदन की मुख्य शैली शीट नीचे दी गई है -
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */यहाँ,
app.css मूल शैली की चादर और भूरे रंग के रंग की थीम शैली मूल सामग्री को आयात करती है।
चरण 3
app \ app.module.ts - आवेदन का रूट मॉड्यूल।
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
{
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent
], schemas: [
NO_ERRORS_SCHEMA
]
}
)
export class AppModule { }यहाँ,
AppModule NgModule के आधार पर बनाया गया है और एप्लिकेशन के घटकों और मॉड्यूल को सेट करता है। यह दो मॉड्यूल NativeScriptModule और AppRoutModule और एक घटक, AppComponent आयात करता है। यह AppComponent को एप्लिकेशन के रूट कंपोनेंट के रूप में सेट करता है।
चरण 4
app.component.ts - आवेदन का रूट घटक।
import { Component } from "@angular/core";
@Component(
{
selector: "ns-app",
templateUrl: "app.component.html"
}
)
export class AppComponent { }यहाँ,
AppComponent घटक के टेम्पलेट और स्टाइल शीट को सेट करता है। टेम्पलेट को मूल एचएमटीएल में NativeScript UI घटकों का उपयोग करके बनाया गया है।
चरण 5
app-routing.module.ts - AppModule के लिए रूटिंग मॉड्यूल
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: () =>
import("~/app/home/home.module").then((m) => m.HomeModule) }
];
@NgModule(
{
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
}
)
export class AppRoutingModule { }यहाँ,
AppRoutModule NativeScriptRouterModule का उपयोग करता है और AppModule के मार्गों को सेट करता है। यह मूल रूप से / घर के लिए खाली पथ को इंगित करता है और HomeModule को / घर को इंगित करता है।
चरण 6
app \ home \ home.module.ts - एक नया मॉड्यूल, HomeModule को परिभाषित करता है।
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
{
imports: [
NativeScriptCommonModule,
HomeRoutingModule
],
declarations: [
HomeComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}
)
export class HomeModule { }यहाँ,
HomeModule दो मॉड्यूल का आयात करता है, HomeRoutModule और NativeScriptCommonModule और एक घटक HomeComponent
चरण 7
app \ home \ home.component.ts - होम घटक को परिभाषित करता है और एप्लिकेशन के होम पेज के रूप में उपयोग किया जाता है।
import { Component, OnInit } from "@angular/core";
@Component(
{
selector: "Home", templateUrl: "./home.component.html"
}
)
export class HomeComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
}यहाँ,
HomeComponent होम घटक के टेम्पलेट और चयनकर्ता को सेट करता है।
चरण 8
app \ home \ home-routing.module.ts - HomeModule के लिए रूटिंग मॉड्यूल और होम मॉड्यूल के लिए रूटिंग को परिभाषित करने के लिए उपयोग किया जाता है।
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
const routes: Routes = [
{ path: "", component: HomeComponent }
];
@NgModule(
{
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
}
)
export class HomeRoutingModule { }यहाँ,
HomeRoutModule ने HomeComponent के लिए खाली पथ सेट किया है।
चरण 9
app.component.html और home.component.html - इनका उपयोग नेटिवस्क्रिप्ट UI घटकों का उपयोग करके एप्लिकेशन के UI को डिज़ाइन करने के लिए किया जाता है।
अपना ऐप चलाएं
यदि आप किसी भी डिवाइस का उपयोग किए बिना अपना ऐप चलाना चाहते हैं, तो नीचे दिए गए कमांड को टाइप करें -
tns previewइस कमांड को निष्पादित करने के बाद, यह आपके डिवाइस के साथ स्कैन और कनेक्ट करने के लिए QR कोड उत्पन्न करेगा।
उत्पादन
QRCode
अब QR कोड जनरेट होता है और अगले चरण में PlayGround से कनेक्ट होता है।
नेटिवस्क्रिप्ट PlayGround
अपने iOS या Android मोबाइल पर NativeScript PlayGround ऐप खोलें, फिर स्कैन QR कोड विकल्प चुनें। यह कैमरा खोल देगा। कंसोल पर प्रदर्शित क्यूआर कोड पर ध्यान दें। यह QR कोड स्कैन करेगा। क्यूआर कोड को स्कैन करने से एप्लिकेशन बिल्ड ट्रिगर हो जाएगा और फिर एप्लिकेशन को नीचे दिए गए अनुसार डिवाइस में सिंक करना होगा -
Copying template files...
Platform android successfully added. v6.3.1
Preparing project...
File change detected. Starting incremental webpack compilation...
webpack is watching the files…
Hash: 1f38aaf6fcda4e082b88
Version: webpack 4.27.1
Time: 9333ms
Built at: 01/04/2020 4:22:31 PM
Asset Size Chunks Chunk Names
0.js 8.32 KiB 0 [emitted]
bundle.js 22.9 KiB bundle [emitted] bundle
package.json 112 bytes [emitted]
runtime.js 73 KiB runtime [emitted] runtime
tns-java-classes.js 0 bytes [emitted]
vendor.js 345 KiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built]
[./app/app.component.html] 62 bytes {bundle} [built]
[./app/app.component.ts] 354 bytes {bundle} [built]
[./app/app.module.ts] 3.22 KiB {bundle} [built]
[./app/home/home.module.ts] 710 bytes {0} [built]
[./main.ts] 1.84 KiB {bundle} [built]
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built]
[nativescript-angular/platform] external "nativescript-angular/platform" 42
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built]
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42
bytes {bundle} [built]
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built]
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built]
+ 15 hidden modules Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f).
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f).
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal.
LOG from device Bala Honor Holly: Angular is running in the development mode.
Call enableProdMode() to enable the production mode.उत्पादन
स्कैन करने के बाद, आपको अपने डिवाइस पर अपना BlankNgApp देखना चाहिए। यह नीचे दिखाया गया है -
डिवाइस पर अपना ऐप चलाएं
यदि आप अपने एप्लिकेशन में कनेक्टेड डिवाइस का परीक्षण करना चाहते हैं, तो आप नीचे दिए गए सिंटैक्स का उपयोग करके इसे सत्यापित कर सकते हैं -
'tns device <Platform> --available-devices'उसके बाद, आप नीचे दिए गए आदेश का उपयोग करके अपने एप्लिकेशन को निष्पादित कर सकते हैं -
tns runउपरोक्त कमांड का उपयोग आपके ऐप्स को स्थानीय रूप से बनाने और एंड्रियोड या iOS उपकरणों पर स्थापित करने के लिए किया जाता है। अगर आप अपना ऐप एंड्रॉइड सिम्युलेटर पर चलाना चाहते हैं, तो नीचे दिए गए कमांड को टाइप करें -
tns run androidIOS डिवाइस के लिए, आप नीचे दिए गए कमांड का पालन कर सकते हैं -
tns run iosयह एंड्रॉइड / आईओएस डिवाइस में ऐप को इनिशियलाइज़ करेगा। हम इस बारे में आगामी अध्यायों में विस्तार से चर्चा करेंगे।
LiveSync
NativeScript पूर्वावलोकन आवेदन में परिवर्तन में वास्तविक समय सिंक्रनाइज़ेशन प्रदान करता है। अपने किसी भी पसंदीदा संपादक (विजुअल स्टूडियो कोड बेहतर विज़ुअलाइज़ेशन के लिए आदर्श विकल्प होगा) का उपयोग करके परियोजना को खोलें। आइए हम अपने कोड में कुछ बदलाव करें और देखें कि LiveSync में इसका पता कैसे लगाया जाएगा।
अब फ़ाइल app.css खोलें और इसमें सामग्री नीचे होगी -
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/blue.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */यहां, आयात विवरण हमारे ऐप की रंग योजना को बताता है। आइए ब्लू कलर स्कीम को बदलते हैंbrown रंग योजना नीचे बताई गई है -
@import "~@nativescript/theme/css/core.css";
@import "~@nativescript/theme/css/brown.css";
/* Place any CSS rules you want to apply on both iOS and Android here.
This is where the vast majority of your CSS code goes. */हमारे डिवाइस में आवेदन ताज़ा हो जाता है और आपको नीचे दिखाए अनुसार एक भूरे रंग का ActionBar देखना चाहिए -
उत्पादन
नीचे BlankNgApp होम पेज - ब्राउन थीम है।
NativeScript सरल टैब बनाने के लिए बहुत सारे रेडीमेड टेम्प्लेट प्रदान करता है लेकिन जटिल टैब आधारित अनुप्रयोग के लिए पूरी तरह कार्यात्मक अनुप्रयोग।
टेम्पलेट का उपयोग करना
जैसा कि पहले सीखा गया था, नए एप्लिकेशन का उपयोग करके बनाया जा सकता है create tns कमांड का उपकमांड।
tns create <app-name> --template <tns-template-name>यहाँ,
tns-template-name टेम्पलेट का नाम है।
यदि आप जावास्क्रिप्ट का उपयोग करके एक पृष्ठ और बिना किसी कस्टम शैली के एक टेम्पलेट बनाना चाहते हैं, तो नीचे दिए गए कमांड का उपयोग करें -
tns create <app-name> --template tns-template-blankऊपर दिए गए प्रकार टेम्पलेट का उपयोग करके निम्न टेम्पलेट बनाया जा सकता है -
tns create <app-name> --template tns-template-blank-tsनेविगेशन टेम्पलेट
नेविगेशन टेम्पलेट का उपयोग मध्यम से जटिल एप्लिकेशन को बनाने के लिए किया जाता है। यह पूर्व-कॉन्फ़िगर के साथ आता हैSideDrawer कई पृष्ठों के साथ घटक। SideDrawerघटक में नेविगेशन UI या सामान्य सेटिंग्स के लिए एक छिपा हुआ दृश्य है। नेविगेशन आधारित एप्लिकेशन बनाने के लिए नीचे दिए गए आदेश का उपयोग करें -
tns create <app-name> --template tns-template-drawer-navigationटैब नेविगेशन टेम्प्लेट
टैब आधारित एप्लिकेशन बनाने के लिए टैब नेविगेशन टेम्प्लेट का उपयोग किया जाता है। यह पूर्व-कॉन्फ़िगर के साथ आता हैTabViewकई पृष्ठों के साथ घटक। टैब आधारित एप्लिकेशन बनाने के लिए नीचे दिए गए आदेश का उपयोग करें -
tns create <app-name> --template tns-template-tab-navigationमास्टर-डिटेल टेम्पलेट
मास्टर-डिटेल टेम्पलेट का उपयोग सूची में प्रत्येक आइटम के लिए विवरण पृष्ठ के साथ सूची आधारित एप्लिकेशन बनाने के लिए किया जाता है।
tns create <app-name> --template tns-template-master-detailकस्टम टेम्पलेट
सरल अनुकूलित टेम्पलेट बनाने के लिए, हमें रिक्त टेम्प्लेट को क्लोन करना होगा। जैसा कि आप पहले से ही जानते हैं, नेटिवस्क्रिप्ट जावास्क्रिप्ट, टाइपस्क्रिप्ट, कोणीय और वी.जे. टेम्पलेट का समर्थन करता है ताकि आप किसी भी भाषा को चुन सकें और अपना अनुकूलित बना सकें।
उदाहरण के लिए, नीचे दिए गए कमांड का उपयोग करके git रिपॉजिटरी से सरल और अनुकूलित टेम्पलेट -
git clone https://github.com/NativeScript/template-blank-ts.gitअब, यह मोबाइल एप्लिकेशन संरचना बनाएगा ताकि आप कोई भी परिवर्तन कर सकें और अपना Android / iOS उपकरण चला सकें। दिशानिर्देशों की सूची के आधार पर यह संरचना। हमें दिशानिर्देशों को संक्षेप में देखें।
संरचना
आपका अनुकूलित टेम्पलेट निम्नलिखित आवश्यकताओं को पूरा करना चाहिए -
अपना कोड अपने ऐप रूट फ़ोल्डर के अंदर न रखें।
एक अलग फ़ोल्डर बनाएँ और अंदर सुविधा क्षेत्र जोड़ें।
पृष्ठ, दृश्य मॉडल और सेवा को सुविधा क्षेत्र में रखा जाना चाहिए। यह साफ और स्वच्छ कोड बनाने में मदद करता है।
पृष्ठ फ़ोल्डर और अंदर .ts, .xml, .scss / css, आदि , फाइलें बनाएँ।
package.json
अपने ऐप टेम्प्लेट के रूट फ़ोल्डर में package.json फ़ाइल रखें। प्रारूप का उपयोग करके नाम संपत्ति के लिए एक मूल्य प्रदान करें -
{
"name": "tns-template-blank-ts",
displayName": "template-blank",
}संस्करण संपत्ति के लिए एक मान असाइन करें। यह नीचे परिभाषित किया गया है -
"version": "3.2.1",अपने ऐप में प्राथमिक प्रविष्टि बिंदु को निर्दिष्ट करने वाली मुख्य संपत्ति के लिए एक मूल्य असाइन करें। यह नीचे परिभाषित किया गया है -
"main": "app.js",Android प्रॉपर्टी के लिए एक मान असाइन करें। यह नीचे परिभाषित किया गया है -
"android": {
"v8Flags": "--expose_gc"
},रिपॉजिटरी प्रॉपर्टी को आपके कोड के अंदर निर्दिष्ट किया जाना चाहिए -
"repository": {
"type": "git",
"url": "https://github.com/NativeScript/template-master-detail-ts"
},अंदाज
नीचे दिए गए सिंटैक्स का उपयोग करके अपने ऐप टेम्प्लेट में स्टाइल और थीम आयात करें -
@import '~nativescript-theme-core/scss/light';हम नीचे दिए गए कोड का उपयोग करके कस्टम बैकग्राउंड कलर भी असाइन कर सकते हैं -
/* Colors */
$background: #fff;
$primary: lighten(#000, 13%);नेटिवस्क्रिप्ट उपयोगकर्ता इंटरफ़ेस घटकों का एक बड़ा सेट प्रदान करता है और इसे 'विजेट' कहा जाता है। प्रत्येक विजेट एक विशेष कार्य करता है और तरीकों के एक सेट के साथ आता है। आइए इस खंड में NativeScript विजेट्स के बारे में विस्तार से समझते हैं।
बटन
बटन नल घटना कार्रवाई को निष्पादित करने के लिए एक घटक है। जब कोई उपयोगकर्ता बटन टैप करता है तो वह संबंधित क्रिया करता है। यह नीचे परिभाषित किया गया है -
<Button text="Click here!" tap="onTap"></Button>आइए नीचे दिए गए के रूप में हमारे BlankNgApp में बटन जोड़ें -
चरण 1
को खोलो src\app\home\home.component.html. यह हमारे होम कंपोनेंट का UI डिज़ाइन पेज है।
चरण 2
के अंदर एक बटन जोड़ें GirdLayoutघटक। पूरा कोड इस प्रकार है -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<GridLayout>
<button text="Click Here!"></button>
</GridLayout>उत्पादन
नीचे बटन का उत्पादन है -
चरण 3
हम नीचे दिए गए अनुसार CSS का उपयोग करके बटन को स्टाइल कर सकते हैं -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<GridLayout>
<button text="Click Here!" class="-primary"></button>
</GridLayout>यहाँ, -primary प्राथमिक बटन का प्रतिनिधित्व करने के लिए कक्षा का उपयोग किया जाता है।
उत्पादन
नीचे का उत्पादन है ButtonPrimary -
चरण 4
NativeScript बटन में कस्टम आइकन प्रदान करने के लिए स्वरूपित विकल्प प्रदान करता है। नमूना कोड इस प्रकार है -
<GridLayout>
<Button class="-primary">
<FormattedString>
<Span text="" class="fa"></Span>
<Span text=" Button.-primary with icon"></Span>
</FormattedString>
</Button>
</GridLayout>
.fa {
font-family: "FontAwesome", "fontawesome-webfont";
}यहाँ,
& # xf099 फ़ॉन्ट में आइकन का स्थान निर्दिष्ट करता है, FontAwesome। नवीनतम फ़ॉन्ट विस्मयकारी फ़ॉन्ट डाउनलोड करें और फ़ॉन्ट-webfont.ttf को src \ font फ़ोल्डर में रखें।
उत्पादन
नीचे का उत्पादन है ButtonPrimary -
चरण 5
नीचे दिए गए सिंटैक्स का उपयोग करके गोल बटन बनाया जा सकता है -
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>उत्पादन
नीचे ButtonPrimary का आउटपुट है -
लेबल
स्थिर पाठ प्रदर्शित करने के लिए लेबल घटक का उपयोग किया जाता है। नीचे दिए गए मुख पृष्ठ को बदलें -
<GridLayout>
<Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
</Label>
</GridLayout>यहां, यदि पाठ चौड़ाई स्क्रीन चौड़ाई से अधिक फैली हुई है, तो टेक्स्टवैप लेबल की सामग्री को लपेटता है।
उत्पादन
नीचे लेबल का आउटपुट है -
पाठ का क्षेत्र
TextField घटक का उपयोग उपयोगकर्ता से जानकारी प्राप्त करने के लिए किया जाता है। नीचे बताए अनुसार हम अपना होम पेज बदलें -
<GridLayout>
<TextField hint="Username"
color="lightblue"
backgroundColor="lightyellow"
height="75px">
</TextField>
</GridLayout>यहाँ,
रंग पाठ रंग का प्रतिनिधित्व करता है
पृष्ठभूमि बॉक्स पाठ बॉक्स की पृष्ठभूमि का प्रतिनिधित्व करते हैं
ऊंचाई पाठ बॉक्स की ऊंचाई का प्रतिनिधित्व करती है
उत्पादन
नीचे टेक्स्ट फील्ड का आउटपुट है -
व्याख्यान दर्शन
TextView घटक का उपयोग उपयोगकर्ता से बहु-पंक्ति पाठ सामग्री प्राप्त करने के लिए किया जाता है। नीचे बताए अनुसार हम अपना होम पेज बदलें -
<GridLayout>
<TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100">
</TextView>
</GridLayout>इधर, maxLength द्वारा स्वीकार अधिकतम लंबाई का प्रतिनिधित्व TextView ।
उत्पादन
नीचे TextView का आउटपुट है -
खोज पट्टी
इस घटक का उपयोग किसी भी प्रश्न को खोजने या किसी भी अनुरोध को प्रस्तुत करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
<StackLayout>
<SearchBar id="bar" hint="click here to search ..."></SearchBar>
<StackLayout>
हम शैलियों को लागू कर सकते हैं -
<StackLayout>
<SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar>
</StackLayout>नीचे SearchBarStyle का आउटपुट दिया गया है -
स्विच
स्विच विकल्पों के बीच चयन करने के लिए टॉगल पर आधारित है। डिफ़ॉल्ट स्थिति गलत है। यह नीचे परिभाषित किया गया है -
<StackLayout>
<Switch checked="false" loaded="onSwitchLoaded"></Switch>
</StackLayout>उपरोक्त कार्यक्रम के लिए आउटपुट नीचे दिखाया गया है -
स्लाइडर
संख्यात्मक रेंज लेने के लिए स्लाइडर एक स्लाइडिंग घटक है। यह नीचे परिभाषित किया गया है -
<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>उपरोक्त कार्यक्रम के लिए आउटपुट नीचे दिया गया है -
प्रगति
प्रगति विजेट एक ऑपरेशन में प्रगति को इंगित करता है। वर्तमान प्रगति को बार के रूप में दर्शाया गया है। यह नीचे परिभाषित किया गया है -
<StackLayout verticalAlign="center" height="50">
<Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>नीचे प्रगति विजेट का उत्पादन है -
ActivityIndicator
एक्टिविटीइंडिएटर एक कार्य को प्रगति में दिखाता है। यह नीचे परिभाषित किया गया है -
<StackLayout verticalAlign="center" height="50">
<ActivityIndicator busy="true" color="red" width="50"
height="50"></ActivityIndicator>
</StackLayout>एक्टिविटीइंडिएटर के लिए नीचे आउटपुट है -
छवि
एक छवि प्रदर्शित करने के लिए छवि विजेट का उपयोग किया जाता है। इसे 'ImageSource' url का उपयोग करके लोड किया जा सकता है। यह नीचे परिभाषित किया गया है -
<StackLayout class="m-15" backgroundColor="lightgray">
<Image src="~/images/logo.png" stretch="aspectFill"></Image>
</StackLayout>छवि विजेट के लिए आउटपुट नीचे दिखाया गया है -
वेब-दृश्य
WebView वेब पेज दिखाता है। URL का उपयोग करके वेब पेज लोड किए जा सकते हैं। यह नीचे परिभाषित किया गया है -
<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>उपरोक्त कोड के लिए आउटपुट नीचे दिखाया गया है -
खजूर बीनने वाला
DatePicker घटक का उपयोग दिनांक चुनने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
<StackLayout class="m-15" backgroundColor="lightgray">
<DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker>
</StackLayout>DatePicker घटक का आउटपुट नीचे दिखाया गया है -
timepicker
टाइमपिकर घटक का उपयोग समय लेने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
<StackLayout class="m-15" backgroundColor="lightgray">
<TimePicker hour="9"
minute="25"
maxHour="23"
maxMinute="59"
minuteInterval="5">
</TimePicker>
</StackLayout>नीचे TimePicker घटक का उत्पादन है -
नेटिवस्क्रिप्ट यूआई विजेट घटक को बिछाने के एकमात्र उद्देश्य के लिए कंटेनर घटक का संग्रह प्रदान करता है। लेआउट कंटेनर मूल घटक के रूप में कार्य करते हैं और इसमें एक या अधिक बाल घटक हो सकते हैं। एक लेआउट कंटेनर के सभी बाल घटकों को उसके मूल लेआउट कंटेनर द्वारा प्रदान की गई तकनीक के आधार पर व्यवस्थित किया जा सकता है।
नेटिवस्क्रिप्ट छह लेआउट कंटेनरों का समर्थन करता है और वे निम्नानुसार हैं -
निरपेक्ष लेआउट कंटेनर
डॉक लेआउट कंटेनर
ग्रिड लेआउट कंटेनर
स्टैक लेआउट कंटेनर
लपेटें कंटेनर
FlexBox लेआउट कंटेनर
आइए इस अध्याय में सभी लेआउट कंटेनर अवधारणाओं के बारे में विस्तार से जानें।
पूर्ण लेआउट
AbsoluteLayoutकंटेनर नेटिवस्क्रिप्ट में सबसे सरल लेआउट कंटेनर है। AbsoluteLayout अपने बच्चों पर किसी भी बाधा को लागू नहीं करता है और मूल के रूप में शीर्ष-बाएं कोने के साथ 2-आयामी समन्वय प्रणाली का उपयोग करके अपने बच्चों को इसके अंदर रखेगा।
AbsoluteLayout अपने बच्चों के चार गुणों का उपयोग करके उन्हें स्थिति देता है और वे इस प्रकार हैं -
top - बच्चे की उत्पत्ति को y दिशा में नीचे की ओर बढ़ने से निर्धारित करता है।
left - x दिशा में मूल चलती फुटपाथ से बच्चे के स्थान को परिभाषित करता है।
width - बच्चे की चौड़ाई को परिभाषित करता है।
height - बच्चे की ऊंचाई को परिभाषित करता है।
हमें नीचे दिए गए आवेदन के मुख पृष्ठ में AbsoluteLayout कंटेनर जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<AbsoluteLayout width="200" height="300" backgroundColor="blue">
<Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
</Label>
<Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label>
<Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
</Label>
<Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label>
</AbsoluteLayout>उत्पादन
AbsoluteLayout का आउटपुट निम्नानुसार है -
DockLayout
Docklayoutकंटेनर घटक अपने बच्चों को इसके अंदर गोदी करने में सक्षम बनाता है। कंटेनर के प्रत्येक तरफ (ऊपर, नीचे, बाएं, दाएं) एक बच्चे के घटक को डॉक कर सकते हैं। DockLayout कंटेनर अपने बच्चों की डॉक प्रॉपर्टी का उपयोग उन्हें सही तरीके से डॉक करने के लिए करता है।
डॉक प्रॉपर्टी के संभावित मूल्य इस प्रकार हैं -
top - लेआउट कंटेनर शीर्ष कोने पर बच्चे के घटक डॉक।
bottom - लेआउट कंटेनर नीचे कोने में बच्चे के घटक को गोदी में लेते हैं।
left - लेआउट कंटेनर बाएं कोने पर बच्चे के घटक डॉक।
right - लेआउट कंटेनर दाएं कोने पर बच्चे के घटक को डॉक करें।
डिफ़ॉल्ट रूप से, DockLayoutकंटेनर अपने अंतिम बाल घटक को डॉक करता है। यह अपनी stretchLastChild संपत्ति को शून्य पर सेट करके ओवरराइड कर सकता है।
हमें जोड़ते हैं DockLayout नीचे के रूप में हमारे आवेदन के मुख पृष्ठ में कंटेनर -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false">
<Label text="left" dock="left" width="50" backgroundColor="green"></Label>
<Label text="top" dock="top" height="50" backgroundColor="orange"></Label>
<Label text="right" dock="right" width="50" backgroundColor="red"></Label<
<Label text="bottom" dock="bottom" height="50"
backgroundColor="orange"></Label>
</DockLayout>उत्पादन
नीचे DockLayout के लिए आउटपुट है -
जाली का नक्शा
ग्रिडलेयआउट कंटेनर घटक जटिल लेआउट कंटेनर में से एक है और पंक्तियों और स्तंभों के साथ सारणीबद्ध प्रारूप में बाल तत्वों की व्यवस्था करता है। डिफ़ॉल्ट रूप से, इसमें एक पंक्ति और एक कॉलम होता है। इसके निम्नलिखित गुण हैं -
columns- प्रत्येक कॉलम की डिफ़ॉल्ट चौड़ाई का प्रतिनिधित्व करने के लिए, द्वारा अलग किया जाता है। संभावित मूल्य संख्या, * और ऑटो कीवर्ड हैं।
कहाँ पे,
संख्या एक पूर्ण स्तंभ चौड़ाई को इंगित करती है।
अन्य स्तंभों के सापेक्ष स्तंभ की चौड़ाई इंगित करता है। यह इंगित करने के लिए संख्या से पूर्व किया जा सकता है कि स्तंभ की चौड़ाई अन्य स्तंभ के सापेक्ष कितनी बार होनी चाहिए। उदाहरण के लिए, 2 * इंगित करें कि चौड़ाई स्तंभ के सबसे छोटे स्तंभ की चौड़ाई से 2 गुना होनी चाहिए।
ऑटो कॉलम की चौड़ाई को उसके सबसे चौड़े बच्चे की तरह इंगित करता है।
उदाहरण के लिए, *, 2 * का अर्थ है दो कॉलम और दूसरा पहले कॉलम के आकार का दोगुना होगा।
rows - प्रत्येक पंक्ति की डिफ़ॉल्ट ऊंचाई का प्रतिनिधित्व करने के लिए, द्वारा अलग किया जाता है। मान प्रतिनिधित्व स्तंभों के समान है।
GridLayout अपने बच्चों के नीचे निर्दिष्ट गुणों का उपयोग उन्हें लेआउट करने के लिए करता है -
row - पंक्ति संख्या
rowSpan - कुल पंक्तियों की संख्या जो बाल सामग्री एक लेआउट के भीतर फैली हुई है।
colSpan - बच्चे की सामग्री की कुल संख्या एक लेआउट के भीतर फैली हुई है।
हमें नीचे दिए गए आवेदन के मुख पृष्ठ में GridLayout कंटेनर जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
backgroundColor="blue">
<Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label>
<Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label>
<Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label>
<Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label>
</GridLayout>उत्पादन
नीचे ग्रिडलाइउट का आउटपुट दिया गया है -
StackLayout
स्टैकलैटआउट अपने बच्चों को क्षैतिज या लंबवत एक आयामी रेखा में व्यवस्थित करता है। यह लेआउट विकल्पों में से लेआउट में अंतरिक्ष के आधार पर आकार ले सकता है। इसमें ओरिएंटेशन प्रॉपर्टी है जिसका उपयोग दिशा, क्षैतिज या ऊर्ध्वाधर निर्दिष्ट करने के लिए किया जा सकता है।
हमें नीचे दिए गए आवेदन के मुख पृष्ठ में StackLayout कंटेनर जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue">
<Label text="Label1" width="50" height="50" backgroundColor="green"></Label>
<Label text="Label2" width="50" height="50" backgroundColor="brown"></Label>
<Label text="Label3" width="50" height="50" backgroundColor="red"></Label>
<Label text="Label4" width="50" height="50" backgroundColor="orange"></Label>
</StackLayout>उत्पादन
StackLayout के लिए आउटपुट नीचे दिखाया गया है -
WrapLayout
WrapLayout का उपयोग नई पंक्तियों या स्तंभों पर सामग्री को लपेटने के लिए किया जाता है।
इसके निम्नलिखित तीन गुण हैं -
orientation - क्षैतिज या लंबवत रूप से प्रदर्शित करें।
itemWidth - प्रत्येक बच्चे के लिए लेआउट चौड़ाई।
itemHeight - प्रत्येक बच्चे के लिए लेआउट ऊंचाई।
नीचे दिए गए हमारे आवेदन के मुख पृष्ठ में WrapLayout कंटेनर जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
<Label text="Label1" width="70" height="70" backgroundColor="green"></Label>
<Label text="Label2" width="70" height="70" backgroundColor="brown"></Label
<Label text="Label3" width="70" height="70" backgroundColor="red"></Label>
<Label text="Label4" width="70" height="70" backgroundColor="orange"></Label>
</WrapLayout>उत्पादन
फ्लेक्सबॉक्स लेआउट
FlexboxLayout कंटेनर घटक उन्नत लेआउट कंटेनर में से एक है। यह बहुत जटिल और परिष्कृत लेआउट के लिए सरल लेआउट प्रदान करने का विकल्प प्रदान करता है। यह CSS फ्लेक्सबॉक्स पर आधारित है।
FlexboxLayout घटक में बहुत सारे गुण हैं और वे निम्नानुसार हैं -
flexDirection
यह उस दिशा का प्रतिनिधित्व करता है जिसमें बच्चे के घटक व्यवस्थित होते हैं। FlexDirection के संभावित मान इस प्रकार हैं -
row - बाल घटकों को कंधे से कंधा मिलाकर व्यवस्थित किया जाता है।
row-reverse - बाल घटकों को कंधे से कंधा मिलाकर उल्टा दिशा में व्यवस्थित किया जाता है।
column - बाल घटकों को एक दूसरे के नीचे व्यवस्थित किया जाता है।
column-reverse - बाल घटकों को एक के नीचे एक, लेकिन उल्टी दिशा में व्यवस्थित किया जाता है।
हमें अपने आवेदन के मुख पृष्ठ में FlexLayout कंटेनर को नीचे के रूप में जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="row">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>उत्पादन
नीचे FlexLayout का उत्पादन है - पंक्ति -
अब, हमें flexDirection मान को पंक्ति से पंक्ति-रिवर्स में बदलें और जांचें कि यह लेआउट को कैसे प्रभावित करता है।
<ActionBar>
<Label text="Home"></Label>
</ActionBar> <FlexboxLayout flexDirection="row-reverse">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>उत्पादन
नीचे फ्लेक्स लेआउट का आउटपुट है - रो रिवर्स -
आइए हम पंक्ति-रिवर्स से कॉलम में फ्लेक्सडायरेक्शन मूल्य को बदलते हैं और यह जांचते हैं कि यह लेआउट को कैसे प्रभावित करता है।
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="column">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>उत्पादन
FlexLayout के लिए आउटपुट - कॉलम नीचे दिया गया है -
आइए फ्लेक्सडायरेक्शन मूल्य को कॉलम से कॉलम-रिवर्स में बदलें और जांचें कि यह लेआउट को कैसे प्रभावित करता है।
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="column-reverse">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
</FlexboxLayout>उत्पादन
नीचे FlexLayout का आउटपुट है - कॉलम रिवर्स -
flexWrap
यह दर्शाता है कि फ्लेक्सडायरेक्शन द्वारा निर्धारित दिशा में लपेटकर बाल घटकों को एक पंक्ति / स्तंभ में प्रस्तुत किया जाएगा या कई पंक्तियों में प्रवाहित किया जाएगा।
संभावित मान इस प्रकार हैं -
wrap - दिए गए दिशा (flexDirection) में कोई स्थान उपलब्ध नहीं होने पर, बच्चों के घटकों को लपेटता है।
wrap-reverse - विपरीत दिशा में घटक प्रवाह को छोड़कर रैप के समान।
हमें flexWrap गुण जोड़ते हैं और फिर रैप के रूप में इसका मान सेट करते हैं। नीचे बताए अनुसार तीन और बच्चे भी जोड़ें -
<ActionBar>
<Label text="Home"></Label>
&tl;/ActionBar>
<FlexboxLayout flexDirection="row" flexWrap="wrap">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
<Label text="Sixth Item" backgroundColor="green"></Label>
<Label text="Seventh Item" backgroundColor="red"></Label>
<Label text="Eighth Item" backgroundColor="green"></Label>
</FlexboxLayout>उत्पादन
नीचे flexWrap के लिए उत्पादन है -
JustifyContent
यह दर्शाता है कि एक दूसरे और समग्र संरचना के संबंध में बाल घटकों की व्यवस्था कैसे की जाती है। नीचे दिए गए अनुसार इसके तीन गुण हैं -
flex-end - यह चाइल्ड कंपोनेंट को अंतिम लाइन की ओर पैक करता है।
space-between - यह लाइन में समान रूप से वितरित करके बच्चे के घटक को पैक करता है।
space-around - स्पेस-बीच के समान इसके अलावा यह चाइल्ड कंपोनेंट को समान रूप से लाइन में बांटने के साथ-साथ उनके आस-पास के बराबर स्पेस को पैक करता है।
आइए हम औचित्यपूर्ण जोड़ें और यह जांचें कि यह कैसे व्यवहार करता है -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around">
<Label text="First Item" backgroundColor="red"></Label>
<Label text="Second Item" backgroundColor="green"></Label>
<Label text="Third Item" backgroundColor="red"></Label>
<Label text="Fourth Item" backgroundColor="green"></Label>
<Label text="Fifth Item" backgroundColor="red"></Label>
<Label text="Sixth Item" backgroundColor="green"></Label>
<Label text="Seventh Item" backgroundColor="red"></Label>
<Label text="Eighth Item" backgroundColor="green"></Label>
</FlexboxLayout>उत्पादन
नीचे फ्लेक्स लेआउट का उत्पादन है - औचित्य -
FlexLayout कंटेनर अपने बच्चों को आदेश और सिकुड़ने की क्षमता को निर्दिष्ट करने के लिए दो और गुण प्रदान करता है। वे इस प्रकार हैं -
order - यह उस आदेश को निर्धारित करता है जिसमें FlexLayout कंटेनर के बच्चों को प्रदान किया जाएगा।
flexShrink - यह बच्चों के स्तर 0 तक सिकुड़ने की क्षमता को निर्धारित करता है।
नेविगेशन उपयोगकर्ताओं को अपनी वांछित स्क्रीन पर जल्दी से स्वाइप करने या ऐप के माध्यम से नेविगेट करने या किसी विशेष कार्य को करने में सक्षम बनाता है। नेविगेशन घटक आपको सरल बटन क्लिक का उपयोग करके अधिक जटिल पैटर्न में नेविगेशन को लागू करने में मदद करता है।
नेवीस्क्रिप्ट के कोर और कोणीय संस्करण के बीच नेविगेशन में पर्याप्त अंतर है। जबकि कोर फ्रेमवर्क नेविगेशन नेविगेशन प्रक्रिया के लिए नींव है, नेटिवस्क्रिप्ट का कोणीय मॉडल कोर नेविगेशन अवधारणा को अपनाता है और इसे कोणीय ढांचे के साथ संगत बनाने के लिए विस्तारित करता है।
आइए हम इस अध्याय में कोर नेविगेशन अवधारणा और नेविगेशन के कोणीय अपनाने दोनों को देखें।
मूल अवधारणा
आइए समझते हैं कि इस अध्याय में कोर नेटिवस्क्रिप्ट में नेविगेशन कैसे काम करता है।
NativeScript में, नेविगेशन चार अलग-अलग श्रेणियों में विभाजित होता है, यह नीचे दिए गए निर्देशों के अनुसार लागू होता है -
आगे का नेविगेशन
बैकवर्ड नेविगेशन
पार्श्व नेविगेशन
निचला नेविगेशन
आगे का नेविगेशन
फ़ॉरवर्ड नेवीगेशन से तात्पर्य अगले स्तर के पदानुक्रम में उपयोगकर्ताओं को स्क्रीन पर नेविगेट करने से है। यह दो नेटिवस्क्रिप्ट घटकों पर आधारित है,Frame तथा Page.
Frame
फ़्रेम नेविगेशन के लिए मूल स्तर का घटक है। यह एक दृश्यमान कंटेनर नहीं है, लेकिन पृष्ठों के बीच संक्रमण के लिए एक कंटेनर के रूप में कार्य करता है।
एक सरल उदाहरण इस प्रकार है -
<Frame id="featured" defaultPage="featured-page" />यहाँ,
फ़्रेम पृष्ठ-पृष्ठ पृष्ठ घटक पर नेविगेट (या लोड) करता है और उसे रेंडर करता है।
Page
पृष्ठ फ़्रेम घटक के बगल में है और यह UI घटक के लिए एक कंटेनर के रूप में कार्य करता है। सरल उदाहरण नीचे परिभाषित किया गया है -
<Page loaded="onPageLoaded">
<ActionBar title="Item" class="action-bar"></ActionBar>
<AbsoluteLayout>
<Label text="Label"/<
<Button text="navigate('another-page')" tap="onTap"/>
</AbsoluteLayout>
</Page>यहाँ,
प्रारंभ में, पृष्ठ स्क्रीन के सभी UI घटक को लोड करता है और इसे रेंडर करता है।
जब उपयोगकर्ता बटन पर क्लिक करता है, तो यह उपयोगकर्ता को नेविगेट करेगा another-page पृष्ठ।
बैकवर्ड नेविगेशन
बैकवर्ड नेविगेशन विधि एक ऐप के भीतर या विभिन्न ऐप में स्क्रीन के माध्यम से बैकवर्ड आंदोलन को सक्षम बनाता है। यह फॉरवर्ड नेविगेशन की विपरीत दिशा है। पिछले पृष्ठ पर वापस जाने के लिए सरल goBack () विधि का उपयोग किया जाता है।
यह नीचे परिभाषित किया गया है -
<Page class="page" loaded="onPageLoaded">
<ActionBar title="Item" class="action-bar"></ActionBar>
<StackLayout class="home-panel">
<Button class="btn btn-primary" text="Back" tap="goBack"/>
</StackLayout>
</Page>यहाँ,
goBack() उपयोगकर्ता द्वारा बटन टैप करने पर विधि चालू हो जाएगी। goBack() यदि उपलब्ध है, तो उपयोगकर्ताओं को पिछले पृष्ठ पर नेविगेट करता है।
पार्श्व नेविगेशन
पार्श्व नेविगेशन, पदानुक्रम के समान स्तरों पर स्क्रीन के बीच के नेविगेशन को संदर्भित करता है। यह हब पैटर्न पर आधारित है। यह विशिष्ट नेविगेशन घटकों जैसे कि बोटनैविगेशन, टैब्स, टैब व्यू, साइडड्रावर और मोडल व्यू के माध्यम से सक्षम है।
एक साधारण उदाहरण नीचे दिया गया है -
<Page class="page" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Hub" class="action-bar"></ActionBar>
<StackLayout class="home-panel">
<Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" />
<Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
</StackLayout>
</Page>यहाँ,
navigateToFeatured फ़ंक्शन उपयोगकर्ता को चुनिंदा पृष्ठ पर नेविगेट करने के लिए नेविगेट () विधि का उपयोग करता है।
इसी तरह, navigateToSearch फ़ंक्शन उपयोगकर्ता को खोज पृष्ठ पर नेविगेट करेगा।
हब पेज पेज स्क्रीन में उपलब्ध नेविगेट विधि का उपयोग करके भी पहुँचा जा सकता है और एक हब पेज से बाहर जा सकता है।
एक सरल उदाहरण इस प्रकार है -
<Page class="page">
<ActionBar title="Item" class="action-bar"></ActionBar>
<StackLayout class="home-panel">
<Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" />
<Button class="btn btn-primary" text="goBack()" tap="goBack" />
</StackLayout>
</Page>नीचे और टैब नेविगेशन
मोबाइल ऐप्स में नेविगेशन की सबसे आम शैली टैब-आधारित नेविगेशन है। टैब नेविगेशन को स्क्रीन के नीचे या शीर्ष लेख के नीचे शीर्ष पर व्यवस्थित किया जाता है। यह TabView और निचला स्तर घटक का उपयोग करके प्राप्त किया जाता है ।
कोणीय आधारित नेविगेशन
नेटिवस्क्रिप्ट, कोणीय रूटिंग अवधारणा को समायोजित करने के लिए अपनी नेविगेशन अवधारणा का विस्तार करता है। NativeScript, Angular RouterModule का विस्तार करके एक नया मॉड्यूल, NativeScriptRouterModule प्रदान करता है।
नेटिवस्क्रिप्ट कोणीय नेविगेशन अवधारणा को नीचे दिए गए अनुभाग में वर्गीकृत किया जा सकता है -
पेज-राउटर-आउटलेट टैग
nsRouterLink आकर्षक
राउटरटेक्स्ट क्लास
कस्टम राउटररसेस्ट्रेगी
आइए इस अनुभाग में उपरोक्त सभी कोणीय नेविगेशन सीखें।
पेज राउटर आउटलेट
जैसा कि पहले सीखा गया था, पेज-राउटर-आउटलेट, एंगुलर के राउटर-आउटलेट का प्रतिस्थापन है। पेज-राउटर-आउटलेट नेटिवस्क्रिप्ट कोर नेविगेशन ढांचे के फ्रेम और पेज रणनीति को लपेटता है। प्रत्येक पृष्ठ-राउटर-आउटलेट एक नया फ़्रेम घटक बनाता है और आउटलेट में प्रत्येक कॉन्फ़िगर किए गए घटकों को पेज घटक का उपयोग करके लपेटा जाएगा। फिर, अन्य पेज / रूट पर नेविगेट करने के लिए देशी नेविगेट विधि का उपयोग किया जाता है।
राउटर लिंक (nsRouterLink)
nsRouterLink, Angular's RouterLink का प्रतिस्थापन है। यह यूआई घटक को मार्ग का उपयोग करके दूसरे पृष्ठ से लिंक करने में सक्षम बनाता है। nsRouterLink भी नीचे दो विकल्प प्रदान करता है -
pageTransition- इसका इस्तेमाल पेज ट्रांजीशन एनिमेशन सेट करने के लिए किया जाता है। सच डिफ़ॉल्ट संक्रमण सक्षम बनाता है। गलत संक्रमण को निष्क्रिय करता है। स्लाइड, फैडिन, आदि जैसे विशिष्ट मूल्य, विशेष संक्रमण निर्धारित करते हैं।
clearHistory - nsRouterLink का नेविगेशन इतिहास सही है।
एक सरल उदाहरण कोड निम्नानुसार है -
<Button text="Go to Home" [nsRouterLink]="['/home']"
pageTransition="slide" clearHistory="true"></Button>राउटर एक्सटेंशन
नेटिवस्क्रिप्ट RouterExtensions क्लास प्रदान करता है और कोर नेटिवस्क्रिप्ट के नेविगेशन फ़ंक्शन को उजागर करता है।
RouterExtensions द्वारा उजागर तरीके इस प्रकार हैं -
navigate
navigateByUrl
back
canGoBack
backToPreviousPage
canGoBackToPreviousPage
राउटरएक्सटेंशन का उपयोग करने वाला एक सरल उदाहरण कोड निम्नानुसार है -
import { RouterExtensions } from "nativescript-angular/router";
@Component({
// ...
})
export class HomeComponent {
constructor(private routerExtensions: RouterExtensions) { }
}कस्टम मार्ग पुन: उपयोग की रणनीति
नेटिवस्क्रिप्ट एक मोबाइल एप्लिकेशन की वास्तुकला को समायोजित करने के लिए एक कस्टम मार्ग पुन: उपयोग की रणनीति (RouterReuseStrategy) का उपयोग करता है। वेब एप्लिकेशन की तुलना में एक मोबाइल एप्लिकेशन कुछ पहलुओं में भिन्न होता है।
उदाहरण के लिए, पृष्ठ को वेब अनुप्रयोग में तब नष्ट किया जा सकता है जब उपयोगकर्ता पृष्ठ से दूर हो जाता है और उपयोगकर्ता द्वारा पृष्ठ पर नेविगेट करने पर इसे पुन: बनाता है। लेकिन, मोबाइल एप्लिकेशन में, पृष्ठ संरक्षित और पुन: उपयोग किया जाएगा। रूटिंग अवधारणा को डिजाइन करते समय इन अवधारणाओं को ध्यान में रखा जाता है।
मार्गों
NativeScript Angular एप्लीकेशन में एक साधारण राउटिंग मॉड्यूल निम्नानुसार होगा -
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
import { SearchComponent } from "./search.component";
const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
{ path: "search", component: SearchComponent },
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }यहाँ,
रूटिंग मॉड्यूल बहुत कम अपवादों को छोड़कर कोणीय संस्करण के समान है। वास्तव में, मूल निवासी अपनी मूल नेविगेशन रणनीति का उपयोग इसे एक तरह से कोणीय ढांचे के समान उजागर करके करता है।
प्रत्येक GUI एप्लिकेशन में, ईवेंट उपयोगकर्ता सहभागिता को सक्षम करने में बहुत महत्वपूर्ण भूमिका निभाते हैं। जब भी उपयोगकर्ता एप्लिकेशन के साथ इंटरैक्ट करता है, एक ईवेंट फायर हो जाता है और एक संबंधित कार्रवाई निष्पादित की जाएगी।
उदाहरण के लिए, जब उपयोगकर्ता किसी एप्लिकेशन के लॉगिन पृष्ठ में लॉगिन बटन पर क्लिक करता है, तो यह लॉगिन प्रक्रिया को ट्रिगर करता है।
घटनाओं में दो कलाकार शामिल हैं -
Event sender - वस्तु, जो वास्तविक घटना को बढ़ाती है।
Event listener - फ़ंक्शन, जो एक विशेष घटना के लिए सुनते हैं और फिर किसी घटना को निकाल दिए जाने पर निष्पादित होते हैं।
अवलोकनीय वर्ग
यह घटनाओं को संभालने के लिए एक पूर्व-परिभाषित वर्ग है। यह नीचे परिभाषित किया गया है -
const Observable = require("tns-core-modules/data/observable").Observable;NativeScript में, लगभग हर ऑब्जेक्ट ऑब्जर्वेबल क्लास से निकलता है और इसलिए हर ऑब्जेक्ट इवेंट को सपोर्ट करता है।
घटना श्रोता
आइए हम समझते हैं कि एक ऑब्जेक्ट कैसे बनाया जाए और इस अध्याय में ऑब्जेक्ट में एक ईवेंट श्रोता को कैसे जोड़ा जाए।
चरण 1
एक बटन बनाएँ जो नीचे निर्दिष्ट के रूप में एक घटना उत्पन्न करने के लिए उपयोग किया जाता है -
const Button = require("tns-core-modules/ui/button").Button;
const testButton = new Button();चरण 2
नीचे दिए गए अनुसार बटन पर अगला टेक्स्ट जोड़ें -
testButton.text = "Click";चरण 3
एक कार्य बनाएँ, नीचे निर्दिष्ट अनुसार -
let onTap = function(args) {
console.log("you clicked!");
};चरण 4
अब नीचे दिए गए अनुसार ऑन इवेंट को टैप इवेंट में संलग्न करें -
testButton.on("tap", onTap, this);इवेंट श्रोता को जोड़ने का एक वैकल्पिक तरीका इस प्रकार है -
testButton.addEventListener("tap", onTap, this);चरण 5
ईवेंट को संलग्न करने का एक वैकल्पिक तरीका यूआई के माध्यम से नीचे बताए अनुसार है -
<Button text="click" (tap)="onTap($event)"></Button>यहाँ,
$ घटना प्रकार है EventData। EventData में दो गुण होते हैं और वे निम्न हैं -
Object- अवलोकन योग्य उदाहरण जो किसी घटना को बढ़ाने के लिए उपयोग किया जाता है। इस परिदृश्य में, यह बटन ऑब्जेक्ट है।
EventName- यह घटना का नाम है। इस परिदृश्य में, यह टैप ईवेंट है।
चरण 6
अंत में, किसी घटना श्रोता को नीचे बताए अनुसार किसी भी समय अलग किया जा सकता है / हटाया जा सकता है -
testButton.off(Button.onTap);आप नीचे दिखाए गए अनुसार एक अन्य प्रारूप का भी उपयोग कर सकते हैं -
testButton.removeEventListener(Button.onTap);BlankNgApp को संशोधित करना
NativeScript की घटनाओं को बेहतर ढंग से समझने के लिए BlankNgApp एप्लिकेशन को संशोधित करते हैं।
चरण 1
होम घटक का UI खोलें, src/app/home/home.component.html और नीचे कोड जोड़ें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<StackLayout>
<Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>यहाँ,
टैप ईवेंट है और बटन इवेंट रेजर है।
onButtonTap ईवेंट श्रोता है।
चरण 2
होम घटक का कोड खोलें, ‘src/app/home/home.component.ts’ और नीचे दिए गए कोड को अपडेट करें -
import { Component, OnInit } from "@angular/core";
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button"
@Component({
selector: "Home",
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
constructor() {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
onButtonTap(args: EventData): void {
console.log(args.eventName);
const button = <Button>args.object;
console.log(button.text);
}
}यहाँ,
नई घटना श्रोता जोड़ा, onButtonTap।
ईवेंट का नाम, टैप और बटन टेक्स्ट प्रिंट करें, कंसोल में ईवेंट को फायर करें।
चरण 3
एप्लिकेशन चलाएं और बटन टैप करें। यह कंसोल में नीचे की रेखा को प्रिंट करता है।
LOG from device <device name>: tap
LOG from device <device name>: Fire an eventडेटा बाइंडिंग NativeScript द्वारा समर्थित उन्नत अवधारणाओं में से एक है। NativeScript, कोणीय डेटा बाइंडिंग कॉन्सेप्ट का यथासंभव अनुसरण करता है। डेटा बाध्यकारी यूआई घटक को किसी भी प्रोग्रामिंग प्रयास के बिना एप्लिकेशन डेटा मॉडल के वर्तमान मूल्य को दिखाने / अपडेट करने में सक्षम बनाता है।
नेटिवस्क्रिप्ट दो प्रकार के डेटा बाइंडिंग का समर्थन करता है। वे इस प्रकार हैं -
One-Way data binding - जब भी मॉडल बदला जाए तो यूआई को अपडेट करें।
Two-Way data binding- यूआई और मॉडल को सिंक करें। जब भी मॉडल को अपडेट किया जाता है, तो यूआई स्वचालित रूप से अपडेट हो जाता है और जब भी यूआई उपयोगकर्ता से डेटा प्राप्त करता है (यूआई अपडेट हो जाता है), तो मॉडल अपडेट किया जाएगा।
आइए इस खंड में दोनों अवधारणाओं को जानें।
वन-वे डेटा बाइंडिंग
NativeScript UI घटक में एक-तरफ़ा डेटा बाइंडिंग को सक्षम करने के लिए एक सरल विकल्प प्रदान करता है। एकतरफा डेटा बाइंडिंग को सक्षम करने के लिए, बस लक्ष्य यूआई की संपत्ति में वर्ग ब्रैकेट जोड़ें और फिर इसे आवश्यक मॉडल की संपत्ति असाइन करें।
उदाहरण के लिए, लेबल घटक की पाठ सामग्री को अपडेट करने के लिए, बस यूआई कोड को नीचे के रूप में बदलें -
<Label [text]='this.model.prop' />यहाँ,
this.model.prop मॉडल की संपत्ति को संदर्भित करता है।
हमें एक-तरफ़ा डेटा बाइंडिंग को समझने के लिए अपना BlankNgApp बदल दें।
चरण 1
एक नया मॉडल, उपयोगकर्ता (src / model / user.ts) इस प्रकार जोड़ें -
export class User {
name: string
}चरण 2
हमारे घटक का यूआई खोलें, src/app/home/home.component.html और नीचे दिए गए कोड को अपडेट करें -
<ActionBar>
<Label text="Home"></Label>
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto">
<Button text="Click here to greet" class="-primary" color='gray'
(tap)='onButtonTap($event)' row='1' column='0'>
</Button>
<Label [text]='this.user.name' row='2' column='0'
height="50px" textAlignment='center' style='font-size: 16px;
font-weight: bold; margin: 0px 32px 0 25px;'>
</Label>
</GridLayout>यहाँ,
लेबल का पाठ उपयोगकर्ता मॉडल के संपत्ति के नाम पर सेट है।
बटन टैप घटना onButtonTap विधि से जुड़ी है।
चरण 3
होम कंपोनेंट का ओपन कोड, src/app/home/home.component.ts और नीचे दिए गए कोड को अपडेट करें -
import { Component, OnInit } from "@angular/core";
import { User } from "../../model/user"
@Component({
selector: "Home",
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
public user: User;
constructor() {
// Use the component constructor to inject providers.
this.user = new User();
this.user.name = "User1";
}
ngOnInit(): void {
// Init your component properties here.
}
onButtonTap(args: EventData) {
this.user.name = 'User2';
}
}यहाँ,
उपयोगकर्ता मॉडल आयात किया जाता है
उपयोगकर्ता का ऑब्जेक्ट घटक के निर्माता में बनाया गया है
onButtonTap इवेंट कार्यान्वित किया जाता है। OnButtonTap का कार्यान्वयन उपयोगकर्ता ऑब्जेक्ट को अद्यतन करता है और उपयोगकर्ता के रूप में संपत्ति का नाम सेट करता है
चरण 4
एप्लिकेशन को संकलित करें और चलाएँ और मॉडल को बदलने के लिए बटन पर क्लिक करें और यह स्वचालित रूप से बदल जाएगा Label पाठ।
आवेदन की प्रारंभिक और अंतिम स्थिति इस प्रकार है -
प्रारम्भिक अवस्था
एक रास्ता डेटा बाध्यकारी प्रारंभिक राज्य नीचे दिखाया गया है -
अंतिम स्थिति
वन वे डेटा बाइंडिंग फाइनल स्टेट को नीचे दिखाया गया है -
टू-वे डेटा बाइंडिंग
NativeScript उन्नत कार्यक्षमता के लिए दो-तरफ़ा डेटा बाइंडिंग भी प्रदान करता है। यह मॉडल डेटा को यूआई से बांधता है और यूआई में अपडेट किए गए डेटा को मॉडल में भी बांधता है।
दो-तरफ़ा डेटा बाइंडिंग करने के लिए, ngModel प्रॉपर्टी का उपयोग करें और फिर इसे नीचे [] और () के साथ घेरें -
<TextField [(ngModel)] = 'this.user.name'></TextField>दो-तरफ़ा डेटा बाइंडिंग को बेहतर ढंग से समझने के लिए BlankNgApp एप्लिकेशन को बदल दें।
चरण 1
HomeModule में NativeScriptFormsModule आयात करें (src/app/home/home.module.ts) नीचे दिए अनुसार -
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({
imports: [
NativeScriptCommonModule,
HomeRoutingModule,
NativeScriptFormsModule
],
declarations: [
HomeComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class HomeModule { }यहाँ,
NativeScriptFormsModule दो-तरफ़ा डेटा बाइंडिंग सक्षम करता है। अन्यथा, दो-तरफ़ा डेटा बाइंडिंग अपेक्षा के अनुरूप काम नहीं करेगा।
चरण 2
नीचे दिए गए अनुसार होम कंपोनेंट का UI बदलें -
<ActionBar> <Label text="Home"></Label></ActionBar>
<GridLayout columns="*" rows="auto, auto">
<TextField hint="Username" row='0' column='0' color="gray"
backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
</TextField>
<Label [text]='this.user.name' row='1' column='0' height="50px"
textAlignment='center' style='font-size: 16px; font-weight: bold;
margin: 0px 32px 0 25px;'>
</Label>
</GridLayout>यहाँ,
लेबल घटक की टेक्स्ट प्रॉपर्टी एक तरफ़ा डेटा बाइंडिंग के साथ सेट की गई है। यदि मॉडल उपयोगकर्ता को अपडेट किया जाता है, तो इसकी पाठ संपत्ति स्वचालित रूप से अपडेट हो जाएगी।
TextField घटक ngModel को इस .user.name के रूप में सेट करता है। यदि मॉडल उपयोगकर्ता को अपडेट किया गया है, तो यह पाठ संपत्ति स्वचालित रूप से अपडेट हो जाएगी। उसी समय, यदि उपयोगकर्ता TextField के मान को बदलता है, तो मॉडल अपडेट भी हो जाता है। यदि मॉडल अद्यतन हो जाता है, तो यह लेबल के पाठ गुण परिवर्तनों को भी ट्रिगर करेगा। इसलिए, यदि उपयोगकर्ता डेटा बदलता है, तो यह लेबल की टेक्स्ट प्रॉपर्टी में दिखाई देगा।
चरण 3
एप्लिकेशन चलाएं और टेक्स्ट बॉक्स के मूल्य को बदलने का प्रयास करें।
आवेदन की प्रारंभिक और अंतिम स्थिति नीचे बताए अनुसार समान होगी -
प्रारम्भिक अवस्था
दो-तरफ़ा डेटा बाइंडिंग - प्रारंभिक स्थिति नीचे दी गई है -
अंतिम स्थिति
दो-तरफ़ा डेटा बाइंडिंग - अंतिम स्थिति नीचे दिखाई गई है -
एक NativeScript मॉड्यूल भी पुस्तकालय के रूप में पैक संबंधित कार्यक्षमताओं का एक सेट होता। आइए हम नेटिवस्क्रिप्ट ढांचे द्वारा प्रदान किए गए मॉड्यूल को जानें।
इसमें NativeScript फ्रेमवर्क की मुख्य कार्यक्षमताएं हैं। आइए इस अध्याय में मुख्य मॉड्यूल को समझते हैं।
आवेदन
एप्लिकेशन में मोबाइल एप्लिकेशन का प्लेटफ़ॉर्म विशिष्ट कार्यान्वयन शामिल है। सरल कोर मॉड्यूल नीचे परिभाषित किया गया है -
const applicationModule = require("tns-core-modules/application");कंसोल
संदेश को लॉग करने के लिए कंसोल मॉड्यूल का उपयोग किया जाता है। इसकी निम्न विधियाँ हैं -
console.log("My FirstApp project");
console.info("Native apps!");
console.warn("Warning message!");
console.error("Exception occurred");अनुप्रयोग सेटिंग
एप्लिकेशन-सेटिंग मॉड्यूल में एप्लिकेशन सेटिंग प्रबंधित करने की विधि होती है। इस मॉड्यूल को जोड़ने के लिए, हमें निम्नलिखित कोड जोड़ना होगा -
const appSettings = require("tns-core-modules/application-settings");अनुप्रयोग-सेटिंग में उपलब्ध कुछ विधियाँ निम्नानुसार हैं -
setBoolean (की: string, value: boolean) - सेट बूलियन ऑब्जेक्ट
सेटनंबर (कुंजी: स्ट्रिंग, मूल्य: संख्या) - सेट संख्या ऑब्जेक्ट
setString (कुंजी: स्ट्रिंग, मान: स्ट्रिंग) - स्ट्रिंग ऑब्जेक्ट सेट करता है
getAllKeys () - इसमें सभी संग्रहीत कुंजियाँ हैं
hasKey (की: string) - जांचें कि क्या कोई कुंजी मौजूद है या नहीं
स्पष्ट - संग्रहीत मूल्यों को साफ करता है
निकालें - कुंजी के आधार पर किसी भी प्रविष्टि को हटा दें।
एप्लिकेशन सेटिंग का उपयोग करने वाला एक सरल उदाहरण इस प्रकार है -
function onNavigatingTo(args) {
appSettings.setBoolean("isTurnedOff", false);
appSettings.setString("name", "nativescript");
appSettings.setNumber("locationX", 54.321);
const isTurnedOn = appSettings.getBoolean("isTurnedOn");
const username = appSettings.getString("username");
const locationX = appSettings.getNumber("locationX");
// Will return "not present" if there is no value for "noKey"
const someKey = appSettings.getString("noKey", "not present");
}
exports.onNavigatingTo = onNavigatingTo;
function onClear() {
// Removing a single entry via its key name
appSettings.remove("isTurnedOff");
// Clearing the whole settings
appSettings.clear();
}एचटीटीपी
इस मॉड्यूल का उपयोग हैंडलिंग के लिए किया जाता है httpअनुरोध और प्रतिक्रिया। इस मॉड्यूल को अपने एप्लिकेशन में जोड़ने के लिए, निम्न कोड जोड़ें -
const httpModule = require("tns-core-modules/http");हम निम्नलिखित विधियों का उपयोग करके डेटा भेज सकते हैं -
getString- यह URL से डेटा को स्ट्रिंग के रूप में अनुरोध करने और डाउनलोड करने के लिए उपयोग किया जाता है। यह नीचे परिभाषित किया गया है -
httpModule.getString("https://.../get").then(
(r) => {
viewModel.set("getStringResult", r);
}, (e) =>
{
}
);getJSON- इसका उपयोग JSON से डेटा एक्सेस करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
httpModule.getJSON("https://.../get").then((r) => {
}, (e) => {
});getImage- निर्दिष्ट URL से सामग्री डाउनलोड करता है और ImageSource ऑब्जेक्ट लौटाता है। यह नीचे परिभाषित किया गया है -
httpModule.getImage("https://.../image/jpeg").then((r) => {
}, (e) => {
});getFile - इसमें दो तर्क URL और फ़ाइल पथ हैं।
URL - डेटा डाउनलोड करता है।
File path- फाइल में URL डेटा सेव करें। यह नीचे परिभाषित किया गया है -
httpModule.getFile("https://").then((resultFile) => {
}, (e) => {
});request- इसमें विकल्प तर्क है। इसका उपयोग विकल्पों का अनुरोध करने और HttpResponse ऑब्जेक्ट को वापस करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
httpModule.request({
url: "https://.../get",
method: "GET"
}).then((response) => {
}, (e) => {
});छवि स्रोत
छवि-स्रोत मॉड्यूल का उपयोग छवि को बचाने के लिए किया जाता है। हम नीचे दिए गए कथन का उपयोग करके इस मॉड्यूल को जोड़ सकते हैं -
const imageSourceModule = require("tns-core-modules/image-source");यदि आप संसाधन से चित्र लोड करना चाहते हैं, तो नीचे दिए गए कोड का उपयोग करें -
const imgFromResources = imageSourceModule.fromResource("icon");स्थानीय फ़ाइल से छवि जोड़ने के लिए, नीचे दिए गए आदेश का उपयोग करें -
const folder = fileSystemModule.knownFolders.currentApp();
const path = fileSystemModule.path.join(folder.path, "images/sample.png");
const imageFromLocalFile = imageSourceModule.fromFile(path);छवि को फ़ाइल पथ पर सहेजने के लिए, नीचे दिए गए आदेश का उपयोग करें -
const img = imageSourceModule.fromFile(imagePath);
const folderDest = fileSystemModule.knownFolders.documents();
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png");
const saved = img.saveToFile(pathDest, "png"); if (saved) {
console.log(" sample image saved successfully!");
}घड़ी
इस मॉड्यूल का उपयोग विशिष्ट समय अंतराल पर कोड निष्पादित करने के लिए किया जाता है। इसे जोड़ने के लिए, हमें उपयोग करने की आवश्यकता हैrequire -
const timerModule = require("tns-core-modules/timer");यह दो विधियों पर आधारित है -
setTimeout- इसका उपयोग निष्पादन में देरी करने के लिए किया जाता है। इसे मिलीसेकंड के रूप में दर्शाया गया है।
setInterval - इसका उपयोग विशिष्ट अंतराल पर आवर्ती लगाने के लिए किया जाता है।
निशान
यह मॉड्यूल डीबगिंग के लिए उपयोगी है। यह लॉगिंग जानकारी देता है। इस मॉड्यूल को इस रूप में दर्शाया जा सकता है -
const traceModule = require("tns-core-modules/trace");यदि आप अपने आवेदन में सक्षम करना चाहते हैं तो नीचे दिए गए कमांड का उपयोग करें -
traceModule.enable();ui / छवि कैश
छवि-कैश मॉड्यूल का उपयोग छवि डाउनलोड अनुरोधों और डाउनलोड किए गए चित्रों को कैश करने के लिए किया जाता है। इस मॉड्यूल को नीचे दिखाए अनुसार दर्शाया जा सकता है -
const Cache = require("tns-core-modules/ui/image-cache").Cache;कनेक्टिविटी
इस मॉड्यूल का उपयोग कनेक्टेड नेटवर्क की कनेक्शन जानकारी प्राप्त करने के लिए किया जाता है। इसे इस रूप में दर्शाया जा सकता है -
const connectivityModule = require("tns-core-modules/connectivity");कार्यात्मकता मॉड्यूल
कार्यक्षमता मॉड्यूल में बहुत सारे सिस्टम / प्लेटफ़ॉर्म विशिष्ट मॉड्यूल शामिल हैं। कुछ महत्वपूर्ण मॉड्यूल इस प्रकार हैं -
platform- अपने डिवाइस के बारे में जानकारी प्रदर्शित करने के लिए इस्तेमाल किया। इसे नीचे दिए गए अनुसार परिभाषित किया जा सकता है -
const platformModule = require("tns-core-modules/platform");fps-meter- प्रति सेकंड फ़्रेम पर कब्जा करने के लिए उपयोग किया जाता है। इसे नीचे दिए गए अनुसार परिभाषित किया जा सकता है -
const fpsMeter = require("tns-core-modules/fps-meter");file-system- अपने डिवाइस फ़ाइल सिस्टम के साथ काम करने के लिए इस्तेमाल किया। यह नीचे परिभाषित किया गया है -
const fileSystemModule = require("tns-core-modules/file-system");ui/gestures - यूआई इशारों के साथ काम करते थे।
यूआई मॉड्यूल
UI मॉड्यूल में UI घटक और उससे संबंधित कार्यक्षमता शामिल है। यूआई के कुछ महत्वपूर्ण मॉड्यूल इस प्रकार हैं -
frame
page
color
text/formatted-string
xml
styling
animation
देशी कार्यक्षमता जोड़ने के लिए npm पैकेज का उपयोग किया जाता है। इस पैकेज का उपयोग करके, हम किसी भी प्लगइन्स को स्थापित या खोज या हटा सकते हैं। यह खंड प्लगइन्स के बारे में विस्तार से बताता है।
आदेश
add - यह प्लगइन स्थापित करने के लिए प्रयोग किया जाता है।
update - निर्दिष्ट प्लगइन अद्यतन और अपनी निर्भरता को संशोधित।
remove - प्लगइन निकालता है।
build - इसका उपयोग iOS या एंड्रॉइड प्रोजेक्ट के लिए प्लगइन बनाने के लिए किया जाता है।
create - अपने प्रोजेक्ट के लिए एक प्लगइन बनाता है।
प्लगइन जोड़ना
एक नया प्लगइन जोड़ने के लिए सिंटैक्स का उपयोग किया जाता है -
tns plugin add <plugin-name>उदाहरण के लिए, यदि आप नेटिवस्क्रिप्ट-बारकोडस्केनर जोड़ना चाहते हैं, तो आप निम्नलिखित कोड का उपयोग कर सकते हैं -
tns plugin add nativescript-barcodescannerआप निम्नलिखित प्रतिक्रिया देख सकते हैं -
+ [email protected]
added 1 package from 1 contributor and audited 11704 packages in 8.76sउपरोक्त प्लगइन जोड़ने के लिए आप npm मॉड्यूल का भी उपयोग कर सकते हैं -
npm install nativescript-barcodescannerअब, नेटिवस्क्रिप्ट सीएलआई एनपीएम से प्लगइन डाउनलोड करता है और अपने नोड_मॉडल फ़ोल्डर के अंदर जोड़ता है।
अगर आप प्लगइन को सीधे अपने साथ जोड़ना चाहते हैं package.json और सभी निर्भरता मुद्दों को हल करें, आप पिछले एक के बजाय नीचे दिए गए कमांड का उपयोग कर सकते हैं -
npm i nativescript-barcodescannerयदि आप विकास के दौरान एक डेवलपर निर्भरता स्थापित करना चाहते हैं, तो नीचे दिए गए कोड का उपयोग करें -
npm i tns-platform-declarations --save-devयहाँ,
tns- प्लेटफ़ॉर्म-घोषणाएँ एक डेवलपर निर्भरता है जो विकास प्रक्रिया के दौरान केवल intelliSense के लिए आवश्यक है।
आयात प्लगइन्स
अब, हम स्थापित कर चुके हैं nativescript-barcodescanner plugin। नीचे दिए गए कमांड का उपयोग करके हमें अपनी परियोजना के अंदर जोड़ें -
const maps = require("nativescript-barcodescanner");
maps.requestPermissions();प्लगइन्स को अपडेट करना
इस पद्धति का उपयोग एक निर्दिष्ट प्लगइन को अपडेट करने के लिए किया जाता है, इसलिए यह पिछले एक को अनइंस्टॉल करता है और नया संस्करण स्थापित करता है और इसकी निर्भरता को संशोधित करता है। यह नीचे परिभाषित किया गया है -
tns plugin update <Plugin name version>प्लगिन हटाना
यदि आप प्लगइन को हटाना चाहते हैं, यदि आवश्यक नहीं है, तो आप नीचे दिए गए वाक्यविन्यास का उपयोग कर सकते हैं -
tns plugin remove <plugin-name>उदाहरण के लिए, यदि आप उपर्युक्त स्थापित नेटवर्क्स-गूगल-मैप्स-एसडीके को हटाना चाहते हैं, तो नीचे दिए गए कमांड का उपयोग करें -
tns plugin remove nativescript-barcodescannerआप निम्नलिखित प्रतिक्रिया देख सकते हैं -
Successfully removed plugin nativescript-barcodescannerबिल्डिंग प्लगइन्स
इसका उपयोग प्लेटफ़ॉर्म / एंड्रॉइड में स्थित प्लगइन की एंड्रॉइड-विशिष्ट परियोजना फ़ाइलों को बनाने के लिए किया जाता है। आइए नीचे दिए गए कमांड का उपयोग करते हुए नेटिवस्क्रिप्ट-बारकोडेसनर पगिन का निर्माण करें -
tns plugin build nativescript-barcodescannerप्लगइन्स बनाना
नेटिवस्क्रिप्ट प्लग इन सरल जावास्क्रिप्ट मॉड्यूल हैं। इसे आपके एप्लिकेशन src \ package.json फ़ाइल के अंदर परिभाषित किया गया है। इस मॉड्यूल का उपयोग नेटिवस्क्रिप्ट प्लगइन विकास के लिए एक नई परियोजना बनाने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -
tns plugin create <Plugin Repository Name> [--path <Directory>]यह खंड जावास्क्रिप्ट का उपयोग करके मूल एपीआई तक पहुंचने के अवलोकन के बारे में बताता है।
मार्शलिंग
नेटिवस्क्रिप्ट रनटाइम एंड्रॉइड और आईओएस प्लेटफॉर्म दोनों के लिए निहित प्रकार रूपांतरण प्रदान करता है। इस अवधारणा को मार्शलिंग के रूप में जाना जाता है। उदाहरण के लिए, NativeScript- iOS paltform, समान रूप से जावास्क्रिप्ट और ऑब्जेक्टिव-सी डेटा प्रकारों को परिवर्तित कर सकता है, जावा / कोटलिन को आसानी से जावास्क्रिप्ट प्रोजेक्ट प्रकारों और मूल्यों के लिए मैप किया जा सकता है। आइए हम समझते हैं कि कैसे एक-एक करके हर प्रकार के मार्शलों का प्रदर्शन किया जाए।
सांख्यिक मान
हम आसानी से आईओएस और एंड्रॉइड संख्यात्मक डेटा प्रकारों को जावास्क्रिप्ट संख्याओं में बदल सकते हैं। जावास्क्रिप्ट में iOS के लिए सरल संख्यात्मक रूपांतरण नीचे परिभाषित किया गया है -
console.log(`max(7,9) = ${max(7,9)}`);यहाँ,
देशी अधिकतम () फ़ंक्शन को जावास्क्रिप्ट संख्या में परिवर्तित किया जाता है।
Android पर्यावरण
जावा बाइट, शॉर्ट, इंट, फ्लोट, डबल और लॉन्ग जैसे विभिन्न न्यूमेरिक प्रकारों का समर्थन करता है। जावास्क्रिप्ट में केवल संख्या प्रकार है।
नीचे दिखाए गए एक साधारण जावा वर्ग पर विचार करें -
class Demo extends java.lang.Object {
public int maxMethod(int a,int b) {
if(a>b) {
return a;
} else {
return b;
}
}
}यहाँ,
उपरोक्त कोड में दो पूर्णांक तर्क हैं। हम उपरोक्त कोड ऑब्जेक्ट को जावास्क्रिप्ट का उपयोग करके कॉल कर सकते हैं जैसा कि नीचे दिखाया गया है -
//Create an instance for Demo class
var obj = new Demo();
//implicit integer conversion for calling the above method
obj.maxMethod(7,9);स्ट्रिंग्स
एंड्रॉइड स्ट्रिंग्स को java.lang.string में और iOS स्ट्रिंग्स को NSSring में परिभाषित किया गया है। आइए देखते हैं कि दोनों प्लेटफार्मों में मार्शलिंग कैसे करें।
एंड्रॉयड
स्ट्रिंग्स अपरिवर्तनीय हैं, लेकिन स्ट्रिंग बफ़र्स म्यूटेबल स्ट्रिंग्स का समर्थन करते हैं।
नीचे कोड सरल मानचित्रण के लिए एक उदाहरण है -
//Create android label widget
var label = new android.widget.Label();
//Create JavaScript string
var str = "Label1";
//Convert JavaScript string into java label.setText(str);
// text is converted to java.lang.Stringबूलियन क्लास को java.lang.Boolean में परिभाषित किया गया है। यह वर्ग एक वस्तु में बूलियन के मूल्य को लपेटता है। हम बूलियन को स्ट्रिंग में आसानी से बदल सकते हैं और इसके विपरीत। सरल उदाहरण नीचे दिए गए के रूप में परिभाषित किया गया है -
//create java string
let data = new java.lang.String('NativeScript');
//map java String to JavaScript string,
let result = data.startsWith('N');
//return result
console.log(result);// trueआईओएस वातावरण
NSString वर्ग अपरिवर्तनीय है लेकिन इसका उपवर्ग NSMutableString अपरिवर्तनीय है। इस वर्ग में स्ट्रिंग्स के साथ काम करने के तरीकों का एक संग्रह है। इसे नीचे घोषित किया गया है -
class NSString : NSObjectजैसा कि नीचे दिखाया गया है एक साधारण उद्देश्य-सी घोषणा पर विचार करें -
NSString *str = @"nativescript";
//convert the string to uppercase
NSString *str1;
str1 = [str uppercaseString];
NSLog(@"Uppercase String : %@\n", str1 );एनएसएसट्रेस को आसानी से जावास्क्रिप्ट स्ट्रिंग्स पर मैप किया जा सकता है।
सरणी
इस खंड में बताया गया है कि सरणियों में मार्शलों का प्रदर्शन कैसे किया जाता है। आइए पहले आईओएस पर्यावरण का एक उदाहरण लें।
ऐलान घोषणा
class NSArray : NSObjectयहाँ,
NSArray का उपयोग arrays नामक वस्तुओं के ऑर्डर किए गए संग्रह को प्रबंधित करने के लिए किया जाता है। इसका उपयोग static array बनाने के लिए किया जाता है। इसका उप वर्गNSMutableArray गतिशील सरणियों बनाने के लिए उपयोग किया जाता है।
नीचे दी गई जानकारी के अनुसार NSArray ऑब्जेक्ट्स को सरणी लिटरल्स का उपयोग करके बनाया जा सकता है -
let array: NSArray = ["React","Vue","TypeScript"]अब, हम इस सरणी को जावास्क्रिप्ट में मैप कर सकते हैं जैसा कि नीचे दिखाया गया है -
//create native array
let nsArr = NSArray.arrayWithArray("React","Vue","TypeScript"]);
//create simple javascript array
let jsArr = ["Hello,World","NativeScript"];
//Now compare the two arrays,
let compare = nsArr.isEqual(jsArr);
console.log(comapre);यह आउटपुट को गलत के रूप में लौटाएगा।
Android सरणी की घोषणा
जावा सरणियों में परिभाषित किया गया है java.util.Arrays। इस वर्ग में सरणियों में हेरफेर करने के लिए विभिन्न तरीके हैं। एक उदाहरण नीचे दिखाया गया है -
//javascript array
let data = [12,45,23,56,34,78,50];
//create java array
let result = ns.example.Math.maxElement(data);
console.log(result);वर्ग और वस्तुएँ
क्लास और ऑब्जेक्ट्स ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग की बुनियादी अवधारणाएँ हैं। क्लास एक उपयोगकर्ता परिभाषित प्रोटोटाइप है। ऑब्जेक्ट क्लास का एक उदाहरण है। वर्ग उन गुणों या विधियों के समूह का प्रतिनिधित्व करता है जो एक प्रकार की सभी वस्तुओं के लिए सामान्य हैं। आइए हम दोनों मोबाइल विकास परिवेशों के लिए मूल वर्गों और वस्तुओं को समझें।
Android पर्यावरण
जावा और कोटलिन वर्गों में पूर्ण पैकेज नाम से चिह्नित विशिष्ट पहचानकर्ता हैं।
उदाहरण के लिए,
android.view.View- यह स्क्रीन लेआउट और उपयोगकर्ता के साथ बातचीत के लिए एक बुनियादी उपयोगकर्ता इंटरफ़ेस वर्ग है। हम नीचे दिखाए अनुसार जावास्क्रिप्ट में इस वर्ग तक पहुँच सकते हैं -
const View = android.view.View;सबसे पहले, हम नीचे दिए गए कथन का उपयोग करके वर्ग को आयात करते हैं -
import android.view.View;अगला नीचे दिए गए अनुसार एक वर्ग बनाएं -
public class MyClass {
public static void staticMethod(context) {
//create view instance
android.view.View myview = new android.view.View(context);
}
}उपरोक्त समान श्रेणी में, हम नीचे दिए गए कोड का उपयोग करके जावास्क्रिप्ट फ़ंक्शन तक पहुँच सकते हैं -
const myview = new android.view.View(context);इसी तरह, हम java.lang संकुल के भीतर इंटरफेस, स्थिरांक और गणना तक पहुंच सकते हैं।
iOS पर्यावरण
ऑब्जेक्टिव-सी कक्षाएं दो खंडों में परिभाषित की गई हैं @interface और @ कार्यान्वयन। क्लास की परिभाषा कीवर्ड से शुरू होती है@interface इसके बाद द interface(class)नाम दें। ऑब्जेक्टिव-सी में, सभी वर्गों को आधार वर्ग से प्राप्त किया जाता है जिसे NSObject कहा जाता है।
यह सभी ऑब्जेक्टिव-सी कक्षाओं का सुपरक्लास है। सरल सर्कल वर्ग को निम्न के रूप में परिभाषित किया गया है -
@interface Circle:NSObject {
//Instance variable
int radius;
}
@endनीचे दिखाए गए अनुसार एक विधि के साथ एक कक्षा पर विचार करें -
@interface MyClass : NSObject
+ (void)baseStaticMethod;
@endइस कोड को निम्न कोड का उपयोग करके जावास्क्रिप्ट में बदला जा सकता है -
function MyClass() { /* native call */ };
Object.setPrototypeOf(MyClass, NSObject);
BaseClass.baseStaticMethod = function () { /* native call */ };जावास्क्रिप्ट instanceofऑपरेटर का उपयोग सत्यापित करने के लिए किया जाता है, यदि कोई ऑब्जेक्ट किसी दिए गए वर्ग से विरासत में मिला है। इसे इस रूप में परिभाषित किया जा सकता है -
var obj = MyClass.alloc().init(); // object creation
console.log(obj instanceof NSObject); //return trueयहाँ,
उद्देश्य-सी उदाहरण आवंटन, init या नए तरीकों का उपयोग करके बनाए जाते हैं। उपरोक्त उदाहरण में, हम नीचे दिए गए नए तरीके का उपयोग करके आसानी से ऑब्जेक्ट इनिशियलाइज़ेशन बना सकते हैं -
var obj = MyClass.new();इसी तरह, आप स्थैतिक तरीकों और गुणों तक पहुंच सकते हैं।
अपना एप्लिकेशन बनाएं और प्रकाशित करें, आपके Android एप्लिकेशन को सभी उपयोगकर्ताओं के लिए उपलब्ध कराता है। Google Play एक मजबूत प्रकाशन प्लेटफ़ॉर्म है। यह आपको पूरी दुनिया के सभी उपयोगकर्ताओं के लिए अपने Android एप्लिकेशन प्रकाशित और वितरित करने में मदद करता है। यह अध्याय Google Play में आपके मूल एप्लिकेशन को प्रकाशित करने के तरीके के बारे में बताता है।
नेटिवस्क्रिप्ट साइडकिक
साइडकिक एक GUI क्लाइंट है और सभी तरह के OS को सपोर्ट करता है। यह NativeScript CLI प्रक्रिया को सरल करता है और मोबाइल एप्लिकेशन बनाने में मदद करता है।
अपने ऐप को साइडकिक से Google Play कंसोल पर प्रकाशित करें
साइडकिक को डाउनलोड और इंस्टॉल करना आपके ओएस पर निर्भर करता है। साइडकिक में अपने ऐप को चलाने के लिए नीचे दिए गए चरणों का पालन करें।
Step 1: Launch Sidekick
हमें साइडकिक लॉन्च करें। यह नीचे की छवि के समान है -
Step 2: Build your device
अब, अपने डिवाइस से अपना ऐप खोलें और टूलबार से बिल्ड विकल्प चुनें और एंड्रॉइड का चयन करें। आपको नीचे दी गई छवि के समान प्रतिक्रिया मिलेगी -
Step 3: Properties
गुण टैब पर क्लिक करें और अपना एंड्रॉइड कॉन्फ़िगरेशन जोड़ें। स्क्रीन नीचे के समान दिखती है -
Step 4: Plugins
साइडकिक यह पता लगाने में मदद करता है कि आप अपने एप्लिकेशन के लिए कौन से प्लग इन पर निर्भर हैं। प्लगइन्स टैब पर क्लिक करें और यह निम्नलिखित सूची देगा -
Step 5: Android Certificates
Android से cogwheel आइकन पर क्लिक करें और ब्राउज़ विकल्प चुनें, फिर अपने फ़ाइल सिस्टम पर संग्रहीत प्रमाणपत्र का चयन करें। यह नीचे दिखाया गया है -
उसे चुनने के बाद, संवाद बॉक्स बंद करें।
Step 6: Build your application
अंत में बिल्ड प्रकार से स्थानीय बिल्ड विकल्प पर क्लिक करें और कॉन्फ़िगरेशन से रिलीज़ विकल्प चुनें। इसके बाद अपना एप्लिकेशन बनाएं।
Step 7: Application package
एक बार निर्माण पूरा हो जाने के बाद, यह एक पथ उत्पन्न करेगा और apkफ़ाइल। एप्लिकेशन पैकेज का स्थान सहेजें। इस apk फ़ाइल का उपयोग Google Play स्टोर पर अपलोड करने के लिए किया जाता है।
Step 8: Publish in Google Play
टूलबार से प्रकाशन विकल्प चुनें और Google Play का चयन करें। फिर, Google Play Store संवाद के लिए Android प्रमाण पत्र प्रबंधित करें। यह नीचे दिखाया गया है -
उसके बाद, बिल्ड प्रकार का चयन करें और सेवा खाता JSON कुंजी प्रदान करें फिर अल्फा, बीटा या उत्पादन ट्रैक चुनें आखिरकार अपलोड पर क्लिक करें।
Google Play में अपना ऐप प्रकाशित करें
Google Play कंसोल में अपना ऐप प्रकाशित करने के लिए, आपको निम्नलिखित आवश्यक शर्तें पूरी करनी होंगी।
आवश्यक शर्तें
आपको Google Play में पंजीकृत होना चाहिए
आपके पास एक मान्य Google Play स्व-हस्ताक्षरित कोड है जो पहचान पर हस्ताक्षर करता है
अपना ऐप प्रकाशित करने की प्रक्रिया
नीचे दिए गए चरण यह समझने में मददगार हैं कि Google Play store में अपना ऐप कैसे जारी करें।
Step 1: Login Google Play console
Google Play कंसोल खोलें और अपने खाते से लॉगिन करें।
Step 2: Create an app
सभी एप्लिकेशन टैब पर जाएं और एप्लिकेशन बनाएं पर क्लिक करें और एक नया ऐप बनाएं। अब, डिफ़ॉल्ट भाषा जोड़ें, एप्लिकेशन शीर्षक अंत में आगे जाने के लिए आगे बढ़ें पर क्लिक करें।
Step 3: Fill required fields
स्टोरिंग टैब पर जाएं और आवश्यक फ़ील्ड भरें, फिर आवश्यक संपत्ति को पूरा करें और सभी परिवर्तनों को बचाएं।
Step 4: Price and distribution
मूल्य निर्धारण और वितरण टैब पर जाएं, सभी सेटिंग्स को पूरा करें और सभी परिवर्तनों को सहेजें।
Step 5: Release your app
ऐप रिलीज़ टैब चुनें और अल्फा, बीटा चुनें। इसका उपयोग आपके एप्लिकेशन के परीक्षण के लिए किया जाता है। और, उत्पादन पटरियों का चयन करें। इसका उपयोग आपके ऐप को Google Play पर प्रकाशित करने के लिए किया जाता है। अंत में एप्लिकेशन पैकेज (एपीके) जोड़ें।
Step 6: Review your app
यह आपका अंतिम चरण है। समीक्षा में, यदि कोई समस्या है तो सत्यापित करें। यदि कोई समस्या नहीं है, तो अपने ऐप को प्रकाशित करने के लिए रोलआउट की पुष्टि करें।
यह अध्याय ऐप स्टोर में अपने मूल एप्लिकेशन को प्रकाशित करने के तरीके के बारे में बताता है। अपने एप्लिकेशन प्रकाशित करने के लिए नीचे दिए गए चरणों से गुजरें।
आवश्यक शर्तें
इसे करने के लिए, आपको निम्नलिखित आवश्यक शर्तें चाहिए -
वितरण के लिए प्रमाण पत्र
वितरण प्रावधान प्रोफ़ाइल
आईओएस देव केंद्र में पंजीकृत बंडल आईडी
आईट्यून्स कनेक्ट में ऐप रिकॉर्ड
अपने ऐप को प्रकाशित करने के लिए कदम
नीचे अपना ऐप प्रकाशित करने के चरण दिए गए हैं -
चरण 1: नेटिवस्क्रिप्ट साइडकिक खोलें
NativeScript साइडकिक लॉन्च करें और साइडकिक में अपना ऐप खोलें।
चरण 2: प्रकाशन का चयन करें
टूलबार पर जाएं और टूलबार से प्रकाशित विकल्प चुनें । यह नीचे दिखाया गया है -
अब, ऐप्पल ऐप स्टोर विकल्प चुनें। यह नीचे की छवि के समान है -
चरण 3: iOS प्रावधान और प्रमाणपत्र प्रबंधित करें
Apple ऐप स्टोर cogwheel आइकन पर क्लिक करें और ब्राउज़ विकल्प चुनें और विवरण जोड़ें।
स्टेप 4: अपना ऐप बनाएं
अगला, बिल्ड विकल्प पर क्लिक करें और अपना ऐप बनाएं और प्रक्रिया पूरी होने तक प्रतीक्षा करें।
चरण 5: क्रेडेंशियल प्रदान करें
यह आपका अंतिम चरण है। अपने खाते में Apple उपयोगकर्ता नाम और पासवर्ड निर्दिष्ट करें और पुष्टि संदेश अपलोड करें और क्लिक करें। यदि आप समीक्षा के लिए अपना ऐप सबमिट करना चाहते हैं, तो iTunes Connect पर जाएं और इसे सबमिट करें।
अनुप्रयोग के विकास के जीवन चक्र में परीक्षण एक बहुत ही महत्वपूर्ण चरण है। यह एक आवेदन गुणवत्ता सुनिश्चित करता है। इसके लिए सावधानीपूर्वक योजना और निष्पादन की आवश्यकता है। यह विकास का सबसे अधिक समय लेने वाला चरण है। NativeScript फ्रेमवर्क किसी एप्लिकेशन के स्वचालित परीक्षण के लिए एक व्यापक समर्थन प्रदान करता है।
परीक्षण के प्रकार
आमतौर पर, एक आवेदन का परीक्षण करने के लिए तीन प्रकार की परीक्षण प्रक्रियाएं उपलब्ध हैं। वे इस प्रकार हैं -
इकाई का परीक्षण
इकाई परीक्षण एक आवेदन का परीक्षण करने के लिए सबसे आसान तरीका है। यह कोड के एक टुकड़े (एक फ़ंक्शन, सामान्य रूप में) या एक वर्ग की विधि की शुद्धता सुनिश्चित करने पर आधारित है। लेकिन, यह वास्तविक वातावरण और उसके बाद को प्रतिबिंबित नहीं करता है। यह बग ढूंढने का सबसे कम विकल्प है।
आम तौर पर, नेटिवस्क्रिप्ट चाई और क्विट यूनिट परीक्षण रूपरेखा के साथ जैस्मीन, मोचा का उपयोग करता है।
इसे करने के लिए, पहले आपको नीचे दिए गए आदेश का उपयोग करके अपनी परियोजना में कॉन्फ़िगर करना होगा -
tns test initअब, आपको निम्न प्रतिक्रिया मिलती है -
? Select testing framework: (Use arrow keys)
> jasmine
mocha
qunitअब, चयन करें jasmine ढांचा और आपकी स्क्रीन इस तरह दिखती है -
? Select testing framework: jasmine
+ [email protected]
added 90 packages from 432 contributors and audited 11944 packages in 8.753s
+ [email protected]
added 2 packages from 1 contributor and audited 11946 packages in 7.299s
> [email protected] postinstall
/Users/workspace/NativeScript/NativeApp/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for
polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open
Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a
good job -)
npm WARN [email protected] requires a peer of webpack@^2.0.0
|| ^3.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 19 packages from 52 contributors and audited 12012 packages in 9.368s
+ [email protected]
added 2 packages from 35 contributors and audited 12014 packages in 6.925s
+ [email protected]
updated 1 package and audited 12014 packages in 7.328s
+ @types/[email protected]
> [email protected] postinstall /Users/deiva/workspace/NativeScript/NativeApp/node_modules/nativescript-unit
-test-runner
> node postinstall.js
+ [email protected]
added 1 package from 1 contributor and audited 12032 packages in 7.14s
Successfully installed plugin nativescript-unit-test-runner.
Example test file created in src/tests
Run your tests using the "$ tns test <platform>" command.अब, परीक्षण फ़ाइल src \ परीक्षणों \ example.ts के अंदर बनाई गई है।
अपने टेस्ट बनाएं
हम उदाहरण के अंदर एक साधारण परीक्षा जोड़ते हैं। फ़ाइल को नीचे दिखाया गया है -
describe("NativeApp test:", function() {
it("Check counter.", function() {
expect(mainViewModel.createViewModel().counter).toEqual(10);
});
it("Check message.", function () {
expect(mainViewModel.createViewModel().message).toBe("10 taps left");
});
});यहाँ,
पहले, जांचें कि क्या काउंटर 10 के बराबर है और जांचें कि क्या संदेश 10 नल बचे हैं।
आइए हम अगले चरण में परीक्षा चलाते हैं।
अपने टेस्ट चलाएं
अब, नीचे दिए गए आदेश का उपयोग करके या तो Android या iOS कनेक्टेड डिवाइस में परीक्षण चलाएं -
tns test androidयह निम्न स्थिति लौटाएगा -
? To continue, choose one of the following options: (Use arrow keys)
> Configure for Cloud Builds
Configure for Local Builds
Configure for Both Local and Cloud Builds
Skip Step and Configure Manuallyफिर नीचे दिए गए विकल्प को चुनें -
? To continue, choose one of the following options: Configure for Local Builds
Running the setup script to try and automatically configure your environment.
These scripts require sudo permissions
.....एंड्रॉइड सिम्युलेटर में अपने परीक्षण सूट को निष्पादित करने के लिए, निम्नलिखित कमांड चलाएं -
tns test android --emulatorअब, कर्म सर्वर आपके प्रोजेक्ट को बनाता और तैनात करता है।
एंड टू एंड (ई 2 ई) परीक्षण
यूनिट परीक्षण छोटे, सरल और तेज़ प्रक्रिया हैं, जबकि E2E परीक्षण चरण कई घटक शामिल होते हैं और एक साथ काम करते हैं जो कि आवेदन में कवर प्रवाह होता है। यह इकाई और एकीकरण परीक्षणों द्वारा प्राप्त नहीं किया जा सका।
NativeScript Appiumप्लगइन का उपयोग E2E स्वचालन परीक्षण करने के लिए किया जाता है। खैर, Appium मोबाइल ऐप के लिए एक ओपन सोर्स टेस्टिंग फ्रेमवर्क है। इस फ्रेमवर्क को अपनी परियोजना में जोड़ने के लिए, आपके पास 25.3.0 से ऊपर का XCode या Android SDK का नवीनतम संस्करण होना चाहिए।
Appium स्थापित करें
आइए हम एनपीएम मॉड्यूल का उपयोग करके विश्व स्तर पर एपियम स्थापित करें -
npm install -g appiumअब, आप निम्नलिखित प्रतिक्रिया देख सकते हैं -
npm install -g appium
/Users/.npm-global/bin/authorize-ios ->
/Users/.npm-global/lib/node_modules/ appium/node_modules/.bin/authorize-ios
> [email protected] install
/Users/.npm-global/lib/node_modules/ appium/node_modules/appium-windows-driver
> node install-npm.js
Not installing WinAppDriver since did not detect a Windows system
> [email protected] postinstall /Users/.npm-
global/lib/node_modules/appium/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for
polyfilling JavaScript
standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock )
is looking for a good job -)
> [email protected] postinstall/Users/.npm-
global/lib/node_modules/appium/node_modules
/appium-chromedriver
> node install-npm.js
............................................
.............................................
+ [email protected]
added 671 packages from 487 contributors in 28.889sप्लगइन जोड़ें
हमें जोड़ते हैं nativescript-dev-appium नीचे दिए गए कमांड का उपयोग करके अपनी परियोजना के लिए एक निर्भरता के रूप में प्लगइन -
$ npm install -D nativescript-dev-appiumइसे निष्पादित करने के बाद, चुनें mocha ढांचा और आपको इसके समान प्रतिक्रिया मिलेगी -
> node ./postinstall.js
? What kind of project do you use
? javascript ? Which testing framework do you prefer? mocha
+ [email protected]अब, फ़ाइलें आपके प्रोजेक्ट फ़ोल्डर के अंदर संग्रहीत की जाती हैं।
अपनी डिवाइस बनाएँ
आइए नीचे दिए गए कमांड का उपयोग करके Android डिवाइस बनाएं -
tns build androidउपर्युक्त कमांड चलाएगा परीक्षण लक्षित क्षमताओं को निर्दिष्ट करना चाहिए। यदि आपके पास iOS डिवाइस है, तो आप उपयोग कर निर्माण कर सकते हैंiOS डिवाइस।
चालू परीक्षण
अब, हमने डिवाइस को कॉन्फ़िगर किया है। हम नीचे दिए गए आदेश का उपयोग करके अपना परीक्षण चलाते हैं -
npm run e2e -- --runType <capability-name>यहाँ,
क्षमता-नाम आपके एप्लिकेशन के अंदर परिभाषित किया गया है e2e/config/appium.capabilities.json।
उत्पादन
नेटिवस्क्रिप्ट - निष्कर्ष
नेटिवस्क्रिप्ट वेब डेवलपर्स के लिए एक महान मोबाइल ऐप है जो अतिरिक्त प्रयासों को डाले बिना अपने आवेदन को पूरी तरह से बहुत आसान तरीके से जांचने के लिए है। डेवलपर्स आत्मविश्वास से एक महान दिखने के साथ-साथ एक सफल अनुप्रयोग विकसित कर सकते हैं बिना किसी समस्या के थोड़े समय में।