इस पेज पर, कार्ड के कॉम्पोनेंट और स्ट्रक्चर को बनाने का तरीका बताया गया है. कार्ड, ऐसे यूज़र इंटरफ़ेस होते हैं जिनका इस्तेमाल करके 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 लागू किया गया है, ताकि यह तय किया जा सके कि टेक्स्ट हर कॉलम में कितनी जगह लेगा:
- टेक्स्ट के पहले पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया जाता है, ताकि कार्ड की चौड़ाई का 30% से ज़्यादा हिस्सा न भरा जाए. - टेक्स्ट के दूसरे पैराग्राफ़ में
FILL_AVAILABLE_SPACEका इस्तेमाल किया गया है, ताकि कार्ड की चौड़ाई में उपलब्ध जगह को भरा जा सके. इस उदाहरण में, यह कार्ड की चौड़ाई का 70% हिस्सा भरता है. - तीसरे टेक्स्ट पैराग्राफ़ में
horizontalSizeStyleको तय नहीं किया गया है. इसलिए, यह कार्ड में उपलब्ध जगह को भरने के लिए डिफ़ॉल्ट रूप से सेट हो जाता है. - चौथे टेक्स्ट पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया गया है, ताकि कार्ड की चौड़ाई का 30% से ज़्यादा हिस्सा न भरा जाए.
कॉलम के हॉरिज़ॉन्टल अलाइनमेंट की जानकारी देना
विजेट को किसी कॉलम में हॉरिज़ॉन्टल तौर पर बाईं ओर, दाईं ओर या बीच में अलाइन किया जा सकता है. इसके लिए, horizontalAlignment फ़ील्ड तय करें.
अगर horizontalAlignment फ़ील्ड के बारे में जानकारी नहीं दी गई है, तो विजेट को कॉलम में बाईं ओर अलाइन किया जाता है.
नीचे दिए गए उदाहरण में, कॉलम में मौजूद टेक्स्ट को हॉरिज़ॉन्टल तौर पर बाईं ओर अलाइन किया गया है:
नीचे दिए गए उदाहरण में, टेक्स्ट को कॉलम के बीच में हॉरिज़ॉन्टल तौर पर अलाइन किया गया है:
नीचे दिए गए उदाहरण में, कॉलम में मौजूद टेक्स्ट को हॉरिज़ॉन्टल तौर पर दाईं ओर अलाइन किया गया है:
कॉलम का वर्टिकल अलाइनमेंट तय करना
verticalAlignment फ़ील्ड तय करके, विजेट को कॉलम के सबसे ऊपर, सबसे नीचे या बीच में वर्टिकल तौर पर अलाइन किया जा सकता है.
अगर verticalAlignment फ़ील्ड तय नहीं है, तो कॉलम में मौजूद विजेट सबसे ऊपर अलाइन किए जाते हैं.
नीचे दिए गए उदाहरण में, कॉलम में मौजूद टेक्स्ट को वर्टिकल तौर पर सबसे ऊपर अलाइन किया गया है:
इस उदाहरण में, कॉलम में मौजूद टेक्स्ट को वर्टिकल तौर पर बीच में अलाइन किया गया है:
इस उदाहरण में, टेक्स्ट को कॉलम में सबसे नीचे वर्टिकल तौर पर अलाइन किया गया है:
आइटम का कलेक्शन दिखाने के लिए ग्रिड जोड़ना
grid विजेट,
आइटम के कलेक्शन वाली ग्रिड दिखाता है. ग्रिड में कितने भी कॉलम और आइटम हो सकते हैं. पंक्तियों की संख्या, आइटम की संख्या को कॉलम की संख्या से भाग देकर तय की जाती है.
10 आइटम और दो कॉलम वाले ग्रिड में पांच लाइनें होती हैं. 11 आइटम और दो कॉलम वाले ग्रिड में छह लाइनें होती हैं.
विजेट में सुझावों की सुविधा काम करती है. इससे उपयोगकर्ताओं को एक जैसा डेटा डालने में मदद मिलती है. साथ ही, इसमें बदलाव होने पर कार्रवाई करने की सुविधा भी काम करती है. ये ऐसी Actions होती हैं जो टेक्स्ट इनपुट फ़ील्ड में कोई बदलाव होने पर ट्रिगर होती हैं. जैसे, उपयोगकर्ता का टेक्स्ट जोड़ना या मिटाना.
यहां दिए गए उदाहरण में, दो कॉलम वाले ग्रिड में एक आइटम है:
ग्रिड में इमेज के साथ टेक्स्ट कहां दिखेगा, यह तय करने के लिए gridItemLayout फ़ील्ड का इस्तेमाल किया जा सकता है.
इस फ़ील्ड से यह तय किया जा सकता है कि टेक्स्ट, ग्रिड में मौजूद आइटम के ऊपर दिखेगा या नीचे. अगर gridItemLayout के लिए कोई वैल्यू तय नहीं की गई है, तो टेक्स्ट डिफ़ॉल्ट रूप से ग्रिड में आइटम के नीचे दिखता है.
यहां दिए गए उदाहरण में, तीन कॉलम वाला ग्रिड है. इसमें हर ग्रिड में टेक्स्ट और एक इमेज है. पहली ग्रिड में, इमेज के ऊपर दिखने वाला टेक्स्ट तय किया जाता है. दूसरी ग्रिड में, इमेज के नीचे दिखने वाला टेक्स्ट तय किया जाता है. तीसरी ग्रिड में, टेक्स्ट की पोज़िशन तय नहीं की जाती.
किसी ग्रिड या कॉलम में बॉर्डर जोड़ना
column या grid विजेट में दिखने वाले आइटम के लिए, इन यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बॉर्डर जोड़ा जा सकता है. इसके लिए, borderType फ़ील्ड और borderStyle फ़ील्ड तय करें.
अगर कोई borderStyle फ़ील्ड तय नहीं किया गया है, तो डिफ़ॉल्ट रूप से कोई बॉर्डर नहीं दिखता. विजेट में मौजूद सभी आइटम पर लागू करने के लिए, borderType तय किया जा सकता है. इसके अलावा, विजेट में मौजूद हर आइटम पर स्टाइल लागू की जा सकती है.
यहां दिए गए उदाहरण में, दो कॉलम वाला ग्रिड है. इसमें हर ग्रिड में एक इमेज है. इसमें बॉर्डर टाइप, स्टाइल, और रंग को ग्रिड में मौजूद सभी आइटम पर लागू करने के लिए तय किया गया है.
यहां दिए गए उदाहरण में, तीन कॉलम वाली ग्रिड है. इसमें हर ग्रिड में एक इमेज है. साथ ही, बॉर्डर की स्टाइल और टाइप को अलग-अलग तय किया गया है. पहली इमेज का बॉर्डर STROKE के तौर पर तय किया गया है. दूसरी इमेज में, बॉर्डर को NO_BORDER के तौर पर दिखाया गया है. तीसरी इमेज में कोई बॉर्डर नहीं है.
कैरसेल जोड़ना
Carousel विजेट, CarouselCard ऑब्जेक्ट का कलेक्शन दिखाता है. इन्हें स्क्रीन पर स्क्रोल करके देखा जा सकता है. हर CarouselCard में एक से ज़्यादा विजेट जोड़े जा सकते हैं.
एक स्थायी फ़ुटर जोड़ना
CardFixedFooter विजेट, चैट ऐप्लिकेशन से भेजे गए डायलॉग मैसेज के फ़ुटर को दिखाता है. फ़ुटर में प्राइमरी बटन और सेकंडरी बटन शामिल हो सकते हैं.
CardFixedFooter विजेट सिर्फ़ डायलॉग के लिए उपलब्ध है.
यहां दो बटन वाले CardFixedFooter विजेट का उदाहरण दिया गया है:
समस्या हल करें
जब Google Chat ऐप्लिकेशन या कार्ड कोई गड़बड़ी दिखाता है, तो Chat इंटरफ़ेस पर "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat के यूज़र इंटरफ़ेस (यूआई) पर गड़बड़ी का कोई मैसेज नहीं दिखता, लेकिन Chat ऐप्लिकेशन या कार्ड से अनचाहा नतीजा मिलता है. उदाहरण के लिए, हो सकता है कि कार्ड वाला मैसेज न दिखे.
ऐसा हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का कोई मैसेज न दिखे. हालांकि, गड़बड़ी के बारे में ज़्यादा जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होता है. इससे आपको गड़बड़ियां ठीक करने में मदद मिलती है. इसके लिए, Chat ऐप्लिकेशन के लिए गड़बड़ी को लॉग करने की सुविधा चालू होनी चाहिए. गड़बड़ियों को देखने, उन्हें डीबग करने, और ठीक करने में मदद पाने के लिए, Google Chat से जुड़ी गड़बड़ियों को ठीक करना लेख पढ़ें.