Messenger Platform

2016 12/25 Howard Chang

Howard Chang

Her/Him & Her/Her

(now) ucfunnel developer

(was) Dcard Intern

(was) Codementor Intern

Her/Herm.me/getHerHer

Her/Himm.me/getHerHim

http://m.me/getHerHerhttp://m.me/getHerHim

Node.js

MongoDB for Data Storage

Redis for cache / session / message queue

Messenger Platform API and facebook-chat-api

Test on Heroku

Production on GCE ( moving to AWS soon )

Her/Him Facebook Messenger Platform

Get Started

Get Started

Get Started

URL Button for Webview

URL Button

Get Started

Full page WebView

URL ButtonWebview

Get Started

Login With Facebook

URL Button

Webview

Facebook Login

Get Started

PS_ID FB_ID

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Get Started

Messenger Platform Send API

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Send API

Get Started

Persistent Menu

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuSend API

Get Started

Messenger Platform Send API

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuSend API

Get Started

Messenger Platform Quick Reply

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuQuick Reply

Send API

Get Started

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuQuick Reply

Send API

Get Started

Messenger Platform Postback button

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuQuick Reply

Send API

Postback button

Get Started

Emoji

URL ButtonWebview

Facebook Login

PS_ID FB_ID

Persistent MenuQuick Reply

Send API

Postback button Emoji

Get Started

URL ButtonWebview

Facebook LoginPersistent Menu

Quick ReplySend API

Postback button Emoji

Emoji

PS_ID FB_ID

Profile page URL

PS_ID FB_ID

Profile page URL

Get StartedURL ButtonWebview

Facebook LoginPersistent Menu

Quick ReplySend API

Postback button Emoji

Profile page URL

Messenger Platform Share button

PS_ID FB_ID

Share button

Get StartedURL Button

WebviewFacebook LoginPersistent Menu

Quick ReplySend API

Postback button Emoji

Profile page URL

Messenger Platform Share button

PS_ID FB_ID

Share button

Get StartedURL Button

WebviewFacebook LoginPersistent Menu

Quick ReplySend API

Postback button Emoji

Profile page URL

Messenger Platform Share button

PS_ID FB_ID

Share button

Get StartedURL Button

WebviewFacebook LoginPersistent Menu

Quick ReplySend API

Postback button Emoji

Profile page URL

PS_ID FB_ID

Profile page URL

PS_ID FB_ID

PS_ID FB_ID

PS_ID FB_ID

PS_ID

PS_ID FB_ID

FB_IDPS_ID

PS_ID FB_ID

Facebook id Chatbot

PS_ID FB_ID

PS_ID User Profile API

1. first_name 2. last_name 3. profile_pic 4. locale 5. timezone 6. gender

Web view

URL PSID FB login PSID

https://herhim.co/login/

URL

URL button

URL button

URL PS_ID

Webview

Webview

Facebook OAuth

OAuth callback URL https://herhim.co/fb/cb/

OAuth URL PS_ID

request body FB_ID

OAuth callback URL https://herhim.co/fb/cb/

Webview

Facebook OAuth

Server

Profile page URL

https://www.facebook.com/

PS_ID & FB_ID linking

Profile page URL

PS_ID FB_ID

facebook-chat-api

https://github.com/Schmavery/facebook-chat-api

https://github.com/Schmavery/facebook-chat-api

NPM module

Messenger Platform Chatbot

facebook-chat-api

Messenger Platform Webhook facebook-chat-api

pages

Facebook

ID

facebook-chat-api FB_ID PS_ID

Messenger Platform Webhook facebook-chat-api

{

"message":{ "mid":"mid.1457764197618:41d102a3e1ae206a38", "text":"hello, world!", } }

{

senderID: 100012106154442, // THIS IS FB ID body: 'hello, world!', messageID: 'mid.1457764197618:41d102a3e1ae206a38', }

pages

Redis Message Queue IPC Webhook facebook-chat-api facebook-chat-api

facebook-chat-api

facebook-chat-api

//

https://www.facebook.com/how2945ard https://tw.linkedin.com/in/chhowardchang

https://www.facebook.com/how2945ardhttps://tw.linkedin.com/in/chhowardchang