ऐप आविष्कारक: नज़दीकी नज़र

  • इवेंट-संचालित प्रोग्रामिंग के बारे में जानें
  • एमआईटी ऐप आविष्कारक मंच में विभिन्न प्रकार के ब्लॉकों को समझें

इस पाठ के लिए ये गतिविधियाँ हैं:

घटनाओं

मोबाइल ऐप्स इवेंट-संचालित प्रोग्रामिंग पर आधारित होते हैं।

ईवेंट संचालित प्रोग्रामिंग ऊपर से नीचे तक कोड चलाने के बजाय घटनाओं पर आधारित है। कुछ प्रोग्राम बस अपने सभी कोड को एक बार में निष्पादित करते हैं, लेकिन मोबाइल ऐप इस आधार पर काम करते हैं कि उपयोगकर्ता इसके साथ कैसे इंटरैक्ट करता है।

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

बंद करो और चर्चा

क्या आप कुछ तरीकों के बारे में सोच सकते हैं जिनसे आप अपने फोन से बातचीत करते हैं और आपका फोन क्या करता है? आरंभ करने के लिए यहां कुछ दिए गए हैं:

  • जब आप किसी ऐप के आइकन पर क्लिक करते हैं, तो ऐप खुल जाता है।
  • जब आप किसी पाठ संदेश के लिए "भेजें" पर क्लिक करते हैं, तो यह संदेश भेजता है और ध्वनि बनाता है।
  • जब आप किसी ऐप में लॉग इन करने का प्रयास करते हैं, तो ऐप पासवर्ड मांगता है।
girls discussing

आइए ऐप आविष्कारक प्लेटफॉर्म के विभिन्न हिस्सों को देखकर शुरू करें।

ऐप इन्वेंटर में दो विंडो हैं जिनका उपयोग आप अपना ऐप बनाने के लिए करते हैं। डिज़ाइनर बटन (स्क्रीन के ऊपर दाईं ओर) पर क्लिक करने से आप डिज़ाइनर पर पहुंच जाते हैं, जहाँ आप उपयोगकर्ता इंटरफ़ेस डिज़ाइन करते हैं। उपयोगकर्ता इंटरफ़ेस आपके ऐप में वह सब कुछ है जिसके साथ उपयोगकर्ता इंटरैक्ट कर सकता है। ये चीजें बटन, नेविगेशन बार, टेक्स्ट बॉक्स, चित्र आदि हो सकती हैं।

ऐप आविष्कारक डिज़ाइनर विंडो

App Inventor designer window
1

रंगपट्टिका

आप व्यूअर में जोड़ने के लिए पैलेट से घटक चुनते हैं, जो विंडो के बीच में है। पता लगाने और उपयोग करने के लिए घटकों के कई दराज हैं।

2

टीवी दर्शक

आप व्यूअर पर अपने घटकों खींचें . घटकों को ऊपर से नीचे, बाईं ओर जोड़ा जाता है। आपको अपने घटकों के प्रकट होने के स्थान पर अधिक नियंत्रण प्राप्त करने के लिए लेआउट घटकों और संरेखण का उपयोग करना होगा.

3

अवयव सूची

यह सूची आपको आपकी स्क्रीन पर तत्वों की एक विरासत सूची देती है। आप व्यूअर में या इस सूची में उन पर क्लिक करके उनका चयन कर सकते हैं।

4

गुण पैनल

गुण पैनल आपको प्रत्येक घटक के लिए गुण सेट करने की अनुमति देता है, जैसे फ़ॉन्ट आकार, संरेखण, रंग, आदि।

5

गैर-दृश्यमान घटक

गैर-दृश्यमान घटक स्क्रीन पर दिखाई नहीं देंगे, लेकिन फिर भी ऐप का हिस्सा हैं। जब आप उन्हें खींचते और छोड़ते हैं तो वे स्क्रीन के नीचे दिखाई देते हैं।

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

ब्लॉक संपादक

"ब्लॉक" पर क्लिक करने से आप ब्लॉक एडिटर विंडो पर पहुंच जाते हैं , जहां आप अपनी सारी कोडिंग करते हैं। आप बाईं ओर के पैनल से ब्लॉक को स्क्रीन के केंद्र में कार्यक्षेत्र में खींचते हैं।

App Inventor blocks editor
1
ब्लॉक पैलेट

बाईं ओर, आपको वे ब्लॉक मिलेंगे जिन्हें आप कार्यक्षेत्र में खींच सकते हैं। वे नियंत्रण और तर्क जैसी श्रेणियों /

3

टीवी दर्शक

यह आपका कार्यक्षेत्र है जहां आप अपने सभी ब्लॉकों को खींचते हैं। आप उन्हें इधर-उधर ले जा सकते हैं, उन्हें एक-दूसरे में और अंदर खींच सकते हैं। आप किसी भी ब्लॉक को हटा सकते हैं जिसकी आपको आवश्यकता नहीं है।

2

घटक ब्लॉक

आपके ऐप के प्रत्येक घटक के पास ब्लॉक का अपना सेट होता है। आप उन ब्लॉकों को प्रदर्शित करने के लिए घटक पर क्लिक करेंगे जिन्हें आप कार्यक्षेत्र में खींच सकते हैं।

इवेंट हैंडलर

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

button click event block

जब बटन क्लिक किया जाता है
आप पहले ही इसका इस्तेमाल कर चुके हैं। जब उपयोगकर्ता किसी विशेष बटन पर क्लिक करता है, तो आप चाहते हैं कि ऐप कुछ करे, जैसे कोई अन्य स्क्रीन खोलें, या संदेश भेजें।

screen1 orientation changed event block

जब स्क्रीन ओरिएंटेशन बदला जाता है
यदि उपयोगकर्ता अपने फोन को पोर्ट्रेट (ऊर्ध्वाधर) से लैंडस्केप (क्षैतिज) में बदल देता है, तो आप कुछ करना चाह सकते हैं, जैसे स्क्रीन का लेआउट या घटकों का आकार बदलना।

जब स्लाइडर स्थिति परिवर्तित की जाती है
एक स्लाइडर उपयोगकर्ता को इसके साथ कुछ मूल्य चुनने के लिए इसे खींचने देता है। यह किसी अन्य घटक में परिवर्तन को ट्रिगर कर सकता है। उदाहरण के लिए, आप स्लाइडर का उपयोग करके आरेखण अनुप्रयोग में पेन का आकार बढ़ा सकते हैं.

कार्यों

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

function blocks

टेक्स्ट टू स्पीच.स्पीक
टेक्स्ट टू स्पीच.स्पीक घटक वह पाठ कह या बोल सकता है जो आप उसे बोलना चाहते हैं।

कैमरा.टेकपिक्चर
कैमरा घटक फोन के साथ एक तस्वीर ले सकता है।

साउंड.प्ले
ध्वनि घटक एक ध्वनि चला सकता है।

सेटर्स और गेटर्स

ग्रीन ब्लॉक घटक और उनके गुणों से संबंधित हैं। 

हल्के हरे रंग के ब्लॉक जो दूसरे ब्लॉक में स्नैप कर सकते हैं, उन्हें गेटर्स कहा जाता है, क्योंकि आपको संपत्ति का मूल्य मिल रहा है।

सेटर्स गहरे हरे रंग के होते हैं, और उन्हें अंत में एक खुले स्लॉट के साथ स्नैप किया जा सकता है। यह आपको संपत्ति का मूल्य निर्धारित करने की अनुमति देता है।

app inventor setter and getter blocks

बटन1 का पाठ
Button1 का पाठ प्राप्त किया है और चर वैश्विक अभिवादन में संग्रहीत है.

बटन1 का पाठ
बटन1 का पाठ "मुझे कोडिंग पसंद है" शब्दों पर सेट है। बटन पर "आई लव कोडिंग" शब्द दिखाई देंगे।

लेबल 1का पाठ
लेबल1 का पाठ साउंड1 के स्रोत पर सेट है। इसका मतलब है कि ध्वनि फ़ाइल नाम लेबल1 में प्रदर्शित किया जाएगा।

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

लेबल का पाठ1

TextToSpeech लेबल1 के टेक्स्ट की सामग्री प्राप्त करता है और इसे बोलता है। लेबल 1 में जो भी पाठ प्रदर्शित किया गया है वह बोला जाएगा। 

सबसे सही तरीके: छात्रों को याद दिलाएं कि यह बिल्कुल वैसा ही है जैसा वास्तविक कोडिंग है। अजीब शब्दावली (फ़ंक्शंस, गेटर्स, सेटर्स) जो हम उपयोग कर रहे हैं वह ठीक वही है जो कोडर्स उपयोग करते हैं।

 

छात्रों से पूछने के लिए मार्गदर्शक प्रश्न: क्या आप अपने द्वारा किए जाने वाले कुछ दिन-प्रतिदिन के कार्यों के बारे में सोच सकते हैं? (उदाहरण: एक केक पकाना, अपने दाँत ब्रश करना - कुछ भी जिसमें दोहराए जाने वाले चरण होते हैं)। फ़ंक्शन एल्गोरिदम के समान हैं!

AmeriCorps के समर्थन से मेंटर टिप्स प्रदान किए जाते हैं।

stylized A, AmeriCorps logo in navy

डेटा ब्लॉक

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

app inventor math blocks

नंबर
संख्या मानों का उपयोग किसी अनुप्रयोग में डेटा के रूप में किया जा सकता है. ये ब्लॉक ब्लॉक पैलेट में गणित दराज में पाए जा सकते हैं।

पाठ या स्ट्रिंग्स
पाठ, जिसे कभी-कभी स्ट्रिंग कहा जाता है, का उपयोग डेटा के रूप में किया जा सकता है। ये अक्षर, शब्द और वाक्य हैं जिनका उपयोग किसी ऐप में किया जा सकता है। ब्लॉक ब्लॉक पैलेट के टेक्स्ट ड्रॉवर में पाए जाते हैं।

app inventor boolean blocks

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

गतिविधि: ध्वनि ट्यूटोरियल

अनुमानित समय: 45 मिनट

नीचे दिए गए वीडियो ट्यूटोरियल का पालन करें

यहां ऐप आविष्कारक गैलरी में स्टार्टर प्रोजेक्ट देखें, ऐप को ऐप आविष्कारक में लोड करें,
और नीचे दिए गए वीडियो में डेव के निर्देशों का पालन करें।

ध्यान दें कि लोडिंग निर्देशों को छोड़ने के लिए वीडियो 1:11 से शुरू होता है। यदि आपने ऊपर दिए गए लिंक का उपयोग करके स्टार्टर प्रोजेक्ट लोड किया है तो इन निर्देशों की आवश्यकता नहीं है।

चुनौती

गतिविधि में, आपने उपयोग किया है:

  • इवेंट हैंडलर ब्लॉक
  • फंक्शन ब्लॉक्स

चलो अपने ध्वनि अनुप्रयोग को जोड़ने के द्वारा कुछ सेटर और गेटर ब्लॉक का उपयोग करने की कोशिश.

जब उपयोगकर्ता संबंधित भाषण चलाने के लिए किसी भी चित्र पर क्लिक करता है, तो स्क्रीन की पृष्ठभूमि का रंग बदलें।

आप इसे एक विशेष रंग में बदल सकते हैं, लेकिन फिर आप इसे आसानी से शुरुआती रंग, काले रंग में वापस नहीं बदल सकते हैं, इसलिए इसके बजाय, स्क्रीन की पृष्ठभूमि को एक यादृच्छिक रंग में बदलें। 

संकेत: रंग दराज की जाँच करें और एक रंग ब्लॉक बनाने के लिए देखें। फिर एक यादृच्छिक पूर्णांक ब्लॉक के लिए गणित दराज में देखें। रंग 3 नंबरों से बने होते हैं, लाल, हरे, नीले रंग के लिए आरजीबी, जो 0-255 से लेकर होता है।

परावर्तन

अब जब आपने विभिन्न कोड ब्लॉक के बारे में थोड़ा और जान लिया है, तो अपने ऐप समाधान के बारे में सोचें:

आपको अपने ऐप के लिए किन घटकों की आवश्यकता होगी?
आपके ऐप में किन ईवेंट को ईवेंट हैंडलर की आवश्यकता होगी?
आपके एप्लिकेशन में ईवेंट ट्रिगर होने पर कौन-सी कार्रवाइयाँ होंगी?

प्रमुख शब्दों की समीक्षा

  • प्रयोक्ता इंटरफ़ेस - आपके ऐप में वह सब कुछ जिसके साथ उपयोगकर्ता इंटरैक्ट कर सकता है
  • डिज़ाइनर - विंडो जहां आप अपने ऐप में घटक जोड़ सकते हैं और डिज़ाइन कर सकते हैं कि वे कैसे दिखते हैं
  • ब्लॉक संपादक - वह विंडो जहां आप अपने ऐप के लिए ब्लॉक कोड करते हैं
  • घटना - कुछ ऐसा जो कोड को चलाने के लिए ट्रिगर करने के लिए होता है
  • इवेंट हैंडलर- कोड ब्लॉक जो आपके ऐप को बताता है कि कोई ईवेंट होने पर क्या करना है
  • इवेंट ड्रिवेन प्रोग्रामिंग - पूरे कोड को ऊपर से नीचे तक चलाने के बजाय घटनाओं पर आधारित प्रोग्रामिंग
  • कार्य - कोड का एक ब्लॉक जो चलता है, और कई बार चलाया जा सकता है

अतिरिक्त संसाधन

डेव वोल्बर के ऐप आविष्कारक शुरुआती ट्यूटोरियल के अधिक देखें appinventor.org