Using webhooks - Getting Started with Twilio Voice

hey folks and welcome to this twilio

tutorial video this is the third video

in our series exploring video

programmable voice now in the last video

we learned how to make calls to the

twilio api from our own code

however so far we have used twiml bins

to host our instructions for what twilio

should do with calls that arrive

now in this video you will learn how to

use web hooks that serve twiml from your

own web server this way we can have more

control over the twiml that we create

in this video i'll be using a tool

called ngrok now it's a really useful

tool for web development when we are

working with web hooks we'll need to

have twilio communicate with our web

server now in a production environment

your web server will have a public url

however we'll be working on our web

server locally now ngrok creates a

temporary tunnel between your local host

and a public url now i'll explain more

when we get to that part of the video

but i've dropped a link in the

description so if you haven't done so

already i'd recommend pausing the video

and downloading and installing it now

once again i'll be writing code with

javascript and running it with node.js

to follow along make sure you have the

node.js runtime installed but again i've

also dropped the links to the equivalent

code in c-sharp python ruby java and

even php in the description below so if

you prefer to use one of those languages

feel free to follow along those

instructions now if you're ready let's

get started

twirl bins are really cool and easy to

use but what if we want to have more

control over those instructions we can

actually serve twiml from anywhere that

is accessible via a url on the internet

now what we're going to do in this video

is we are going to use webhooks to

deliver twiml instructions for twilio to

execute

now some of you watching me have never

heard of webhooks before and that's okay

a web hook is a user-defined http

callback

essentially whenever a certain event is

triggered a http request is made to a

url that you specify in our case if your

twivio number receives a phone call

twilio will make a http request to your

web server when your web server responds

with twiddle twilio will take that twiml

and follow those instructions on how to

handle the phone call

alright to build my web server i'm going

to use a very popular javascript web

framework called express with express we

can use a couple of lines of code to

create a web server but you don't have

to use express you can use any web

framework that you like as long as you

can respond to http requests with xml so

in your own web framework just further

along so that you are outputting the

same values as i am all right here's an

example of a web server that says hello

world i've also dropped this code in the

description below let's quickly look

through it we have express and we're

bringing it in and we are going to use a

porter 3000

we're going to set up our web server so

that anytime somebody makes a get

request to the root url will respond

with hello world

now when we run this code we can head

over to our browser and navigate to

localhost 3000 and we can see the words

hello world we have a server now that is

responding to get requests and

responding with the words hello world

but let's change things up a little

remember twilio's markup language or

twiml well that is a file format that we

called xml we need to change this route

or route for my american friends so that

it serves xml instead of just plain text

to do this in express i just set the

type of the response to excel

also right now this server only responds

to get requests which is perfect for our

browser but we're going to be receiving

post requests from twiml now express has

this neat little feature that lets us

accept both get and post requests so

rather than using app.get i'm going to

use app.org in a production environment

you'd probably use app.post to only

handle post requests

next let's change the text that we send

back

hello world isn't valid xml but twiml is

i'm going to go ahead and write twiml

just like last time this time let's say

hello from the server

perfect now let's restart our server in

the terminal i'll use the control c

shortcut to stop my server and then

start it again just like last time now

if we refresh my web page at localhost

3000 it shows the twin mode that we just

wrote

now the server is ready to be called by

twilio but it's just one problem a local

host url is only available locally on

this computer however i need to make a

url that is available for twilio now

under production circumstances i would

have a public web server up and running

however in the short term to work on my

app i'll be using the tool that i talked

about earlier

ngrok creates a temporary tunnel from my

local host to an ngrok url so using

ngrok i'm going to create a http tunnel

to my local machines port 3000 and i'm

going to do that with the command ngrok

http

3000

now ngrok is going to create a temporary

url that you can use you can actually

copy the url into your browser and you

should see exactly what we had at

localhost 3000 however this is now

available on the internet you would

never use this in a production

environment but this is really good for

fast prototyping

all right now we have a web server that

can serve twiml over the internet we can

give twilio this url and it will make a

request to our server anytime our phone

number receives a phone call back in the

twilio console let's go over to our

phone number we can update it so that

when a call comes in rather than just

using a twin bin let's use a web hook

and have twiml make a post request to

the ngrok url that we were using now

don't forget to hit save now twivia will

make a request to our web server

whenever we receive a phone call it's

time to pause and test this for yourself

give your phone number a ring and you

should hear it respond with the

instructions from the web server pause

this video now and give it a go

[Music]

perfect now that you've got it working

let's change things up a little so far

we've been writing the tomorrow

ourselves however this can get quite

busy when we start to write more complex

chains of twitter instructions

rather than writing out each term or

verb and noun we can use the twilio

helper libraries to generate our twiml

now this is slightly different in each

language but i'm going to show you how

it works for javascript back in our code

let's use the twilio helper library to

bring in this voice response

we can then create a new voice response

and then we can add our say instruction

if we want to chain instructions

together we can just add more

instructions underneath for example i'm

going to add a play underneath

finally we need to change our response

to send the twiml as a string

okay time to restart the server pause

this video and give your phone number

another call if you copy the terminal

that i wrote you should head into more

instructions that we just wrote together

so give it a try

now that we can generate two more from

our own web servers we can use all our

other coding skills to manipulate the

tumor instructions we create maybe you

want to use a conditional to say certain

things at certain times or use another

api to get information from elsewhere

like a weather report a good example

would be some twiml that says the office

is closed after a certain time let's do

that now

i'm going to edit the code and get

today's date and time

i'll then be using an if else statement

to handle the condition

i'll check the hours of the time and

check if it's after 5 pm or 17

if it is i will have twinl say that the

office is closed

otherwise i will say that the office is

open

once again restart your server and give

your phone number a call based on the

time of day you should hear one of those

phrases now feel free to change the

number to test both sides of those

conditionals i'm waiting for you pause

it now

[Music]

congratulations now you have the power

to dynamically control the swivel that

you create now at this point the biggest

limitation on what you do from here is

your creativity i'll be seeing you on

the next video where we'll cover how to

record and transcribe phone calls up

until then use your creativity build

something cool i can't wait to see it