Browser Calls (Django)

This template is part of Twilio CodeExchange. If you encounter any issues with this code, please open an issue at github.com/twilio-labs/code-exchange/issues.

About

This project is built using the Django web framework.

Learn how to use Twilio Client to make browser-to-phone and browser-to-browser calls with Python. The unsatisfied customers of the Birchwood Bicycle Polo Co. need your help!

Full Tutorial: https://www.twilio.com/docs/voice/tutorials/browser-calls-python-django

Implementations in other languages:

.NET	Java	Node	PHP	Ruby
Done	Done	Done	Done	Done

Set up

Requirements

Python 3.6, 3.7 or 3.8 version
Sqlite3
Nodejs v10 or v12

Twilio Account Settings

This application should give you a ready-made starting point for writing your own application. Before we begin, we need to collect all the config values we need to run the application:

Config Value	Description
TWILIO_ACCOUNT_SID	Your primary Twilio account identifier - find this in the Console.
TWILIO_NUMBER	A Twilio phone number in E.164 format - you can get one here
TWIML_APPLICATION_SID	The TwiML application with a voice URL configured to access your server running this app - create one in the console here. Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running.
API_KEY / API_SECRET	Your REST API Key information needed to create an Access Token - create one here.

Create a TwiML App

This project is configured to use a TwiML App, which allows us to easily set the voice URLs for all Twilio phone numbers we purchase in this app.

Create a new TwiML app at https://www.twilio.com/console/voice/twiml/apps and use its Sid as the TWIML_APPLICATION_SID environment variable wherever you run this app.

Once you have created your TwiML app, configure your Twilio phone number to use it (instructions here). If you don't have a Twilio phone number yet, you can purchase a new number in your Twilio Account Dashboard.

Local development

Clone this repo and cd into it.

git clone https://github.com/TwilioDevEd/browser-calls-django.git
cd browser-calls-django

Create a new virtual environment, load it and install dependencies.
```
make install
```
Install the twilio-client js library.
```
npm install
```
Set your environment variables. Copy the env.example file and edit it.
```
cp .env.example .env
```
See Twilio Account Settings to locate the necessary environment variables.
Run the migrations.
```
make serve-setup
```
Start the development server (will run on port 8000). Before running the following command, make sure the virtual environment is activated.
```
make serve
```
Expose your application to the wider internet using ngrok. This step is important because the application won't work as expected if you run it through localhost.
```
$ ngrok http 8000
```
Once you have started ngrok, update your TwiML app's voice URL setting to use your ngrok hostname, so it will look something like this:
```
http://<your-ngrok-subdomain>.ngrok.io/support/call
```
Everything is setup, now you can open two tabs:
- The support agent: http://localhost:8000/support/dashboard
- The customer: http://localhost:8000
When the customer click on the "Call Support" button, the support agent will see the call immediatly and be able to pick up the call with the "Answer Call" button.

Another scenario is the customer fill out the form to open a ticket, the support agent can refresh the dashboard and we'll be able to click the "Call customer" button which will start a call to the phone number listed in the ticket.

That's it!

Docker

If you have Docker already installed on your machine, you can use our docker-compose.yml to setup your project.

Make sure you have the project cloned.
Setup the .env file as outlined in the Local Development steps.
Run docker-compose up.
Follow the steps in Local Development on how to expose your port to Twilio using a tool like ngrok and configure the remaining parts of your application.

Tests

You can run the tests locally through coverage, before running the following command, make sure the virtual environment is activated.

$ coverage run manage.py test --settings=twilio_sample_project.settings.test

You can then view the results with coverage report or build an HTML report with coverage html.

Cloud deployment

Additionally to trying out this application locally, you can deploy it to a variety of host services. Here is a small selection of them.

Please be aware that some of these might charge you for the usage or might make the source code for this application visible to the public. When in doubt research the respective hosting service first.

Service
Heroku

Resources

The CodeExchange repository can be found here.

Contributing

This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.

friendm / browser-calls-django Goto Github PK