In this episode, we build a pizza order tracking system in Angular that will SMS text the user when their order status change. Twilio handles the texting, while Firebase Cloud Functions makes the API call. Get the full code and breakdown: https://angularfirebase.com/lessons/sms-texting-with-twilio/


Firebase Cloud Functions: https://firebase.google.com/docs/functions/database-events
Twilio: https://www.twilio.com/
Angular Reactive Forms: https://angular.io/guide/reactive-forms
2024-02-04T08:06:24.524Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
26485414-3f6c-4de7-b6c1-2c4a7b9a4c45
7c093b05a678f061c283cffa0c87a3dd3d2f062981df99dcd2a67f6e75d4542a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Sending text messages through your app can bring the user experience to the next level.
In this lesson, I have an Angular app where users can order a pizza for delivery.
My goal is to update the users with a text message every time their order status changes.
So when the pizza goes from cooking to on its way, the user gets notified directly in their phone.
To handle the text messaging, we're gonna use an API called Twilio combined with Firebase Cloud Functions.
Let's start by learning a little bit more about Twilio from their promo video.
Twilio is a global communications platform for developers.
With our API and a few lines of code, you can add messaging, voice, and video to your applications in the programming language you already use.
So after we sign up for a Twilio account, they're going to assign us a phone number, and we can use that phone number to send text messages to our users.
You can sign up without a credit card, and they'll give you a $15 credit to experiment with the API.
So once you've signed up, make note of your phone number as well as your API keys, which we're going to use to build the Firebase Cloud function.
But before we get to that point, We're first going to build the Angular component for the front end.
So I've generated a new component called pizza status, and it's going to use the reactive forms module.
So we need to make sure to add that to the import section in our NG module.
We're using a reactive form because we need to validate the phone number carefully.
When we send it to Twilio, it needs to be in e164 format, which is a string that looks like this.
The country code with the plus sign followed by the full 10 digit phone number.
So let's see how we can make this possible in the pizza status component.
We are going to break the phone number down into 4 different form inputs and then when we send the data back to Firebase, it's It's gonna be the fully formatted e164 string.
And for this lesson, Firebase, I just have a single test order in there to simulate how this could work.
In the component itself, we'll first import the AngularFire database as well as the reactive form parts that we need.
Then we'll set a variable for the form itself and set that to the type of form group, and then order will represent the data in Firebase.
Then we can add the AngularFire database and form builder to the constructor.
And during ng oninit, we'll build the form which we'll define here in a second.
And then we'll set the order variable to the object that we have saved in Firebase.
The next thing I'm gonna do is create a helper function to validate the min and max length of any given form input.
The reason I'm doing this is to avoid repeating these validators for every single form input.
But they're just validating that the input value is a number and that it's within a certain length.
From here, we'll use Form Builder to create the actual form.
So we create a method called build form and then we define our number form as a form builder group.
Then we define form controls for the country code, the area code, the prefix, and the line number.
This will allow us to capture these values in a form input, but we still need to format it as e164.
To do that, we can define a getter and we can just grab the value from the form, then concatenate all the values together in order and add a plus sign, and we're good to go.
Now we can send this value to Firebase when the user submits the form.
We already have the order data as a Firebase object observable, so we can just call order dot update with the phone number.
Now let's put this all together in the HTML.
The first thing I do here is set a template variable called pizza based on the order observable.
So So we do that by calling order async as pizza.
Then I wanna add a custom class for each possible order state that the pizza can be in.
We can do this with the built in ngClass directive in Angular.
You use ngClass by passing it an object where the keys in that object are the classes you want to apply, and the value is an expression that resolves to true or false.
So here we'll do pizza status submitted, then we'll do the is dark CSS class.
Then we'll add a couple more possible statuses such as on its way from the delivery driver and delivered to the end user.
Then we're going to jump down here to the reactive form, and we make this form reactive by first adding a form element and then doing form group to our number form that we defined in the TypeScript.
Then when the swarm's submitted, we use this n g submit event, and we'll update the phone number in Firebase also with that function we defined in the TypeScript.
From here, we'll build the actual form inputs, and all we have to do is define the form control name attribute that corresponds to the key in the build form function we defined earlier.
So that's the country code, area code, etcetera.
Then lastly, we'll add a submit button to the form that is disabled if the form is invalid just to prevent accidental numbers being sent to Firebase.
And then we can also use this to send a validation message to the user by just doing n g if along with for number form invalid and number form touched, which will show the user a validation message if they've started to interact with the form and it's invalid.
And the final touch is to show the user the number that the text message will be sent to after it's been updated in Firebase.
So if we go into the app, we can type in the form and we can see we get the red phone number is not valid message until it is valid, and then we can actually update it in Firebase.
So now everything's in place to start sending text messages.
We just need to build the Firebase Cloud Function.
I've added a couple extra buttons here just to make this a little bit easier to show.
Whenever these buttons get clicked, they will update the status in Firebase which will trigger the cloud function and tell Twilio to send a text message.
You could also just edit these values manually in the Firebase console if you find that easier.
So the first thing you need to do is initialize Cloud Functions if they're not already.
You can do that by running Firebase init.
And then once you've done that, we need to set the Twilio API keys as environment variables.
We can do that with Firebase functions config set, and you can also just copy and paste this from the full lesson code.
From there, make sure you're in the functions directory.
Then we can install the Twilio helper package for Node.
Js with npm install Twilio with the save flag.
Okay.
Now we can go into index.
Js and build the actual cloud function.
We first import the admin database and initialize it with our Firebase config.
From there, we can import Twilio, and we'll initialize that with the environment variables that we set earlier.
Then we also need to set a variable for the phone number that was given to us by Twilio.
You can actually set this as an environment variable instead of hard coding it like I am here.
Then I'm going to put together another validation function for the e164 format.
This time I just check the number against a regular expression that that will return true if it meets that pattern.
So we'll build the actual cloud function by doing exports, text status, and then we'll do a database cloud function that references the status point in the database.
So in this case, it's orders with the order push key and then the status property.
Then we can use the on update trigger to run this function whenever the value changes, but it won't run the function on create or delete operations, which is exactly what we want.
When this function is triggered, we'll first save the order key so we can reference that point in the database to pull all the data for a particular order.
So we can do that by running admin database and point it to the order key.
So we can pull the order data once and then once we have that value back, we'll return it to another Promise.
At this point, we have all the data we need to build the text message and send the API call off to Twilio.
So we'll get the current order status, then we'll get the phone number associated with that order, and then we'll run our validation function one more time just so we don't send any unnecessary requests to Twilio.
If it's not the right format, we'll just go ahead and throw an error.
Then to send a text, all we need to do is define 3 different values, and that's the text body itself.
That's the actual message the end user will see.
Then we define the message the number is being sent to, which is the user's number, and the number the message is being sent from, which is our Twilio account phone number.
Then to actually make this API call and send the text to the user, we just need to call client messages create and pass it the text message as the argument.
This is going to return a promise also, so we can just call then, and at this point, we'll also catch any errors.
So that's all it takes to start sending text messages to your users.
It's pretty simple when you think about how powerful that feature can be.
After you deploy the function to Firebase, you should be able to go into the app and update the status.
And then you'll see the text message come through on whichever phone number you provided.
That's it for SMS text with Twilio.
If this video helped you, please like and subscribe.
And if you wanna get involved in this project, consider becoming a pro member at angularfirebase dotcom.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you soon.

Speaker 0: Sending text messages through your app can bring the user experience to the next level. In this lesson, I have an Angular app where users can order a pizza for delivery. My goal is to update the users with a text message every time their order status changes. So when the pizza goes from cooking to on its way, the user gets notified directly in their phone. To handle the text messaging, we're gonna use an API called Twilio combined with Firebase Cloud Functions.

Let's start by learning a little bit more about Twilio from their promo video.

Speaker 1: Twilio is a global communications platform for developers. With our API and a few lines of code, you can add messaging, voice, and video to your applications in the programming language you already use.

Speaker 0: So after we sign up for a Twilio account, they're going to assign us a phone number, and we can use that phone number to send text messages to our users. You can sign up without a credit card, and they'll give you a $15 credit to experiment with the API. So once you've signed up, make note of your phone number as well as your API keys, which we're going to use to build the Firebase Cloud function. But before we get to that point, We're first going to build the Angular component for the front end. So I've generated a new component called pizza status, and it's going to use the reactive forms module.

So we need to make sure to add that to the import section in our NG module. We're using a reactive form because we need to validate the phone number carefully. When we send it to Twilio, it needs to be in e164 format, which is a string that looks like this. The country code with the plus sign followed by the full 10 digit phone number. So let's see how we can make this possible in the pizza status component.

We are going to break the phone number down into 4 different form inputs and then when we send the data back to Firebase, it's It's gonna be the fully formatted e164 string. And for this lesson, Firebase, I just have a single test order in there to simulate how this could work. In the component itself, we'll first import the AngularFire database as well as the reactive form parts that we need. Then we'll set a variable for the form itself and set that to the type of form group, and then order will represent the data in Firebase. Then we can add the AngularFire database and form builder to the constructor.

And during ng oninit, we'll build the form which we'll define here in a second. And then we'll set the order variable to the object that we have saved in Firebase. The next thing I'm gonna do is create a helper function to validate the min and max length of any given form input. The reason I'm doing this is to avoid repeating these validators for every single form input. But they're just validating that the input value is a number and that it's within a certain length.

From here, we'll use Form Builder to create the actual form. So we create a method called build form and then we define our number form as a form builder group. Then we define form controls for the country code, the area code, the prefix, and the line number. This will allow us to capture these values in a form input, but we still need to format it as e164. To do that, we can define a getter and we can just grab the value from the form, then concatenate all the values together in order and add a plus sign, and we're good to go.

Now we can send this value to Firebase when the user submits the form. We already have the order data as a Firebase object observable, so we can just call order dot update with the phone number. Now let's put this all together in the HTML. The first thing I do here is set a template variable called pizza based on the order observable. So So we do that by calling order async as pizza.

Then I wanna add a custom class for each possible order state that the pizza can be in. We can do this with the built in ngClass directive in Angular. You use ngClass by passing it an object where the keys in that object are the classes you want to apply, and the value is an expression that resolves to true or false. So here we'll do pizza status submitted, then we'll do the is dark CSS class. Then we'll add a couple more possible statuses such as on its way from the delivery driver and delivered to the end user.

Then we're going to jump down here to the reactive form, and we make this form reactive by first adding a form element and then doing form group to our number form that we defined in the TypeScript. Then when the swarm's submitted, we use this n g submit event, and we'll update the phone number in Firebase also with that function we defined in the TypeScript. From here, we'll build the actual form inputs, and all we have to do is define the form control name attribute that corresponds to the key in the build form function we defined earlier. So that's the country code, area code, etcetera. Then lastly, we'll add a submit button to the form that is disabled if the form is invalid just to prevent accidental numbers being sent to Firebase.

And then we can also use this to send a validation message to the user by just doing n g if along with for number form invalid and number form touched, which will show the user a validation message if they've started to interact with the form and it's invalid. And the final touch is to show the user the number that the text message will be sent to after it's been updated in Firebase. So if we go into the app, we can type in the form and we can see we get the red phone number is not valid message until it is valid, and then we can actually update it in Firebase. So now everything's in place to start sending text messages. We just need to build the Firebase Cloud Function.

I've added a couple extra buttons here just to make this a little bit easier to show. Whenever these buttons get clicked, they will update the status in Firebase which will trigger the cloud function and tell Twilio to send a text message. You could also just edit these values manually in the Firebase console if you find that easier. So the first thing you need to do is initialize Cloud Functions if they're not already. You can do that by running Firebase init.

And then once you've done that, we need to set the Twilio API keys as environment variables. We can do that with Firebase functions config set, and you can also just copy and paste this from the full lesson code. From there, make sure you're in the functions directory. Then we can install the Twilio helper package for Node. Js with npm install Twilio with the save flag.

Okay. Now we can go into index. Js and build the actual cloud function. We first import the admin database and initialize it with our Firebase config. From there, we can import Twilio, and we'll initialize that with the environment variables that we set earlier.

Then we also need to set a variable for the phone number that was given to us by Twilio. You can actually set this as an environment variable instead of hard coding it like I am here. Then I'm going to put together another validation function for the e164 format. This time I just check the number against a regular expression that that will return true if it meets that pattern. So we'll build the actual cloud function by doing exports, text status, and then we'll do a database cloud function that references the status point in the database.

So in this case, it's orders with the order push key and then the status property. Then we can use the on update trigger to run this function whenever the value changes, but it won't run the function on create or delete operations, which is exactly what we want. When this function is triggered, we'll first save the order key so we can reference that point in the database to pull all the data for a particular order. So we can do that by running admin database and point it to the order key. So we can pull the order data once and then once we have that value back, we'll return it to another Promise.

At this point, we have all the data we need to build the text message and send the API call off to Twilio. So we'll get the current order status, then we'll get the phone number associated with that order, and then we'll run our validation function one more time just so we don't send any unnecessary requests to Twilio. If it's not the right format, we'll just go ahead and throw an error. Then to send a text, all we need to do is define 3 different values, and that's the text body itself. That's the actual message the end user will see.

Then we define the message the number is being sent to, which is the user's number, and the number the message is being sent from, which is our Twilio account phone number. Then to actually make this API call and send the text to the user, we just need to call client messages create and pass it the text message as the argument. This is going to return a promise also, so we can just call then, and at this point, we'll also catch any errors. So that's all it takes to start sending text messages to your users. It's pretty simple when you think about how powerful that feature can be.

After you deploy the function to Firebase, you should be able to go into the app and update the status. And then you'll see the text message come through on whichever phone number you provided. That's it for SMS text with Twilio. If this video helped you, please like and subscribe. And if you wanna get involved in this project, consider becoming a pro member at angularfirebase dotcom.

You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Sending text messages through your app can bring the user experience to the next level. In this lesson, I have an Angular app where users can order a pizza for delivery. My goal is to update the users with a text message every time their order status changes. So when the pizza goes from cooking to on its way, the user gets notified directly in their phone.
To handle the text messaging, we're gonna use an API called Twilio combined with Firebase Cloud Functions. Let's start by learning a little bit more about Twilio from their promo video. Twilio is a global communications platform for developers. With our API and a few lines of code, you can add messaging, voice, and video to your applications in the programming language you already use. So after we sign up for a Twilio account, they're going to assign us a phone number, and we can use that phone number to send text messages to our users.
twitter
You can sign up without a credit card, and they'll give you a $15 credit to experiment with the API. So once you've signed up, make note of your phone number as well as your API keys, which we're going to use to build the Firebase Cloud function. But before we get to that point, We're first going to build the Angular component for the front end. So I've generated a new component called pizza status, and it's going to use the reactive forms module. So we need to make sure to add that to the import section in our NG module. We're using a reactive form because we need to validate the phone number carefully. When we send it to Twilio, it needs to be in e164 format, which is a string that looks like this. The country code with the plus sign followed by the full 10 digit phone number. So let's see how we can make this possible in the pizza status component. We are going to break the phone number down into 4 different form inputs and then when we send the data back to Firebase, it's It's gonna be the fully formatted e164 string. And for this lesson, Firebase, I just have a single test order in there to simulate how this could work. In the component itself, we'll first import the AngularFire database as well as the reactive form parts that we need. Then we'll set a variable for the form itself and set that to the type of form group, and then order will represent the data in Firebase. Then we can add the AngularFire database and form builder to the constructor. And during ng oninit, we'll build the form which we'll define here in a second. And then we'll set the order variable to the object that we have saved in Firebase. The next thing I'm gonna do is create a helper function to validate the min and max length of any given form input. The reason I'm doing this is to avoid repeating these validators for every single form input. But they're just validating that the input value is a number and that it's within a certain length. From here, we'll use Form Builder to create the actual form. So we create a method called build form and then we define our number form as a form builder group. Then we define form controls for the country code, the area code, the prefix, and the line number. This will allow us to capture these values in a form input, but we still need to format it as e164. To do that, we can define a getter and we can just grab the value from the form, then concatenate all the values together in order and add a plus sign, and we're good to go. Now we can send this value to Firebase when the user submits the form. We already have the order data as a Firebase object observable, so we can just call order dot update with the phone number. Now let's put this all together in the HTML. The first thing I do here is set a template variable called pizza based on the order observable. So So we do that by calling order async as pizza. Then I wanna add a custom class for each possible order state that the pizza can be in. We can do this with the built in ngClass directive in Angular. You use ngClass by passing it an object where the keys in that object are the classes you want to apply, and the value is an expression that resolves to true or false. So here we'll do pizza status submitted, then we'll do the is dark CSS class. Then we'll add a couple more possible statuses such as on its way from the delivery driver and delivered to the end user. Then we're going to jump down here to the reactive form, and we make this form reactive by first adding a form element and then doing form group to our number form that we defined in the TypeScript. Then when the swarm's submitted, we use this n g submit event, and we'll update the phone number in Firebase also with that function we defined in the TypeScript. From here, we'll build the actual form inputs, and all we have to do is define the form control name attribute that corresponds to the key in the build form function we defined earlier. So that's the country code, area code, etcetera. Then lastly, we'll add a submit button to the form that is disabled if the form is invalid just to prevent accidental numbers being sent to Firebase. And then we can also use this to send a validation message to the user by just doing n g if along with for number form invalid and number form touched, which will show the user a validation message if they've started to interact with the form and it's invalid. And the final touch is to show the user the number that the text message will be sent to after it's been updated in Firebase. So if we go into the app, we can type in the form and we can see we get the red phone number is not valid message until it is valid, and then we can actually update it in Firebase. So now everything's in place to start sending text messages. We just need to build the Firebase Cloud Function. I've added a couple extra buttons here just to make this a little bit easier to show. Whenever these buttons get clicked, they will update the status in Firebase which will trigger the cloud function and tell Twilio to send a text message. You could also just edit these values manually in the Firebase console if you find that easier. So the first thing you need to do is initialize Cloud Functions if they're not already. You can do that by running Firebase init. And then once you've done that, we need to set the Twilio API keys as environment variables. We can do that with Firebase functions config set, and you can also just copy and paste this from the full lesson code. From there, make sure you're in the functions directory. Then we can install the Twilio helper package for Node. Js with npm install Twilio with the save flag. Okay. Now we can go into index. Js and build the actual cloud function. We first import the admin database and initialize it with our Firebase config. From there, we can import Twilio, and we'll initialize that with the environment variables that we set earlier. Then we also need to set a variable for the phone number that was given to us by Twilio. You can actually set this as an environment variable instead of hard coding it like I am here. Then I'm going to put together another validation function for the e164 format. This time I just check the number against a regular expression that that will return true if it meets that pattern. So we'll build the actual cloud function by doing exports, text status, and then we'll do a database cloud function that references the status point in the database. So in this case, it's orders with the order push key and then the status property. Then we can use the on update trigger to run this function whenever the value changes, but it won't run the function on create or delete operations, which is exactly what we want. When this function is triggered, we'll first save the order key so we can reference that point in the database to pull all the data for a particular order. So we can do that by running admin database and point it to the order key. So we can pull the order data once and then once we have that value back, we'll return it to another Promise. At this point, we have all the data we need to build the text message and send the API call off to Twilio. So we'll get the current order status, then we'll get the phone number associated with that order, and then we'll run our validation function one more time just so we don't send any unnecessary requests to Twilio. If it's not the right format, we'll just go ahead and throw an error. Then to send a text, all we need to do is define 3 different values, and that's the text body itself. That's the actual message the end user will see. Then we define the message the number is being sent to, which is the user's number, and the number the message is being sent from, which is our Twilio account phone number. Then to actually make this API call and send the text to the user, we just need to call client messages create and pass it the text message as the argument. This is going to return a promise also, so we can just call then, and at this point, we'll also catch any errors. So that's all it takes to start sending text messages to your users. It's pretty simple when you think about how powerful that feature can be. After you deploy the function to Firebase, you should be able to go into the app and update the status.
And then you'll see the text message come through on whichever phone number you provided. That's it for SMS text with Twilio. If this video helped you, please like and subscribe. And if you wanna get involved in this project, consider becoming a pro member at angularfirebase dotcom. You'll get a free copy of my book as well as 1 on 1 project consulting.
twitter
Thanks for watching, and I'll see you soon.
Sending text messages through your app can bring the user experience to the next level. In this lesson, I have an Angular app where users can order a pizza for delivery. My goal is to update the users with a text message every time their order status changes. So when the pizza goes from cooking to on its way, the user gets notified directly in their phone. To handle the text messaging, we're gonna use an API called Twilio combined with Firebase Cloud Functions. Let's start by learning a little bit more about Twilio from their promo video. Twilio is a global communications platform for developers. With our API and a few lines of code, you can add messaging, voice, and video to your applications in the programming language you already use. So after we sign up for a Twilio account, they're going to assign us a phone number, and we can use that phone number to send text messages to our users. You can sign up without a credit card, and they'll give you a $15 credit to experiment with the API. So once you've signed up, make note of your phone number as well as your API keys, which we're going to use to build the Firebase Cloud function. But before we get to that point, We're first going to build the Angular component for the front end. So I've generated a new component called pizza status, and it's going to use the reactive forms module. So we need to make sure to add that to the import section in our NG module. We're using a reactive form because we need to validate the phone number carefully. When we send it to Twilio, it needs to be in e164 format, which is a string that looks like this. The country code with the plus sign followed by the full 10 digit phone number. So let's see how we can make this possible in the pizza status component. We are going to break the phone number down into 4 different form inputs and then when we send the data back to Firebase, it's It's gonna be the fully formatted e164 string. And for this lesson, Firebase, I just have a single test order in there to simulate how this could work. In the component itself, we'll first import the AngularFire database as well as the reactive form parts that we need. Then we'll set a variable for the form itself and set that to the type of form group, and then order will represent the data in Firebase. Then we can add the AngularFire database and form builder to the constructor. And during ng oninit, we'll build the form which we'll define here in a second. And then we'll set the order variable to the object that we have saved in Firebase. The next thing I'm gonna do is create a helper function to validate the min and max length of any given form input. The reason I'm doing this is to avoid repeating these validators for every single form input. But they're just validating that the input value is a number and that it's within a certain length. From here, we'll use Form Builder to create the actual form. So we create a method called build form and then we define our number form as a form builder group. Then we define form controls for the country code, the area code, the prefix, and the line number. This will allow us to capture these values in a form input, but we still need to format it as e164. To do that, we can define a getter and we can just grab the value from the form, then concatenate all the values together in order and add a plus sign, and we're good to go. Now we can send this value to Firebase when the user submits the form. We already have the order data as a Firebase object observable, so we can just call order dot update with the phone number. Now let's put this all together in the HTML. The first thing I do here is set a template variable called pizza based on the order observable. So So we do that by calling order async as pizza. Then I wanna add a custom class for each possible order state that the pizza can be in. We can do this with the built in ngClass directive in Angular. You use ngClass by passing it an object where the keys in that object are the classes you want to apply, and the value is an expression that resolves to true or false. So here we'll do pizza status submitted, then we'll do the is dark CSS class. Then we'll add a couple more possible statuses such as on its way from the delivery driver and delivered to the end user. Then we're going to jump down here to the reactive form, and we make this form reactive by first adding a form element and then doing form group to our number form that we defined in the TypeScript. Then when the swarm's submitted, we use this n g submit event, and we'll update the phone number in Firebase also with that function we defined in the TypeScript. From here, we'll build the actual form inputs, and all we have to do is define the form control name attribute that corresponds to the key in the build form function we defined earlier. So that's the country code, area code, etcetera. Then lastly, we'll add a submit button to the form that is disabled if the form is invalid just to prevent accidental numbers being sent to Firebase. And then we can also use this to send a validation message to the user by just doing n g if along with for number form invalid and number form touched, which will show the user a validation message if they've started to interact with the form and it's invalid. And the final touch is to show the user the number that the text message will be sent to after it's been updated in Firebase. So if we go into the app, we can type in the form and we can see we get the red phone number is not valid message until it is valid, and then we can actually update it in Firebase. So now everything's in place to start sending text messages. We just need to build the Firebase Cloud Function. I've added a couple extra buttons here just to make this a little bit easier to show. Whenever these buttons get clicked, they will update the status in Firebase which will trigger the cloud function and tell Twilio to send a text message. You could also just edit these values manually in the Firebase console if you find that easier. So the first thing you need to do is initialize Cloud Functions if they're not already. You can do that by running Firebase init. And then once you've done that, we need to set the Twilio API keys as environment variables. We can do that with Firebase functions config set, and you can also just copy and paste this from the full lesson code. From there, make sure you're in the functions directory. Then we can install the Twilio helper package for Node. Js with npm install Twilio with the save flag. Okay. Now we can go into index. Js and build the actual cloud function. We first import the admin database and initialize it with our Firebase config. From there, we can import Twilio, and we'll initialize that with the environment variables that we set earlier. Then we also need to set a variable for the phone number that was given to us by Twilio. You can actually set this as an environment variable instead of hard coding it like I am here. Then I'm going to put together another validation function for the e164 format. This time I just check the number against a regular expression that that will return true if it meets that pattern. So we'll build the actual cloud function by doing exports, text status, and then we'll do a database cloud function that references the status point in the database. So in this case, it's orders with the order push key and then the status property. Then we can use the on update trigger to run this function whenever the value changes, but it won't run the function on create or delete operations, which is exactly what we want. When this function is triggered, we'll first save the order key so we can reference that point in the database to pull all the data for a particular order. So we can do that by running admin database and point it to the order key. So we can pull the order data once and then once we have that value back, we'll return it to another Promise. At this point, we have all the data we need to build the text message and send the API call off to Twilio. So we'll get the current order status, then we'll get the phone number associated with that order, and then we'll run our validation function one more time just so we don't send any unnecessary requests to Twilio. If it's not the right format, we'll just go ahead and throw an error. Then to send a text, all we need to do is define 3 different values, and that's the text body itself. That's the actual message the end user will see. Then we define the message the number is being sent to, which is the user's number, and the number the message is being sent from, which is our Twilio account phone number. Then to actually make this API call and send the text to the user, we just need to call client messages create and pass it the text message as the argument. This is going to return a promise also, so we can just call then, and at this point, we'll also catch any errors. So that's all it takes to start sending text messages to your users. It's pretty simple when you think about how powerful that feature can be. After you deploy the function to Firebase, you should be able to go into the app and update the status. And then you'll see the text message come through on whichever phone number you provided. That's it for SMS text with Twilio. If this video helped you, please like and subscribe. And if you wanna get involved in this project, consider becoming a pro member at angularfirebase dotcom. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Sending
sending
text
text
messages
messages
through
through
your
your
app
app
can
can
bring
bring
the
the
user
user
experience
experience
to
to
the
the
next
next
level.
level
In
in
this
this
lesson,
lesson
I
i
have
have
an
an
Angular
angular
app
app
where
where
users
users
can
can
order
order
a
a
pizza
pizza
for
for
delivery.
delivery
My
my
goal
goal
is
is
to
to
update
update
the
the
users
users
with
with
a
a
text
text
message
message
every
every
time
time
their
their
order
order
status
status
changes.
changes
So
so
when
when
the
the
pizza
pizza
goes
goes
from
from
cooking
cooking
to
to
on
on
its
its
way,
way
the
the
user
user
gets
gets
notified
notified
directly
directly
in
in
their
their
phone.
phone
To
to
handle
handle
the
the
text
text
messaging,
messaging
we're
we're
gonna
gonna
use
use
an
an
API
api
called
called
Twilio
twilio
combined
combined
with
with
Firebase
firebase
Cloud
cloud
Functions.
functions
Let's
let's
start
start
by
by
learning
learning
a
a
little
little
bit
bit
more
more
about
about
Twilio
twilio
from
from
their
their
promo
promo
video.
video
Twilio
twilio
is
is
a
a
global
global
communications
communications
platform
platform
for
for
developers.
developers
With
with
our
our
API
api
and
and
a
a
few
few
lines
lines
of
of
code,
code
you
you
can
can
add
add
messaging,
messaging
voice,
voice
and
and
video
video
to
to
your
your
applications
applications
in
in
the
the
programming
programming
language
language
you
you
already
already
use.
use
So
so
after
after
we
we
sign
sign
up
up
for
for
a
a
Twilio
twilio
account,
account
they're
they're
going
going
to
to
assign
assign
us
us
a
a
phone
phone
number,
number
and
and
we
we
can
can
use
use
that
that
phone
phone
number
number
to
to
send
send
text
text
messages
messages
to
to
our
our
users.
users
You
you
can
can
sign
sign
up
up
without
without
a
a
credit
credit
card,
card
and
and
they'll
they'll
give
give
you
you
a
a
$15
$15
credit
credit
to
to
experiment
experiment
with
with
the
the
API.
api
So
so
once
once
you've
you've
signed
signed
up,
up
make
make
note
note
of
of
your
your
phone
phone
number
number
as
as
well
well
as
as
your
your
API
api
keys,
keys
which
which
we're
we're
going
going
to
to
use
use
to
to
build
build
the
the
Firebase
firebase
Cloud
cloud
function.
function
But
but
before
before
we
we
get
get
to
to
that
that
point,
point
We're
we're
first
first
going
going
to
to
build
build
the
the
Angular
angular
component
component
for
for
the
the
front
front
end.
end
So
so
I've
i've
generated
generated
a
a
new
new
component
component
called
called
pizza
pizza
status,
status
and
and
it's
it's
going
going
to
to
use
use
the
the
reactive
reactive
forms
forms
module.
module
So
so
we
we
need
need
to
to
make
make
sure
sure
to
to
add
add
that
that
to
to
the
the
import
import
section
section
in
in
our
our
NG
ng
module.
module
We're
we're
using
using
a
a
reactive
reactive
form
form
because
because
we
we
need
need
to
to
validate
validate
the
the
phone
phone
number
number
carefully.
carefully
When
when
we
we
send
send
it
it
to
to
Twilio,
twilio
it
it
needs
needs
to
to
be
be
in
in
e164
e164
format,
format
which
which
is
is
a
a
string
string
that
that
looks
looks
like
like
this.
this
The
the
country
country
code
code
with
with
the
the
plus
plus
sign
sign
followed
followed
by
by
the
the
full
full
10
10
digit
digit
phone
phone
number.
number
So
so
let's
let's
see
see
how
how
we
we
can
can
make
make
this
this
possible
possible
in
in
the
the
pizza
pizza
status
status
component.
component
We
we
are
are
going
going
to
to
break
break
the
the
phone
phone
number
number
down
down
into
into
4
4
different
different
form
form
inputs
inputs
and
and
then
then
when
when
we
we
send
send
the
the
data
data
back
back
to
to
Firebase,
firebase
it's
it's
It's
it's
gonna
gonna
be
be
the
the
fully
fully
formatted
formatted
e164
e164
string.
string
And
and
for
for
this
this
lesson,
lesson
Firebase,
firebase
I
i
just
just
have
have
a
a
single
single
test
test
order
order
in
in
there
there
to
to
simulate
simulate
how
how
this
this
could
could
work.
work
In
in
the
the
component
component
itself,
itself
we'll
we'll
first
first
import
import
the
the
AngularFire
angularfire
database
database
as
as
well
well
as
as
the
the
reactive
reactive
form
form
parts
parts
that
that
we
we
need.
need
Then
then
we'll
we'll
set
set
a
a
variable
variable
for
for
the
the
form
form
itself
itself
and
and
set
set
that
that
to
to
the
the
type
type
of
of
form
form
group,
group
and
and
then
then
order
order
will
will
represent
represent
the
the
data
data
in
in
Firebase.
firebase
Then
then
we
we
can
can
add
add
the
the
AngularFire
angularfire
database
database
and
and
form
form
builder
builder
to
to
the
the
constructor.
constructor
And
and
during
during
ng
ng
oninit,
oninit
we'll
we'll
build
build
the
the
form
form
which
which
we'll
we'll
define
define
here
here
in
in
a
a
second.
second
And
and
then
then
we'll
we'll
set
set
the
the
order
order
variable
variable
to
to
the
the
object
object
that
that
we
we
have
have
saved
saved
in
in
Firebase.
firebase
The
the
next
next
thing
thing
I'm
i'm
gonna
gonna
do
do
is
is
create
create
a
a
helper
helper
function
function
to
to
validate
validate
the
the
min
min
and
and
max
max
length
length
of
of
any
any
given
given
form
form
input.
input
The
the
reason
reason
I'm
i'm
doing
doing
this
this
is
is
to
to
avoid
avoid
repeating
repeating
these
these
validators
validators
for
for
every
every
single
single
form
form
input.
input
But
but
they're
they're
just
just
validating
validating
that
that
the
the
input
input
value
value
is
is
a
a
number
number
and
and
that
that
it's
it's
within
within
a
a
certain
certain
length.
length
From
from
here,
here
we'll
we'll
use
use
Form
form
Builder
builder
to
to
create
create
the
the
actual
actual
form.
form
So
so
we
we
create
create
a
a
method
method
called
called
build
build
form
form
and
and
then
then
we
we
define
define
our
our
number
number
form
form
as
as
a
a
form
form
builder
builder
group.
group
Then
then
we
we
define
define
form
form
controls
controls
for
for
the
the
country
country
code,
code
the
the
area
area
code,
code
the
the
prefix,
prefix
and
and
the
the
line
line
number.
number
This
this
will
will
allow
allow
us
us
to
to
capture
capture
these
these
values
values
in
in
a
a
form
form
input,
input
but
but
we
we
still
still
need
need
to
to
format
format
it
it
as
as
e164.
e164
To
to
do
do
that,
that
we
we
can
can
define
define
a
a
getter
getter
and
and
we
we
can
can
just
just
grab
grab
the
the
value
value
from
from
the
the
form,
form
then
then
concatenate
concatenate
all
all
the
the
values
values
together
together
in
in
order
order
and
and
add
add
a
a
plus
plus
sign,
sign
and
and
we're
we're
good
good
to
to
go.
go
Now
now
we
we
can
can
send
send
this
this
value
value
to
to
Firebase
firebase
when
when
the
the
user
user
submits
submits
the
the
form.
form
We
we
already
already
have
have
the
the
order
order
data
data
as
as
a
a
Firebase
firebase
object
object
observable,
observable
so
so
we
we
can
can
just
just
call
call
order
order
dot
dot
update
update
with
with
the
the
phone
phone
number.
number
Now
now
let's
let's
put
put
this
this
all
all
together
together
in
in
the
the
HTML.
html
The
the
first
first
thing
thing
I
i
do
do
here
here
is
is
set
set
a
a
template
template
variable
variable
called
called
pizza
pizza
based
based
on
on
the
the
order
order
observable.
observable
So
so
So
so
we
we
do
do
that
that
by
by
calling
calling
order
order
async
async
as
as
pizza.
pizza
Then
then
I
i
wanna
wanna
add
add
a
a
custom
custom
class
class
for
for
each
each
possible
possible
order
order
state
state
that
that
the
the
pizza
pizza
can
can
be
be
in.
in
We
we
can
can
do
do
this
this
with
with
the
the
built
built
in
in
ngClass
ngclass
directive
directive
in
in
Angular.
angular
You
you
use
use
ngClass
ngclass
by
by
passing
passing
it
it
an
an
object
object
where
where
the
the
keys
keys
in
in
that
that
object
object
are
are
the
the
classes
classes
you
you
want
want
to
to
apply,
apply
and
and
the
the
value
value
is
is
an
an
expression
expression
that
that
resolves
resolves
to
to
true
true
or
or
false.
false
So
so
here
here
we'll
we'll
do
do
pizza
pizza
status
status
submitted,
submitted
then
then
we'll
we'll
do
do
the
the
is
is
dark
dark
CSS
css
class.
class
Then
then
we'll
we'll
add
add
a
a
couple
couple
more
more
possible
possible
statuses
statuses
such
such
as
as
on
on
its
its
way
way
from
from
the
the
delivery
delivery
driver
driver
and
and
delivered
delivered
to
to
the
the
end
end
user.
user
Then
then
we're
we're
going
going
to
to
jump
jump
down
down
here
here
to
to
the
the
reactive
reactive
form,
form
and
and
we
we
make
make
this
this
form
form
reactive
reactive
by
by
first
first
adding
adding
a
a
form
form
element
element
and
and
then
then
doing
doing
form
form
group
group
to
to
our
our
number
number
form
form
that
that
we
we
defined
defined
in
in
the
the
TypeScript.
typescript
Then
then
when
when
the
the
swarm's
swarm's
submitted,
submitted
we
we
use
use
this
this
n
n
g
g
submit
submit
event,
event
and
and
we'll
we'll
update
update
the
the
phone
phone
number
number
in
in
Firebase
firebase
also
also
with
with
that
that
function
function
we
we
defined
defined
in
in
the
the
TypeScript.
typescript
From
from
here,
here
we'll
we'll
build
build
the
the
actual
actual
form
form
inputs,
inputs
and
and
all
all
we
we
have
have
to
to
do
do
is
is
define
define
the
the
form
form
control
control
name
name
attribute
attribute
that
that
corresponds
corresponds
to
to
the
the
key
key
in
in
the
the
build
build
form
form
function
function
we
we
defined
defined
earlier.
earlier
So
so
that's
that's
the
the
country
country
code,
code
area
area
code,
code
etcetera.
etcetera
Then
then
lastly,
lastly
we'll
we'll
add
add
a
a
submit
submit
button
button
to
to
the
the
form
form
that
that
is
is
disabled
disabled
if
if
the
the
form
form
is
is
invalid
invalid
just
just
to
to
prevent
prevent
accidental
accidental
numbers
numbers
being
being
sent
sent
to
to
Firebase.
firebase
And
and
then
then
we
we
can
can
also
also
use
use
this
this
to
to
send
send
a
a
validation
validation
message
message
to
to
the
the
user
user
by
by
just
just
doing
doing
n
n
g
g
if
if
along
along
with
with
for
for
number
number
form
form
invalid
invalid
and
and
number
number
form
form
touched,
touched
which
which
will
will
show
show
the
the
user
user
a
a
validation
validation
message
message
if
if
they've
they've
started
started
to
to
interact
interact
with
with
the
the
form
form
and
and
it's
it's
invalid.
invalid
And
and
the
the
final
final
touch
touch
is
is
to
to
show
show
the
the
user
user
the
the
number
number
that
that
the
the
text
text
message
message
will
will
be
be
sent
sent
to
to
after
after
it's
it's
been
been
updated
updated
in
in
Firebase.
firebase
So
so
if
if
we
we
go
go
into
into
the
the
app,
app
we
we
can
can
type
type
in
in
the
the
form
form
and
and
we
we
can
can
see
see
we
we
get
get
the
the
red
red
phone
phone
number
number
is
is
not
not
valid
valid
message
message
until
until
it
it
is
is
valid,
valid
and
and
then
then
we
we
can
can
actually
actually
update
update
it
it
in
in
Firebase.
firebase
So
so
now
now
everything's
everything's
in
in
place
place
to
to
start
start
sending
sending
text
text
messages.
messages
We
we
just
just
need
need
to
to
build
build
the
the
Firebase
firebase
Cloud
cloud
Function.
function
I've
i've
added
added
a
a
couple
couple
extra
extra
buttons
buttons
here
here
just
just
to
to
make
make
this
this
a
a
little
little
bit
bit
easier
easier
to
to
show.
show
Whenever
whenever
these
these
buttons
buttons
get
get
clicked,
clicked
they
they
will
will
update
update
the
the
status
status
in
in
Firebase
firebase
which
which
will
will
trigger
trigger
the
the
cloud
cloud
function
function
and
and
tell
tell
Twilio
twilio
to
to
send
send
a
a
text
text
message.
message
You
you
could
could
also
also
just
just
edit
edit
these
these
values
values
manually
manually
in
in
the
the
Firebase
firebase
console
console
if
if
you
you
find
find
that
that
easier.
easier
So
so
the
the
first
first
thing
thing
you
you
need
need
to
to
do
do
is
is
initialize
initialize
Cloud
cloud
Functions
functions
if
if
they're
they're
not
not
already.
already
You
you
can
can
do
do
that
that
by
by
running
running
Firebase
firebase
init.
init
And
and
then
then
once
once
you've
you've
done
done
that,
that
we
we
need
need
to
to
set
set
the
the
Twilio
twilio
API
api
keys
keys
as
as
environment
environment
variables.
variables
We
we
can
can
do
do
that
that
with
with
Firebase
firebase
functions
functions
config
config
set,
set
and
and
you
you
can
can
also
also
just
just
copy
copy
and
and
paste
paste
this
this
from
from
the
the
full
full
lesson
lesson
code.
code
From
from
there,
there
make
make
sure
sure
you're
you're
in
in
the
the
functions
functions
directory.
directory
Then
then
we
we
can
can
install
install
the
the
Twilio
twilio
helper
helper
package
package
for
for
Node.
node
Js
js
with
with
npm
npm
install
install
Twilio
twilio
with
with
the
the
save
save
flag.
flag
Okay.
okay
Now
now
we
we
can
can
go
go
into
into
index.
index
Js
js
and
and
build
build
the
the
actual
actual
cloud
cloud
function.
function
We
we
first
first
import
import
the
the
admin
admin
database
database
and
and
initialize
initialize
it
it
with
with
our
our
Firebase
firebase
config.
config
From
from
there,
there
we
we
can
can
import
import
Twilio,
twilio
and
and
we'll
we'll
initialize
initialize
that
that
with
with
the
the
environment
environment
variables
variables
that
that
we
we
set
set
earlier.
earlier
Then
then
we
we
also
also
need
need
to
to
set
set
a
a
variable
variable
for
for
the
the
phone
phone
number
number
that
that
was
was
given
given
to
to
us
us
by
by
Twilio.
twilio
You
you
can
can
actually
actually
set
set
this
this
as
as
an
an
environment
environment
variable
variable
instead
instead
of
of
hard
hard
coding
coding
it
it
like
like
I
i
am
am
here.
here
Then
then
I'm
i'm
going
going
to
to
put
put
together
together
another
another
validation
validation
function
function
for
for
the
the
e164
e164
format.
format
This
this
time
time
I
i
just
just
check
check
the
the
number
number
against
against
a
a
regular
regular
expression
expression
that
that
that
that
will
will
return
return
true
true
if
if
it
it
meets
meets
that
that
pattern.
pattern
So
so
we'll
we'll
build
build
the
the
actual
actual
cloud
cloud
function
function
by
by
doing
doing
exports,
exports
text
text
status,
status
and
and
then
then
we'll
we'll
do
do
a
a
database
database
cloud
cloud
function
function
that
that
references
references
the
the
status
status
point
point
in
in
the
the
database.
database
So
so
in
in
this
this
case,
case
it's
it's
orders
orders
with
with
the
the
order
order
push
push
key
key
and
and
then
then
the
the
status
status
property.
property
Then
then
we
we
can
can
use
use
the
the
on
on
update
update
trigger
trigger
to
to
run
run
this
this
function
function
whenever
whenever
the
the
value
value
changes,
changes
but
but
it
it
won't
won't
run
run
the
the
function
function
on
on
create
create
or
or
delete
delete
operations,
operations
which
which
is
is
exactly
exactly
what
what
we
we
want.
want
When
when
this
this
function
function
is
is
triggered,
triggered
we'll
we'll
first
first
save
save
the
the
order
order
key
key
so
so
we
we
can
can
reference
reference
that
that
point
point
in
in
the
the
database
database
to
to
pull
pull
all
all
the
the
data
data
for
for
a
a
particular
particular
order.
order
So
so
we
we
can
can
do
do
that
that
by
by
running
running
admin
admin
database
database
and
and
point
point
it
it
to
to
the
the
order
order
key.
key
So
so
we
we
can
can
pull
pull
the
the
order
order
data
data
once
once
and
and
then
then
once
once
we
we
have
have
that
that
value
value
back,
back
we'll
we'll
return
return
it
it
to
to
another
another
Promise.
promise
At
at
this
this
point,
point
we
we
have
have
all
all
the
the
data
data
we
we
need
need
to
to
build
build
the
the
text
text
message
message
and
and
send
send
the
the
API
api
call
call
off
off
to
to
Twilio.
twilio
So
so
we'll
we'll
get
get
the
the
current
current
order
order
status,
status
then
then
we'll
we'll
get
get
the
the
phone
phone
number
number
associated
associated
with
with
that
that
order,
order
and
and
then
then
we'll
we'll
run
run
our
our
validation
validation
function
function
one
one
more
more
time
time
just
just
so
so
we
we
don't
don't
send
send
any
any
unnecessary
unnecessary
requests
requests
to
to
Twilio.
twilio
If
if
it's
it's
not
not
the
the
right
right
format,
format
we'll
we'll
just
just
go
go
ahead
ahead
and
and
throw
throw
an
an
error.
error
Then
then
to
to
send
send
a
a
text,
text
all
all
we
we
need
need
to
to
do
do
is
is
define
define
3
3
different
different
values,
values
and
and
that's
that's
the
the
text
text
body
body
itself.
itself
That's
that's
the
the
actual
actual
message
message
the
the
end
end
user
user
will
will
see.
see
Then
then
we
we
define
define
the
the
message
message
the
the
number
number
is
is
being
being
sent
sent
to,
to
which
which
is
is
the
the
user's
user's
number,
number
and
and
the
the
number
number
the
the
message
message
is
is
being
being
sent
sent
from,
from
which
which
is
is
our
our
Twilio
twilio
account
account
phone
phone
number.
number
Then
then
to
to
actually
actually
make
make
this
this
API
api
call
call
and
and
send
send
the
the
text
text
to
to
the
the
user,
user
we
we
just
just
need
need
to
to
call
call
client
client
messages
messages
create
create
and
and
pass
pass
it
it
the
the
text
text
message
message
as
as
the
the
argument.
argument
This
this
is
is
going
going
to
to
return
return
a
a
promise
promise
also,
also
so
so
we
we
can
can
just
just
call
call
then,
then
and
and
at
at
this
this
point,
point
we'll
we'll
also
also
catch
catch
any
any
errors.
errors
So
so
that's
that's
all
all
it
it
takes
takes
to
to
start
start
sending
sending
text
text
messages
messages
to
to
your
your
users.
users
It's
it's
pretty
pretty
simple
simple
when
when
you
you
think
think
about
about
how
how
powerful
powerful
that
that
feature
feature
can
can
be.
be
After
after
you
you
deploy
deploy
the
the
function
function
to
to
Firebase,
firebase
you
you
should
should
be
be
able
able
to
to
go
go
into
into
the
the
app
app
and
and
update
update
the
the
status.
status
And
and
then
then
you'll
you'll
see
see
the
the
text
text
message
message
come
come
through
through
on
on
whichever
whichever
phone
phone
number
number
you
you
provided.
provided
That's
that's
it
it
for
for
SMS
sms
text
text
with
with
Twilio.
twilio
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
get
get
involved
involved
in
in
this
this
project,
project
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase
angularfirebase
dotcom.
dotcom
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speakers discuss the use of Angular app and Twilio API for text messaging and the process of building a Angular component for the front end. They use Form Builder to create a form and set a variable for the phone number, which is then updated in obtain the response. The process involves updating the status and sending a text message to the user, and the service is powerful with a free book and project consulting service.
Send SMS Text Messages with Twilio and Firebase
Sending text messages through your app can bring the user experience to the next level. In this lesson, I have an Angular app where users can order a pizza for delivery. My goal is to update the users with a text message every time their order status changes. So when the pizza goes from cooking to on its way, the user gets notified directly in their phone. To handle the text messaging, we're gonna use an API called Twilio combined with Firebase Cloud Functions. Let's start by learning a little bit more about Twilio from their promo video. Twilio is a global communications platform for developers. With our API and a few lines of code, you can add messaging, voice, and video to your applications in the programming language you already use. So after we sign up for a Twilio account, they're going to assign us a phone number, and we can use that phone number to send text messages to our users. You can sign up without a credit card, and they'll give you a $15 credit to experiment with the API. So once you've signed up, make note of your phone number as well as your API keys, which we're going to use to build the Firebase Cloud function. But before we get to that point, We're first going to build the Angular component for the front end. So I've generated a new component called pizza status, and it's going to use the reactive forms module. So we need to make sure to add that to the import section in our NG module. We're using a reactive form because we need to validate the phone number carefully. When we send it to Twilio, it needs to be in e164 format, which is a string that looks like this. The country code with the plus sign followed by the full 10 digit phone number. So let's see how we can make this possible in the pizza status component. We are going to break the phone number down into 4 different form inputs and then when we send the data back to Firebase, it's It's gonna be the fully formatted e164 string. And for this lesson, Firebase, I just have a single test order in there to simulate how this could work. In the component itself, we'll first import the AngularFire database as well as the reactive form parts that we need. Then we'll set a variable for the form itself and set that to the type of form group, and then order will represent the data in Firebase. Then we can add the AngularFire database and form builder to the constructor. And during ng oninit, we'll build the form which we'll define here in a second. And then we'll set the order variable to the object that we have saved in Firebase. The next thing I'm gonna do is create a helper function to validate the min and max length of any given form input. The reason I'm doing this is to avoid repeating these validators for every single form input. But they're just validating that the input value is a number and that it's within a certain length. From here, we'll use Form Builder to create the actual form. So we create a method called build form and then we define our number form as a form builder group. Then we define form controls for the country code, the area code, the prefix, and the line number. This will allow us to capture these values in a form input, but we still need to format it as e164. To do that, we can define a getter and we can just grab the value from the form, then concatenate all the values together in order and add a plus sign, and we're good to go. Now we can send this value to Firebase when the user submits the form. We already have the order data as a Firebase object observable, so we can just call order dot update with the phone number. Now let's put this all together in the HTML. The first thing I do here is set a template variable called pizza based on the order observable. So So we do that by calling order async as pizza. Then I wanna add a custom class for each possible order state that the pizza can be in. We can do this with the built in ngClass directive in Angular. You use ngClass by passing it an object where the keys in that object are the classes you want to apply, and the value is an expression that resolves to true or false. So here we'll do pizza status submitted, then we'll do the is dark CSS class. Then we'll add a couple more possible statuses such as on its way from the delivery driver and delivered to the end user. Then we're going to jump down here to the reactive form, and we make this form reactive by first adding a form element and then doing form group to our number form that we defined in the TypeScript. Then when the swarm's submitted, we use this n g submit event, and we'll update the phone number in Firebase also with that function we defined in the TypeScript. From here, we'll build the actual form inputs, and all we have to do is define the form control name attribute that corresponds to the key in the build form function we defined earlier. So that's the country code, area code, etcetera. Then lastly, we'll add a submit button to the form that is disabled if the form is invalid just to prevent accidental numbers being sent to Firebase. And then we can also use this to send a validation message to the user by just doing n g if along with for number form invalid and number form touched, which will show the user a validation message if they've started to interact with the form and it's invalid. And the final touch is to show the user the number that the text message will be sent to after it's been updated in Firebase. So if we go into the app, we can type in the form and we can see we get the red phone number is not valid message until it is valid, and then we can actually update it in Firebase. So now everything's in place to start sending text messages. We just need to build the Firebase Cloud Function. I've added a couple extra buttons here just to make this a little bit easier to show. Whenever these buttons get clicked, they will update the status in Firebase which will trigger the cloud function and tell Twilio to send a text message. You could also just edit these values manually in the Firebase console if you find that easier. So the first thing you need to do is initialize Cloud Functions if they're not already. You can do that by running Firebase init. And then once you've done that, we need to set the Twilio API keys as environment variables. We can do that with Firebase functions config set, and you can also just copy and paste this from the full lesson code. From there, make sure you're in the functions directory. Then we can install the Twilio helper package for Node. Js with npm install Twilio with the save flag. Okay. Now we can go into index. Js and build the actual cloud function. We first import the admin database and initialize it with our Firebase config. From there, we can import Twilio, and we'll initialize that with the environment variables that we set earlier. Then we also need to set a variable for the phone number that was given to us by Twilio. You can actually set this as an environment variable instead of hard coding it like I am here. Then I'm going to put together another validation function for the e164 format. This time I just check the number against a regular expression that that will return true if it meets that pattern. So we'll build the actual cloud function by doing exports, text status, and then we'll do a database cloud function that references the status point in the database. So in this case, it's orders with the order push key and then the status property. Then we can use the on update trigger to run this function whenever the value changes, but it won't run the function on create or delete operations, which is exactly what we want. When this function is triggered, we'll first save the order key so we can reference that point in the database to pull all the data for a particular order. So we can do that by running admin database and point it to the order key. So we can pull the order data once and then once we have that value back, we'll return it to another Promise. At this point, we have all the data we need to build the text message and send the API call off to Twilio. So we'll get the current order status, then we'll get the phone number associated with that order, and then we'll run our validation function one more time just so we don't send any unnecessary requests to Twilio. If it's not the right format, we'll just go ahead and throw an error. Then to send a text, all we need to do is define 3 different values, and that's the text body itself. That's the actual message the end user will see. Then we define the message the number is being sent to, which is the user's number, and the number the message is being sent from, which is our Twilio account phone number. Then to actually make this API call and send the text to the user, we just need to call client messages create and pass it the text message as the argument. This is going to return a promise also, so we can just call then, and at this point, we'll also catch any errors. So that's all it takes to start sending text messages to your users. It's pretty simple when you think about how powerful that feature can be. After you deploy the function to Firebase, you should be able to go into the app and update the status. And then you'll see the text message come through on whichever phone number you provided. That's it for SMS text with Twilio. If this video helped you, please like and subscribe. And if you wanna get involved in this project, consider becoming a pro member at angularfirebase dotcom. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
The speakers discuss the use of Angular app and Twilio API for text messaging and the process of building a Angular component for the front end. They use Form Builder to create a form and set a variable for the phone number, which is then updated in obtain the response. The process involves updating the status and sending a text message to the user, and the service is powerful with a free book and project consulting service.