1
00:00:00,530 --> 00:00:04,900
In the last video we had a long discussion about the Meilleur object right here.

2
00:00:04,920 --> 00:00:09,160
We spoke about how the Meilleur represented the email that we want to send out to our users.

3
00:00:09,180 --> 00:00:14,700
We said that the survey instance was kind of a data provider to the mailer and the e-mail template was

4
00:00:14,700 --> 00:00:19,770
going to be what produced some Each DML to stick into the actual body of the email.

5
00:00:19,950 --> 00:00:24,840
We would then take that mailer object and send it off to our e-mail provider to actually get the e-mail

6
00:00:24,840 --> 00:00:27,240
sent out to all the different recipients.

7
00:00:27,480 --> 00:00:33,390
So in this video we're going to focus on setting up our connection to the e-mail provider first.

8
00:00:33,540 --> 00:00:38,610
So we're going to sign up with the Centigrade API said grid is the provider we're going to be using

9
00:00:38,610 --> 00:00:40,940
in this course to send out all of our e-mail.

10
00:00:40,980 --> 00:00:43,550
We're going to sign up for our second grade API Keys.

11
00:00:43,550 --> 00:00:49,050
We're going to set the API keys up and then we're going to install a no js package that's going to help

12
00:00:49,050 --> 00:00:52,330
us kind of interact a little bit with send grid directly.

13
00:00:52,590 --> 00:00:55,840
So we've got a lot of little kind of set up tasks to get through.

14
00:00:55,860 --> 00:00:56,720
Let's get started.

15
00:00:56,730 --> 00:01:04,080
Right now I'm going to first start by opening up a new browser tab and navigating to send grid at send

16
00:01:04,170 --> 00:01:06,850
Gred dot com.

17
00:01:06,900 --> 00:01:11,880
Now once here you're going to want to sign up for a brand new free trial account.

18
00:01:12,180 --> 00:01:14,490
So they're marketing landing page right here.

19
00:01:14,520 --> 00:01:15,980
Changes somewhat frequently.

20
00:01:15,990 --> 00:01:20,340
So you might see something a little bit different than what I see right here but essentially somewhere

21
00:01:20,370 --> 00:01:24,750
you should see something that says try for free and that's exactly what you want to do.

22
00:01:24,750 --> 00:01:28,590
So you can click on that link and then you'll sign up for a new account.

23
00:01:28,620 --> 00:01:30,540
Now I've already created a new account myself.

24
00:01:30,570 --> 00:01:33,400
I don't want you have to watch all this initial set up stuff.

25
00:01:33,480 --> 00:01:38,180
So I'm going to ask you to pause video right now and sign up for a new account and do make sure that

26
00:01:38,190 --> 00:01:44,250
you put in a valid e-mail address to sign up form because they will send you a little kind of e-mail

27
00:01:44,250 --> 00:01:45,270
verification things.

28
00:01:45,270 --> 00:01:46,920
Make sure you take care of that.

29
00:01:47,670 --> 00:01:48,090
OK.

30
00:01:48,180 --> 00:01:54,960
So go ahead fill out the form and I'm going to assume you're going be ready to go in just a second.

31
00:01:56,730 --> 00:01:57,090
OK.

32
00:01:57,100 --> 00:01:59,920
So if you're here now hopefully you're signed up for some good.

33
00:01:59,980 --> 00:02:04,570
You should see a page like this on the screen when you initially sign into your new account.

34
00:02:04,570 --> 00:02:09,880
So this is the welcome dashboard right here if you recall back when we signed up for the Strype API

35
00:02:09,940 --> 00:02:11,370
way earlier in this course.

36
00:02:11,380 --> 00:02:15,820
Remember we had said that Strype has a ton of internal products to it as well.

37
00:02:15,970 --> 00:02:18,350
Well said grid is essentially the same way.

38
00:02:18,360 --> 00:02:22,220
Sended has a lot of functionality packed into it.

39
00:02:22,360 --> 00:02:26,710
So you're going to see a lot of functionality over here that's not necessarily relevant to a lot of

40
00:02:26,710 --> 00:02:28,870
the stuff that you and I are doing.

41
00:02:28,870 --> 00:02:35,200
So all we really want to do right now is get our API keys which we can do by finding the left now over

42
00:02:35,200 --> 00:02:41,770
here and then scrolling down a little bit under settings let's expand settings my bet so to expand settings

43
00:02:41,850 --> 00:02:46,320
and then we're going to find the section labeled API keys right here.

44
00:02:46,670 --> 00:02:47,080
OK.

45
00:02:47,110 --> 00:02:51,420
So when we first come here we don't have any API keys generated by default.

46
00:02:51,430 --> 00:02:53,490
We have to actually create one.

47
00:02:53,770 --> 00:02:56,130
Zoom in so you can see everything easily by the way.

48
00:02:56,620 --> 00:03:02,080
So on the very top right to find the button that says Create API key and we'll go through this very

49
00:03:02,080 --> 00:03:07,240
short little wizard at the very top it's going to ask you to put in a key name.

50
00:03:07,240 --> 00:03:12,940
This is just an identifier to use on the grid platform so you can kind of recognize which key is which

51
00:03:13,450 --> 00:03:15,000
for us doesn't really matter.

52
00:03:15,010 --> 00:03:16,300
We'll just call it email.

53
00:03:16,390 --> 00:03:17,920
Good enough.

54
00:03:17,920 --> 00:03:21,580
We want to then create an API key with full access permissions.

55
00:03:21,610 --> 00:03:26,590
So we want to be able to send receive email basically everything in total.

56
00:03:26,830 --> 00:03:31,780
So we're going to make a full access key while scrolling down to the bottom and click on the Create

57
00:03:31,840 --> 00:03:34,670
and view button.

58
00:03:34,670 --> 00:03:34,990
All right.

59
00:03:34,990 --> 00:03:39,910
So this will show us our API key now for very obvious reasons.

60
00:03:39,910 --> 00:03:45,430
Because essentially it shows right here this is the one chance we have to work with this API key after

61
00:03:45,430 --> 00:03:46,400
you click done on here.

62
00:03:46,420 --> 00:03:46,900
That's it.

63
00:03:46,900 --> 00:03:50,540
They're not going to show you the key again and you'll have to generate a brand new one.

64
00:03:50,800 --> 00:03:55,940
So we're going to go through both the development and production set up with this key right now because

65
00:03:55,940 --> 00:03:59,180
this again really is the only time we're going to get to see it.

66
00:03:59,310 --> 00:04:03,850
I'm going to start off by just clicking on this box right here and you should see a little message that

67
00:04:03,850 --> 00:04:05,420
pops up that says copy it.

68
00:04:05,440 --> 00:04:08,070
So essentially we're just going to copy paste the key.

69
00:04:08,410 --> 00:04:10,940
We'll then change back over to our code editor.

70
00:04:11,050 --> 00:04:16,150
I'm going to find my config directory and we're going to set up this key inside of the dev and prod

71
00:04:16,150 --> 00:04:17,370
files.

72
00:04:17,410 --> 00:04:18,770
We'll first start off with Dev.

73
00:04:18,790 --> 00:04:26,080
So I to find the Devcon J.S. file open it and I'm going to add on a new key to this object.

74
00:04:26,080 --> 00:04:30,520
Do you remember to get a comma at the very end of the line right above right here.

75
00:04:30,540 --> 00:04:33,280
So put the comma on and then on a newline.

76
00:04:33,400 --> 00:04:37,230
Well define send grid key like so.

77
00:04:37,400 --> 00:04:39,670
And paste the key.

78
00:04:39,670 --> 00:04:41,910
Do take note of the capitalization here.

79
00:04:41,920 --> 00:04:45,870
I have a lower case s a capital G and a capital key.

80
00:04:45,880 --> 00:04:49,900
So sometimes people do send grid as all lowercase.

81
00:04:49,900 --> 00:04:55,440
Sometimes I see lowercase as capital G it's all over the place whatever you do.

82
00:04:55,440 --> 00:04:58,780
Just make sure that you are consistent across your entire project.

83
00:04:59,350 --> 00:05:01,140
OK so here's our development set up.

84
00:05:01,150 --> 00:05:03,430
We are going to do the production set up right now as well.

85
00:05:03,460 --> 00:05:06,380
So I going to change over to the product G-S file.

86
00:05:06,550 --> 00:05:11,590
Remember that inside a project we're just making a reference to our key that's sitting over on Heroku.

87
00:05:11,830 --> 00:05:21,970
So add on a new key of send grid key and that's going to reference the environment variable of process

88
00:05:22,420 --> 00:05:29,910
in the sand grid key like so I will save this file to.

89
00:05:29,970 --> 00:05:32,740
OK let's hop on over to our Heroku dashboard.

90
00:05:32,740 --> 00:05:36,200
We're going to send up the environment variable over there as well.

91
00:05:36,490 --> 00:05:38,820
So I'm going to go back to my browser.

92
00:05:39,010 --> 00:05:45,280
I'm going to open up a new tab and I'll navigate to Heroku dot com.

93
00:05:45,280 --> 00:05:49,710
So we're going to pull up our dashboard and we've gone through this many times so far in this course.

94
00:05:49,840 --> 00:05:55,910
I'm going to find the project I'm running for this course which for me is I'll buy you right here.

95
00:05:56,110 --> 00:06:02,980
Again we'll go to the Settings tab front and center will then click on reveal config Viers are variables

96
00:06:03,560 --> 00:06:06,680
and will add on a new key value pair at the very bottom.

97
00:06:06,760 --> 00:06:14,680
And remember we called this one send underscore grid underscore key and paste the value.

98
00:06:14,830 --> 00:06:17,530
So here's the value add.

99
00:06:17,860 --> 00:06:20,010
And that's pretty much it.

100
00:06:20,680 --> 00:06:21,180
OK.

101
00:06:21,490 --> 00:06:26,170
So we've now set up our production and our development keys we're in a pretty good spot.

102
00:06:26,170 --> 00:06:33,270
Now last thing we need to do is install the second grid API module to our no JSC project.

103
00:06:33,280 --> 00:06:38,680
So again this is a NPM module that's going to just kind of help us work directly with said grid.

104
00:06:38,680 --> 00:06:43,070
It's just a little helper module to create and send emails.

105
00:06:43,120 --> 00:06:45,460
So we're going to change on over toward terminal.

106
00:06:45,460 --> 00:06:50,140
You'll notice that I've already killed my server by pressing control C and I'm going to install the

107
00:06:50,140 --> 00:07:01,570
second grade library by running NPM install dash dash save send grid like so OK this is only take about

108
00:07:01,570 --> 00:07:02,730
four or five seconds.

109
00:07:02,740 --> 00:07:06,310
So we'll just let it do its thing and then when it's all done we're going to start her server back up

110
00:07:06,310 --> 00:07:09,150
with NPM run dev.

111
00:07:09,370 --> 00:07:09,750
All right.

112
00:07:09,750 --> 00:07:11,380
So that's pretty much it for NPM.

113
00:07:11,380 --> 00:07:14,700
Or did he send grid's set up as you can see pretty darn straightforward.

114
00:07:14,830 --> 00:07:18,740
Before we continue in the next section I want to do just one quick mention to you.

115
00:07:18,740 --> 00:07:23,080
I just mentioned one quick thing in all this e-mail stuff that we're about to do.

116
00:07:23,100 --> 00:07:28,140
There's going to be a lot of code that we're going to write without kind of testing it upfront.

117
00:07:28,240 --> 00:07:32,740
So we're going to write a lot of code and then only test it when everything is essentially done and

118
00:07:32,740 --> 00:07:33,850
finished.

119
00:07:33,850 --> 00:07:40,150
So one thing that I'm going to ask you to do I can ask you to make sure that as you are adding in code

120
00:07:40,210 --> 00:07:46,900
to our server side project please please please every now and then change over to your terminal where

121
00:07:46,900 --> 00:07:52,210
your server should be running and makes sure that your server is not throwing an error something saying

122
00:07:52,210 --> 00:07:54,890
that you have some typo somewhere.

123
00:07:54,970 --> 00:07:57,460
So just a very easy quick check.

124
00:07:57,460 --> 00:08:01,560
Kind of a sanity check to make sure that you're not introducing any very obvious errors.

125
00:08:01,660 --> 00:08:05,200
Just check your terminal make sure you're not adding any typos or anything like that.

126
00:08:05,200 --> 00:08:06,390
OK.

127
00:08:06,970 --> 00:08:07,240
All right.

128
00:08:07,250 --> 00:08:11,890
So that's pretty much it for centers set up steamier or send grid set up.

129
00:08:11,890 --> 00:08:13,120
It's a tongue twister.

130
00:08:13,120 --> 00:08:14,050
Let's take a quick break.

131
00:08:14,050 --> 00:08:15,520
We're going to come back in the next section.

132
00:08:15,550 --> 00:08:20,500
And we're going to start to set up our mailer object so I'll see you in just a minute.