इस पेज पर, कार्ड के कॉम्पोनेंट और स्ट्रक्चर बनाने का तरीका बताया गया है. कार्ड, उपयोगकर्ता इंटरफ़ेस होते हैं. Google Chat ऐप्लिकेशन इनका इस्तेमाल, Chat उपयोगकर्ताओं को जानकारी दिखाने और उनसे जानकारी इकट्ठा करने के लिए कर सकते हैं. चैट ऐप्लिकेशन, इन इंटरफ़ेस में कार्ड बना सकते हैं और उन्हें दिखा सकते हैं:
- मैसेज जिनमें एक या इससे ज़्यादा कार्ड शामिल हों.
- होम पेज, जो Chat ऐप्लिकेशन के साथ डायरेक्ट मैसेज में होम टैब से दिखने वाला कार्ड होता है.
- डायलॉग, जो ऐसे कार्ड होते हैं जो मैसेज और होम पेज से नई विंडो में खुलते हैं.
इस पेज पर, आपको कार्ड के इन कॉम्पोनेंट के बारे में जानकारी मिलेगी:
- हेडर, जिनमें आम तौर पर कार्ड या कार्ड सेक्शन का टाइटल होता है.
- सेक्शन, जो कार्ड का मुख्य हिस्सा बनाते हैं. इनमें विजेट और अन्य इंटरैक्टिव एलिमेंट शामिल होते हैं. कार्ड सेक्शन में, कार्ड में कॉलम और ग्रिड जैसे ज़्यादा स्ट्रक्चर जोड़े जा सकते हैं.
- फ़िक्स्ड फ़ुटर, जो डायलॉग बॉक्स में सबसे नीचे दिखते हैं. इनका इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) के ऐसे एलिमेंट दिखाने के लिए किया जाता है जो हमेशा दिखते हैं. जैसे, बटन.
ज़रूरी शर्तें
Google Chat ऐप्लिकेशन, जिसे इंटरैक्शन इवेंट पाने और उनका जवाब देने के लिए कॉन्फ़िगर किया गया हो. इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यहां दिए गए किसी एक क्विकस्टार्ट को पूरा करें. यह क्विकस्टार्ट, उस ऐप्लिकेशन आर्किटेक्चर पर आधारित है जिसका आपको इस्तेमाल करना है:
- Google Cloud Functions के साथ एचटीटीपी सेवा
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Card Builder का इस्तेमाल करके, Chat ऐप्लिकेशन के लिए मैसेजिंग और यूज़र इंटरफ़ेस डिज़ाइन करें और उनकी झलक देखें:
कार्ड बिल्डर खोलेंहेडर जोड़ें
CardHeader विजेट, कार्ड के हेडर को दिखाता है. हेडर में, कार्ड के लिए टाइटल, सबटाइटल, और अवतार इमेज शामिल की जा सकती है.
यहां CardHeader का उदाहरण दिया गया है:
एक या एक से ज़्यादा कार्ड सेक्शन जोड़ना
CardSection विजेट, कार्ड में टॉप-लेवल का कंटेनर होता है. कार्ड सेक्शन का इस्तेमाल, कार्ड में विजेट को ग्रुप करने के लिए किया जाता है. हर कार्ड सेक्शन में, हेडर और एक या उससे ज़्यादा विजेट शामिल किए जा सकते हैं.
यहां CardSection का एक उदाहरण दिया गया है. इसमें दो textParagraph विजेट शामिल हैं:
विजेट के बीच हॉरिज़ॉन्टल डिवाइडर जोड़ना
divider विजेट, वर्टिकल तौर पर स्टैक किए गए विजेट के बीच में, कार्ड की चौड़ाई में फैली हॉरिज़ॉन्टल लाइन दिखाता है. लाइन एक विज़ुअल डिवाइडर है. इससे लोगों को एक विजेट और दूसरे विजेट के बीच अंतर करने में मदद मिलती है. इससे कार्ड को स्कैन करना और समझना आसान हो जाता है.
यहां एक कार्ड दिया गया है. इसमें अन्य टाइप के विजेट के बीच divider विजेट शामिल है:
कॉलम जोड़ें
columns विजेट, कार्ड में ज़्यादा से ज़्यादा दो कॉलम दिखाता है. हर कॉलम में विजेट जोड़े जा सकते हैं. विजेट उसी क्रम में दिखते हैं जिस क्रम में उन्हें जोड़ा गया है.
दो से ज़्यादा कॉलम शामिल करने या पंक्तियों का इस्तेमाल करने के लिए, grid विजेट का इस्तेमाल करें.
हर कॉलम की ऊंचाई, सबसे ऊंचे कॉलम के हिसाब से तय की जाती है. उदाहरण के लिए, अगर पहला कॉलम दूसरे कॉलम से लंबा है, तो दोनों कॉलम की ऊंचाई पहले कॉलम की ऊंचाई के बराबर होगी. हर कॉलम में अलग-अलग संख्या में विजेट हो सकते हैं. इसलिए, कॉलम के बीच विजेट को अलाइन नहीं किया जा सकता. साथ ही, पंक्तियां भी तय नहीं की जा सकतीं.
इस उदाहरण में, columns विजेट वाला कार्ड दिखाया गया है. इसमें टेक्स्ट के दो कॉलम हैं. सिर्फ़ कॉलम लेआउट देखने और कोड के सैंपल को छोटा करने के लिए, छोटा करें पर क्लिक करें.
जब जगह कम होती है, तो दूसरे कॉलम का टेक्स्ट पहले कॉलम के नीचे रैप हो जाता है. जैसे, यहां दिए गए उदाहरण में दिखाया गया है.
कॉलम की चौड़ाई तय करना
कॉलम अगल-बगल दिखाए जाते हैं. horizontalSizeStyle फ़ील्ड का इस्तेमाल करके, हर कॉलम की चौड़ाई को पसंद के मुताबिक बनाया जा सकता है.
अगर उपयोगकर्ता की स्क्रीन की चौड़ाई बहुत कम है, तो दूसरा कॉलम पहले कॉलम के नीचे रैप हो जाता है:
- वेब पर, अगर स्क्रीन की चौड़ाई 480 पिक्सल से कम या इसके बराबर है, तो दूसरा कॉलम रैप हो जाता है.
- iOS डिवाइसों पर, अगर स्क्रीन की चौड़ाई 300 pt से कम या उसके बराबर है, तो दूसरा कॉलम रैप हो जाता है.
- Android डिवाइसों पर, अगर स्क्रीन की चौड़ाई 320 डीपी से कम या इसके बराबर है, तो दूसरा कॉलम रैप हो जाता है.
इस उदाहरण में, columns विजेट वाला कार्ड दिखाया गया है. इसमें टेक्स्ट के दो कॉलम हैं और हर कॉलम में चार आइटम हैं. कॉलम में मौजूद हर आइटम में horizontalSizeStyle लागू किया गया है, ताकि यह तय किया जा सके कि टेक्स्ट हर कॉलम में कितना स्पेस लेगा:
- पहले टेक्स्ट पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया गया है. इससे कार्ड की चौड़ाई का 30% से ज़्यादा हिस्सा नहीं भरा जाता. - दूसरे टेक्स्ट पैराग्राफ़ में, कार्ड की चौड़ाई में मौजूद जगह को भरने के लिए
FILL_AVAILABLE_SPACEका इस्तेमाल किया गया है. इस उदाहरण में, यह कार्ड की चौड़ाई का 70% हिस्सा भरता है. - तीसरे टेक्स्ट पैराग्राफ़ में
horizontalSizeStyleके बारे में नहीं बताया गया है. इसलिए, यह कार्ड की उपलब्ध जगह को भरने के लिए डिफ़ॉल्ट रूप से सेट है. - चौथे टेक्स्ट पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया गया है, ताकि यह कार्ड की चौड़ाई के 30% से ज़्यादा न हो.
किसी कॉलम के हॉरिज़ॉन्टल अलाइनमेंट को तय करना
horizontalAligment फ़ील्ड तय करके, विजेट को किसी कॉलम की बाईं, दाईं या बीच की ओर हॉरिज़ॉन्टल तौर पर अलाइन किया जा सकता है.
अगर horizontalAlignment फ़ील्ड तय नहीं किया गया है, तो विजेट को कॉलम में बाईं ओर अलाइन किया जाता है.
इस उदाहरण में, किसी कॉलम में मौजूद टेक्स्ट को बाईं ओर हॉरिज़ॉन्टल अलाइन किया गया है:
इस उदाहरण में, किसी कॉलम में टेक्स्ट को बीच में हॉरिज़ॉन्टल तरीके से अलाइन किया गया है:
इस उदाहरण में, किसी कॉलम में मौजूद टेक्स्ट को दाईं ओर हॉरिज़ॉन्टल अलाइन किया गया है:
कॉलम के वर्टिकल अलाइनमेंट को तय करना
verticalAlignment फ़ील्ड तय करके, विजेट को किसी कॉलम के सबसे ऊपर, सबसे नीचे या बीच में वर्टिकल तौर पर अलाइन किया जा सकता है.
अगर verticalAlignment फ़ील्ड तय नहीं किया गया है, तो कॉलम में मौजूद विजेट सबसे ऊपर अलाइन किए जाते हैं.
इस उदाहरण में, किसी कॉलम में मौजूद टेक्स्ट को सबसे ऊपर अलाइन किया गया है:
इस उदाहरण में, किसी कॉलम में मौजूद टेक्स्ट को वर्टिकल तौर पर बीच में अलाइन किया गया है:
इस उदाहरण में, कॉलम में मौजूद टेक्स्ट को नीचे की ओर अलाइन किया गया है:
आइटम के कलेक्शन को दिखाने के लिए, ग्रिड जोड़ना
grid विजेट में, आइटम के कलेक्शन वाली ग्रिड दिखती है. ग्रिड में कितनी भी कॉलम और आइटम हो सकते हैं. पंक्तियों की संख्या, सामान की संख्या को कॉलम की संख्या से भाग देने पर मिलती है.
10 आइटम और 2 कॉलम वाले ग्रिड में 5 लाइनें होती हैं. 11 आइटम और दो कॉलम वाली ग्रिड में छह लाइनें होती हैं.
इस विजेट में सुझाव देने की सुविधा काम करती है. इससे उपयोगकर्ताओं को एक जैसा डेटा डालने में मदद मिलती है. साथ ही, इसमें बदलाव होने पर कार्रवाई करने की सुविधा भी काम करती है. Actions
यह सुविधा तब काम करती है, जब टेक्स्ट इनपुट फ़ील्ड में कोई बदलाव होता है. जैसे, जब कोई उपयोगकर्ता टेक्स्ट जोड़ता या मिटाता है.
यहां एक आइटम वाली दो कॉलम की ग्रिड का उदाहरण दिया गया है:
ग्रिड में किसी इमेज के साथ टेक्स्ट कहां दिखे, यह तय करने के लिए gridItemLayout फ़ील्ड का इस्तेमाल किया जा सकता है.
इस फ़ील्ड की मदद से, यह तय किया जा सकता है कि टेक्स्ट, ग्रिड में मौजूद आइटम के ऊपर दिखेगा या नीचे. अगर gridItemLayout तय नहीं किया गया है, तो टेक्स्ट डिफ़ॉल्ट रूप से ग्रिड में मौजूद आइटम के नीचे दिखेगा.
यहां तीन कॉलम वाली ग्रिड का उदाहरण दिया गया है. इसमें हर ग्रिड में टेक्स्ट और एक इमेज है. पहली ग्रिड में, इमेज के ऊपर दिखने वाला टेक्स्ट तय किया गया है. दूसरी ग्रिड में, इमेज के नीचे दिखने वाला टेक्स्ट तय किया गया है. वहीं, तीसरी ग्रिड में टेक्स्ट की पोज़िशन तय नहीं की गई है.
किसी ग्रिड या कॉलम में बॉर्डर जोड़ना
column या grid विजेट में दिखने वाले आइटम के लिए, इन यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बॉर्डर जोड़ा जा सकता है. इसके लिए, borderType फ़ील्ड और borderStyle फ़ील्ड तय करें.
अगर कोई borderStyle फ़ील्ड तय नहीं किया गया है, तो डिफ़ॉल्ट रूप से कोई बॉर्डर नहीं दिखेगा. आपके पास किसी विजेट में मौजूद सभी आइटम पर लागू करने के लिए, borderType तय करने का विकल्प होता है. इसके अलावा, विजेट में मौजूद हर आइटम पर स्टाइलिंग लागू की जा सकती है.
यहां दो कॉलम वाली ग्रिड का उदाहरण दिया गया है. हर ग्रिड में एक इमेज है. इसमें बॉर्डर का टाइप, स्टाइल, और रंग तय किया गया है, ताकि इसे ग्रिड में मौजूद सभी आइटम पर लागू किया जा सके.
यहां दिया गया उदाहरण, तीन कॉलम वाली ग्रिड का है. इसमें हर ग्रिड में एक इमेज है. साथ ही, बॉर्डर की स्टाइल और टाइप को अलग-अलग तरीके से तय किया गया है. पहली इमेज का बॉर्डर STROKE के तौर पर तय किया गया है. दूसरी इमेज में, बॉर्डर को NO_BORDER के तौर पर तय किया गया है. तीसरी इमेज में कोई बॉर्डर तय नहीं किया गया है.
कैरोसेल जोड़ना
इस प्रोग्राम में शामिल होने पर, आपको कुछ सुविधाओं का ऐक्सेस पहले ही मिल जाता है.Carousel विजेट, CarouselCard ऑब्जेक्ट का कलेक्शन दिखाता है. इसे स्क्रीन पर स्क्रोल किया जा सकता है. हर CarouselCard में एक से ज़्यादा विजेट जोड़े जा सकते हैं.
हमेशा दिखने वाला फ़ुटर जोड़ना
CardFixedFooter
विजेट, Chat ऐप्लिकेशन से भेजे गए डायलॉग मैसेज के फ़ुटर को दिखाता है.
फ़ुटर में मुख्य बटन और दूसरा बटन शामिल हो सकता है.
CardFixedFooter विजेट सिर्फ़ डायलॉग के लिए उपलब्ध है.
यहां दो बटन वाले CardFixedFooter विजेट का उदाहरण दिया गया है:
समस्या हल करें
जब Google Chat ऐप्लिकेशन या कार्ड में कोई गड़बड़ी होती है, तो Chat इंटरफ़ेस पर एक मैसेज दिखता है. इसमें लिखा होता है कि "कोई गड़बड़ी हुई." या "आपका अनुरोध पूरा नहीं किया जा सका." कभी-कभी Chat के यूज़र इंटरफ़ेस (यूआई) में कोई गड़बड़ी का मैसेज नहीं दिखता है, लेकिन Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है. उदाहरण के लिए, ऐसा हो सकता है कि कार्ड मैसेज न दिखे.
ऐसा हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, Chat ऐप्लिकेशन के लिए गड़बड़ी के लॉगिंग की सुविधा चालू होने पर, गड़बड़ी के बारे में बताने वाले मैसेज और लॉग डेटा उपलब्ध होता है. इससे आपको गड़बड़ियों को ठीक करने में मदद मिलती है. गड़बड़ियों को देखने, डीबग करने, और ठीक करने के बारे में मदद पाने के लिए, Google Chat से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.