Weather Bot Meets Facebook Messenger!

Bot on Facebook Messenger

• Chatbot App ---- (Send & Receive API) --- Facebook Messenger ----> User Interface (phone,laptop, etc);

Process

1. Create a Facebook Page
2. Create a Facebook App
3. Add the Messenger Platform to the app
4. Code your chatbot / use as a service
5. Link your chatbot app to the Messenger platform using webhooks.
6. Test and Train
7. Submit for Review

Express Server

• Weather Bot (Server Instance) <------------> Facebook Messenger.
• The bot requires a server instance to interact with the facebook messenger.
• FBeamer - It is the interface being built for the Facebook Messenger platform.

Create a Facebook App

• Facebook App -> My Apps -> Create a New App.
• Product Dashboard - Messenger - setup.
  • Page Access Token
    • Token Generation -> Select a page - Authorise access.
    • Token is generated.
  • Verify Token (Register chatbot API on the Messenger platform)
    • webhooks are urls that accept get and post requests.
    • Verify Token Generation
      • In cmd
        • node
        • require('crypto').randomBytes(24).toString('hex')

FBeamer

• Register Webhooks
• Receive Messages from Messanger
• Send text Messages
• Send Image Messages

Registering Webhook b/w FB and Bot

• Messenger [Register Webhook] --Get ---(mode - 'subscribe', verifytoken, challenge) ---> Bot [Receiver/send challenge] --- challenge --> Messenger.
• The interaction between Messenger and Bot requires a webhook to be accessible over a HTTPS connection.
• Inorder to setup HTTPS service locally require NGROK.

Messenger --- (https://something.ngrok.io) -----ngrok----- (http://localhost:3000) -----[webhook]-----> chatbot (local nodejs app).

• Start the ngrok -> http 3000
• In the facebook developers app - setup the webhook.
  • Webhook - setup webhook
  • Paste the ngrok url in the Callback URL.
  • Verify Token - copy the created one.
  • Subscription Fields - messages.
  • verify -> main page - complete.
  • cmd -> nodemon - "webhook registered".

Verifying and Validating Payload

• Messenger --[POST]------------>(FBeamer) Chatbot.
• FBeamer must verify the payload signature.
• The Message
  • Header | x-hub signature.
  • SHA1 equivalent of the payload with the APP Secret as Key.
  • If we take the payload data and generate a SHA1 equivalent using the APP secret that facebook provides it must be the same as X-Hub-Signature.
• App Secret - facebook.developer.com -> APP -> Settings -> Basic -> App Secret.
• Signature of the request header must match the hash of the app secret.

Incoming Message

• Write the code.
• In developers facebook app - Webhooks -> select the Page - Subscribe.

Deploying in Heroku Cloud

• URL -> Heroku;
• Create a free account -> go to the dashboard.
• Install the Heroku CLI for windows.
• URL -> Heroku CLI
• While Deploying on Heroku
  • package.json file -> remove the main key, mention the exact node version.
  • invoke the start, engine -> node engine.
  • delete app.js file as it not necesary.
  • create .gitignore file.
    • node_modules
    • config/development.json
  • Ensure to have git install.
    • In cmd -> git init
• Login in to the heroku account from the cmd
  • heroku login
  • email id, password
  • git add , git commit, git push heroku master
• Heroku offers cloud computing
  • heroku create
  • an app is created and a https link is also provided.
  • In the facebook developers page -> Webhooks
    • Edit Subsciption -> the https link, verify token.
• Back to the Heroku Dashborad -> settings
  • reveal config var -> define the key values.
• Test the chatbot of Facebook.
  • In case it doesn't work.
    • messenger - settings - [webhook]
    • select the page.
    • unsubscribe and then subscribe it.

Making an APP public on Facebook / Approval Process

• URL -> Facebook.developers.com
• App Review :
  • Face developers page
  • Messenger - settings - bottom part - review.
  • Click on Add to submission - show the required actions.
  • privacy policy - iubenda.
  • provide examples and complete the approval process.
  • On approval, click the slide -> turn on the chat bot and make it publically available.
• Tester - add ppl to test the chatbot.