Open adrienshen opened 4 years ago
I can work with this idea. Would it be more customer centric?
@Geno117
Delivery would be a bit more complex as the driver side would also need some interface to interact with the DB to update the status progress. Not sure if drivers would be able to use FB messenger as well. Then we'll have to think about 3 pieces of UI interactions, Merchants, Drivers, and Customers. And not sure we have enough time for that. It seems to be Pickup would be simpler and maybe we can support Delivery if there's enough time left after the basics are figured out.
Yeah menus for sure as Customers have to be able to select the items they want. Perhaps in the webview. How would you integrate Promotions?
I'm not familiar with FB marketplace community. Perhaps, if there's an easy way to show the restaurants and shops on marketplace without too much extra, why not?
Pickup is kinda like reservations right? If by reserving tables, perhaps we can add it as a feature after the basic features are done.
Example of barebones Customer flow might be:
*Not sure we want to deal with actual payments even though FB has FB Pay API, we can have Customers select "Pay on pickup". Also Merchant data and food menu items can be added manually and hardcoded to save time as the main point of the demo would be to show the chat solution flow between Customers and Merchants.
Yea, it all depends on how much bandwidth we have and the time we want to invest in it. As most of us are working FT and submission is in 31 days, we'll want to scope it appropriately so all the features we want get done in time.
I'm quite alright with this flow. Would you have any reference on the architecture. From there maybe we could pick and choose the components to work on. I too feel the time constraint, However, I think it's more important to come up with something first and add the additional features if we have time later.
Hey guys,
I viewed through the earlier threads. Doing a chatbot for an F&B sounds good for a customer to order for pickup. Doing beyond may go beyond the time contraint left, and for a project demo, doing a downsized menu would be a good food for thought. I am honestly not familiar with chatbot development, but this will be a learning process on the go.
Commons SG and Starbucks have an online do order for self-collection option in their apps (if you want to check it out for better ideas):
Commons SG (Pastamania / Kraftwich) on Google Playstore & Apple: https://play.google.com/store/apps/details?id=commons.pastamania.com.commons&hl=en_SG https://apps.apple.com/sg/app/commons-sg/id1166965051
Starbucks: https://www.starbucks.com.sg/card/mobile-apps/starbucks-mobile-applications-2
I think more or less we are agreeable to this @adrienshen. I tried looking at some chatbot stuff last night and tried to familiarize myself with the process of setting up a chatbot.
Could I find out what services and software are you familliar with and which one were you thinking of using? Would you want to build an ai from scratch or use some services to for that?
Todo:
Perhaps I can look into the 4) and 3) and the apis needed. 6)business side promotion shouldn't be to hard, there are probably some web hooks or something that we could use for that
@adrienshen I have never actually deployed a chatbot but let me know where I can help. @amcali What's your experience like?
I've been in transit the last couple days, transferring to the US from London. Will have some time tomorrow to think and write about the architecture. I'm guessing you guys already took a look at the FB messenger platform APIs? https://developers.facebook.com/docs/messenger-platform/introduction/
The standard for FB messengers bots is wit.ai: https://developers.facebook.com/docs/messenger-platform/built-in-nlp
Have a look at this demo chatbot as well: https://www.messenger.com/t/OriginalCoastClothing
Can also try this chatbot out (It's what my team worked on previously for banks): https://ringgitplus.com/en/credit-card/HSBC
@Geno117 We can use the rest of the week to plan out the architecture and finally come up with a list of tasks needed to do. Then we can select from the list areas where we most feel comfortable with.
I think localization can be handled by the NLP apis from Facebook.
We can possibly integrate Payments if there's time at the end, or just fake it for the demo. There should be an option for Customers to select: "Pay on pickup", or "Facebook pay", somewhere after selecting his order and before Merchant "Accepts order"
I'm more of a generalist, I can work on backend or frontend, but slightly prefer backend and API work more. I use Python and Node for backend tasks, and React.js for web views. We can come up with a list of tasks and architecture this week and then split the work.
The basic architecture works this way:
FB Messenger sends user replies to one or more webhooks
on our backend bot APIs, the backend bot processes the message, stores data if needed in DB, and uses the Facebook Messenger Send API: https://developers.facebook.com/docs/messenger-platform/send-messages to move the dialog forward. I'll work on a set of webhook endpoints specifications tomorrow at this London hack night I'm going to.
@amcali
Thanks for the links. Those look pretty good and kind of similar to our project except we need to implement it in chat form. Perhaps you can research how those apps work, and come up with a simple Customer side chat dialog flow so we can discuss how it's going to fit together with the backend.
So to be very general, there's 4 parts the way I see it (would be great if we can get 4 devs to help with this, looks like we have 3 already :))
I was thinking we can use the rest of the week days for planning about architecture, technology stack, then come up with a list of issues TODO. Then start building this coming weekend where we have a few hours of focus.
Now that I think about it, perhaps we can't use Airtable for the Merchant UI because Merchants also need to POST status changes that then notify the Customers waiting on the Messenger app. Don't think Airtable can send POST requests in response to Merchants changing a field in a base.
I am liaising with a contact to join us, so that we have 4 devs. Chances that he is up for it are really high, and will confirm once his decision is final.
@Geno117 My (non-industrial) experience is website development, and mainly with Python and JavaScript for languages and backend. Frontend stuff has been using Bootstrap, and full-stack has been with Django. I am still a novice, and all has been learning on-the-go. My (non-programming) background experience is in F&B. Feel free to check out my repositories: https://www.github.com/amcali What are your experiences like?
@adrienshen Thanks for the links. Will check them out and work on a dialog to see how things go.
I have drafted out a simple dialog, mainly focusing on the ideal scenario of a making an order, and collecting it. There are other user type scenarios that have been initiated, but are still open/incomplete. Have a look, and any input is great for adding/amending/developing/deleting.
Feel free to let me know if there are any queries on the file available here.
Hey @amcali thanks for the work. I have a few questions. 1.while the postal code would work, I think we should try to use facebook's location api. 2.who would the agent be in this case? but nice touch
*I would like to contribute a diagram on the different scopes. Should there be anymore functions or what not? Let me know how to edit this.
I'm actually looking into the mechant ui thing at the moment. I dont mind picking that up. Any suggestions on this end let me know. would love to know if there's some service or thing out th3ere that we can plug in and use.
First, I've been traveling. Now back in the US and settled in.
@amcali I had a look at the powerpoint flow, good stuff and thanks for the initial thoughts!
I've copied the powerpoint onto Google Spreadsheets so it's easier to collaborate: https://docs.google.com/presentation/d/1JLRxJltCIiMGSP3dYxunH5CcNlaN04WaXHpHg6uxWwQ/edit?usp=sharing
Here's my thoughts and feedback:
Perhaps we can focus on the "Ordering Flow" right now, and make sure that single part works first. And there might not be enough time to develop or show too many features for the demo, although we can always add additional features if it's a product that Merchant will actually use in the future beyond the FB Hackathon.
Yes, IIRC there's a Geolocation API on FB messenger we can use with a button tap to share one's location.
Let's have the Customer choose pickup times like "In 15 minutes, In 30 minutes, In 45 minutes", or should it be based on time slots like "11:45, 13:30"? I wonder which one is easier to reason about. For me, I found that thinking that I'll be there in 30 minutes is easier to think about, but might be different for other people. @Geno117 Either way, on the Merchant side, we should use the time to help them prioritize what order to prepare first. So there could be some kind of countdown clock on the Merchant dashboard view.
Perhaps we can also simplify some of the Dialog like when "Merchant Declines", we can say something like: "Hi $FirstName, $Merchant is not available to take this order right now. Would you like to pick another place?" -> "Yes" / "No"
In general, let's try a simpler, more casual chatty tone in the dialog. Maybe something like if you were talking to your friend over coffee. Based on my experience working on finance chatbots, this is the preferable UX for chatbots as it makes the User feel more comfortable. https://www.dropbox.com/s/1bfn1mmz1ddagqy/Screenshot%202020-02-23%2013.37.26.png?dl=0
So, in a chat application, the Customer can always type a message to the Merchant at all times, so I don't think there needs to be a command/gateway specifically to talk to an agent (which I'm assuming the Merchant would be the agent as well). By default, 2 way communication is always open (even if we don't implement this in the demo)
We'll need to check how to get the Customer profile information from FB messenger API in order to call Customers by
Actually there's native functionality for receipts https://developers.facebook.com/docs/messenger-platform/send-messages/template/receipt (Here's an example Doordash receipt: https://www.dropbox.com/s/ymeefinfw8g5kq0/Screenshot%202020-02-23%2013.42.33.png?dl=0)
Alright, overall we can make the flow and dialog simpler and focus on the Ordering Flow for now. I believe the next steps might be to start mapping out the JSON templates for the bot dialogs: https://developers.facebook.com/docs/messenger-platform/send-messages/quick-replies This way the Backend API can just plug in the templates when it's ready to integrate.
We also need help with webview for chat that's not represented in dialog such as Menus. Perhaps a simple design for this and then you can code it in HTML/React
.
@Geno117
Yeah, I'm fine with you taking ownership of the Merchant UI and Merchant APIs (which seems to be mainly updating the order status, right?), I can work on the Primary Chat APIs and the Database models. Then we'll see what remaining work is left and plan for it.
Regarding overall architecture and data storage, my thoughts are similar:
REST API webhooks: https://developers.facebook.com/docs/messenger-platform/webhook
// Based on what we have so far for the dialog (ongoing refinement)
- Customers (Messenger features)
GetAvailableMerchants - gets the nearby available merchants/shops and returns list to Messenger chat
given: postalCode -> returns: List of Merchants nearby postalCode
StartOrder - initiates the ordering process, creates order row in database. Called when Customer starts chat with OrderBot
given: customerProfile
SetPickupTime - sets the pickup time
params: pickupTime(15, 30, 45)
AddMenuItems - adds menu items to the order
params: menuItemId
SendMessage - sends custom message to Merchant
ConfirmPayment - confirms payment method and completes order
params: paymentMethod
- Merchants
UpdateOrderStatus - changes order status to DECLINED, ACCEPTED, PREPARING, READY, PICKED_UP
SendMessage - sends custom message to Customer messenger app
Database storage:
Merchants {
id: PK
name: string
postalCode: string
address: string
description: string
created_at: Timestamp
}
Customers {
id: PK
name: string
created_at: Timestamp
}
MenuItems {
id: PK
merchantId: ForeignKey
name: string
description: string
price: integer in cents
}
Receipts {
id: PK
order_id: FK
payment_method: string
subtotal: integer in cents
tax: integer in cents
total: integer in cents
created_at: Timestamp
}
Orders {
id: PK
customer_id: FK
merchant_id: FK
line_items: ListOf(MenuItems); JSON ARRAY
status: Status(declined, accepted, preparing, ready, picked_up)
pickup_in: integer
created_at: Timestamp
}
Promos {}: Should the promo be applied to Merchant as a whole or to individual food items? I'm guessing the easiest would be a discount applied on the entire Merchant. Perhaps you can help fill in how this works and the columns needed.
Payment{}: If we accept internet payments, we'll need another table to store this, however I don't think it's necessary since there's no real merchants using it right now.
I try to keep things as simple as possible to just support the basic functions of the ordering system. If there's something more we need to add or something we can remove, let me know. We just want to keep the bare essentials as we're limited on development time.
Perhaps, I should start a Dropbox Paper document or Notions to keep all this in one place.
I can start putting up the boilerplate code for the API and web views. Next to decide would be the technical stack. Any objections to an all Javascript stack with Express.js, PostgreSQL and React.js(Frontend)? Was thinking this would be the fastest since most devs knows JS. I'm also familiar with Python and Django as well.
@Geno117 @amcali We have a general idea of all the tasks and scope of the project now. We can start creating issues (Tasks) in this repo and further discuss in individual issue threads. I'll start creating the obvious ones first.
I updated the project repo with the starter code and the basic data models.
@adrienshen - Welcome back to the US!
@Geno117 & @adrienshen - Thanks for the mention on the Geolocation API on FB Messenger. Will check it out.
I am ok to go ahead with all Javascript stack with Express.js, PostgreSQL and React.js(Frontend). I have minimal experience with PostgreSQL and React.js, and no experience with Express.js. But no worries, I will pick up along the way. At this point, I don't mind what I work on, but first I will check out the project repo first, and be in touch again.
Hello guys, I am interested in joining you guys! I have just caught up with this thread, really like the whole idea!
My background is mainly with backend development but am open to contribute to any frontend dev if needed! Will try to pickup some tasks and start working on it by Wed/Thu.
@amcali Cool, reach out if you have any issues running on localhost.
@KHvic Sure, we can still use the help. Any tasks or areas you might be more interested in?
@amcali Cool, reach out if you have any issues running on localhost.
@KHvic Sure, we can still use the help. Any tasks or areas you might be more interested in?
I am interested in helping out with backend apis like handling webhooks, any tasks to recommend?
@KHvic Perhaps you can look into FB Geolocation->getting nearest shops->response flow
We need to know how this process will work. Any 3rd party APIs GMaps, Foursquare necessary?
I imagine it'll be something like get geolocation
from user, lookup database table for geolocation within X distance, and return the list. I wonder if PostgreSQL has this capability built in. Or there might be an extension to process geo data. Otherwise Google Maps also have APIs for this.
@adrienshen Sure, I will look this up. Basically a backend API/service for returning list of restaurants near a coordinate. Guess we will also need to return a menu for the restaurant? (should these be hardcoded in the database) I think we could also just write a SQL statement to compute the euclidean distance within x distance for simplicity.
BTW, we only have 2~ weeks left to complete everything
@amcali Cool, reach out if you have any issues running on localhost.
@KHvic Sure, we can still use the help. Any tasks or areas you might be more interested in?
So far it seems like I managed to setup and have the repository running on local host. I am checking out how to do a simple chatbot with messenger first, and then see how to work things out from there to get the front end up with the basic dialog needed to do the ordering.
For now, I have tried to reach out to the team at Deliveroo & another aggregator via email to see if they are willing to provide any API to get restaurants and menu. (hopefully)
Am planning to go ahead with using this API now: https://developers.zomato.com/api Seems like it works with geolocation, can get menus and restaurants!
Hi I'm John,
Arwa referred me to your team and I am interested in joining. How can I help?
@johnbenedictyan We're just starting, so.. pretty much everything!
What areas have you worked in the past?
One thing we will eventually need is to render the Receipt from our database when Customer confirms order. We'll probably need to render HTML, style it with some CSS. The route would be something like this: /receipts/<id>
. Then both Customer (messenger), and Merchants need access to this route. https://github.com/adrienshen/facebook-bizchat-hackathon/issues/8
You can also look at the issues list on what needs to be implemented.
@amcali Hey, since you're setting up the Chatbot messenger already. Would be great if you could grab the Messenger TOKENs for us. I haven't used FB for awhile and don't have a developer account there any more. Make sure you don't post it here though since this repo is public, pass it in some secret way!
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
@KHvic
Cool, we can discuss more here about that Stores data and geolocation. #12
@johnbenedictyan We're just starting, so.. pretty much everything!
What areas have you worked in the past?
One thing we will eventually need is to render the Receipt from our database when Customer confirms order. We'll probably need to render HTML, style it with some CSS. The route would be something like this:
/receipts/<id>
. Then both Customer (messenger), and Merchants need access to this route. #8You can also look at the issues list on what needs to be implemented.
I've work with full stack development, django, js, sql and non-sql database.
I have not work with react much but I'm looking into it.
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
Maybe we should have a tasking system?
@johnbenedictyan We have list of task here: https://github.com/adrienshen/facebook-bizchat-hackathon/issues
Great! FS development should come in handy in this project.
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
If everyone's ok with a real-time live chat tool, it would be great to probably move to that instead.
The threads opened for the tasks are useful when diving into specific areas imo..
@amcali Hey, since you're setting up the Chatbot messenger already. Would be great if you could grab the Messenger TOKENs for us. I haven't used FB for awhile and don't have a developer account there any more. Make sure you don't post it here though since this repo is public, pass it in some secret way!
@adrienshen Ok, i'll work on the token part. I am still working on how to get the chatbot setup, which is still a case of R&D with online resources.
Btw, (sorry for stupid questions as I'm still picking up stuff), will also i need to create a heroku account to generate the URL we will use for launching the chatbot?
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
If everyone's ok with a real-time live chat tool, it would be great to probably move to that instead.
The threads opened for the tasks are useful when diving into specific areas imo..
I think a slack group would be a good idea.
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
If everyone's ok with a real-time live chat tool, it would be great to probably move to that instead. The threads opened for the tasks are useful when diving into specific areas imo..
I think a slack group would be a good idea.
I would propose a telegram or WhatsApp group for speedier communication since we are only 2weeks left.
Also @team, do you think we need a more real-time live chat tool or this issue thread will be fine to collaborate for now?
If everyone's ok with a real-time live chat tool, it would be great to probably move to that instead. The threads opened for the tasks are useful when diving into specific areas imo..
I think a slack group would be a good idea.
I would propose a telegram or WhatsApp group for speedier communication since we are only 2weeks left.
Sure I am okay with that.
I'm good for Telegram as well. Does someone want to start that?
I think we should keep feature and code related chat on here and the focused issue to keep it documented. And Telegram can be used to casual chat, scheduling, and to get someone's attention.
Anyone working on Webview menus? https://github.com/adrienshen/facebook-bizchat-hackathon/issues/15
Anyone working on Webview menus? #15
I can work on it.
I'm good for Telegram as well. Does someone want to start that?
I think we should keep feature and code related chat on here and the focused issue to keep it documented. And Telegram can be used to casual chat, scheduling, and to get someone's attention.
Telegram group chat done: https://t.me/joinchat/OJH4aBOe-MH_xaSggg-l8g
@amcali Hey, no worries. I can set up the Heroku account since that's going to be more involved with infrastructure and CI. And if you're having any problems with setting up with FB account, just let me know and I can help out with that as well! Here's the documentation: https://developers.facebook.com/docs/messenger-platform/getting-started/app-setup
And you can also use Ngrok to expose the local app to the public if you need to test something with FB.
What I'll do right now is setup the initial webhook entry points so we can get the Messenger <-> App comm. implemented.
@adrienshen feel free to assign new tasks to me if there is anything else for me to help out with.
@amcali I added some boilerplate for the Messenger dialogs. We can work and hash out the details in your PR: https://github.com/adrienshen/facebook-bizchat-hackathon/commit/997fcd06efdfaeb4cc6672c28a4c77906039eab9
Here are the sub issues related to what you're already working on: https://github.com/adrienshen/facebook-bizchat-hackathon/issues/7, https://github.com/adrienshen/facebook-bizchat-hackathon/issues/5
@KHvic Sure, I'll look at the remaining tasks and get back to you!
@KHvic Let's hash out the details on this one when you're free https://github.com/adrienshen/facebook-bizchat-hackathon/issues/19
@adrienshen leave it to me, will raise a PR up soon
If anyone needs any help with something, let me know!
I'm going to apply with all of us for the registration. And look into Stripe Payments.
@amcali Staging is deployed here: https://yumchat.herokuapp.com You can add that as the webhook and test it out!
Have you set up the Facebook page yet? How do we access the Messenger Bot?
@amcali Staging is deployed here: https://yumchat.herokuapp.com You can add that as the webhook and test it out!
Have you set up the Facebook page yet? How do we access the Messenger Bot?
I am still facing issues setting up the messenger bot due to the URL callback, and am trying to figure it out.
The FB page linked to the messenger bot, but needs working on. the link to it is here: https://www.facebook.com/Collect-At-Ease-107931404152786
@amcali The webhook already works. I tested it out using CURL. We just need to branch out into our app logic now and respond with appropriate dialog.
@KHvic I'm currently making some changes to the Orders API so we get data like this:
'0fc6535a-0700-4926-8504-76c8b1c24fb4': {
order_id: 1,
order_uuid: '0fc6535a-0700-4926-8504-76c8b1c24fb4',
merchant_id: 3,
customer_id: 1,
confirmed_at: 2020-03-07T20:37:23.758Z,
created_at: 2020-03-09T20:32:23.758Z,
status: 'started',
line_item_id: 1,
comments: '',
quantity: 2,
menu_item_id: 4,
menu_item_name: 'Wonton Soup Sm.',
menu_item_description: '',
price_cents: '195',
lineItems: [ [Object], [Object] ]
},
'0fc6535b-0700-4926-8504-76c8b1c24fb4': {
order_id: 2,
order_uuid: '0fc6535b-0700-4926-8504-76c8b1c24fb4',
merchant_id: 3,
customer_id: 2,
confirmed_at: 2020-03-07T20:37:23.758Z,
created_at: 2020-03-07T20:32:23.758Z,
status: 'started',
line_item_id: 3,
comments: 'Add ketchup',
quantity: 5,
menu_item_id: 4,
menu_item_name: 'Wonton Soup Sm.',
menu_item_description: '',
price_cents: '195',
lineItems: [ [Object] ]
}
}
@amcali The webhook already works. I tested it out using CURL. We just need to branch out into our app logic now and respond with appropriate dialog.
i just managed to set up the messenger chatbot URL callback successfully! Now to work on the dialog
Good to hear! LMK me or @KHvic know if you need any help with that.
I have a question about the flow of the ordering process.
After the user gives his/her location and a list of nearby merchants is returned, Does the user then click on a specific merchant to open up that merchant's menu in a web view?
Or does clicking on a specific merchant send an additional prompt, like for example, "Good choice!" with another button with the label 'View Menu' which will then open up the web view.
https://fbmessaging1.devpost.com
The theme for the hackathon is "Empower business conversations"
We can throw up some ideas here and vote on the most sensible one to build
First idea:
Conversational commerce is an area close to my work. I've build chatbots for finance and bank loan purposes before in Singapore. Since many of us are in Singapore I thought one idea would be to build a messenger chatbot to help local F&B business take orders for pickup. The ordering interface can be from FB messenger, and F&B merchants would see it in a web page interface. To keep it simple, it can be just a Airtable or Google Spreadsheet for demo purposes. If we have the bandwidth, then an actual web app UI would be preferable. Payments can be mocked for the demo or customers can select to pay when picking up the order.