1. परिचय
पिछले अपडेट की तारीख: 30-10-2020
Business Messages पर शॉपिंग कार्ट बनाने की सुविधा!
यह कोडलैब, 'ऑनलाइन खरीदें और स्टोर से पिकअप करें' सुविधा के लिए उपयोगकर्ता का सफ़र तय करने के मकसद से बनाई गई सीरीज़ का दूसरा कोडलैब है. ई-कॉमर्स की कई यात्राओं में, शॉपिंग कार्ट की मदद से उपयोगकर्ताओं को पैसे चुकाने वाले ग्राहकों में बदला जा सकता है. शॉपिंग कार्ट से, अपने खरीदारों को बेहतर तरीके से समझा जा सकता है. साथ ही, उन्हें ऐसे अन्य आइटम के सुझाव दिए जा सकते हैं जिनमें उनकी दिलचस्पी हो सकती है. इस कोडलैब में, हम शॉपिंग कार्ट का अनुभव बनाने और ऐप्लिकेशन को Google App Engine पर डिप्लॉय करने पर फ़ोकस करेंगे.
शॉपिंग कार्ट को बेहतर बनाने के लिए क्या किया जा सकता है?
ऑनलाइन खरीदारी का बेहतरीन अनुभव देने के लिए, शॉपिंग कार्ट बहुत ज़रूरी होते हैं. Business Messages, किसी संभावित खरीदार के साथ किसी प्रॉडक्ट के बारे में सवाल-जवाब करने में ही मदद नहीं करता, बल्कि बातचीत के दौरान पेमेंट पूरा करने तक, खरीदारी के पूरे अनुभव को बेहतर बनाता है.
बेहतरीन शॉपिंग कार्ट के अलावा, खरीदारी का अच्छा अनुभव मिलने पर लोग कैटगरी के हिसाब से आइटम ब्राउज़ कर पाते हैं. साथ ही, कारोबार खरीदार को ऐसे अन्य प्रॉडक्ट के सुझाव दे पाता है जिनमें उसकी दिलचस्पी हो सकती है. शॉपिंग कार्ट में और सामान जोड़ने के बाद, उपयोगकर्ता अपने पूरे कार्ट की समीक्षा कर सकता है. साथ ही, चेकआउट करने से पहले सामान हटा सकता है या और सामान जोड़ सकता है.
आपको क्या बनाने को मिलेगा
कोड लैब की इस सीरीज़ के इस सेक्शन में, आपको काल्पनिक कंपनी Bonjour Meal के लिए पहले पार्ट में बनाए गए डिजिटल एजेंट को बेहतर बनाना है. इससे लोग, सामान की कैटलॉग ब्राउज़ कर पाएंगे और शॉपिंग कार्ट में सामान जोड़ पाएंगे.
इस कोडलैब में, आपका ऐप्लिकेशन
- Business Messages में सवालों का कैटलॉग दिखाना
- ऐसे आइटम के सुझाव दें जिनमें लोगों की दिलचस्पी हो सकती है
- शॉपिंग कार्ट में मौजूद आइटम की समीक्षा करना और कुल कीमत की खास जानकारी बनाना
आपको क्या सीखने को मिलेगा
- Google Cloud Platform पर App Engine पर वेब ऐप्लिकेशन डिप्लॉय करने का तरीका
- शॉपिंग कार्ट की स्थिति को सेव करने के लिए, परसिस्टेंट स्टोरेज मेकेनिज़्म का इस्तेमाल कैसे करें
इस कोडलैब में, इस कोडलैब सीरीज़ के पहले हिस्से में बताए गए डिजिटल एजेंट को बेहतर बनाने पर फ़ोकस किया गया है.
आपको इन चीज़ों की ज़रूरत होगी
- ऐसा GCP प्रोजेक्ट जिसे Business Messages के साथ इस्तेमाल करने के लिए रजिस्टर किया गया हो और जिसकी पुष्टि हो चुकी हो
- इसे लागू करने के निर्देशों के लिए, हमारी डेवलपर साइट देखें
- आपके GCP प्रोजेक्ट के लिए जनरेट की गई सेवा खाते के JSON क्रेडेंशियल फ़ाइल
- Android 5 या उसके बाद के वर्शन वाला डिवाइस या iOS डिवाइस पर Google Maps ऐप्लिकेशन
- वेब ऐप्लिकेशन प्रोग्रामिंग का अनुभव
- इंटरनेट कनेक्शन!
2. सेट अप करना
इस कोडलैब में यह माना गया है कि आपने अपना पहला एजेंट बना लिया है और कोडलैब का पहला हिस्सा पूरा कर लिया है. इसलिए, हम Business Messages और Business Communications API चालू करने, सेवा खाते की कुंजियां बनाने, ऐप्लिकेशन डिप्लॉय करने या Business Communications Console पर वेबहुक सेट अप करने के बारे में बुनियादी जानकारी नहीं देंगे. हम एक सैंपल ऐप्लिकेशन को क्लोन करेंगे, ताकि यह पक्का किया जा सके कि आपका ऐप्लिकेशन, हमारे बनाए जा रहे ऐप्लिकेशन के साथ काम कर रहा है. साथ ही, हम Google Cloud Platform पर Datastore के लिए एपीआई चालू करेंगे, ताकि शॉपिंग कार्ट से जुड़ा डेटा सेव किया जा सके.
GitHub से ऐप्लिकेशन को क्लोन करना
टर्मिनल में, Django Echo Bot Sample को अपने प्रोजेक्ट की वर्किंग डायरेक्ट्री में क्लोन करें. इसके लिए, यह निर्देश इस्तेमाल करें:
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
सेवा खाते के लिए बनाई गई JSON क्रेडेंशियल फ़ाइल को, सैंपल के resources फ़ोल्डर में कॉपी करें. इसके बाद, क्रेडेंशियल का नाम बदलकर "bm-agent-service-account-credentials.json" करें.
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-2/resources/bm-agent-service-account-credentials.json
Google Datastore API चालू करें
इस कोडलैब के पहले हिस्से में, आपने Business Messages API, Business Communications API, और Cloud Build API चालू किया था.
इस कोडलैब के लिए, हमें Google Datastore के साथ काम करना होगा. इसलिए, हमें इस एपीआई को भी चालू करना होगा:
- Google Cloud Console में Google Datastore API खोलें.
- पक्का करें कि आप सही GCP प्रोजेक्ट का इस्तेमाल कर रहे हों.
- चालू करें पर क्लिक करें.
सैंपल ऐप्लिकेशन डिप्लॉय करना
टर्मिनल में, सैंपल के दूसरे चरण की डायरेक्ट्री पर जाएं.
सैंपल को डिप्लॉय करने के लिए, टर्मिनल में ये कमांड चलाएं:
$ gcloud config set project PROJECT_ID*
$ gcloud app deploy
- PROJECT_ID, उस प्रोजेक्ट का आईडी है जिसका इस्तेमाल आपने एपीआई के साथ रजिस्टर करने के लिए किया था.
आखिरी कमांड के आउटपुट में, डिप्लॉय किए गए ऐप्लिकेशन का यूआरएल नोट करें:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
आपने अभी जो कोड डिप्लॉय किया है उसमें एक वेब ऐप्लिकेशन है. इसमें Business Messages से मैसेज पाने के लिए, वेबहुक की सुविधा है. इसमें कोडलैब के पहले हिस्से में किए गए सभी काम शामिल हैं. अगर आपने अब तक ऐसा नहीं किया है, तो कृपया अपना वेबहुक कॉन्फ़िगर करें.
ऐप्लिकेशन, कुछ आसान सवालों के जवाब दे पाएगा. जैसे, अगर कोई उपयोगकर्ता Bonjour Meal के कारोबार के समय के बारे में पूछता है, तो ऐप्लिकेशन उसका जवाब दे पाएगा. आपको अपने मोबाइल डिवाइस पर इसकी जांच करनी चाहिए. इसके लिए, Business Communications Console में एजेंट की जानकारी से टेस्ट यूआरएल पाए जा सकते हैं. टेस्ट यूआरएल से, आपके मोबाइल डिवाइस पर Business Messages की सुविधा लॉन्च हो जाएगी. इसके बाद, अपने एजेंट के साथ बातचीत शुरू की जा सकती है.
3. प्रॉडक्ट कैटलॉग
इन्वेंट्री सिस्टम
ज़्यादातर मामलों में, इंटरनल एपीआई के ज़रिए किसी ब्रैंड की इन्वेंट्री के साथ सीधे तौर पर इंटिग्रेट किया जा सकता है. अन्य मामलों में, किसी वेब पेज को स्क्रैप किया जा सकता है या इन्वेंट्री को ट्रैक करने वाला अपना सिस्टम बनाया जा सकता है. हमारा मकसद इन्वेंट्री सिस्टम बनाना नहीं है. हम एक सामान्य स्टैटिक फ़ाइल का इस्तेमाल करेंगे. इसमें हमारे एजेंट के लिए इमेज और प्रॉडक्ट की जानकारी होगी. इस सेक्शन में, हम इस स्टैटिक फ़ाइल से जानकारी इकट्ठा करेंगे और उसे बातचीत में दिखाएंगे. साथ ही, उपयोगकर्ता को वे आइटम ब्राउज़ करने की अनुमति देंगे जिन्हें शॉपिंग कार्ट में जोड़ा जा सकता है.
स्टैटिक इन्वेंट्री फ़ाइल ऐसी दिखती है:
bonjourmeal-codelab/step-2/resources/inventory.json
{
"food": [
{
"id":0,
"name": "Ham and cheese sandwich",
"price": "6.99",
"image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/ham-and-cheese.png",
"remaining": 8
},
{
"id":1,
"name": "Chicken veggie wrap",
"price": "9.99",
"image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/chicken-veggie-wrap.png",
"remaining": 2
},
{
"id":2,
"name": "Assorted cheese plate",
"price": "7.99",
"image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/assorted-cheese-plate.png",
"remaining": 6
},
{
"id":3,
"name": "Apple walnut salad",
"price": "12.99",
"image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/apple-walnut-salad.png",
"remaining": 1
}
]
}
आइए, Python ऐप्लिकेशन को इस फ़ाइल को पढ़ने की अनुमति दें!
हमारी इन्वेंट्री से डेटा पढ़ना
इन्वेंट्री, "inventory.json" नाम की एक स्टैटिक फ़ाइल होती है. यह ./resources डायरेक्ट्री में मौजूद होती है. हमें views.py में कुछ Python लॉजिक जोड़ना होगा, ताकि JSON फ़ाइल के कॉन्टेंट को पढ़ा जा सके. इसके बाद, उसे बातचीत में दिखाया जा सके. आइए, एक ऐसा फ़ंक्शन बनाते हैं जो JSON फ़ाइल से डेटा को पढ़ता है और उपलब्ध प्रॉडक्ट की सूची दिखाता है.
इस फ़ंक्शन की डेफ़िनिशन को views.py में कहीं भी रखा जा सकता है.
bonjourmeal-codelab/step-2/bopis/views.py
...
def get_inventory_data():
f = open(INVENTORY_FILE)
inventory = json.load(f)
return inventory
...
इससे हमें इन्वेंट्री से डेटा पढ़ने के लिए ज़रूरी जानकारी मिल जाएगी. अब हमें इस प्रॉडक्ट की जानकारी को बातचीत में शामिल करने का तरीका चाहिए.
प्रॉडक्ट कैटलॉग दिखाना
इस कोडलैब में, हमने एक सामान्य प्रॉडक्ट कैटलॉग बनाया है. इससे, Business Messages बातचीत में सभी इन्वेंट्री आइटम दिखाए जा सकते हैं. इसके लिए, एक रिच कार्ड कैरसेल का इस्तेमाल किया जाता है.
प्रॉडक्ट कैटलॉग दिखाने के लिए, हम सुझाया गया जवाब बनाएंगे. इसमें "मेन्यू दिखाएं" टेक्स्ट और postbackData "show-product-catalog" होगा. जब उपयोगकर्ता, सुझाए गए जवाब पर टैप करेंगे और आपके वेब ऐप्लिकेशन को postback डेटा मिलेगा, तब हम रिच कार्ड कैरसेल भेजेंगे. आइए, views.py फ़ाइल में सबसे ऊपर, इस सुझाए गए जवाब के लिए एक नया कॉन्स्टेंट जोड़ें.
bonjourmeal-codelab/step-2/bopis/views.py
...
CMD_SHOW_PRODUCT_CATALOG = 'show-product-catalog'
...
यहां से, हम मैसेज को पार्स करते हैं और उसे एक नए फ़ंक्शन पर भेजते हैं. यह फ़ंक्शन, प्रॉडक्ट कैटलॉग वाला रिच कार्ड कैरसेल भेजता है. सबसे पहले, route_message फ़ंक्शन को बढ़ाएं, ताकि सुझाए गए जवाब पर टैप करने पर "send_product_catalog" फ़ंक्शन को कॉल किया जा सके. इसके बाद, हम फ़ंक्शन को तय करेंगे.
नीचे दिए गए स्निपेट में, route_message फ़ंक्शन में मौजूद if स्टेटमेंट में एक और शर्त जोड़ें. इससे यह पता चलेगा कि normalized_message, हमने पहले जो कॉन्स्टेंट तय किया था, CMD_SHOW_PRODUCT_CATALOG उसके बराबर है या नहीं.
bonjourmeal-codelab/step-2/bopis/views.py
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
elif normalized_message == CMD_SHOW_PRODUCT_CATALOG:
send_product_catalog(conversation_id)
else:
echo_message(message, conversation_id)
...
साथ ही, यह पक्का करें कि आपने फ़्लो पूरा कर लिया हो और send_product_catalog को तय कर लिया हो. send_product_catalog कॉल करता है. इससे इन्वेंट्री फ़ाइल से पढ़े गए रिच कार्ड का कैरसेल जनरेट होता है.get_menu_carousel,
फ़ंक्शन की परिभाषाओं को views.py में कहीं भी रखा जा सकता है. ध्यान दें कि यहां दिए गए स्निपेट में, दो नए कॉन्स्टेंट का इस्तेमाल किया गया है. इन्हें फ़ाइल में सबसे ऊपर जोड़ा जाना चाहिए.
bonjourmeal-codelab/step-2/bopis/views.py
...
CMD_ADD_ITEM = 'add-item'
CMD_SHOW_CART = 'show-cart'
...
def get_menu_carousel():
"""Creates a sample carousel rich card.
Returns:
A :obj: A BusinessMessagesCarouselCard object with three cards.
"""
inventory = get_inventory_data()
card_content = []
for item in inventory['food']:
card_content.append(BusinessMessagesCardContent(
title=item['name'],
description=item['price'],
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Add item',
postbackData='{'+f'"action":"{CMD_ADD_ITEM}","item_name":"{item["id"]}"'+'}'))
],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=item['image_url'],
forceRefresh=False))))
return BusinessMessagesCarouselCard(
cardContents=card_content,
cardWidth=BusinessMessagesCarouselCard.CardWidthValueValuesEnum.MEDIUM)
def send_product_catalog(conversation_id):
"""Sends the product catalog to the conversation_id.
Args:
conversation_id (str): The unique id for this user and agent.
"""
rich_card = BusinessMessagesRichCard(carouselCard=get_menu_carousel())
fallback_text = ''
# Construct a fallback text for devices that do not support carousels
for card_content in rich_card.carouselCard.cardContents:
fallback_text += (card_content.title + '\n\n' + card_content.description
+ '\n\n' + card_content.media.contentInfo.fileUrl
+ '\n---------------------------------------------\n\n')
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
fallback=fallback_text,
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='See my cart',
postbackData=CMD_SHOW_CART)
),
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='See the menu',
postbackData=CMD_SHOW_PRODUCT_CATALOG)
),
]
)
send_message(message_obj, conversation_id)
...
अगर कैरसेल आइटम बनाने की प्रोसेस की जांच की जाए, तो हम BusinessMessagesSuggestion क्लास का एक इंस्टेंस भी बनाते हैं. हर सुझाव, कैरसेल में मौजूद किसी प्रॉडक्ट के लिए उपयोगकर्ता के चुने गए विकल्प को दिखाता है. जब कोई उपयोगकर्ता सुझाई गई जवाब पर टैप करता है, तो Business Messages आपके वेबुक को postbackData भेजेगा. इसमें JSON होता है. इसमें आइटम और उपयोगकर्ता को करनी है (कार्ट में जोड़ना या हटाना) कार्रवाई के बारे में जानकारी होती है. यहां दिए गए सेक्शन में, हम इस तरह के मैसेज को पार्स करेंगे, ताकि आइटम को कार्ट में जोड़ा जा सके.
अब हमने ये बदलाव कर दिए हैं. इसलिए, वेब ऐप्लिकेशन को Google App Engine पर डिप्लॉय करते हैं और इसका इस्तेमाल करके देखते हैं!
$ gcloud app deploy
अपने फ़ोन या टैबलेट पर बातचीत वाली सुविधा लोड करें. इसके बाद, "show-product-catalog" मैसेज भेजें. आपको प्रॉडक्ट का ऐसा कैरसेल दिखेगा.
आइटम जोड़ें पर टैप करने से, कुछ नहीं होता. हालांकि, एजेंट सुझाए गए जवाब से पोस्टबैक डेटा को दोहराता है. अगले सेक्शन में, हम प्रॉडक्ट कैटलॉग का इस्तेमाल करेंगे. साथ ही, इसका इस्तेमाल शॉपिंग कार्ट बनाने के लिए करेंगे, जहां आइटम जोड़ा जाएगा.
आपने अभी जो प्रॉडक्ट कैटलॉग बनाया है उसे कई तरीकों से बढ़ाया जा सकता है. ऐसा हो सकता है कि आपके पास पीने के लिए अलग-अलग विकल्प हों या शाकाहारी विकल्प हों. कैरल या सुझाव वाले चिप का इस्तेमाल करके, लोगों को मेन्यू के विकल्पों के बारे में ज़्यादा जानकारी दी जा सकती है. इससे वे उन प्रॉडक्ट तक पहुंच पाते हैं जिन्हें वे ढूंढ रहे हैं. इस कोडलैब के एक्सटेंशन के तौर पर, प्रॉडक्ट कैटलॉग सिस्टम को इस तरह से बढ़ाएं कि उपयोगकर्ता मेन्यू में खाने के आइटम से अलग ड्रिंक देख सके. इसके अलावा, वह शाकाहारी विकल्प भी चुन सके.
4. शॉपिंग कार्ट
इस कोडलैब के इस सेक्शन में, हम शॉपिंग कार्ट की सुविधा तैयार करेंगे. यह सुविधा, पिछले सेक्शन में तैयार की गई सुविधा पर आधारित होगी. पिछले सेक्शन में, उपलब्ध प्रॉडक्ट ब्राउज़ करने की सुविधा तैयार की गई थी.
शॉपिंग कार्ट में कई सुविधाएं होती हैं. जैसे, कार्ट में आइटम जोड़ना, कार्ट से आइटम हटाना, कार्ट में मौजूद हर आइटम की संख्या पर नज़र रखना, और कार्ट में मौजूद आइटम की समीक्षा करना.
शॉपिंग कार्ट की स्थिति को ट्रैक करने का मतलब है कि हमें वेब ऐप्लिकेशन पर डेटा को सेव करके रखना होगा. हम डेटा को सेव करने के लिए, Google Cloud Platform में Google Datastore का इस्तेमाल करेंगे. इससे एक्सपेरिमेंट और डिप्लॉयमेंट को आसानी से किया जा सकेगा. किसी उपयोगकर्ता और कारोबार के बीच बातचीत का आईडी एक जैसा रहता है. इसलिए, हम इसका इस्तेमाल उपयोगकर्ताओं को शॉपिंग कार्ट में मौजूद आइटम से जोड़ने के लिए कर सकते हैं.
सबसे पहले, Google Datastore से कनेक्ट करते हैं और बातचीत का आईडी दिखने पर उसे सेव करते हैं.
Datastore से कनेक्ट करना
जब भी शॉपिंग कार्ट में कोई इंटरैक्शन होता है, तब हम Google Datastore से कनेक्ट करेंगे. उदाहरण के लिए, जब कोई उपयोगकर्ता कोई आइटम जोड़ता है या मिटाता है. Google Datastore के साथ इंटरैक्ट करने के लिए, इस क्लाइंट लाइब्रेरी का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, आधिकारिक दस्तावेज़ पढ़ें.
यहां दिए गए स्निपेट में, शॉपिंग कार्ट को अपडेट करने वाले फ़ंक्शन के बारे में बताया गया है. यह फ़ंक्शन, conversation_id और message को इनपुट के तौर पर इस्तेमाल करता है. message में, उपयोगकर्ता को जिस कार्रवाई को पूरा करना है उसके बारे में बताने वाला JSON शामिल होता है. यह JSON, प्रॉडक्ट कैटलॉग दिखाने वाले आपके कैरसेल में पहले से मौजूद होता है. यह फ़ंक्शन, Google Datastore क्लाइंट बनाता है और तुरंत ShoppingCart इकाई को फ़ेच करता है. इसमें कुंजी, बातचीत का आईडी होती है.
नीचे दिए गए फ़ंक्शन को अपनी views.py फ़ाइल में कॉपी करें. हम आने वाले सेक्शन में इसके बारे में ज़्यादा जानकारी देंगे.
bonjourmeal-codelab/step-2/bopis/views.py
from google.oauth2 import service_account
from google.cloud import datastore
def update_shopping_cart(conversation_id, message):
credentials = service_account.Credentials.from_service_account_file(
SERVICE_ACCOUNT_LOCATION)
client = datastore.Client(credentials=credentials)
key = client.key('ShoppingCart', conversation_id)
entity = datastore.Entity(key=key)
result = client.get(key)
# TODO: Add logic to add and remove items from cart
entity.update(result)
client.put(entity)
आइए, इस फ़ंक्शन को कार्ट में कोई आइटम जोड़ने के लिए इस्तेमाल करें.
कार्ट में सामान जोड़ना
जब कोई उपयोगकर्ता, प्रॉडक्ट कैरसेल में सुझाए गए आइटम जोड़ें ऐक्शन पर टैप करता है, तो postbackData में JSON होता है. इसमें उस ऐक्शन के बारे में जानकारी होती है जो उपयोगकर्ता को करना है. JSON डिक्शनरी में दो कुंजियां हैं: "action" और "item_name". इस JSON डिक्शनरी को आपके वेबुक पर भेजा जाता है. "item_name" फ़ील्ड, यूनीक आइडेंटिफ़ायर होता है. यह inventory.json में मौजूद आइटम से जुड़ा होता है.
जब हमें मैसेज से कार्ट कमांड और कार्ट आइटम मिल जाता है, तब हम आइटम जोड़ने के लिए शर्त वाले स्टेटमेंट लिख सकते हैं. यहां कुछ ऐसे मामलों के बारे में बताया गया है जिन पर आपको ध्यान देना चाहिए. जैसे, अगर Datastore ने कभी बातचीत का आईडी नहीं देखा है या अगर शॉपिंग कार्ट को यह आइटम पहली बार मिल रहा है. यहां ऊपर बताई गई update_shopping_cart की सुविधा के बारे में ज़्यादा जानकारी दी गई है. इस बदलाव से, शॉपिंग कार्ट में एक आइटम जुड़ जाता है. इसे Google Datastore सेव करता है.
यहां दिया गया स्निपेट, views.py में जोड़े गए पिछले फ़ंक्शन का एक्सटेंशन है. आप चाहें, तो अंतर को जोड़ें या स्निपेट को कॉपी करके, update_shopping_cart फ़ंक्शन के मौजूदा वर्शन की जगह पर चिपकाएँ.
bonjourmeal-codelab/step-2bopis/views.py
def update_shopping_cart(conversation_id, message):
credentials = service_account.Credentials.from_service_account_file(
SERVICE_ACCOUNT_LOCATION)
inventory = get_inventory_data()
cart_request = json.loads(message)
cart_cmd = cart_request["action"]
cart_item = cart_request["item_name"]
item_name = inventory['food'][int(cart_item)]['name']
client = datastore.Client(credentials=credentials)
key = client.key('ShoppingCart', conversation_id)
entity = datastore.Entity(key=key)
result = client.get(key)
if result is None:
if cart_cmd == CMD_ADD_ITEM:
entity.update({
item_name: 1
})
else:
if cart_cmd == CMD_ADD_ITEM:
if result.get(item_name) is None:
result[item_name] = 1
else:
result[item_name] = result[item_name] + 1
entity.update(result)
client.put(entity)
इस फ़ंक्शन को बाद में इस तरह से बढ़ाया जाएगा कि यह उस स्थिति में काम कर सके जहां cart_cmd में, CMD_DEL_ITEM में तय की गई ‘del-item' स्ट्रिंग मौजूद हो.
Tying it together
पक्का करें कि आपने route_message फ़ंक्शन में प्लंबिंग जोड़ी हो, ताकि अगर आपको कार्ट में कोई आइटम जोड़ने का मैसेज मिलता है, तो update_shopping_cart फ़ंक्शन को कॉल किया जाए. आपको एक कॉन्स्टेंट भी तय करना होगा, ताकि हम कोडलैब में इस्तेमाल किए गए कन्वेंशन का इस्तेमाल करके आइटम जोड़ सकें.
bonjourmeal-codelab/step-2bopis/views.py
...
CMD_DEL_ITEM = 'del-item'
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
send_product_catalog(conversation_id)
elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
update_shopping_cart(conversation_id, message)
else:
echo_message(message, conversation_id)
...
फ़िलहाल, हमारे पास शॉपिंग कार्ट में आइटम जोड़ने की सुविधा है. Google App Engine पर बदलाव लागू करने के बाद, आपको GCP Console में मौजूद Google Datastore डैशबोर्ड में शॉपिंग कार्ट में किए गए बदलाव दिखने चाहिए. Google Datastore कंसोल का यह स्क्रीनशॉट देखें. इसमें एक ही इकाई है, जिसका नाम बातचीत के आईडी के हिसाब से रखा गया है. इसके बाद, इन्वेंट्री आइटम और शॉपिंग कार्ट में मौजूद उन आइटम की संख्या के बारे में जानकारी दी गई है.
अगले सेक्शन में, हम शॉपिंग कार्ट में आइटम दिखाने का तरीका बनाएंगे. शॉपिंग कार्ट की समीक्षा करने के तरीके में, हमें कार्ट में मौजूद सभी आइटम, उनकी संख्या, और कार्ट से किसी आइटम को हटाने का विकल्प दिखना चाहिए.
कार्ट में मौजूद आइटम की समीक्षा की जा रही है
शॉपिंग कार्ट में मौजूद आइटम की सूची से ही हमें शॉपिंग कार्ट की स्थिति के बारे में पता चलता है. साथ ही, यह भी पता चलता है कि हम किन आइटम को हटा सकते हैं.
सबसे पहले, "यह रहा आपका शॉपिंग कार्ट:" जैसा कोई मैसेज भेजें. इसके बाद, एक और मैसेज भेजें. इसमें रिच कार्ड कैरसेल शामिल हो. साथ ही, "एक आइटम हटाएं" या "एक आइटम जोड़ें" के लिए, सुझाई गई प्रतिक्रियाएं भी शामिल हों. रिच कार्ड कैरसेल में, कार्ट में सेव किए गए आइटम की संख्या भी दिखनी चाहिए.
हमारा फ़ंक्शन लिखने से पहले, आपको यह बात पता होनी चाहिए: अगर शॉपिंग कार्ट में सिर्फ़ एक तरह का आइटम है, तो हम उसे कैरसेल के तौर पर रेंडर नहीं कर सकते. रिच कार्ड कैरसेल में कम से कम दो कार्ड होने चाहिए. इसके उलट, अगर कार्ट में कोई आइटम नहीं है, तो हम एक सामान्य मैसेज दिखाना चाहते हैं. इसमें बताया गया हो कि कार्ट खाली है.
इसे ध्यान में रखते हुए, आइए send_shopping_cart नाम का एक फ़ंक्शन तय करें. यह फ़ंक्शन, Google Datastore से कनेक्ट होता है और बातचीत के आईडी के आधार पर, ShoppingCart इकाई का अनुरोध करता है. इसके बाद, हम get_inventory_data फ़ंक्शन को कॉल करेंगे और शॉपिंग कार्ट की स्थिति की जानकारी देने के लिए, रिच कार्ड कैरसेल का इस्तेमाल करेंगे. हमें नाम के हिसाब से किसी प्रॉडक्ट का आईडी भी चाहिए होगा. इसके लिए, हम Google Datastore में मौजूद डेटा को ऐक्सेस करने वाला एक फ़ंक्शन बना सकते हैं. कैरसेल बनाते समय, हम प्रॉडक्ट आईडी के हिसाब से आइटम मिटाने या जोड़ने के लिए, सुझाए गए जवाबों को जोड़ सकते हैं. नीचे दिए गए स्निपेट में, ये सभी कार्रवाइयां की गई हैं. कोड को views.py में कहीं भी कॉपी करें.
bonjourmeal-codelab/step-2/bopis/views.py
...
def get_id_by_product_name(product_name):
inventory = get_inventory_data()
for item in inventory['food']:
if item['name'] == product_name:
return int(item['id'])
return False
def send_shopping_cart(conversation_id):
credentials = service_account.Credentials.from_service_account_file(
SERVICE_ACCOUNT_LOCATION)
# Retrieve the inventory data
inventory = get_inventory_data()
# Pull the data from Google Datastore
client = datastore.Client(credentials=credentials)
key = client.key('ShoppingCart', conversation_id)
result = client.get(key)
shopping_cart_suggestions = [
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='See total price', postbackData='show-cart-price')),
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Empty the cart', postbackData='empty-cart')),
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='See the menu', postbackData=CMD_SHOW_PRODUCT_CATALOG)),
]
if result is None or len(result.items()) == 0:
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='There are no items in your shopping cart.',
suggestions=shopping_cart_suggestions)
send_message(message_obj, conversation_id)
elif len(result.items()) == 1:
for product_name, quantity in result.items():
product_id = get_id_by_product_name(product_name)
fallback_text = ('You have one type of item in the shopping cart')
rich_card = BusinessMessagesRichCard(
standaloneCard=BusinessMessagesStandaloneCard(
cardContent=BusinessMessagesCardContent(
title=product_name,
description=f'{quantity} in cart.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Remove one',
postbackData='{'+f'"action":"{CMD_DEL_ITEM}","item_name":"{product_id}"'+'}'))
],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=inventory['food'][product_id]
['image_url'],
forceRefresh=False)))))
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
suggestions=shopping_cart_suggestions,
fallback=fallback_text)
send_message(message_obj, conversation_id)
else:
cart_carousel_items = []
# Iterate through the cart and generate a carousel of items
for product_name, quantity in result.items():
product_id = get_id_by_product_name(product_name)
cart_carousel_items.append(
BusinessMessagesCardContent(
title=product_name,
description=f'{quantity} in cart.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Remove one',
postbackData='{'+f'"action":"{CMD_DEL_ITEM}","item_name":"{product_id}"'+'}'))
],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=inventory['food'][product_id]
['image_url'],
forceRefresh=False))))
rich_card = BusinessMessagesRichCard(
carouselCard=BusinessMessagesCarouselCard(
cardContents=cart_carousel_items,
cardWidth=BusinessMessagesCarouselCard.CardWidthValueValuesEnum
.MEDIUM))
fallback_text = ''
# Construct a fallback text for devices that do not support carousels
for card_content in rich_card.carouselCard.cardContents:
fallback_text += (
card_content.title + '\n\n' + card_content.description + '\n\n' +
card_content.media.contentInfo.fileUrl +
'\n---------------------------------------------\n\n')
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
suggestions=shopping_cart_suggestions,
fallback=fallback_text,
)
send_message(message_obj, conversation_id)
...
पक्का करें कि आपने views.py फ़ाइल में सबसे ऊपर CMD_SHOW_CART को पहले ही तय कर दिया हो. साथ ही, अगर उपयोगकर्ता ‘show-cart' वाला मैसेज भेजता है, तो send_shopping_cart को कॉल करें.
bonjourmeal-codelab/step-2/bopis/views.py
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
send_product_catalog(conversation_id)
elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
update_shopping_cart(conversation_id, message)
elif normalized_message == CMD_SHOW_CART:
send_shopping_cart(conversation_id)
else:
echo_message(message, conversation_id)
...
हमने send_shopping_cart फ़ंक्शन में जो लॉजिक इस्तेमाल किया है उसके हिसाब से, ‘show-cart' टाइप करने पर हमें इनमें से कोई एक जवाब मिलेगा: कार्ट में कुछ भी नहीं है, कार्ट में मौजूद एक आइटम दिखाने वाला रिच कार्ड या कार्ट में मौजूद कई आइटम दिखाने वाला कार्ड का कैरसेल. इसके अलावा, हमने तीन जवाब सुझाए हैं: "कुल कीमत देखें", "कार्ट खाली करें", और "मेन्यू देखें".
ऊपर दिए गए कोड में किए गए बदलावों को लागू करके देखें. इससे यह पता चलेगा कि आपकी शॉपिंग कार्ट में जोड़े गए आइटम ट्रैक किए जा रहे हैं या नहीं. साथ ही, यह भी पता चलेगा कि ऊपर दिए गए स्क्रीनशॉट में दिखाए गए तरीके से, बातचीत वाली जगह से कार्ट की समीक्षा की जा सकती है या नहीं. बदलावों को लागू करने के लिए, इस कमांड को उस step-2 डायरेक्ट्री से चलाएं जहां आपको बदलाव करने हैं.
$ gcloud app deploy
हम कार्ट से किसी आइटम को हटाने की सुविधा बनाने के बाद, अगले सेक्शन में "कुल कीमत देखें" सुविधा बनाएंगे. get_cart_price फ़ंक्शन, "शॉपिंग कार्ट देखें" सुविधा की तरह काम करेगा. इसका मतलब है कि यह Datastore में मौजूद डेटा को inventory.json फ़ाइल से क्रॉस-रेफ़रेंस करेगा, ताकि शॉपिंग कार्ट के लिए कुल कीमत तय की जा सके. यह कोडलैब के अगले हिस्से के लिए काम आएगा, जहां हम पेमेंट की सुविधा को इंटिग्रेट करेंगे.
कार्ट से सामान हटाना
आखिर में, हम कार्ट को हटाने की सुविधा जोड़कर, शॉपिंग कार्ट के व्यवहार को पूरा कर सकते हैं. मौजूदा update_shopping_cart फ़ंक्शन की जगह यह स्निपेट डालें.
bonjourmeal-codelab/step-2/ bopis/views.py
def update_shopping_cart(conversation_id, message):
credentials = service_account.Credentials.from_service_account_file(
SERVICE_ACCOUNT_LOCATION)
inventory = get_inventory_data()
cart_request = json.loads(message)
cart_cmd = cart_request["action"]
cart_item = cart_request["item_name"]
item_name = inventory['food'][int(cart_item)]['name']
client = datastore.Client(credentials=credentials)
key = client.key('ShoppingCart', conversation_id)
entity = datastore.Entity(key=key)
result = client.get(key)
if result is None:
if cart_cmd == CMD_ADD_ITEM:
entity.update({
item_name: 1
})
elif cart_cmd == CMD_DEL_ITEM:
# The user is trying to delete an item from an empty cart. Pass and skip
pass
else:
if cart_cmd == CMD_ADD_ITEM:
if result.get(item_name) is None:
result[item_name] = 1
else:
result[item_name] = result[item_name] + 1
elif cart_cmd == CMD_DEL_ITEM:
if result.get(item_name) is None:
# The user is trying to remove an item that's no in the shopping cart. Pass and skip
pass
elif result[item_name] - 1 > 0:
result[item_name] = result[item_name] - 1
else:
del result[item_name]
entity.update(result)
client.put(entity)
पुष्टि करने वाला मैसेज भेजना
जब कोई उपयोगकर्ता कार्ट में कोई आइटम जोड़ता है, तो आपको उसे एक पुष्टि वाला मैसेज भेजना चाहिए. इससे उसे पता चलेगा कि आपने उसकी कार्रवाई की पुष्टि कर दी है और उसके अनुरोध को प्रोसेस कर दिया है. इससे न सिर्फ़ उम्मीदें तय करने में मदद मिलती है, बल्कि बातचीत भी जारी रहती है.
update_shopping_cart फ़ंक्शन को इस तरह से बढ़ाया जाए कि यह बातचीत के आईडी को एक मैसेज भेजे. इस मैसेज में यह बताया जाए कि आइटम को जोड़ दिया गया है या हटा दिया गया है. साथ ही, उन्हें अपने शॉपिंग कार्ट की समीक्षा करने या मेन्यू को फिर से देखने के सुझाव दिए जाएं.
bonjourmeal-codelab/step-2/bopis/views.py
def update_shopping_cart(conversation_id, message):
# No changes to the function, except appending the following logic
...
if cart_cmd == CMD_ADD_ITEM:
message = 'Great! You\'ve added an item to the cart.'
else:
message = 'You\'ve removed an item from the cart.'
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message,
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Review shopping cart',
postbackData=CMD_SHOW_CART)
),
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='See menu again',
postbackData=CMD_SHOW_PRODUCT_CATALOG)
),
])
send_message(message_obj, conversation_id)
बस इतना ही करना है! शॉपिंग कार्ट का ऐसा अनुभव जिसमें उपयोगकर्ता को कार्ट में आइटम जोड़ने, हटाने, और उनकी समीक्षा करने की सुविधा मिलती है.
अगर आपको Business Messages बातचीत में शॉपिंग कार्ट की सुविधा देखनी है, तो ऐप्लिकेशन को डिप्लॉय करें, ताकि आप अपने एजेंट से इंटरैक्ट कर सकें. इसके लिए, step-2 डायरेक्ट्री में यह कमांड चलाएं.
$ gcloud app deploy
5. पेमेंट के लिए तैयारी की जा रही है
सीरीज़ के अगले हिस्से में, पेमेंट प्रोसेसर के साथ इंटिग्रेट करने के लिए, हमें शॉपिंग कार्ट की कीमत पता करने का तरीका चाहिए. आइए, एक ऐसा फ़ंक्शन बनाते हैं जो Google Datastore में शॉपिंग कार्ट के डेटा को क्रॉस-रेफ़रंस करके, हमारे लिए कीमत का पता लगाता है. साथ ही, इन्वेंट्री से हर आइटम की कीमत का पता लगाता है और कार्ट में मौजूद हर आइटम की कीमत को उसकी संख्या से गुणा करता है.
bonjourmeal-codelab/step-2/bopis/views.py
...
def get_cart_price(conversation_id):
# Pull the data from Google Datastore
credentials = service_account.Credentials.from_service_account_file(
SERVICE_ACCOUNT_LOCATION)
client = datastore.Client(credentials=credentials)
key = client.key('ShoppingCart', conversation_id)
entity = datastore.Entity(key=key)
result = client.get(key)
# Retrieve the inventory data
inventory = get_inventory_data()
# Start off with a total of 0 before adding up the total
total_price = 0
if len(result.items()) != 0:
for product_name, quantity in result.items():
total_price = total_price + float(
inventory['food'][get_id_by_product_name(product_name)]['price']) * int(quantity)
return total_price
...
इसके बाद, हम उस फ़ंक्शन का इस्तेमाल कर सकते हैं और उपयोगकर्ता को मैसेज भेज सकते हैं.
bonjourmeal-codelab/step-2/bopis/views.py
...
def send_shopping_cart_total_price(conversation_id):
cart_price = get_cart_price(conversation_id)
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
suggestions=[],
text=f'Your cart\'s total price is ${cart_price}.')
send_message(message_obj, conversation_id)
...
ऊपर दिए गए लॉजिक को ट्रिगर करने के लिए, आइए route_message फ़ंक्शन और कॉन्स्टेंट को अपडेट करें.
bonjourmeal-codelab/step-2/bopis/views.py
...
CMD_GET_CART_PRICE = 'show-cart-price'
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
send_product_catalog(conversation_id)
elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
update_shopping_cart(conversation_id, message)
elif normalized_message == CMD_SHOW_CART:
send_shopping_cart(conversation_id)
elif normalized_message == CMD_GET_CART_PRICE:
send_shopping_cart_total_price(conversation_id)
else:
echo_message(message, conversation_id)
...
ऊपर दिए गए लॉजिक से क्या हासिल किया जा सकता है, यह दिखाने के लिए यहां कुछ स्क्रीनशॉट दिए गए हैं:
जब हम कोडलैब के अगले हिस्से में पेमेंट प्रोसेसर के साथ इंटिग्रेट करने के लिए तैयार होंगे, तब हम get_cart_price फ़ंक्शन को कॉल करेंगे. इससे पेमेंट प्रोसेसर को डेटा पास किया जा सकेगा और पेमेंट की प्रोसेस शुरू की जा सकेगी.
फिर से, Business Messages बातचीत में शॉपिंग कार्ट की इस सुविधा को आज़माया जा सकता है. इसके लिए, ऐप्लिकेशन को डिप्लॉय करें और अपने एजेंट से इंटरैक्ट करें.
$ gcloud app deploy
6. बधाई हो
बधाई हो, आपने Business Messages में शॉपिंग कार्ट की सुविधा जोड़ ली है.
इस कोडलैब में, हमने शॉपिंग कार्ट को पूरी तरह से खाली करने की सुविधा के बारे में नहीं बताया है. अगर आपको "कार्ट खाली करो" सुविधा का इस्तेमाल करना है, तो ऐप्लिकेशन को एक्सटेंड करके देखें. यह समाधान, क्लोन किए गए सोर्स कोड के तीसरे चरण में उपलब्ध है.
हम आने वाले समय में, बाहरी पेमेंट प्रोसेसर के साथ इंटिग्रेट करेंगे. इससे आपके उपयोगकर्ताओं को आपके ब्रैंड के साथ पेमेंट का लेन-देन पूरा करने में मदद मिलेगी.
शॉपिंग कार्ट को बेहतर बनाने के लिए क्या किया जा सकता है?
किसी बातचीत में शॉपिंग कार्ट का अच्छा अनुभव, मोबाइल ऐप्लिकेशन या किसी दुकान में मिलने वाले अनुभव से अलग नहीं होता. इस कोडलैब में, हमने सामान जोड़ने, सामान हटाने, और कार्ट में मौजूद सामान की कीमत का हिसाब लगाने जैसी कुछ सुविधाओं के बारे में जाना. असली दुनिया के शॉपिंग कार्ट से अलग, इसमें किसी भी समय कार्ट में मौजूद सभी आइटम की कीमत देखी जा सकती है. ऐसा तब भी किया जा सकता है, जब आइटम जोड़े या हटाए जा रहे हों. इस तरह की बेहतरीन सुविधाओं से, बातचीत वाली खरीदारी की सुविधा का आपका अनुभव बेहतर बनेगा!
आगे क्या करना है?
जब आप तैयार हों, तो Business Messages में ज़्यादा जटिल इंटरैक्शन के बारे में जानने के लिए, यहां दिए गए कुछ विषयों के बारे में पढ़ें:
- Business Messages कैसे काम करता है?
- सबसे सही तरीके
- लोगो से जुड़े दिशा-निर्देश
- लाइव एजेंट को चैट ट्रांसफ़र करना
रेफ़रंस दस्तावेज़
- SuggestedReply
- Business Messages के मैसेज का रेफ़रंस दस्तावेज़
- RichCard के लिए JSON की परिभाषा