AWS Amplify | Week of Extensibility Day 2

[Music] hey everybody how are we doing today happy uh happy tuesday this week is gonna fly by uh until like about now and then it seems to slow down but welcome everybody thanks for joining us today this is day two of our week of accessibility with aws amplify we have a bunch of cool stuff being released this week if you caught yesterday's episode you know where we're heading if you check us out on twitter you know what we got in store for you today it's gonna be fun joining uh me today is gonna be rene renee how are you feeling today i'm feeling really good awesome awesome and then we got kyle joining us how's the day treating you so far what's going on michael uh rough day but i'm happy i'm happy the fact that people can't see your handle right now that makes me feel good i um i haven't had a rough day since i got uh fired from that orange juice factory said i couldn't concentrate it sounds like there's a history or something you're missing out on you said you couldn't concentrate good concentrate you could uh you could say they put the squeeze on me oh god that knows sorry i got canned oh god man you're aws approved jets i see them how are we doing today let us know in the comments um if you appreciate the jokes i i have plenty in my bag but let us know where you joining us from today how's the day going for you maybe even a little weather update that's always fun this time of year okay um but as we're filling in yeah we have um we got something in store for you today we're going to be talking about how you can add any aws resource into your amplify projects with the help of a new cli release which is amplify ad custom this is going to put the ring on amplify and cdk and uh it really just joined the two together and uh having this sort of i i was gonna stick with the wedding theme having this matrimony having this um this integration is a better word having this integration is awesome for developers who quickly want to use amplify ecosystem also want to extend it with some of the features that we saw yesterday but then if there is a service that amplify doesn't support via the cli like our auth and our storage categories easy enough amplify ad custom is going to tie in kick off a cdk project and bring that in for you uh renee your team worked really hard on making this a seamless experience before a lot of our customers did you want to give a little insight into the amplify ed custom cli yeah yeah so with amplify as you might not know actually we always generate infrastructure as code under the under the hood so what happens is we actually um every single amplifier resource you generate is based on top of aws cloud formation and we're gonna um we're actually been creating that since the beginning of amplify so it makes it very easy to version and replicate your infrastructure we've always supported giving you the ability to add custom cloud formation custom aws resources through cloud formation but it's always a little bit of a few steps you got to complete for it right and now what we've basically said is that hey we recognize there's many many use cases that aren't um that are currently built into amplify so amplify is really good at all of these common core use cases but what if you want to extend it and use a service that is not built into amplify right like using an sns topic um using um you know using a sqsq and so on and so forth and we try to make it as simple as possible for you to add these custom resources so we basically launch amplify add custom the single command you just run amplify add custom will give you the ability to either add these custom resources using cdk which is a very um programmatic pragmatic way almost of um coding infrastructure as code and and then also club formation as well right so instead of following three or four steps before now we cascaded all of this down to a single command you can just run amply add custom and give you those options to add any one of these 175 plus aws services to your amplify back-end oh that sounds awesome i can't wait yeah a lot of good stuff uh in store for us today i am gonna share my screen so that we can go and kick things off oh no chrome is saying i don't have uh what's that what cool services are we gonna be using today with with ad custom we're going to be adding an sns topic we're going to be creating a secret uh gift exchange that will send text messages out to a a number of users so you can imagine this time of year during the holidays whatever you have going on during this time you can add numbers that are listed in your sandbox account on sns you can put in a budget and say hey here is michael renee and kyle um we're going to pull in those numbers we're going to add a budget and then we're just going to have this secret text go out saying hey your person that you're buying a gift for is going to be michael both of you can can buy gifts from me um or we would pick one at randomly that's cool i feel like like a random approach more [Laughter] donuts were good yesterday um i do have a permission issue i'm on a new laptop today and [Music] i don't know i know right i'm prepared there's there's always something um if i exit the stream can i come back without disrupting the flow of everybody else um so what i would try is it's like it's like mac os telling you to restart chrome is that the issue yeah and i did the whole fix my permissions thing yeah and usually like you don't actually have to restart it yeah but it's still gonna fit this time so it sounds like you do have to restart it and you know fingers crossed chat oh my goodness i hope i i stay with you all i'm gonna go ahead and leave the studio i think i should be fine okay let's see what happens let's see what happens okay two minutes i'll catch you soon oh okay so we can still hang out really okay so now now chad we can talk as much stuff about michael as we want don't have to worry about it there's no repercussions we're good no it's actually it's actually been a really interesting day today in terms of streaming renee like i was doing a live stream earlier on apple oh friends and um like in the middle of my stream i had technical difficulties too and like my computer just stopped it froze like i'm doing i'm coding on my on my apple computer and i'm sharing that screen to stream yard and then all of a sudden my mouse input doesn't work oh no keyboard input doesn't work and i'm like oh no so then i have to like take a major detour and i have to i have to start coding on my on my pc and boy it was just it was a rough morning so hopefully hopefully you know michael won't have the same issue but if if if he does then we could probably figure something out and we can yeah a little workaround right it sounds like it's a client-side issue so um i i have a lot of confidence in in that um [Music] yeah i think ali ali was just saying in a chat that streaming art was basically down so i guess that's what probably happened to you is that was that it no that wasn't even if that's a crazy part so it was like three or four different like different types of technical difficulties that i had during the stream and it was just it was crazy oh hey michael he's coming he's coming okay yeah there was a study out that said if you um if you think people aren't talking about you when you leave they actually are and it used to be like don't worry they're not but that's not the case so what are you talking about it's it's it's recording i'll check out the stream later oh uh i mean we were just saying how great a guy you were nothing nothing okay um well now that i've just lost five minutes let me go ahead and kick things off so we are yeah we're gonna be building out this random texting application and previously when it came to adding sms which is this hub sub service that is amazing tried and true and in using a slew of applications we're going to be using it to send out text messages to various users so as you can see i have my screen turned up here is that large enough or should i bump it up one more yeah i think i think it's large enough yeah it looks it looks clear to me i think even knowing that it should be clear awesome uh and simple enough what you can do is in here is come in you can type in a budget amount say fifty dollars we have phone numbers that are going to get populated from the s service itself so this is what sns is going to give us our job is [Laughter] our job is to say oh wait that 555 number that's michael or that is uh kyle there thank you so much i i like this setup so then i'm left off renee's on here kyle and renee are going to be well if it's just the two of them they're going to be randomized so that way each of them can presumably get the other person but if we had three people everyone would get a a random person so that nobody is left out once we hit randomize and send it's going to shuffle this array of users and set up text messages so the cool thing is that we never actually know who gets who uh until we we get those text messages so even the user of this application doesn't really have control if they're just looking at it from a consumer standpoint and that's the beauty of it now as i was mentioning previously you had to hop into the console to do this kind of setup but now we don't have to do that anymore because aws amplify is here to save the day let's keep things over and uh at the code and take a peek at what we have here okay so everything is pretty much going to be taking place in this index.js file now i'm a big fan of chakra ui as a lot of you know already there we go be too large there as a lot of you know already so you can see that we're using react here we have a bunch of chakra ui elements and we have some basic state we're keeping track of the phone numbers and the budget within our application now of course we have the typical you know what happens when we update an input item and then we have a bunch of markup uh for the table that you saw within our ui pretty standard stuff again this is open source i'll let you take a peek at the react components if that's what you're into but i really want to focus in on the back end that we're going to be creating today so this application isn't scaffolded with amplify so let's fix that there we go and i'm going to say amplifying it so if amplifying that you're essentially letting you're essentially letting amplify know that hey this is this is a starting point there's a project going on here right it's basically the just the the container almost of all of your amplified resources and by back-end and so on so forth right definitely so i'm going to call this twitch custom demo it's going to take me through same set of configuration it gives us a pretty good starter i'm going to go ahead and tweak it just a little bit so do i want to initialize it with this configuration i'm going to say no most of the stuff is going to stay the same though i'm still in vs code javascript react that source directory is going to be changed to the root directory and our distribution path is going to be changed to dot next because we're in a next json everything else is good to go to accept the defaults and just like that we scaffolded our application with amplify now the next step is to actually get into some of the fun bits of this and adding our resources to the project so i'm going to go ahead and pick an aws profile for me to work it and then we can start doing just that look at you with the workshop profile making me feel like a noob i need to add one of those myself the exact same as my other profile i just named it workshop to seem more legitimate it does nothing different and meanwhile i'm here it's like you don't use the default profile that's kind of been what i've been using i remember seeing uh natter stream shout out to neter he um he would have like europe um region one and like lisbon region two i'm just like that's that's a real travel man right there that's that's a great idea i don't even think yeah because deploying closer to your to your audience okay um okay so oh by the way i have a bunch of like tips and tricks throughout this demo that i'm really excited to show so stay tuned i learned something from michael every time i just try not to mention it because his head is already big enough so this is the most wonderful time of the year now um you saw in yesterday's episode i added authentication i'm not going to add that service today uh what i'm going to do though is create just an open api and that's just to showcase how we can test this really quickly within vs code once we get there now this is going to be a rest api and from here we can configure our application now we're not going to be integrated with dynamodb it is purely going to be a single lambda hitting up various um routes via express so i'll call this our we'll say secret uh text maybe demo the path that we're going to work with we'll call this slash secret text that's fine new lambda function uh if you see my streams before you know that i like to call this the same thing as the api except func after it for function node.js works and then we're going to be sticking with this serverless express with api gateway template we don't need any advanced settings then we'll be modifying some of the permissions later on and i do want to go ahead and edit this now now so far this is everything that that we've been able to do just like normal before right exactly typical so far yeah um quick question what shell profile am i using it is um what is it moonlight i'm pretty sure it's moonlight i have a youtube uh video that shows you how to integrate it channel the answer audience is i should probably also mention that a kyle also has a youtube channel maybe you want to like that as well [Laughter] so um first things first so let me explain the situation that we find ourselves in currently so as of right now my sns service within aws it has it's in the sandbox and when you're in the sandbox you can only message verified phone numbers meaning like i put my phone number in there and then i get a text message that says here's a code i put it in aws and it's just like a temporary thing but it limits a lot of developers into making sure that they're not being spam or hurting their customers experience etc but i think this is a really cool project to showcase when you're still in that sandbox land so let me go ahead and bring in aws the sdk and we need that because we're going to be interacting with sns so i'll say aws equals require aws sdk and for those of you that may be unfamiliar you don't have to import this do like an npm install because we're not testing locally and when this runs this laminator runs on aws that is already provisioned with the aws sdk so we'll create a new sns instance and we'll say it equals aws dot sns i think it's capital here we go so let's just bring it in but let's take a look at some of the code that got generated for us i'm going to option z in vs code just to turn on word wrapping and we can see that we still have cores enabled but as opposed to when we integrate dynamodb this is much simpler to look at much simpler to sort of graph our minds around we have this secret text path and then we have various getters posts and delete routes associated with that and they're all pretty much doing the same thing hit this route and i'll send back a response what i'm going to do is modify the path here everything has to start with secret text i so i told the cli that but that doesn't mean i can't add anything to it so where am i going to right here let's go ahead and switch this up now i'm going to paste some coding here and then we'll just sort of talk about it and that's just to avoid me making silly mistakes uh and watching me fumble around with them i prefer the phone so i update i have a feeling there's like a hidden rivalry going on here that i'm really missing out on you have no idea so secret text um i'm gonna add that um add the list numbers um part to it and this is really just going to be calling the aws sdk and saying hey go ahead and give me all the phone numbers that are in my sandbox and keep in mind those phone numbers can be verified or unverified depending on where they're at in that process now i'm marking this function as async so that way i can call a weight on it and every aws module has been updated so that you can do a dot promise on it without having to work with callbacks it's just a nice handy utility there now as i mentioned it's going to give me back the phone numbers in my sns service that are verified and unverified and i don't want that i just want the verified numbers so what this is doing here is saying filter those to give me just the verified phone numbers and what i want to send back to the front end is going to be an object that has a number that contains whatever that verified phone number is and then an alias and this is where i can put in something like michael um kyle renee alley christian and that's what we're sending back to the front end here so far so good this so far is all we're going to be adding in this lambda function i'm going to go ahead and save this in fact and i can actually get rid of all this other stuff because we're really not going to be touching it we'll be adding some stuff later on but this is all we need yeah so just kind of recap right basically you're using sms to get all the phone numbers that are available to you and then you're gonna look at which ones you can actually send messages to is that is that where the verified comes in yeah exactly yep and just to iterate on that point we're only doing this because we're in the sandbox environment once your app is if you just send a ticket to aws if your use case meets it they'll take you out of the sandbox you can text anybody but again this is just a fun project to do before you hit that stage so we're still in cli i'm going to hit enter here and it's asking me do you want to restrict api access i'm going to say no i'm actually going to keep this pretty public there we go and before i push this up note that my laminate function is talking to sns so i have to update some impermissions here this is another cool part that we uh first released when it came to extensibility so i can go over here let me make some room and we have this custom policies.json file now by default it has an effect of allow and i can specify the action that this land was trying to do and the resource is trying to do on that so easy enough i can say something like i have for the action sns dot and then pretty much the name of the method that i used which was uh list oh my goodness sms sandbox uh phone numbers the fun part is when it comes to the resource because keep in mind this is going to be in version control so to specify an arn that i don't want to have you know the exact arn listed here i can actually use wildcards so let's say aaron is arn for aws the sns resource when it comes to the region well i'm going to specify a star here and then when it comes to the account id we don't have to list that as well and then when it comes to any particular resource i'm going to say star and the reason why i'm using the star at the very end is because when it comes to listing an sms sandbox phone number that is looking at the entire service itself so not a particular topic or subscription and a quick question michael how did you get the list sms sandbox phone number like name like where did that come from oh super good question so if i come over to my browser and paste this link in here so this is sort of if you're a javascript developer this is your mdn for aws but in a nutshell it's the entire sdk for aws for javascript developers from here i can type in sns there it is there's only one version of it and if i scroll it'll show me how to add it to my uh account how to configure it and then it gives you pretty much all the methods that you want to look for and in our case we're looking for list sms phone numbers and clicking on that gives me the details for it got it so we just use the service reference um that's prefixed by the actual service and the colon and then i'll be able to use that that specific surface so have you spotted the typo because i've seen something so i'm figuring out should i let michael figure it out or should i bail him out on it no i don't figure it no let's let's let's see let's what did you see where's the typo actually i don't know if it's a typo but um uh the sns at the very beginning should be probably case as far as i know i tested both ways it doesn't oh really yeah yeah i was curious about that yes renee i told you don't let him know that your teaching is it should go without saying that you generally don't want to do this with your resource that you don't want to use wild cards in production but in case you didn't know probably shouldn't use wild cards in production wanna i would i would chalk that up to um the good old-fashioned it depends because in in this case if we we don't want to specify our our region or our account number uh so then you you can say like well what if somebody were like doesn't anybody have access to this if they got a hold of your lambda like yeah but they still need like in order to get into your account it was something to have like a trust policy so those mechanisms in place for im to still protect you the downside of my part is that technically this api is wide open so in this particular use case i wouldn't recommend adding the wildcards but at the same time i would probably want to add authentication to the api to begin with got it i guess later on are we gonna lock it down more i i feel like the only answer that you're looking for is yes um okay because i thought that would be a very teachable moment here we didn't um go ahead we we did amplify push right yes amplify push dash y uh aka why did it network [Laughter] i was on it uh you want to get through it quickly i i have a way to bail you out oh yeah yeah yeah just just add a new environment so secret trick of amplify we support multi-environments right off the gate so run mfi add env and just use a new environment name and for that particular environment i would assume you would not have these resources yet [Music] i'm learning all kinds of stuff today yeah we just need to see really fail at deployments that's how we learn [Laughter] um there we go so many ahead the cool thing about cloud formation is that it won't leave you in an indeterminate state uh for the most part so it'll just roll back uh amplify we actually recently added a shorthand so you can just put the name of the new environment at the very end and it's just going to scroll i like that uh we'll call it twitch i hope this will work otherwise it would be very embarrassing for me [Laughter] i blame michael what he created a situation the cool thing is i mean in addition to adding the environment we could also just quickly delete everything amplify delete and just start from scratch and uh and rename it so we can go forward or backwards in this case it's pretty cool i like that there's there's oh that's that's the good thing about pair programming right because that's really what this is right now repair programming and you get to learn stuff from other developers and i just love this i'm here for it while this is doing this thing let's just go ahead and work on the front end uh oh wait no it's already done yeah you probably want to run push now here yeah okay so while that's pushing let's hop into um what is it underscore app.js i already have amplify installed in this project so we can go and configure this with those infamous three lines of code by importing amplify from aws amplify importing our config from up one level aws exports and then tying the two together amplify.configure with our config i've probably written these three lines of code more than anything else in my entire life [Laughter] you have uh snippets no yeah yeah yeah i just i just type in my vs code and it scaffolds out all of this there you go i think sean made a snippet library sean swix folks on twitter that was a good one i think it changed over time but it was good all right so we have our back end being pushed up we configured amplify in our project now let's just go ahead and work on our front end for just a little bit as our as our back end finishes uh being pushed so you can see i have the api category already installed here and then i have this handy little area that's like hey um do you want to go ahead and list those sandbox numbers right here seems like a pretty good spot and this is just a quick little sanity check so let me go ahead and do just that now once again i'm gonna cheat here but there isn't too much uh magic actually happening on behind the scenes we're still listing the phone numbers and we're going to call it our secret text api just like how we had we're calling this path list numbers and from that api module we're calling await api.get that's going to go ahead and there we go that's going to go ahead and make the call and as soon as we get those verified numbers back keep in mind that it's going to be an array of objects with a phone number and an alias we're just going to update that in our state right here and before we test it out let me go ahead and make sure that the deployment works looks like it's at the api gateway stage and created some permissions so we're almost there yo i gotta ask you like why is your console on the right side man what is that who does that because because when whenever i toggle like that uh my code no that that's not a good excuse because like the real question is why is your file browser on the right hand side like if is it for the same reason what okay yeah you see me you know what on your streams you can do what you want to do actually what i'm super curious about is how did you get this fancy like um the the triple equal sign right how do you get that fancy oh the ligatures if um yeah if you if you subscribe to my youtube channel here's the short answer without any ads included what you could do is you could find a font that has ligatures and then there's some type of options somewhere in uh vs code to turn on ligatures uh for that if that phone supports it it'll do those types of things okay and also join uh kyle's patreon for 9.99 per month just joking every time i plug he has to get a plug let's um let's test this out and make sure that we're good here um i am going to open up a vs code extension called thunder client and the cool thing about this is you can make a request and it's pretty much just postman in vs code oh for real oh this is real for real so um here is my end point i just got that from the console but keep in mind we have the uh slash secret text slash list numbers endpoint that we're actually trying to hit so we'll add it in right there and if i click send awesome oh my god you can see i have my response right here so 629 and then these phone numbers here in case you're wondering uh these aren't my my phone numbers um they are real but i just purchased like google voice phone numbers for the demo thank you chat uh you owe me 10.99 and then that way we're good but yeah uh thunder client extension and and you never have to use postman again i know the same thing that's pretty cool so so now we know it's working i mean we could do a sanity check by uh check this out in the browser i believe i have it running uh i just have uh a vlog yeah i'm just throwing in random stuff oh cheese and rice you have a problem with maps i feel like that was exactly the same era we had yesterday on stream [Laughter] i um let's see here that's because my verified phone numbers and you're right i did have the same error i think it's an object and i always forget to like just have it give me the array back let me look in here pump that up so you all can see my errors um what what do we have here that is the old stuff oh i think yeah those aren't the the current numbers i think this is actually printed undefined so i would assume the if you look api secret text does not exist so it sounds like maybe the api call did not go through all right are you sure it's exactly written like this um you can check my exports file yeah yeah so we're now also teaching how to debug amplify apps live boom fun stuff amplify backhand function and it is whoops uh i don't know that's right i think so if you call if you look at the api you'll probably find it faster api secret text demo so you did not call it yeah secret text there you go every single time i'm like all right if i just made everything the same i should be good and then i do the the drive run and i'm like oh i still have that those resources up i got to tweet the name in a little bit oh there you go it works cool i knew it was a friend an issue though because we already tested it in um with thunderclan which is kind of fun to say um so we're good there next step though uh we went ahead and verified that that's working let's add the rest and this is where things actually get really fun we're gonna be working in our back-end code for the majority of this session so let me just add what i need to add on the front end and then just sort of be done with that for a little bit so really we are going to be uh on this handle submission click so whenever we click that button that presumably will send off the messages we needed to do some stuff secret text demo and it's pretty straightforward it's going to go ahead and take in the demo link and then it's going to take in the the path that we need along with a payload which includes a body that has the budget and then our phone numbers that contain both the phone numbers and the alias so whatever alias we put in there cool um it looks like we got a pretty good question so can we talk a little bit about what is happening under the hood uh now when we do amplify push or use some kind of ci cd mechanism like how is cd uh the cdk integrated with the rest of cloud formation okay you want me to do it or yeah go ahead go ahead i'll just say i could take a stab but i'll let you speak to it okay cool yeah so so an amplify push essentially what we're doing is we're converting your inputs from your cli into cloud formation right and that goes through a few steps as you might have caught in our stream yesterday um a lot of the resources that we generate under the hood are now also cek-based so we give you that cdk resource you can apply overrides on it and after the overrides are applied we convert that into cloudformation and deploy for you now how do we make sure that all of our back-end deployments work with ci cd so that you know i can create different branches different environments and so forth it's exactly like exactly what michael did earlier we basically append the amplify environment name to the end of each resource so that um for for instance in this particular case you just deployed the twitch environment you can see how the uh the resource name has like a dash twitch at the very end that just gives you that that kind of gives it away if that makes sense uh in terms of what kind of environment it is and every time we spin up a new environment we basically replace that and part of the resource name with your environment name to make sure that ci cd workflows function yeah awesome great question knowledge bombs it was actually a really good segue into what we're at now which is the star of the show because we're ready to add a sns topic to our application which means we have to add in some custom resources so over my terminal i'm going to type in amplify add custom and it's going to walk me through a series of prompts the first one being i believe which is um you know what is your what's your stack name that you're working with here after suggesting cdk but this alone is a pretty good call out like you can write your custom resources in cloud formation or cdk i strongly recommend trying out cdk if you haven't and that's what we're going to be testing out today uh our name for our resource let's go ahead and call it uh secret text are you trying to think of a new name that you haven't used before i have a sense here you had a pause there now every time i like my fingers start moving i'm just like wait a minute is this is this gonna work do i have to create another stage what resource name should i forget next good times good times all right so we're waiting for this to build now i know that this has been one of the most requested features in the lifetime of amplify from my understanding on the on the javascript side so what i'd like to ask chat is if you've been waiting for this what do you plan on using um what do you plan on using this for and what will you be like integrating first i'm kind of curious definitely as they ponder that i'm going to walk through all this cool stuff that just got generated for us so right off the bat we are brought into a cdk stack you can see that we have the cdk core module brought in uh we do have some amplify helpers because again we're trying to integrate amplify and the cdk as well as some imports for some of the more common uh constructs that you'll use within cdk sns i can see in the chat that we have someone wanted to use sqs and this is where it gets really fun because not only do we as rene was saying earlier automatically take care of the environment handling but in addition we also give you sample code on how you can do some of those integrations yourself the very first one how do you integrate sns with sqs so what we do here is um let me start uncommenting some of this stuff so we do have a blog post coming out on how to integrate sqs but for now uh let's bring in just the sms part of things and where we have here there we go yeah it's just this sample right here i can get rid of this other stuff uh before i do i think it's probably a good idea to talk through some of this so those amplify helpers we're automatically going to bring in things like uh your project info and some of the things that you can pull off of that like what is the environment name that i'm working with what is the project name that i have and then you can name your resources which comes in uh super handy when it comes to defining the arns and not having to go into the console to grab those and then of course i deleted the code for the sqs but you can see how that gets integrated here but and it adds a subscription to sns custom i am policies uh the team has done a really good job i'm trying to give you sort of the basic use cases uh that most developers use or some of the most common use cases i should say that they use when it comes to creating these resources i'm curious is there anywhere that we could find those examples in the docs or some somewhere yeah if um if you could be so kind as to post a link because the docs have these examples as well i believe yeah let me let me post it in here um or you can probably find it on michael's youtube channel i would assume at this point [Music] [Laughter] um let's see here i got an extra one there we go let me see um so i'm bringing in sns i'm just going to uncomment this from the top there we go and i can do a little bit of code cleanup awesome appreciate it so we have the ability to create an sns topic which is what we're doing here i'm going to just name mine the same as the project name i think that makes sense now the cool part is that even though i definitely have an sns topic already created with this name as i ran into earlier we're appending the environment here so it's going to be a completely separate topic and in this case dash twitch as the environment awesome and that's it when it comes to creating a resource again the full breadth of aws is at your disposal and we uh i would say sky's the limit on how you can integrate amplify within the cdk when they even brought up like you can create an amplified project in the cdk that creates another amplify project it gets a guest e yeah it's amplifiception um you can go pretty crazy on this yeah i heard you like amplify on your amplifier [Laughter] cool um so from here before i push up these custom resources i'm going to go ahead and hop back into that app.js file and now we're ready to add in sort of the rest of our application here um oh we have that question um other cdk libraries like api gateway all of that is fully supported um just by adding the the relative constructs within your package.json yeah it shouldn't feel any different if you've used cdk before you can just go to that folder run npn install and install all the dependencies of cdk that you need and just use it there's really no restriction per se put onto that for when you add custom resources yeah so i'm going to do a little shortcut here and i'm going to be adding some environment variables since i'm in an express app as middleware so a couple of things i'm going to be bringing in the account id that i'm working in so again i don't want to specify that in code shout out to renee he showed me this this handy little uh trick yesterday where we can grab it from our back over from the function joke me dad sorry [Laughter] um and then the rest is just tacked on to the process that e and b we have our indirest region our amplified env and that just makes it so that any subsequent routes it'll automatically be available on the request so i can do request.you know aws region because i specified it above just a quick little primer on on middleware there so our final route though and this is where things sort of get uh not hairy but it's a big function that is gonna be doing a lot for us so we already have this list numbers route right here i'm going to add one more so we'll do this iteratively so bear with me first and foremost we want to take the messages that got sent to us from the front end rather the phone numbers and the aliases we want to take those and we're going to subscribe them to our uh sms topic the one that we just created in our our custom file and we're doing that here we're grabbing the budget if it doesn't exist we'll just set it to like 15 and then we're grabbing the all the phone number data from the front end as well so far so good uh what is my what is my red squiggly on me about probably a closing paren maybe yeah where this is the hide-and-seek game it is a found you yeah see i know some javascript i'm pretty sure this is an interview question to basically check brackets or problems are correct [Laughter] so um so this path it's going to be called published numbers right and and so far we're just pulling off the pieces that we care about the next part is the actual subscription part meaning i need to go through my array of phone numbers that got passed to me and essentially just subscribe each and every one now the cool thing about working in the sandbox is that you're limited to having 10 sandbox numbers so in terms of performance this is nothing and i'm just using a standard four of lube so go through every one and then subscribe each and every one the cool thing is that because i specified those environment variables when it comes to having my topic arn listed here i don't need to specify anything hard-coded uh secret text sender i believe that's what i named it i'm pretty sure yeah pretty [Laughter] i think i think you did it camel case though yeah yeah something like that you can just open up your um your your weird sidebar you know yeah i did the sidebar that weird right goodness oh my goodness i want to thank everybody to the first and last time that kyle and rene were on stream i'll be here tomorrow as well i'm here all week folks i think i think you want to look at your push-up buttons of this one because this is the resource stack name whereas oh you're right this resource name right oh that'll be a good case for um amplify status d yeah is that your yeah were you were wrenching it yeah if you just open up the terminal that you used to deploy and fly push you should be able to just scroll up and see where it is have you deployed it yet the sns no no okay so i can do amplify status v oh you can put the category in there as well to just kind of filter um i did not know that yeah what would i put custom yeah or the name of uh yeah i believe it'd be pretty for sure you can do it with um other categories and now it's kind of iterating through all the resource changes so what does amplify status dash v do i actually haven't used that one verbose yeah it's very bad basically gives you resource level differences that will be added okay uh huh i guess i spoke too soon it maybe does not give you that value that you're looking for all good uh secret tags we'll get there yeah so let's go ahead and fill this in real quick um so we have we have the subscription part in place and that's relatively straightforward but now that everyone is subscribed now we want to go and publish those messages so this is where things get to the next level all right so i'm going to bring this in and then we'll then we'll talk about it so it is um after we subscribe we're going to iterate one more time and the reason we need to iterate is because for each and every message we need to do one of two things if you are the last person in this array then you're basically going to be assigned to the first person in the array and then for everyone else you're just going to get the next person that's who you're assigned to now ideally you would want to um you know shuffle the array mix it up randomize it but for our use case this is perfectly fine it's only two and everyone's gonna be yeah and everyone's gonna essentially be given a similar message your person is if you're the last person the first person's name and the budget is whatever the budget happened to be now the cool thing i'm you may notice is that i'm adding a filter policy to every person once i subscribe them to um sns so when you describe a phone number to sns they automatically listen to every single message and we're saying hey hey don't do that instead just grab the messages that you care about with regards to that filter policy last thing we need to do is just push this up so i'm going to bring in our custom policies because now that we're subscribing and publishing we want to go ahead and update that accordingly as well here are the resources that i'm also doing for this lambda function and then this is the probably one of the cooler parts that we have is that with this air in i can specify the environment that i'm working in which is dynamically placed right here so the team has done a really good job of thinking through every scenario and making sure that as you're adding stages of your development nothing breaks the one thing that may break though now i'm like super curious about that that's his topic name but let's go ahead and build everything up there we go i'm gonna run amplify push don't open discord how much time do we have today an hour or an hour and a half one hour where this is the last quickly quickly hit enter i think in the meanwhile some some really interesting topics in the in the chat i see i see one person mentioning a custom s3 permission for that you might want to consider using amplify override storage so then you'll get all like the defaults out of the gate from from amplify you then only need to modify the a couple of things on the s3 side of a three policy side of things i guess yeah tune in tune in thursday for an example of that oh are you going to show that sounds exciting cool so this is going to push once we get everything set up uh we can go ahead and test it out from the front end we might be locked in on time uh i i have to say that the three minutes that we probably need to test this out is probably the time it took for me to restart chrome at the very beginning my bad my bad um what i will do though which is the perfect segue for why you should join tomorrow right i like that so uh what i will do is everything that we did today is actually on github and i posted a link to the uh repo so that way you can follow the exact steps that we did today and uh and get this working as well yeah go ahead i guess find a final plug on my site i don't have a youtube channel but please read my blog post um so yeah i basically go through a yeah i go through an sns scenario with email set up um so it's uh it's a dinner party planning app so you know thanksgiving is coming up so you might as well use it play with it and we'll go through the cdk workflow there as well definitely i this is building i do want to be respectful of whoever is on twitch next so unfortunately this is going to be goodbye for now but thanks for all the great comments thanks for chiming in please check out the repo in case you want to follow these examples and go ahead and try out your own amplify and custom scenarios let us know what you think and then of course read renee's blog post cool thank you everyone thank you all you have a great night

Channel: Focus Otter

Views: 81

Keywords:

Id: 8lcaXZydhB4

Length: 59min 58sec (3598 seconds)

Published: Wed Nov 17 2021