Full Introduction into Flutter Amplify - Amplify CLI - Amplify Authentication - DataStore

hello my friends and welcome back to another episode of flutter explained today we want to talk about aws amplify that tool allows us to create somehow like firebase a fantastic backend as a service with a different tools with for deployment for development and for anything else and we want to take a look into it what service it is providing already and how we can use it in flutter aws amplify is an aws service that means it runs on the aws cloud and this is already the first very large difference between firebase and aws amplify because both of them are backend as a service so what is in a back-end as a service it does all the heavy lifting for us that we usually do in our back-end for example authentication it takes care of storage data storage also possible is that you have the possibility to make push notifications so with all these in mind you can create a whole backend that your client if it is web desktop or mobile can use so the flutter sdk for amplify has been released this year and i just wanted to take a quick look how far it is already don't forget this is an alpha version so it is very early in the production so you shouldn't use it in production mode quite yet because a lot of things can still change in the api for flutter amplifier just to keep that in mind okay but why you should even consider amplify over firebase because firebase already offers you all the services first of all if your company is working a lot with aws they would be very happy if they can still stay in the same ecosystem so that's already a huge benefit right if you know already aws and amplify you can use all the services and smarts that you have there without having a concern to change to firebase another very big important addition here is the amplify cli and the amplify cli has some very interesting features for us that we want to take a look into for example we can configure our amplify storage directly from the cli locally and push our changes to the amplify cloud also if we have made changes in the cloud we can just pull the changes and have them locally additionally we have the possibility to create code for us for example all the configurations and stuff will be done via the cli also what's possible is to create models for us in amplify so all these benefits are in this amplify cli which makes it quite special but before we jump now right away into the tutorial please check out up there the video from my friends from fireship who created a fantastic comparison between firebase and amplify or aws services they go into detail but not for flutter so i would like to cover that part so if you are interested how to implement the stuff in flutter let's stay here and we do it together alright so let's start what can the app do for us that i create as a demo today so here you can see our blogs app for today we are able to register our account now we get a little snack bar with registration complete we receive now a confirmation code as you hear now here in the email we can see the confirmation code that aws amplify send it to us so i can enter that here we press confirmation as you see confirmation completed and we got logged in now we are able to create our first block title with our post title and if we press now add block we have a block created with our image and text if we go back we have the possibility to log out and log in again so that's it what we want to create today that is data store and authentication of aws amplify in the beginning of the video in the introduction i told you already that amplify is actually a container for multiple services so for example the authentication is done with cognito and this is this service here so you can see that there are tons and tons of services in aws cloud that you can use and amplify works as a wrapper and helps us to manage that easier alright if you start with the installing of amplify you will come to this page install the amplify cli you will find all the links down in the video description here you have three options first npm installation curl with mac and linux and curl with windows choose what is for you preferable and use that in my opinion i use at the moment curl for mac and linux i go into a terminal and execute this bash shell so what happens if we install amplify cli this will take a second all right please make sure to have administration rights on your computer or use sudo command if you cannot install the amplify cli like i did now so now i can check if the amplify cli is installed by just executing amplify and as you see now we get all the commands that we can execute within amplify fantastic with that the cli is already installed and we are able to use it so let's clear that out and the next point starts with our flutter project for you you can just create a new one or take our project that we created with the tutorial branch to begin with we want to go to the amplified tutorial folder where you have your project your flutter project as you can see this is now our demo folder where i am currently in the tutorial branch and here inside we want to be in a terminal now we can say amplify in it and here we get now asked a couple of questions like for example a name the dev environment which default editor we use so the ide i choose here android studio which framework we use which is flutter and where do we want to save our configuration files and i just keep that in lib so it will take now a second and asks you to authenticate with aws we use the aws or profile and as you see now we get some information here we choose default and as you see now it initialized our project in the cloud so what does that mean it will push now the information to the aws cloud and creates their own project we will see that in a second so now you can see your project has been successfully initialized and connected to the cloud if you cannot do that you should call first amplify configure where you have to configure your user account in the aws cloud which i already did and i'm logged in so for that i can see now my aws amplify project as you can see we have created already quite some but the amplified tutorial is the newest one and if i join here we can see that the deployment is completed today with the time so that happened thanks to the amplify cli i will click now here on setup admin ui just to make us the live a little bit easier and press here enabled with that we get now an amplify admin ui where we can configure our backend in the cloud very easily we can see that in a second so now that we have the admin ui enabled now we have the possibility to go back to our project up here in all apps and press on open admin ui now we jump right into the amplify admin view where we have the possibility to set up everything like for example we can manage our data model we could also set up our view edit app content where we create content for our app and enable the authentication which we want to start now so we could now do everything here inside in this admin ui everything is possible here okay because we executed amplify configure we can now see here that we have to change some stuff first i press enter because i'm already logged in now i choose the region for me this is europe central but you can choose whatever you like you can specify a username that you want to give to an admin access for amplify i just take this one and you get redirected to another page from aws where you want to create a programmatically accessible user so i just keep the username here we just say further and you choose administration access and you just say further and here it just asks you for a key we can just skip that and what you can see is once more everything that you have created so if you now create this user we have the possibility to get this access key or access id sorry that it is in german but it's the same thing and you will get asked here if we press now enter for the access key id which is that one on the left side here and then we have the secret access key which we want to access here so if you edit both of them we have also the profile name and now we successfully created a new user for this amplify account so if the further step or the step before didn't work for you now it should work so if you want to do it now amplifying it should now work in my opinion i would like to add now the authentication so amplify add off and as you can see you get some questions asked again like default configuration we want to use the email address do you want to make additional settings i say no to that and with a second we are finished here and we just say amplify push and what happens now is thanks to your authenticated user it creates this authentication service directly in aws for you so this update will take again a second we see us in a sec while this is working you can see here that the deployment status in the cloud has changed to provisioning app back end that means it got an update from the amplify cli to the cloud so after some seconds we finally managed it and all resources are updated in the cloud that means if we join now here back again you can see the deployment is complete and if we open up the admin console once more we will see now that here at the authentication part the stuff is deployed so we can view our authentication settings interesting enough amplify don't allows you to manage all the authentication possibilities that you possibly have so if you are in the admin ui you probably will not see all configuration possibilities that aws cloud delivers you if you now manage to go back and jump here into actions view detail you can see up here the authentication part and what's very interesting here is view incognito behind the scenes instead of turning on the authentication in amplify you're actually using the cognito service of aws and here you can see a lot more different configurations that you can do so keep that in mind if you are working with amplify that amplify is always just the wrapper all right but what actually happened now locally on your client in the meantime we created an amplify project that means we initialized amplify so you get an amplify configuration and if you click in this file amplify configuration you will see already that we have a user agent version authentication credentials plugins and so forth and so forth and all this stuff is directly managed with amplify also what you will see is the amplify folder and inside of the amplify folder you have the backend you have a config and all that stuff is created for you in order to work with amplify so you don't have to take the heavy lifting of configure amplify yourself everything is done for you directly inside of your project that brings me to a very important point of amplify amplify at the moment works only with version 11 in ios which you can see here and with the version of min sdk of 21 in android so keep that in mind you have to update for that the pod file and the xcode to in order to work with these versions so in order to update that the first solution is to go to the pod file and here inside you uncomment the first line and change that to the version that you want i update that now for ios into the level 13. the next step is we have to set the deployment level for the xcode for that we say right click on the project press flutter and open the ios module in xcode as you can see xcode is opening up and here in the runner we can find the project runner you can define in info the ios deployment target for me this is already 13 for you this is probably nine so you have to upgrade this one at least to level 13. additionally i found an issue in an amplifier on github that told me that i had to update inside of the post install installer this section here so please make sure if the build runner is not working for you in ios that you add this part here okay now to finally start with the implementation of the authentication without everything in the configuration let's start at our favorite place the pubspec.yaml we have to add of course a dependency which is the amplify outcognito as you can see here the version number is lower than 1 which means at the moment 0.10 again the warning this is everything in very unstable alpha releases so that means at the moment i wouldn't recommend you to really use amplify in a production ready flood app besides of outcognito we will also need the amplify flutter dependency so let me add this one too now we do pub.get and receive our latest dependencies now that we have the latest dependencies and are ready for production work we can now go into our main.dart okay in our main.dart we want to configure amplify i already created there some possibilities so one option is the widgets flutter bindings ensure initialized and after that we configure amplify for that here we have several to do's the data store will come next when we want to save and store data on our client and loca on the server side but for now let's begin with adding amplify odd cognito so let's start by initializing amplify out cognito creating a new element this is the auth plugin now we have to import amplify configure and here inside we want to pass in the odd plugin alright so now we want to configure amplify for that we call amplify dot add plugin and here inside we want now to have the amplify auth cognito cognito and initialize that perfect because we want to have multiple plugins later i already changed the method to plugins and pass a list inside and with the first plugin now we can remove that we can remove this with the odd cognito the next step is to configure amplify itself so for that we want to have a try catch phase here inside of this try phase because it is not allowed to configure amplify twice we want to do it with a try catch and if we try to configure it twice it should throw an error make sure to check out this github issue in the github issue i already figured out at the moment there is a problem with the hot reload so in the hot reload we try to configure it twice and we throw an error and with that amplify gets stuck all right so now we call amplify configure and in this configuration we want to use the amplify config if you ask now where this amplify config comes from this is inside your amplifyconfiguration.dart and all these configurations are now passed inside of this amplify configure i will also inside of this catch phrase i just want to catch it with the print amplify is already configured fantastic as always i was a little bit relentless and as you can see this is already a future but we don't really wait for something we have to await the configuration part here because this configuration returns a future and takes a second to be finished if we jump now to our block screen that you can find it was the first page that we showed you this one then you will find these three buttons for each button i created a function that is called unpressed which is first login register account and confirm sign up all of them have to be done and we want to implement them now one by one we will start with the register account because we don't have an account yet on our cloud while we are working here on our amplify project it would be fantastic if you could hit the like button subscribe to our channel if you haven't yet because that supports us as always and it would be fantastic to see you more often around here thank you for joining and now let's go back to our code i have already prepared you something so as you can see we take the amplify out call sign up pass inside the email and the password which are just hard-coded emails and password at the moment and this part here is quite interesting when we are signing up into the amplify odd we have to pass in currently a cognito sign up options this cognito signup options contains the user attributes which is a list of strings to strings we have to pass in the email twice because the username in our case is also the email that could change if we want to if we set up the cognito a bit different then the username could be a username and the email is at the email we could pass inside of this user attributes also a phone number profile picture and so on and so forth so keep that in mind the cognito sign up options are mandatory to sign up a user alright in order to test now if this registration has worked let's jump to our application or let's start up our application and press the button all right now we have here our app and if i press register we get the information register complete but what does that mean actually let's have a look inside of the admin ui so if we are on the admin ui and navigate to user management here we will find now our email address when we created the email and the status which is at the moment unconfirmed and as you hear it maybe already i got again a verification email so if we check the box here we got an verification email with the verification number and this is the second part that we have to implement by the way if you want to get rid of this verification process here i was not able to do it if you are able to do it please let me know down in the comments below alright so to confirm our sign up we go to our editor to confirm sign up method where we have the to-do also here i prepared already something and as you can see we call here the confirm sign up method we pass in the username which is in our case the email address don't forget that the confirmation code which is the code that the user gets sent via an email which we will add into our app so if we go into our simulator the confirmation code that we enter here will be this number and then we just if this is successful we log in and that should show the confirmation complete message of course this confirmation sign up returns us something the sign up result result and with this result we can now check if the result is sign up complete then we log in else we don't do it and the same thing belongs for the scaffold scaffold messenger to show the confirmation all right with that we have now the possibility to confirm our sign up let's check out if this works so i opened up our inbox where we see the latest verification number and we have the confirmation code so let's enter that one and press confirmation we can see logged in successful but something didn't worked out well so what i want to do is checking the aws part so even though we didn't get the result that we wanted that we are logged in we can see that our status of our email is now confirmed with that we are able to log in with our password and username all right we are now able to register confirm our registration and log in but the last thing is missing log out which is pretty easy so let's search for logout and in this case we want to await that amplify auth signs out and actually that's already it fantastic all right now we are able to manage our user controls we can sign in sign out register confirm the next step would be to work with the data store for that we will use the api key that amplify provides us directly so we will not associate our account with the data store in order to begin with the data store we start again in the amplify cli so let's execute amplify add api and with that we have to get again a lot of different questions that we get asked so we start with graphql we call the api name exactly amplify tutorial we will execute it via an api key as i said we will not connect them with the users we won't give a description but you can give here any description that you want like flutter explained api key how long should that last we will take 365 days so long enough i guess so do you want to add additional configurations no we don't um we don't have a graphql schema and here we will get asked for a schema template and surprise surprise there is already an option for blocks posts and comments which we will use here so after some seconds we get some more questions do you want to edit the schema now i will say no but you can say there yes if you want now we have everything managed and you get the next steps like for example amplify push and amplify publish all right but what did the amplify cli does for us so it created us a new folder inside of amplify backend api amplify tutorial and here inside we can find a different stuff but what we are interested in is schema graphql here inside you can see now our data model that we create for our um admin ui or for our amplify ui so all of these different things are now existent like a type of block a post and a comment and a block consists out of a name which is a string a post which has id title block id and block and a comment so all of that is created for us directly from the amplify cli in order to find now these changes also on the cloud we have to call amplify and now push again and with that we push our changes for this data model onto the cloud and we can see it then in the admin ui now after we have released everything we can see that there is now a created endpoint and api key both of them are very interesting but they are already configured thanks to amplify cli in your project if we head now over to our admin ui and check out the data or content stuff it will tell you that we need to first deploy once more so if you enable here the data store and deploy we will go further with that so let's do that and just give it a second to deploy so as i said again amplify is a collection of different services this time you can see that amplify create and update the aws appsync endpoint and amazon dynam dynamo tables if you are an expert in aws you will know them already but what applifi does it creates us all the data management stores that we need in order to get ready to get our data storage usable so after the second configuration happened you can go to the data modeling or content and the good thing is now you can directly see everything of your items here so if you go to data you can see your data models you can see that it has a name an id and so on and so forth the next step is to create models inside of our flutter app so thanks to the amplify cli we can execute amplify codegen models and what does that do is it will create us the models for blog post and comment so we don't have to take care of that so as you can see it's already run through and if we make that now small we will find a folder called models inside our lib we find block command model provider and post the model provider is quite special because it takes any kind of model and defines how they work inside of our application we will just use that once but we will see how it works so we are back in our pubspec.jaml where we want to add the amplify datastore so we can remove this and get started with pub.get so now we have the dependency installed in our main.dart we have to configure amplify and here we have now to make sure that we initialize also our data store so next step alright so now we need to initialize another plugin the amplify data store inside of the amplify data store we provide now the model provider that i told you about so here inside modelprovider.instance fantastic so now this model data store needs to be part of the app plugins and because that doesn't look that nice we could create variables for that for now that should be fine and we have registered our amplify data store with the app of cognito and with that the amplifier is configured correctly all right now let's have a look which tasks we have still open inside of our block screen number one would be here to import block as a list and if we do that we can import now the models from the model folder if we take a look here inside we can see they are equal to what we have seen in the graphql schema so we have an id a name and posts which is the reference to a post if we take a look into post we can see it extends also model it is id title block and a list of comments and if we check the comments we have id post and content all right with that we have created the structure and you can see up here this is auto generated so we don't have to change anything here inside what i usually do is make a right click on this models folder and mark this directory as excluded so that dart don't check these parts fantastic all right the next to do that we want to fix is this subscription part i added here a quite some code but what does that do is it just reacts on the different events that can happen on the data store so it's observing it which gets us a subscription and we listen to that and this listener just takes the event that occurs and change the block list or the list of blocks that we save in underscore blocks with the ad type with the update type or the delete type so that we see it on as a reaction directly what happens in the list so how do we do that we just uncomment it but you see there are stuffs still read like subscription event event type in order to fix that we have to import a specific data store plugin interface and with that we can see that these errors were getting removed so i can remove this to do and we are ready with this observe the next part is the init blocks so the first time when we load our app we want to see the newest blocks and this happens here so what we want to do is update our blocks with the newest things from amplify so we await for amplify dot datastore dot now we query for the block dot class type and as you see we pass in the class type of the block and with that we receive our blocks that we want to see fantastic of course we don't will see anything yet because the blocks are currently empty locally all right but now let's create a block with a reference to a post or better a post with a reference to a block so for that we have to create the first block for that we just use the class that we have and pass inside for example a name which is our block name that we have initialized as a block title inside up there on the state of the widget the next part would be to create a post which is a post class the post contains two things number one it will we will have to import it and then it contains a title for example that we can tell where we take just the post title that we have also as a state up there and we pass in the block and the block is just the block that we created beforehand so i just renamed that to new block and that's it all right but how do we save the things now we call again amplify data store and here we say now save and we pass inside the post and because we have to make a connection between post and block we first have to save the block good all of that has to be awaited for and with that we have saved the block and the post inside of the data store fantastic so now in our application actually we get now a problem because list of dynamic is not subtype of list block so let's restart our application completely to see if the stuff is working correctly we will be back in a sec all right so here we are we have our blog title which we can enter we have our post title and if we press add block we get our input as you see we receive at the moment an exception to be honest i cannot tell you why this happens i guess because i deleted the amplify once and it reinstallation reinstalled it but if you take this error there is currently an open github issue for that as i said we are here still in a very early release of amplify so yeah this can happen but now with that we are able to save our first block with our first post and if we go further we can remove that this is for the sign out and we check out for the delete command somewhere we have a delete delete fantastic and here we can now amplify.datastore dot delete and we want to pass in the block that we want to delete so and that's it already so with that we have already nearly every possibility ready we have the creation and the deletion as a challenge for you try to implement the query and navigation to a blog post and show the title at the top as we did it at the beginning and now head over to the other max to get some explanation on which one you should choose amplify or firebase but now let me play a little bit fortune teller after we have now talked a little bit about amplify how you can implement the crude elements the authentication and so on now you will ask what is better firebase or amplify well it depends of course but at the moment amplify is not that mature like firebase firebase gives you a lot of smarts easy to implement very easy to do so if you have a new app with no precondition i would recommend at the moment firebase if you have the possibilities of course this is also a decision depending if you like the google service cloud more than aws firebase is better and so on and so forth but keep in mind if you have already a project that works with amplify as a web project for javascript or for another project it is now easy to work with flutter in that context of course it has some children problems but with the time it will overcome these and will be as good as firebase so i guess it heavily depends on your case and on your use case all right now you would be able to use the amplify cli you understood how you can initialize your amplify project and push and pull changes also you understood how you can that amplifies actually a collection of different aws services and how you can use them we made an authentication and some data storage things fantastic thank you for watching until the next time see ya guys

Channel: Flutter Explained

Views: 14,624

Keywords: flutter, amplify, flutter 2.0, aws, aws amplify flutter github, flutter aws cognito, flutter aws appsync, amplify flutter graphql, flutter aws database, flutter aws dynamodb, amplify flutter medium, amplify auth flutter, baas, backend as a service, backend, service, as a, development, amplify cli, cli, easy, tutorial, learning, knowledge, programming, amplify baas, amplify cognito, cognito, flutter amplify, amplify flutter

Id: 1seFk3Fkuis

Length: 34min 26sec (2066 seconds)

Published: Thu Mar 25 2021