1 00:00:01,100 --> 00:00:04,030 ‫So, let's now use the Sendgrid service 2 00:00:04,030 --> 00:00:07,880 ‫in order to send real emails to real email inboxes. 3 00:00:07,880 --> 00:00:11,603 ‫Rather than to our development inbox at Mailtrap. 4 00:00:13,300 --> 00:00:15,710 ‫And so, let's open up a new tab here 5 00:00:16,640 --> 00:00:19,730 ‫and search for Sendgrid and then it is here, 6 00:00:19,730 --> 00:00:21,040 ‫SendGrid.com 7 00:00:22,470 --> 00:00:26,090 ‫All right, so we can try it for free. 8 00:00:26,090 --> 00:00:27,810 ‫It will then have some limits 9 00:00:27,810 --> 00:00:30,400 ‫but you can still create a free account 10 00:00:30,400 --> 00:00:34,010 ‫from which you can send like, one hundred emails per day. 11 00:00:34,010 --> 00:00:37,530 ‫All right, so go ahead and create your account here 12 00:00:37,530 --> 00:00:39,923 ‫and once you're ready come back to this video. 13 00:00:41,820 --> 00:00:44,420 ‫Okay, and after creating your account 14 00:00:44,420 --> 00:00:45,950 ‫you should see your dashboard 15 00:00:45,950 --> 00:00:49,090 ‫that should look something like this, all right? 16 00:00:49,090 --> 00:00:53,120 ‫So you see there's a ton of stuff here on the left side 17 00:00:53,120 --> 00:00:55,940 ‫you can choose like templates, you can see all kinds 18 00:00:55,940 --> 00:00:59,000 ‫of statistics about the emails that you're sending. 19 00:00:59,000 --> 00:01:01,610 ‫And really, there is a ton of settings 20 00:01:01,610 --> 00:01:04,350 ‫that you can also set here, okay? 21 00:01:04,350 --> 00:01:06,500 ‫But for now, what we are interested in, 22 00:01:06,500 --> 00:01:09,180 ‫is in the Set up Guide. 23 00:01:09,180 --> 00:01:10,080 ‫Okay? 24 00:01:10,080 --> 00:01:13,050 ‫So here in the top left corner of your dashboard 25 00:01:13,050 --> 00:01:14,850 ‫you should have this menu here 26 00:01:14,850 --> 00:01:17,590 ‫where we then want to click the Set up Guide. 27 00:01:17,590 --> 00:01:20,120 ‫Now if the page at the time you're watching this video 28 00:01:20,120 --> 00:01:21,640 ‫looks somewhat different, 29 00:01:21,640 --> 00:01:25,020 ‫then you might also find the Set up Guide link 30 00:01:25,020 --> 00:01:26,580 ‫somewhere down here. 31 00:01:26,580 --> 00:01:29,360 ‫And in this case here on the sight side. 32 00:01:29,360 --> 00:01:33,460 ‫So let's open that up and now what we want to do is here 33 00:01:33,460 --> 00:01:38,460 ‫to integrate using our Web API or SMTP relay, all right? 34 00:01:38,650 --> 00:01:41,410 ‫And you could also easily integrate Sendgrid 35 00:01:41,410 --> 00:01:45,120 ‫into Wordpress or Drupal or something like that. 36 00:01:45,120 --> 00:01:47,560 ‫But of course, that's not what we want. 37 00:01:47,560 --> 00:01:49,890 ‫So here we want the first option 38 00:01:49,890 --> 00:01:52,550 ‫and then we want the SMTP Relay. 39 00:01:52,550 --> 00:01:54,400 ‫Because that is the one that we need 40 00:01:54,400 --> 00:01:56,090 ‫if we want to use node mailer 41 00:01:56,090 --> 00:01:58,850 ‫and create a transport with that. 42 00:01:58,850 --> 00:02:00,690 ‫And so that's exactly what we're doing 43 00:02:00,690 --> 00:02:02,840 ‫and so we choose this one. 44 00:02:02,840 --> 00:02:04,740 ‫On the other hand, we could also use 45 00:02:04,740 --> 00:02:07,470 ‫the simple to use Sendgrid API 46 00:02:07,470 --> 00:02:09,800 ‫and so then we would choose this way. 47 00:02:09,800 --> 00:02:12,440 ‫But again, with node mailer we need to choose 48 00:02:12,440 --> 00:02:13,443 ‫this option here. 49 00:02:15,530 --> 00:02:17,530 ‫And then from here it's very easy. 50 00:02:17,530 --> 00:02:21,490 ‫So here we just need to create an API key with some name. 51 00:02:21,490 --> 00:02:23,967 ‫And so that name is not really relevant at all, 52 00:02:25,930 --> 00:02:27,930 ‫so let's just call it "natours". 53 00:02:27,930 --> 00:02:28,963 ‫Create Key. 54 00:02:30,010 --> 00:02:33,170 ‫And so now to configure or transport a node mailer 55 00:02:33,170 --> 00:02:37,990 ‫all we need is actually this user name and this password. 56 00:02:37,990 --> 00:02:40,550 ‫So let's add these two to our config file 57 00:02:40,550 --> 00:02:44,027 ‫so I'm copying the password and the user name is "apikey." 58 00:02:46,850 --> 00:02:49,297 ‫So, config.env 59 00:02:49,297 --> 00:02:51,540 ‫and then everything that's related to emails, 60 00:02:51,540 --> 00:02:52,883 ‫let's put that here. 61 00:02:54,100 --> 00:02:55,160 ‫So SENDGRID 62 00:02:57,840 --> 00:02:58,673 ‫USERNAME 63 00:02:59,850 --> 00:03:00,693 ‫is apikey. 64 00:03:03,100 --> 00:03:04,430 ‫And Sendgrid PASSWORD 65 00:03:07,350 --> 00:03:08,253 ‫is this one. 66 00:03:09,880 --> 00:03:11,880 ‫And once more I really ask you 67 00:03:11,880 --> 00:03:15,030 ‫to create your own account and your own API key 68 00:03:15,030 --> 00:03:18,540 ‫and password instead of using mine, okay? 69 00:03:18,540 --> 00:03:20,030 ‫Because if many people do that, 70 00:03:20,030 --> 00:03:22,820 ‫it will quickly stop working for everyone, all right? 71 00:03:22,820 --> 00:03:24,610 ‫So please create your own account 72 00:03:24,610 --> 00:03:28,170 ‫and generate your own password, okay? 73 00:03:28,170 --> 00:03:31,453 ‫So there is actually enough for us to create or transport. 74 00:03:34,250 --> 00:03:35,663 ‫And so let's do that here, 75 00:03:36,550 --> 00:03:39,363 ‫so node mailer.createTransport. 76 00:03:43,410 --> 00:03:46,570 ‫And now, remember how I told you when we first created 77 00:03:46,570 --> 00:03:49,420 ‫this email handler a couple of seconds ago. 78 00:03:49,420 --> 00:03:52,830 ‫That there are some services that are already predefined. 79 00:03:52,830 --> 00:03:54,903 ‫And Sendgrid is actually one of them. 80 00:03:56,640 --> 00:04:00,633 ‫So we can specify service and then set it to Sendgrid. 81 00:04:02,510 --> 00:04:03,343 ‫All right? 82 00:04:03,343 --> 00:04:05,970 ‫And we actually did this before for Gmail 83 00:04:05,970 --> 00:04:08,760 ‫and with that all we needed to then pass in 84 00:04:08,760 --> 00:04:10,830 ‫was the user name and a password. 85 00:04:10,830 --> 00:04:13,120 ‫And so here is going to be exactly the same. 86 00:04:13,120 --> 00:04:15,940 ‫And that's the reason why we actually don't even need 87 00:04:15,940 --> 00:04:19,770 ‫to specify the Server and the Port, okay? 88 00:04:19,770 --> 00:04:22,830 ‫Because node mailer already knows this data 89 00:04:22,830 --> 00:04:25,253 ‫because is specifying this Sendgrid service. 90 00:04:27,790 --> 00:04:30,640 ‫So now, we just need to specify the authentication 91 00:04:31,560 --> 00:04:36,090 ‫and the user is at process.env.SENDGRID 92 00:04:38,690 --> 00:04:39,563 ‫USERNAME. 93 00:04:40,712 --> 00:04:42,612 ‫And now let's just duplicate this here 94 00:04:46,190 --> 00:04:48,373 ‫and here, pass. 95 00:04:49,350 --> 00:04:51,783 ‫Okay, and that's actually it. 96 00:04:53,070 --> 00:04:55,800 ‫And now to test this, let's create a new user 97 00:04:55,800 --> 00:04:57,583 ‫with a real email address. 98 00:05:00,030 --> 00:05:04,940 ‫So we go to Postman and let's close all of these here. 99 00:05:09,994 --> 00:05:10,827 ‫All right, 100 00:05:12,660 --> 00:05:15,980 ‫and so I will create "Jonas." 101 00:05:15,980 --> 00:05:19,250 ‫And now as the email address I will create one of these 102 00:05:19,250 --> 00:05:22,590 ‫disposable emails which is basically an email address 103 00:05:22,590 --> 00:05:25,513 ‫and an inbox for which we don't even have to sign up. 104 00:05:27,350 --> 00:05:30,333 ‫So, we're going to use the Mailsac service. 105 00:05:32,880 --> 00:05:34,413 ‫So that goes like that, 106 00:05:37,070 --> 00:05:40,140 ‫and so here we can now really put anything. 107 00:05:40,140 --> 00:05:41,583 ‫So let's just put "Jonas" 108 00:05:42,740 --> 00:05:46,570 ‫and then everyone can access this, all right? 109 00:05:46,570 --> 00:05:49,860 ‫So I will now register with this email address 110 00:05:49,860 --> 00:05:53,563 ‫and so the welcome email should then end up in this inbox. 111 00:05:54,500 --> 00:05:57,750 ‫And you of course, when you're testing this on your own 112 00:05:57,750 --> 00:06:01,610 ‫can of course use your own email address for this, okay? 113 00:06:01,610 --> 00:06:04,800 ‫So go ahead, create a user basically for yourself 114 00:06:04,800 --> 00:06:09,350 ‫with your own email address, and then hit "Send." 115 00:06:09,350 --> 00:06:12,563 ‫And so now our email should be sent using SendGrid. 116 00:06:13,900 --> 00:06:16,140 ‫And now that might take a little bit of time 117 00:06:17,380 --> 00:06:21,320 ‫but let's reload here, maybe it's already there. 118 00:06:21,320 --> 00:06:22,493 ‫And actually it's not. 119 00:06:23,690 --> 00:06:26,093 ‫So let's take a look at here our dashboard. 120 00:06:27,850 --> 00:06:29,170 ‫And from my experience, 121 00:06:29,170 --> 00:06:31,540 ‫this actually doesn't work right away. 122 00:06:31,540 --> 00:06:34,570 ‫So for example this "EMAILS TODAY" number here 123 00:06:34,570 --> 00:06:37,130 ‫always takes some time to actually update. 124 00:06:37,130 --> 00:06:39,800 ‫And also the first emails that you send, 125 00:06:39,800 --> 00:06:42,443 ‫they not always actually show up where they should. 126 00:06:43,480 --> 00:06:47,410 ‫So this behavior that we're seeing here is kind of normal. 127 00:06:47,410 --> 00:06:51,760 ‫But let's try this again, so we still got no email here. 128 00:06:51,760 --> 00:06:54,490 ‫But actually the reason for that is 129 00:06:54,490 --> 00:06:57,730 ‫that remember that this transport is only going to work 130 00:06:57,730 --> 00:07:00,330 ‫in production and so actually we need 131 00:07:00,330 --> 00:07:03,270 ‫to run our application in production. 132 00:07:03,270 --> 00:07:05,820 ‫Which right now we are not doing. 133 00:07:05,820 --> 00:07:07,610 ‫So let's now do that, 134 00:07:07,610 --> 00:07:12,203 ‫npm run start production, 135 00:07:14,380 --> 00:07:17,960 ‫and so let's now actually try that again. 136 00:07:17,960 --> 00:07:21,503 ‫So first I'm going to delete the user that we just created. 137 00:07:26,950 --> 00:07:28,933 ‫So it's this one here, 138 00:07:32,660 --> 00:07:35,340 ‫and actually let me delete all of these 139 00:07:35,340 --> 00:07:36,673 ‫that we don't really need, 140 00:07:39,270 --> 00:07:40,683 ‫so all these test users. 141 00:07:43,210 --> 00:07:45,970 ‫All right, and so now let's try this again 142 00:07:45,970 --> 00:07:47,390 ‫with this email address. 143 00:07:49,820 --> 00:07:53,550 ‫And that is still successful and now let's take again 144 00:07:53,550 --> 00:07:55,773 ‫a look at our email inbox. 145 00:07:56,837 --> 00:08:00,093 ‫We look that, and now we get one message! 146 00:08:01,880 --> 00:08:05,330 ‫So, when we open that, then here it is. 147 00:08:05,330 --> 00:08:07,530 ‫Now for some reason, this application 148 00:08:07,530 --> 00:08:10,570 ‫is doing something weird with this button here. 149 00:08:10,570 --> 00:08:12,410 ‫So it seems like they are applying 150 00:08:12,410 --> 00:08:14,480 ‫their own styles here to this email. 151 00:08:14,480 --> 00:08:16,700 ‫But nevermind, what matters here 152 00:08:16,700 --> 00:08:18,540 ‫is that it did actually worked. 153 00:08:18,540 --> 00:08:20,970 ‫And so now, we send our very first email 154 00:08:20,970 --> 00:08:23,393 ‫using Sendgrid to a real inbox. 155 00:08:24,350 --> 00:08:27,670 ‫Now let's just see if it actually shows up here as well. 156 00:08:27,670 --> 00:08:31,253 ‫But as I said, sometimes that takes sometime to show up. 157 00:08:32,220 --> 00:08:36,170 ‫So as I mentioned before, it still shows zero emails here 158 00:08:36,170 --> 00:08:39,803 ‫while in fact, we already sent and received one email. 159 00:08:41,880 --> 00:08:43,160 ‫Okay. 160 00:08:43,160 --> 00:08:46,310 ‫So great, so with this you can now send 161 00:08:46,310 --> 00:08:49,470 ‫up to one hundred free emails, I believe. 162 00:08:49,470 --> 00:08:51,870 ‫It says something here, yeah. 163 00:08:51,870 --> 00:08:54,230 ‫So with the trial, that you just started 164 00:08:54,230 --> 00:08:55,150 ‫I think it's even more, 165 00:08:55,150 --> 00:08:57,300 ‫it's like thousands of emails per day. 166 00:08:57,300 --> 00:08:59,470 ‫But the after some time, you get downgraded 167 00:08:59,470 --> 00:09:01,030 ‫to just one hundred. 168 00:09:01,030 --> 00:09:03,370 ‫So if you have a real app and a real company, 169 00:09:03,370 --> 00:09:06,780 ‫of course you'll have to pay for this one (mumble). 170 00:09:06,780 --> 00:09:10,510 ‫But then at that point, that's also no problem hopefully. 171 00:09:10,510 --> 00:09:14,620 ‫Anyway, this now wraps up our part about sending emails. 172 00:09:14,620 --> 00:09:17,320 ‫And in the rest of this (mumble), we're now gonna be talking 173 00:09:17,320 --> 00:09:20,210 ‫about accepting payments with credit cards 174 00:09:20,210 --> 00:09:22,870 ‫and creating bookings in our system. 175 00:09:22,870 --> 00:09:25,910 ‫So that is really really exciting and so, 176 00:09:25,910 --> 00:09:27,483 ‫I hope to see you there soon.