Upload
howard-chang
View
474
Download
10
Embed Size (px)
Citation preview
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
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