search

adrienshen / eggroll-pos

Modern POS for Quick-Serve Restaurants in Typescript and React
https://eggrollpos.com
5 stars 8 forks source link

General Discussion #1

Open adrienshen opened 4 years ago

adrienshen commented 4 years ago

https://fbmessaging1.devpost.com

The theme for the hackathon is "Empower business conversations"

Main Requirement: Empower business conversations using Facebook Messenger by building innovative solutions for conversational commerce, customer service, workplace collaboration and more.

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.

KHvic commented 4 years ago

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.

Previous discussion we had below, let's keep it simple and keep to the one that is easier to be implemented for you. (first option)

Re: "ordering food" After showing the list of nearby shops, Customer will select, and we will render a webview menu of the select Merchant to show the MenuItems. Then any selected items gets added to the Order's LineItems. I think someone is already working on the Menu Webview for the Messenger app. But if not, perhaps you can after we figure out the Merchant data integration.

KHvic commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

amcali commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens?

by the way, will it be possible if i can add you as one of the messenger chatbot developers?

KHvic commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens?

by the way, will it be possible if i can add you as one of the messenger chatbot developers?

I think it will be great if you could go through this & run the example app locally before coding?:

Afterward, let's start coding in our codebase (main goal is to trigger sending of message) (note let's finish only sending of the message and ignore integration with the existing webhook api):

  1. setup for environment for dotenv used by graphAPI
  2. afterwards, sample the code that handle and sends the message:

how to test if everything works?

  1. run the app locally
  2. put console.log to check which part of the code is running successfully
  3. trigger your sendMessage() by putting it somewhere in server/index.js, it should use GraphAPI to send something
adrienshen commented 4 years ago

@johnbenedictyan

I don't have a strong preference at this moment on how the dialog should flow. So perhaps, we can build what we know we'll need first which is the Webview for Store Menus. The dialog and how it fits in, we can ask @amcali and @KHvic as they're working on the Chatbot responses.

So for the Menu, we know that the Messenger will open it up via a url route like this: doman.com/menus/$merchantId. So we can implement this menu in the React Router routes. You will use the $merchantId to fetch from the Express API to get the MenuItems.

As for the triggering mechanism, I'm not sure exactly, but it might be from the Backend response API. Someone can look into this.

I'll work on the API to return the Menus for the Merchant. Will have a general template of the JSON data for you to work with in a few hours. It'll be similar to the MenuItems schema, unless you need something very different.

@KHvic Thanks for helping out @amcali with the Chatbot integration! Really appreciate it.

Just in case someone doesn't know yet. We do have staging deployed on Heroku: https://yumchat.herokuapp.com which will take messages from Messenger. Anything merged to Master will automatically be deployed here.

Perhaps, if we have some extra time, we can also think about what cool NLP features would make the ordering experience better as part of the dialog. It's relatively easy to integrate with Facebook wit.ai: https://developers.facebook.com/docs/messenger-platform/built-in-nlp

adrienshen commented 4 years ago

I will get the basic features and minimal stylings of the Merchant Dashboard out. https://www.dropbox.com/s/ras70tch2wsn3ub/Screenshot%202020-03-08%2013.00.45.png?dl=0

adrienshen commented 4 years ago

Eventually, after the launch. It would be neat to have a CMS system so that Merchants can customize their own dialog templates. What they want to say to their Customers. It'll be ground breaking feature for Merchants and I've not seen this before in any product.

amcali commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens? by the way, will it be possible if i can add you as one of the messenger chatbot developers?

I think it will be great if you could go through this & run the example app locally before coding?:

Afterward, let's start coding in our codebase (main goal is to trigger sending of message) (note let's finish only sending of the message and ignore integration with the existing webhook api):

  1. setup for environment for dotenv used by graphAPI
  1. afterwards, sample the code that handle and sends the message:

how to test if everything works?

  1. run the app locally
  2. put console.log to check which part of the code is running successfully
  3. trigger your sendMessage() by putting it somewhere in server/index.js, it should use GraphAPI to send something

@KHvic - thank you for the resources. I am still facing issues with setting up the example app. Will highlight if am still not getting anywhere with it.

I am really behind atm, but hope that if i can get the example to work out, it would speed up things from thereon.

amcali commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens? by the way, will it be possible if i can add you as one of the messenger chatbot developers?

I think it will be great if you could go through this & run the example app locally before coding?:

Afterward, let's start coding in our codebase (main goal is to trigger sending of message) (note let's finish only sending of the message and ignore integration with the existing webhook api):

  1. setup for environment for dotenv used by graphAPI
  1. afterwards, sample the code that handle and sends the message:

how to test if everything works?

  1. run the app locally
  2. put console.log to check which part of the code is running successfully
  3. trigger your sendMessage() by putting it somewhere in server/index.js, it should use GraphAPI to send something

@KHvic - thank you for the resources. I am still facing issues with setting up the example app. Will highlight if am still not getting anywhere with it.

I am really behind atm, but hope that if i can get the example to work out, it would speed up things from thereon.

I'm still at square one and not getting anywhere with the example app. Not sure what part of it i am missing. I received a message when I tried running the example messenger app locally:

$ node app.js Your app is listening on port 3000 Is this the first time running? Make sure to set the both the Messenger profile, persona and webhook by visiting: https://localhost:3000/profile?mode=all&verify_token=token Test your app by messaging: https://m.me/104776931145647

amcali commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens? by the way, will it be possible if i can add you as one of the messenger chatbot developers?

I think it will be great if you could go through this & run the example app locally before coding?:

Afterward, let's start coding in our codebase (main goal is to trigger sending of message) (note let's finish only sending of the message and ignore integration with the existing webhook api):

  1. setup for environment for dotenv used by graphAPI
  1. afterwards, sample the code that handle and sends the message:

how to test if everything works?

  1. run the app locally
  2. put console.log to check which part of the code is running successfully
  3. trigger your sendMessage() by putting it somewhere in server/index.js, it should use GraphAPI to send something

@KHvic - thank you for the resources. I am still facing issues with setting up the example app. Will highlight if am still not getting anywhere with it. I am really behind atm, but hope that if i can get the example to work out, it would speed up things from thereon.

I'm still at square one and not getting anywhere with the example app. Not sure what part of it i am missing. I received a message when I tried running the example messenger app locally: $ node app.js Your app is listening on port 3000 Is this the first time running? Make sure to set the both the Messenger profile, persona and webhook by visiting: https://localhost:3000/profile?mode=all&verify_token=token Test your app by messaging: https://m.me/104776931145647

I didn't have any problem running the example... please follow the first link step by step without missing anything

The message implies that you are already running the app successfully. However, I hope you have at least understand how to set it up now that you have gotten the app running.

make sure you have done the local tunnel part & then test the app by sending a message at https://m.me/104776931145647, you should get a webhook event

seems like you are almost there for the example, hopefully you don't give up!

When i send a message to the https://m.me/104776931145647 , nothing comes back. I am guessing that is the way that the example app is meant to run without setting any Callback URL. Two issues are coming up, which I am still trying to figure out:

  1. I can't seem to set up call back URL as my localhost address.

  2. When i tried out what i did in the example app set up on our actual project (with a separate messenger chatbot i setted up for testing), i didn't receive any URL like what the example app gave me (ie, https://m.me/104776931145647).

Still figuring it out, as time left keeps running..

amcali commented 4 years ago

@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!

@amcali Have you gotten the required tokens yet?

@KHvic , seems I have only one access token which I passed to @adrienshen . Not sure if i am i meant to be generating multiple tokens? by the way, will it be possible if i can add you as one of the messenger chatbot developers?

I think it will be great if you could go through this & run the example app locally before coding?:

Afterward, let's start coding in our codebase (main goal is to trigger sending of message) (note let's finish only sending of the message and ignore integration with the existing webhook api):

  1. setup for environment for dotenv used by graphAPI
  1. afterwards, sample the code that handle and sends the message:

how to test if everything works?

  1. run the app locally
  2. put console.log to check which part of the code is running successfully
  3. trigger your sendMessage() by putting it somewhere in server/index.js, it should use GraphAPI to send something

@KHvic - thank you for the resources. I am still facing issues with setting up the example app. Will highlight if am still not getting anywhere with it. I am really behind atm, but hope that if i can get the example to work out, it would speed up things from thereon.

I'm still at square one and not getting anywhere with the example app. Not sure what part of it i am missing. I received a message when I tried running the example messenger app locally: $ node app.js Your app is listening on port 3000 Is this the first time running? Make sure to set the both the Messenger profile, persona and webhook by visiting: https://localhost:3000/profile?mode=all&verify_token=token Test your app by messaging: https://m.me/104776931145647

I didn't have any problem running the example... please follow the first link step by step without missing anything The message implies that you are already running the app successfully. However, I hope you have at least understand how to set it up now that you have gotten the app running. make sure you have done the local tunnel part & then test the app by sending a message at https://m.me/104776931145647, you should get a webhook event seems like you are almost there for the example, hopefully you don't give up!

When i send a message to the https://m.me/104776931145647 , nothing comes back. I am guessing that is the way that the example app is meant to run without setting any Callback URL. Two issues are coming up, which I am still trying to figure out:

  1. I can't seem to set up call back URL as my localhost address.
  2. When i tried out what i did in the example app set up on our actual project (with a separate messenger chatbot i setted up for testing), i didn't receive any URL like what the example app gave me (ie, https://m.me/104776931145647).

Still figuring it out, as time left keeps running..

  • Have you followed the instruction to set up local tunneling and added app_url that you have gotten?
  1. as above
  2. ... that's your page id in env, you have set up yourself. (like how you set up the demo..._

please remain calm, I can understand that you aren't a professional dev, so it's normal to struggle.

I followed the instructions to set up local tunnelling, and realised that there is no app_url being returned. Checking on that..

Geno117 commented 4 years ago

Hey guys I was wondering if you would be willing to do a online session (discord or otherwise). Maybe to solve some problems and get things mvoing faster. understand most of us have 9 to 5 or maybe overseas. However it might help us get us to speed? Would you guys be willing and does this seem useful?

Let me know availabilitiy to and what platforms you prefer

adrienshen commented 4 years ago

@amcali @KHvic @Geno117 @johnbenedictyan

Hey guys. Nice to see there's still process going on here. I can come online for a chat tonight or tomorrow to see where things are right now and what's still needed. Zoom.us would be preferable as there's capabilities for screen share and more.