थंकेबल: नज़दीकी नज़र

  • इवेंट-संचालित प्रोग्रामिंग के बारे में जानें
  • थंकेबल प्लेटफॉर्म में विभिन्न प्रकार के ब्लॉकों को समझें

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

घटनाओं

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

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

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

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

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

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

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

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

थंकेबल डिज़ाइनर विंडो

Thunkable designer window
1

घटक सूची

आपके द्वारा अपने ऐप में जोड़े गए सभी घटक यहां दिखाई देते हैं, जो स्क्रीन द्वारा पदानुक्रमित रूप से व्यवस्थित होते हैं।

3

कार्यक्षेत्र

आप इस केंद्रीय कार्यक्षेत्र में अपने घटकों को फ़ोन पर खींचते हैं। आपके पास इस बात पर नियंत्रण है कि घटकों को कहां रखा गया है और साथ ही उनका आकार भी।

2

घटक जोड़ें

आप दृश्य घटक इस पैनल से कार्यस्थान में खींचें। 

4

गुण पैनल

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

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

ब्लॉक संपादक

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

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

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

4

कोडिंग कार्यस्थान

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

2

कोर ब्लॉक

कोर ब्लॉक आपके ऐप में उपयोग करने के लिए मानक कोडिंग ब्लॉक हैं। उन्हें उनके प्रकार और रंग कोडित के अनुसार वर्गीकृत किया गया है।

3

ऐप फीचर्स

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

इवेंट हैंडलर

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

Thunkable button click event block

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

Thunkable list-viewer item click event block

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

Thunkable screen opens event block

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

कार्यों

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

function blocks

कहना
यह फ़ंक्शन ऐप को वह टेक्स्ट कहने या बोलने देता है जो आप उसे बोलना चाहते हैं।

टाइमर स्टार्ट और साउंड प्ले
टाइमर घटक गिनती शुरू कर सकता है।  और ऐप एक ध्वनि चला सकता है।

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

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

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

Thunkable getter blocks

बटन1 का पाठ
टेक्स्ट को वेरिएबल numberChoice में प्राप्त और सहेजा गया है।

सेकंड में टाइमर 1 का समय
टाइमर के सेकंड का मान Lablel1 के टेक्स्ट में प्राप्त और संग्रहीत किया जाता है, इसलिए मान लेबल में प्रदर्शित होता है। 

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

Thunkable setter blocks

बटन1 का पाठ
Button1 का पाठ "मुझे क्लिक करें!" शब्दों पर सेट है।

लेबल1.टेक्स्ट
Label1 का टेक्स्ट Timer1 के Time in Seconds पर सेट है।

Timer1 का अंतरालमिलीसेकंड
Timer1 का IntervalMilliseconds (यह कितनी बार बंद हो जाता है) 3000, या 3 सेकंड पर सेट है।

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

 

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

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

stylized A, AmeriCorps logo in navy

डेटा ब्लॉक

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

thunkable math blocks

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

thunkable text block

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

thunkable boolean blocks

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

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

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

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

मीडिया फ़ाइलें यहां डाउनलोड करें (अधिक जानकारी के लिए डेव का वीडियो देखें)
फिर अपने ऐप में भाषण चलाने के लिए इवेंट हैंडलर और फ़ंक्शंस का उपयोग करने के लिए नीचे दिए गए डेव के वीडियो का अनुसरण करें।

चुनौती

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

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

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

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

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

 संकेत: यादृच्छिक रंग प्राप्त करने का तरीका देखने के लिए रंग दराज की जाँच करें।

परावर्तन

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

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

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

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

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

डेव वोल्बर के थंकेबल ट्यूटोरियल के अधिक देखें draganddropcode.com

छात्र राजदूत मीनाक्षी नायर का उडेमी पर मुफ्त थंकेबल कोर्स एक और महान संसाधन है!