Google Wallet में मौजूद पास को पसंद के मुताबिक बनाना

Google Wallet में, पास के दिखने के तरीके और लेआउट को पसंद के मुताबिक बनाने के लिए बेहतरीन टूल उपलब्ध हैं. इनमें इवेंट के टिकट, बोर्डिंग पास, लॉयल्टी कार्ड, और उपहार कार्ड शामिल हैं. इस गाइड में, कार्ड का स्ट्रक्चर तय करके और उपयोगकर्ता के हिसाब से डाइनैमिक जानकारी दिखाकर, उपयोगकर्ता अनुभव को बेहतर बनाने के बारे में पूरी जानकारी दी गई है.

शुरू करने से पहले, अपने पास टाइप के लिए REST API का रेफ़रंस दस्तावेज़ ज़रूर देखें. इससे आपको उपलब्ध फ़ील्ड की पूरी सूची दिखेगी.

फ़ाउंडेशन: cardTemplateOverride

पास के लेआउट को पसंद के मुताबिक बनाने के लिए, मुख्य टूल classTemplateInfo.cardTemplateOverride ऑब्जेक्ट होता है. इसे पास के Class रिसॉर्स (जैसे, EventTicketClass, LoyaltyClass) में तय किया जाता है. इस ऑब्जेक्ट की मदद से, पास को स्ट्रक्चर किया जा सकता है. इसके लिए, आपको पंक्तियों और उनमें मौजूद आइटम तय करने होते हैं. इससे आपको यह कंट्रोल मिलता है कि जानकारी कैसे दिखाई जाए.

Class रिसॉर्स (सभी उपयोगकर्ताओं के साथ शेयर की गई जानकारी के लिए) और Object रिसॉर्स (उपयोगकर्ता के हिसाब से जानकारी के लिए), दोनों से डेटा का रेफ़रंस दिया जा सकता है.

1. Wallet के पहले से तय किए गए फ़ील्ड का इस्तेमाल करके, पास को पसंद के मुताबिक बनाना

पहले से तय किए गए फ़ील्ड, Google Wallet API में उपलब्ध स्टैंडर्ड प्रॉपर्टी होती हैं. ये प्रॉपर्टी, किसी पास टाइप के लिए उपलब्ध होती हैं. इन फ़ील्ड के नाम तय होते हैं. साथ ही, Wallet इन्हें एक ही तरीके से रेंडर करता है. उदाहरण के लिए, बारकोड, इवेंट का नाम, फ़्लाइट नंबर या गिफ़्ट कार्ड का बैलेंस.

पहले से तय किए गए इन फ़ील्ड के fieldPath का इस्तेमाल करके, इन्हें अपने पास पर कहीं भी व्यवस्थित किया जा सकता है.

उदाहरण: बारकोड और पास के बारे में जानकारी दिखाना

पास के इस उदाहरण में, "टॉप रो" और दूसरी लाइन में तीन डेटा फ़ील्ड हैं. पहले आइटम में, उपयोगकर्ता की खास वैल्यू दिखती हैं. जैसे, Object से मिले पॉइंट या उपयोगकर्ता के लिए सीट नंबर. दूसरे आइटम में, Class से मिली जानकारी दिखती है. जैसे, इवेंट का नाम या लॉयल्टी प्रोग्राम का टियर. तीसरे आइटम में, Object से मिली उपयोगकर्ता की खास वैल्यू दिखती है. जैसे, सेकंडरी पॉइंट या सेक्शन / कोच नंबर.

पहले से तय किए गए फ़ील्ड

क्लास की परिभाषा:

...
"classTemplateInfo": {
      "cardTemplateOverride": {
        "cardRowTemplateInfos": [
          {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                    "fieldPath": "object.accountName",
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.secondaryLoyaltyPoints.label"
                    },
                    {
                      "fieldPath": "object.secondaryLoyaltyPoints.balance"
                    }
                  ]
                }
              }
            }
          },
          {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.loyaltyPoints.label"
                    },
                    {
                      "fieldPath": "object.loyaltyPoints.balance"
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "class.rewardsTierLabel"
                    },
                    {
                      "fieldPath": "class.rewardsTier"
                    }
                  ]
                }
              }
            }
          },
        ]
      }
    }
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...

ऑब्जेक्ट की परिभाषा

...
"accountName": "Camille Walsh",
"loyaltyPoints": {
    "balance": {
        "string": "1500"
    },
    "label": "Points"
},
"secondaryLoyaltyPoints" : {
    "balance": {
        "money": {
            "micros" : "35050000",
            "currencyCode": "USD",
        }
    },
    "label": "Balance"
}
...

तारीख और समय के फ़ील्ड फ़ॉर्मैट करना

dateFormat प्रॉपर्टी का इस्तेमाल करके, पास में मौजूद किसी भी तारीख या समय के फ़ील्ड के लिए, पसंद के मुताबिक फ़ॉर्मैट तय किया जा सकता है. इससे यह कंट्रोल किया जा सकता है कि पास पर तारीख कैसे दिखे. जैसे, सिर्फ़ समय दिखाना, पूरी तारीख और समय दिखाना या सिर्फ़ तारीख दिखाना. अगर dateFormat एट्रिब्यूट की वैल्यू नहीं दी जाती है, तो डिफ़ॉल्ट फ़ॉर्मैट का इस्तेमाल किया जाएगा.

"fields": [
  {
    "fieldPath": "object.validTimeInterval.start.date",
    "dateFormat": "DATE_ONLY"
  }
]

उपलब्ध फ़ॉर्मैट की पूरी सूची देखने के लिए, DateFormat दस्तावेज़ देखें.

2. डेवलपर के तय किए गए फ़ील्ड की मदद से पसंद के मुताबिक बनाना

Google Wallet में, textModulesData का इस्तेमाल करके, अपनी पसंद के मुताबिक डेटा फ़ील्ड बनाए जा सकते हैं. यह सुविधा, ऐसी खास जानकारी दिखाने के लिए सबसे सही है जो पहले से तय किए गए फ़ील्ड में फ़िट नहीं होती. जैसे, कस्टम शॉर्ट नोट, सदस्यों को मिलने वाले फ़ायदे या जगह के हिसाब से जानकारी.

Object या Class में, यूनीक id के साथ textModulesData आइटम तय करें. इसके बाद, cardTemplateOverride में उस id का रेफ़रंस दें.

स्ट्रक्चर कार्ड की लाइनें

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

  • सबसे सही तरीका: ज़्यादा जानकारी देने के लिए, पास के सबसे नीचे वाले सेक्शन का इस्तेमाल करें. इसके अलावा, Wallet की अन्य सुविधाओं का इस्तेमाल करें. जैसे, messages, linksModuleData या linkedOfferIds. इससे मुख्य पास व्यू साफ़-सुथरा दिखता है.

उदाहरण: कस्टम डेटा के साथ तीन आइटम वाली लाइन

कस्टम जानकारी दिखाने के लिए एक लाइन बनाएं. लॉयल्टी कार्ड के लिए, यह पॉइंट, टियर, और बैलेंस हो सकता है. किसी इवेंट के टिकट के लिए, यह "सेक्शन," "लाइन," और "सीट" हो सकता है.

कस्टम और पहले से तय किए गए फ़ील्ड

क्लास की परिभाषा: cardTemplateOverride में तीन यूनीक आईडी शामिल हैं: detail1, detail2, और detail3.

...
"classTemplateInfo": {
      "cardTemplateOverride": {
        "cardRowTemplateInfos": [
        {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                    "fieldPath": "object.accountName",
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.textModulesData['mem_since']",
                    }
                  ]
                }
              }
            }
          },
          {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.loyaltyPoints.label"
                    },
                    {
                      "fieldPath": "object.loyaltyPoints.balance"
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "class.rewardsTierLabel"
                    },
                    {
                      "fieldPath": "class.rewardsTier"
                    }
                  ]
                }
              }
            }
          },
          {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.secondaryLoyaltyPoints.label"
                    },
                    {
                      "fieldPath": "object.secondaryLoyaltyPoints.balance"
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.textModulesData['visits']",
                    }
                  ]
                }
              }
            }
          },
        ]
      }
    }
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",

ऑब्जेक्ट की परिभाषा: Object हर फ़ील्ड के लिए डेटा और उससे जुड़े आईडी उपलब्ध कराता है.

...
"accountName": "Camille Walsh",
"loyaltyPoints": {
    "balance": {
        "string": "1500"
    },
    "label": "Points"
},
"secondaryLoyaltyPoints" : {
    "balance": {
        "money": {
            "micros" : "28250000",
            "currencyCode": "USD",
        }
    },
    "label": "Balance"
},
"textModulesData": [
{
    "header": "Visits",
    "body": "17",
    "id": "visits"
  },
  {
    "header": "Member since",
    "body": "Mar 01, 2024",
    "id": "mem_since"
  },
]
...

अलग-अलग वर्शन के लिए क्लास बनाम ऑब्जेक्ट डेटा

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

  • क्लास-लेवल textModulesData: इसका इस्तेमाल उन मामलों में करें जहां जानकारी, उपयोगकर्ताओं के किसी ग्रुप के लिए एक जैसी हो. उदाहरण के लिए, वीआईपी टिकट खरीदने वाले सभी लोगों के लिए "वीआईपी में आपका स्वागत है" मैसेज.
  • ऑब्जेक्ट-लेवल textModulesData: इसका इस्तेमाल किसी एक उपयोगकर्ता के बारे में खास जानकारी देने के लिए करें. उदाहरण के लिए, "जेन, आपकी सीट से ठीक से नहीं दिखता".

उदाहरण: टियर के हिसाब से पास दिखाना

पास के अलग-अलग वर्शन के लिए, अलग-अलग Class संसाधन बनाए जा सकते हैं. जैसे, किसी इवेंट के लिए "सामान्य टिकट" बनाम "वीआईपी टिकट" या किसी फ़्लाइट के लिए "इकनॉमी क्लास" बनाम "बिज़नेस क्लास". हर क्लास का डिज़ाइन (हीरो इमेज, रंग) और डिफ़ॉल्ट टेक्स्ट अलग-अलग हो सकता है.

सिल्वर टियर का सदस्य सदस्यता को गोल्ड लेवल पर अपग्रेड किया गया डायमंड टियर के सदस्य
सिल्वर लेवल की सदस्यता लेने वाला सदस्य सदस्यता को गोल्ड लेवल पर अपग्रेड किया गया डायमंड टियर में शामिल कोई अन्य सदस्य

पास के सबसे नीचे वाले सेक्शन में मौजूद कॉन्टेंट

cardTemplateOverride में रेफ़र किए जाने पर, linksModuleData और imageModulesData के फ़ील्ड रेंडर नहीं होते. यह कॉन्टेंट, पास के सबसे नीचे वाले सेक्शन में अपने-आप दिखता है. इससे लोगों को ग्राहक सेवा के लिंक, प्रमोशन वाली इमेज, नियम और शर्तें, और अन्य ज़रूरी जानकारी आसानी से मिलती है.

3. कार्ड के फ़ेस के अलावा: टेंप्लेट में किए गए अन्य बदलाव

classTemplateInfo ऑब्जेक्ट में, cardTemplateOverride के अलावा और भी कई सुविधाएं मिलती हैं. Google Wallet के अन्य हिस्सों को अपनी पसंद के मुताबिक बनाया जा सकता है, ताकि आपके पास ज़्यादा बेहतर और आसानी से समझ में आने वाले तरीके से दिखें.

उपलब्ध सभी ओवरराइड के बारे में पूरी जानकारी के लिए, ClassTemplateInfo रेफ़रंस दस्तावेज़ देखें.

  • listTemplateOverride: इससे Google Wallet ऐप्लिकेशन के मुख्य लिस्ट व्यू में, लाइन के लेआउट को पसंद के मुताबिक बनाया जा सकता है. इससे, उपयोगकर्ता के पास खोलने से पहले ही सबसे ज़रूरी फ़ील्ड हाइलाइट किए जा सकते हैं.
  • detailsTemplateOverride: यह पास के सबसे नीचे वाले सेक्शन की लाइनों और लेआउट को व्यवस्थित करता है. इससे आपको अतिरिक्त जानकारी, लिंक, और टेक्स्ट के लिए ज़्यादा जगह मिलती है.
  • cardBarcodeSectionDetails: इससे पास पर मौजूद बारकोड सेक्शन को अपनी पसंद के मुताबिक बनाया जा सकता है.