AWS Amplify | Week of Extensibility

[Music] and we're live hello everybody welcome back today is day four of our aws amplify week of extensibility you know who i am my name is michael liendo it's a pleasure to be here as always but i have two amazing guests with me today kilo loco kyle lee he's in the house i have anna she's one of our pms on our amplified team today's gonna be an amazing session anna for the folks that haven't had the pleasure of meeting you before would you like to give a brief intro yeah for sure so hello everyone i'm anna also known as bananafried on twitter i don't have as many followers as either michael or kyle but you know trying to work that out i am a relatively new product manager on the aws amplify team so i joined back in june and started picking up work for the admin ui which has been so exciting because super passionate about technology and making it accessible to everyone i think the admin ui is exactly the sort of place that we can really gather accessibility for those developers ibn ui for those that don't know about it is a visual front our visualization of your backend for amplify so if you're used to amplify cli there's a lot of features that you can actually look at on your screen not inside the command line via the item ui yeah it's like one of the best features that amplify offers i'm not gonna lie yeah let's let's just get the trifecta here it is it's super nice awesome awesome yeah we have an exciting show today can uh what are we gonna be talking about we have a bunch of great opportunities to speak on anna do you want to do the big reveal big reveal yes definitely i'll do the big reveal for the admin ui side so we have been in the works for a long long time to bring storage integration into the admin ui so you might have already been used to doing amplify odd storage via the cli but now you can easily provision your s3 buckets directly from the admin ui as well as manage your files through a file browser that we've created directly in the admin ui this means if you like me have dealt with the s3 console and no shade on them it's great it has all the functionality you need but maybe it's just like a touch too much functionality we have simplified that in the admin ui so now you can browse your files similar to a way you might see in google drive or dropbox and manage your permissions directly from there this is however a preview release so the uh prefix that we're making available to our users today is only in the public folder which means all the files that you put into your s3 while secure and safe to those that you choose to view it will be in a folder that's deemed as public so there are some rules and permission regulations that you have to consider there i think that i i gotta say i'm not gonna lie i am a mobile dev i don't want to i don't i don't plan on learning all the aws services through and through i like to stay on mobile so when i hear something like this like that i have a file browser that's directly linked to s3 and i don't have to go through and really understand all the all the different complex features that they offer and i could just focus on what's relevant to me as a mobile developer that's what i like to hear to be honest well that's just me no no no i think that speaks volumes right is when it comes to amplified we really try to make it uh cater to whatever we don't try to force you into the aws ecosystem that's not what amplify is about when we start speaking about the admin ui in this context being a mobile developer and just being like look i really just want to focus on mobile development can amplify help me in that regard and then here anna's describing a situation where you don't have to dive into the s3 console and get familiar with all the fine grained knob turning that you can do you can simply upload files as she mentioned similar to services you already use like dropbox um and in other services out there browse the files upload them and while we're in preview we have this great functionality where you can still have a public folder that you can access i think it's great oh no anna you mentioned that so we have the ability to to browse these files and and upload them now i think of i think of photos every time that we we have this ability you're saying any kind of file though any extension doesn't matter if it's a file we can upload it just like how we would in s3 is that is that correct yeah that's exactly right so we do have some nifty little preview functionality for images where we allow you to see an image preview directly in the file browser but it doesn't have to be images it could also be text files whatever kind of code files you have your big old blog text files we have those as well we recently got a comment saying hey the content management is great however it doesn't support extra large blog posts those can be put into your s3 storage as well so really anything you can imagine things that i haven't listed here probably too well so we we have this shortcut and this question always gets brought up where we just make it easier for folks to access some service of of the aws ecosystem and folks want to know well okay there must be some pricing implications here in doing so uh what's the what's the scoop on that yeah so uh one question i get a lot is when i show off the admin ui and i show off this great gui and this great interface for people to play around with is okay what do i have to pay to unlock the admin ui first of all admin ui is just part of the amplify bundle that you get when you enter our ecosystem you just have to toggle a switch enable and you immediately get access to the admin ui stores similarly if you have been used to using amplify ad storage and you have experienced that service before we're not going to be adding any extra costs with adding storage into your admin uh so all of this is just part of your amplify environment and whatever cost you may have had associated with that before as well and from what i understand i believe you guys can speak to this a little bit more uh directly is that there is some freeness to this service that you don't have to worry entirely about um okay is this just gonna suddenly rack up millions of dollars because i created a s3 bucket yeah i mean from from what i know we offer the aws uh amplify free tier i i forgot exactly what it's called but it's it's called free tier i know that part i don't know if it's an amplifier keyword free but free tier look for that and then um if you have a new account essentially you could sign up and you'll actually be able to test all this stuff and use your free tier account and during that time you should be able to actually see um how much the charges would be had um had you been paying for them and from what i've seen in the past it's been pennies maybe a couple bucks um in my experiments obviously you know if you're building the next big social media app where you're taking videos 30 second videos and you're putting them up and you have a million videos that's going to be a little bit more expensive than the stuff that i do so just like anything else amplify is gonna just simply uh have all the pricing done by the actual services that you use like s3 if you're using s3 how much of s3 are you using that's going to be the price if you're using datastore or dynamodb how much are of that are you using that's going to be what the price is so pay for what you use exactly all this can be found out if you have it over to the website so uh aws.com forward slash pricing uh that's going to go ahead or force flash s3 pricing that's going to take you to the pricing guide as anna mentioned this is free tier eligible but when it comes to using amplify in the wrappers that we have around it you're not paying extra for that you're simply paying for the underlying services themselves which i think is amazing that we offer all of this yes amplify is just here to use those already existing scalable resources and make them easier to access through your apps that's awesome we do have some some eagerness going on in the chat i didn't even check on the chat chat how are you how you all doing today right it's a it's a little bit later it could be early depending on where you're at say hi i apologize you know i didn't forget about you i'm looking i'm looking at anna's camera and i see like it's almost nighttime over there yeah and then i just came in from outside and it's all daytime so like is it nighttime where y'all are watching or i still have some sunlight i have zero sunlight in in the great state of iowa uh it's pitch dark out there yeah shout out to new yorkers who are experiencing a beautiful fall much better than seattle ever gets yeah east coast is the best coaster east coast west coast spot in words and yeah in some places it's it's midnight so thanks for joining us it's already tomorrow yeah yeah you're in the future awesome i think uh with that said one last thing here is that if you've been following this week of extensibility you might be wondering how does this fit in with what we've been talking about so far well it's actually a perfect combination where you can upload your files using this preview feature that we have and then we can bring in that application down into your your local application running and then continue on with the export features that we've been talking about earlier this week or extensibility features rather and add whatever kind of customizations or fine grained tuning you wanted to do but i don't want to speak to that too much because anna has a pretty awesome demonstration that should be showing off today and i'll go ahead and just kind of zip it for a little bit and watch her do her magic oh thank god i'm going to go ahead and start sharing my screen and the first thing i really want to do is remind everyone where the admin ui is because that's kind of a question i get a lot and i just want to make sure everyone's very very aware of how to get to your admin ui so i'm in the aws console right now hopefully you can see my screen okay and i'm just going to navigate over to the amplify console by searching amplify and clicking on aws amplifier right here can you um like one one little bump up yes ignore the white page that just showed up if you're a user you won't get blood i just had a million of tops open today so you get to look at this for a little bit obviously i'm not as much of a pro as kyle or michael at demoing so any feedback is appreciated by the pro i have thesaurus difficulties yeah we have we have a live demo yeah okay so i'm over in the aws amplify console if this is your first time using amplify you'll be greeted by a great starting page if however you're like me and you've made a million and one demos you can just navigate to the correct region that you are using for amplify and you should see your applications listed there in my case i uh exceeded my s3 bucket quota so i quickly created a new account for this demo and i only have one amplify application right here and so i went ahead and cheated a little bit by getting things a little bit ready if you're new to amplify all i did was either in that page that i just showed you or on this page you go to new app and you click create app backend you type in the name for your application that you want in this case i just called the pre-invent demo but it can really be anything you click confirm deployment and you've basically created your amplify back-end at that point and when you've created your amplify back-end you've basically enabled and ui you just have a few more steps you might have to go through by default however if you have created your application and you go back to all apps and you see it sitting there you would see an interface where you have both a front environment which you can connect to your github repo or whatever other kind of repo service you're using and then you have a tab for your backend environment the backend environment is key because that's how you access the admin ui you have this big orange button here that you can click on and it'll open your app and rely on a new tab just remember that this is how we get here and i need you guys to remember that because right now we're in the amplify console now we're going to the admin ui so i cheated again where i have the admin ui open in another tab it doesn't take super long to open but i just wanted to have it ready can can i interrupt one more time for sure uh so back on the other page where you were showing um like in some cases uh some people may have started up uh their amplify app by doing it from the the cli which is perfectly fine you could do amplify and knit in your your projects folder and that's gonna and then you do amplify push and then it spins up all those resources for you now if you go that route um you would not have access to uh this button right here where it says open admin ui at first but there will be like a little toggle switch somewhere above that staging word where it says enable admin ui so if you did end up going through that path like if you already have an existing app and you haven't played with the admin ui yet you can always enable it and it will actually set up those changes for you so that you can continue to follow along so yeah exactly exactly and if you've already done an amplify application where you've done things like amplify ad storage and you enabled the admin ui it's not going to break anything that you've already created in fact it's only going to give you that visual interface that we're going to be showing you on top of your rd created amplified backend so it's honestly in my opinion kind of magic how we can just kind of switch it on and off in that way awesome okay cool i'm going to switch over to amplify admin for anyone wondering i'm using edge as my browser i'm an ex microsofty and i have a huge passion for edge as a browser so here i'm in the admin ui at this point admin ui like i said is a visualization of your amplified backend right now we support data authentication and storage and storage of course being the new one we have the little preview buttons next to it uh showing that it is in preview right now since you're only able to use the public prefix access folder so the other two features data and authentication are important and i've already set up authentication actually to be able to enable your s3 provisioning authentication is needed because when i set up storage you need to determine okay who is actually able to access the files and do things to my files in the storage bucket so again i cheated i already provisioned my storage bucket so this is the page that you would see once you've already created your bucket if you haven't created your bucket it's extremely similar you just have the option of choosing a name for that bucket and you'd still be able to set your authorization rules when you're first creating it like i said this is an already created bucket and you can see i can still edit the rules that i have for authorization on that particular bucket so right now my settings are all my signed-in users so my sign-in users that have signed in via the authentication backend that i created easily with amplify they can upload view and delete folders whereas guest users which is an optional setting they can only view the files this kind of makes sense if you think about any sort of photo storage service where you know if you've logged in and you're a member of that photo store service you can be uploading your own photos and sharing it out with people if you're just a guest who hasn't logged in yet you can just view those photos if those photos have been made public to you so that's the settings that we have right here so for folks that that aren't aware we actually offer a bunch of different ways now that i think about it to create these as three buckets and get them in the admin ui so you're showing off how we can do it directly from here which is amazing that you can just kind of click and create this s3 bucket but then from the cli you can also do amplify add storage and that's a programmatic way of doing it and then we also have the kind of edge scenario here where if you already have an s3 bucket that you want to use in your application amplify import storage will do just that now i'm kind of curious though if i import an s3 bucket using that command and then push it up will the admin ui pick that up as well yeah for sure so either you could use amplify import from the command line or you could actually import your storage bucket directly from admin ui as well so again i'm showing you the interface of an already deployed bucket if this were not deployed and i was kind of day zero of my bucket integration i would have the option left and right here to either provision a new storage bucket or to import an already existing bucket that i had created this way it's super easy to pull whatever you already had from s3 into your amplify back end there are a few more steps that you have to take in terms of making sure that your permissions are aligned with what amplify is expecting to see in an s3 bucket to make sure that it'll actually show up in your file browser and to make sure that we actually have the sort of connection needed to your imported bucket to take advantage of things like the amplify tooling and libraries as well yeah when you when you do that import on a bucket you have to make sure that there's the folder structure that's all laid out in a specific way that's how the that's how it's able to interact with the public and the private and all that other stuff so um there's more there's more documentation on importing a bucket but yeah like like it's still supported that makes sense though right if i'm creating a bucket through the console and i'm just kind of like yoloing the permissions uh please don't yeah i mean like i'm just like opening everything up and then i try to import it with amplifier amplify smart enough to be like i see what you're trying to do but that's just not going to fly you have to make sure you have you know really good permissions or rather yes default permissions that amplify expects before we can actually import this that's that's a really good security measure there yes we will throw an error if you try to use a storage bucket that isn't aligned with what we're expecting um and that's just kind of one of the rules of the games here and i promise that the way that we organize things is a good way of going about your file storage so we're not trying to mislead you here in any way it's almost like somebody thought about it before they made it yeah yeah like i say it all the time but i'm just like trust the fact that aws engineers are the ones that built this and and that they have pretty good insight into reasonable defaults okay cool so like i mentioned this is my storage deployed my authorization rules my name we can go a little bit more into the details of uh how you can get to your s3 console if you really wanted to and how you can remove your s3 storage bucket um but as i see that michael has a guest on his side i feel like the guest will also appreciate this greatly so for my first demo i made a shiva inu picture gallery she by unit is a wonderful type of dog that we can talk about for ages for this demo because i knew we're going to have michael on board i want to create my other gallery an otter gallery because i know there's something going on with otters and michael and i've seen images of that on the internet um so kyle if you have a spirit animal we can do that next time too a spirit animal yeah i gotta find one first oh goodness so i've decided that i want to create a website that's an otter gallery so the first thing that i did of course was find a bunch of cute otter pictures but how do i bring those otter pictures into my s3 bucket this is where the file browser really comes in handy so over here on the left i'm going to click on the file browser which also has the preview next to it and this is going to load up that visual interface of your files in your s3 bucket like i had mentioned before the folder structure that we had been talking about the one that amplified kind of expects you to have in your s3 bucket is laid out here so you have your private protected and public folders if you want any more details on what exactly each of those do and why we have them there are details for you here on the right as well some more documentation on how to take advantage of private and protected while we're in preview but also just generally to learn more about like why do we have these and how can you take advantage of them in your application dude i love that explanation right there on the right side like that's like super important i've had like a lot of people ask me in regards to like where these files are living and stuff like that so i love that it's like all kind of spelled out right there and like breaks it down for you why why each of these folders are created right off the bat yes so to me private and public make sense protected took me so long to understand it was kind of embarrassing because i was reading through like the s3 documentation i was like what this doesn't make sense why is it protected so hopefully the amplified documentation which we're really proud of kind of clarifies a little bit for you if you're especially new to that world of storage online like i was when i first started working here cool so like i said i have otter pictures i want to upload them how do i go about doing this so first of all we only have the public folder available the file browser that we have in admin ui allows you to navigate easily through your folders as i'm going to do here i'm just going to click on public and from here i can do a variety of actions so the first thing i want to do of course is to upload a few pictures i can do this either by clicking the upload files button here and click up here but because i have multiple files that i want to upload i'm stamping my find over here i'm going to select all of them and i'm just going to drag them over to start the upload of these four files that i have of my otters that's going to take a second while that uploads i tried to find small files for this so i think this will work properly but now you can see my file browser has populated with the four files that i've just updated just four cute jpegs of otters that i found online so this is cool i have some this is cool i have some details here uh name size type glass modified what i really want to do and what we were really eager to do for this particular storage integration was to have a bit more information for the files that you have to make a little bit more a little bit more akin to file browsers that you may already be used to either on your os or on like online like google drive dropbox like i mentioned so when you select one of these images or if you select the text file but with an image you get a cute little image preview you get a couple more details this includes image previews a jpeg obtain or any kind of image format um some more good descriptors some information that i find particularly information important and useful like the s3 key i can just very easily copy paste that here as well as a code snippet so this code snippet is how can i get this particular otter picture from this particular bucket and i can just copy and paste this code snippet directly into my applications code and um it'll just work we know we provide this for you just because we thought this would make you as the developer your life easier oh so i focus on javascript because i'm a web dev but yeah that's what i like to see but yeah i was super happy with this i'm super proud we have our little image preview as well once you have a file selected you have standard actions that you sort of expect from a file browser you can download you can copy it to another folder you can move it to another folder you can rename it you can delete it if you wanted to but yeah that's the file browser in a nutshell holy moly it's crazy it's like we recreated the s3 console with front-end developers in mind which yes i say it but like that's exactly what amplify is all about it's just amazing i mean even the comments are bringing up the fact that it's just really cool to have all this power right here at our fingertips everything we need and then everything that we don't need is kind of left out but if if we wanted to though we could always dive into s3 and if we needed that but through our research and talking through our customers and all that good stuff we can say well these are the parts that most of our our customers are going to be needing let's include that exactly um if you're used to the s3 console you probably know how many clicks it takes just get a glance of your cute little otter i think it takes you have to go into your bucket you have to go into public you have to go into the actual image you click on the image then you copy the object url from that image after you've gone to the description which is on a different page you paste that url into another tab and then you have your image so i just thought one click to see your image was a little bit easier i forgot how how many steps were associated with just trying to see the image that's associated with that key and yeah always downloading the image to my to my my machine is not fun so i really like this definitely so many honors and as anna was saying i mean no shade to the s3 no no no no disrespect or anything that team is in charge of encompassing everyone trying to upload anything right so it's not geared towards front end developers no it's not everybody and this is only possible because s3 is so powerful and has so many things that it can do um but but like we keep saying this is just like uh an experience catered to somebody like me a mobile dev or a front end dev and i love it now i did have a question there is a create folder button would we still be able to access files inside of a sub folder of the public folder i haven't i don't think i've tried that actually so i'm going to go ahead and create a folder it's called otters as if i had more other pictures i don't have more otter pictures someone else has to provide that to me um but if i were to just copy and paste uh one of the other pictures in here if we take a look at the code snippet after it's loaded up you'll see that the code snippet is going to be for that particular access file so in public still um and so no matter if the folder is in the public folder you're still going to be able to access it the only real delineation between whether it's going to be accessible or not is on the root level of public private and protected so i'm going to go ahead and just delete this really quick oh no is that a bug i swear i was able to delete folders before okay let's just ignore that this is why this is in preview okay cool yes so i have uploaded my photos to my s3 bucket now i can view them in amplify but how do i put these photos into my website that's going to be the otter gallery real quick at this point because you said that you were able to do it before i think it's the same on s3 that you may not be able to actually delete a folder unless you delete all the uh files oh wait you're totally right oh my gosh you see how we got your back like that yeah freaking demo nerves they're totally correct said something i believe we did have the discussion whether we wanted to override that or not but we ultimately decided it was not a good idea because that is there's a reason why s3 implemented that to have those extra clicks just to ensure that you're not doing something accidentally so yeah that's the reason why i totally forgot about that thank you kyle okay cool like i said files are uploaded i've validated that they're cute i've validated i could create an extra folder if i really wanted to how do i bring this into my local development when i'm building my web application that's the next step that i want to walk us through so once we've done this i'm going to focus mainly on a react application i'm just going to go to my terminal and create a new react app and this is the part that's going to take some uh banter from kyle and michael because i'm about to create a react application and then install the amplify libraries and pull my amplify environment doors we're gonna go through these steps slowly but there are some things that we kind of have to wait for a little bit here you know if we just let michael plug his his all his stuff then by the time he's done the entire like you'll you'll get all your resources in what we'll be able to end the show right there i i can't believe that you would say that chat tell him how crazy he is he is and while you're doing that please follow me on twitter at mtv.com for doing this amazing demo for us please pret if anything unfollow me and follow anna there you go there you go for bringing the otters yes i'm not gonna lie i zoned out like a couple words after i saw those other pictures i'm not gonna laugh [Laughter] yeah this is the part of the demo i considered doing in advance but i thought it'd be interesting to kind of show the whole process of like creating up and then like pulling it too maybe that was a mistake who knows no i think so this is good like most folks when they when they go through this especially when you're working with the admin ui right um it's it's not you know deep down into our cli and i'd like to think of amplify as being in steps so you you start off with the admin ui and then when you're ready to do a little bit more then you migrate to the cli which we can absolutely do and then when you're when you're ready to take things even further which is what this whole week is about then you can extend amplify to the next step which is exporting it to the cdk or override uh resources that get generated i think when you approach amplify in layers like that it becomes a really enjoyable experience because you're only getting as deep as you need to definitely definitely so i had a question real quick like so whenever whenever s3 is presented or storage is presented it's usually done with images it's the most relevant thing that most developers work with um but you know audio has definitely become super important over the past year in my personal opinion it's been uh revolutionized i guess and then there's also video and there's a bunch of other files but i was curious like if i were to upload video or audio um i know that we're still on alpha but are those things that also have previews or how would i go about previewing that that yeah so we don't have video or audio um previews yet if you want that that would be a great thing to add to our github repo we have a github slash don't quote me on this something something amplify slash admin ui issues she says here you can you can definitely post any feature requests there i've gotten a lot of requests for um audio supports audio preview support is there some kind of sound cloud demo that i'm not aware of because everyone's building a like soundcloud lookalike or soundcloud like reproduction when they're trying out amplify i feel like that's like the number one tutorial that people are somehow following i don't know if that's a thing or not i think it's just because um you could all actually follow me on soundcloud and i always plug my stuff and kyle always gives me grief about it actually uh christian's on soundcloud oh he is yeah our other piece codebeast has some amazing instrumental music that he produces there oh yes i listen to that that's why that's why it's very like lo-fi anime hip-hop that youtube stream that's always going on if you guys know about the lopi girl on yeah exactly my my coding journey those late nights okay cool so i don't know if you've noticed me clicking around because i know our like banter is so engaging but the react app has finished building and now i'm at the point where okay i have my application on my local uh computer and now i want to connect it to the amplified backend that i've created so how do i connect it to the s3 bucket with the cute little otter pictures this is again like a super easy thing especially from the admin ui you don't even have to go to documentations you don't even have to write your own like command to remember how do i bring that back end into my local development all you have to do is click in the top right here under local setup instructions and you're provided with a amplify pull command that corresponds to your particular app id as well as your environment name that i can just copy here i've copied that go back to my terminal i just paste that in i have cd into my outer gallery i always do that wrong and then once i hit enter the process that's happening here is connecting and creating the amplify file as needed to be able to talk to your amplified backend in whatever cloud it's floating around then wow so so just get a pair and uh and to bring folks that just joined the stream up to speed you went ahead and as you're demoing the new features uh the preview features launched in admin ui which is the ability to have a storage bucket for files and then in addition browse those files you went ahead and created that there then you created a react frontend application just mpx create react app i think i saw yes exactly and then what you're doing now is through the admin ui you got the instructions needed which seemed like it was just like a one-liner command to bring in your entire back-end infrastructure from the cloud into your react app is that pretty much what happened yeah that's exactly what happened i go through it so fast because this is just like such a built-in process for me now because this is just such an easy thing i don't even think about i don't even think i need to explain it anymore because i think it's so easy so thanks for walking through a little bit more slowly and these prompts that are showing up on the screen these look familiar these look like amplify in it when you when you first start up an amplify command yes so this is just asking me for what is my configuration like for my local development what is my default editor i want to use what language what framework am i using to build in as well as the particular commands i want to use for npm start and npn build or whatever i just breeze through that really quickly but i'm staying on this page so you can take a glance this is the configurations i'm going to be using so it's a react application using javascript i love my visual studio code another great microsoft product i don't think i'm allowed to plug this here so i didn't say that but then all the others i just keep as default of course it's okay it's open exactly i always say yes to do you plan on modifying this back end it makes me feel smart but also it generates a couple more files if you're curious about what's happening in the back end you can always take a peek into your amplify folder that's generated after you've called amplify pull so once that's done i'm going to hit enter and it's just going to go through the rest of the process of getting the updates and getting whatever other files are needed so i have my visual studio code already open and this is already set to directory of my auto gallery and since this is done you can see there's an amplify folder here if you were to expand that you can see all of my backend including the storage i just created is stored in here as whatever kind of like json files that you want if you want to look at it and understand how does this actually work what's actually happening with amplify so even though we like to do a lot of things for you the developer so you don't have to worry about it if you did worry about it you still have the option to kind of take a look in there can you bump um vs code yes definitely maybe one yeah that's good okay cool so for this demo i'm going to take advantage of the amplify ui components for the uh the react library and this these components make my demo so easy it's almost like a little bit embarrassing and i like hope you guys won't laugh at me but it's like it's really very easy first thing i have to do is easier i'm sorry how dare you make our lives easier i know i'm so sorry i just want to create a gallery and it's super simple to do with amplify so first thing i'm going to do and i'm not doing this like completely sequentially but i want to do this because it's going to take a little bit of time is i'm going to yarn on aws amplify at aws amplify slash ui rack so i'm going to add in the ui react components that i was just talking about this is going to get all the necessary packages that i need so i can actually take advantage of what i'm going to show you next for the gallery i'm going to create so everything i'm going to do is going to happen in my app.js and the first things that you have to do is okay i've connected my local development with amplify by importing all these amplify files but how do i make sure that my app is actually speaking with those files i'm going to be importing all of these uh amplify necessary imports that i can talk with files i'm just going to paste that in here and i have a little cheat sheet in front of me but we can take a look here exactly what's happening so i have my import amplify from aws amplify and then aws config so all the settings that i have that are necessary for my aws to actually work that's coming from aws exports the ui components i was just talking about i'm going to be pulling amplify s3 album from this yarn package that i'm just installing right there and then last but not least once you've imported everything you need amplify.configure if you saw the last demo i did with kyle i told him how one time i spent like six hours debugging my app because it wasn't working and all i did was forget this line of code so don't forget to subscribe don't be me it was really embarrassing once i found out but yeah that's the kind of mistakes you still make nowadays so that is all i have to do to connect my application to my amplify backend now i'm going to work on building my gallery so i can show off those otter pictures on my website so i have all this fill code here that i'm going to go ahead and delete just keep my return statement of course and like i said i have not ever seen this uh amplify s3 album thing so i'm like getting i really need to have my mind blown right now because i've seen the authenticator that michael did the other day and oh my goodness it's kind of yeah sort of ridiculous what can be accomplished in so few lines of code yeah like i said we're going to implement this gallery and don't laugh but all you have to do to implement this gallery is add brackets amplify s3 albums no way that's all you have to do i made this demo really easy i didn't have a lot of time you know i just wanted to show off how cool oh my goodness if this works [Music] because i can just make sure people like really know this is an otter gallery i'm going to go ahead and save this and tab this in before someone yells at me yeah that's it guys so why don't we go back to our terminal and just go ahead and do npm start i'm not gonna lie these past couple of days js has been very compelling anytime you want to come over to to the light no dark no man so as my local host gets spinning up still taking some time to load what should happen is that i see this amplify pre-built s3 gallery populated with my four very cute otter pictures as well as the option to actually upload files and i don't know if it's me or if it's just because it's end of day but everything's been taking a really long time when i'm running stuff on my computer right now this this is the way of live streams yeah this is like i hope the suspense is killing you guys there's no need for this twitter poll [Laughter] oh yeah with those options i'll accept it [Laughter] i really don't know why this is taking so long actually did i do something wrong i don't think so no it's usually when when your computer's streaming uh screen sharing stuff just seems to slow down all the power that's why i should never stream should never do live demos because this kind of stuff happens yeah this is kind of ridiculous if we were to look at um and you could say on the screen while we wait for it to load but um when we were setting up the s3 bucket in the admin ui um you had uh guest access enabled right and then if um if guest access wasn't enabled then essentially the album i'm assuming probably wouldn't load because yeah exactly because then you wouldn't have been signed in in which case you would probably just need to add like three more lines of code yeah authenticator thing and then exactly you'd essentially be able to sign in and get going yeah exactly so i wanted to make sure for this demo that i did enable my uh guest permissions and you can go back into storage so i can stall a little bit you can see my guest users is marked as able to view so guest users can actually do whatever files that will be surfaced if i did have this disabled then once my gallery eventually loads if i didn't sign in if i didn't log in as an authenticated user you wouldn't actually be able to see any images in front of you like kyle mentioned it's super easy to add authentication to your application um it's literally just you import authenticator and then you wrap your export into like an authenticate thingy bracket i'm like as a pro streamer if you guys can't tell but yeah it's like ridiculously easy as well i'm just noticing there um on that on that last tab you're right in the admin ui there's um special attention to the the language that we use where it says set authorization rules and it's uh upload view and delete as opposed to what you would see in like a standard documentation of like create read update uh delete i think that's really cool that we we really just take sort of the nuance out of it and we say no like if you want to just upload um check this box as opposed to if you want to create or put or anything like that i love those those small little details there yeah exactly so one thing we really want to enable with the admin ui is not only make the lives of front-end developers easy but also to make the lives of non-developers easier too so if you end up deciding hey for this project that i'm doing for a client who's running their own blog or like real estate firm or whatever i want to set everything up but i don't feel like being the one to upload all the pictures all the time you can give your client access to the admin ui and with this new file browser integration they can simply go into and see an interface that they're very used to because they've used probably google drive or whatever before and they can upload their own real estate house pictures as long as you like kind of tell them what folder you're supposed to put it in but yeah this makes it really easy because an average person wouldn't understand what credit operations are we just wanted to make sure the language was nice and simple for those people yeah like read what do you mean read a photo what are you talking about yeah exactly okay so i am extremely upset because this is not working and i don't really don't know why i do believe my code was like all good it's just my local host not um booting up but i wanted to show you here again very simple lines of code if anyone sees an error please do yeah they already control seed and restarted oh cool attempted import error not exported from aws did i not do the right thing okay so we have s3 album creator react app i've pulled you guys saw me run yarn ad right yeah you ran that um chad is helping us out they're saying that even if you look at the component on the docs site it is not gossip just to make sure can you check out your package.json let's see oh man to find it on a live stream it's intimidating okay let's see so i have my auto gallery i'll tell you about intimidating michael just had problems the other day too weird i had problems the other day stream yard actually the the thing that we're on right now is actually down at the end of my stream i also ran into technical difficulties on my m1 computer oh no don't say that i'm trying to get an m1 you can't not sell the m1 don't talk to me don't talk to me about anyone so because i wasn't able to no it's all good some help in the chat here um if you import so so renee's helping us out shout out to p.m on the amplified team everybody uh the like this yeah okay let's run this one more time but it's not it's the older component i think uh let me be quiet we'll see if this works because like yeah it's just s3 album if this doesn't work i wanted to flash a screenshot of the i would art say arguably cuter gallery that i've created it's the um shebai new gallery as opposed to the otter gallery this is what it would eventually look look like so you can see it has a very simple s3 component it's just gonna show your pictures super automatically you didn't even have to like create the padding or the divs or anything in between that okay meanwhile back at the barn local host is spinning up again and again it could just be because i don't have an m1 i wonder if my manager is watching this stream he's either going to fire me or he's going to get a new computer for me well i vote the ladder i think i think i'm going to go for the m1 in that case yeah i think so too and let's just wait and see if this works does anyone else have like the trigger finger of like i just want to constantly control c control r until it actually works it's my otter gallery guys and if we just give it another second thank you renee it was a legacy after all my mistake was the code snippet there but like you can see i simply had this one line of code the amplify s3 album and now i have my full gallery of other pictures here so you can see each one of them is very cutely presented and i didn't even have to do any kind of configuration with actually setting it up in this way so really it took me just a few clicks to upload my let's get rid of this page of shame upload my pictures into the file browser just clicking drag it in there and then i added you know arguably just like five lines of code i didn't even have to add an editor i just added the amplify s3 album i finally got my localhost to spin up and now i have my gallery available i think that's so so cool and if you were to add another photo uh through the admin ui so mimicking that client scenario your client comes in here and now it's not all about otters now now they want some shiba news oh gosh actually how many pictures of it do you mind anna if we if we mimic that out what if i pretend to be the client yes my gosh yes so michael's my client i've created my admin ui back end and now i'm going to invite him into the admin ui so he can actually play around with it as well so we're going back to the aws console and i'm in my actual application so pre-invent demo i'm still in that app i'm going over here to app settings and clicking on admin ui management from here i'm able to invite other users to join my application can you do my gmail you have a gmail is it the same okay thank goodness there you go i thought you only have an amazon email do you not live and die for amazon so i'm giving michael and giving michael full access to my admin ui backend now and he should be receiving an invite in just a couple of seconds and with that he will actually be able to access the admin ui himself so is this my cue to stop sharing are you telling me to like get off the stage i'm super excited one second here sorry about the technical difficulties folks but you saw it got debugged pretty easily and we do have a great community here at amplify so if something like this does come up while you're writing your code uh feel free to go on our discord shot or also on our github repo and just file an issue there and we'll get back to you as soon as we can well first of all no need to apologize for all developers here right we're all here we know the realities but on on top of that if you didn't have technical difficulties then you missed out on your rite of passage and you just had your right to passage for sure you are officially a streamer so i'm going i'm gonna go ahead and uh in the span of the couple minutes we have left so i'm pretending to be the client here uh anna's already set up this amazing full stack application to view these great animals and i just got my my invite to the project uh she went ahead and did you give me full access or member access i give you full access so you can wreck havoc yeah i'm gonna say real world you can you can scope that down to just give me like just member access but this is okay because i'm gonna wreck the world um so i'm gonna she sent me this invite via email as you just saw i'm gonna click this link and the cool thing again this is me being the client not having an aws account uh is that i can come up here and put in my email the temporary password that it gave me and then it's going to be like hey put in your new password yo what was that shortcut that you just did at oh yeah i scope all of my my emails to the at symbol so at is personal three ads is business four ads is amazon um so here's another cool part i just gave it like a super weak password and it was like no i'm sorry dear client uh that's a little too garbage you have to do something better than that so i'm going to pick a different one here and from here i now have access to the aws account not the aws account but the aws backend that anna just created for me and so i can go into the storage area and she's never had to share credentials right all she had to do is just give me the invite and while i'm in here i have since i have full access i can go ahead and change those permissions if i wanted to or i can do the reasonable thing which is add those images here now walk me through here file browser once that loads up and then here are the other pictures and then i could add more here's the scary part uh what images should i upload this is where we get to see all your universities upload a picture of himself put this off screen well you can't sorry that's only done [Laughter] oh where is it oh it's in the computer file that would be your navy scheme oh my gosh where is i know you want someone to bring this up that superhero picture of you i mean that beard i mean this is embarrassing yeah i have a couple of uh me dot beards in in my wild story [Laughter] um where'd my where'd my picture go do i have to refresh oh did you just click and select and it didn't upload oh my bad i i think i might have not accepted it oh here we go one more time all right one time for the one time meet up magnolia upload and oh bug okay see this is why we're in preview it's a video preview but that would upload and then we would go ahead and um and it would just refresh right i would refresh the screen and it would display in the web app yes exactly cool i like it what about this end what if i just deleted it here you want to delete your order um i should have looked at the other ones okay so we deleted it what happens when we i'm going to stop sharing my screen and we go to yours no just go to localhost 3000 on youtube so i just refreshed my page and my otter number four is gone i'm very sad about that and in the web app do you still have it running so if my web app oh yeah i stopped my local host because i connected to github you guys can watch me wait for my local host to spin up like for a million hours again okay so while we wait for that i'm curious so so and i have a question now we know that um this is just like right off the presses right like brand new still in alpha and um i already have an existing project that is currently using the storage category how do i take advantage of this new file browser like am i do i just need to go to the admin ui and bam it's already there yes so like you saw admin ui is available in preview and it's tagged as such in your nav bar so you just have to go if you already have an already existing amplify app you can just go and enable your admin ui otherwise you create a backend go to your admin ui and then you should just have it available to you easy peasy just like that and file storage is now available in all of our amplify regions as of today so please do go check it out so the one thing upset about those we didn't quite talk about extensibility i don't know michael if you have time to split that no i think this is this is great i mean being uh we we've talked about you know what the possibilities could be from here and it's that if you wanted to pull this application down into your your local file structure you could absolutely do something like amplify add override or i'm sorry amplify override storage and add whatever custom resources or policies you wanted to to contribute to your storage bucket and then push those back up so it's a it's a full pipeline with regards to what we've talked about earlier this week and having the ability to kick things off from the admin ui instead of the cli is just another piece of the puzzle there that i think is well welcomed yep and as as you start using this in your own workflows if you do find something that doesn't seem to work as expected make sure you file uh file issue on github so that the team is aware of it you know um then anna will be able to find out hey this isn't working and you know take it back to the team and get it all squared away yes perfect so you can see that auto galley has three pictures in it now so that was a success michael has successfully screwed up my otter gallery by getting rid of otter number four the third one is like why friendo awesome no i think this is this is really fun i think it showcases the direction the right direction that everything is heading um aside from that kyle you want to go ahead and take us home i got a little one that uh wants to say hi yeah absolutely so thank you everybody for uh joining us today and a huge thank you to anna for um showing off this brand new feature where we're able to go into the admin ui check out the file browser and you know manage files with that so thank you anna make sure you follow her her her handle is right there and make sure you come back tomorrow for the closeout of um the week of extensibility so thanks everyone and have a good rest of the evening thank you

Channel: Focus Otter

Views: 82

Keywords:

Id: _1ZNzsj_GxA

Length: 59min 17sec (3557 seconds)

Published: Fri Nov 19 2021