Getting Started with AWS Amplify and Xcode 13 (beta)

what's going on everybody welcome back what's going on everybody it's ben welcome back what's going on everybody what's up welcome back what's going on everybody echo oh my god all right there we go so hopefully uh hopefully um you know we can go over something new today learn something new um had a little bit of a break from youtube wasn't able to get content out the way that i wanted to but now i'm back so yes we're gonna start off this month september with um a live stream covering getting started with aws amplify and xcode 13 beta in the previous betas there was actually a couple of issues causing like xcode to not be able to pick up um the different like the different dependencies that amplify needed so yeah but um we're going to be covering all that today we're going to get started and then based off of um anything that y'all want to see like um if if you want to take it a step further then we can you know we could cover that as well uh what's going on hakan and uh oh also anybody in the chat right now let me know where you're viewing from and what time zone you're in like oh well not time zone let me know what time it is for you i'm just kind of curious to see like where everybody's coming in from so with all that said let's go ahead and jump right in let's get started we're going to open up xcode beta to be honest i haven't been able to play with um xcode a whole lot um i haven't been able to code in swift a whole lot i've actually been kind of focusing on uh android development android a little bit i've been looking into jetpack compose a little bit and yeah i've been spending some time over there but we're going to be seeing a lot more swift we're going to see a little bit of flutter um a lot more android and things like that so oh we got 1 p.m which works out perfectly coming in from uh ilia i hope i said your name right raoul is in india at 10 39 p.m oh it's a late night but yeah glad to have you here hopefully i can send you off to sleep with some code in your dreams and then um what's going on hope i said your name right hi how's it going uh hakan said i got a lot of help from you while learning ios happy to help always happy to help um yeah in canada we have turkey it's 8 p.m in turkey so we got people all over the world which is pretty cool so i hope that y'all are ready to see some ios development that's what we're going to get into today like i said we're going to be working with xcode beta i'm going to show you exactly which xcode i'm using xcode 13 beta 5. this is the one where uh things actually started working again so in xcode beta 3 and beta uh 4 i think that there was some type of issue with um swift package manager like it wasn't picking up the dependencies properly but in beta 5 everything seems to be working um pretty well uh what's going on bellaposa yeah thank you for the welcome back it's been a while um but i think that y'all are gonna have so many more live streams right now um yeah i think i think that we're gonna be on a road to a lot of different live streams um not sure about video content just yet i've been having a lot of technical difficulties with that but yeah so let's go ahead and start off with a new xcode 13 project that's what we'll call this one um new xcode13 project call it whatever you want obviously and we're going to be using that new swift ui and yeah oh wow in vietnam it is uh 12 10 in the morning nice hope to learn more from you i'm always curious to find out like um i know in different countries uh whenever i ask they'll show they'll they'll say oh it's x time and it will be like it will be like um like the 24 hour count right like uh who said who said it hakan is in turkey and he said it's 20 p.m so i'm just curious like do you say 20 in your in your native language do you say like oh it's 20 like a clock i guess do you say it's 20 or do you um use like the am pm thing because in the states we use am pm am pm not not the not the gas station stop but yeah all right so let's make sure that we're running this on the right um you know target right we want to run this for our iphone 12 pro max and i want to make sure that we are on huh i don't see the the 5.0 or the 15.0 target but i'm sure that it's working oh maybe this is the wrong xcode no ios this should be 15 i'm not sure why it didn't work that was weird hold on let's go ahead and start this up again this is what happens when you leave for a while and you don't come back you forget how to do everything what's going on uh alexander from france what's going on yeah uh congrats for your tutorials thank you um haven't done a lot of tutorials in all in a while really want to get back into it i have a whole entire new format that's planned out but i ran into all kinds of issues and it stopped me from actually being able to put out more tutorials for y'all um flutter map yo kilo what's going on how's it going um yeah just here we're going to be doing some ios you're going to be looking at some native development today we're not going to go too deep into the native development but if you haven't touched it before then at least you'll be able to see a little bit what it's like especially now that ios development is geared towards uh declarative ui so if you're coming from a flutter background um you actually will be kind of familiar with some of the the ui code it's a little bit different but a lot of it is the same what's going on brandon from alabama nice i actually don't know what time zone alabama is if i had to guess you would probably be it's 11 15 right now maybe is the topic clear for the next is the topic clear for the next publication i don't know what you mean by that hakan could you be a little bit more specific about the next publication like what you're uh referring to all right oh 12 15. okay so two hours ahead of me got it all right so we have our xcode project open but this is actually not where i want to start what i want to do is i want to start by creating the back end so the reason why somebody would want to use aws amplified is because it helps you set up your backend environment it can actually help you with a lot of different things but um from a mobile developer's point of view you're only going to want to use aws amplify for either your back end so it's going to spin up an entire back end for you and handle different use cases like user authentication file management data storage things like that or you could use it as a persistence layer so as opposed to using something like um you know core data realm um or what's another one core data realm or sqlite then um you can actually use aws amplify as your persistence layer and what it's going to do is it's going to like just have a wrapper around i want to say it's sequel light and it makes things a lot easier than the sqlite library from my past experience with it so those are the two use cases backend or just persistence today we're going to focus on doing a little bit of back-end setup we're just going to set up authentication and set up a database because uh most apps generally need a back-end right um if you are currently working on an app and you do have a back end how are you managing that do you have a back-end developer that handles that for you um did you have to set up the back end yourself and is it like did you write it did you write the um your own code for the server or um like how did you get your back-end set up or are you using like some other uh third-party um like resource that builds the back-end for you something like amplifier firebase or supa bass or any of those other ones so let me know in the chat what you're currently using for your back end okay so like i said where i want to start is i want to start by building out the back end so that we can see how everything is kind of set up and then what we'll do is we'll connect our front end to the back end uh kilo have you considered vapor so i've actually used vapor for a long time not in any production level products but i've been aware of vapor since vapor i've been aware of it since its release but i don't think i started using it until i might have actually used it vapor one but for sure i started um using it i for sure i i used vapor too at the very minimum but i think i started with vapor one uh the thing that has deterred me from vapor was that every every year they would actually create um a new version right so it'd be version one version two version three the version four and every year the the framework the framework was just drastically different than what it was before so that's something that kind of deterred me it is the um it is the best option right now if you want to do server side swift development like if you actually want to have a server set up and um you want to use swift as your backend as the language that you code your your apis in i would recommend uh vapor i actually used to play with katura a little bit because it made it it seemed more swift-like than what the vapor framework was but yeah um it's it's it's a it's a great option it's like the best option that there is now for server side swift you can also do serverless swift which is something i could go into another day which is where where you can set up aws lambda function all written in swift so yeah all right so right here i'm at the aws dashboard i signed in let me show you what that looks like so i'm at the aws dashboard you can search for aws amplify and then um you will go to like this dashboard yours will look a little bit different if you never set up an account chris what's going on chris uh or are you i don't think i saw the first part of your message but it says or are you on this now because of the recent xcode beta version fixed spm related issues yeah so this was actually chris this is actually kind of in response to uh the issue that you had raised because um i was i don't think i was aware of it until you brought it up um but yeah i'm going over getting started with um amplify using xcode beta 5 because um it seems like they fixed some stuff but in the release notes of xcode beta 5 um they said that there is still some type of issue so there may be other there may be other packages that are affected but this one seems to be okay so let me see it was down here somewhere um but yeah it seems to be working uh properly now it's down after this one somewhere i don't know i can't find it swift package swift packages so known issues using swift packages with binary targets may result in a no such module error when attempting to import the module of a binary target so um yeah and you said that you had used cocoapods just like was suggested after beta 5 i switched back to spm no issue so far yeah so um i know that the i know that there was a problem um cocoapods is still something that you can use that's a little bit more reliable since um swift package manager is like still kind of blowing up and there have been like a lot of different um updates to xcode especially in this release but yeah everything should be fine now all right so we're in the amplify dashboard what we're going to do is we're going to create a new app backend and i'll call this xcode 13 test call whatever you want obviously and then what this is going to do is it's going to um actually set up an amplify app so right now we're not using any real resources uh it's just simply setting up a place to where you can start spinning up different aws resources that you need for your back-end so we're creating an amplify app that will live on like the aws back-end and this will be the the go-to place for whenever we're trying to configure anything in our back end and um what we'll do is um what we'll do is we'll set up our authentication and our um our data schemas using this backend so we're going to actually use a feature called the admin ui see this is easy to share admin ui access we're going to be using the admin ui because that's like the easiest like user like it has a user interface that you can like actually set up your schema and everything and then it will like you could pull that code and then it will like automatically generate uh code for you so it'll actually save you from writing a whole bunch of uh code what is the cost difference um between aws and firebase if you know so uh both of them are pretty much pay as you go um aws uh i i haven't checked the firebase pay style in a while i know that things have changed since the last time i used it like extensively which was like two years ago um but for the most part they're pretty much pay for what you use i think for amplify you're gonna only pay for the services that uh your app is actually using when it's using them so like if you need to have data management file storage um you know user authentication unless your app is actually being used for the most part those resources aren't going to cost you like hardly anything and then when when you do start like using those resources what's going to happen is you will essentially pay pay to play essentially right and um you would have to do your own research on this but as a general statement aws prices are extremely competitive um especially for at scale projects so like if your app was to explode with with a giant user base generally aws has like um a really competitive um uh pricing model so yeah but feel free to do your own research on that because it really does depend on which res resources specifically that you're using um and you want to make sure that you're always using the right ones the cool thing about aws amplify is that it sets up it uses the most common resources that are used for mobile and front-end web apps so you don't really have to know too much about the resources but you can still go into the billing and check it out now amplify offers like a 12 month uh a 12 month free tier where you could find out if you like amplify at all and then if you do you know you'll also be able to see what you would have been charged had um had your app or had you not been under the free tier and then you could kind of make a decision from there as well all right so we set up our back end and we're in the admin ui the first thing i want to do uh for my app is i want to set up a brand new authentication backend for uh for this app so what i'm going to do is i'm going to just keep it pretty default we're going to configure login we're going to use an email for the login it's the default one we can add login mechanisms like phone number we could add like social sign in we're not going to do any of that today but we definitely could we could even do multi-factor authentication so we could do optional or enforce and then you could you would like have to do like um enter in like a sms or like your phone number for sms messages once again we're going to keep it pretty default same thing with the attributes so like this is the stuff that you would want stored in your backend with your user object but what you need to understand between authentication and actual data storage is with authors with authentication this data is not necessarily easily accessible to you it's um it will be provided like you can access this data after a user signs in but let's say that you're you're on a social media app right and you want it to access the um a different user's email address well as the person that's signed in you can't see another person's email address because you're not signed in as that other person so think of this portion as what's needed to authenticate a user um what's what what would you want specifically for when a user signed in and keeping it in for the information stored with that specific like entity now if you wanted to see the email address of a different user or their username or any any of these attributes if you need to see like other people's information whether it be their gender name locale middle name whatever then that's when you would save that information to a database so that you can actually query that information so yeah a little bit of um a little bit of something just to understand um this is common in other uh other back-end models as well um but for authentication you're literally just saving this information to cognito and don't think of don't think of it as publicly accessible it's only accessible to the person that signs in essentially chris says not urgent at all i get you have your schedule but any thoughts on aws date time it keeps giving me a decode error even without using it at all no answer around that anywhere um we can look into that i can add that as one of the fields that we're about to set up right now um because i'm not really familiar with the the exact error um whoa 11 likes oh 12 likes okay okay keep the grade at work will dmu twitter insta could talk about uh yt tip and grow out yep all right later flutter map uh you sexy man thank you it's been a minute since i've been sexy that's for sure all right so while i was doing all that uh talking i should have actually deployed this because um yeah it takes a little bit uh to deploy but as you can see we have the password protection and all that stuff right here yeah akikos is the 12th like can i get a 13 though that's the real question sexy all right confirmed deployment our authentication resources are being um spend up for us spun up spinned up spin it up and um yeah so like i said authentication for amplify it uses um uh amazon cognito aws amazon cognito this is amazon cognito um and it will like create like the user pull and and the roles and things like that for us so it will be pretty easy for a mobile developer to get up and running with that now we can move over to our data model so let's think now um something that i personally need to build out is like a chores app so um i'm gonna create a chore model it's kind of the same thing as like a to do but i don't know it's a little bit different i guess because they're like repeated every day or something like that so a chore is going to have a name and it is a string and it's it's a required field you can't have a chore without a name and then um you know chris needs to find out what's going on with this whole decoding of the aws date time so let's make sure that we check that out um so we could have like um let's see uh we could do like a due date maybe due date um and we could do it as aws date time and it looks like you kept yours as optional so i'm going to keep mine as optional as well so yes completed completed time let's do completed time there you go i don't know why i can't think i had my coffee today i should be okay but you know sometimes sometimes the coffee just doesn't kick i guess it just doesn't kick it is what it is all right so we have the name and the completed time i think this is more than enough to get up and running um it was required but i don't think that mattered it shouldn't um it shouldn't matter but yeah let's make it required then um actually this should actually be um this would actually be optional in this specific use case like thinking about it if i was going to actually be building out an app this would be an optional one because you wouldn't be able to create a chore without without this completed time and obviously you haven't completed it yet so um we can add a second one which is going to be uh due date or due yeah date whatever but we'll also do this one as aws date time as well and um this one will be required so then we can check both of them so now we'll have name um completed time and due date uh and that will allow us to check the both the optional and the required due date just to make sure that there isn't a weird um a weird like thing with one or the other so this is all i'm going to do for my model i'm going to keep it relatively simple and we can just save and deploy now i just want to yeah let's just save and deploy and we'll do that so we have our authentication piece deployed as you can see a little green check mark up here and um yeah now we just need to wait for this data to be created so what we can do in the meantime while we're waiting for our backend to be our backend resources to be created because uh it's going to essentially set up aws appsync for us so that we can communicate with our backend or our database which is going to be stored in amazon dynamodb and um when we work with the libraries we'll be able to do all that so we're not going to touch anything amplify related right now let's just go ahead and start building out a ui so that we can get this sign up sign in and um and login feature going so first what i'll do is i'll create a new swift ui view and we're gonna just we're not gonna be making it super pretty today um i think i'm just gonna call it auth view and we'll do everything on the same page so we won't be making any super sexy apps like ooh but we'll be able to get the gist of it like we want to just take advantage of all the different functionality so yes let's go ahead and create an extension on off view this is completely optional some people like to have their view models as uh completely separate objects i like to scope them down to the actual view that i'm going to be using it for because in my experience i haven't been able to use reuse um a view model yeah all right so then let's go ahead and create a class let's see if i still remember how to do this actually so the view model and this is going to be an observable object like so and then from here what we want to do is we're going to need a couple of fields to hold the different information that we enter in so we're going to need a username a password and an email and um what else um a confirmation code so we need all four of those properties so we have a username that will be a string um let me think and they're gonna start off empty right and then we could just do this and we'll have a password an email address and then the actual um confirmation code like so so that covers that um next what we're going to need is let's see so we have each of these properties what we'll need to do is we'll need to um access them in the actual view so let's go ahead and have an instance of our view model our off view view model and we could do uh let's see how do we want to do this this is an state object um view model and this will be of type authview.viewmodel like so and um we'll just initialize it like so then what we could do is we could create a couple of different fields that will allow us to enter in the username password email and the confirmation code so let's see if i can still remember this shortcut where i can write on a couple of different lines at a time oh i do all right so let's see we want a text field and then the first property is what the placeholder i want to say and that's going to be let's say like username and then next is like something like view next i think is text view model oh no at view no how do we do this is it this view model dot username something like that hey i remembered it okay got the password email and confirmation code don't you feel so cool when you like remember that like how to do something as a developer i know i do i feel like a superhero sometimes not all superheroes wear capes yeah [Laughter] all right confirmation code all right cool now what we need are um two buttons so let's see we have a button right here which is going to be the sign up and the action will be uh let's just do it like this right now is that how you do it in swift that's dart this is swift all right i think that's what there we go all right and um then we have the uh verify or confirm confirm will this stream be uploaded connor oh yes it will most certainly will be it will be available right here on youtube or if you're watching on twitch just check out my youtube um and yeah you'll be able to catch this later if you need to if you need a piece out but if you want to stay and hang out that's also cool too so uh we got this action right here and that's going to be confirmed and then lastly we need another button that will sign in now we definitely are not going to be following best practices in this live stream we're just going to be trying to get the job done um and let's see if we can get this app running so that we can take a look at it this actually won't work because no none of y'all none of y'all pointed out that it needs to be in a v stack i don't know what y'all thinking needs to be in a v stack don't know why nobody wanted to bring it up but okay let's see how it is i'm on my own i'll code by myself pair programming y'all ain't looking out for me all right let's throw this in the off view real quick all right let's run it one more time let's see if we get our view back hides in ui kit oh man whenever i look at ui kid i'm like whoa this is different uh padding let's see how do we do this horizontal in here horizontal or level like this how do you do it again i forgot um it might just be horizontal and then 20. how do you do this extraneous okay so it's not like that just a comma kyle horizontal dot horizontal ah yes there we go is it horizontal 20 it has to be this there we go thank you connor good looking out man jeez it's a sad day when you forget when you forget your your your your ui apis uh spacing i remember this pair programming boo yeah all right y'all proved me wrong i admit when i'm wrong okay but y'all were a little bit wrong for it too all right it wasn't just all me all right so we got this all showing right all right uh let's see so we have the chore set up we have our authentication set up um we could uh take a look at users in here we could take a look at any content that was created in the app or we could create and see data directly into the app from here as well we won't be doing that um i want to see what happens when we go through the entire process using the ios app especially since we did have a problem that we're trying to find out along the way which chris brought up was uh potentially the dates so let's go ahead and so now that we have our authentication and our data layer set up what we can do is we can i'm gonna i don't know what this is but i'm gonna delete it there we go um so i'm going to actually start pulling this down to my local project so as you can see up here at the top right it has local setup instructions and what we what we need to do is we need to do amplify pool um and all this other stuff so you just hit this little copy button right there and it will have that command line in your paste board we're gonna blow this up i wonder where i saved it i think i saved it in my temporary document or directory so what do we call this new text code yep all right so go to the navigate to the root of your of your app directory and then from here what we want to do is first you need to make sure that you have the the amplify cli installed on your machine so you should be able to type in amplify uh version and that will verify whether you have amplify on your uh machine or not and you'll get a number like this if you don't have amplifier on your machine um aw uh let's see what am i looking for docs.amplify.aws if you don't have amplify on your machine you can navigate over to the amplified docs and then you could do a project setup and go to prerequisites and or actually could go to cli and then you could just do install amplify and i would recommend using this one this is the one that makes the most sense for us mobile developers our ios developers if you have npm already on your machine you could do that or if you're on windows or something like that and you are doing some other type of development you could do that one but this is the one that i would recommend you just copy this throw it into your command line and boom boom it's installed okay so as long as you have amplify on your machine you just go ahead and paste this in here uh that's not the that's not that's not what i wanted to do all right so um what was the other command it's under my admin ui bills this one this is what we want to do so we paste this in here we do amplify pool um and now i should be able to pull the project it's going to verify hey you're signed in making sure everything links up correctly do we have access authenticating you know security is a pretty big deal so yes uh then you choose your default editor i will be choosing xcode for this specific project we are it has um detected that we are in an ios project so it will attempt to do the specific ios setup and do you plan on modifying the back end yes in the future we're definitely going to be modifying the back end so uh would you be able to do a full course using aws and swift ui in the future there's literally none on udemy or youtube i've just been using your tutorials to understand it um yeah okay uh okay this is an excellent ques question connor i would love to do um i would love to do a course on it what would you like to build using amplify let me know that that's what i'm most interested in is like what would you actually want to build um in my in in the past when i have built stuff um i usually go for the social media app it tends to cover a lot of different use cases but um honestly i kind of get a little bit bored of building social media apps it's like something that i do the most but if you want to see something like that if you're interested in a social media app we can definitely cover that but yeah what would you want to see in a full end to end course currently trying to do stuff like storing images on s3 and caching those images and real time chat and all that crap but it's quite the headache it's a lot of stuff that you definitely have to take into consideration uh instagram instagram clone would uh is the best practical case wouldn't it offload maybe just a basic clone instagram twitter okay so the thing about the thing about making clones is that it's actually extremely complex which is why there's an entire team dedicated to doing it i've done it but it does get deep um so i'm hearing from chris and from connor that you know y'all would be interested in seeing like a social a social media clone my next question on that is because these apps are very complex right and there's whole entire algorithms dedicated to it to what extent would you want to see um like the clone like um what features do you need to have in like like try to be specific if you could if you don't mind on what you would want to see because creating timelines the same way that instagram and twitter do it is very complex like retweeting can be complex when you do things like like counts and making sure that you're doing that through the back end as opposed to doing like a easy fix on the front end um you're starting to deal with a little bit more advanced concepts like working with lambdas and stuff like that so i'm willing to do all this stuff it's just it gets very deep very quickly and the code that you have to write for it you are definitely a mid-level to senior engineer to be able to follow it so that's kind of what i'm curious to find out i'm stuck on firebase even though aws is a lot better only because i think firebase has better ui and documentation but i really want to move over to aws um would love to you know what um connor go ahead and dm me on twitter or on discord and um you know we could talk a little bit more about it um because i would love to know what why why uh the amplify documentation is not like up up to the correct standards i i need to know that um it will help me help everyone because then i can take this information back to the team we can get it all squared away um is there a way to install it on an existing project yeah so far everything that i've done so far right here is the same process that you would do on a an existing product an existing project akikos i think functionality and ui can be a bare bones as needed but focus around amplify features and functions especially around crud operation view states um etc very basic instagram upload posts fetch posts no need to do stories edit profile etc okay um that makes it a lot more manageable for me to do because when i was i was actually going to build a course on creating a twitter clone but when you start getting into retweets um and trying to make sure the the whole follow system is implemented this thing really explodes it's like whoa like there's so much there's so many concepts that need to be covered and taught and i'm and i have to go through it myself so i'm learning myself and then i have to break it down in a way that hopefully everybody understands it because well geez it's it's a lot like i said that's why there's whole teams working on these apps um i think amplify is freaking is a freaking godsend but there just isn't quality resources around making the best use of it yeah um chris uh also hit me up in discord um friend request um you know maybe i could work a little bit more closely with both of y'all and i can actually start getting some of these resources out that are the most needed um maybe maybe y'all could like be like hey um i don't know how to do this uh why does why does your documentation stop where's your video kilo what the hell um um getting rid of some of the responsibilities that i have at work that aren't related to content creation so now i'm going to be able to spend more time focusing on the content creation uh ilia says kilo if you can kid you give a good example of good uh pet project to showcase interviewers can't come with up with any idea um let's see so in the past real quick before i continue on this amplify back in in the past ilya what i have done is um i would only focus on like just a handful of like like two or three different um places that i actually wanted to work and i would actually try to build out a smaller version of their app trying to use the technology that they use on the team so let's say that you want it to work i'll actually give you an a direct example of what i tried to do so i used to work at a company called bird um it's an electric scooter company and what i did was i created a map based app using the same technologies that were listed in the job listing and i created essentially um a miniature bird clone and i actually emailed this guy i actually um brought that with me uh during the interview to try to show off and i was like hey like you know the idea was that i'm using the technologies that you're using i'm work i have uh i have something to showcase that is directly relevant to your company and theoretically this should show that i can learn stuff quickly because within the time that you responded and said yes we can have an interview and the time that we're i'm showing this off that is a short period of time so i can learn things quickly and build things quickly so that's what i would recommend if you're only going for uh like one or two companies the the good thing about doing that is that you can just add that to a port as a portfolio project even if you don't get hired at that company so yeah but now moving back over to this project we did the whole entire amplify pull which got our project set up in a local directory like all the all the stuff so if i just go ahead and do ls right here you can see that there's amplify configuration files aws configuration files everything with aws is like secure it can actually be a little bit uh hard to work around sometimes because like you might try to set up some type of feature and there may be like some type of security thing that you have to work through and set up a role and all this stuff and that's like one of the difficulties as a beginner with aws is understanding how to get configured and authenticated and all that stuff but anyways it sets this stuff up for you and then there's also this amplify folder it also created swift versions of our model so the chore schema and the chore object itself is now here the only thing that is different with xcode 13 beta is that i i don't think that it actually is able to set up your project properly so right here it does have the amplify models but in some cases it won't actually import this folder for you so um sometimes this folder will just be missing depending on how you set up your project um when you're working with the xcode 13 beta and probably in the future until um the amplify team is able to like really investigate the beta version and see what's different and why files don't always get imported so if the files weren't properly imported what you do is you go down you can't see because the little pluses is down there look it's right here it's right there you do the little plus you do add files you do add files right there i could have just like hit my camera but i didn't do that could have just done this but i didn't anyway um what you do is you go to your your project root directory you go to amplify you go to the generated folder and then these are the the the files that uh you would essentially add that have been generated for you and if we take a look um if we take a look at the chore we can actually see that we have the name the completed time which was the optional field and then the due date which we set as a mandatory field there's also more date times that are added because those are just like uh created and updated at those are fields that are automatically added and needed to keep your data in sync and know what the latest model is all right so now that we have um we've created our back-end we set up the the resources we're going to be using authentication and data storage right and what we want to do is we need to make sure that our app can connect and talk to the backend and the way that we're going to do that is we have to write code and we have to write code so that you know when we press a button it fires some code and then it talks to the back end right well in order to write that code we need a library um or an uh or like a package in order to talk to amplify and use the amplify uh libraries so what we'll do is we'll go over to the xcode project this is new and you have to go to the blue one um i don't know the actual uh terminology for these i guess this would be the project and this would be the target but go to the project one go to the package dependencies and then you click the little plus right here and this is how you add swift packages now now based off of what your history is you'll see a list of different packages here but to find any package that you're interested in using you just simply enter in the github url or git lab or whatever wherever wherever the package is hosted essentially the amplify ios one is listed on github and that's at github.com aws amplify slash amplify ios like this so you type this in um or you could go directly to the github place you could go directly to the github url and then copy it and paste it in here and then what you do is you do the add package from here it's gonna look at the um it's gonna look at github it's going to look into the packages.swift file and then it's gonna um read what is available in all the different dependencies that are needed in order to import this package into your project so once it's done reading all that you'll see that you'll get a list of the different the different libraries that you can actually import into your project amplify took a very modular approach this way you can use one feature without necessarily having to use the other so you only import the features that you're interested in using we're going to use the api plug-in that's what's going to allow us to save data to the device and have that synced with the back end we're going to use cognito auth that's what we're using for authentication datastore this is like the persistence layer that is on the device that works with the api plug-in to send data to our backend and we will also be using amplify um i think that one's automatically included whenever you do any of the other ones but i like to check it manually so you do those ad packages and then you'll see that they get added on the left side now you still get this weird warning right here i'm not really sure why but it just says that the the resolving package graph succeeded not sure why you'd get that um but yeah we'll see what happens when xcode13 is like you know uh the golden when it's gm or whatever golden master whatever all right so now we have the actual packages in our xcode project which means that we can like import something and then code against it just like we would import core core data or import ar kit or any of those right so we can import all the different libraries that are needed like we could import amplify like this or one of the awesome new features of xcode beta is like it's just like any other um uh editor now where if you start typing and you use autocomplete and hit enter it will import those packages for you so i'm going to create a function called configure amplify and what we will do is these are all throwing function functions so we're going to wrap it in a do catch block and we'll print the error like so um the first thing that we're going to do is we're going to add auth so we'll do amplify we already have it imported so we can do that amplify dot add and then we're gonna do the aws uh cognito let's see if it'll do it cognito uh you know it might not do it because um we haven't ran it yet let's see i'll do it for this one but i want to see if i can get um xcode to import it aws cognito auth plugin cognito off plugin like so and we're go oh you know what it might have worked but i didn't wrap it with a try that could have been that could have been it so and it looks like it looks like my x code has slowed down and it's not doing the intellisense thing so maybe we can't get it to do aws um the next one is api api plug-in ah it's not doing it hold on i really want to show you because it's pretty cool when it works but you know how xcode is it works when it wants to work oh another awesome thing you and your amplify team can do is push some good resources using new async await with amplify apis when you guys update the yeah so i'm actually thinking about doing um a live stream on that next week um it will be like impromptu um one um because i'm gonna do a live stream on something on monday and i'm gonna do a live stream on something else on wednesday i'm thinking if i could if i get time on tuesday i want to actually cover that and show you how to convert and write your own um async await for libraries that don't support async and await right now uh like amplify and you'll actually be able to get up and running with that ah i don't know why xcode is still like this i really wish they would stop adding features and just fix it you know that would be pretty cool um because it's always been like the same problems things just stop but yeah chris uh excellent point the the amplify team especially the ios developers have been like well i don't want to say especially because i don't i don't really talk to the other teams like that but yeah like uh they they are really on top of um like all the latest ios stuff it just takes a while to get that stuff implemented so open recent new xcode 13 project all right let's see if we could get like syntax highlighting back that's always like a good sign when you can okay so there we go now if i do the um plug-in all right so now it detects it and this i might mean like it's gonna import it i'm not sure but uh oh yeah we'll import the module so as you can see up here it's not imported yet when i hit enter bam it gets added like so it'd be even cooler if it was automatically um alphabetized but you know can't have the moon and stars you know cake and eat it too stuff like that but hey all right so let's go ahead and add our last plugin which is going to be the data store plug-in so that's aws data data store plug-in it it got imported up here at the top as well um yep and then lastly what we need to do is try amplify configure so once you add all the different all the different plugins what you want to do is you want to run configure and that will essentially um uh like configure amplify based off of the plugins that you added i actually forgot to add in some of the um the arguments so we need model registration station like this and then we also need a property called model so let models amplifying models like this and i'll show you this in a second model registration models like so all right oh you know what i shouldn't run it just yet because we don't have a print statement but if we don't get an error in the logs then we should good be good amplify come on now configured all right let's try that run that one more time and that's this still is not going to work because because i'm not calling it oh my god so configure amplify like so uh as soon as the app is initialized we're gonna attempt to configure amplify we wanna we want to configure amplify as soon as possible because um usually right when you launch the app you're going to want to do some type of functionality like query a database or something like that or maybe auto sign in a user and before you do that you want to make sure that amplify is configured since you're probably going to be using amplify to manage most of those things uh hump day kyle we understand it wasn't me it was hump day okay all right so now that we have amplify configured we're ready to start going um perhaps a tutorial on how to make a project that takes advantage of both datastore and graphql with handling custom schemas with datastore extra properties uh let's see handling extra property data stores extra properties oh yeah yeah i know what you're talking about okay um yes i will be covering that because it does get a little bit complex um you generally uh yeah yeah yeah yeah deleted and last updated and um modified ad and things like that yeah um yep i will cover that uh if you don't mind dm me on discord and i will make sure to capture that properly for sure um okay so now so now let's go ahead and see if we can start getting some of these functions into our off view and get this user signed up first and then we'll move on to actually saving it um something so let's see um first is sign up right and it's um it's kind of straightforward where you do amplify and then you you choose the category that you're going to use so we want to sign up we want to do user authentication we're going to use the auth category um so then we'll do sign up and now we need to provide a username password and some options so the username is just going to be username i think i want to say password is just going to be password and then the options we need to also provide the email address so that we can send the confirmation email so what we'll do is we'll say let um options equals off sign up request options like so we'll initialize this with the user attributes and we're going to do a knit uh email well let's hold up hold up because this is looking a little bit it's looking like y'all okay you know so we'll do let email attribute uh be in user attribute auth user attribute like this we'll initialize it we'll pass in the key it's gonna be the email we'll pass in the email that we're actually modifying which is right here and then we can pass in the email attribute to the user attribute like so plugin options don't need none no thank you all right clean it up so that we can actually see what's going on i can collapse this right side so we can see it all in one line right let's space it up a little bit because there's a lot going on right there um we want to have some spacing just so that it'll look a little bit cleaner do the options and then do it like this okay all right so um amplify doesn't support async and await but it does support combined um so if you wanted to use that you could i'm gonna opt for the completion method where you're just gonna still be working with a like a closure at the end but you could have gone with the combined route but this is a little bit a little bit more straightforward if you're not familiar with combine so then we get a result and this is just like any other swift result right you have the success case you have the failure case we switch on those we switch on results we have the case success and that's going to give us um sign up result like so we can print the sign up result and we can print the next step right then we have the failure case we'll just say error and we can print the error like so right simple straightforward now all we need to do is we need to tie this to a button so we have the sign up method we already have an instance of our view model up here we just simply tie it to the sign up action right here so we could do view model dot sign up like so boom and we're ready to sign up um let's go ahead and run that make sure that it works before we move on oh we're actually running out of time i have to get out of here at like 11 30. okay well let's try to do this a little bit fast shall we all right so i'm going to type in a username kilologo password is going to be password email is going to be my email and then we're going to clear this out and we're going to hit sign up i hate when it has trash logs so all right so let me see i think we hit an error did i not put in a valid email i think i did uh let's see let's see email i think that i did let's see okay all right so we're getting a lot of crap logs and i can't really see what's going on so i have a snippet for that um kilo logo hide unwanted xcode logs see os activity mode disable okay so what you could do is you can go over here edit schema you go to environment variables os activity mode type in disable and close and then we run this and chris said the username should be an email it says oh did i not set it up properly maybe the default is like email and i thought it was going to be oh okay right here i forgot to change this to user name okay simple fix i guess um kind of a bummer though that i didn't realize that but okay so username is supposed to be an email so we'll just do an email at hotmail.com uh password uh uh hotmail.com all right invalid uh make sure password is valid oh i guess i i guess i need a a stronger password huh one two three sign up um what's up with this i have never seen this happen before multiple frames huh uh make sure the uh invalid password okay well let's try our real password okay real pass um 246 exclamation point jeez huh invalid password what's going on with my password what's wrong with my password alright so let's go ahead and find out what's going on with this password and maybe i have the restrictions on the password a little bit too tight lowercase uppercase uh numeral and a symbol um eight characters okay okay so uppercase lowercase uppercase lowercase numeral and symbol that should be right unless um real pass and then uh 543 i don't know exclamation point i i guess not it should be it's like the one that's most accepted everywhere there we go um i just need to remember this password maybe what is up with this binding though i've never seen it never seen it do this um okay well this seemed to have worked so now we just need to add the confirmation code uh i probably should have taken more time to modify the password settings but i guess it all worked out in the end i mean realistically you should probably have a good password but i just didn't expect it to be on uh by default like so secure okay so then i got my confirmation code sent to my email all right uh we're still getting crap logs but this is from coming from the ui uh we're gonna confirm um but confirm doesn't do anything yet okay uh that's right so let's go ahead and create our confirm function so confirm and what we'll do is we'll do amplify auth.um dot confirm sign up and we're going to enter in uh the username and the confirmation code what's going on with this autocomplete it's just like not doing what i would expect it to do right now result in and then we'll do the same thing so switch result case success uh really looks like we're yeah um confirm result looks like we have officially ran out of our uh intellisense or autocomplete confirmed result i guess i'll just print that because i don't really know exactly what comes back right now off the top of my head failure and let air and we'll print the air and then lastly what we'll do is we'll just sign in so funk assign in amplify auth sign in and then we'll use the username the password which i really need to make sure that i remember that password or else i'll mess this all up and that suck and then um once again switch result case and then we'll do success let um sign sign in result like so and we'll print that sign sign in result because we're not getting the complete back no and now i can't even find it what is going on did i do too many there we go that's why just gotta put this all the way at the end that was the problem that would explain a lot all right so we should get some autocomplete back in let off error or we could just say error and then we'll print the error um could it be the button yeah so it could definitely be the binding error but i don't think that i did anything wrong so far like this seems pretty legit to you right like oh you know what it is it's this the published is it a caprocky that's what it is that's what it is my bad like i said this is what happens when you're gone for a bit you forget the little things yeah i was like what's going on now i don't even know if i know my actual password that's the scary thing so yeah 543 exclamation point exclamation point hopefully that'll be it um okay so then we do the sign in you put the sign in result all right so let's tie these two viewmodel dot uh confirm no confirm like that oh that's why it's like acting up view model dot sign in like that so we can run it again hopefully the password will be correct this time because if it's not i'm going to be stuck and that would suck all right at hotmail.com all right so i did r e o path 543 exclamation point exclamation point that's probably why i got the error in the first place okay the confirmation code uh i think it was 170066 let's try to do confirm all right it looks like we got done so our next step is done and then we do sign in and uh looks like we got done again what i wanted to do was make sure that we're signed in but i'm pretty sure that we're signed in uh last thing that we could do is just check our sign in status check status and we could do that with amplify dot off dot um fetch auth session like this i don't think that we need options i think we just need the listener what what what are you doing to me um result and then we'll uh print results i think we could just do that add another button and check status action view model it's all coming back it's all coming back to me now fetch or uh check status like so all right so i think with just printing the result we should be able to read whether we're signed in or not let's see it's a lot of stuff in there uh let's see success uh man there's a lot i mean i'm seeing all kinds so is signed in is equal to true yeah there's all kinds of other stuff in here security stuff but yep looks like we're finally signed in so now so so now what we need to do and i'm running out of time so i better better get to cracking all right so what we can do is we'll create a just a completely separate view for creating um or uh yeah what we'll do is we'll just um we'll create the chores but i'm just gonna use a uuid because i don't have time to add in the actual like user input piece but we can still list it out right so then we can have a chores chores view like this and as long as everything looks fine then we should be okay since we're going to be using a list in swift ui what we need to do is make sure that our objects are identifiable so we're going to do is since we're going to be using chore objects which have been generated for us we're going to create a new um file for chore extensions because the chore the chore dot swift file is going to be automatically generated for us whenever we update our back end so we want to make sure that we don't get our extension overwritten and we can do that by putting it in a separate file so chore extensions like so and um i think we may need to import swift ui for this one i don't think it was part of a foundation it might have been but we're gonna just add identifiable so class chore identifiable and we just open and close it the reason why we could just open and close it is because if uh um extension like that the reason why we could just open and close it like uh like this is because if we take a look at chore let's see if it'll jump if we take a look at short it already has an id that's already required by amplify so we could just add an extension are you going to continue on this project at a later date as well as other streams you mentioned earlier like the um async and white so i won't be continuing on this project per se this was just kind of showing how to get up and running with um amplify and xcode 13. so we can already see that it's working i'm just trying to show the basics but in terms of future streams i'm going to be starting with different projects already at different states so we won't have to go back through all of this um what i'll most likely do is i'll have like a project that's pretty much set up to this point right here and then we'll like move forward in that project um but they'll be separate projects they won't be necessarily the same one um unless you really feel like it should be the same one but i kind of just like starting from scratch and having like something separated so that you can look specifically at this code and it's specifically covering this topic or whatever all right so now let's go ahead and create a list oh well let's go ahead and create a view model first extension on our chores view and then we have our class and this will be our view model right and this is going to be an observable object again and what we will have are is an array of chores so let or no app published make sure we do that right this time of our chores uh and this will be an array of chore and it'll be an empty array starting off so then when we have a function to get chores what we will do is we will do amplify let's see if we get everything imported amplify data store like this and then we'll do a query and um when we do that query we're going to be looking for the chore and we need to do chore dot self and we're not going to be querying by id we just want a list of all of the chores we'll do a completion we'll get the result here we'll switch on the result just like we did for the auth so once again a swift result success and failure um case success let chores and then we'll do um oh make sure we don't have a retain cycle right weak self self dot chores is equal to chores and then we'll also have a case failure let error and then we'll print the error the error right so we have this set up all we need to do is create a list that will reflect what chores that we have in there and we'll have a list and it will be taking well first we need to have our view model right so at state object var um view model of type chores view dot view model is equal to dot and it will initialize that bad boy now we have an instance of our view model we'll do list and then let's see how did we do this i think you just say review model dot chores and then you do it like this sure yep that seemed to work so then we could do text and we'll do chore dot name and we can actually put this in a b stack and we'll do um text chore dot uh what was the other one completed completed time or uh due date do date um and this is not gonna be formatted correctly but i don't have the time to make it look all sexy and stuff so we're just gonna wrap it in a string and it's going to look a little bit just a wee bit ugly i'm sorry for that uh no initializers for this uh describing some things i remember other things i do not all right so that should be covered and then whenever we load up this list view we're just gonna do uh on up here we'll perform view model dot get chores like that then we will also have a button to add a new chore right um add chore oh man bummer all right here we go so we'll do let neutral is equal to chore and we'll initialize this with um a name a due date and let's see i think we want this one with the exception of the id we'll let we'll let it create the id it's just using a uuid but yeah we're going to use another uuid like this like i said i don't have time to just add in like user input but then we could create a temporal time completed time we can do now [Music] and then we can do a complete time from a date and we could do dot now um dot adding time interval plus or like plus like i don't know 300 or 2000 sure whatever so now we'll have a name a completed day a completed time and a due date so we should be able to create the new chore and we'll do amplify dot datastore.save and we'll save a new chore like this don't need the where predicate and we'll get the result and we'll switch on that result and case success we have our saved chore and we'll print out saved chore and then we'll print out the id let's save chore dot id like that and then we'll also do self dot get chores like that um we need to make sure that we have a capture list so weak itself like that and then lastly lastly we'll just print out the error so let error and then we'll print that error like so all right so i need this to work because i think my wife is already texting me uh yep it's time to go um but let's make sure that this works because uh chores view i told chris that we was gonna do it and we gonna do it we gonna do it kilo did you check out the new swift aws sdk i am actually going to try to cover that tomorrow um if i have time um improv impromptu um live stream i would love to cover that tomorrow uh let's see so we have the chores view um you know what we need to wrap this in a navigation view navigation view like this and what we need to do is also do this like that um navigation title oh but to answer your question um i am going to i have not tried it yet but i want to start using it and i'm going to learn it tomorrow so if you want to if i'm able to do a live stream tomorrow make sure you check it out because i'm going to learn it on here chores um but yeah uh you're working at aws right yep i'm working at aws uh tell your wonderful wife we're sorry for holding you will do oh you know what i forgot to wrap this in a z stack so that we can actually have a button that does this um let's see button and then the action will a view model dot say uh dot add shore and then the label will be image named is it add or is it plus let's see strenuous um remove name i think it's add i want to say it's add but it might be plus it's probably plus plus and um the z stack alignment bottom trailing let's see let's see uh maybe compare the sdk to amplify a little uh yep will do why is this not showing oh you know what it might be the color um four foreground color uh colors dot color dot purple yeah um so they're gonna cover why what okay um uh let's see different option so uh add see uh so i think that realistically you're probably going to be working with a little bit of both but it really just depends um like i would still probably use amplify to get up and running because i'm not going to want to manage all the services myself but when i want to use uh like a lambda to do something to interact with those services that's when i'm going to do it so ad bam so we have the the name right here and we have the date so it looks like it might be working let's also go to our backend content and let's see if we got it right here so yeah it looks like it is working um chris if you could if you could please um if if you already have a a github ticket then send it to me in discord um but if you don't then please make one and then send it to me or at least outline like exactly what you're seeing where it's not coming back in because this seems to be working on on my side when i try it out but obviously there's something going on with the project that you're dealing with where it's not the same um but yeah uh i want to try to get you unblocked as soon as possible um yeah because date time is like as you saw date time is like one of the primary ones that are used automatically if i had to guess you may you may have a conflicting name error so like if you auto if you manually added created ad or something like that or updated that that might cause a problem um but other than that it should work because it is like uh one of the primary classes that are used or types that are used uh never tried the objective-c sdk you're lucky that you didn't try the objective-c sdk because boy i did not like using it go check out my aws sdk video it was about three four years ago i was complaining the whole way through all right so that's gonna be it for today thank you all for uh coming to hang out on the live stream um like i said i am trying to shift my responsibilities back towards content content creation um at work um i think that i might get what i want and you may be seeing a lot more live streams uh from me more often um i will definitely be looking into building out courses uh covering some of the like um like the instagram or twitter clones and i'll probably try to keep it uh relatively um simple in terms of feature set uh not going too deep on how to actually build out these things but kind of making something that just looks similar so that you can have an extensive uh you know case study to like uh code against but yeah um so so courses live streams all that good stuff uh if you have errors with um amplify let me know um the more information that you could give me maybe in like a a github issue or in a stack overflow uh ticket that would probably be the best so that i could see all the information and then uh try it myself try to reproduce and give you maybe some suggestions on where to go from there but thank you all uh go out there and keep coding passionately

Channel: Kilo Loco

Views: 1,402

Keywords:

Id: mL54fosQphI

Length: 96min 8sec (5768 seconds)

Published: Wed Sep 01 2021