पासे वाला एक इंटरैक्टिव पासा रोलर ऐप्लिकेशन बनाएं

इस कोडलैब में, आप पासा रोल करने वाला Android ऐप्लिकेशन बनाएंगे. इस ऐप्लिकेशन से उपयोगकर्ता, पासा फेंकने के लिए ऐप्लिकेशन में Button पर क्लिक कर सकते हैं. रोल का नतीजा TextView पर स्क्रीन पर दिखाया जाएगा.

अपना ऐप्लिकेशन लेआउट बनाने के लिए, आप Android Studio में लेआउट एडिटर का इस्तेमाल करेंगे. इसके बाद, Button पर क्लिक होने पर क्या होता है, इसके लिए Kotlin कोड लिखें.

ज़रूरी बातें

• Android Studio में &कोटेशन, नमस्ते, वर्ल्ड!&कोटेशन बनाने, और चलाने का तरीका.
• किसी ऐप्लिकेशन में TextViews और ImageViews का इस्तेमाल करने की जानकारी.
• लेआउट एडिटर में, TextView के एट्रिब्यूट में बदलाव करने का तरीका.
• अपने ऐप्लिकेशन का अनुवाद करना और स्ट्रिंग का फिर से इस्तेमाल करना आसान बनाने के लिए टेक्स्ट को स्ट्रिंग संसाधन में कैसे निकाला जाए.
• Kotlin प्रोग्रामिंग की बुनियादी बातें जो पिछले कोडलैब में सिखाई गई थीं.

आप इन चीज़ों के बारे में जानेंगे

• किसी Android ऐप्लिकेशन में Button जोड़ने का तरीका.
• Button में किसी टैप किए जाने पर व्यवहार जोड़ने का तरीका.
• किसी ऐप्लिकेशन के Activity कोड को खोलने और उसमें बदलाव करने का तरीका.
• Toast मैसेज दिखाने का तरीका.
• जब ऐप्लिकेशन चल रहा हो, तब TextView के कॉन्टेंट को अपडेट करने का तरीका.

आप क्या बनाएंगे #39;

• पासा फेंकने वाला Android ऐप्लिकेशन, जिसमें पासा फेंकने के लिए Button होता है. साथ ही, रोल की मदद से टेक्स्ट को स्क्रीन पर अपडेट करता है.

आपको इन चीज़ों की ज़रूरत पड़ेगी

• कंप्यूटर पर Android Studio इंस्टॉल किया गया हो.

जब आप यह कोडलैब पूरा कर लेंगे, तो ऐप्लिकेशन कुछ ऐसा दिखेगा.

एक खाली गतिविधि प्रोजेक्ट बनाएं

1. अगर Android Studio में आपका पहले से कोई प्रोजेक्ट खुला है, तो नया प्रोजेक्ट बनाएं स्क्रीन खोलने के लिए, फ़ाइल > नया > नया प्रोजेक्ट... पर जाएं.
2. नया प्रोजेक्ट बनाएं में, खाली गतिविधि टेंप्लेट का इस्तेमाल करके नया Kotlin प्रोजेक्ट बनाएं.
3. कम से कम 19 (KitKat) वाले एपीआई लेवल के साथ, ऐप्लिकेशन को कोट करें.

अहम जानकारी: अगर आपको Android Studio में नया प्रोजेक्ट बनाने की जानकारी नहीं है, तो अपना पहला Android ऐप्लिकेशन बनाना और उसे चलाना जानकारी देखें.

4. नया ऐप्लिकेशन चलाएं और यह कुछ ऐसा दिखना चाहिए.
   

लेआउट एडिटर खोलना

1. प्रोजेक्ट विंडो में, इसे खोलने के लिए activity_main.xml (app > res > layout > activity_main.xml) पर दो बार क्लिक करें. आपको ऐप्लिकेशन के बीच में लेआउट एडिटर दिखेगा. इसमें सिर्फ़ &कोटेशन शामिल है;TextView है.
   

इसके बाद, आप अपने ऐप्लिकेशन में Button जोड़ेंगे. Android के उपयोगकर्ता के लिए, यूज़र इंटरफ़ेस (यूआई) एलिमेंट, Button है. उपयोगकर्ता इस पर टैप करके, कोई कार्रवाई कर सकता है.

इस टास्क में, आप &कोट्स के नीचे Button;नमस्ते वर्ल्ड&कोट</br>; TextView जोड़ें. TextView और Button ConstraintLayout के अंदर मौजूद होंगे. यह एक तरह का ViewGroup है.

जब ViewGroup में Views होता है, तो Views को माता-पिता ViewGroup का बच्चे माना जाता है. आपके ऐप्लिकेशन के मामले में, TextView और Button को पैरंट ConstraintLayout का बच्चा माना जाएगा.

अपने ऐप्लिकेशन में Button को मौजूदा ConstraintLayout के चाइल्ड के तौर पर जोड़ें.

ध्यान दें: एक फ़ैमिली ट्री की तरह ही, व्यू के क्रम में, पैरंट व्यू खुद चाइल्ड व्यू हो सकते हैं और चाइल्ड व्यू अन्य बच्चों के माता-पिता हो सकते हैं.

लेआउट में बटन जोड़ें

1. Button प्लेट व्यू से डिज़ाइन व्यू पर खींचें और उसे &कोटेशन के नीचे रखें; &Hello World&कोटेशन; TextView.
   
2. कॉम्पोनेंट ट्री में पैलेट के नीचे, पुष्टि करें कि Button और TextView को ConstraintLayout (ConstraintLayout के बच्चों के तौर पर) में शामिल किया गया है.
3. गड़बड़ी पर ध्यान दें कि Button सीमित नहीं है. Button ConstraintLayout के अंदर बैठा हुआ है. इसलिए, आपको इसे पोज़िशन करने के लिए, वर्टिकल और हॉरिज़ॉन्टल कंस्ट्रेंट सेट करने होंगे.

बटन को सही जगह पर रखें

इस चरण में आप #39;ऊपर से ऊपर और नीचे TextView तक एक वर्टिकल कंस्ट्रेंट जोड़ें. यह TextView के नीचे Button को दिखाएगा.

1. डिज़ाइन व्यू में, Button के ऊपरी किनारे पर, सफ़ेद गोले को नीले बॉर्डर से दबाकर रखें. पॉइंटर को खींचें और एक तीर, पॉइंटर के साथ-साथ जाएगा. जब आप & &कोटेशन;नमस्ते वर्ल्ड&कोटेशन; TextView के निचले किनारे पर पहुंच जाएं ऐसा करने से, लेआउट का कंस्ट्रेंट होता है और Button स्लाइड, TextView के ठीक नीचे तक जाती है.
   
2. लेआउट एडिटर की दाईं ओर एट्रिब्यूट देखें.
3. कंस्ट्रेंट विजेट में, नए लेआउट कंस्ट्रेंट को देखें जो TextView, टॉप → बॉटमऑफ़ टेक्स्टव्यू (0dp) के सबसे नीचे सेट होता है. (0dp) का मतलब है कि 0 का मार्जिन है. आपके पास हाॅरिज़ॉन्टल कंस्ट्रेंट मौजूद नहीं हैं.
   
4. Button की बाईं ओर से, ConstraintLayout की बाईं ओर से हॉरिज़ॉन्टल कंस्ट्रेंट जोड़ें.
5. दाईं ओर दोहराएं, Button के दाएं किनारे को ConstraintLayout के दाएं किनारे से कनेक्ट करें. परिणाम कुछ ऐसा दिखना चाहिए:

6. अगर अब भी Button चुना हुआ है, तो कंस्ट्रेंट विजेट ऐसा दिखना चाहिए. जोड़ी गई दो और पाबंदियों पर ध्यान दें: Start → StartOf स्टोरी (0dp) और End → EndOf स्टोरी (0dp). इसका मतलब है कि Button हॉरिज़ॉन्टल रूप से अपने पैरंट ConstraintLayout के बीच में है.
   

7. ऐप्लिकेशन चलाएं. यह नीचे दिए गए स्क्रीनशॉट की तरह दिखना चाहिए. आप Button पर क्लिक कर सकते हैं, लेकिन यह अभी तक #33 नहीं करता. आगे बढ़ते रहें!

बटन का टेक्स्ट बदलना

आप लेआउट एडिटरमें कुछ और यूज़र इंटरफ़ेस (यूआई) में बदलाव करने जा रहे हैं.

Button लेबल को दिखाने के लिए "Button&kot;; देने के बजाय, इसे किसी ऐसी चीज़ में बदलें जो बटन के बारे में बताती हो: &कोटेशन;रोल&कोट करें..

1. लेआउट एडिटर में, चुने गए Button के साथ, एट्रिब्यूट पर जाएं, टेक्स्ट को भूमिका में बदलें, और Enter (Mac पर Return) दबाएं.

2. कॉम्पोनेंट ट्री में Button के बगल में नारंगी रंग का चेतावनी वाला त्रिभुज दिखता है. पॉइंटर को त्रिभुज के ऊपर घुमाने पर, आपको एक मैसेज दिखेगा. Android Studio को आपके ऐप्लिकेशन कोड में, हार्डकोड की गई स्ट्रिंग (&kot;Roll&quat;) का पता चला है. हालांकि, यह आपको स्ट्रिंग रिसॉर्स का इस्तेमाल करने का सुझाव देता है.

हार्डकोड स्ट्रिंग होने का मतलब है कि ऐप्लिकेशन का अन्य भाषाओं में अनुवाद करना मुश्किल होगा और आपके ऐप्लिकेशन के अलग-अलग हिस्सों में स्ट्रिंग का फिर से इस्तेमाल करना मुश्किल होगा. सबसे अच्छी बात यह है कि Android Studio में आपके लिए अपने-आप समस्या ठीक हो जाती है.

3. कॉम्पोनेंट ट्री में, नारंगी रंग के त्रिभुज पर क्लिक करें.

चेतावनी वाला पूरा मैसेज खुलता है.

4. मैसेज में सबसे नीचे, सुझाए गए सुधार में जाकर, ठीक करें बटन पर क्लिक करें. (आपको नीचे स्क्रोल करना पड़ सकता है.)
5. निकालें संसाधन डायलॉग खुलता है. स्ट्रिंग निकालने के लिए, &&tt[Roll &quat; टेक्स्ट लें और strings.xml में roll नाम का स्ट्रिंग रिसॉर्स बनाएं (app > res > values > strings.xml). डिफ़ॉल्ट मान सही हैं, इसलिए OK पर क्लिक करें.

6. ध्यान दें कि एट्रिब्यूट में Button के लिए, टेक्स्ट एट्रिब्यूट अब @string/roll बताता है, जो आपके अभी बनाए गए संसाधन से जुड़ा है.
   

डिज़ाइन व्यू में, Button को अब भी इस पर रोल करना चाहिए.

TextView को स्टाइल देना

& दर्ज करें!नमस्ते दुनिया!&कोटेशन; टेक्स्ट बहुत छोटा है और मैसेज आपके ऐप्लिकेशन के लिए सही है'टेक्स्ट.

1. डिज़ाइन एडिटर में TextView चुनें, ताकि इसके एट्रिब्यूट एट्रिब्यूट विंडो में दिखें.
2. TextView के textSize को 36sp में बदलें, ताकि यह बड़ा और पढ़ने में आसान हो. textSize को ढूंढने के लिए, आपको स्क्रोल करना पड़ सकता है.

3. TextView का टेक्स्ट एट्रिब्यूट मिटाएं. आपको उपयोगकर्ता को TextView में तब तक कुछ भी दिखाने की ज़रूरत नहीं है, जब तक उपयोगकर्ता उसे पास नहीं कर लेता.

हालांकि, जब आप अपने ऐप्लिकेशन के लेआउट और कोड में बदलाव कर रहे होते हैं, तब TextView में कुछ टेक्स्ट देखना बहुत मददगार होता है. इस काम के लिए, आप TextView में ऐसा टेक्स्ट जोड़ सकते हैं जो सिर्फ़ लेआउट की झलक के लिए दिखता है, लेकिन ऐप्लिकेशन के चलने पर नहीं.

.

4. कॉम्पोनेंट ट्री में TextView को चुनें.
5. सामान्य एट्रिब्यूट में, text एट्रिब्यूट ढूंढें. इसके नीचे, टूल आइकॉन के साथ एक और text एट्रिब्यूट है. जब ऐप्लिकेशन चल रहा हो, तब उपयोगकर्ता को टेक्स्ट एट्रिब्यूट दिखाया जाएगा. टूल आइकॉन के साथ text एट्रिब्यूट, "tools text&kot; एट्रिब्यूट है जो सिर्फ़ आपके लिए डेवलपर के तौर पर है.
6. TextView में, टूल टेक्स्ट को & में कोट करें. &&ott1;कोटेशन; केवल Android Studio के भीतर डिज़ाइन एडिटर में दिखाई देगा, लेकिन यह तब दिखाई नहीं देगा, जब आप ऐप्लिकेशन को किसी वास्तविक डिवाइस या एम्युलेटर पर चलाएंगे.

ध्यान दें कि इस टेक्स्ट को सिर्फ़ ऐप्लिकेशन डेवलपर देख सकते हैं, इसलिए आपको इसके लिए कोई स्ट्रिंग रिसॉर्स बनाने की ज़रूरत नहीं है.

7. झलक में अपने ऐप्लिकेशन की झलक देखें. &कोटेशन आइकॉन दिख रहा है.

8. अपना ऐप्लिकेशन चलाएं. जब ऐप्लिकेशन एम्युलेटर पर चलता है, तो ऐप्लिकेशन कुछ ऐसा दिखता है. &कोटेशन;1 नहीं दिखाया जा रहा है. यह सही व्यवहार है.

बहुत बढ़िया, आप लेआउट में बदलाव कर चुके हैं!

आपके पास बटन वाला ऐप्लिकेशन है, लेकिन बटन पर टैप करने से कुछ नहीं होगा. इसमें बदलाव करने के लिए, आपको कुछ Kotlin कोड लिखना होगा जो पासा रोल करने और बटन पर टैप करने से स्क्रीन को अपडेट कर देता है.

यह बदलाव करने के लिए, आपको यह समझना होगा कि किसी Android ऐप्लिकेशन की बनावट कैसी होती है.

Activity से वह विंडो मिलती है जिसमें आपका ऐप्लिकेशन अपना यूज़र इंटरफ़ेस (यूआई) बनाता है. आम तौर पर, Activity आपके रनिंग ऐप्लिकेशन की पूरी स्क्रीन पर दिखता है. हर ऐप्लिकेशन में एक या एक से ज़्यादा ऐक्टिविटी होती हैं. टॉप-लेवल या पहली गतिविधि को अक्सर MainActivity कहा जाता है और इसे प्रोजेक्ट टेंप्लेट की मदद से उपलब्ध कराया जाता है. उदाहरण के लिए, जब उपयोगकर्ता अपने डिवाइस पर मौजूद ऐप्लिकेशन की सूची को स्क्रोल करता है और &Diot&Dice Roller&cot; ऐप्लिकेशन आइकॉन पर टैप करता है, तो Android सिस्टम ऐप्लिकेशन का MainActivity शुरू करेगा.

अपने MainActivity कोड में, आपको Activity's लेआउट के बारे में जानकारी देनी होगी. साथ ही, यह भी बताना होगा कि उपयोगकर्ता को उसके साथ कैसे इंटरैक्ट करना चाहिए.

• जन्मदिन कार्ड ऐप्लिकेशन में Activity मौजूद होता है, जो जन्मदिन के मैसेज और इमेज दिखाता है.
• Dice Roller ऐप्लिकेशन में, एक Activity होता है, जो TextView और Button का लेआउट अभी-अभी बनाया गया है.

ज़्यादा जटिल ऐप्लिकेशन के लिए, एक से ज़्यादा स्क्रीन हो सकती हैं और एक से ज़्यादा Activity हो सकते हैं. हर Activity का एक खास मकसद होता है.

उदाहरण के लिए, किसी फ़ोटो गैलरी ऐप्लिकेशन में, आप फ़ोटो के ग्रिड को दिखाने के लिए Activity, अलग-अलग फ़ोटो देखने के लिए Activity, और हर फ़ोटो में बदलाव करने के लिए तीसरा Activity रख सकते हैं.

MainActivity.kt फ़ाइल खोलें

MainActivity में किसी बटन पर टैप करने के लिए, आप कोड जोड़ेंगे. इसे सही तरीके से करने के लिए, आपको अपने ऐप्लिकेशन में पहले से मौजूद MainActivity कोड के बारे में ज़्यादा जानना होगा.

1. MainActivity.kt फ़ाइल पर जाएं और खोलें (app > java > com.example.diceroller > MainActivity.kt). नीचे आपको देखना चाहिए. अगर आपको import... दिखता है, तो इंपोर्ट की जानकारी को बड़ा करने के लिए, ... पर क्लिक करें.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

आपको ऊपर दिए गए कोड के हर शब्द को समझना नहीं है, लेकिन आपको इसके बारे में सामान्य जानकारी होनी चाहिए. आप जितना ज़्यादा Android कोड के साथ काम करेंगे, यह आपको उतना ही ज़्यादा जाने-माने जाएगा और आप इसे #39 के तौर पर पहचान पाएंगे.

2. MainActivity क्लास के लिए Kotlin कोड देखें. इसे class कीवर्ड और फिर नाम से पहचाना जा सकता है.

class MainActivity : AppCompatActivity() {
    ...
}

3. ध्यान दें कि आपके MainActivity में main() फ़ंक्शन नहीं है.
   
   शुरुआत में, आपको पता चला था कि हर Kotlin प्रोग्राम में main() फ़ंक्शन होना चाहिए. Android ऐप्लिकेशन अलग तरह से काम करते हैं. main() फ़ंक्शन को कॉल करने के बजाय, जब आपका ऐप्लिकेशन पहली बार खोला जाता है, तो Android सिस्टम आपके MainActivity के onCreate() तरीके को कॉल करता है.
   
4. नीचे दिए गए कोड जैसा दिखने वाला onCreate() तरीका ढूंढें.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

आप बाद में कोडलैब (कोड बनाना सीखना) में override के बारे में जानेंगे (इसलिए, इसे अभी इस्तेमाल न करें). बाकी के onCreate() तरीके से MainActivity सेट अप किया जाता है. इसके लिए, इंपोर्ट से मिले कोड का इस्तेमाल किया जाता है और शुरुआती लेआउट को setContentView() के साथ सेट किया जाता है.

5. import से शुरू होने वाली लाइनें देखें.
   

Android ऐप्लिकेशन को लिखना आसान बनाने के लिए, Android कई क्लास की फ़्रेमवर्क उपलब्ध कराता है. हालांकि, यह जानना ज़रूरी है कि असल में आपकी क्लास क्या है. आप import स्टेटमेंट का इस्तेमाल करके, यह तय कर सकते हैं कि आपके कोड में किस क्लास का इस्तेमाल करना है. उदाहरण के लिए, Button क्लास को android.widget.Button में परिभाषित किया गया है.

अपने आप इंपोर्ट करने की सुविधा चालू करें

जब आप ज़्यादा क्लास का इस्तेमाल करते हैं, तो import स्टेटमेंट जोड़ना काफ़ी मेहनत का काम हो सकता है. सबसे अच्छी बात यह है कि जब आप अन्य लोगों की ओर से दी गई क्लास इस्तेमाल कर रहे होते हैं, तब Android Studio सही इंपोर्ट करने में आपकी मदद करता है. इस चरण में आप जब चाहें, Android Studio को इंपोर्ट और अपने-आप इंपोर्ट होने से रोकने के लिए, Android Studio को कॉन्फ़िगर करेंगे.

1. Android Studio में, फ़ाइल > अन्य सेटिंग > नए प्रोजेक्ट के लिए प्राथमिकताएं पर जाकर सेटिंग खोलें.
2. अन्य सेटिंग; ऑटो इंपोर्ट को बड़ा करें. Java और Kotlin सेक्शन में पक्का करें कि बिना इंपोर्ट किए, आसानी से इंपोर्ट किए जा सकने वाले आइटम जोड़ें. साथ ही, ऑप्टिमाइज़ इंपोर्ट को तुरंत (प्रोजेक्ट के लिए) चुनें. ध्यान दें कि हर सेक्शन में दो चेकबॉक्स होते हैं.
   
   असामान्य इंपोर्ट सेटिंग, Android Studio को इंपोर्ट स्टेटमेंट अपने-आप जोड़ने की अनुमति देती है. ऐसा तब तक किया जा सकता है, जब तक यह तय करता है कि कौनसा स्टेटमेंट इस्तेमाल करना है. इंपोर्ट ऑप्टिमाइज़ सेटिंग Android Studio को उन सभी इंपोर्ट को हटाने के लिए कहती है जिनका इस्तेमाल आपके कोड से नहीं किया जा रहा है.
   
3. बदलावों को सेव करने के लिए और ठीक है दबाकर सेटिंग बंद करें.

अब आप MainActivity के बारे में कुछ और जान चुके हैं, इसलिए आप ऐप्लिकेशन में बदलाव करेंगे, ताकि Button पर क्लिक करके स्क्रीन पर कुछ किया जा सके.

बटन क्लिक होने पर मैसेज दिखाना

इस चरण में, आप तय करेंगे कि बटन पर क्लिक होने पर, स्क्रीन के नीचे एक छोटा सा मैसेज दिखे.

1. setContentView() कॉल के बाद इस तरीके को onCreate() तरीके से जोड़ें. findViewById() तरीके को लेआउट में Button मिलता है. R.id.button, Button का रिसॉर्स आईडी है, जो इसका यूनीक आइडेंटिफ़ायर है. यह कोड, rollButton ऑब्जेक्ट में Button ऑब्जेक्ट की पहचान सेव करता है, न कि Button ऑब्जेक्ट में.

val rollButton: Button = findViewById(R.id.button)

ध्यान दें: Android आपके ऐप्लिकेशन में मौजूद संसाधनों को अपने-आप आईडी नंबर असाइन कर देता है. उदाहरण के लिए, भूमिका बटन में एक रिसॉर्स आईडी होता है और बटन टेक्स्ट की स्ट्रिंग में भी एक रिसॉर्स आईडी होता है. रिसॉर्स आईडी, R.<type>.<name> फ़ॉर्मैट में होते हैं. उदाहरण के लिए, R.string.roll. View आईडी के लिए, <type> id होता है, जैसे कि R.id.button.

कोड, Button ऑब्जेक्ट के रेफ़रंस को rollButton वैरिएबल में सेव करता है, न कि Button ऑब्जेक्ट में.

अहम जानकारी: जब यह किसी वैरिएबल को कोई ऑब्जेक्ट असाइन करता है, तो Kotlin में हर बार पूरे ऑब्जेक्ट को कॉपी नहीं किया जाता. इससे, किसी ऑब्जेक्ट के लिए एक रेफ़रंस सेव होता है. किसी रेफ़रंस को सोशल सिक्योरिटी नंबर या किसी दूसरे नैशनल आईडी नंबर की तरह देखा जा सकता है: नंबर किसी व्यक्ति के बारे में है, लेकिन यह व्यक्ति का नहीं होता. नंबर कॉपी करने के बाद, आप उस व्यक्ति को #39 कॉपी नहीं करते.

onCreate() विधि अब कुछ इस तरह दिखाई देनी चाहिए.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. पुष्टि करें कि Android Studio ने Button के लिए, अपने-आप import स्टेटमेंट जोड़ा है.
   ध्यान दें कि अब तीन इंपोर्ट स्टेटमेंट हैं—तीसरा स्टेटमेंट अपने-आप जुड़ गया है.
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

ध्यान दें: अगर अपने-आप इंपोर्ट होने की सुविधा चालू नहीं हुई है, तोButton लाल रंग से हाइलाइट हो जाएगा. मैन्युअल रूप से सही इंपोर्ट जोड़ने के लिए, Button शब्द के अंदर टेक्स्ट कर्सर रखें, फिर Alt+Enter (Mac पर Option+Enter) दबाएं.

इसके बाद, आपको कोड को Button से जोड़ना होगा, ताकि Button पर टैप करने के बाद कोड को चलाया जा सके. क्लिक लिसनर एक कोड होता है, जो बताता है कि टैप या क्लिक होने पर क्या करना चाहिए. यह एक ऐसा कोड है जो साइट पर अभी-अभी रखा गया है. जैसे कि उपयोगकर्ता के क्लिक करने पर & &कोटेशन इस्तेमाल करने का कोटेशन. इस मामले में Button पर क्लिक करें.

3. rollButton ऑब्जेक्ट का इस्तेमाल करें और setOnClickListener() तरीके को कॉल करके, क्लिक लिसनर सेट करें.

rollButton.setOnClickListener {
}

लिखते ही, Android Studio एक से ज़्यादा सुझाव दिखा सकता है. इस मामले के लिए, setOnClickListener{0}...} विकल्प चुनें.

कर्ली ब्रैकेट में, आप निर्देश देते हैं कि बटन टैप करने पर क्या होना चाहिए. फ़िलहाल, आपको और #39;आपके ऐप्लिकेशन में Toast दिखेगा, जो उपयोगकर्ता को एक छोटा सा मैसेज होगा.

4. Toast.makeText() को कॉल करके, टेक्स्ट Toast के साथ "Dice Rolled!" बनाएं.

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. इसके बाद, show() तरीके को कॉल करके, Toast को खुद को दिखाने के लिए कहें.

toast.show()

अपडेट की गई आपकी MainActivity कक्षा इस तरह दिखती है; package और import स्टेटमेंट अब भी फ़ाइल में सबसे ऊपर मौजूद हैं:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

आप क्लिक लिसनर की दो लाइन को बिना वैरिएबल के एक लाइन में जोड़ सकते हैं. यह एक सामान्य पैटर्न है, जो आपको दूसरे कोड में मिल सकता है.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. ऐप्लिकेशन चलाएं और रोल करें बटन पर क्लिक करें. टोस्ट संदेश स्क्रीन के नीचे पॉप अप होना चाहिए और कुछ समय बाद गायब हो जाना चाहिए.

बहुत बढ़िया! बटन क्लिक करने से मैसेज पॉप-अप हो गया! आपने पहली बार Android के लिए Kotlin कोड लिखा है!

बटन क्लिक होने पर TextView अपडेट करें

कुछ समय के लिए Toast मैसेज दिखाने के बजाय, आप स्क्रीन पर TextView को अपडेट करने के लिए, रोल बटन पर क्लिक करने से कोड लिखेंगे.

1. activity_main.xml पर वापस जाएं (app > res > layout >activity_main.xml)
2. TextView पर क्लिक करें.
3. ध्यान दें कि id textView है.
   
4. MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt) खोलें
5. ऐसे कोड की लाइनों को मिटाएं जो Toast बनाते हैं और दिखाते हैं.

rollButton.setOnClickListener {
  
}

6. उनकी जगह, TextView को स्टोर करने के लिए resultTextView नाम का नया वैरिएबल बनाएं.
7. findViewById() के आईडी का इस्तेमाल करके, लेआउट में textView को ढूंढें और उसका रेफ़रंस स्टोर करें.

val resultTextView: TextView = findViewById(R.id.textView)

8. resultTextView के टेक्स्ट को कोटेशन में '&कोट' करने के लिए सेट करें.
   

resultTextView.text = "6"

यह वैसा ही है जैसा आपने एट्रिब्यूट में text सेट करके किया था, लेकिन अब यह आपके कोड में है #39;, इसलिए टेक्स्ट डबल कोट के निशान के अंदर होना चाहिए. इस सेटिंग को साफ़ तौर पर सेट करने का मतलब है कि फ़िलहाल TextView, हमेशा 6 दिखाता है. पासा रोल करने और अगले टास्क में अलग-अलग मान दिखाने के लिए, आपको कोड जोड़ना होगा.

MainActivity क्लास कुछ इस तरह दिखेगी:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. ऐप्लिकेशन चलाएं. बटन पर क्लिक करें. इसे TextView को &606;6&कोटेशन पर अपडेट करना चाहिए.

सिर्फ़ एक चीज़ जो पास नहीं है वह असल में पासा फेंकती है. आप पिछले कोडलैब (कोड बनाना सीखना) से Dice क्लास का फिर से इस्तेमाल कर सकते हैं, जो पासा फेंकने के तर्क को संभालता है.

पासा जोड़ें

1. MainActivity क्लास में आखिरी कर्ली ब्रैकेट के बाद, roll() तरीके का इस्तेमाल करके Dice क्लास बनाएं.

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. ध्यान दें कि Android Studio, स्लेटी रंग की रेखाओं के साथ numSides को अंडरलाइन करता है. (इसे दिखने में कुछ समय लग सकता है.)
3. अपने कर्सर को numSides पर घुमाएं और आपको एक पॉप-अप दिखेगा, जिसमें लिखा होगा प्रॉपर्टी 'numSides' निजी हो सकता है.
   

numSides को private के तौर पर मार्क करने से, यह सिर्फ़ Dice क्लास में ऐक्सेस किया जा सकेगा. numSides का इस्तेमाल करने वाला सिर्फ़ एक कोड Dice क्लास के अंदर होगा. इसलिए, Dice क्लास के लिए इस आर्ग्युमेंट को private बनाना ठीक है. आपको अगली यूनिट में private बनाम public वैरिएबल के बारे में ज़्यादा जानकारी मिलेगी.

4. आगे बढ़ें और बनाएं 'numSides' 'private' पर क्लिक करके Android Studio से सुझाए गए सुधार करें.

RollDice() तरीका बनाना

अब आपने ##39;Dice को अपने ऐप्लिकेशन में जोड़ लिया है, तो आपको और #39;MainActivity का इस्तेमाल करने के लिए उसे अपडेट करना होगा. कोड को बेहतर तरीके से व्यवस्थित करने के लिए, पासा लगाने की सभी प्रक्रिया को एक फ़ंक्शन में रखें.

1. क्लिक लिसनर में उस कोड को बदलें, जो टेक्स्ट को rollDice() पर कॉल करके "6" पर सेट करता है.

rollButton.setOnClickListener {
   rollDice()
}

2. फ़िलहाल, rollDice() को #39; तय नहीं किया गया है, इसलिए Android Studio में कोई गड़बड़ी है और वह rollDice() को लाल रंग में दिखाता है.
3. अगर आप अपना पॉइंटर rollDice() पर घुमाते हैं, तो Android Studio समस्या और कुछ संभावित समाधान दिखाता है.

4. ज़्यादा कार्रवाइयां... पर क्लिक करें जिससे मेन्यू दिखता है. Android Studio में आपको और भी ज़्यादा काम करने की सुविधा मिलती है!

सलाह: अगर आपको पॉइंटर पर माउस घुमाने में परेशानी होती है, तो ज़्यादा कार्रवाइयां... पर क्लिक करके, rollDice() पर क्लिक करें. इसके बाद, मेन्यू को लाने के लिए, Alt+Enter (Mac पर Option+Enter) दबाएं.

5. फ़ंक्शन बनाएं 'rollDice' चुनें. Android Studio, MainActivity में फ़ंक्शन के लिए एक खाली परिभाषा बनाता है.

private fun rollDice() {
    TODO("Not yet implemented")
}

पासे वाला नया ऑब्जेक्ट इंस्टेंस बनाएं

इस चरण में आप rollDice()# पासा बनाकर पासा फेंक सकते हैं और फिर नतीजे को TextView में दिखा सकते हैं.

1. rollDice() के अंदर, TODO() कॉल मिटाएं.
2. 6 साइड वाला पासा बनाने के लिए कोड जोड़ें.

val dice = Dice(6)

3. roll() वाले तरीके को कॉल करके पासा फेंकें और नतीजे को diceRoll नाम के वैरिएबल में सेव करें.

val diceRoll = dice.roll()

4. findViewById() को कॉल करके, TextView को ढूंढें.

val resultTextView: TextView = findViewById(R.id.textView)

diceRoll वैरिएबल एक संख्या है, लेकिन TextView टेक्स्ट का इस्तेमाल करता है. आप diceRoll पर toString() तरीके का इस्तेमाल करके, इसे स्ट्रिंग में बदल सकते हैं.

5. diceRoll को एक स्ट्रिंग में बदलें और उसका इस्तेमाल resultTextView का टेक्स्ट अपडेट करने के लिए करें.

resultTextView.text = diceRoll.toString()

rollDice() तरीका ऐसा दिखता है:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. अपना ऐप्लिकेशन चलाएं. पासे वाले नतीजे, 6 के अलावा अन्य वैल्यू में बदले जाने चाहिए! हालांकि, यह 1 से 6 तक का कोई भी नंबर हो सकता है, इसलिए वैल्यू 6 भी कभी-कभी दिख सकती है.

या हू!

आपके ऐप्लिकेशन के काम करने के लिए, अलग-अलग हिस्सों को ठीक करने के बाद कोड में गड़बड़ी होना आम बात है. हालांकि, कोड हटाने से पहले आपको कुछ आसान टास्क करने चाहिए. इससे ऐप्लिकेशन अच्छी स्थिति में रहेगा और आगे भी उसे आसानी से जारी रखा जा सकेगा.

अपना कोड लिखते समय, Android डेवलपर इन तरीकों का इस्तेमाल करते हैं.

Android स्टाइल गाइड

जब आप टीम के साथ काम करते हैं, तो यह टीम के सदस्यों के लिए इसी तरह का कोड लिखने का सबसे अच्छा तरीका है. इसलिए, कोड में एक जैसा और #39; इसलिए, Android की स्टाइल गाइड का इस्तेमाल, Android कोड लिखने का तरीका जानने के लिए किया जाता है. इसमें नाम रखने के तरीके, फ़ॉर्मैटिंग, और अन्य अच्छी बातों के बारे में बताया गया है. Android कोड लिखते समय इन दिशा-निर्देशों का पालन करें: Android डेवलपर के लिए Kotlin स्टाइल गाइड.

स्टाइल गाइड का पालन करने के कुछ तरीके नीचे दिए गए हैं.

अपने कोड में जगह खाली करें

अपना कोड छोटा करें

आप कोड को छोटी लाइनों में शामिल करके, अपने कोड को और छोटा बना सकते हैं. उदाहरण के लिए, यहां वह कोड दिया गया है जो Button पर क्लिक लिसनर सेट करता है.

rollButton.setOnClickListener {
    rollDice()
}

क्लिक लिसनर के लिए निर्देश सिर्फ़ 1 लाइन लंबे होते हैं, इसलिए आप rollDice() तरीके का कॉल और कर्ली ब्रैकेट एक लाइन में शामिल कर सकते हैं. यह कुछ ऐसा दिखेगा. तीन लाइन के बजाय एक लाइन!

rollButton.setOnClickListener { rollDice() }

कोड को फिर से फ़ॉर्मैट करें

अब आप अपने कोड को फिर से फ़ॉर्मैट कर सकते हैं, ताकि यह पक्का किया जा सके कि वह Android के लिए सुझाए गए कोड फ़ॉर्मैटिंग के नियमों का पालन करता है.

1. MainActivity.kt क्लास में, Windows पर कीबोर्ड शॉर्टकट Control+A (या Mac पर Command+A) के साथ फ़ाइल में सभी टेक्स्ट चुनें. इसके अलावा, आप Android Studio के 'बदलाव करें; और सभी' मेन्यू में जाकर भी बदलाव करें चुनें.
2. फ़ाइल में चुने गए सभी टेक्स्ट के साथ, Android Studio मेन्यू Code > Reformat Code पर जाएं या कीबोर्ड शॉर्टकट Ctrl+Alt+L (या Mac पर Command+Option+L) का इस्तेमाल करें.

यह आपके कोड की फ़ॉर्मैटिंग को अपडेट करता है, जिसमें खाली सफ़ेद जगह, इंडेंट वगैरह शामिल हैं. हो सकता है कि आपको कोई बदलाव न दिखे और यह #39; अच्छी बात है. आपका कोड पहले ही सही तरीके से फ़ॉर्मैट किया गया था!

अपने कोड पर टिप्पणी करें

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

हर क्लास के लिए टिप्पणी जोड़ना (आपके ऐप्लिकेशन में सिर्फ़ MainActivity और Dice क्लास हैं) और आप जो भी तरीका लिखते हैं, दोनों शामिल होते हैं. अपनी टिप्पणी की शुरुआत और आखिर में /** और **/ सिंबल का इस्तेमाल करके, सिस्टम को बताएं कि यह कोड नहीं है. जब सिस्टम आपका कोड लागू करेगा, तो इन लाइनों को अनदेखा कर दिया जाएगा.

कक्षा पर की गई टिप्पणी का उदाहरण:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

किसी तरीके पर की गई टिप्पणी का उदाहरण:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

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

किसी तरीके में शामिल दो टिप्पणियों का उदाहरण:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

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

समाधान कोड को उस तरीके से देखें जिससे आप अपने कोड पर टिप्पणी कर पाते थे.

इस कोडलैब के लिए सॉल्यूशन कोड, नीचे दिए गए प्रोजेक्ट और मॉड्यूल में मौजूद है.

समाधान कोड का यूआरएल: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

GitHub से इस कोडलैब का कोड पाने और इसे Android Studio में खोलने के लिए, ये काम करें.

1. Android Studio शुरू करें.
2. Android Studio में आपका स्वागत है विंडो पर, वर्शन कंट्रोल से प्रोजेक्ट देखें पर क्लिक करें.
3. उपहार चुनें.

4. Clone Repository डायलॉग में, दिए गए कोड यूआरएल को URL बॉक्स में चिपकाएं.
5. जांचें बटन पर क्लिक करें और इंतज़ार करें. इसके बाद, पक्का करें कि स्क्रीन पर एक हरा पॉप-अप बबल दिख रहा है, जिसमें लिखा है कि कनेक्शन जोड़ लिया गया है.
6. इसके अलावा, आप डायरेक्ट्री को सुझाए गए डिफ़ॉल्ट से अलग कुछ भी बदल सकते हैं.

7. क्लॉन पर क्लिक करें. Android Studio आपका कोड फ़ेच करना शुरू कर देता है.
8. वर्शन कंट्रोल से चेकआउट पॉप-अप में, हां पर क्लिक करें.

9. Android Studio के खुलने का इंतज़ार करें.
10. अपने कोडलैब स्टार्टर या सॉल्यूशन कोड के लिए सही मॉड्यूल चुनें.

11. अपना कोड बनाने और चलाने के लिए, चलाएं बटन पर क्लिक करें.

सहायता: अगर आपका डाउनलोड किया गया कोड ठीक से लोड नहीं होता है या चल नहीं रहा है, तो सहायता और समस्या को हल करने की गाइड देखें.

• लेआउट एडिटर का इस्तेमाल करके Android ऐप्लिकेशन में Button जोड़ें.
• ऐप्लिकेशन में इंटरैक्टिव व्यवहार जोड़ने के लिए, MainActivity.kt क्लास में बदलाव करें.
• Toast मैसेज की पुष्टि कुछ समय के लिए करें. इससे यह पुष्टि की जाती है कि आप सही ट्रैक पर हैं.
• Button के क्लिक किए जाने पर व्यवहार जोड़ने के लिए setOnClickListener() का इस्तेमाल करके Button के लिए क्लिक पर पहचानकर्ता सेट करें.
• जब ऐप्लिकेशन चल रहा हो, तो आप लेआउट में TextView, Button या यूज़र इंटरफ़ेस (यूआई) एलिमेंट के ज़रिए कॉल करने के तरीकों को कॉल करके स्क्रीन अपडेट कर सकते हैं.
• आपका कोड पढ़ने वाले अन्य लोगों को यह समझने में मदद करने के लिए अपने कोड पर टिप्पणी करें कि आप क्या करना चाहते हैं.
• अपना कोड फिर से फ़ॉर्मैट करें और कोड हटाएं.

• Button क्लास
• Toast क्लास
• TextView क्लास
• Android डेवलपर के लिए Kotlin स्टाइल गाइड

ध्यान दें: प्रैक्टिस वैकल्पिक हैं. इनसे आपको उस कोड का अभ्यास करने में मदद मिलती है जो आपने इस कोडलैब में सीखा है.

ये करें:

1. ऐप्लिकेशन में दूसरा पासा जोड़ें. भूमिका बटन पर क्लिक करने से दो पासे घूमने चाहिए. नतीजे, स्क्रीन पर दो अलग-अलग TextViews पर दिखने चाहिए.

अपने काम की जांच करें:

आपका पूरा हो चुका ऐप्लिकेशन बिना किसी गड़बड़ी के चलना चाहिए और ऐप्लिकेशन में दो पासे दिखने चाहिए.