Twilio Barista

About

Twilio Barista is an application that allows you to solve the problem of long queues at barista stands at events. Attendees can order their coffee via various Twilio-powered channels, baristas get all orders on a website that can be loaded via a tablet and once an order is done the attendee will be notified via the system to come and pick it up. No more queueing and efficient coffee ☕️ ordering! 🎉

If you want to learn more about how this has been built, check out the following blog posts:

• Serving Coffee with Twilio Programmable SMS and React
• Building an Intelligent Coffee Order System with Twilio Autopilot

Different versions of this system have been used at events such as:

• NDC Oslo 2016, 2017
• CSSConf EU && JSConf EU 2017

You can find previous versions or implementations in other languages here:

.NET	Node.js v1	Ruby	"Lite" with React

More information on how it works is in the documentation.

Features

• Receive orders using Twilio Messaging
• Store orders and real-time synchronization them between back-end and front-end using Twilio Sync
• Easy dynamic application configuration using Twilio Sync
• Dynamic phone number acquisition/configuration using the Twilio REST API
• Managing message threads using Twilio Conversations
• Permission management based on Twilio Sync
• Top PWA support thanks to Preact CLI based front-end
• Easy way to reset the application from the admin interface
• Query for location in the queue as well as canceling the order as a user

Channels

The current Twilio Channels are:

• SMS

Setup

Requirements

• Node.js version 9.8 or higher
• npm
• A Twilio account - Sign up here

Twilio Configuration

0. Know your Twilio Account SID

Retrieve your Twilio Account SID from the Twilio Console.

1. Generate a Twilio API Key and Secret

Go into the Twilio Console and generate an API Key and Secret. Make sure to store the information safely.

3. Create a Conversations Service

Create a Conversations Service in the Twilio Console and save the service SID for step 2. In the Messaging Service, the Handle Inbound Messages with Conversations option should be toggled to Unlocked.

3. Create a Messaging Service

Create a Messaging Service in the Twilio Console and save the service SID for step 2.

Further, make sure that the "Integration" section has the option Autocreate a Conversation selected.

4. Create a Sync Service

Create a Sync Service in the Twilio Console, check the "ACL Enabled" enabled box, and store the SID.

Deploy via Heroku

Simply click the button below, add the respective configuration values.

Go afterwards in the /admin section and click the Setup button. This will configure everything for you and you are ready to add phone numbers for the service.

Manual

1. Clone project and install dependencies

git clone git@github.com:twilio-labs/twilio-barista.git
cd twilio-barista
npm install

2. Configure environment variables

The following environment variables are necessary for Twilio Barista:

• TWILIO_ACCOUNT_SID
• TWILIO_API_KEY
• TWILIO_API_SECRET
• TWILIO_MESSAGING_SERVICE
• TWILIO_SYNC_SERVICE
• TWILIO_CONVERSATIONS_SERVICE
• PHONE_NUMBER_HASHING_SECRET - This will be used to generate internal identities based on the phone number
• LOGINS - Semi-colon separated list based on the following schema: username,password,role. Available roles are:
  • barista - Enables you to see all orders but nothing else
  • admin - Can see and write all data
• PORT - Optional. By default it will run on port 3000

a) For development

Copy the .env.example file into a .env file. And set the respective values in the file.

b) For production

Set the environment variables based on your operating system or hosting provider.

3. Initially build your front-end

After you cloned the project and installed the dependencies, you have to do an intial build of the front-end. Run the following command to do so:

npm run build

4. Start up server

a) Automatic detection of environment

npm start

If NODE_ENV is set to production the server will automatically start in production mode else it will load the .env file for the variables using node-env-run.

b) Explicit development mode

npm run start:dev

c) Explicit production mode

npm run start:prod

d) Start in watch mode for automatic reloading of front-end or back-end

npm run dev

5. Setup application

Navigate to your deployment on an externally available URL. If you are hosting for testing on your localhost you should use ngrok to create a tunnel.

Authenticate with an admin user, go into the Admin section and under Other click the Setup button. This will configure the rest.

6. Acquire phone numbers

Purchase a number and configure it in the Configuration section of your Admin part under connectedPhoneNumbers.

7. Register the webhook in the Twilio Consol

Go to the Twilio Console and integrate the [Domain]/api/webhook/incoming endpoint to the messaging service you specified with the SID above.

8. You are ready for some ☕️ action!

You are all set. People can start sending in messages to those numbers and you will receive them in the order section of your interface.

Project Structure

The project is split up into three sections on the top level. The client directory contains all front-end related code and has been bootstrapped with the Preact CLI. The server directory contains anything backend related and is powered by Express. The shared folder contains any code that is being used by both parts of the project.

There is also a client-dist directory that contains the latest stable build of the front-end with the production flag enabled.

You can find more information in the documentation of the project.

Code of Conduct

Please be aware that this project has a Code of Conduct. The tldr; is to just be excellent to each other ❤️

Contributing

You are more than welcome to contribute to this project. The tests for this project are still missing so please properly test your changes manually in the mean time.

Building front-end changes

To build changes for the front-end you can run the following command:

npm run build:preact

Running the server in dev mode

If you are developing and you want to incrementally build the changes for development purposes you can start of the back-end and front-end with:

npm run dev

Special Thanks To

A special thanks to all the awesome folks in the open source community and their great projects and especially the folks working on the following projects:

• preact, preact-cli, preact-router, preact-mdl
• express
• lodash
• pino, express-pino-logger, pino-colada
• prettier
• webpack
• moment
• many more 🙂

Icons Used

• Barista Icons by Oliver Pitsch
• Bar by BirVa Mehta from Noun Project

Contributors

Thanks goes to these wonderful people (emoji key):

Dominik Kundel 💻 🐛 📖	Phil Nash 💻 🐛	Kelley Robinson 💻 🐛	Devin Rader 🐛	Lizzie Siegle 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Dominik Kundel