स्टोर से ऑनलाइन पिकअप करें: बोनस से जुड़ा खाना - दूसरा भाग - शॉपिंग कार्ट बनाना

ऑनलाइन खरीदकर स्टोर से पिकअप करने की सुविधा:

Bonjour Meal - दूसरा भाग - शॉपिंग कार्ट बनाना

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

पिछली बार नव॰ 14, 2024 को अपडेट किया गया

Adam Chan ने लिखा

1. परिचय

पिछली बार अपडेट किया गया: 30-10-2020

Business Messages पर शॉपिंग कार्ट बनाना!

यह सीरीज़ में दूसरा कोडलैब है. इसका मकसद, 'ऑनलाइन खरीदें और स्टोर से पिकअप करें' सुविधा के लिए उपयोगकर्ता अनुभव बनाना है. कई ई-कॉमर्स प्रोसेस में, उपयोगकर्ताओं को पैसे चुकाने वाले ग्राहकों में बदलने के लिए, शॉपिंग कार्ट की अहम भूमिका होती है. शॉपिंग कार्ट की मदद से, अपने ग्राहकों को बेहतर तरीके से समझा जा सकता है. साथ ही, उन प्रॉडक्ट के सुझाव भी दिए जा सकते हैं जिनमें उनकी दिलचस्पी हो सकती है. इस कोडलैब में, हम शॉपिंग कार्ट का अनुभव बनाने और Google App Engine पर ऐप्लिकेशन को डिप्लॉय करने पर फ़ोकस करेंगे.

ध्यान दें: इस कोडलैब में यह माना गया है कि आपने पहले ही पार्टनर के तौर पर रजिस्टर कर लिया है और आपको हमारी सहायता टीम से अनुमति मिल गई है. अगर आपने पहले से ऐसा नहीं किया है, तो Business Messages के साथ रजिस्टर करें. इसके बाद, इस कोडलैब को शुरू करने से पहले अनुमति मिलने का इंतज़ार करें.

शॉपिंग कार्ट को अच्छा बनाने के लिए क्या करना चाहिए?

ऑनलाइन खरीदारी का बेहतर अनुभव देने के लिए, शॉपिंग कार्ट की अहम भूमिका होती है. Business Messages, किसी संभावित ग्राहक के साथ प्रॉडक्ट के बारे में सवाल-जवाब करने के साथ-साथ, खरीदारी के पूरे अनुभव को बेहतर बनाता है. इसमें बातचीत के दौरान ही पेमेंट भी किया जा सकता है.

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

आपको क्या बनाना है

कोडलैब सीरीज़ के इस सेक्शन में, आपको पहले भाग में बनाई गई डिजिटल एजेंट को, काल्पनिक कंपनी Bonjour Meal के लिए बेहतर बनाना है. इससे उपयोगकर्ता, आइटम के कैटलॉग को ब्राउज़ कर पाएंगे और शॉपिंग कार्ट में आइटम जोड़ पाएंगे.

इस कोडलैब में, आपका ऐप्लिकेशन

• Business Messages में सवालों का कैटलॉग दिखाना
• उपयोगकर्ताओं को ऐसे आइटम के सुझाव देना जिनमें उनकी दिलचस्पी हो सकती है
• शॉपिंग कार्ट के कॉन्टेंट की समीक्षा करना और कुल कीमत की खास जानकारी बनाना

ध्यान दें: इस कोडलैब को आसान बनाने और Business Messages का बेहतर अनुभव देने के बुनियादी तरीकों के बारे में बताने के लिए, हम Google Cloud Platform (GCP) का इस्तेमाल कर रहे हैं. इससे, एजेंट इन्फ़्रास्ट्रक्चर के साथ काम करने वाला वेब ऐप्लिकेशन डिप्लॉय किया जा सकेगा. अपने वेब ऐप्लिकेशन को डिप्लॉय करने के लिए, GCP एक बेहतरीन विकल्प है. हालांकि, इसका इस्तेमाल करना ज़रूरी नहीं है. हालांकि, कनेक्ट करने और एपीआई चालू करने के लिए, GCP प्रोजेक्ट की ज़रूरत हमेशा होगी.

आपको इनके बारे में जानकारी मिलेगी

• Google Cloud Platform पर App Engine पर वेब ऐप्लिकेशन को डिप्लॉय करने का तरीका
• शॉपिंग कार्ट की स्थिति सेव करने के लिए, पर्सिस्टेंट स्टोरेज का इस्तेमाल करने का तरीका

इस कोडलैब में, इस कोडलैब सीरीज़ के पहले हिस्से में बनाए गए डिजिटल एजेंट को बेहतर बनाने पर फ़ोकस किया गया है.

आपको इन चीज़ों की ज़रूरत होगी

• ऐसा GCP प्रोजेक्ट जिसे रजिस्टर किया गया हो और जिसे Business Messages के साथ इस्तेमाल करने की अनुमति मिली हो
• आपके GCP प्रोजेक्ट के लिए जनरेट की गई सेवा खाते की JSON क्रेडेंशियल फ़ाइल
• Android 5 या उसके बाद के वर्शन वाला डिवाइस या Google Maps ऐप्लिकेशन वाला iOS डिवाइस
• वेब ऐप्लिकेशन प्रोग्रामिंग का अनुभव
• इंटरनेट कनेक्शन!

2. सेट अप करना

इस कोडलैब में यह माना गया है कि आपने अपना पहला एजेंट बनाया है और कोडलैब का पहला चरण पूरा कर लिया है. इसलिए, हम Business Messages और Business Communications API को चालू करने, सेवा खाते की कुंजियां बनाने, ऐप्लिकेशन को डिप्लॉय करने या Business Communications Console पर अपना वेबहुक सेट अप करने के बुनियादी तरीकों के बारे में नहीं बताएंगे. हम एक सैंपल ऐप्लिकेशन का क्लोन बनाएंगे, ताकि यह पक्का किया जा सके कि आपका ऐप्लिकेशन, उस ऐप्लिकेशन से मेल खाता है जिसे हम बना रहे हैं. साथ ही, हम 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, Business communications API, और Cloud Build API को चालू किया था.

इस कोडलैब में, हमें Google डेटास्टोर का इस्तेमाल करना है. इसलिए, हमें यह एपीआई भी चालू करना होगा:

1. Google Cloud Console में, Google Datastore API खोलें.
2. पक्का करें कि आप सही GCP प्रोजेक्ट का इस्तेमाल कर रहे हों.
3. चालू करें पर क्लिक करें.

सैंपल ऐप्लिकेशन को डिप्लॉय करना

टर्मिनल में, सैंपल के दूसरे चरण की डायरेक्ट्री पर जाएं.

सैंपल को डिप्लॉय करने के लिए, टर्मिनल में ये कमांड चलाएं:

$ 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 डायरेक्ट्री में मौजूद होती है. हमें 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 की बातचीत में सभी इन्वेंट्री आइटम दिखाए जाते हैं.

प्रॉडक्ट कैटलॉग देखने के लिए, हम सुझाया गया जवाब देंगे. इसमें टेक्स्ट "मेन्यू दिखाएं" और पोस्टबैक डेटा "show-product-catalog" होगा. जब उपयोगकर्ता सुझाए गए जवाब पर टैप करेंगे और आपके वेब ऐप्लिकेशन को पोस्टबैक डेटा मिलेगा, तब हम रिच कार्ड कैरसेल भेजेंगे. आइए, सुझाए गए इस जवाब के लिए, views.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, को कॉल करता है. यह उस इन्वेंट्री फ़ाइल से रिच कार्ड का कैरसेल जनरेट करता है जिसे हमने पहले पढ़ा था.

फ़ंक्शन की परिभाषाओं को 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 डेटास्टोर का इस्तेमाल करेंगे. बातचीत का आईडी, उपयोगकर्ता और कारोबार के बीच एक जैसा रहता है. इसलिए, हम इसका इस्तेमाल करके उपयोगकर्ताओं को शॉपिंग कार्ट के आइटम से जोड़ सकते हैं.

Google डेटास्टोर से कनेक्ट करके, बातचीत का आईडी सेव करने से शुरुआत करते हैं.

Datastore से कनेक्ट करना

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

नीचे दिए गए स्निपेट में, शॉपिंग कार्ट को अपडेट करने के लिए एक फ़ंक्शन तय किया गया है. फ़ंक्शन में ये इनपुट डाले जा सकते हैं: conversation_id और message. message में, उपयोगकर्ता की कार्रवाई के बारे में बताने वाला JSON होता है. यह कार्रवाई, प्रॉडक्ट कैटलॉग दिखाने वाले आपके कैरसेल में पहले से मौजूद होती है. यह फ़ंक्शन, Google डेटास्टोर क्लाइंट बनाता है और तुरंत 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 में मौजूद आइटम से जुड़ा यूनीक आइडेंटिफ़ायर है.

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

यहां दिया गया स्निपेट, आपके 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' शामिल की जा सके.

इसे एक साथ जोड़ना

पक्का करें कि आपने 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 डेटास्टोर डैशबोर्ड में दिखेंगे. Google डेटास्टोर कंसोल का नीचे दिया गया स्क्रीनशॉट देखें. इसमें एक इकाई है, जिसका नाम बातचीत आईडी के नाम पर रखा गया है. इसके बाद, इन्वेंट्री आइटम और शॉपिंग कार्ट में मौजूद आइटम की संख्या से जुड़ी कुछ जानकारी दी गई है.

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

कार्ट में मौजूद आइटम की समीक्षा करना

शॉपिंग कार्ट में मौजूद आइटम की सूची बनाकर ही, हम शॉपिंग कार्ट की स्थिति को समझ सकते हैं. साथ ही, यह भी जान सकते हैं कि किन आइटम को हटाया जा सकता है.

सबसे पहले, "यहां आपका शॉपिंग कार्ट है:" जैसा कोई मैसेज भेजें. इसके बाद, एक और मैसेज भेजें. इसमें रिच कार्ड कैरसेल के साथ, "एक आइटम हटाएं" या "एक आइटम जोड़ें" के लिए सुझाए गए जवाब शामिल करें. रिच कार्ड कैरसेल में, कार्ट में सेव किए गए आइटम की संख्या भी दिखनी चाहिए.

फ़ंक्शन लिखने से पहले, इस बात का ध्यान रखें: अगर शॉपिंग कार्ट में सिर्फ़ एक तरह का आइटम है, तो हम उसे कैरसेल के तौर पर रेंडर नहीं कर सकते. रिच कार्ड कैरसेल में कम से कम दो कार्ड होने चाहिए. वहीं दूसरी ओर, अगर कार्ट में कोई आइटम नहीं है, तो हम एक आसान मैसेज दिखाना चाहते हैं, जिसमें यह बताया गया हो कि कार्ट खाली है.

इसी को ध्यान में रखकर, send_shopping_cart नाम का एक फ़ंक्शन तय करें. यह फ़ंक्शन, Google डेटास्टोर से कनेक्ट होता है और बातचीत आईडी के आधार पर ShoppingCart इकाई का अनुरोध करता है. इसके बाद, हम get_inventory_data फ़ंक्शन को कॉल करेंगे और शॉपिंग कार्ट की स्थिति की रिपोर्ट करने के लिए, रिच कार्ड कैरसेल का इस्तेमाल करेंगे. हमें नाम के हिसाब से किसी प्रॉडक्ट का आईडी भी चाहिए. साथ ही, हम Google डेटास्टोर में जाकर उस वैल्यू का पता लगाने के लिए, कोई फ़ंक्शन तय कर सकते हैं. कैरसेल तैयार होने के दौरान, हम प्रॉडक्ट आईडी के हिसाब से आइटम जोड़ने या मिटाने के लिए, सुझाई गई जवाबों को जोड़ सकते हैं. नीचे दिया गया स्निपेट, ये सभी कार्रवाइयां करता है. कोड को 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' टाइप करने पर, हमें एक मैसेज मिलेगा. इसमें बताया जाएगा कि कार्ट में कुछ भी नहीं है. इसके अलावा, कार्ट में मौजूद एक आइटम दिखाने वाला रिच कार्ड या कार्ड का कैरसेल दिखेगा. इसमें कई आइटम दिखेंगे. इसके अलावा, हमने तीन जवाबों के सुझाव दिए हैं: "कुल कीमत देखें", "कार्ट खाली करें", और "मेन्यू देखें".

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

$ gcloud app deploy

कार्ट से आइटम हटाने की सुविधा बनाने के बाद, हम अगले सेक्शन में "कुल कीमत देखें" सुविधा बनाएंगे. फ़ंक्शन get_cart_price, "शॉपिंग कार्ट देखें" सुविधा की तरह ही काम करेगा. इसका मतलब है कि यह शॉपिंग कार्ट की कुल कीमत दिखाने के लिए, डेटास्टोर में मौजूद डेटा को 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 की बातचीत में शॉपिंग कार्ट की सुविधा देखनी है, तो अपने एजेंट से इंटरैक्ट करने के लिए ऐप्लिकेशन को डिप्लॉय करें. ऐसा करने के लिए, दूसरे चरण की डायरेक्ट्री में यह कमांड चलाएं.

$ gcloud app deploy

5. पेमेंट के लिए तैयार होना

सीरीज़ के अगले हिस्से में पेमेंट प्रोसेस करने वाली कंपनी के साथ इंटिग्रेट करने के लिए, हमें शॉपिंग कार्ट की कीमत पाने का तरीका चाहिए. आइए, एक ऐसा फ़ंक्शन बनाएं जो Google डेटास्टोर में मौजूद शॉपिंग कार्ट के डेटा को क्रॉस-रेफ़रंस करके, हमें कीमत दिखाए. इसके लिए, यह फ़ंक्शन इन्वेंट्री से हर आइटम की कीमत को इकट्ठा करेगा और कार्ट में मौजूद हर आइटम की संख्या से कीमत को गुणा करेगा.

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 की परिभाषा