कोड चैलेंज 1 – एक स्लाइड शो बनाएं

अपनी स्क्रीन डिज़ाइन करें

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

  1. अपनी स्क्रीन पर एक चित्र जोड़ें
    • इसकी चौड़ाई और ऊंचाई बदलकर अपनी स्क्रीन को फिट कर दें !
    • हम अपने चित्र बनाने के लिए चुनते हैं “फिल पैरेंट” विकल्प चुनते है | जब आप “फिल पैरेंट” चुनते हैं तो आप उस हिस्से को भरने के लिए कह रहे हैं जिसमें यह आंतरिक भाग निहित है | इमेज 1 स्क्रीन के अंदर है, लेकिन बटन क्षैतिज व्यवस्था के कंटेनर के अंदर हैं। आप अन्य चीज़ों के अंदर चीजें देख सकते हैं कि विकल्प सूची में वे किस प्रकार सूचीबद्ध हैं।
  2. चित्र के नीचे आपकी स्क्रीन पर एक क्षैतिज लेआउट जोड़ें। li>
  3. क्षैतिज लेआउट में दो बटन खींचें और छोड़ें
    • विकल्प सूची में बटन पर क्लिक करें
      • बटन को ‘पिछला’ और ‘अगला’ कहने के लिए मूलशब्द संपादित करें
      • आपको याद रखने में आपकी सहायता के लिए आपको अपने बटनों के नाम उनके काम के आधार पर बदलना चाहिए | जिस तरह हमने ‘पिछला’ और ‘अगला’ में बदल दिया। आप ऐसा “नाम बदलें/रीनेम” दबाकर कर सकते हैं |
  4. एक चित्र अपलोड करें जिसे आप अपने स्लाइड शो में उपयोग करना चाहते हैं!
  5. वह चित्र चुनें जिसका उपयोग आप अपने स्लाइड शो की पहली स्क्रीन पर करना चाहते हैं.
    • भाग विकल्प सूची में “चित्र 1” पर क्लिक करें और फिर गुण विकल्प सूची(प्रॉपर्टी मेनू) में “चित्र” पर क्लिक करें। फिर आप अपलोड किये गए चित्र का चयन कर सकते हैं।
  6. कम से कम दो और स्क्रीन जोड़ें हमारे स्लाइड शो के लिए हमने तीन स्क्रीन इस्तेमाल की थी लेकिन आप जितनी चाहें उतनी ही जोड़ सकते हैं।
    • अभी के लिए आपको उन स्क्रीनों के साथ कुछ भी करने की ज़रूरत नहीं है, लेकिन ब्लॉक के कोड के बाद आप उन्हें इस स्क्रीन के लिए बटन और चित्र जोड़ देंगे, ठीक उसी तरह जैसा अपने इस स्क्रीन के लिए किया है |

designer

ब्लॉक्स प्रोग्राम करें

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

  1. आप ‘पिछला’ नाम के बटन पर क्लिक सभी ब्लॉकों को जो आप उपयोग कर सकते है, देख सकते है | पकड़ें when button.click ब्लॉक और अपने कार्यक्षेत्र में खींचें |
  2. ‘नियंत्रण/कण्ट्रोल’ पर क्लिक करें और खोली गई एक और स्क्रीन स्क्रीननाम/स्क्रीननेम ब्लॉक ढूंढें.
  3. खाली टेस्टबोक्स ले और इससे एक और स्क्रीन स्क्रीननाम/स्क्रीननेम ब्लॉक खोलें | अंतिम स्क्रीन का नाम टाइप करें जो आपके स्लाइड शो में होगा। हमारे लिए, यह स्क्रीन 3 था
    |
  4. अपने “अगला” बटन पर क्लिक करें और फिर से when button.click ब्लॉक को पकड़ें
  5. नियंत्रण से दूसरे एक और स्क्रीन स्क्रीननेम खोलें।
  6. एक टेक्स्ट ब्लॉक प्राप्त करें और अगली स्क्रीन में टाइप करें जो आपके स्लाइड शो में दिखाई देगा। (हमारे लिए, यह स्क्रीन 2 था)

blocks

चेक प्वाइंट!

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

अपने फोन, टैबलेट और एमुलेटर के साथ ऐप इन्वेंटर को जोड़े। क्या आपके बटन काम करते हैं जैसे आप उन्हें उम्मीद करते हैं? हमारे बटन काम करते हैं अगर: “पिछला” ने हमें एक खाली स्क्रीन 3 पर पहुंचा दिया और “अगला” ने हमें एक खाली स्क्रीन 2 पर लाया। यदि आपके बटन ऐसा नहीं करते जो आप उन्हें उम्मीद करते हैं, तो वापस जाने का प्रयास करें और सुनिश्चित करें कि आपका कोड सही है|

संकेत: क्योंकि स्क्रीन 2 या स्क्रीन 3 पर कुछ भी नहीं है, हम अपने कंप्यूटर पर ऐप इन्वेंटर का उपयोग करके इसे वापस लेते हुए 1 स्क्रीन पर लौट आए। ऐप आविन्टर आपको अपने कंप्यूटर के उपयोग से आपके कनेक्टेड फोन या एमुलेटर के विभिन्न स्क्रीन के माध्यम से नेविगेट करने की अनुमति देता है। यह बाद में उपयोग करने के लिए एक अच्छी योजना होगी|

अपना ऐप पूरा करें

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

  1. अपने स्लाइड शो के प्रत्येक स्क्रीन के लिए चरण 1-12 दोहराएं सुनिश्चित करें कि ‘अगला’ बटन हमेशा आपको अगली स्क्रीन पर ले जाता है और ‘पिछला’ बटन आपको पिछली स्क्रीन पर वापस ले जाता है।

3screen-diagram
4screen-diagram

अंतिम चेक प्वाइंट!

सुनिश्चित करें कि आपका ऐप काम करता है! हर “अगला” और हर “पिछला” बटन का परीक्षण करें क्या वे आपको एक नई स्क्रीन पर ले जाते हैं? यदि नहीं, तो अपने काम की जांच करें और सुनिश्चित करें कि आपने अपने स्क्रीन के नाम सही तरीके से टाइप किए हैं |

बधाई! आपने अपना पहला कोडिंग चुनौती पूरी कर ली है! आपको बहुत निपुण होना चाहिए! बहुत से लोगों ने कभी भी एक ऐप को कोड नहीं किया है |

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

स्रोत कोड निर्देश


स्रोत कोड डाउनलोड करें