1
00:00:00,180 --> 00:00:05,850
Now that you know how to send emails from no Jay S. let's actually integrate send grid into the task

2
00:00:05,880 --> 00:00:07,380
manage your application.

3
00:00:07,380 --> 00:00:10,730
Right now we're just creating a script that sends off an email.

4
00:00:10,740 --> 00:00:14,250
We actually want to integrate this into the task app.

5
00:00:14,340 --> 00:00:20,220
So when a user creates an account they get a welcome email welcoming them to the app location and you

6
00:00:20,220 --> 00:00:24,850
could use that as a way to start a conversation about what they hope to get out of your product.

7
00:00:25,020 --> 00:00:31,080
And if they cancel their account we'll follow up sending them one last email maybe asking them why they've

8
00:00:31,080 --> 00:00:36,030
chosen to cancel and what we could have done to have kept them as a customer.

9
00:00:36,030 --> 00:00:37,860
So let's go ahead and see what this would take.

10
00:00:37,860 --> 00:00:41,460
Now the account J S file is going to stay in place.

11
00:00:41,460 --> 00:00:47,940
The only difference is that we're going to setup functions that get called elsewhere in the application

12
00:00:48,150 --> 00:00:50,730
and that's how emails will get sent.

13
00:00:50,730 --> 00:00:54,990
So for example in the routers file we have the user router.

14
00:00:55,140 --> 00:00:58,230
This first route runs when a user signs up.

15
00:00:58,230 --> 00:01:02,520
What we want to do is call a function defined in account dot J.

16
00:01:02,520 --> 00:01:07,220
S that actually sends an email to that new user.

17
00:01:07,290 --> 00:01:13,860
The text of the email will include their name and the two value will be the email address they registered

18
00:01:13,860 --> 00:01:14,790
with.

19
00:01:14,790 --> 00:01:21,270
So to get started that means we don't want to have just a call to send sitting at the root of this file.

20
00:01:21,270 --> 00:01:26,010
I still want to load the library in and I do want to set up the API key.

21
00:01:26,070 --> 00:01:31,170
The next thing I'm going to do though is create a function which I'll eventually export from the file.

22
00:01:31,200 --> 00:01:36,650
So right here a new constant send welcome email.

23
00:01:36,780 --> 00:01:39,550
We're going to set it up as an arrow function.

24
00:01:39,600 --> 00:01:43,790
And right here we can go ahead and accept a couple of arguments.

25
00:01:43,800 --> 00:01:51,210
Now I could take the entire user Document in as a whole or I could accept the properties I need as individual

26
00:01:51,240 --> 00:01:56,930
arguments such as email and name Either approach would get the job done.

27
00:01:57,000 --> 00:02:03,480
I'll go ahead and have two separate arguments one for the email address of the new user and the second

28
00:02:03,480 --> 00:02:05,310
one for their name.

29
00:02:05,310 --> 00:02:07,860
Now what do we want to do in the function body.

30
00:02:07,890 --> 00:02:12,250
Well I'll use s g mail dot send it to send an email off.

31
00:02:12,270 --> 00:02:17,610
We're going to provide the object just like we did before and we'll start off with who the email is

32
00:02:17,610 --> 00:02:23,430
going to it's going to the user that just created the account and so I'll provide that as the value

33
00:02:23,430 --> 00:02:24,500
for two.

34
00:02:24,540 --> 00:02:30,930
And then after that we have from now in the long run you're going to want to get a custom domain associate

35
00:02:30,930 --> 00:02:35,310
that with your account and use an email address at that domain.

36
00:02:35,340 --> 00:02:39,390
For now though anything works I'll just use Andrew at Mead dot I.

37
00:02:39,400 --> 00:02:40,220
Oh.

38
00:02:40,320 --> 00:02:42,770
Next up we want to provide a subject.

39
00:02:42,780 --> 00:02:48,220
So right here we can have the subject property set up and we can pick whatever we want.

40
00:02:48,240 --> 00:02:50,280
I could say as an example.

41
00:02:50,280 --> 00:02:57,350
Thanks for joining in or welcome to the app or whatever makes the most sense for you.

42
00:02:57,480 --> 00:03:00,420
Then down below we'll go ahead and set up our text.

43
00:03:00,420 --> 00:03:06,630
If we wanted to we could also choose to set up an H2 UML version to send right here.

44
00:03:06,630 --> 00:03:10,250
Let's go ahead and set the text version equal to.

45
00:03:10,620 --> 00:03:15,110
And we're going to inject the user's name right inside of the message.

46
00:03:15,120 --> 00:03:18,870
Now for this we'll use the yes 6 template string feature.

47
00:03:18,870 --> 00:03:21,870
So that is an opening and closing back tick.

48
00:03:21,900 --> 00:03:28,620
You can find that key to the left of the one key on your keyboard and we'll provide our message.

49
00:03:28,620 --> 00:03:33,440
I'm gonna say something like Welcome to the app followed by their name.

50
00:03:33,690 --> 00:03:39,120
So I'll just say something like name for the moment we'll actually inject that in a second and then

51
00:03:39,120 --> 00:03:45,900
after that I could say let me know how you get along with the app.

52
00:03:45,900 --> 00:03:46,760
Perfect.

53
00:03:46,770 --> 00:03:49,280
So just a little message welcoming them.

54
00:03:49,380 --> 00:03:56,280
Now when we use template strings when we use these back texts we can easily inject variables right inside.

55
00:03:56,310 --> 00:03:59,970
So it's just an alternative way to concatenate strings.

56
00:03:59,980 --> 00:04:06,000
Right here I'm going to remove the place holder and we're actually going to inject the values stored

57
00:04:06,000 --> 00:04:12,230
in the name variable right here to do that in a template string that is the dollar sign.

58
00:04:12,240 --> 00:04:16,020
Curly braces and in here we can reference name.

59
00:04:16,020 --> 00:04:17,010
Perfect.

60
00:04:17,010 --> 00:04:22,730
Now it's important to note that we can only use this syntax in template strings with those back texts.

61
00:04:22,800 --> 00:04:27,090
You're not going to be able to do this with single or double quotes.

62
00:04:27,090 --> 00:04:32,130
Now that we have this in place let's go ahead and export the function so it can actually be used by

63
00:04:32,130 --> 00:04:34,230
other files down below.

64
00:04:34,230 --> 00:04:38,390
I'm going to set module dot exports equal to an object.

65
00:04:38,520 --> 00:04:43,560
And the reason I'm setting it equal to an object is that we're going to export multiple functions from

66
00:04:43,560 --> 00:04:47,610
this file and this is the way to export multiple things.

67
00:04:47,610 --> 00:04:55,290
We export an object with various properties on it for us we're going to set one up called Send a welcome

68
00:04:55,350 --> 00:04:56,210
email.

69
00:04:56,220 --> 00:04:59,780
And the value is coming from a variable with these same name.

70
00:04:59,970 --> 00:05:04,440
So I can take advantage of the iOS 6 shorthand syntax.

71
00:05:04,440 --> 00:05:12,210
Now we actually want to go into user dot J s load of that function in and call it inside of this route.

72
00:05:12,390 --> 00:05:15,870
So the new user gets that email right here.

73
00:05:15,900 --> 00:05:19,030
Let's go ahead and require it.

74
00:05:19,080 --> 00:05:26,890
I'm going to create a new constant and I'm going to use yes six D structuring to grab send welcome e

75
00:05:26,900 --> 00:05:33,870
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

76
00:05:33,870 --> 00:05:41,070
get out of the routers folder followed by a forward slash e-mails then forward slash account.

77
00:05:41,100 --> 00:05:42,270
Perfect.

78
00:05:42,270 --> 00:05:47,190
Now we can call this with the email and the name and wherever we'd like and I'm going to go ahead and

79
00:05:47,190 --> 00:05:56,610
do that right here after the user is saved so I'll call send welcome email providing the email address.

80
00:05:56,610 --> 00:06:01,840
We know that a user has won because validation just worked when we saved it up above.

81
00:06:02,010 --> 00:06:07,040
That is user dot email followed by their name user dot name.

82
00:06:07,050 --> 00:06:08,400
And there we go.

83
00:06:08,400 --> 00:06:15,060
Now we have a system for sending every new user a welcome email to their inbox.

84
00:06:15,060 --> 00:06:17,630
Now let's test this out and to test this out.

85
00:06:17,640 --> 00:06:20,330
We actually have to interact with our application.

86
00:06:20,340 --> 00:06:22,570
So I have to start these server up.

87
00:06:22,650 --> 00:06:24,660
That is NPM run Dev.

88
00:06:24,900 --> 00:06:30,170
Now when we start the server up no e-mails are getting sent it's only when a new user signs up.

89
00:06:30,180 --> 00:06:33,850
So let's head over to the postman and actually get that done.

90
00:06:33,930 --> 00:06:40,200
I'm going to close down all of the open requests I have so far so we can stay nice and organized.

91
00:06:40,200 --> 00:06:46,380
Now this one was the tab for posting to that generic upload route which we actually removed from the

92
00:06:46,380 --> 00:06:50,260
app so I can close that down and there's no need to save it.

93
00:06:50,400 --> 00:06:54,930
Now I'm going to go over to create user but we are going to change the data.

94
00:06:54,930 --> 00:07:00,090
I do not own example dot com so I wouldn't actually get that email.

95
00:07:00,180 --> 00:07:06,510
I'm going to sign up with my email address to make sure the welcome email arrives in my inbox.

96
00:07:06,510 --> 00:07:13,110
And here I'm using my full name Andrew Meade which I would also expect to see as part of the text for

97
00:07:13,110 --> 00:07:14,270
that email.

98
00:07:14,280 --> 00:07:20,730
Now we can take a quick moment to actually send that off using send down below we can see how things

99
00:07:20,730 --> 00:07:21,270
went.

100
00:07:21,330 --> 00:07:26,270
It seemed to have gone well I have my 2 0 1 created status.

101
00:07:26,340 --> 00:07:32,520
Let's head over to my inbox in the browser and see if I have the welcome e-mail now once again because

102
00:07:32,520 --> 00:07:38,000
you don't have a custom domain set up there's a decent chance that showing up in your spam folder.

103
00:07:38,100 --> 00:07:41,030
Right here though I'm getting thanks for joining in.

104
00:07:41,160 --> 00:07:43,290
And if I crack it open I can see.

105
00:07:43,290 --> 00:07:44,570
Welcome to the app.

106
00:07:44,580 --> 00:07:45,630
Andrew Meade.

107
00:07:45,660 --> 00:07:48,360
So my name is embedded right inside of there.

108
00:07:48,360 --> 00:07:51,550
Let me know how things go with the application.

109
00:07:51,570 --> 00:07:52,580
So there we go.

110
00:07:52,590 --> 00:07:57,960
This is how we can send e-mails to the user as they interact with our application.

111
00:07:58,050 --> 00:08:04,770
Now in general we want to keep all of the logic around sending e-mails and managing the send grid module

112
00:08:04,830 --> 00:08:06,300
in its own file.

113
00:08:06,330 --> 00:08:09,690
There's no need to do all of that right inside of the router.

114
00:08:09,690 --> 00:08:14,850
It's much nicer to just call a function that handles all of that behavior for you.

115
00:08:14,850 --> 00:08:17,960
Now you might be wondering if this process is a synchronous.

116
00:08:17,970 --> 00:08:23,490
And it definitely is right here descend a method that actually returns a promise.

117
00:08:23,520 --> 00:08:28,380
So he could use async await with that and then over in the user router.

118
00:08:28,380 --> 00:08:32,410
I could await the email being sent before I continue on.

119
00:08:32,490 --> 00:08:35,400
There's actually no need to use a wait here though.

120
00:08:35,460 --> 00:08:41,100
We don't need node to actually wait for these send grid server to send a response back.

121
00:08:41,100 --> 00:08:46,590
We're just going to send that off to them and the user will get the email in a minute or two when they

122
00:08:46,590 --> 00:08:48,370
actually check their email.

123
00:08:48,370 --> 00:08:54,560
There's no need to make sure that this completes before they get their status code back.

124
00:08:54,720 --> 00:08:57,650
Though once again send does return a promise.

125
00:08:57,660 --> 00:09:00,590
So you could set that up if you wanted to.

126
00:09:00,780 --> 00:09:07,620
Now right here on this object we could also choose to set up an HCM El version by specifying that and

127
00:09:07,620 --> 00:09:11,630
if their email client supports HDL that'll be rendered.

128
00:09:11,640 --> 00:09:15,490
So right here you could use all of the HDL elements you're used to.

129
00:09:15,600 --> 00:09:21,720
And you could create a complex email with images and all sorts of other fancy features though for the

130
00:09:21,720 --> 00:09:25,850
moment a basic text email is going to get the job done.

131
00:09:25,980 --> 00:09:32,220
And there are actually studies out there that show that text emails from web applications have a higher

132
00:09:32,280 --> 00:09:38,310
open and response rate because it feels real it doesn't feel like some big marketing company is sending

133
00:09:38,310 --> 00:09:39,790
you a fancy e-mail.

134
00:09:39,840 --> 00:09:44,040
It feels like someone typed something out and sent it to you personally.

135
00:09:44,040 --> 00:09:48,060
Obviously that's not the case but it gives off that sort of effect.

136
00:09:48,060 --> 00:09:53,280
Now if you do own a custom domain and you want to set that up with these send grid service you can head

137
00:09:53,280 --> 00:09:59,850
over to the send grid a dashboard in the left hand navigation bar you would go to settings and then

138
00:09:59,850 --> 00:10:03,840
down below there's a section called sender authentication.

139
00:10:03,840 --> 00:10:06,840
This is where you can register a new domain.

140
00:10:06,840 --> 00:10:13,260
Now with this you need to prove you own the domain by changing the DNS records at that domain.

141
00:10:13,260 --> 00:10:17,400
And that's going to be a bit different depending on where you're getting your domain through.

142
00:10:17,400 --> 00:10:24,220
There are a ton of different domain registrars out there so you'd need to refer to these specific documentation

143
00:10:24,460 --> 00:10:29,890
for your specific DNS management system to figure out how you could change it.

144
00:10:29,890 --> 00:10:33,280
And they send grid instructions do make that as easy as possible.

145
00:10:33,370 --> 00:10:38,050
But this is where you would go when you're ready to create a real application and you have that custom

146
00:10:38,110 --> 00:10:44,000
domain you want to set up for the moment let's go ahead and wrap this video up with a challenge.

147
00:10:44,080 --> 00:10:50,050
It's going to be up to you to figure out how to send an email to a user just when they cancel their

148
00:10:50,050 --> 00:10:50,840
account.

149
00:10:50,860 --> 00:10:53,950
So when they cancel we're not going to stop them from canceling.

150
00:10:53,950 --> 00:10:58,690
But we will follow up and see if we could have done anything to have kept them as a customer.

151
00:10:58,690 --> 00:11:02,490
Right here I have some challenged comments outlining what I'd like you to do.

152
00:11:02,680 --> 00:11:08,020
Right here it's going to be up to you to send an email to the user on cancellation so you'll be setting

153
00:11:08,020 --> 00:11:14,470
up a new function for sending that email in this file and you'll be exporting it from this file and

154
00:11:14,480 --> 00:11:16,390
like with send welcome email.

155
00:11:16,420 --> 00:11:21,600
The new function you create should accept the email and name as arguments down below.

156
00:11:21,670 --> 00:11:28,360
You also want to make sure to send the e-mail to that user and include their name into your cancellation

157
00:11:28,420 --> 00:11:29,740
email text.

158
00:11:29,800 --> 00:11:33,330
You could say something like Good bye followed by their name.

159
00:11:33,370 --> 00:11:37,650
Is there anything we could have done to have kept you on board or something like that.

160
00:11:37,660 --> 00:11:40,480
The choice of the text is yours.

161
00:11:40,480 --> 00:11:45,760
Now once you have the function in place sending the email you want to make sure to call it inside of

162
00:11:45,760 --> 00:11:48,430
the route where users can delete their account.

163
00:11:48,430 --> 00:11:50,950
And finally you want to test your work.

164
00:11:50,950 --> 00:11:57,030
So just after someone's account is successfully removed you'll call that new function then go over to

165
00:11:57,040 --> 00:12:04,450
post man delete the account check your inbox and make sure you see the cancellation email showing up.

166
00:12:04,450 --> 00:12:09,160
Take some time to knock that out test your work and when you're done it come back and click play

167
00:12:13,350 --> 00:12:14,190
how that go.

168
00:12:14,220 --> 00:12:16,710
Let's go ahead and get to it with step number one.

169
00:12:16,710 --> 00:12:23,550
We want to create a new function right here an account dot J S so a new constant I can call this one

170
00:12:23,550 --> 00:12:28,560
something like send cancellation email.

171
00:12:28,690 --> 00:12:33,640
Now you could have chosen a different name for the function these specifics are not important as long

172
00:12:33,640 --> 00:12:35,200
as it's working for you.

173
00:12:35,200 --> 00:12:40,720
And right here we want to make sure we accept the e-mail and the name once again and down below.

174
00:12:40,720 --> 00:12:43,330
We want to make sure we export this function.

175
00:12:43,360 --> 00:12:48,070
All we're going to do is add it as another property on the object we're exporting.

176
00:12:48,070 --> 00:12:50,680
So send cancellation e-mail

177
00:12:53,460 --> 00:12:59,810
and then up above we can go through the process of actually calling s g mail dot send.

178
00:12:59,880 --> 00:13:06,570
I'm going to call that function and provide the necessary data so to once again will come from the email

179
00:13:06,570 --> 00:13:13,530
parameter up above and from we'll be the same from address I've been using so far in this section.

180
00:13:13,530 --> 00:13:16,230
Andrew at Meade dot I O.

181
00:13:16,260 --> 00:13:24,160
Next up we're going to have the subject for this one and we could say something like sorry to see you

182
00:13:24,190 --> 00:13:25,100
go.

183
00:13:25,210 --> 00:13:29,680
Next up we'll set up the text and we want to include their name in that one as well.

184
00:13:29,680 --> 00:13:32,050
So I'll use a template string and once again.

185
00:13:32,320 --> 00:13:41,050
And right here I could say something like Good bye comma followed by their name then the next sentence

186
00:13:41,470 --> 00:13:46,050
I hope to see you back some time soon.

187
00:13:46,060 --> 00:13:47,110
Perfect.

188
00:13:47,110 --> 00:13:52,750
So now that we have this in place we can go ahead and make sure that this function gets called at this

189
00:13:52,750 --> 00:13:56,930
point in our API code where users accounts are deleted.

190
00:13:56,950 --> 00:14:02,110
Right here I'm going to start by removing the challenge comments down below as we're done with this

191
00:14:02,110 --> 00:14:03,240
file.

192
00:14:03,340 --> 00:14:09,940
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

193
00:14:09,940 --> 00:14:13,450
going to grab the other thing from this object.

194
00:14:13,450 --> 00:14:22,080
So I'm going to continue to build out my object a d structuring to grab send cancellation email perfect

195
00:14:22,710 --> 00:14:23,190
last up.

196
00:14:23,190 --> 00:14:27,360
We have to call this function at the correct point in the code down below.

197
00:14:27,360 --> 00:14:29,270
We have our router dot delete.

198
00:14:29,280 --> 00:14:34,500
Call where user profiles are removed just after the user is removed.

199
00:14:34,500 --> 00:14:38,280
I'll call send a cancellation email.

200
00:14:38,320 --> 00:14:45,130
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.

201
00:14:45,130 --> 00:14:48,230
Request dot user dot name.

202
00:14:48,250 --> 00:14:55,180
Now we can go ahead and save user dot J s making sure all of our edited files are saved and we're actually

203
00:14:55,180 --> 00:15:01,270
going to delete that user account from postman and make sure we do see that email in our inbox.

204
00:15:01,270 --> 00:15:06,220
So over here the last thing I did was create the account down below.

205
00:15:06,220 --> 00:15:10,260
I'm gonna go to delete user and fire that off right here.

206
00:15:10,300 --> 00:15:12,430
It did seem to work correctly.

207
00:15:12,430 --> 00:15:17,150
Let's go ahead and check our inbox and make sure we have that new cancellation email.

208
00:15:17,350 --> 00:15:24,130
So over in google chrome for me I'll be heading back over to my inbox and right here I do see.

209
00:15:24,160 --> 00:15:28,000
Sorry to see you go down below we have our text message.

210
00:15:28,000 --> 00:15:31,690
Goodbye Andrew me and I hope to see you back sometime soon.

211
00:15:31,690 --> 00:15:37,330
So using these two emails we can start a conversation with our users as they use the application we

212
00:15:37,330 --> 00:15:42,550
can use this one to maybe figure out why they're joining what features they're looking for and we can

213
00:15:42,550 --> 00:15:48,730
use this one to figure out why they've left and users would actually be able to reply to that email

214
00:15:48,730 --> 00:15:50,920
to start a conversation with you.

215
00:15:50,980 --> 00:15:56,440
And this is something you definitely want to allow for getting feedback from your users is obviously

216
00:15:56,440 --> 00:15:57,610
ideal.

217
00:15:57,610 --> 00:16:03,430
Now that we have this in place what I want to focus on is how we can better protect the api keys in

218
00:16:03,430 --> 00:16:04,570
our project.

219
00:16:04,600 --> 00:16:10,840
Right now we have api keys directly in our JavaScript file and this is typically a bad idea.

220
00:16:10,870 --> 00:16:16,180
And the next lesson we'll talk about why it's typically a bad idea and we'll also talk about how we

221
00:16:16,180 --> 00:16:22,750
can improve the setup removing the actual API key values from our javascript code.

222
00:16:22,780 --> 00:16:24,090
I'm excited to get to that.

223
00:16:24,100 --> 00:16:25,900
So let's jump in to the next one.