2017年4月22日 星期六

[Chatbot] Create chatbot with MS Bot framework

 ChatBot      Microsoft Bot framework      facebook



Introduction


In this article, we are going to use Microsoft Bot Framework to create a Facebook Messager chatbot.

There are 3 steps to do before we implement our messaging endpoint.

3.  Register a Bot

I will skip the first and second steps and start from the third step.


Related articles


Environment

Facebook API v2.3
MS Bot Framework v3.0
Visual Studio 2017
Bot Framework Channel Emulator
Azure App service



Register a bot


and click [Register a bot]

Notice that Bot handle cannot be modified once registered.


Bot profile




Bot advanced setting

Let’s skip Messaging endpoint now cus we have not create any application to handle the message.

Click [Create Microsoft App ID and password] to create the ID and PASSWORD of our Bot App.





Now we get the App ID, which is aka Microsoft App Id.




And our App PASSWORD, which is aka Microsoft App Password.



Important! Please write down the Microsoft App Id and Microsoft App Password for later configuration in our Messaging endpoint application.




Click [Register] to create the new Bot.




Enable Facebook Messenger channel

By default, the channels already include Skype and Web Chat. In this sample, we would like to talk with bot thru Facebook Messenger.
Click [Add] next to Facebook Messenger to put it into channels.





Then click [Edit].




Setup Facebook Messenger channel

Okay, here come the most complicated steps.

1.  Go to facebook for developers and choose your APP.
2.  Get the Facebook APP ID/Secret, Page ID/Access token for later use

The Facebook APP ID and Secret can be got from the main dashboard.



Open a new browser page and go to your Facebook Page. Open [View Source] and search the following word:

“pageID” :  Page ID, which also can be found on the Facebook Page url.
“pageAccessToken” : Page Access token.

PS. Another way to get the Page Access token is go to the sheet: Messenger, and use the [Token Generation].




Back to MS Bot Framework: Configure Facebook Messenger
Paste the above information to the below settings.



And click [Resubmit] to validate the credentials and save the configuration.


3.  Enable Facebook Messenger:

Select [Messenger]



Go to Webhooks and click [Edit events]
Make the following options checked.

u  messages
u  messaging_postbacks
u  messaging_optins
u  messaging_deliveries
u  messaging_account_linking




4.  Webhooks

The final step, back to MS Bot Framework: Configure Facebook Messenger.
In Configure webhook callback url and verify token, copy the following callback url and token.



Paste them to the following place on facebook for developer.






It’s done, let’s start implement our Messaging endpoint.



Implement


Create a ASP.NET Web API (.NET Framework) project




Install package

Download and install Microsoft.Bot.Connector.


Install Bot Emulator

Download and install Bot Framework Emulator

For more information, go to docs.botframework.com.


Set Authentication

Copy your Microsoft App Id and Microsoft App Password which we got in the previous step and add them into the appSettings.

Web.config

<appSettings>
    <add key="MicrosoftAppId" value="XXXX" />
    <add key="MicrosoftAppPassword" value="YYY" />
  </appSettings>


ApiController

In the ApiController, add the following attribute to enable authentication validation.

[BotAuthentication]
public class MsgController : ApiController
{
}


Start implementing the Messaging endpoint

The following sample code is for replying simple message from the Bot.

ApiController

[HttpPost]
[Route("api/Msg/Hook/")]
public async Task<HttpResponseMessage> Hook([FromBody]Activity activity)
{
            var connector = new ConnectorClient(new Uri(activity.ServiceUrl));

            Activity reply = null;

            if (activity.Type == ActivityTypes.Message)
            {
                var length = activity.Text.Length;
                reply = activity.CreateReply($"You sent {activity.Text} which was {length} characters");
            }
            else
            {
                reply = activity.CreateReply("....");
            }

            await connector.Conversations.ReplyToActivityAsync(reply);
            var response = new HttpResponseMessage(HttpStatusCode.OK);
            return response;

}


Test

Let’s talk to the Bot by Bot Framework Emulator to see if our Messaging endpoint is okay or not.

Click on the left top panel to open the settings of local endpoint url and Microsoft App ID and Microsoft App Password. Fill them and click [CONNECT].



You will see the following log if everything is fine.




Now you can talk to your Bot.




Deploy to Cloud (Azure for example)

Now we can deploy our Messaging endpoint application to Azure.

After the deploy is done, go back to Microsoft Bot Framework website and set the Messaging endpoint url.




Now click [Message Us], let’s talk to the bot online!




Demo





Reference





沒有留言:

張貼留言