WEBVTT 00:00.540 --> 00:07.530 All right, guys, now in the last lesson, we've set up our requests and responses to the get requests 00:07.530 --> 00:14.460 and the post requests on our home route, and by doing this, we're able to load up our sign up page 00:14.790 --> 00:22.680 with bootstrap enabled and we're able to send this data over to our servers using body parts. 00:23.310 --> 00:27.110 So now it's time to start incorporating our API. 00:27.450 --> 00:34.190 So if we Google for MailChimp API, then we get taken to developer Dot MailChimp dot com. 00:34.650 --> 00:41.760 And this is the documentation for MailChimp latest API version 3.0. 00:42.360 --> 00:47.690 So we're going to go ahead and get started with the MailChimp API. 00:48.330 --> 00:57.180 Now, as they say here, in order to use the API, we need to get a API key to authenticate ourselves 00:57.330 --> 01:04.170 with their servers because after all, you don't want some random person to start adding subscribers 01:04.170 --> 01:05.340 to your mailing list. 01:05.340 --> 01:05.680 Right. 01:05.700 --> 01:12.210 And you definitely don't want somebody to just delete your entire mailing list by making post requests 01:12.210 --> 01:13.710 that are not authorized. 01:14.220 --> 01:17.940 So let's go ahead and set up our API key. 01:18.820 --> 01:25.860 If you don't have a mail account, then this is a good time to set one up to sign up for a MailChimp 01:25.860 --> 01:29.960 account, just head over to Meltem Dotcom and then click on Sign Up for Free. 01:30.570 --> 01:35.940 And here you can create a new account with MailChimp and it's completely free and it doesn't require 01:35.940 --> 01:37.210 any credit card details. 01:37.440 --> 01:43.950 The process is pretty self-explanatory, but you want to choose the free plan and tell them that you 01:43.950 --> 01:47.220 don't have an existing list of email subscribers. 01:47.430 --> 01:51.450 And finally, you can click on Not Right Now for finding the marketing path. 01:52.170 --> 01:56.670 Now, once you're done, go ahead and log in and then we're going to get your API key. 01:57.120 --> 02:05.190 So to do this, click on your account name, go to accounts, extras and click on API keys. 02:05.730 --> 02:12.960 Now, once you're here, you can scroll down and click on create an API key and that will generate a 02:12.960 --> 02:14.750 new API key for you. 02:15.150 --> 02:22.680 So you want to go ahead and select your API key from here and then paste it at the very bottom of your 02:22.680 --> 02:27.510 app and we're going to convert it out for now or come back to it a little bit later on. 02:28.290 --> 02:33.930 So now that we've got our API key, then we're ready to interact with MailChimp servers through their 02:33.930 --> 02:34.420 API. 02:34.650 --> 02:41.700 If you head back to Meltem Dotcom slash developer and then scroll down to click on their API reference, 02:42.330 --> 02:49.770 then we can use this as our instruction manual to figure out how to add subscribers to our list. 02:50.400 --> 02:54.150 The first thing to do is to head over to the list section. 02:54.480 --> 02:56.580 And there's a number of things that you can do here. 02:56.700 --> 02:59.910 You can create, you can read, you can edit and you can delete. 03:00.330 --> 03:07.620 Now we're interested in the creation part because we want to subscribe some list members. 03:07.770 --> 03:15.840 So I'm going to click on here and I end up at this post route which allows me to Bache subscribe or 03:15.840 --> 03:17.590 unsubscribe list members. 03:18.090 --> 03:24.180 Now, the process is exactly the same if you want to, but subscribe lots of people or simply subscribe 03:24.180 --> 03:33.690 a single person, all you need is a list ID and you can provide the members that you want to subscribe 03:34.020 --> 03:36.970 in the body of your request. 03:37.320 --> 03:39.450 So how do we do all of that? 03:39.720 --> 03:40.980 Well, first things first. 03:40.980 --> 03:42.690 Let's get our list ID. 03:43.590 --> 03:48.720 If you go back to Meltem Dotcom and presuming that you're already logged in, you can simply go to the 03:48.750 --> 03:52.560 audience and manage audience. 03:53.910 --> 03:54.750 Settings. 03:55.990 --> 04:04.150 And scroll down to get your unique ID, this is your audience ID or also known as List ID, and that 04:04.150 --> 04:09.400 is going to help Belgium identify the list that you want to put your subscribers into. 04:09.850 --> 04:15.790 So let's go ahead and copy that and paste it at the bottom of our APGAR'S and we're going to comment 04:15.790 --> 04:16.680 it out as well. 04:17.110 --> 04:23.560 Now that we've got our APIC and our list Idy, then we're ready to move on to the next step, which 04:23.560 --> 04:26.740 is to start sending our request to MailChimp. 04:27.670 --> 04:34.540 Let's go back to MailChimp dotcom slash developer and click on Get Started to see how we can start interacting 04:34.540 --> 04:36.030 with the MailChimp API. 04:36.670 --> 04:42.400 If you scroll down on this page, you can see that they've got a section on code examples, which is 04:42.400 --> 04:47.060 usually a nice way of understanding how to work with a particular API. 04:47.860 --> 04:53.440 So here they've got a couple request, which is actually something that's done in the terminal. 04:53.980 --> 04:57.440 But in our case, we're going to implement this using our code. 04:58.090 --> 05:01.060 So take a look at this data section. 05:01.390 --> 05:06.230 This is the sort of data that they would expect us to send to their server. 05:06.580 --> 05:15.040 So if I just copy this and paste it into our code, then you can see that this is essentially a flatpack 05:15.040 --> 05:16.270 JSON, right. 05:16.480 --> 05:22.380 So it's all full of strings and it's delineated by these curly braces and colon's. 05:22.780 --> 05:28.810 So what we would have to do is to create our data that we want to post as a JSON. 05:29.200 --> 05:32.320 So first let's create the JavaScript object. 05:32.590 --> 05:39.250 So let's create a new variable called data and I'm going to set that as a new JavaScript object. 05:39.730 --> 05:48.160 Now, inside our data object, we have to provide all the key value pairs with keys that MailChimp is 05:48.160 --> 05:49.010 going to recognize. 05:49.570 --> 05:57.940 So if we go back to the API reference and go to list slash audiences, you can see that our data is 05:57.940 --> 06:02.600 going to be sent via the body parameters using a key code members. 06:03.040 --> 06:11.500 Now, this members happens to be an array of objects, each representing a member that we want to subscribe 06:11.950 --> 06:16.860 so we can add up to 500 in our array to subscribe at the same time. 06:17.290 --> 06:23.020 But if we click on show properties, you can see that each of these members can have their own properties, 06:23.020 --> 06:28.960 like the email address for the subscriber, the status and the merge fields. 06:29.320 --> 06:33.070 These are the merge fields that will contain their first names or last names. 06:33.550 --> 06:37.450 Let's create our members key value pair first. 06:37.930 --> 06:40.540 So data is going to be called members. 06:41.230 --> 06:45.540 And this members, remember, has to be an array of objects. 06:45.910 --> 06:51.460 So we're going to open up another set of objects and we're only going to have a single object now array, 06:51.460 --> 06:54.760 because we're only going to subscribe one person at a time. 06:55.510 --> 06:58.750 Now the email key is called Email Address. 06:58.750 --> 07:03.690 And just to prevent myself making a typo, I'm just going to copy and paste it in here. 07:04.330 --> 07:11.290 And the value of this key is going to be the email that we got from the body of the post request. 07:12.080 --> 07:18.550 So let's put the email here and then the next one is going to be the status. 07:18.730 --> 07:24.760 So let's again copy and paste it and you can see it can have four possible value subscribed, unsubscribed, 07:24.760 --> 07:27.840 preened or pending and we're going to go for subscribed. 07:28.390 --> 07:40.360 So status is equal to the string subscribed and then the next one is going to be the merge fields and 07:40.360 --> 07:41.370 the merge fields. 07:41.380 --> 07:43.480 Notice how this is now an object. 07:43.660 --> 07:50.470 So we have to put in our merge fields and then open up a set of curly braces and you can set the names 07:50.470 --> 07:57.370 of these merge fields by going to your audience and then going to settings and going to audience fields 07:57.370 --> 07:58.600 and merge tags. 07:58.990 --> 08:06.010 So if you take a look down this list, most contacts come by default with a first name, last name, 08:06.010 --> 08:06.640 birthday. 08:07.090 --> 08:12.220 And the word that's inside this field is the merge field. 08:12.550 --> 08:16.770 And by default, Meldrim sets it to F name and L name in all caps. 08:17.200 --> 08:20.970 You can either change that or as I would recommend, keeping it the same. 08:21.700 --> 08:29.770 So let's use F name as the first key, which is going to hold the first name from the form and then 08:29.770 --> 08:33.610 L name, which is going to hold the last name from the form. 08:34.540 --> 08:43.960 Now we have our data object completed, but this is JavaScript and what we need is actually to turn 08:43.960 --> 08:46.600 this into a flatpack Jason. 08:47.020 --> 08:54.520 So I'm going to create a new variable called Jason Data and I'm going to send this to Jason Dot String 08:54.520 --> 08:55.000 if I. 08:55.440 --> 09:03.720 And I'm going to pass in my data into here so that I turn this data into a string that is in the format 09:03.720 --> 09:09.630 of a Jasen now, because I'm actually never going to change any of these variables. 09:09.660 --> 09:12.060 I can actually change them all to constants. 09:16.840 --> 09:19.550 So now we have our Jason data. 09:19.990 --> 09:26.650 This is what we're going to send to MailChimp and we're ready for the next step, which is to make our 09:26.650 --> 09:27.460 request. 09:28.150 --> 09:37.150 Now, remember, previously we used the GPS module and all that we did was say https dot gets. 09:37.490 --> 09:42.090 And then inside here we put in a U-Haul and then a callback function. 09:42.100 --> 09:42.430 Right. 09:43.030 --> 09:49.980 But that, as you can guess, only makes get requests when we want data from an external resource. 09:50.530 --> 09:55.710 But in our case, we actually want to post data to the external resource. 09:56.140 --> 10:03.640 So if we go back to the documentation of the GPS module, you can see that in addition to https dot 10:03.820 --> 10:03.900 com. 10:03.940 --> 10:07.990 Yet there's also one called dot request. 10:08.500 --> 10:10.900 And in this case, in addition to adding a U. 10:10.900 --> 10:15.630 RL to make our request to, we can also specify some options. 10:16.090 --> 10:22.650 Now, it tells us that these options accept all options from the HTP dot request module. 10:22.930 --> 10:25.840 So let's click on and see what options we can have. 10:26.620 --> 10:33.490 So in our options, there's something called method, and this allows us to specify the type of request 10:33.490 --> 10:34.420 we want to make. 10:34.420 --> 10:37.900 For example, get or in our case, it'll be post. 10:38.940 --> 10:48.210 Heading back to our code, let's go ahead and create a constant for the module and require it now down 10:48.210 --> 10:55.170 here, just below where we've got our JSON data, but still within the app dot post, we're going to 10:55.170 --> 10:57.030 create our request. 10:57.330 --> 11:06.060 So we're going to say HGP dot request and we're going to Pazin firstly are YORO and then we're going 11:06.060 --> 11:07.590 to pass in our options. 11:07.860 --> 11:14.280 And finally, we're going to have a callback, which is going to give us a response from the MailChimp 11:14.280 --> 11:14.830 server. 11:15.300 --> 11:17.490 So let's fill in each of these fields. 11:18.030 --> 11:22.470 Now, the URL is going to come from the main MailChimp endpoint. 11:22.920 --> 11:28.280 We can find out which you are allowed to use by going to the MailChimp API documentation. 11:28.740 --> 11:34.140 So in the section code example, it shows us that this is the URL that they're using. 11:34.560 --> 11:39.570 And in fact, all the way up to here is the MailChimp API end point. 11:40.050 --> 11:43.800 And then afterwards we have optional paths that we can tag on. 11:44.220 --> 11:50.300 And if we wanted to subscribe some members, then we would be posting to forward slash lists, forward 11:50.310 --> 11:53.000 slash the list ID that we want to target. 11:53.400 --> 12:00.220 So I'm going to copy this entire YORO and I'm going to paste it into my YORO here. 12:01.020 --> 12:08.580 Now, in addition, I have to add a list ID because in MailChimp you could have multiple lists and you 12:08.580 --> 12:12.060 have to tell it which list you want to subscribe members into. 12:12.810 --> 12:19.830 Now remember previously I'd already saved the list ID of my main audience and I've really got it down 12:19.830 --> 12:25.280 here, so I'm just going to copy that and tag that to the end of the euro. 12:25.980 --> 12:29.250 So there's just one last thing before we're done with the URL. 12:29.850 --> 12:33.600 Notice how here says U.S. and then it's got an X. 12:34.110 --> 12:42.150 You have to replace that X with the number that you have in your APIC after the word US. 12:43.020 --> 12:48.630 Milchan has several servers that they're running simultaneously because they're a big operation. 12:49.080 --> 12:55.020 And when you sign up, you get randomly assigned to one of them and it could be anywhere from U.S. one 12:55.020 --> 12:56.140 to US 20. 12:56.640 --> 13:03.660 Take a look at your API key and see what number you've got after the word U.S. and then copy that number 13:03.930 --> 13:06.450 and replace the X with that number. 13:07.410 --> 13:10.350 So now we finally completed our U. 13:10.350 --> 13:10.800 RL. 13:11.190 --> 13:13.560 The next step is to create some options. 13:15.070 --> 13:19.210 So I'm going to call it options and it's going to be a JavaScript object. 13:20.350 --> 13:28.660 Now, the most important option I have to specify is the method, so let's specify a method and let's 13:28.660 --> 13:31.000 set it to post now. 13:31.000 --> 13:37.390 The next thing I have to do if I want this post request to go through successfully is to provide some 13:37.390 --> 13:38.910 form of authentication. 13:39.400 --> 13:46.210 We've really got a hold of our epic earlier on from MailChimp, but now we need to think about how are 13:46.210 --> 13:52.960 we going to use it if we go back to get started and take a look at authentication methods, it tells 13:52.960 --> 14:01.300 us that we can use the basic HGP authentication and enter any string as a username and our API key as 14:01.300 --> 14:02.080 the password. 14:02.740 --> 14:05.260 For example, it might look something like this. 14:05.260 --> 14:08.020 Any string kolon, your API key. 14:08.290 --> 14:15.520 Now in the options for our HTP request function, there is something called auth which allows us to 14:15.520 --> 14:18.180 do this form of basic authentication. 14:18.460 --> 14:20.260 So that's what we're going to add next. 14:20.770 --> 14:27.550 In addition to the method key in our options, we're going to add a fourth column and then we're going 14:27.550 --> 14:29.020 to specify a string. 14:29.590 --> 14:35.410 Now, MailChimp said that we could use any string as the username and then separate the username from 14:35.410 --> 14:39.310 the password, which is going to be the API key with the Kolon. 14:39.760 --> 14:42.300 So it should look something like this. 14:42.460 --> 14:47.950 It doesn't matter what you write here, as long as you have something and then you have a colon and 14:47.950 --> 14:55.390 then you paste in your API key, making sure that your region in the API key matches with the region 14:55.390 --> 14:56.320 in your URL. 14:57.840 --> 15:04.710 So now we're finally ready to make our HCB request, and when we get back a response, we're going to 15:04.710 --> 15:07.440 check what data they sent us. 15:07.500 --> 15:11.310 So we're going to say response start on just like how we did before. 15:11.730 --> 15:16.920 We're going to specify that we're looking out for any data that we get sent back from the MailChimp 15:16.920 --> 15:24.930 server and then we're just going to log our data, but we're going to use the jasen pass to pass it 15:24.930 --> 15:25.380 first. 15:26.130 --> 15:34.260 So now some of you might be wondering, OK, so we made a request, but nowhere in this request or in 15:34.260 --> 15:42.240 our URL or in our options have we specified what it is that we want to send to MailChimp, namely our 15:42.240 --> 15:49.080 Jason data, which comes from here, and it includes the email address and the first and last name of 15:49.080 --> 15:50.010 our subscriber. 15:50.640 --> 15:52.110 So that's a very good point. 15:52.410 --> 15:59.280 In order to send that data, if we take a look back at the documentation for the request method, we 15:59.280 --> 16:05.940 have to save our request in a constant and then later on, we can use that constant request to send 16:05.940 --> 16:09.990 things over to the MailChimp server by calling request. 16:10.060 --> 16:10.800 All right. 16:12.210 --> 16:19.080 Let's go ahead and create a new constant called request, because we don't want to conflict with our 16:19.110 --> 16:20.070 reck here. 16:20.850 --> 16:27.770 And then we're going to use this request and we're going to call request dot right. 16:28.230 --> 16:29.250 And inside. 16:29.250 --> 16:30.000 All right. 16:30.000 --> 16:36.150 We're going to pass the jasen data to the MailChimp server and then to specify that we're done with 16:36.150 --> 16:39.340 the request we call request dot end. 16:39.840 --> 16:41.580 Now, let's test it out. 16:42.300 --> 16:47.990 So let's hit save on our Apgar's and let's just check hyper to make sure that we don't have any errors. 16:48.360 --> 16:52.710 And now let's go to our localhost 3000 and try to sign up. 16:53.070 --> 16:59.070 So I'm going to put in my own name and then I'm just going to use a random email, let's call it, I 16:59.070 --> 17:05.490 don't know, 456 at email dot com and click sign me up. 17:05.880 --> 17:12.390 Now, at this point, if we look inside our terminal, you'll see what we get sent back as the data 17:12.660 --> 17:13.710 from MailChimp. 17:14.250 --> 17:21.540 And it seems to suggest that a new member has been added and there were no errors in this process. 17:22.200 --> 17:28.680 So now if we go to our MailChimp account and go to our audience, you should be able to see that you 17:28.680 --> 17:30.600 should have a new contact. 17:31.380 --> 17:37.320 And if you click on that number one or two that you might see there, you should see the email that 17:37.320 --> 17:40.410 we just inputted, the first name and the last name. 17:40.920 --> 17:44.490 And it's all now been added to our audience. 17:45.180 --> 17:52.110 And if you want to add another member, you can go to the URL bar hit enter again to restart it and 17:52.110 --> 17:53.860 add a new person. 17:54.300 --> 17:59.430 Now, when I click, sign me up and go back to our audience and hit refresh. 17:59.760 --> 18:07.200 You should see we now have two entries and you can keep adding this, but our website still has a number 18:07.200 --> 18:08.660 of small faults, right? 18:09.060 --> 18:12.510 Like when we click sign me up, it kind of just hangs. 18:12.510 --> 18:17.910 It doesn't do anything, doesn't give any feedback to the user whether if it was successful or whether 18:17.910 --> 18:18.600 if it failed. 18:19.350 --> 18:22.560 So in the next lesson, that's exactly what we're going to be doing. 18:22.560 --> 18:28.230 We're going to be sending the user to a success page if everything went well and we're going to be sending 18:28.230 --> 18:31.370 them to a problem page if it went badly. 18:31.980 --> 18:37.020 So have a play around with your existing Web page, and once you're ready, head over to the next lesson.