Lesson 8 - Newsletter Setup [Secure Webhook]
Create an App's Frontend with AI📅 2024-09-23
Transcript
[00:00] welcome back to lesson 8 here where we're going to be building out a web hook which allows us to send data outside of our website this is going to be one of the most powerful lessons found in this entire Series so let's going to jump in first off if you don't know what a web Hook is what this allows us to do is send data outside of our web application or website one example of this is our ability for a user to provide an email and when they provide the email and hit subscribe this sends the data of the email to whatever our newsletter provider is MailChimp send grid Etc but what is super cool about today today's lesson is the fact that
[00:31] you're going to learn how to do this kind of logic when it comes to API documentation for any use case specifically one you're going to learn the ability to integrate web hooks within your web application in a safe and secure way and number two here is this gives you the ability and really opens the door more intuitive interactions within your application when it comes to building out websites therefore let's go and do it let's jump in the first half of this video is me building the user interface of this input form EG how is it going to look on
[01:01] my website and then the second half of this video is I'm going to show you how to secure web hooks I'm going to show you how to read API documentation I'll show you in any context for any type of API documentation how to understand it for what you're trying to do sound good let's do it so up to this point we've done a lot for our website here let's go ah and just launch it see where we got to this point so we're going to open up a terminal window as you already know you already know this how do I know this Corp because you already watched all the other episodes all right you're caught up you're good to go we're going come up here to this command here npm start actually first we'll do our directory
[01:32] and here's a quick little tip here which is cool is that if you want to do multiple commands in just one enter or just like one command line you can copy it like this obviously put your directory first and then npm start and if I hit enter here it's going to go into my directory and start it enter boom good to go this is where we left off after episode s here and if you're watching this you're part of my school community so hello and welcome and now in this next lesson here that we're doing today we're going to add like a newsletter type of CTA form here just right under are investments what is super cool is that up to this point we
[02:02] built out a pretty intuitive web application we have the ability now to do external links nice little UI elements popup hello uh for the video take website content catalog super cool stuff here so from our structuring and from you seen up to this point you already know when we build out this hom page.js we're going to build out another component here we'll put it between investment G and the footer here this is going to be our newsletter CTA let's go ahead and proceed first off we're going to create a new view here that's going to be news letter CTA so new file
[02:34] newsletter. ca. JS and then we'll create the CSS as well with this created we're going to do that copy paste method here we're going to provide some context of how we want it to look to be honest with you kind of like how our top fold here looks with this right here this nice little like component that is like a round wck that has this nice gradient feel I'm going to use this as my reference image and then play around here obviously I'll be back I'll give you the inputs the outputs etc for this first half of the tutorial where we're just creating the user interface first and as just as a side note taking a step
[03:04] back here when building components that are going to be more complex and intuitive EG today's video we're it's going to have a web hook and we're going to be sending data out of it it's always best to have the UI component made first obviously now it doesn't have to be perfect but it's have it made first so when you start working on functionality of the more complex stuff you have something to play around with within your emulator sound good I'll see you in a couple minutes here we go so I went ahead and created our newsletter right here so this is going to be an entire element SL component that we can leverage in the context of sending emails to our newsletter provider me
[03:36] going to show you how this UI looks in the sense of providing an email because you're going to see some animations here in addition let's go ahead and open up our console log as when you start doing more complex elements with web Hooks and sending data around you're going to start leveraging the console log a little bit more in order to do so we're going to right click hit inspect to start off here we added a nice little hover effect on the button so if I hover here we get like slightly enlarged different color if I just hit subscribe here nothing will happen because there's nothing in the field if I put random characters nothing will happen again because it's not an actual email
[04:07] therefore let's go ahead and provide a real email here do apples gmail.com two things are about to happen first thing is you're going to notice an animation right here and second thing is you're going to notice a console log right here subscribe nice little animation I also have it so it circulates through some text look at you being all productive success and then it will revert back to subscribe after 10 seconds here and then jumping over here in the console log you'll notice we get an email sent apples gmail.com let's see how I did it the first part here obviously is just user interface therefore in order to do
[04:37] that I always like to start my chats brand new chat provide context of general direction I want to go so I provided this screenshot of our top fold of like the UI elements and went ahead and prompted like this okay today we're creating a newsletter CTA section for a website call the files newsletter CTA newsletter CTA CSS you will need to have an input field for email and a submit button which for now points to console log of sent email not cuz haven't actually sending the email yet to the API attach images reference of the UI I like and here is some CSS to match so basically all I did was I grabbed the
[05:07] CSS of this little round rectangle right here provided as well for more context and then I simply said okay give me all the code same situation here from pass tutorials copy the entire JS paste over copy the entire CSS and paste over so that's going to give you a starting point of where to go here and then obviously once we have this done we're going to see what the export name is so in this context is newsletter C ta we're going to come to our homepage here we're going to import this file I'll go and zoom in y'all we're going to go ahead and import this file and then we will place it right here if you're building a
[05:39] multi-page website I suggest you to put the newsletter CTA within the components folder treat it like a component EG I have the newsletter CTA here maybe I'm on the about me page and I want to import it there as well go ahead and just import it there like this and what this does is that this one single line here will import this as an element throughout our entire web website so one right here and then obviously I put one under the footer reload one right there use this component however you like now you can import this anywhere on your website and the functionality will
[06:10] persist throughout once we add the web hook to it for me though since the website I'm creating is just a landing page I just need one page most simply place it right there now let me go ahead and show you how I prompted Chad gbt in order to get this effect with an animation that lasts 10 seconds and it circulates through different text pretty cool went ahead and said this okay looking better let's do a couple things first thing when we successfully subscribe a user but it does a cool animation and say success with a party emoji show that for 10 seconds couple things to know here first thing I didn't actually identify the animation I just said do a cool animation keep this in
[06:41] mind just use lame IND dictation to put in a general direction and then the animation it gave me was like that little hover effect which I thought was pretty cool so simply all I needed to do was simply copy the JS paste it copy the CSS paste it scrolling down here what you'll notice is that what creates the animation effect within CSS is what we call Key frames and they specifically called it pulse so in this context the animation you saw was like getting larger getting smaller getting larger and getting smaller that's the pulse effect here and it's referenced as animation here pulse 2 seconds infinite
[07:12] if that doesn't make that much sense don't worry that's the whole point of the way I've been showing you how to create these websites is very much like ask questions or alternatively copy the code paste it over does this time look good it does okay keep proceeding therefore to ask it to circulate through different messages once we're in a success mode was pretty simple Also let's make it on success we cycle through different texts like success Saving Time Etc and as you see it provided me all the code right there to the extent of cycling the messages as well now obviously you can tell the type of messages for me personally I was like we need a little bit more banter more
[07:43] stuff that's like related to email right there so I got messages like we won't spam you promise oh a new email save me time like a boss stuff like that what's also nice when you code of Chad gbt is that you'll get comments like this and this is supposed to make the code more clear for example if I look at this right here what does this 10,000 mean okay this means 10 seconds and what we know in the context of what we've told Chad gbt up to this point is that we wanted to display a message for 10 seconds or have an effect for 10 seconds so in this context this is the key
[08:14] frames pulsing effect that will only last 10 seconds after we hit submit in addition what you'll notice is Chad gbt will also name the elements specifically what they're doing so I have cycle messages and this is the context of when we're cycling through the relevant messages we provided here now initially when I pasted these success messages I actually got an err typically you can just copy and paste the air code you get into Chad gbt and to help you out or alternatively take a screenshot with the error I got I just screenshotted it with a little bit of a hover effect saying hey I got an error what's up and with that it gave me the correct code and
[08:45] also a comment of what was the correction for the air so for this context the error was the fact that we didn't have this backslash here so for example if I remove it you'll know the air comeb back but you know now that we learned through Chad gbt that you need one of these to hand handle apostrophes in this kind of code we're going to go that covers most of what we need to know when it comes to submitting and the UI associated with this newsletter let me actually do one more with you that's actually pretty fundamental we're going to have it so that when I hit success and it does that little animation we're actually going to
[09:16] disable the Subscribe button for 15 seconds and the reason we're going to do this is to mitigate spam and have a debounce logic shown to you therefore what are we doing we're coming to our button here this is the button copy and what I'm going to do here is I'm actually going to start a new chat I'm going to provide the entire JS file and the entire CSS file and then request the following delay or disabling working here today here is the JS here's the CSS paste it's going to give me some random output don't care stop it let's ask what we want let's learn two fundamental things when it comes to dealing with passing data and specifically giving the
[09:46] user the ability to pass data in this context hitting submit and their email first major thing you want to add disable logic you want to have the ability where the button itself is disabled for 10 to 15 seconds after dealing with this kind of payload why you don't want people spamming you second major thing you're going to learn about local storage right now what is local storage this is our way of caching data on the user's web browser why is that relevant if we didn't cash this 15 seconds on the user's browser as you will see this will make more sense the user could simply hit reload and then
[10:17] hit submit again and proceed sound good enter before I hit enter the prompt for this button provided the button have it so when I click subscribe it is successfully and we also disable the button for 15 seconds to mate get spam in addition save to local storage this 15 seconds so if the user reloads page can't click again enter provided the entire JS copy paste provided just one additional CSS element here which is going to be how the button looks when it's disabled copy paste now what I like to do is that for CSS elements that are related to the same item on the react
[10:47] front end we're going to go ahead and just make sure we pair them near each other news C ta button button on Hover button on disabled I'll go ahead and showcase this on the front end but let me explain a little bit specifically what I'm going to explain here is going to be the local storage as I said before this is going to save the specific elements of 15 seconds so date now to last time submitted so the button is going to be disabled for 15 seconds even if the user reloads which you'll see here pretty soon here but one thing I want to know is that the actual local storage item that we're getting we name it so we're naming it last submit time
[11:19] which is fine because the context of the web page we're creating today is just a landing page not that deep but if you're creating software specifically when a user is logged in typically when it comes to setting local storage items you want to put something unique within the actual storage item itself EG the user's email or EG the user's uid which is a unique identification number that's provided in the context of authentication and software don't worry I'm going to make videos on it but in this video we're just going to call it last submit time so how do I confirm that this button can't get spammed for 15 seconds even on user reload pretty
[11:50] simple actually in order to confirm that we're going to have the console log open here and what would happen is if the user could spam in theory then we would see multiple console logs what you'll notice is that one the button is going to have a different UI that shows it's disabled but two on reload that UI is going to persist which is going to allow us to make sure that they can't get away with just spamming it by reloading spam reload a Spam Etc I'm saying spam a lot I do like spam you cook it on the the skillet get it nice and crisp put some Tobasco on it hot coffee if you got
[12:20] sourdough and egg proceed let's Chuck this out got my email here hit subscribe I am trying to spam it notice how my button is disabled can't spam I'm going to reload the page I'm going to get away with it come down here still can't hit it pretty good right and then this should go away in 15 seconds so let's see if it pops back up so I can hit subscribe it does pretty successful now that we have the user interface set up here let me show you how to start connecting web hooks within your web application I'm not going to cut off and then show you step by step how I did it post I'm going to do it live with you
[12:50] because this is pretty fundamental and important to understand let's begin step number one know what you're trying to connect to this is going to be external providers EG MailChimp EG zap your whatever you're trying to connect to know what you're trying to connect to once you know so in this context we're doing newsletter right is it MailChimp for you is it clavio what is it for me it's going to be called mail Bluster mail Bluster whatever it is you're going to put the name of it so let's say it's MailChimp we would do MailChimp API
[13:21] documentation enter come down here select the first link right here is where we're going to be able to find everything we can do within MailChimp through software SLA web application now this can get very confusing very fast so what I suggest you to do is speak more Layman within Google MailChimp API documentation for creating new lead and typically what this allows you to do is just jump directly to the part that you care about so in this video what we care about is that when a user signs up provides an email we sign up to an audience list so in the context of
[13:53] MailChimp to speak more in the dictation be like subscribed to an audience I'd come down here to list an audiences like okay what's going on here I got to find the subscribe to audience another great way to approach this is using zapier so in this context we could use a zapier web hook to then pass the data and then zapier makes it very user friendly so for example what you'll see in today's tutorial you could reference a zapier web hook and then let's say we're doing that MailChimp example again I can come over to MailChimp and then obviously I'd create a trigger of that web hook and then use one of these actions found within zapier where it's like uh new
[14:24] customer new audience new subscriber in that way also zir is a great tool in the sense of just looking at the zpp your apps if you type in zpp your apps you could kind of just look in a UI friendly way of different actions you could do within different softwares which then you could translate with the method I'm about to show you within your web application for me though I'm using mail Bluster why are you using mail Bluster Corbin because they don't charge on audience list size it's like infinite and that's kind of for my use case what I care about so right off the bat let me just going to explain some terminology here as if you've never dealt with web hooks before so once you find what you
[14:56] need to do so for me we're creating a new lead here's a couple couple things first thing is you're going to notice that the specific event you're going to want to do is a post when you think a post like we're just sending the data we're not receiving it we're sending it from the website to mail Bluster the next question is okay how we're sending it we are sending it through this link here which will make more sense and we'll use Chad gbt to leverage this the next thing that typically matters in a web Hook when you send it to a provider is like what is actually required and as you'll notice they quite literally will have columns called required this is
[15:28] data that is required or not for you to even send this correctly so what you'll notice is that the only thing that's actually required here is an email pretty good so let's get going here let's create a web hook we can start sending whatever provider you use I'm obviously going to blur out that key that is currently active whatever provider you use go to the settings or find out where you can go to the API key section typically with these providers it's typically found in Settings if it's not just type in Google XYZ platform create an API key and then it will show
[15:58] you where to go for me it's in settings and I come up here to API Keys now within the API key settings you're going to Simply hit create new key you're going to give a name for that key so you know where to reference it so for me it' be like web Cafe landing page and I may hide this key or I may not actually no I'm not going to hide this key I'm actually going to delete it after this so I'm going to just say dummy key and then put in the real one after this tutorial say create API key so with my dummy key here which go ahead try to copy it it's not going to exist I'm going to go and copy it the reason I'm copying it is so I can make this as easy as possible for someone that has never
[16:30] dealt with web hooks let's make this as easy as possible as a side note what an API key is is with your web application it tells mail Bluster that you actually have access to that account because you're accessing it from an external Source you're not accessing the functions and functionalities of mail Bluster within mail Bluster like the the website mail Bluster you're accessing functionalities through a separate domain so they want to confirm that like that's actually you you actually have access to that account which goes without saying don't share your API key publicly now let's make your life easy I'm going provide the entire G file and
[17:01] CSS file of our newsletter CTA right there now in theory in the context of what we're about to do we don't really need to provide the CSS a good practice maybe halfway through the chat you want to do something like with the CSS for now though provide everything first half of this is I'm going to show you how to just do everything correctly from start to finish second half is I'm going to show you how to implement Security on this web hook let's proceed as you know we're giving functionality to a very specific button that button is a subscribe button therefore proceed to your code get that exact pie piece of code that's going to do the action of this web hook and copy and this next
[17:32] prompt here is we're going to front load it we're going to say okay for this button we will have it so we can actually start sending the email to mail Bluster API I'm giving the specific name I'm giving context here was this is this MailChimp it's MailChimp API then and here's what we're going to do this this is going to seem a little Savage but because I'm doing this in the context if you've never done this before I want you to go to that page and everything that seems relevant to setting up that lead grab your cursor and just drag up
[18:03] everything let's give as much context as possible boom command C it's not going to look it's not going to look pretty do someon here command V just the entire page now let's provide our API key so it just enters it into the code for us and then see what happens our API key paste and here we go enter and it's giving us the code I mean look how powerful this is y'all assuming you have no knowledge on what Hooks and obviously you'll learn more about how to handle web hooks as you do more right so when you copy this code over you can start reading it a
[18:34] little bit and over repetition it'll become more clear what everything means but all I did was just paste a bunch of data give it a direction and we got our code here I'm going to hit copy code command a paste with that simple paste here let's just see if it even works and then if it works I'll walk you through and give you a little bit more context of what's happening there this is currently a live list here obviously I'm going to have to blank out everything over there to you know protect people's emails here but let's go ahead and proceed give a real email and see if it shows up here so when dealing with web Hooks and dealing with data passing always do inspect and always open your
[19:06] console log here because what you'll notice is that within that code we received from Chad gbt we actually get some console logs here to help us debug more of what could possibly happen here so if everything works correctly what I expect to see is lead added and then the payload the data that we found here I'll explain more what this means let's just see if it works I'm going provide my email here when I hit subscribe here we should see new lead add add it boom and it didn't work at all we get a ton of errors here and let's go ahead and walk through this and how do we solve that
[19:36] what happens when we get AOS Corbin because wasn't that supposed to work let's find out if you have no clue what's incurring here what I suggest you do is just simply copy this entire thing let me go over here and just say from this code I got semicolon paste the entire thing hit send so what you'll notice is that the issue we got is cores it's cores related this actually doesn't have to do with the fact that the code is bad but this is more of a security thing found within browsers more specific spefically mail Bluster doesn't really accept incoming communication from Local Host 3000 which is our development environment if this doesn't really make sense don't worry here's the
[20:06] two major things you need to understand first major thing is that when you push it to a live website it should work EG webcafe a.com and I'll showcase it working second major thing is that let me show you a cool Chrome plugin you could use to circumnavigate this this extension is not 100% reliable but it's reliable enough in the context of coding you're typing cores it's going to be cores unblock don't turn this on indefinitely but only turn this on when you need to do development type of situations like this basically only have this the color orange the color C here orange when you do these tests and have
[20:38] it off for everything else alternatively just push this to your prod environment which would be your actual live URL and do the same test so I'm going to go ahead and put our email here turn on our cores extension and I'll be honest with y'all sometimes this works sometimes it doesn't so if this doesn't work here then I'm going to go and just push this to prod I'll go and show you how to do that again and we'll retest in a live link link it worked that time pretty good so what you'll notice is that we get the console log of lead added here relevant lead information so I keep opening up this stuff and there we go Corbin webcafe a.com then obviously with
[21:09] all that blanked but the email that we just subscribed you see it works and we see we got the data cool all that working and honestly I just saved you probably a huge headache from that chors policy I remember running into that in the early days of my development phase I was like what's going on I'm reading too much what's going on I hope that solved that for your situation uh just for context that's purely a web security thing code's not bad it's web cores Etc let me going to explain this code to you a little bit better here then we show you how to secure this code first thing for you to understand is when you're looking through your return statement
[21:40] which is this right here you might be like I don't know where that entire event is even occurring like I don't know when the data is being sent or what's causing that action what you can do is from this you can see that on submit is putting it into brackets handle submit so if I scroll over or do command F here it'll bring me up to the specific function that's doing this webbook call handle submit scrolling down here what you'll notice is that it encompassed logic that we had earlier such as the local storage pretty cool here and then now this is the web hook itself first super cool thing about this code that we got here is that we have
[22:11] debugging logs so you ever get errors like we did earlier we'll get a nice little debug log that we can paste into our chat gbt chat now when you actually push to prod or production or just your live website link I comment these out so I'm going to comment them out nice little Shand is going to be command slash or control slash and it automatically come comment these out for us next what you'll notice is this is our web hook first thing you'll notice is our API key which will'll secure pretty soon here this is the payload this is what we're sending mail Bluster and then finally this is that link that
[22:41] you saw early in the API documentation that we're referencing we provide the payload here which is going to be the method of post of how we're providing the payload which you'll notice the payload here is the lead data these two right here in addition you'll notice the authorization what's the authorization in this cont context this is the API key this tells mail Bluster that we have access to this account so API key API key send it that way now I know in the early days of coding and especially if you gotten up to this point and you're kind of fresh to coding and you're still
[23:12] learning frontend development this may be like a lot for you to take in I know it was for me when I the early days of when I started coding but don't worry what you'll realize uh is over time especially when using Chad gbt and you saw how I solved that err there it gets easier because when I look at this it all connects easier than it did way in the beginning so over time when you deal with more API documentation and you start referencing it like this it all becomes more clear of how to approach this kind of logic so now that we've done all that let's learn how we secure this so I want to make sure I blank this
[23:42] out again which is my Firebase High sensitive data which we did at like lesson two but the way we secure this is we go to ourv come over to EMV which we set up earlier and we're going to set up our web hook here this is pretty cool for context what this does is when we put high risk risk variables such as this web hook right now in our front end when we deploy we're not going to be actually revealing our key or anything that is pertinent that someone could abuse so this is always a good practice that when you have high-risk variables this is how we implement it in our code
[24:13] you're going to do react app and we're going to put for our context mail cluster uncore key personally when reading stuff in the code I like putting the exact thing that I am referencing right there so Bluster key okay what's next Corbin provide the key there we go key is provided and now let's learn how we Implement that within our code file and the way we do this is this so right now it's cons. API key where is this reference double click it okay it's reference right there double click this
[24:44] paste over process. EMV referencing the EMV file here and then the relevant name so as we named it react app mail Bluster key now we've secured the API key which is the highrisk variable within this web hook That Just About Does this video video we learn how to send data through web hooks also securely send data through web hooks in addition learning how to consult with API documentation as if you never read a single line of webook code the next lesson we'll do here is how to create a contact like form finally connect this to a custom domain and then have my website live so
[25:16] yes I'm not going to have to pay webflow that $18 very soon I'll see you in that lesson