Django-React Webapp giving normal users a super-power to create call flow with just drag and drop feature and linking them to decide how the call should flow and then recording user feedback with transcript based on their response.
Usable, testing required
- Because it is fun talking to a robot
- No need of internet, just speak out loud
- It's automatic and much secure
There are 2 main problems which you will face while working on this idea:
- Creating flow chart with better user experience
- Able to use Twilio TwiML markup language
To solve the first issue, I used react-storm library which is perfect for this scenario. I searched for many libraries available to create flow charts but this one was the best with customizable UI and able to generate json with serialize and deserialize ability. There are many great features which you can check out.
Second issue is to make calls and have custom programmable voice. For this I have used Django + Postgresql with twilio. Now whenever user creates his flow, we will save his JSON in database. Now coming for call, right now twilio works with twiML markup language, which means that before we let robot say anything, we need to specify what needs to be done by returning all instruction first, so with django we track which questions needs to be asked and fetch those information from database. So it will be one function with same logic calling itself with different parameter so that we can get different question text from it and then save the response as wav. Example
response.record(timeout=2,
action=WEBSITE_URL + '/next/?counter=1&survey=' + str(survey_id) + '&response=' + str(survey_response),
recordingStatusCallback=WEBSITE_URL + '/save/?survey=' + str(survey_id) + '&question=' +
str(survey_script_flow[0]['id']) + '&response=' + str(survey_response), trim="trim-silence")
Here Twilio webhook will access that link, means one function and only thing we are changing is which survey id needs to be accessed, which response we are doing (question number), where to save the recording and more. A bit complicated to explain but I hope it makes sense.
- Django with Django REST Framework
- ReactJS
- React Storm for flow generation
- Twilio for call
-
Clone the repository by:
git clone https://github.com/shashank-sharma/mythical-feedback -
Create Virtual Environment named as
envby doing
python3 -m venv env
Now activate it by:
source env/bin/activate (Linux)
myvenv\Scripts\activate (Windows)
-
Install dependencies
pip install -r requirements.txt -
Database configuration Using Postgresql for database and make sure you are using postgresql >=9.4
Using psql:
CREATE ROLE admin WITH LOGIN PASSWORD 'password';
create database feedback;
GRANT ALL PRIVILEGES ON DATABASE feedback TO admin;
databaseurl: postgresql://admin:password@localhost/feedback
-
Set up Virtual Environment values (As mentioned in .env.example)
a. Secret Key:SECRET_KEY=RANDOMTEXT
b. Database Url:DATABASE_URL=<databaseurl>c. Twilio credentials:ACCOUNT_SID=<accound_sid_id>d. Twilio token:AUTH_TOKEN=<auth_token> -
Migration:
python manage.py makemigrations
python manage.py migrate -
Run your server by:
python manage.py runserver
-
Move to frontend directory:
cd frontend/ -
Install necessadry dependencies by:
npm install -
Run by doing:
npm run start
Make sure you run both of the things in-order to make it run in your local machine.
Not that important but if you want to test the calling feature locally then follow the steps
Make sure you get the callable number from twilio.
Now since making a call to your number requires twilio to have some callback url so we will use ngrok to make it work.
Link: https://ngrok.com/download
Once downloaded use:
./ngrok http 8000
Now this will generate one public URL. Copy the given url and paste it in settings.py in:
- ALLOWED_HOSTS
- WEBSITE_URL
Once that is done, you are ready for calling feature too.