1. शुरुआती जानकारी
पिछली बार अपडेट किए जाने की तारीख: 30-10-2020
Business Messages पर शॉपिंग कार्ट बनाना!
यह सीरीज़ का दूसरा कोडलैब है, जिसका मकसद 'स्टोर से ऑनलाइन पिकअप करें' सुविधा का इस्तेमाल करने वाले लोगों के सफ़र के बारे में जानकारी देना है. कई ई-कॉमर्स प्लैटफ़ॉर्म पर, उपयोगकर्ताओं को खरीदारी करने वाले ग्राहकों में बदलने के लिए, शॉपिंग कार्ट की अहम भूमिका होती है. शॉपिंग कार्ट की मदद से, अपने ग्राहकों को बेहतर ढंग से समझा जा सकता है. साथ ही, इससे खरीदारों को ऐसे अन्य आइटम के बारे में सुझाव दिए जा सकते हैं जिनमें उनकी दिलचस्पी हो सकती है. इस कोडलैब में, हम शॉपिंग कार्ट अनुभव बनाने और ऐप्लिकेशन को Google App Engine में डिप्लॉय करने पर फ़ोकस करेंगे.
एक अच्छा शॉपिंग कार्ट क्या होता है?
ऑनलाइन खरीदारी के अनुभव को सफल बनाने में शॉपिंग कार्ट अहम भूमिका निभाता है. Business Messages का इस्तेमाल, किसी संभावित ग्राहक के लिए प्रॉडक्ट के बारे में सवाल-जवाब की सुविधा देने में ही नहीं होता. इसके अलावा, यह मैसेज सेवा का इस्तेमाल करके खरीदारी के पूरे अनुभव को बेहतर बना सकता है, ताकि ग्राहक से बातचीत के दौरान ही प्रॉडक्ट के लिए पेमेंट किया जा सके.
एक अच्छे शॉपिंग कार्ट के अलावा, एक अच्छा खरीदारी अनुभव उपयोगकर्ताओं को श्रेणी के अनुसार आइटम ब्राउज़ करने देता है और व्यवसाय को ऐसे अन्य प्रॉडक्ट का सुझाव देने देता है जिनमें खरीदार की रुचि हो सकती है. शॉपिंग कार्ट में ज़्यादा आइटम जोड़ने के बाद, उपयोगकर्ता अपने पूरे कार्ट को देख सकता है. साथ ही, पैसे चुकाने से पहले आइटम हटा सकता है या ज़्यादा आइटम जोड़ सकता है.
क्या बनाएं
कोडलैब सीरीज़ के इस सेक्शन में, आपने पार्ट 1 में काल्पनिक कंपनी Bonjour Meal के लिए बनाए गए डिजिटल एजेंट की मदद ली है, ताकि उपयोगकर्ता आइटम का कैटलॉग ब्राउज़ कर सकें और शॉपिंग कार्ट में आइटम जोड़ सकें.
इस कोडलैब में, आपका ऐप्लिकेशन ये काम करेगा
- Business Messages में सवालों का कैटलॉग दिखाएं
- ऐसे आइटम के सुझाव दें जिनमें उपयोगकर्ताओं की दिलचस्पी हो सकती है
- शॉपिंग कार्ट के कॉन्टेंट की समीक्षा करें और कुल कीमत की खास जानकारी बनाएं
आपको इनके बारे में जानकारी मिलेगी
- Google Cloud Platform पर App Engine पर वेब ऐप्लिकेशन को डिप्लॉय करने का तरीका
- शॉपिंग कार्ट की स्थिति को सेव करने के लिए, स्थायी स्टोरेज तरीके का इस्तेमाल करने का तरीका
इस कोडलैब का मकसद, कोडलैब (कोड बनाना सीखना) इस सीरीज़ के पहले हिस्से में मौजूद डिजिटल एजेंट को ज़्यादा बेहतर बनाना है.
आपको इन चीज़ों की ज़रूरत होगी
- GCP प्रोजेक्ट, रजिस्टर हो चुका है. साथ ही, इसे Business Messages के साथ इस्तेमाल करने की मंज़ूरी मिल चुकी है
- ऐप्लिकेशन इंस्टॉल करने का तरीका जानने के लिए, हमारी डेवलपर साइट पर जाएं
- आपके GCP प्रोजेक्ट के लिए, सेवा खाते की JSON क्रेडेंशियल फ़ाइल जनरेट की गई है
- आपके पास Android 5 या उसके बाद के वर्शन पर काम करने वाला डिवाइस या Google Maps ऐप्लिकेशन वाला iOS डिवाइस होना चाहिए
- वेब ऐप्लिकेशन प्रोग्रामिंग के साथ अनुभव
- इंटरनेट कनेक्शन!
2. सेट अप करना
यह कोडलैब मानता है कि आपने अपना पहला एजेंट बना लिया है और कोडलैब का पहला हिस्सा पूरा कर लिया है. इसलिए, हम Business Messages और Business Communications एपीआई को चालू करने, सेवा खाते की कुंजियां बनाने, किसी ऐप्लिकेशन को डिप्लॉय करने या Business Communications कंसोल पर अपना वेबहुक सेट अप करने से जुड़ी बुनियादी बातों पर फ़ोकस नहीं करेंगे. इसके साथ ही, हम एक सैंपल ऐप्लिकेशन का क्लोन बनाएंगे, ताकि यह पक्का किया जा सके कि आपका ऐप्लिकेशन हमारी ओर से बनाई जा रही चीज़ों के मुताबिक है. इसके बाद, हम Google Cloud Platform पर Datastore के लिए एपीआई चालू कर देंगे, ताकि शॉपिंग कार्ट से जुड़े डेटा को सेव रखा जा सके.
GitHub से ऐप्लिकेशन की क्लोनिंग करना
किसी टर्मिनल में, इस कमांड से अपने प्रोजेक्ट की वर्किंग डायरेक्ट्री में Django Echo Bot सैंपल का क्लोन बनाएं:
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
सेवा खाते के लिए बनाई गई JSON क्रेडेंशियल फ़ाइल को, सैंपल के रिसॉर्स फ़ोल्डर में कॉपी करें. साथ ही, क्रेडेंशियल का नाम बदलकर "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, BusinessCommunication 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 कंसोल में मौजूद एजेंट की जानकारी से मिल सकते हैं. टेस्ट यूआरएल, आपके मोबाइल डिवाइस पर 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 डायरेक्ट्री में मौजूद होती है. JSON फ़ाइल के कॉन्टेंट को पढ़ने और उसे बातचीत में दिखाने के लिए, हमें view.py में कुछ Python लॉजिक जोड़ना होगा. आइए, एक ऐसा फ़ंक्शन बनाते हैं जो JSON फ़ाइल के डेटा को पढ़ता है और उपलब्ध प्रॉडक्ट की सूची दिखाता है.
फ़ंक्शन की यह परिभाषा, view.py में कहीं भी डाली जा सकती है.
bonjourmeal-codelab/step-2/bopis/views.py
...
def get_inventory_data():
f = open(INVENTORY_FILE)
inventory = json.load(f)
return inventory
...
इससे हमें वह जानकारी मिलेगी जो इन्वेंट्री के डेटा को पढ़ने के लिए ज़रूरी है. अब हमें प्रॉडक्ट की जानकारी को बातचीत में लाने का तरीका चाहिए.
प्रॉडक्ट कैटलॉग दिखाना
इस कोडलैब में आसानी के लिए, हमारे पास एक सामान्य प्रॉडक्ट कैटलॉग है. इसमें एक रिच कार्ड कैरसेल की मदद से, Business Messages में सभी इन्वेंट्री आइटम दिखाए जा सकते हैं.
प्रॉडक्ट कैटलॉग देखने के लिए, हम सुझाव के तौर पर एक जवाब तैयार करेंगे. इस जवाब में "मेन्यू दिखाएं" और पोस्टबैक डेटा "show-product-catalog" टेक्स्ट होगा. जब उपयोगकर्ता सुझाए गए जवाब पर टैप करेंगे और आपके वेब ऐप्लिकेशन को पोस्टबैक डेटा मिलने लगेगा, तो हम रिच कार्ड कैरसेल भेजेंगे. सुझाए गए इस जवाब के लिए, view.py में सबसे ऊपर एक नया कॉन्सटैंट जोड़ते हैं.
bonjourmeal-codelab/step-2/bopis/views.py
...
CMD_SHOW_PRODUCT_CATALOG = 'show-product-catalog'
...
यहां से, हम मैसेज को पार्स करते हैं और उसे नए फ़ंक्शन पर भेज देते हैं. यह फ़ंक्शन, प्रॉडक्ट कैटलॉग वाले रिच कार्ड कैरसेल भेजता है. सुझाए गए जवाब पर टैप करने पर, "send_product_catalog" फ़ंक्शन को कॉल करने के लिए, सबसे पहले route_message फ़ंक्शन को बढ़ाएं. इसके बाद, हम फ़ंक्शन तय करेंगे.
नीचे दिए गए स्निपेट में, 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, को कॉल करता है, जो उस इन्वेंट्री फ़ाइल से रिच कार्ड का कैरसेल जनरेट करता है जिसे हमने पहले पढ़ा था.
फ़ंक्शन की परिभाषाएं, view.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 उस पोस्टबैक डेटा को भेजेगा जिसमें आइटम के बारे में बताने वाला JSON शामिल होता है. साथ ही, उपयोगकर्ता आपके वेबहुक पर जो कार्रवाई (कार्ट में जोड़ना या हटाना) चाहता है उसे भी भेजेगा. नीचे दिए गए सेक्शन में, हम इस तरह के मैसेज को पार्स करेंगे, ताकि आइटम को कार्ट में जोड़ा जा सके.
अब जब हमने ये बदलाव कर लिए हैं, तो आइए Google App Engine पर वेब ऐप्लिकेशन को डिप्लॉय करें और अनुभव को आज़माएं!
$ gcloud app deploy
जब आपके मोबाइल डिवाइस पर बातचीत वाला प्लैटफ़ॉर्म लोड हो, तो "प्रॉडक्ट-कैटलॉग दिखाएं" मैसेज भेजें. इसके बाद, आपको इस तरह दिखने वाले प्रॉडक्ट का कैरसेल दिखेगा.
आइटम जोड़ें पर टैप करने पर, असल में कुछ नहीं होता. हालांकि, एजेंट सुझाए गए जवाब से पोस्टबैक डेटा को इको करता है. अगले सेक्शन में, हम प्रॉडक्ट कैटलॉग का इस्तेमाल करेंगे. साथ ही, इसका इस्तेमाल शॉपिंग कार्ट बनाने के लिए करेंगे जहां आइटम जोड़ा जाएगा.
आपने अभी जो प्रॉडक्ट कैटलॉग बनाया है उसे कई तरीकों से बढ़ाया जा सकता है. आपके पास ड्रिंक के मेन्यू में अलग-अलग विकल्प या शाकाहारी विकल्प हो सकते हैं. कैरसेल या सुझाव वाले चिप का इस्तेमाल करके, उपयोगकर्ता मेन्यू के विकल्पों में ड्रिल-डाउन कर सकते हैं. इससे, उन्हें उन प्रॉडक्ट के सेट तक पहुंचने में मदद मिलती है जिन्हें वे खोज रहे हैं. इस कोडलैब के एक्सटेंशन के तौर पर, प्रॉडक्ट कैटलॉग सिस्टम का दायरा बढ़ाने की कोशिश करें. इससे, उपयोगकर्ता को खाने-पीने की चीज़ों के अलावा, मेन्यू में मौजूद ड्रिंक को अलग-अलग देखने या शाकाहारी विकल्प चुनने का विकल्प भी मिलेगा.
4. शॉपिंग कार्ट
कोडलैब के इस सेक्शन में, हम पिछले सेक्शन में शॉपिंग कार्ट के काम करने के तरीके तैयार करेंगे. इससे हम उपलब्ध प्रॉडक्ट ब्राउज़ कर पाएंगे.
कई चीज़ों के साथ, खरीदारी कार्ट के मुख्य हिस्से से उपयोगकर्ताओं को कार्ट में आइटम जोड़ने, कार्ट से आइटम हटाने, कार्ट में मौजूद हर आइटम की संख्या को ट्रैक करने, और कार्ट में मौजूद आइटम की समीक्षा करने की सुविधा मिलती है.
शॉपिंग कार्ट की स्थिति पर नज़र रखने का मतलब है कि हमें वेब ऐप्लिकेशन पर डेटा को बनाए रखना होगा. प्रयोग और डिप्लॉयमेंट को आसान बनाने के लिए, हम Google Cloud Platform में Google Datastore का इस्तेमाल करेंगे, ताकि डेटा को सही तरीके से लागू किया जा सके. उपयोगकर्ता और कारोबार के बीच बातचीत आईडी एक जैसा रहता है, इसलिए हम इसका इस्तेमाल उपयोगकर्ताओं को शॉपिंग कार्ट के आइटम से जोड़ने के लिए कर सकते हैं.
सबसे पहले, Google Datastore से कनेक्ट करें और जब भी हमें बातचीत आईडी दिखे, तो उसे बनाए रखें.
Datastore से कनेक्ट करना
शॉपिंग कार्ट के ख़िलाफ़ कोई भी इंटरैक्शन होने पर, हम Google Datastore से कनेक्ट करेंगे. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी आइटम को जोड़ रहा हो या मिटा रहा हो. Google Datastore के साथ इंटरैक्ट करने के लिए, इस क्लाइंट लाइब्रेरी का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, आधिकारिक दस्तावेज़ देखें.
नीचे दिया गया स्निपेट, शॉपिंग कार्ट को अपडेट करने के लिए फ़ंक्शन के बारे में बताता है. फ़ंक्शन में ये इनपुट शामिल होते हैं: conversation_id और message. message में वह JSON शामिल है जो उपयोगकर्ता को क्या करना है. यह पहले से ही आपके कैरसेल में मौजूद है, जो प्रॉडक्ट कैटलॉग को दिखाता है. यह फ़ंक्शन एक Google Datastore क्लाइंट बनाता है और तुरंत ShoppingCart इकाई को फ़ेच करता है, जिसमें बातचीत का आईडी ही कुंजी होता है.
दिए गए फ़ंक्शन को अपनी view.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)
कार्ट में कोई आइटम जोड़ने के लिए इस फ़ंक्शन को बढ़ाएं.
कार्ट में आइटम जोड़ना
जब उपयोगकर्ता प्रॉडक्ट कैरसेल से सुझाई गई किसी आइटम जोड़ें पर टैप करता है, तो पोस्टबैकडेटा में वह JSON शामिल होता है जो उपयोगकर्ता को क्या करना है. JSON शब्दकोश में दो कुंजियां होती हैं, "कार्रवाई" और "item_name" और यह JSON शब्दकोश आपके वेबहुक पर भेजा जाता है. "item_name" फ़ील्ड एक यूनीक आइडेंटिफ़ायर है, जोInventory.json में मौजूद आइटम से जुड़ा होता है.
कार्ट कमांड और मैसेज से पार्स किए गए कार्ट आइटम को पाने के बाद, हम आइटम जोड़ने के लिए शर्तों वाले स्टेटमेंट लिख सकते हैं. यहां कुछ ऐसे मामले हैं जिन पर ध्यान देना ज़रूरी है कि क्या Datastore ने कभी भी बातचीत आईडी नहीं देखा है या शॉपिंग कार्ट को यह आइटम पहली बार मिल रहा है या नहीं. यह, ऊपर बताए गए update_shopping_cart फ़ंक्शन का एक एक्सटेंशन है. इस बदलाव से शॉपिंग कार्ट में एक आइटम जुड़ जाता है, जो Google Datastore में बरकरार रहता है.
नीचे दिया गया स्निपेट, आपके view.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' स्ट्रिंग हो.
इन्हें एक साथ जोड़ना
पक्का करें कि आपने 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 कंसोल में मौजूद Google Datastore डैशबोर्ड में, शॉपिंग कार्ट में हुए बदलाव दिखेंगे. नीचे Google Datastore कंसोल के नीचे दिया गया स्क्रीनशॉट देखें. इसमें सिर्फ़ एक इकाई है जिसका नाम बातचीत आईडी के नाम पर रखा गया है. इसके बाद, इन्वेंट्री में मौजूद आइटम और शॉपिंग कार्ट में मौजूद आइटम की संख्या से जुड़े कुछ संबंध होते हैं.
अगले सेक्शन में, हम शॉपिंग कार्ट में आइटम को लिस्ट करने का तरीका बनाएंगे. शॉपिंग कार्ट की समीक्षा करने के तरीके में हमें कार्ट में मौजूद सभी आइटम, उन आइटम की संख्या, और कार्ट से किसी आइटम को हटाने का विकल्प दिखना चाहिए.
कार्ट में मौजूद आइटम की समीक्षा की जा रही है
शॉपिंग कार्ट में आइटम को शामिल करने से ही हम शॉपिंग कार्ट की स्थिति को समझ सकते हैं और यह जान सकते हैं कि हम कौनसे आइटम हटा सकते हैं.
सबसे पहले "आपका शॉपिंग कार्ट यह है:" जैसा कोई दोस्ताना मैसेज भेजता है. इसके बाद, एक और मैसेज भेजा जाता है जिसमें "कोई एक हटाएं" या "कोई जोड़ें" जैसे सुझाए गए जवाबों के साथ एक रिच कार्ड कैरसेल शामिल होता है. इसके अलावा, रिच कार्ड कैरसेल में कार्ट में सेव किए गए आइटम की संख्या भी शामिल होनी चाहिए.
इससे पहले कि हम अपने फ़ंक्शन में जाएं और अपने फ़ंक्शन के बारे में कुछ जानकारी लें: अगर शॉपिंग कार्ट में सिर्फ़ एक ही तरह का आइटम है, तो हम उसे कैरसेल के तौर पर रेंडर नहीं कर सकते. रिच कार्ड कैरसेल में कम से कम दो कार्ड होने चाहिए. दूसरी ओर, अगर कार्ट में कोई आइटम नहीं है, तो आपको एक मैसेज दिखेगा. इसमें लिखा होगा कि कार्ट खाली है.
इसे ध्यान में रखकर, हम send_shopping_cart नाम का एक फ़ंक्शन तय करते हैं. यह फ़ंक्शन Google Datastore से कनेक्ट होता है और बातचीत आईडी के आधार पर ShoppingCart इकाई का अनुरोध करता है. यह मिलने के बाद, हम get_inventory_data फ़ंक्शन को कॉल करेंगे और शॉपिंग कार्ट की स्थिति की रिपोर्ट करने के लिए रिच कार्ड कैरसेल का इस्तेमाल करेंगे. हमें किसी प्रॉडक्ट के नाम के हिसाब से उसका आईडी भी हासिल करना होगा. साथ ही, हम उस वैल्यू का पता लगाने के लिए, Google Datastore में जाकर कोई फ़ंक्शन तय कर सकते हैं. इस कैरसेल को बनाया जा रहा है. इसलिए, हम प्रॉडक्ट आईडी से आइटम मिटाने या आइटम मिटाने के लिए, सुझाए गए जवाबों को जोड़ सकते हैं. नीचे दिया गया स्निपेट ये सभी कार्रवाइयां करता है. कोड को View.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)
...
पक्का करें कि आपने view.py में सबसे ऊपर CMD_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 फ़ंक्शन में हमने जो तर्क पेश किया उसके आधार पर, जब 'कार्ट दिखाएं' टाइप किया जाएगा, तब हमें या तो यह मैसेज मिलेगा कि कार्ट में कुछ नहीं है. इसके अलावा, हमें कार्ट में एक आइटम दिखाने वाला रिच कार्ड या कई आइटम दिखाने वाले कार्ड का कैरसेल मिलेगा. इसके अलावा, हमारे पास तीन सुझाए गए जवाब हैं: "कुल कीमत देखें", "कार्ट को खाली करें", और "मेन्यू देखें".
ऊपर दिए गए कोड के बदलावों को लागू करके देखें कि आपका शॉपिंग कार्ट आपके जोड़े गए आइटम ट्रैक कर रहा है या नहीं. साथ ही, यह भी देखें कि आप बातचीत वाले प्लैटफ़ॉर्म से कार्ट की समीक्षा कर सकते हैं, जैसा कि ऊपर दिए गए स्क्रीनशॉट में दिखाया गया है. इस कमांड की मदद से, बदलावों को डिप्लॉय किया जा सकता है. इसके लिए, उस फ़ाइल को चरण-2 डायरेक्ट्री में चलाएं जहां से बदलाव जोड़े जा रहे हैं.
$ gcloud app deploy
हम कार्ट से किसी सामान को हटाने की सुविधा बनाने के बाद, अगले सेक्शन में "कुल कीमत देखें" सुविधा बनाएंगे. get_cart_price फ़ंक्शन, "शॉपिंग कार्ट देखें" सुविधा की तरह काम करेगा. यह कुछ इस तरह से काम करेगा कि शॉपिंग कार्ट की कुल कीमत बताने के लिए, यह Datastore में shopping.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 की बातचीत में शॉपिंग कार्ट की सुविधा देखनी है, तो अपने एजेंट से इंटरैक्ट करने के लिए ऐप्लिकेशन को डिप्लॉय करें. इस निर्देश को चरण-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 में मिलने वाले मुश्किल इंटरैक्शन के बारे में जानने के लिए, यहां दिए गए कुछ विषय देखें:
पहचान वाले दस्तावेज़
- SuggestedReply
- Business Messages का मैसेज रेफ़रंस दस्तावेज़
- RichCard की JSON परिभाषा