1 00:00:00,540 --> 00:00:05,910 In the last video we set up our cent. API keys and we also set up the send grid. 2 00:00:05,990 --> 00:00:12,990 No J.S. module the no class module authored by said it is all about helping us create our Meilleur object 3 00:00:13,350 --> 00:00:15,620 and send it off to the send grid API. 4 00:00:15,900 --> 00:00:18,370 Remember send grid is our e-mail provider. 5 00:00:18,390 --> 00:00:23,250 They are the people who are going to actually send e-mails out to our users. 6 00:00:23,250 --> 00:00:28,410 Now we've spoken about the mailer a little bit so far in this video we're going to continue by starting 7 00:00:28,410 --> 00:00:30,370 to put this mailer together. 8 00:00:30,720 --> 00:00:35,430 Now I gotta tell you right now just a little bit of a disclaimer I'm going to tell you right now the 9 00:00:35,430 --> 00:00:41,700 Meilleur code there we're going to work on in this video in the next couple is some of the more complicated 10 00:00:41,730 --> 00:00:46,860 logic that we're going to have inside this course and maybe even saying complicated isn't the best way 11 00:00:46,860 --> 00:00:47,750 of putting it. 12 00:00:47,790 --> 00:00:54,540 Maybe I'll just say there's going to be a lot of code inside this Meilleur object that we take essentially 13 00:00:54,720 --> 00:00:56,620 helper's from that said grinde module. 14 00:00:56,730 --> 00:00:59,850 And so there's going to be a lot of stuff where it looks like we're just pulling these functions out 15 00:00:59,850 --> 00:01:00,750 of thin air. 16 00:01:00,750 --> 00:01:03,040 In reality they're all coming from second grade. 17 00:01:03,060 --> 00:01:07,410 Now I tell you this not to scare you off but just to let you know there's going to be just a little 18 00:01:07,410 --> 00:01:12,300 bit of kind of interesting stuff going on here and at the end of the day if you are curious what's happening 19 00:01:12,570 --> 00:01:14,220 or what's going on inside the. 20 00:01:14,340 --> 00:01:19,200 A lot of the time the answer to your question is really just going to be this is what sand grid wants 21 00:01:19,200 --> 00:01:21,790 us to do for better or for worse. 22 00:01:22,170 --> 00:01:22,450 OK. 23 00:01:22,470 --> 00:01:26,790 So with that in mind I least want to give you a little bit of guidance on exactly what's going to go 24 00:01:26,790 --> 00:01:28,330 on inside this mailer. 25 00:01:28,500 --> 00:01:33,370 So I need to make sure I always do my best job to inform you about what's going on. 26 00:01:33,690 --> 00:01:37,510 So this big old box right here represents our Meilleur object. 27 00:01:37,630 --> 00:01:43,730 We are going to set up this mailer as in six or as 2015 javascript class. 28 00:01:44,010 --> 00:01:49,360 So whenever we want to create a new email and send it out to people we will import this class or will 29 00:01:49,380 --> 00:01:54,720 it required in one of our route files we will create a new instance of the mailer will customize it 30 00:01:54,720 --> 00:01:58,870 in some fashion and then we will somehow send it off to the outside world. 31 00:01:58,890 --> 00:02:03,840 And so some of the code that we write around the mailer is going to make it look a little bit like a 32 00:02:03,840 --> 00:02:09,060 reactive component because you're going to see stuff like the classic keyword and the constructor method 33 00:02:09,060 --> 00:02:11,420 and all that kind of good stuff too. 34 00:02:11,700 --> 00:02:15,630 I guess that's kind of what's going to go on inside the mailer or at least how it's overall going to 35 00:02:15,630 --> 00:02:18,250 be architected it's going to be a class. 36 00:02:18,420 --> 00:02:23,700 And then inside of there we're going to do a couple of different setup of a few different properties. 37 00:02:23,730 --> 00:02:27,840 So these are the different properties that we're going to have to send a set up in order to send this 38 00:02:27,840 --> 00:02:29,130 e-mail out. 39 00:02:29,130 --> 00:02:32,960 First off we have to specify the subject of the e-mail. 40 00:02:32,970 --> 00:02:33,930 This one's obvious right. 41 00:02:33,930 --> 00:02:38,800 Every e-mail me needs a subject so we need to make sure that we set the subject of the e-mail. 42 00:02:39,090 --> 00:02:43,760 This subject is going to come directly from our survey model which we've already created inside of our 43 00:02:44,010 --> 00:02:49,630 file our mailer also needs to know what e-mails it needs to be sent to. 44 00:02:49,650 --> 00:02:51,730 So essentially the list of recipients. 45 00:02:51,840 --> 00:02:55,860 Now we've already created this list of recipients we're already dealing with them a little bit inside 46 00:02:55,860 --> 00:02:58,040 of our survey model instance. 47 00:02:58,110 --> 00:03:02,710 And so the list of recipients inside the mailer is going to come from our survey object as well. 48 00:03:04,020 --> 00:03:05,900 Next the body of that e-mail. 49 00:03:05,910 --> 00:03:08,550 So the actual text that goes inside of it. 50 00:03:08,550 --> 00:03:12,000 Remember this is where that outside template comes in. 51 00:03:12,000 --> 00:03:13,380 We had said that the template. 52 00:03:13,440 --> 00:03:15,080 And let's find a diagram for it really quick. 53 00:03:15,090 --> 00:03:17,640 It's buried in here somewhere right here. 54 00:03:17,640 --> 00:03:22,770 So it said that the e-mail template is what's actually providing the HVM l body of the email. 55 00:03:22,830 --> 00:03:26,960 The stuff that users actually see when they open up the e-mail. 56 00:03:27,270 --> 00:03:32,310 So to make sure that we put the Krutz content inside the template we're going to pass in a property 57 00:03:32,310 --> 00:03:36,280 two or two from the survey model into the template. 58 00:03:36,360 --> 00:03:41,640 The template is going to produce some each email that's going to display as the body of the email. 59 00:03:41,700 --> 00:03:47,920 And so we're then going to take that template and pass it in as the body property to our mailer. 60 00:03:48,720 --> 00:03:52,040 Finally we need to specify a from e-mail. 61 00:03:52,050 --> 00:03:53,550 Now this one's a little bit tricky. 62 00:03:53,700 --> 00:03:54,210 OK. 63 00:03:54,370 --> 00:04:00,630 The from e-mail is the e-mail that will be the e-mail address that will be displayed on the From field 64 00:04:01,050 --> 00:04:03,160 inside of our e-mails. 65 00:04:03,330 --> 00:04:06,610 So in other words we're never an end user gets one of these survey e-mails. 66 00:04:06,630 --> 00:04:11,160 There has to be some From address in there right something that says hey this e-mail is sent from X 67 00:04:11,160 --> 00:04:11,810 Y Z. 68 00:04:12,050 --> 00:04:17,330 And so we need to make sure that we set some default e-mail inside of there. 69 00:04:17,460 --> 00:04:22,680 Now after we set all these different properties up we're going to call a function on the mailer object 70 00:04:22,680 --> 00:04:24,480 called to Jaison. 71 00:04:24,750 --> 00:04:28,060 So remember the mailer represents the actual e-mail. 72 00:04:28,080 --> 00:04:31,660 It's the thing that we actually want to send off to send grid. 73 00:04:31,770 --> 00:04:36,720 So after we've set up all these different properties we're going to call this to Jason function which 74 00:04:36,720 --> 00:04:41,400 takes all the different configuration all the different we've set up we've done inside the mailer. 75 00:04:41,520 --> 00:04:46,920 It's going to turn it all into some data and we're going to take that song and send it off to send grid 76 00:04:47,280 --> 00:04:50,080 to actually author and send out our e-mail. 77 00:04:50,400 --> 00:04:50,910 OK. 78 00:04:51,120 --> 00:04:54,570 So again this is going to be a little bit of a tricky practice. 79 00:04:54,570 --> 00:04:56,550 You know give me a lot of code flying around here. 80 00:04:56,580 --> 00:05:01,320 But I've got great faith that we can definitely pull it off and certainly understand what's happening 81 00:05:01,320 --> 00:05:02,270 along the way. 82 00:05:02,700 --> 00:05:06,620 So with all this in mind let's get started right now. 83 00:05:06,770 --> 00:05:07,590 You know hey why wait. 84 00:05:07,590 --> 00:05:09,540 All right let's start right now. 85 00:05:09,580 --> 00:05:15,300 We're going to change on over to my code editor and I'm going to find my services directory. 86 00:05:15,300 --> 00:05:20,700 Now we previously put one single service into this directory the passport service and so that was all 87 00:05:20,700 --> 00:05:23,760 about setup and configuration of passport. 88 00:05:23,790 --> 00:05:29,380 We're now going to create a new file inside of the services directory called Meilleur Dot. 89 00:05:29,460 --> 00:05:30,480 Yes. 90 00:05:30,510 --> 00:05:36,740 And so I view e-mail as another service to my application or another kind of discrete unit of logic. 91 00:05:36,780 --> 00:05:42,210 You might also see some other applications split off e-mail to a completely separate directory if you 92 00:05:42,210 --> 00:05:43,160 want to take that approach. 93 00:05:43,170 --> 00:05:48,320 That's totally fine but to me again I really view e-mail as another service to the application. 94 00:05:48,390 --> 00:05:52,140 And so I like to stuff all the email logic into my services directory. 95 00:05:52,140 --> 00:05:56,280 Now again you'll notice our naming convention throughout our project coming into play here. 96 00:05:56,340 --> 00:06:02,280 Meilleur has a capital M because exports a class passport has a lower case P because it doesn't actually 97 00:06:02,280 --> 00:06:04,160 export anything at all. 98 00:06:04,800 --> 00:06:05,210 OK. 99 00:06:05,310 --> 00:06:11,640 Now inside of Meilleur J.S. we're going to first require in the send grade module that we just installed 100 00:06:11,640 --> 00:06:12,690 at the very top. 101 00:06:12,990 --> 00:06:21,390 So we'll say Konst said grid is require send grid like so we're going to immediately pull a property 102 00:06:21,420 --> 00:06:29,370 off of this sand grid object it call this helper will say send grid and this helper property right here 103 00:06:29,970 --> 00:06:34,100 is going to be coming from said grid dot mail. 104 00:06:34,110 --> 00:06:39,580 Now traditionally we would use 60 structuring for something like this right here right. 105 00:06:39,600 --> 00:06:44,850 We are really just taking a property off of the send grid object and assigning it to a variable called 106 00:06:44,970 --> 00:06:45,910 helper. 107 00:06:46,260 --> 00:06:53,250 So we could have just as easily done something like mail like this if we had wanted to call this property 108 00:06:53,680 --> 00:06:54,270 mail. 109 00:06:54,480 --> 00:06:58,800 But really I want to call it helper because that's kind of convention throughout all the send great 110 00:06:58,800 --> 00:07:04,140 documentation they usually refer to this thing as helper because it's a Helper Object that helps us 111 00:07:04,140 --> 00:07:06,660 create the Meyler. 112 00:07:06,660 --> 00:07:13,590 Now immediately after this we're also going to import in our API key from our keys file which exists 113 00:07:13,590 --> 00:07:16,330 inside of our config directory as you might imagine. 114 00:07:16,350 --> 00:07:20,660 Yes we are going to eventually send email from inside of this mailer J.S. file. 115 00:07:20,790 --> 00:07:24,550 So we need our API key that we just wired up from grid. 116 00:07:24,750 --> 00:07:30,180 So then at the very top for now we'll just import the keys file and then we'll worry about how we use 117 00:07:30,180 --> 00:07:30,840 it later on. 118 00:07:30,840 --> 00:07:34,480 I just want to have it imported or required and done with for now. 119 00:07:34,890 --> 00:07:42,170 So we'll say Konski is require up one directory config slash keys like so. 120 00:07:42,810 --> 00:07:49,340 OK so now the very last step inside this section at least we're going to set up our mailer class. 121 00:07:49,380 --> 00:07:54,150 So again I want you to think of this thing as kind of being set up like a re-act component and you'll 122 00:07:54,150 --> 00:08:03,550 see why in just a second we're going to say class Meilleur extends helper Daut capital in mail like 123 00:08:03,550 --> 00:08:04,550 so. 124 00:08:05,560 --> 00:08:06,090 OK. 125 00:08:06,160 --> 00:08:07,530 So what's going on here. 126 00:08:09,150 --> 00:08:17,250 So the helper Daut capital in mail property is an object that takes a lot of configuration and spits 127 00:08:17,250 --> 00:08:19,140 out a mailer. 128 00:08:19,140 --> 00:08:25,830 We want to take that mailer class or that male class right here and we want to add onto it. 129 00:08:25,830 --> 00:08:29,550 We want to provide some additional customization to it. 130 00:08:29,700 --> 00:08:31,900 So we are setting up a class called Maler. 131 00:08:31,920 --> 00:08:38,250 This is something we are creating and we are extending the male class provided inside of this and grade 132 00:08:38,250 --> 00:08:39,460 library. 133 00:08:39,510 --> 00:08:45,810 So now our mailer object right here our class of Meilleur it now contains a bunch of functionality and 134 00:08:45,810 --> 00:08:52,680 a bunch of code in a bunch of setup that is closely tied or inherited so to speak from this mail object 135 00:08:52,680 --> 00:08:53,760 right here. 136 00:08:53,760 --> 00:08:57,780 So again remember react when we're looking at this and react. 137 00:08:57,780 --> 00:09:04,800 We create our own custom component and it extends the component base class from the reactivates library 138 00:09:05,370 --> 00:09:11,850 when we extend that base class we get a bunch of free functionality from the re-act library added into 139 00:09:11,850 --> 00:09:14,790 our new customize subclass. 140 00:09:15,140 --> 00:09:15,800 OK. 141 00:09:16,170 --> 00:09:18,400 So again a little bit of advanced javascript here. 142 00:09:18,450 --> 00:09:19,530 But just remember. 143 00:09:19,530 --> 00:09:21,010 Think back to react. 144 00:09:21,030 --> 00:09:26,010 We can treat this just like a normal reactive component in terms of syntax and set up and all that kind 145 00:09:26,010 --> 00:09:26,950 of good stuff. 146 00:09:27,420 --> 00:09:27,710 OK. 147 00:09:27,720 --> 00:09:30,030 So I think that's enough set up for this section. 148 00:09:30,030 --> 00:09:31,430 Let's take a quick break. 149 00:09:31,440 --> 00:09:36,390 When we come back in the next section we're going to start to set up a couple of these different properties 150 00:09:36,720 --> 00:09:38,810 so I'll see you in just a minute.