Now that you know how to send emails from no Jay S. let's actually integrate send grid into the task
manage your application.
Right now we're just creating a script that sends off an email.
We actually want to integrate this into the task app.
So when a user creates an account they get a welcome email welcoming them to the app location and you
could use that as a way to start a conversation about what they hope to get out of your product.
And if they cancel their account we'll follow up sending them one last email maybe asking them why they've
chosen to cancel and what we could have done to have kept them as a customer.
So let's go ahead and see what this would take.
Now the account J S file is going to stay in place.
The only difference is that we're going to setup functions that get called elsewhere in the application
and that's how emails will get sent.
So for example in the routers file we have the user router.
This first route runs when a user signs up.
What we want to do is call a function defined in account dot J.
S that actually sends an email to that new user.
The text of the email will include their name and the two value will be the email address they registered
with.
So to get started that means we don't want to have just a call to send sitting at the root of this file.
I still want to load the library in and I do want to set up the API key.
The next thing I'm going to do though is create a function which I'll eventually export from the file.
So right here a new constant send welcome email.
We're going to set it up as an arrow function.
And right here we can go ahead and accept a couple of arguments.
Now I could take the entire user Document in as a whole or I could accept the properties I need as individual
arguments such as email and name Either approach would get the job done.
I'll go ahead and have two separate arguments one for the email address of the new user and the second
one for their name.
Now what do we want to do in the function body.
Well I'll use s g mail dot send it to send an email off.
We're going to provide the object just like we did before and we'll start off with who the email is
going to it's going to the user that just created the account and so I'll provide that as the value
for two.
And then after that we have from now in the long run you're going to want to get a custom domain associate
that with your account and use an email address at that domain.
For now though anything works I'll just use Andrew at Mead dot I.
Oh.
Next up we want to provide a subject.
So right here we can have the subject property set up and we can pick whatever we want.
I could say as an example.
Thanks for joining in or welcome to the app or whatever makes the most sense for you.
Then down below we'll go ahead and set up our text.
If we wanted to we could also choose to set up an H2 UML version to send right here.
Let's go ahead and set the text version equal to.
And we're going to inject the user's name right inside of the message.
Now for this we'll use the yes 6 template string feature.
So that is an opening and closing back tick.
You can find that key to the left of the one key on your keyboard and we'll provide our message.
I'm gonna say something like Welcome to the app followed by their name.
So I'll just say something like name for the moment we'll actually inject that in a second and then
after that I could say let me know how you get along with the app.
Perfect.
So just a little message welcoming them.
Now when we use template strings when we use these back texts we can easily inject variables right inside.
So it's just an alternative way to concatenate strings.
Right here I'm going to remove the place holder and we're actually going to inject the values stored
in the name variable right here to do that in a template string that is the dollar sign.
Curly braces and in here we can reference name.
Perfect.
Now it's important to note that we can only use this syntax in template strings with those back texts.
You're not going to be able to do this with single or double quotes.
Now that we have this in place let's go ahead and export the function so it can actually be used by
other files down below.
I'm going to set module dot exports equal to an object.
And the reason I'm setting it equal to an object is that we're going to export multiple functions from
this file and this is the way to export multiple things.
We export an object with various properties on it for us we're going to set one up called Send a welcome
email.
And the value is coming from a variable with these same name.
So I can take advantage of the iOS 6 shorthand syntax.
Now we actually want to go into user dot J s load of that function in and call it inside of this route.
So the new user gets that email right here.
Let's go ahead and require it.
I'm going to create a new constant and I'm going to use yes six D structuring to grab send welcome e
mail off of the object that I just set up and then I'll use require to load it in that's dot dot to
get out of the routers folder followed by a forward slash e-mails then forward slash account.
Perfect.
Now we can call this with the email and the name and wherever we'd like and I'm going to go ahead and
do that right here after the user is saved so I'll call send welcome email providing the email address.
We know that a user has won because validation just worked when we saved it up above.
That is user dot email followed by their name user dot name.
And there we go.
Now we have a system for sending every new user a welcome email to their inbox.
Now let's test this out and to test this out.
We actually have to interact with our application.
So I have to start these server up.
That is NPM run Dev.
Now when we start the server up no e-mails are getting sent it's only when a new user signs up.
So let's head over to the postman and actually get that done.
I'm going to close down all of the open requests I have so far so we can stay nice and organized.
Now this one was the tab for posting to that generic upload route which we actually removed from the
app so I can close that down and there's no need to save it.
Now I'm going to go over to create user but we are going to change the data.
I do not own example dot com so I wouldn't actually get that email.
I'm going to sign up with my email address to make sure the welcome email arrives in my inbox.
And here I'm using my full name Andrew Meade which I would also expect to see as part of the text for
that email.
Now we can take a quick moment to actually send that off using send down below we can see how things
went.
It seemed to have gone well I have my 2 0 1 created status.
Let's head over to my inbox in the browser and see if I have the welcome e-mail now once again because
you don't have a custom domain set up there's a decent chance that showing up in your spam folder.
Right here though I'm getting thanks for joining in.
And if I crack it open I can see.
Welcome to the app.
Andrew Meade.
So my name is embedded right inside of there.
Let me know how things go with the application.
So there we go.
This is how we can send e-mails to the user as they interact with our application.
Now in general we want to keep all of the logic around sending e-mails and managing the send grid module
in its own file.
There's no need to do all of that right inside of the router.
It's much nicer to just call a function that handles all of that behavior for you.
Now you might be wondering if this process is a synchronous.
And it definitely is right here descend a method that actually returns a promise.
So he could use async await with that and then over in the user router.
I could await the email being sent before I continue on.
There's actually no need to use a wait here though.
We don't need node to actually wait for these send grid server to send a response back.
We're just going to send that off to them and the user will get the email in a minute or two when they
actually check their email.
There's no need to make sure that this completes before they get their status code back.
Though once again send does return a promise.
So you could set that up if you wanted to.
Now right here on this object we could also choose to set up an HCM El version by specifying that and
if their email client supports HDL that'll be rendered.
So right here you could use all of the HDL elements you're used to.
And you could create a complex email with images and all sorts of other fancy features though for the
moment a basic text email is going to get the job done.
And there are actually studies out there that show that text emails from web applications have a higher
open and response rate because it feels real it doesn't feel like some big marketing company is sending
you a fancy e-mail.
It feels like someone typed something out and sent it to you personally.
Obviously that's not the case but it gives off that sort of effect.
Now if you do own a custom domain and you want to set that up with these send grid service you can head
over to the send grid a dashboard in the left hand navigation bar you would go to settings and then
down below there's a section called sender authentication.
This is where you can register a new domain.
Now with this you need to prove you own the domain by changing the DNS records at that domain.
And that's going to be a bit different depending on where you're getting your domain through.
There are a ton of different domain registrars out there so you'd need to refer to these specific documentation
for your specific DNS management system to figure out how you could change it.
And they send grid instructions do make that as easy as possible.
But this is where you would go when you're ready to create a real application and you have that custom
domain you want to set up for the moment let's go ahead and wrap this video up with a challenge.
It's going to be up to you to figure out how to send an email to a user just when they cancel their
account.
So when they cancel we're not going to stop them from canceling.
But we will follow up and see if we could have done anything to have kept them as a customer.
Right here I have some challenged comments outlining what I'd like you to do.
Right here it's going to be up to you to send an email to the user on cancellation so you'll be setting
up a new function for sending that email in this file and you'll be exporting it from this file and
like with send welcome email.
The new function you create should accept the email and name as arguments down below.
You also want to make sure to send the e-mail to that user and include their name into your cancellation
email text.
You could say something like Good bye followed by their name.
Is there anything we could have done to have kept you on board or something like that.
The choice of the text is yours.
Now once you have the function in place sending the email you want to make sure to call it inside of
the route where users can delete their account.
And finally you want to test your work.
So just after someone's account is successfully removed you'll call that new function then go over to
post man delete the account check your inbox and make sure you see the cancellation email showing up.
Take some time to knock that out test your work and when you're done it come back and click play
how that go.
Let's go ahead and get to it with step number one.
We want to create a new function right here an account dot J S so a new constant I can call this one
something like send cancellation email.
Now you could have chosen a different name for the function these specifics are not important as long
as it's working for you.
And right here we want to make sure we accept the e-mail and the name once again and down below.
We want to make sure we export this function.
All we're going to do is add it as another property on the object we're exporting.
So send cancellation e-mail
and then up above we can go through the process of actually calling s g mail dot send.
I'm going to call that function and provide the necessary data so to once again will come from the email
parameter up above and from we'll be the same from address I've been using so far in this section.
Andrew at Meade dot I O.
Next up we're going to have the subject for this one and we could say something like sorry to see you
go.
Next up we'll set up the text and we want to include their name in that one as well.
So I'll use a template string and once again.
And right here I could say something like Good bye comma followed by their name then the next sentence
I hope to see you back some time soon.
Perfect.
So now that we have this in place we can go ahead and make sure that this function gets called at this
point in our API code where users accounts are deleted.
Right here I'm going to start by removing the challenge comments down below as we're done with this
file.
I'm going to save account dot J yes so all of this code actually runs an over in user dot J S we're
going to grab the other thing from this object.
So I'm going to continue to build out my object a d structuring to grab send cancellation email perfect
last up.
We have to call this function at the correct point in the code down below.
We have our router dot delete.
Call where user profiles are removed just after the user is removed.
I'll call send a cancellation email.
I'm going to pass in the email that is request dot user dot email and I'll pass it in the name as well.
Request dot user dot name.
Now we can go ahead and save user dot J s making sure all of our edited files are saved and we're actually
going to delete that user account from postman and make sure we do see that email in our inbox.
So over here the last thing I did was create the account down below.
I'm gonna go to delete user and fire that off right here.
It did seem to work correctly.
Let's go ahead and check our inbox and make sure we have that new cancellation email.
So over in google chrome for me I'll be heading back over to my inbox and right here I do see.
Sorry to see you go down below we have our text message.
Goodbye Andrew me and I hope to see you back sometime soon.
So using these two emails we can start a conversation with our users as they use the application we
can use this one to maybe figure out why they're joining what features they're looking for and we can
use this one to figure out why they've left and users would actually be able to reply to that email
to start a conversation with you.
And this is something you definitely want to allow for getting feedback from your users is obviously
ideal.
Now that we have this in place what I want to focus on is how we can better protect the api keys in
our project.
Right now we have api keys directly in our JavaScript file and this is typically a bad idea.
And the next lesson we'll talk about why it's typically a bad idea and we'll also talk about how we
can improve the setup removing the actual API key values from our javascript code.
I'm excited to get to that.
So let's jump in to the next one.