Send SMS messages with NextJS and AWS Amplify

so in a lot of applications you need the ability to send a notification from your web app to somebody's email or text or push notification and you can think of that being applicable to a lot of applications that you use day-to-day such as delivery applications where you place an order and then all of a sudden you have a text message on your phone letting you know that your order is on the way well that's exactly what we're going to dive in today through the power of react aws amplify and a little bit of sns we're gonna see just how easy we can combine those to create a full stack application that gives us the ability to mimic a portion of a catering app so if that sounds good to you let's go and get started [Music] okay so before we dive into the code i'm actually going to take a a brief moment to talk about the architecture that we're dealing with here and it's actually pretty simple right we have a catering driver they're going to go ahead and log in through a web application hit up some api endpoint this is going to be through the use of api gateway in aws lambda and that lambda is going to be in charge of talking to amazon sns which is obviously going to send the event on over to the customer via a text message now you can see that there's this uh square here and this is going to encompass three different services that amplify is going to generate for us and then we're really just going to talk about sns because even though it isn't included in the amplified cli we can tie in with any of the services through the use of a lambda function so that's just a little bit of overview on how the architecture is going to be structured so let's go ahead and dive into the code now i already have a sample repo set up for us that you can go ahead and download i'll put the link in the description but we're going to say git clone and then paste in that repo here is catering sns example now this is scaffolded with create next app but we can go ahead and use this for our purposes and take a peek and see what's generated for us so i'm going to open this up in my editor awesome and now that i have this opened in vs code uh let's take a peek at what the code looks like and then also i might as well get the app running so we can take a peek at um what it looks like in the browser so npm run dev whoops i should probably do install first and let's hop over to the app.js you see it's just your standard create next app i do have some comments out code that we'll look at later on but let's move over to the index.js file now within here you can see that we have some static orders here an order is going to have an id a list of products and then some notes from a customer you can imagine you know customers leave notes on their applications and then the status you know awaiting pickup and we can imagine that that would change to something like in progress or you know on in root something of that nature so uh yeah we have our customer notes here and then i have some more commented out code which is going to actually make the api call once we get there and then from here it really is just some basic html to make things look nice so let's take a peek and see what this looks like in the browser npm room dev on localhost 3000 and this should open everything up for us in just a moment there we go so i have my current catering orders we see those static elements being pulled in right here we have two of them one and two and they're both awaiting pickup now what i want is that when i click on one of these it fires off an api call it gives the driver back the address so that way they can navigate to where they need to go and then the customer is now informed that an order is on the way so let's take a peek and see how we can accomplish this with amplify i'm going to let's let's kill the application and i'll prop this open just a little bit more so we have some some real estate we're going to be in here for just a little bit the first thing on our architecture guide is that we wanted to add in authentication so let's first initialize amplify in this project and do just that i'm going to say amplifying it and keep in mind that this is a next.js application so the defaults aren't going to work because we want them to be for maxjs and by default therefore create react app so i'm going to say no and then dev works vs code is what we're in it's javascript react that's fine but when we get to the source directory path i'm going to say dot to work in the root directory and then dot next is what next gs is going to provide for us so we get that set up everything else pretty much stays the same and i'm going to select my aws profile once it gives me the option to do just that there it is i'll just stick with the default here all right that went ahead and got done setting up our back end getting everything initialized in the cloud so let's begin adding those categories i'm going to stick with amplify add auth for now and we don't need to get too fancy with this so i'm just going to accept the default configuration that it asks for it gives me sensible defaults like a password policy that makes sense usernames are fine and then we're not going to configure any advanced settings so that's perfectly okay to say no i'm done awesome once that gets set up we can actually begin adding our api so amplify add api is all i need to type and it's going to walk me through that same series of prompts now i have two types of apis to work in i have graphql and i have rust i'm going to select rest for this example it's actually really important that i do provide a friendly name here so i'm going to say something like uh delivery api the path will be slash status and then when it asks me if i want to create a function to tie in with this api yes i do we can say delivery func node.js is what i'm working in it's just going to be a regular hello world uh function here and we don't need to configure any advanced settings just yet but we're actually going to take a peek at this in just a moment but i do want to edit it now and it's going to create this function template for me so that way i don't have to worry about getting too much set up here so if you notice the problems aren't done right there's still more to work on here but i'm going to slide this over for the time being and that gives us the opportunity to just focus on this right here now the nice thing about this application is that i already have a blog post showcasing how you can go through all these steps with me and the cool thing is you don't have to see me struggle to type in all the code for this lambda function in fact i'm actually just going to copy and paste it right in here now it's only what 45 lines of code so nothing too bad nothing too scary here but let's take a moment to walk through and get familiar with what's happening and if you wanted some more detail definitely check out the blog post but let's uh let's go and dive in here first and foremost we're going to bring in the aws sdk now we don't have to install this because this is a lambda function when it runs on aws this part is already installed and we're going to use that to say hey we want to configure sns now if you're not familiar with sns again it gives you the ability to send those emails push notifications really just general messages out from one subscriber or i'm sorry from one publisher to many subscribers and that's perfect for our use case now in this application we're mimicking that someone is going to give us an order id all right so we're going to go ahead and grab that from the function's body by first parsing it as json and then grabbing the dot order id and this is really just sort of a fake database that we have set up so over in step two we can say hey go ahead and using the order id grab the item from that fake database and we're basically going to use that to publish to sns and we do it with these lines right here so i can say hey sns go ahead and publish this message and it's like well where do you want to publish it like well i want to publish it to this sns topic which is just an instance of sns over on aws it's like all right cool well just to let you know when i publish this message over to this uh this instance of sns this topic it's going to go out to every single subscriber which isn't what we want right we just wanted to go out to the specific delivery person well in that case or the the customer rather well in that case we can say well here are some attributes that i want you to work with here i'm going to pass you an object that has a key of sms inside of it i'm just going to give you some additional information like hey heads up it's going to be a string array which is why i have this array here that's stringified and the value is going to be this order that phone number which if you recall above we have order that phone number right here with mike jones's phone number so given that information all of this is going to be sent over to sns and we can tell on the subscriber level you know who needs to pay attention to this because if anyone has these attributes then that means that they they care about it their the message is able to be filtered and we'll see a little bit more of that in just a moment but moving on from here we're just going to accept cores so we're going to set the headers and then we're going to return back to the front application the address that way the delivery driver can get on their way so let's go ahead and save this we're going to hit enter here back over in the terminal and it's like cool well do you want to restrict api access to this function yes we do we only want authenticated users to make a put request so we'll hit update there do you want to add another path no we don't perfect so we have that set up i'm going to clear that out for just a moment and if you notice we have that whole process dot env for the topic on the thing to know is that we haven't created this sns topic just yet let's change that i'm going to head over to the console [Music] here and now that i'm in my console i'm going to bump this up just a little bit so you can see it head over to sns you can also just type sns right from the top here and it'll take you there now that we're here we're going to go ahead and create a brand new topic so i'll say create topic right here we're going to select standard and we'll call this a catering example awesome now all these other fields we can go ahead and leave just fine alone so now that we have the topic created keep in mind that this rn is going to be pretty important because we need to tell our lambda function that that's the one that we care about and then in addition to that we also want to assign subscribers to this topic so i'm going to say create subscription right here the protocol is going to be sms and then here i'm going to put in a phone number that i want to subscribe here now this is twofold okay you want to go ahead and put in a valid phone number and that's all in good there but you also want to make sure that you have what's known as an origination number now to create an origination number you just want to click on this top little banner piece right here and i'll include a link in the description in case that banner isn't there and you just want a direct link to it but from here the steps are pretty simple you just want to make sure you have that origination number so i'm going to select the sns topic that we just created there it is and then i'm going to select the protocol now we're working with sms and then here i'm just going to type in any phone number now keep in mind the phone number that we have in our lambda function should correspond to the phone number that we have here right we're tying the two together so let's say we have a one so plus one and then we'll just give it a bunch of fives right five five five five five five and then four more great now keep in mind once we subscribe this they're gonna receive every single message that comes through which is definitely not what we want so i'm gonna apply a filter policy this filter policy comes into play by saying sms and then we're going to give it a string array so i'm going to say here's an array and then i'm going to put in the phone number right here so again it would be something like plus one and then the same number that we had above now notice in our frontend application we said it's a string array but here we are having an actual array with a string in it just a little bit of nuance that you have to have to work with there but hopefully this video will not chip you up so that way you can get past that whoops uh what am i missing here i think i know what it is the sms sprite up here i believe that should be in quotes so let's go ahead and try this create subscription and yeah that's all it is perfect so i have the uh arn and again we're not looking for this one this is the arn of the subscriber okay we're looking for the one for the actual topic which is going to be this one right here so that's what we need go ahead and copy that into your application i'm going to go ahead and change this to be my actual phone number and then i'll catch you back in the code all right so now that we're here back in vs code let's go ahead and update our lambda function that way it has the ability to accept the environment variable so i'm going to run amplify update function and this is going to go ahead and bring up the the prompts that we're pretty familiar with at this point so let's say we have an environment variable that we want to go ahead and configure the name i should probably make them the same right uh sns topic aren't snake case as topicarn and i was like what's the value that we're working with here and it's just going to be that arn that we had before so i'm going to hit enter there and i'm pretty much done from this aspect and i don't want to edit the function now it's already uh it's already updated so we have that in place but there's one more thing and this is just if you work with aws for a while you know where we're going is that we have to give our lambda the ability to actually make this api call right everything's super secure now the cool thing is that i am policies just got an update when it comes to lambda functions so before we had to hop into the cloud formation template and do a lot of fun stuff that way but now it's actually a lot simpler we have this custom policies.json file that got created for us and i can just as easily come in here and say hey here's the sns publish command that i want this lambda to have access to and here's the topic that i wanted to be able to have access to as well whoops there we go and just by having this it's automatically going to be merged into the cloudformation template for us we don't have to worry about that anymore and with that out of the way let's go ahead and hop back into our terminal we're going to say amplify push this is going to check the resources that we created sure enough we have an api a function and then we have cognito set up through authentication all these are created right here are we sure we want to continue yes i am and it's going to publish those up to the cloud for us now that's great but let's go ahead and configure our front end so that way you can actually communicate with our back end so i'm going to get rid of this file and over in let's begin with underscore app.js now i made this try to make it as easy as possible for us where we just have to uncomment a bunch of stuff so here's amplify we're bringing it in we're setting up the config and now if we head over to the index.js in our pages directory we have a couple of things that we want to uncomment here we have the api we have with authenticator we're going to be making a call to an api so that's why we have to bring in that module and then down here we'll uncomment this this is pretty much where the magic happens right we have our delivery api this is that friendly name that we gave our api and we decided to call the endpoint slash status so we have that here as well now scrolling down a little bit we have the event handler actually being attached on this on click so we'll uncomment that and i believe the last one is going to be right here where we will comment out the normal export default and then we will uncomment this with authenticator and this is all we need to have that full authenticated experience where users can sign up sign in do forgot password etc now in an actual application you probably wouldn't want anybody to just have the ability to sign up but again this is just to demonstrate the value of sns so let's check on our api see how that's doing all right now that we've got everything updated let's go ahead and clear this out we'll run our application one more time and we should see a completely different uh front page here looks like i got a quick little error uh we can't uh let's see here resolve amplify silly me i didn't import those dependencies so let's go ahead and do that real quick i'm going to say npmi we have both aws amplify to bring in and then also the components that we have as well that's going to be from the ui hyphen react library we'll go ahead and install both of those and then we'll run it one more time all right so we have this set up let's go ahead and create an account i'm going to create one behind the scenes and then i'll catch you as soon as we're over in the application so if i go ahead and click on a product item let's see what happens here perfect and then over in the console you can see that i did get the address now the question is did i get the text and the answer is yes i'm going to go ahead and bring this over to a new screen so you can see it here there we go i just had to bring it here so that way um i can block out this phone number area that you all can't see there and you can see yes sure enough i have a bunch of test messages from when i was working on this and then this is the latest one here saying your order is out for delivery all right so just like that you saw just how easy it can be to leverage the power of react amplify and even bring in some services that amplify doesn't support like sns so that way you can deliver real-time notifications to your users by reaching outside of your web app and jumping into their their text messaging inbox pretty cool stuff this is actually a pre-note into a blog series that i have coming out where we're going to be creating a real world production grade catering application it's going to be super exciting there's a lot of different components to it i look forward to sharing it with you all but if you want to stay tuned for details definitely feel free to go ahead and like subscribe follow me on this journey share the content so that way others can be notified of it but aside from all that i'll catch you next time peace

Channel: Focus Otter

Views: 386

Keywords: react, amazon, aws, nextjs, Amazon SNS, aws amplify

Id: ivmFUE_6ZKE

Length: 21min 2sec (1262 seconds)

Published: Thu Oct 14 2021