如何在使用瀑布對話框（Node js）的同時使用微軟機器人框架將英雄卡片發送到 fb 信使

Question

我正在嘗試使用 Microsoft bot 框架創建一個 Messenger bot

我正在使用瀑布對話框來創建結構的流程。

在這方面，我有多個步驟，在一個特定的步驟中，我需要發送一個由四張英雄卡組成的輪播，每個卡都有按鈕。

我使用了史蒂文的答案， 在 Microsoft Bot Framework v4 for NodeJS 中處理 HeroCards 響應

我在 bot 模擬器和網絡聊天中測試時工作正常但在 Messenger bot 中測試時產生錯誤

誰能幫我糾正這個錯誤，提前致謝

   async locationStep(step) {
        // WaterfallStep always finishes with the end of the Waterfall or with another dialog; here it is a Prompt Dialog.
        // Running a prompt here means the next WaterfallStep will be run when the user's response is received.
        await this.sendIntroCard(step)
        await step.context.sendActivity("How often do you use surface on the move?")
        let acard =CardFactory.heroCard(
            " ",
            [`https://scontent.fmaa1-4.fna.fbcdn.net/v/t1.0-9/89121134_2372258766207358_5255590702309441536_n.jpg?_nc_cat=109&_nc_sid=8024bb&_nc_ohc=1cHak5WO_yoAX-VdtfO&_nc_ht=scontent.fmaa1-4.fna&oh=fd002544bc74bf53ae0185f4c192efe6&oe=5E82E09B`],
            [{  type: ActionTypes.PostBack,
                title: 'Never',
                value: 'Never'}]
       );
        let bcard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/m2DWB7m.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'Once in a while',
                value: 'Once in a while'}]
        );
        let ccard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/Kwn0FBn.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'A few days a week',
                value: 'A few days a week'}]
        );
        let dcard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/mAlW0Bv.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'Every day',
                value: 'Every day'}]
        );
        await step.context.sendActivity( {attachments:[acard,bcard,ccard,dcard],attachmentLayout: AttachmentLayoutTypes.Carousel
       });
       return await { status: DialogTurnStatus.waiting }; 
    }

Answer 1

您的問題是由您在英雄卡的標題中包含的空格引起的： " " 。 解決您的問題很簡單。 您可以使用不帶空格 ( "" ) 的實際空字符串，甚至可以完全省略標題。

編輯：如您所見，Bot Framework 將添加“Options”作為卡片的標題，如果您沒有提供，因為它使用需要標題的 Facebook Messenger 的通用模板。 Bot Framework 無能為力，您也無法繞過 Facebook 的 API 限制。 但是，如果您真的想發送帶有圖像和按鈕的卡片，那么您可以使用媒體模板。 這會很不方便，因為您需要事先上傳圖片附件，以便您可以使用此 API 獲取附件 ID： https : //developers.facebook.com/docs/messenger-platform/reference/attachment-upload-api

與其讓您的機器人每次需要使用它們時都上傳圖像，您應該能夠自己上傳每個圖像一次，然后將 ID 提供給您的機器人。 上傳附件后，您可以根據以下說明直接使用Send API或使用 Bot Framework 活動的頻道數據發送媒體模板： https : //blog.botframework.com/2017/03/28/custom-通道數據/

await step.context.sendActivity( {
    "channelData": {
        "attachment": {
            "type": "template",
            "payload": {
                "template_type": "media",
                "elements": [
                    {
                        "media_type": "image",
                        "attachment_id": "<YOUR_ATTACHMENT_ID>",
                        "buttons": [
                            {
                                "type": "postback",
                                "payload": "Never",
                                "title": "Never"
                            }
                        ]
                    },
                    // More media templates ...
                ]
            }
        }
    }
} );

由於這可能比您希望的更復雜，您可以考慮使用 Messenger 的快速回復等替代設計。