AWS Summit Online ASEAN 2021 | Accelerate your application development with AWS Amplify

[Music] hi my name's derek and i'm a senior developer advocate at aws today i'm going to take you on a journey of how you can accelerate your application development lifecycle so why is this concept of application acceleration so important today competition has never been greater in a world where apps are everywhere you need to stand out and to do that you need to delight users and to do that you need to get user feedback quicker so you need to release your app quicker but it also has to work we usually do this by minimizing development waste by automating our build and deployment pipelines and by spending less time creating non-value-add code like app scaffolding and more time in that next killer feature and we're going to do that in all in a few clicks more or less is that such a crazy expectation what if you actually could do this not only that but those clicks would be reproducible and served as a reusable template so you could deploy across multiple back ends and whatever your area of depth may be front end back end or even full stack across mobile and web you could easily build a powerful fully featured scalable and fault tolerant back end for your application well today i'm going to show you how with aws amplify so what is aws amplify well for those who haven't come across it i'm going to do a quick refresher amplify has been around for about three years it's a set of tools and services for web and mobile developers to build scalable full stack applications powered by aws that supports native android and ios web frameworks like react angular and vue as well as cross-platform apps like react native and flutter there are two main parts to amplify the first part is the open source part which is available on github so it's a great place to meet the community raise issues and even fixed prs yourself or there's the aws console part where you can host and manage your application diving into the framework part a bit more we have the cli where you can scaffold out your back end by generating cloud formation scripts and deploying these into an aws account and also we have client libraries which provide features and apis to talk to that back end from a choice of front-end tech as well as a set of reusable ui components therefore maximizing the code you don't have to write then we dive into the other main part the amplify console you could do things like connect up your source repository to create a static site generated with tools like hugo this will introspect your code and boom you will get a build and deploy pipeline behind the public url right away also the ability to manage and amplify cli created back-end via the services that have been created is available through the console so in sudbury amplify before this year's re invent looked like this where you could develop and add features what we call categories to your app like authentication authorization data store or predictions for aiml and the cli to generate and deploy the cloud formation templates the libs to connect and then create your ui then there's delivery pillar where you can view and manage the individual services created by this the cloud formation however when we listen to customer feedback there is an ask for two main things one it would be great to have a single pane of glass view into your back end without having to click into the underlying services and two it would be awesome if not every day i've needed an aws iam account access but could still work on the application back end so we listened and announced that reinvent 2020 was the amplifi admin ui it takes the acceleration capabilities already there and 10x is them by providing that single pane of glass into your back-end app and allowing developers without aws accounts to work on it this changes the amplify offering by adding a visual way to create those back-end services that complements the existing cli adds a new management layer we can control user access to your app add in a content management feature and the ability to delegate access to developers who don't have access necessarily to an aws account so that's a refresher over let's show you how to build something with amplify so what am i building i often go shopping and with a rough idea of what i need i frequently forget so let's build a shopping list management app to help me remember so here we are um at my shopping list app i've got visual studio code open and i have a little react scaffold that i've created with create react app if i then go in and try and create a shopping list i can do a create one here and if i click the add button it should appear as a list down here but i haven't wired up any actions it's just the ui if you look at the code as a typical react app with a app.js entry point and at the top of that app.js i've got some um code that i need to implement that are all the crud operations for this application so create create rate update and delete and that's what i'll have to go and implement as well as those operations i also have a get list get items call at the top of the app and i also at the minute it does nothing and i have two components here as well i have a component to actually add the the existing list and i have a component to show the list and to delete items from it and there i'm just showing how i have built that out there so this is the act that we're going to build today we're going to add features to persist it locally and we're going to um not only persist it locally but we're going to build more and more things with it and like any good software dev i have a backlog for my application first of all i need to add a data model and a persistence mechanism then i need to synchronize data across clients next step i don't want any just anybody to use my app so i need to add an author authorization and authentication layer then i need to access access to developers and content creators who don't have aws accounts to help me build it and then finally i need to add a building deployment pipeline and can i do it in 20 minutes well let's see let's go the first stage is to model my data and to do that i'm going to use a new feature of the amplify admin ui called the sandbox so let's have a look at the sandbox this is the amplify uh admin ui sound box you can get to it by going to sandbox.amplifyapp.com uh i'm showing you here and once you open up this page you have two options you can either host your web app like i mentioned earlier static hosting or what we're going to do today is create an app backend so i click get started and that will enable me to start my backend so when i click this i'm into the next page which allows me to either create data authentication or file storage features to my application's backend for this one we're building a persistence mechanism so we're going to choose the data version so we click in here and we're given a couple of templates that we can use for this example i'm actually going to use a blank schema so clicking blank schema will bring up the data modeling screen this is where we're going to build the data model that describes the data for our application i just closed this inspector panel to give me some more real estate and then on the left hand side i'm going to click add add model and this is where we're going to call our first stories model so i'm going to call this shopping list item because this is the items inside my shopping list so i give it a name when i create a model every i always get a field called id and then i can all add other fields so i need a name for my shopping list items so i'll call this item name and beside the name i can also give it a type so as well as strings and ins i can also pick scalar types but um for this one string is what i'm going to go with and then on the right hand side i can say the properties of it is it required and is it array so for a name is required i'm going to click because without any my shopping list item is nothing so that is the shopping list items model other things that i can do i can add a container model for this shopping list items called shopping list and i'll show you how to do that and add relationships so the name of this item will be shopping list again i'll get the id already created for me the next thing i want to do is give the shopping list to name so same idea as i did with the shopping list items i give it a name and then the other thing and is required and the other thing i want to do is add a relationship when you think of a shopping list a shopping list has one or many shopping list items so i'm going to model that relationship using the data modeling tool i can also have a one to one or a mini to mini but for this model it makes sense so here i am i've got my relationships they've all been automatically filled in for me with a shopping list id and i've got that relationship nicely modeled so once i'm happy with that that's great other things i can do i can share this model with other developers using this url so they can look at my model as well and i can also set it as a template so if people want to use it as a baseline for other models they can do that as well so i can do both of those things through this through this dialogue so once i'm happy with my um model i go to test and so here's a little wizard that takes me through the next steps of building out my data model i choose the platform that i want is it web cross-platform or even native so for this one i'm building a website a web react web app so i go next this is optional so i've already created my app my app already exists so i don't need to do this step so i can hit next next is i'm going to do two things i'm going to install the amplify cli and i'm going to pull down this configuration locally so i copy those commands across go back to vs code and paste them in into my terminal so the first one is installing the amplify cli so i can then run the clx cli commands to also configure back end locally and the second one is the amplify pull command so this is pulling down my data model it's generating the correct types for my schema that i've created so i can then program with it with inside my code creates a folder called models and inside is all my types finally uh what i need to do now is go to the next step and install the typescript library for amplify so i can actually interact with my models that have been generated so nicely for me and then import my amplify dependencies at the top of my app.js so once that's that's all done i hit next and start building out my crowd operations so again very helpfully the admin ui gives me the correct crud operations i need to use for for each so for the first one i'm going to do a create so i go over to the create tab i copy the code as a guide for so first of all i do the imports so i've got datastore so datastore is how i'm going to persist all my data and then the second bit is is a guide so this is how i'm going to implement data store to do a create so i'm going to add that into add item so although it's it's just showing me a way so i'm going to use my own coding standards and tidy it up a bit if you remember a shopping list item the only thing that was mandatory was item name so i'm removing all the rest of of the code and just setting the item name for this shopping list item so that's the create function done the next function i'm going to do is the delete item again i'm just going to code this in directly so it's in a weird datastore.delete and then it takes in the item id and that's it and then finally i'm going to do the get so this will get all um shopping list items that are currently persisted and it says datastore dot query is how we get stuff um via datastore and then we pass in a type we can be more verbose and get specific items but for this one i'm just going to get all of them so that's my credit operations done let's let's test it and see if it works so here we are back in my app let's create some test data test item one add and there we go my list is now populating test item two add so i've now got two items in my list one two now then i open up the developer console in chrome i go to applications i can ins inspect indexeddb where datastore is storing all my data so here i am looking at indexeddb and there are my two items persisted in the indexeddb in chrome and if i want to say delete an item let's see if the delete function works so i delete test item one refresh my database and then there we are i've only got one item left that's persisted locally so that's all working quite nicely and was really really quick and easy to do so that's my local data model and persistence mechanism sorted the next stage in my apps development lifecycle is to build an api and persistent mechanism in the aws cloud to sync any data stored across any instance of my application so if someone for example wants to shop for the same list we can divide and conquer the chore of shopping so here we are back at our wizard that we've seen earlier so to get the deployed account working this is simply click the button and then we choose existing aws account or a new one for this one i'm going to use an existing account i have and this brings us into the amplify console so for this i need a name for my application i need a region that i want to deploy to and you'll notice that appsync in dynamodb will both be deployed for me so this is how um datastore will then synchronize data between connected clients using appsync and dynamodb once that's deployed we will then be able to open up the amplify admin ui that's not connected to an aws account so the difference between this in a sandbox is you get more features if you look on the left hand side we can do things like data authorization authentication add functions a lot of stuff that we couldn't do with the sandbox our original sandbox that we created has now been locked down and you can only get access to my data model via this account so as that deploys and finishes deploying appsync and dynamo i can next step i need to do is pull it all down locally so i again i can develop with this configuration so it's handily displayed for me i copy it go back to visual studio code paste it in and hit enter so this will again pull down all the configuration that i need to develop locally and build out my application now that it is hosted on an aws account i choose how to configure my ide i choose what language i have i choose the defaults for my source directory my build directory all of that i can happily choose the defaults and then the final question has asked me do i want to um modify the back end with the cli well yes i do because that allows me to develop not only here locally but also using the admin ui so it gives me flexibility and a lot of different options to build up my back end so now that's all done and i've deployed to an account so if i do an amplify status to check what my local development environment looks like you can see that the api has been deployed so it's the graphql api there's the endpoint in anything sent to that will persist data into my dynamodb on aws now we have our backend deployed into an account let's test our data sync to see if we can share data between different connected clients so here we are back in the admin ui we can manage application content this is a new feature where we can create content uh inside the dynamodb that we've table that we created so i like cheese and crackers when i'm coding so i'm going to build some test data around cheese and crackers if you notice this can also take markdown so it can also act as a content management system and i'm adding just here crackers as well just to get some representative data so i can test my application once that's done i can bring up my um my test app which i'm doing now so i haven't changed any code you'll see that all the operations are there the only thing i've added is that data storage or query in the fetch data so when the the application opens it gets all the data available so if i refresh you'll see that it gets all the data available which is cheese and crackers now if i want to add additional items into that list say i get thirsty and i want some milk i add in milk to the list you'll see it's reflected in ui but not inside my application until i actually refresh it so it's me i need to update that so i get the update right away so how am i going to do that so right in the start of my app i'm missing a an observer so i need something to observe the data as it changes and fire an event so i go to the documentation for amplify i go into the libraries i choose datastore because that's what we're using i go to real time and then it shows me how to observe a data in real time again i just copy the code paste it into where it needs to go when my app starts and then use that as a guide to start then fleshing out how to observe so the first thing i need to change i need to change the data type that it's observing on so i need to observe on a shopping list item so i paste that in the next thing is to do is what function or action to do once i detect that it's changed so for this one i'm going to keep it really simple and when i detect the change to the underlying data i'm just going to reload everything so we get a the most up-to-date view of my data so i do that by just calling fetch data again see i've save that and then let's go back to our application and see if that works so now um we can update let's see if we update cheese today i feel like cheese slices instead of a full block of cheese so i'm gonna go to cheese slices hit save and you'll see right away that is reflected on inside my application so that data syncing mechanism is working really well other things i can change i can try and delete an item and see if that is also reflected so there we go i deleted milk and that's also been removed from my application so my data is in sync across my application which is great the next stage is to stop just anyone using and seeing my shopping lists so let's add some security into my application so again we're back to the amplify admin ui and we set up user authentication and user management where you can set up users and groups to use my application here i configure it to say the first thing i want to do is log in using a username i can also add google amazon off phone numbers if i wanted to i'm going to keep this simple and use username i can then configure a multi-factor so mfa decide how that would look does it use any sms does it use an authenticator app and i can decide what messages that shows and stuff like that then i can figure how people can sign up what details they need to provide to sign up and then finally i can define how complex the password needs to be when users are setting it all of this i can define including the the message as well that you get in an email or sms so if i hit save and deploy this will build and configure a cognito instance with all of those settings set i can then use to create users and authenticate into my application here i am now going to create a sample user let's give it a unique identifier it's derek give them a real username which we'll use to verify so it's that's my use that's my email and then a temporary password so super secret password 234 create user so now i've created a user in my pool that has access to use my application the next bit i need to do is i need to build a ui to challenge the users of my application so let's do that back in visual studio code i simply want to reuse one of the amplify ui components that i can just drop in this one's called with authenticator and it comes from the ui react libraries once i pull it in in an import statement i then simply wrap my app with the with authenticator component so it's with authenticator open bracket app close bracket simple as that and now i have a reusable sign in and sign up component that's ready for my application let's see what that looks like let's open up the application and here's the component all ready to go so let's test my username so it's derrick and password super secret password sign in it will ask me to change my password so another super secret password and change my password and then i can skip this verification step for now so now i can i'm signed in and only signed in people can use my app and the app still works and i can create test data and delete and create still works so that's authentication nicely added no problem at all and now finally let's wire up a building deployment pipeline for my shopping list app and give access to a team of devs to finish off the rest of the features so here we are in the aws console and we have an additional feature here called the admin ui management on the left hand side we click in that we can do things like customize our domain and what i'm going to do is add access control for my users so i have two types of access control full access or manage only i've already created a user and this with a valid email address and give them manage only access and here back in the admin ui you'll see that i have a subset of the features that i can use um with the manage only access i can create content and i can validate my add and remove users and groups so again this is a very high level access so if you don't need development access then this is a good one to choose but if you do need development access then i can change this user so i'm going to change this user to have full access changed saved once it's persisted i just need to reload back into the admin ui and this is what i'm doing now once i've re-logged in you'll see again that the fully featured back-end services that i can add to my app are all there and i can do so uh without access to the aws account i can also change the environments so from sta i can create a new environment based on the templates that have been created and i also changed my data model so fully featured access into the admin ui to change that back end finally i'm going to build my deployment pipeline so i'm hooking into my github repo where this ah where my code sits choosing the right branch once i choose the branch um i go next and i will introspect the code work out that this is react app give me a the right build file that i need to use i just go next uh you'll save and deploy and this will pick up pick up the code from my repo and deploy it behind a um a hosted and behind the url so there is my provision my builds my deploy all done and a verify step so that's my ci cd pipeline all done and dusted and that's it let's double check our backlog to make sure we've got everything so we've added a data model and persistence mechanism we've synchronized data across clients we've added in authorization and access to to allow developers and content creators without aws accounts to help build our application up and then finally we've added a build and deployment pipeline and we've done it in around about 20 minutes give or take let's have a release party so what have we learned in the last 25 minutes first of all not everybody needs an aws account to develop with the amplify admin ui you can easily also create and switch between environments you can build a ci cd pipeline in a couple of clicks and most importantly you have a single pane of glass over your back end services that allows you to iterate very very quickly and then finally the documentation is on point all of this from amplify that helps you remove waste in your application dev cycle and helps accelerate application delivery but don't take my word for it go build something more exciting than my shopping list app and here are some links to help amplify has a vibrant developer community i really recommend connecting into it via discord the link is here also keep learning beyond the summit with resources from aws training and certification for devops you can also explore labs white papers and other technical resources by downloading the aws ramp-up guides thanks for listening my name is derek bingham if you have any questions on today's talk do feel free to reach out to me on the socials and please don't forget to fill out the feedback and help improve future talks and topics see you next time

Channel: AWS Events

Views: 501

Keywords: AWS, Events, Webinars, Amazon Web Services, AWS Cloud, Amazon Cloud, AWS re:Invent, AWS Summit, AWS re:Inforce, AWSome Day Online, aws tutorial, aws demo, aws webinar, ASEAN, Summit, AWS Summit Online

Id: CYS4K741Tjk

Length: 27min 46sec (1666 seconds)

Published: Thu Sep 02 2021