In the last video we had a long discussion about the Meilleur object right here.
We spoke about how the Meilleur represented the email that we want to send out to our users.
We said that the survey instance was kind of a data provider to the mailer and the e-mail template was
going to be what produced some Each DML to stick into the actual body of the email.
We would then take that mailer object and send it off to our e-mail provider to actually get the e-mail
sent out to all the different recipients.
So in this video we're going to focus on setting up our connection to the e-mail provider first.
So we're going to sign up with the Centigrade API said grid is the provider we're going to be using
in this course to send out all of our e-mail.
We're going to sign up for our second grade API Keys.
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
us kind of interact a little bit with send grid directly.
So we've got a lot of little kind of set up tasks to get through.
Let's get started.
Right now I'm going to first start by opening up a new browser tab and navigating to send grid at send
Gred dot com.
Now once here you're going to want to sign up for a brand new free trial account.
So they're marketing landing page right here.
Changes somewhat frequently.
So you might see something a little bit different than what I see right here but essentially somewhere
you should see something that says try for free and that's exactly what you want to do.
So you can click on that link and then you'll sign up for a new account.
Now I've already created a new account myself.
I don't want you have to watch all this initial set up stuff.
So I'm going to ask you to pause video right now and sign up for a new account and do make sure that
you put in a valid e-mail address to sign up form because they will send you a little kind of e-mail
verification things.
Make sure you take care of that.
OK.
So go ahead fill out the form and I'm going to assume you're going be ready to go in just a second.
OK.
So if you're here now hopefully you're signed up for some good.
You should see a page like this on the screen when you initially sign into your new account.
So this is the welcome dashboard right here if you recall back when we signed up for the Strype API
way earlier in this course.
Remember we had said that Strype has a ton of internal products to it as well.
Well said grid is essentially the same way.
Sended has a lot of functionality packed into it.
So you're going to see a lot of functionality over here that's not necessarily relevant to a lot of
the stuff that you and I are doing.
So all we really want to do right now is get our API keys which we can do by finding the left now over
here and then scrolling down a little bit under settings let's expand settings my bet so to expand settings
and then we're going to find the section labeled API keys right here.
OK.
So when we first come here we don't have any API keys generated by default.
We have to actually create one.
Zoom in so you can see everything easily by the way.
So on the very top right to find the button that says Create API key and we'll go through this very
short little wizard at the very top it's going to ask you to put in a key name.
This is just an identifier to use on the grid platform so you can kind of recognize which key is which
for us doesn't really matter.
We'll just call it email.
Good enough.
We want to then create an API key with full access permissions.
So we want to be able to send receive email basically everything in total.
So we're going to make a full access key while scrolling down to the bottom and click on the Create
and view button.
All right.
So this will show us our API key now for very obvious reasons.
Because essentially it shows right here this is the one chance we have to work with this API key after
you click done on here.
That's it.
They're not going to show you the key again and you'll have to generate a brand new one.
So we're going to go through both the development and production set up with this key right now because
this again really is the only time we're going to get to see it.
I'm going to start off by just clicking on this box right here and you should see a little message that
pops up that says copy it.
So essentially we're just going to copy paste the key.
We'll then change back over to our code editor.
I'm going to find my config directory and we're going to set up this key inside of the dev and prod
files.
We'll first start off with Dev.
So I to find the Devcon J.S. file open it and I'm going to add on a new key to this object.
Do you remember to get a comma at the very end of the line right above right here.
So put the comma on and then on a newline.
Well define send grid key like so.
And paste the key.
Do take note of the capitalization here.
I have a lower case s a capital G and a capital key.
So sometimes people do send grid as all lowercase.
Sometimes I see lowercase as capital G it's all over the place whatever you do.
Just make sure that you are consistent across your entire project.
OK so here's our development set up.
We are going to do the production set up right now as well.
So I going to change over to the product G-S file.
Remember that inside a project we're just making a reference to our key that's sitting over on Heroku.
So add on a new key of send grid key and that's going to reference the environment variable of process
in the sand grid key like so I will save this file to.
OK let's hop on over to our Heroku dashboard.
We're going to send up the environment variable over there as well.
So I'm going to go back to my browser.
I'm going to open up a new tab and I'll navigate to Heroku dot com.
So we're going to pull up our dashboard and we've gone through this many times so far in this course.
I'm going to find the project I'm running for this course which for me is I'll buy you right here.
Again we'll go to the Settings tab front and center will then click on reveal config Viers are variables
and will add on a new key value pair at the very bottom.
And remember we called this one send underscore grid underscore key and paste the value.
So here's the value add.
And that's pretty much it.
OK.
So we've now set up our production and our development keys we're in a pretty good spot.
Now last thing we need to do is install the second grid API module to our no JSC project.
So again this is a NPM module that's going to just kind of help us work directly with said grid.
It's just a little helper module to create and send emails.
So we're going to change on over toward terminal.
You'll notice that I've already killed my server by pressing control C and I'm going to install the
second grade library by running NPM install dash dash save send grid like so OK this is only take about
four or five seconds.
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
with NPM run dev.
All right.
So that's pretty much it for NPM.
Or did he send grid's set up as you can see pretty darn straightforward.
Before we continue in the next section I want to do just one quick mention to you.
I just mentioned one quick thing in all this e-mail stuff that we're about to do.
There's going to be a lot of code that we're going to write without kind of testing it upfront.
So we're going to write a lot of code and then only test it when everything is essentially done and
finished.
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
to our server side project please please please every now and then change over to your terminal where
your server should be running and makes sure that your server is not throwing an error something saying
that you have some typo somewhere.
So just a very easy quick check.
Kind of a sanity check to make sure that you're not introducing any very obvious errors.
Just check your terminal make sure you're not adding any typos or anything like that.
OK.
All right.
So that's pretty much it for centers set up steamier or send grid set up.
It's a tongue twister.
Let's take a quick break.
We're going to come back in the next section.
And we're going to start to set up our mailer object so I'll see you in just a minute.