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": [
          {
            "threeItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.loyaltyPoints.label",
                     "fieldPath": "object.loyaltyPoints.balance",
                    }
                  ]
                }
              },
              "middleItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "class.rewardsTierLabel",
                      "fieldPath": "class.rewardsTier",
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.secondaryLoyaltyPoints.label",
                     "fieldPath": "object.secondaryLoyaltyPoints.balance",
                    }
                  ]
                }
              }
            }
          },
        ]
      }
    }
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",
...

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

...
"loyaltyPoints": {
    "balance": {
        "string": "1500"
    },
    "label": "Points"
},
"secondaryLoyaltyPoints" : {
    "balance": {
        "money": {
            "micros" : "28250000",
            "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": [
        {
            "oneItem": {
              "item": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.accountName",
                    }
                  ]
                }
              }
            }
          },
          {
            "threeItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.loyaltyPoints.label",
                     "fieldPath": "object.loyaltyPoints.balance",
                    }
                  ]
                }
              },
              "middleItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "class.rewardsTierLabel",
                      "fieldPath": "class.rewardsTier",
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.secondaryLoyaltyPoints.label",
                     "fieldPath": "object.secondaryLoyaltyPoints.balance",
                    }
                  ]
                }
              }
            }
          },
          {
            "threeItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.textModulesData['row1left']",
                    }
                  ]
                }
              },
              "middleItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.textModulesData['row1mid']"
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                      "fieldPath": "object.textModulesData['row1right']"
                    }
                  ]
                }
              }
            }
          },
          {
            "twoItems": {
              "startItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.textModulesData['mem_since']",
                    }
                  ]
                }
              },
              "endItem": {
                "firstValue": {
                  "fields": [
                    {
                     "fieldPath": "object.textModulesData['park']",
                    }
                  ]
                }
              }
            }
          },
        ]
      }
    }
...
"rewardsTier": "Gold",
"rewardsTierLabel": "Tier",

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

...
"accountName": "Lorenaisabel Aliwarringlen",
"loyaltyPoints": {
    "balance": {
        "string": "1500"
    },
    "label": "Points"
},
"secondaryLoyaltyPoints" : {
    "balance": {
        "money": {
            "micros" : "28250000",
            "currencyCode": "USD",
        }
    },
    "label": "Balance"
},
"textModulesData": [
{
    "header": "Visits",
    "body": "17",
    "id": "row1left"
  },
  {
    "header": "Rides",
    "body": "259",
    "id": "row1mid"
  },
  {
    "header": "Park hours",
    "body": "140",
    "id": "row1right"
  },
  {
    "header": "Member since",
    "body": "Mar 01, 2017",
    "id": "mem_since"
  },
  {
    "header": "Parking",
    "body": "Included (Free)",
    "id": "park"
  }
]
...

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

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

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

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

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

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

पास की जानकारी वाले व्यू में मौजूद कॉन्टेंट

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

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

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

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

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