Django-Twilio Backend + React Dialer

A django backend server to handle Twilio calls and a frontend React web dialer.

Prerequisites

Python (version 3.6 or higher)
Pip
Node.js (version 6 or higher)
A Twilio account with a phone number
Ngrok

Local Development

Clone this repository and cd into it

$ git clone git@github.com:jak0203/djtwil.git
$ cd djtwil

Set up a virtual environment

$ virtualenv {VIRTUALENV NAME} -p python3.6
$ source {VIRTUALENV NAME}/bin/activate

Install the python requirements
```
$ pip install -r requirements.txt
```
Cd into the webapp directory and install react app dependencies
```
$ cd webapp
$ npm install
$ cd ..
```
Copy the .env.SAMPLE file to .env
```
$ cp .env.SAMPLE .env
```

If you want to use a postgres db instead of sql lite, uncomment line 4 and update the URL with your postgres db information.

Set up ngrok
- If you don't already have a server configured to use as your webhook, ngrok is a great tool for testing webhooks locally.
- Once you have your ngrok URL, paste it into the .env file.
- If you are using a free ngrok account, you'll need to remove line 1 from the Procfile.local and run ngrok in a separate terminal window.
Set up Twilio
- Log into your twilio account and gather the account information into the .env file.
- The account SID and token should be found on your main dashboard.
- The rest API key and secret should be under the programable voice dashboard.
- The push credential sid should be under the programmable voice credentials.
- Set up the following twiml apps.
  1. Voice
    - Request URL: https://{NGROK URL}.ngrok.io/phonecalls/voice/
    - Copy the Application SID into the .env file TWILIO_VOICE_APP_SID
  2. Outgoing
    - Request URL: https://{NGROK URL}.ngrok.io/phonecalls/outgoing/
    - Copy the Application SID into the .env file TWILIO_APP_SID
  3. Incoming
    - Request URL: https://{NGROK URL}.ngrok.io/phonecalls/incoming/
    - Under your phone number, voice and fax; Set the accept incoming voice calls configure with a TwiML App and select the incoming twiml app just created.
Run database migrations
```
$ python manage.py migrate
```
Create superuser
```
python manage.py createsuperuser
```
Start servers
```
$ honcho start -f Procfile.local
```
Login by navigating to http://localhost:5000/admin/

Run Tests

Set up .env.test with your testing API credentials.

$ honcho -e .env.test -f Procfile.local run ./manage.py test

Deploy to Heroku

TODO

Development notes

get auth token

POST to api/token with your username and password to retrieve your api token. Sample Request

$ curl -X "POST" "http://localhost:5000/api/token/" \
     -H 'Content-Type: application/json; charset=utf-8' \
     -d $'{
  "username": "USERNAME",
  "password": "PASSWORD"
}'

Sample Response

HTTP/1.0 200 OK
Date: Tue, 19 Dec 2017 03:04:09 GMT
Server: WSGIServer/0.2 CPython/3.5.1
Content-Type: application/json
Allow: POST, OPTIONS
X-Frame-Options: SAMEORIGIN
Content-Length: 52
Vary: Cookie

{"token":"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}

get twilio token

GET phonecalls/capabilityToken/ - pass the api token in as a header to the request Sample Request

$ curl "http://localhost:5000/phonecalls/capabilityToken/" \
     -H 'Authorization: Token XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' \
     -H 'Accept: application/json'

Sample Response (token is returned as a string):

HTTP/1.0 200 OK
Date: Tue, 19 Dec 2017 03:02:41 GMT
Server: WSGIServer/0.2 CPython/3.5.1
X-Frame-Options: SAMEORIGIN
Allow: OPTIONS, POST, GET
Vary: Accept
Content-Length: 575
Content-Type: text/html; charset=utf-8

{"identity": USER, "token": VERY_LONG_TOKEN}

jak0203/djtwil