All right, guys, now in the last lesson, we've set up our requests and responses to the get requests
and the post requests on our home route, and by doing this, we're able to load up our sign up page
with bootstrap enabled and we're able to send this data over to our servers using body parts.
So now it's time to start incorporating our API.
So if we Google for MailChimp API, then we get taken to developer Dot MailChimp dot com.
And this is the documentation for MailChimp latest API version 3.0.
So we're going to go ahead and get started with the MailChimp API.
Now, as they say here, in order to use the API, we need to get a API key to authenticate ourselves
with their servers because after all, you don't want some random person to start adding subscribers
to your mailing list.
Right.
And you definitely don't want somebody to just delete your entire mailing list by making post requests
that are not authorized.
So let's go ahead and set up our API key.
If you don't have a mail account, then this is a good time to set one up to sign up for a MailChimp
account, just head over to Meltem Dotcom and then click on Sign Up for Free.
And here you can create a new account with MailChimp and it's completely free and it doesn't require
any credit card details.
The process is pretty self-explanatory, but you want to choose the free plan and tell them that you
don't have an existing list of email subscribers.
And finally, you can click on Not Right Now for finding the marketing path.
Now, once you're done, go ahead and log in and then we're going to get your API key.
So to do this, click on your account name, go to accounts, extras and click on API keys.
Now, once you're here, you can scroll down and click on create an API key and that will generate a
new API key for you.
So you want to go ahead and select your API key from here and then paste it at the very bottom of your
app and we're going to convert it out for now or come back to it a little bit later on.
So now that we've got our API key, then we're ready to interact with MailChimp servers through their
API.
If you head back to Meltem Dotcom slash developer and then scroll down to click on their API reference,
then we can use this as our instruction manual to figure out how to add subscribers to our list.
The first thing to do is to head over to the list section.
And there's a number of things that you can do here.
You can create, you can read, you can edit and you can delete.
Now we're interested in the creation part because we want to subscribe some list members.
So I'm going to click on here and I end up at this post route which allows me to Bache subscribe or
unsubscribe list members.
Now, the process is exactly the same if you want to, but subscribe lots of people or simply subscribe
a single person, all you need is a list ID and you can provide the members that you want to subscribe
in the body of your request.
So how do we do all of that?
Well, first things first.
Let's get our list ID.
If you go back to Meltem Dotcom and presuming that you're already logged in, you can simply go to the
audience and manage audience.
Settings.
And scroll down to get your unique ID, this is your audience ID or also known as List ID, and that
is going to help Belgium identify the list that you want to put your subscribers into.
So let's go ahead and copy that and paste it at the bottom of our APGAR'S and we're going to comment
it out as well.
Now that we've got our APIC and our list Idy, then we're ready to move on to the next step, which
is to start sending our request to MailChimp.
Let's go back to MailChimp dotcom slash developer and click on Get Started to see how we can start interacting
with the MailChimp API.
If you scroll down on this page, you can see that they've got a section on code examples, which is
usually a nice way of understanding how to work with a particular API.
So here they've got a couple request, which is actually something that's done in the terminal.
But in our case, we're going to implement this using our code.
So take a look at this data section.
This is the sort of data that they would expect us to send to their server.
So if I just copy this and paste it into our code, then you can see that this is essentially a flatpack
JSON, right.
So it's all full of strings and it's delineated by these curly braces and colon's.
So what we would have to do is to create our data that we want to post as a JSON.
So first let's create the JavaScript object.
So let's create a new variable called data and I'm going to set that as a new JavaScript object.
Now, inside our data object, we have to provide all the key value pairs with keys that MailChimp is
going to recognize.
So if we go back to the API reference and go to list slash audiences, you can see that our data is
going to be sent via the body parameters using a key code members.
Now, this members happens to be an array of objects, each representing a member that we want to subscribe
so we can add up to 500 in our array to subscribe at the same time.
But if we click on show properties, you can see that each of these members can have their own properties,
like the email address for the subscriber, the status and the merge fields.
These are the merge fields that will contain their first names or last names.
Let's create our members key value pair first.
So data is going to be called members.
And this members, remember, has to be an array of objects.
So we're going to open up another set of objects and we're only going to have a single object now array,
because we're only going to subscribe one person at a time.
Now the email key is called Email Address.
And just to prevent myself making a typo, I'm just going to copy and paste it in here.
And the value of this key is going to be the email that we got from the body of the post request.
So let's put the email here and then the next one is going to be the status.
So let's again copy and paste it and you can see it can have four possible value subscribed, unsubscribed,
preened or pending and we're going to go for subscribed.
So status is equal to the string subscribed and then the next one is going to be the merge fields and
the merge fields.
Notice how this is now an object.
So we have to put in our merge fields and then open up a set of curly braces and you can set the names
of these merge fields by going to your audience and then going to settings and going to audience fields
and merge tags.
So if you take a look down this list, most contacts come by default with a first name, last name,
birthday.
And the word that's inside this field is the merge field.
And by default, Meldrim sets it to F name and L name in all caps.
You can either change that or as I would recommend, keeping it the same.
So let's use F name as the first key, which is going to hold the first name from the form and then
L name, which is going to hold the last name from the form.
Now we have our data object completed, but this is JavaScript and what we need is actually to turn
this into a flatpack Jason.
So I'm going to create a new variable called Jason Data and I'm going to send this to Jason Dot String
if I.
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
of a Jasen now, because I'm actually never going to change any of these variables.
I can actually change them all to constants.
So now we have our Jason data.
This is what we're going to send to MailChimp and we're ready for the next step, which is to make our
request.
Now, remember, previously we used the GPS module and all that we did was say https dot gets.
And then inside here we put in a U-Haul and then a callback function.
Right.
But that, as you can guess, only makes get requests when we want data from an external resource.
But in our case, we actually want to post data to the external resource.
So if we go back to the documentation of the GPS module, you can see that in addition to https dot
com.
Yet there's also one called dot request.
And in this case, in addition to adding a U.
RL to make our request to, we can also specify some options.
Now, it tells us that these options accept all options from the HTP dot request module.
So let's click on and see what options we can have.
So in our options, there's something called method, and this allows us to specify the type of request
we want to make.
For example, get or in our case, it'll be post.
Heading back to our code, let's go ahead and create a constant for the module and require it now down
here, just below where we've got our JSON data, but still within the app dot post, we're going to
create our request.
So we're going to say HGP dot request and we're going to Pazin firstly are YORO and then we're going
to pass in our options.
And finally, we're going to have a callback, which is going to give us a response from the MailChimp
server.
So let's fill in each of these fields.
Now, the URL is going to come from the main MailChimp endpoint.
We can find out which you are allowed to use by going to the MailChimp API documentation.
So in the section code example, it shows us that this is the URL that they're using.
And in fact, all the way up to here is the MailChimp API end point.
And then afterwards we have optional paths that we can tag on.
And if we wanted to subscribe some members, then we would be posting to forward slash lists, forward
slash the list ID that we want to target.
So I'm going to copy this entire YORO and I'm going to paste it into my YORO here.
Now, in addition, I have to add a list ID because in MailChimp you could have multiple lists and you
have to tell it which list you want to subscribe members into.
Now remember previously I'd already saved the list ID of my main audience and I've really got it down
here, so I'm just going to copy that and tag that to the end of the euro.
So there's just one last thing before we're done with the URL.
Notice how here says U.S. and then it's got an X.
You have to replace that X with the number that you have in your APIC after the word US.
Milchan has several servers that they're running simultaneously because they're a big operation.
And when you sign up, you get randomly assigned to one of them and it could be anywhere from U.S. one
to US 20.
Take a look at your API key and see what number you've got after the word U.S. and then copy that number
and replace the X with that number.
So now we finally completed our U.
RL.
The next step is to create some options.
So I'm going to call it options and it's going to be a JavaScript object.
Now, the most important option I have to specify is the method, so let's specify a method and let's
set it to post now.
The next thing I have to do if I want this post request to go through successfully is to provide some
form of authentication.
We've really got a hold of our epic earlier on from MailChimp, but now we need to think about how are
we going to use it if we go back to get started and take a look at authentication methods, it tells
us that we can use the basic HGP authentication and enter any string as a username and our API key as
the password.
For example, it might look something like this.
Any string kolon, your API key.
Now in the options for our HTP request function, there is something called auth which allows us to
do this form of basic authentication.
So that's what we're going to add next.
In addition to the method key in our options, we're going to add a fourth column and then we're going
to specify a string.
Now, MailChimp said that we could use any string as the username and then separate the username from
the password, which is going to be the API key with the Kolon.
So it should look something like this.
It doesn't matter what you write here, as long as you have something and then you have a colon and
then you paste in your API key, making sure that your region in the API key matches with the region
in your URL.
So now we're finally ready to make our HCB request, and when we get back a response, we're going to
check what data they sent us.
So we're going to say response start on just like how we did before.
We're going to specify that we're looking out for any data that we get sent back from the MailChimp
server and then we're just going to log our data, but we're going to use the jasen pass to pass it
first.
So now some of you might be wondering, OK, so we made a request, but nowhere in this request or in
our URL or in our options have we specified what it is that we want to send to MailChimp, namely our
Jason data, which comes from here, and it includes the email address and the first and last name of
our subscriber.
So that's a very good point.
In order to send that data, if we take a look back at the documentation for the request method, we
have to save our request in a constant and then later on, we can use that constant request to send
things over to the MailChimp server by calling request.
All right.
Let's go ahead and create a new constant called request, because we don't want to conflict with our
reck here.
And then we're going to use this request and we're going to call request dot right.
And inside.
All right.
We're going to pass the jasen data to the MailChimp server and then to specify that we're done with
the request we call request dot end.
Now, let's test it out.
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.
And now let's go to our localhost 3000 and try to sign up.
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
don't know, 456 at email dot com and click sign me up.
Now, at this point, if we look inside our terminal, you'll see what we get sent back as the data
from MailChimp.
And it seems to suggest that a new member has been added and there were no errors in this process.
So now if we go to our MailChimp account and go to our audience, you should be able to see that you
should have a new contact.
And if you click on that number one or two that you might see there, you should see the email that
we just inputted, the first name and the last name.
And it's all now been added to our audience.
And if you want to add another member, you can go to the URL bar hit enter again to restart it and
add a new person.
Now, when I click, sign me up and go back to our audience and hit refresh.
You should see we now have two entries and you can keep adding this, but our website still has a number
of small faults, right?
Like when we click sign me up, it kind of just hangs.
It doesn't do anything, doesn't give any feedback to the user whether if it was successful or whether
if it failed.
So in the next lesson, that's exactly what we're going to be doing.
We're going to be sending the user to a success page if everything went well and we're going to be sending
them to a problem page if it went badly.
So have a play around with your existing Web page, and once you're ready, head over to the next lesson.