1 00:00:00,520 --> 00:00:05,940 In the last video we got a quick reminder on how we are going to be making use of Web hooks to get some 2 00:00:05,940 --> 00:00:11,040 communication from Send grid whenever a user clicks on one of the links inside of our e-mails. 3 00:00:11,220 --> 00:00:15,450 So let's dive a little bit more into web hooks to understand exactly how they work. 4 00:00:15,660 --> 00:00:20,590 And also talked about how they work in the development versus production environments. 5 00:00:21,010 --> 00:00:21,420 OK. 6 00:00:21,480 --> 00:00:26,610 So here's the first thing that I want you to understand about web hooks specifically as they are implemented 7 00:00:26,910 --> 00:00:28,320 by centered. 8 00:00:28,380 --> 00:00:33,460 So in this diagram we're kind of modeling out the lifecycle of a web hook inside of our application. 9 00:00:33,720 --> 00:00:38,940 So we're saying that the user clicks a link and then maybe two seconds later another user clicks a different 10 00:00:38,940 --> 00:00:44,610 link and then five seconds later another user clicks another different link so we can just imagine that 11 00:00:44,910 --> 00:00:51,090 in very short succession we might have a bunch of different users inside an application click several 12 00:00:51,090 --> 00:00:54,060 different links inside of many different emails. 13 00:00:54,090 --> 00:00:58,160 Now for every one of these clicks send grid records that click event. 14 00:00:58,170 --> 00:01:00,470 They say OK someone just clicked on this. 15 00:01:00,510 --> 00:01:06,270 Here's the user who clicked on it like here's their email and here is the exact link that they clicked 16 00:01:06,270 --> 00:01:12,900 on send grid then doesn't immediately send all that information over to our back and server. 17 00:01:12,900 --> 00:01:19,590 So there is not one single post request or one single request from Send grid to our server every single 18 00:01:19,590 --> 00:01:21,160 time the user clicks on a link. 19 00:01:21,390 --> 00:01:30,100 Instead send grid waits and only every 30 seconds or one minute or every some interval of time does 20 00:01:30,120 --> 00:01:37,500 Sun Grid make a single request over to our API and inside that request it says hey in the last 30 seconds 21 00:01:37,530 --> 00:01:42,690 or in the last one minute or so here are all the different events that just occurred. 22 00:01:42,930 --> 00:01:44,810 Tied to your different e-mails. 23 00:01:44,880 --> 00:01:49,430 So we're not going to get a single request corresponding to every single individual link. 24 00:01:49,560 --> 00:01:55,380 Instead we're going to get one big bold request that contains a lot of different click events that we're 25 00:01:55,380 --> 00:01:56,820 going to have to process. 26 00:01:57,000 --> 00:02:00,800 So about every 30 seconds or so will we will eventually get one of these requests. 27 00:02:00,870 --> 00:02:02,730 We'll do some processing on it. 28 00:02:02,730 --> 00:02:08,000 Update all the relevant surveys and then wait for the next web to come in from centigrade. 29 00:02:08,160 --> 00:02:09,970 So that's the first thing to understand. 30 00:02:10,420 --> 00:02:10,730 OK. 31 00:02:10,830 --> 00:02:14,030 So that's kind of how the web hook itself is going to be working. 32 00:02:14,160 --> 00:02:20,160 I now want to talk to you a little bit about how our Web is going to work in the production versus development 33 00:02:20,160 --> 00:02:20,940 environments. 34 00:02:20,970 --> 00:02:23,530 And so this is where things get a little bit hairy. 35 00:02:23,820 --> 00:02:29,010 We will first talk about how web hooks work in production because that is the easier case and then we'll 36 00:02:29,010 --> 00:02:35,120 talk about exactly how things start to break down when we are in the development environment. 37 00:02:35,850 --> 00:02:36,150 Okay. 38 00:02:36,150 --> 00:02:38,730 So here is in production this is the easy case. 39 00:02:38,730 --> 00:02:43,180 This is the case which like you can probably kind of figure out exactly what is going on here. 40 00:02:43,260 --> 00:02:49,800 So every 30 seconds or so second grade is going to make a post request to our express server saying 41 00:02:50,070 --> 00:02:53,600 here's a list of all the different clicks here is all the data I have about all of them. 42 00:02:53,660 --> 00:02:59,330 So it is going to formulate some request it will make a post request to some route that we give it. 43 00:02:59,340 --> 00:03:05,640 So something like you know email the dot com slash surveys slash workbook's that request then comes 44 00:03:05,640 --> 00:03:08,760 into our API and hey were happy like you know we get the list. 45 00:03:08,760 --> 00:03:11,520 We process it and do whatever we want. 46 00:03:11,520 --> 00:03:16,110 Now the real key that I want to point out here is kind of very easy thing the thing that makes our life 47 00:03:16,110 --> 00:03:22,380 real simple when we are specifically in production is the fact that said grid is going to make a request 48 00:03:22,740 --> 00:03:29,850 to our server that is hosted at a domain like email or dot com or if we are still using Heroku it would 49 00:03:29,850 --> 00:03:37,350 be the you know for me agile Bayu Roku app dot com This is a server that is available to the outside 50 00:03:37,350 --> 00:03:38,120 world. 51 00:03:38,220 --> 00:03:45,840 It is a domain that is available to the whole entire Internet and so it has absolutely no issues making 52 00:03:45,840 --> 00:03:53,490 a post request to a domain of something like email or dot com or agile by you Roku abduct com. 53 00:03:53,990 --> 00:03:56,340 So in production things work out just fine. 54 00:03:56,610 --> 00:04:01,440 Well no let's don't think a little bit about the development environment and how this domain's start 55 00:04:01,740 --> 00:04:04,950 might start to get just a little bit tricky. 56 00:04:04,980 --> 00:04:11,550 Okay so now in the development world as we are running our lab to our application on our local laptops 57 00:04:11,940 --> 00:04:15,460 our server is hosted at local host 5000. 58 00:04:15,600 --> 00:04:17,340 And so when we say Hey great. 59 00:04:17,340 --> 00:04:20,160 Tell us about all the clicks and last 30 seconds or so. 60 00:04:20,310 --> 00:04:26,920 Senator it says Wait make a post request to wear to local host 5000 local host. 61 00:04:26,940 --> 00:04:34,790 5000 is a address that is specific to our laptop to our very specific machine right now on your machine. 62 00:04:34,800 --> 00:04:37,200 You have a local host 5000 on mine. 63 00:04:37,200 --> 00:04:43,650 I have a completely different local host 5000 that is only a valid address to our local development 64 00:04:43,650 --> 00:04:44,520 environment. 65 00:04:44,690 --> 00:04:50,580 And so if we said localhost 5000 to descend grid singer to be like wait where local host what domain 66 00:04:50,580 --> 00:04:51,890 is that. 67 00:04:52,000 --> 00:04:58,230 It does not have the ability to reach out directly to your very particular laptop and make a post request 68 00:04:58,470 --> 00:05:03,870 to your running development server now just to clarify it could theoretically be done. 69 00:05:03,890 --> 00:05:08,420 You know we could set up some fancy routing rules on your local network to make all this happen. 70 00:05:08,540 --> 00:05:13,910 But that is some very custom set up that's always going to be slightly different depending on what local 71 00:05:13,910 --> 00:05:18,830 network you're running on like I'm talking specifically about your router that you have running at your 72 00:05:18,830 --> 00:05:21,680 home or your office or your local coffee shop. 73 00:05:21,710 --> 00:05:24,160 And so we wouldn't want to go through that complicated setup. 74 00:05:24,500 --> 00:05:30,680 Instead we need to think of some other clever approach to make sure that whenever a web hook is issued 75 00:05:30,740 --> 00:05:39,650 from Send grid to our development server it somehow magically gets redirected somehow to our local running 76 00:05:39,650 --> 00:05:40,900 development machine. 77 00:05:40,910 --> 00:05:45,810 That's what we really ideally would want to do and that is in fact exactly what we're going to do. 78 00:05:45,830 --> 00:05:50,450 So we're going to fix this up and make sure that we're Polk's still work in the development environment 79 00:05:50,540 --> 00:05:52,280 as well. 80 00:05:52,280 --> 00:05:58,500 Now to do so we're going to use a little package a little service called local tunnel. 81 00:05:58,500 --> 00:06:03,910 Let's talk about exactly what local tunnel is going to do for us and how it's going to solve this issue. 82 00:06:04,830 --> 00:06:07,390 OK so here's life with local tunnel. 83 00:06:07,610 --> 00:06:13,140 So we're still in development and we now have split our diagram into two separate worlds. 84 00:06:13,370 --> 00:06:15,240 Everything running on the outside internet. 85 00:06:15,260 --> 00:06:20,240 The actual web and then everything running on our local development laptop. 86 00:06:20,240 --> 00:06:26,090 So now in this world we're going to say that when ever said grid makes a post request to hopefully our 87 00:06:26,090 --> 00:06:34,460 server we're going to tell send grid to send that post request to the domain local tunnel dot com. 88 00:06:34,460 --> 00:06:40,280 So local tunnel dot com right here is a special API It's a special service that we can make use of for 89 00:06:40,280 --> 00:06:44,930 free to automatically handle web Pook's nicely inside the development environment. 90 00:06:45,160 --> 00:06:50,750 So local tunnel dot com It is an outside service that we are going to be making use of we are going 91 00:06:50,750 --> 00:06:56,060 to tell cent we're going to tell us this and we're going to tell local tunnelled dot com that if they 92 00:06:56,090 --> 00:07:03,380 ever receive a post request to the domain of something like the subdomain of web hook helper then they 93 00:07:03,380 --> 00:07:09,560 should take that request and automatically forward it on to a local tunnel's server that is running 94 00:07:09,560 --> 00:07:11,840 on our local laptop. 95 00:07:11,900 --> 00:07:17,870 We will then tell this local server for the request on to local host 5000. 96 00:07:17,870 --> 00:07:23,090 So essentially the reason this is going to work is that we're going to stand up some local server that 97 00:07:23,180 --> 00:07:26,080 automatically communicates with local Tunnell dot com. 98 00:07:26,100 --> 00:07:31,610 And so there's a lot of very active traffic that happens back and forth between this remote local tunnelled 99 00:07:31,610 --> 00:07:36,370 dot com and this local tunnelled server that we are running on our machine. 100 00:07:36,410 --> 00:07:41,840 So any time a request comes into local tunnel dotcom will be automatically forwarded to our local server 101 00:07:42,200 --> 00:07:45,810 that will then forward the request onto our local API. 102 00:07:46,280 --> 00:07:52,010 So if this sounds complicated it's because it kind of is what folks are actually quite notorious for 103 00:07:52,010 --> 00:07:56,050 being kind of challenging to set up in the local development environment. 104 00:07:56,270 --> 00:08:01,160 And so this helper that we're making use of right here is just one of many different services that are 105 00:08:01,160 --> 00:08:05,630 out there designed to make your life a little bit easier when it comes to web hooks. 106 00:08:05,630 --> 00:08:11,000 Now we are using local tunnelled dot com in particular because it is a free service that is really easy 107 00:08:11,000 --> 00:08:14,280 to get started with and you don't have to sign up or anything like that. 108 00:08:14,280 --> 00:08:17,910 All you've got to do is install a little server and you're pretty much good to go. 109 00:08:18,440 --> 00:08:18,730 OK. 110 00:08:18,740 --> 00:08:22,520 So I do want to show you a little bit of documentation around local tunnel. 111 00:08:22,790 --> 00:08:29,720 So in my browser I have already navigated to their web page so you can go to your local tunnel dot get 112 00:08:29,720 --> 00:08:32,740 hub I.O. slash WDW. 113 00:08:33,920 --> 00:08:38,210 And if you want to you you can read a little bit around the documentation here but in general it's pretty 114 00:08:38,210 --> 00:08:39,800 easy to get started with. 115 00:08:39,830 --> 00:08:46,490 So we're going to install local Tunnell as an MP module that we can then start up a server and tell 116 00:08:46,550 --> 00:08:52,940 local tunnel that if any requests come in automatically forward that request on to a very specific port. 117 00:08:52,940 --> 00:08:55,820 So for us this will be port five thousand right here. 118 00:08:56,240 --> 00:08:59,760 And then again you know it's all free really to get started with. 119 00:08:59,930 --> 00:09:00,540 OK. 120 00:09:00,920 --> 00:09:02,050 So let's take a quick break. 121 00:09:02,060 --> 00:09:06,080 We'll come back in the next section and we're going to set up this local tunnel's stuff. 122 00:09:06,170 --> 00:09:07,620 So we'll see you in just a minute.