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