Manage user onboarding with @AppStorage and Transitions in SwiftUI | Bootcamp #53

[Music] all right what's up everyone i'm nick this is swiffle thinking and if you're just joining us i definitely recommend to pause this video and go check out the rest of the swift ui boot camp and then come on back because this is one of the last videos of the bootcamp and the reason for that is that we're going to use a lot of the features that we've learned in previous videos in this course and i'm not going to go through how they all work again because i've done separate videos on each feature so we're going to use things like transitions and animations we're going to use pickers and sliders and we're going to create a mock onboarding interface as if this user is signing in and then we're going to use app storage to actually store all this users information once they are signed in and then we're going to wrap up with being able to sign them out so we can restart the process again this is probably the longest video in the swift ui bootcamp and it's because we're not really learning anything this is just a perfect hands-on example of using a ton of the information that we've learned in this course and putting it into practice it's going to create an awesome onboarding experience and i hope you guys have fun with it let's take a look welcome back everyone of course i'm back in xcode again and this time we're going to do something a little different so let's right click the navigator and we're going to create a couple different screens in this video i think three screens so instead of just creating a new file let's first create a new group and a new group is basically just a folder that we're going to hold a bunch of files in and i'm going to call this onboarding views then i'm going to right click on the onboarding views group i'm going to create a new file and let's create the first swift ui view for this screen and i'm going to call this view intro view sort of like introduction because this is just the first view that we're going to load in our app so i'm going to click create and we can change the the names later but this is obviously just an example let's click resume on the canvas and make sure we're all connected here all right so the first thing i'm going to do is add a z stack to the screen open the brackets and let's add a background layer so this will be background and we're going to make it look cool so let's use maybe a radial gradient open the get some practice with gradients here i'm going to put all these parameters on separate lines so gradient center start radius and end radius and for the gradient let's change out these colors from red to blue so instead let's add a color open parentheses color literal and double click that color literal and you can pick whatever color you want here i'm going to use this light purple this first light purple and then we're gonna go to another color so i'm gonna do color open parentheses color literal and i'm this time going to pick maybe the second purple a slightly darker purple so we have our slight gradient here but that radius is in the center still and i want to put that in the top left so i'm going to move the center to top leading and it looks like the lighter purple is kind of fading out right about here on my screen and obviously the screen is pretty big so i'm going to make the end radius a little bit bigger and so we know we're going to start this at the top here so i'm going to make the end radius at the full height of the screen so here we'll do ui screen dot main dot bounds dot height so start radius we can leave as five that's fine and then of course we want to ignore these areas so let's do dot ignores safe area awesome we have a really cool background on our screen and then on top of that screen we are going to switch between a couple different views so first we need to add some logic if user is signed in and if they're signed in we're going to show their profile view and then we're going to say else if they're not signed in we're going to show the onboarding view to determine whether or not the user is signed in we're going to keep a variable stored in app storage and that's why i did app storage in the video before this so you guys already know how it works so let's create that variable here we're going to do at app storage open parentheses the key we're going to do a string here and it will be signed underscore in when you create these keys it is smart to keep it all lowercased and with no spaces so i'm going to keep it all lowercase and use this underscore instead of a space here this will be a variable and we'll call it current user signed in i'm going to make this a boolean so it'll always ever be true or false and then we're going to set this equal to false and when we have these app storage and we give it a starting uh value so we're setting equal to false what it's going to do this is very smart so what it's going to do is basically say if there is a value in current user signed in let's use that value but if there is no value let's set it to false so right now in our app obviously we haven't set this value yet so we can set it to false but in our app once we do set this to true this will start out as true so now we can use this boolean in our app so let's say if current user is signed in so if this is true open the brackets and if it's signed in we're going to add the profile view which we have not made yet so right now let's just add a text saying profile view we'll say else and if they're not signed in let's add a text saying onboarding view all right i'm going to delete these comments here and that's pretty much it for our intro view we have our background and then we're going to put on top of this background we're going to put a profile view or an onboarding view so let's start now with the onboarding view so i'm going to open up the navigator on the left hand side i'm going to go to that group that we made at the beginning of the video the onboarding views i'm going to right click it create a new file this will be a swift ui view and let's call this one onboarding view click create once you're inside click or zoom on that canvas and there's going to be a decent amount of logic in this view so let's first go over what we're going to do here so what we're going to do is create an at state var and we're going to call it onboarding state of type int and we're going to set it equal to zero and this state is just going to be where we are in the onboarding process are we at the beginning are we on the first are we on the first screen where the user's adding their name are we on the second screen and let's add a comment here above this so that if another developer were to open our app they would know what these onboarding states are so i'm going to use the backslash star and press enter so we have multi-line comment here and when the onboarding state is zero it's going to be a welcome screen when the onboarding state is one the user is going to have the ability to add their name when it's two they're going to add their age and then when it's three they're going to add gender nice little note here and let's finish up this note with a headline comment here saying onboarding states colon and with my comment like this now i can press option command left arrow on my keyboard to fold this up when we don't need it and option command right to unfold it again if you don't remember that shortcut you can always go to the editor you can go to code folding and then just fold it up and you can unfold here as well um but we're gonna leave it open for right now just so we know what we're doing and the first screen we're gonna do here is the welcome screen now before we get into it if you remember in the if you remember a couple minutes ago when we made the home view we added that purple background so this screen is actually going to already have a background it's not going to be white so i'm going to add a fake background to the preview here just so that we can work on a darker background so on this onboarding view on the preview here i'm just going to call dot background and make it color dot purple all right now in our view i'm going to start by adding a z stack open the brackets and there's going to be two main layers to the z-stack so let's do the content layer then we're going to have a buttons layer and the buttons layer is easier so we're just going to start with that we'll do a v-stack here open the brackets we're simply going to add a spacer to push everything to the bottom then we're going to add a button here but i'm actually going to use a tap gesture instead of an actual button so let's just add some text and we'll it'll say maybe sign in so we can see the button way down here at the bottom now let's give this a font of headline a foreground color of maybe purple so we have purple text let's give it a frame with a height of 55 a frame with a max width of infinity so it's as wide as possible let's give this a a background with a color.white and let's give that a corner radius of 10. so we have our button and then on this whole v stack let's just add some padding of maybe 30 just to push it up a little bit so we have our nice button at the bottom here and of course when we tap it we're going to do something so we'll add an ontap gesture and we're going to leave that gesture blank for now now we're going to start to get a lot of code in this body so i want to break it out so this text button i'm going to make it its own variables so down here i'm going to add a private var let's call this bottom button of type sum view open the brackets i'm just going to cut this text here paste it into this bottom button and just add the bottom button to the view just to keep this body nice and short so we can see what's going on here so we have our bottom button it's looking good and before we move forward i'm going to take this one step further and add an extension because we're going to have a whole bunch of these variables and it's going to get very long and i'm very cognizant of how long these files are because once they get long they're hard to manage hard to understand so try to stay organized as possible when making these so we're going to create an extension and all that basically means is we have our current view right here so all the code for the onboarding view is here but we could add somewhere else in our app we could add extension and we could add onboarding view open the brackets and then in this extension in this code here we could just add more logic for our onboarding view so i'm going to create an extension just like this and then that's where we're going to add all of these components like this bottom button so i'm just going to actually just cut this extension here and scroll down and then underneath the preview let's just add an extension i'm going to add a mark and say and call this components because these will be all the components for our main view and then i'm just going to cut the bottom button and paste it into the extension down here click resume just to make sure it builds so now we have this extension it's the same code but of course when we look at our master onboarding view the main part here this is nice and clean this is nice and organized and if someone was in this file and they wanted to see what the bottom button was they could just right click it jump to the definition and we're going to go straight to where that code is all right now we're working with extensions we're keeping our file nice and neat now we need to add a content layer and the content layer is going to change based on what state we have so first i'm going to add a z stack so even when we are changing this z stack will remain on the screen and then we're basically going to add some logic for all these numbers and you might think that we're going to do if onboarding state is equal to 0 do this else if onboarding state is equal to 1 do this and else and else and else and we could do this and this is this works but if you have a situation in your app where you have where all of your conditional logic is based on the same variable so all of our logic here is based on changes in this onboarding state it's actually more efficient to use a switch statement so instead of these ifs we're just going to use switch onboarding state and then open the brackets so now we're switching on whatever value this onboarding state is and we're going to say case zero colon so if onboarding state is zero let's just add a rounded rectangle for now and we're going to make views here but let's give it a corner radius of 25. let's give it a foreground color of red and the switch statement must be exhaustive which means if we add these cases we need to include all possible cases so of course we have 0 1 2 3 but integer can keep going up forever so we also need to give it a default case so if it's anything other than the cases that we mentioned here this is what will happen add a colon and we're just going to add another rounded rectangle corner radius 25 and foreground color let's do green our error should go away and obviously we're going to change out these these round of rectangles we're just getting set up here but let's start with this case zero so first we're going to have a welcome screen so i'm going and so there's going to be a decent amount of code in this welcome screen so just like we did with this bottom button i'm going to add that as a separate variable so i'm going to scroll down on my app to my handy dandy extension i'm going to create a new private var let's call this welcome section of type some view open the brackets let's give this a v stack with maybe spacing of 40. open the brackets inside this v stack let's start with a text and let's just make it say hi for a second let's take this welcome section put it into our preview so up at the top here instead of this rounded rectangle with foreground color red i'm just going to add a the welcome section click resume on the canvas we should see it right now because our onboarding state is zero so we have high here and let's start filling that out so down at the welcome section again first i'm gonna add is an image so if this was a real app i'd probably put my logo here but we don't have logos so we're just gonna use a system icon so we're gonna do image system name and the system name is going to be heart dot text dot square dot fill let's make it resizable let's make it dot fit scale to fit and let's give it a frame with a width of maybe 200 a height of 200 and we don't need the alignment this is looking better that's a cool looking little icon maybe this is like a dating app or something let's give it a foreground color of white so it looks better on that purple background underneath this image let's add a title so let's add some text and maybe it will say find your match uh i'll make this font of large title give this a font weight of semi bold looks usually looks better give it a foreground color of white of course and i want to add a little bit of an underline but a custom underline so let's add dot overlay so this goes on top of it i'm going to delete the overlay content make this multiple lines and we're going to add a capsule here open the parentheses style will be continuous let's give this a frame with a height of maybe three and i did a whole video on overlays so you should be aware that overlays have alignments so we can do comma space alignment and give it the bottom alignment so now it's at the bottom of our find your mat and of course the height is three but let's offset it a little below or find your match so let's do dot offset we're going to use the x and the y we're not going to offset the x so just delete that and then the y maybe five so that looks better that looks good and of course let's make it white so we'll do dot foreground color dot we white a nice find your match underline and let's add one more text with a little bit of details below find your match so we'll do uh text uh this is the number one app for finding your match online in this tutorial we are practicing using app storage and other swift ui techniques let's make this a font weight of medium and let's make it foreground color of white as well and then on this entire v stack let's add padding of maybe 30. and this looks good but i want to push it to the top third of the screen so as you guys are aware we can add a spacer at the bottom and it will push everything up and if we add a spacer again at the top it will push everything back into the middle because these spacers will equal in size but a quick little hack is if we had two spacers at the bottom all three of these spacers will then be equal size so we'll have double the space in the bottom as in the top and now our screen is nicely in the kind of top top third section of the screen and this looks good to me uh let's just finish it up by making this centered so on this v-stack i'm just going to add a multi-line text alignment as center great this looks good let's move on to the next section here so so if onboarding is zero we have our welcome section but if it is one we would need a section to add the name so let's go build that now and scroll back down and now you can start to see how much logic we have here and why we have separated out this extension with all of our extra components versus the main view at the top so underneath welcome section i'm going to create another private var let's call this add name section of type some view open brackets and i kind of like what we did for this welcome section so i'm going to copy this welcome section here and then just paste it in the add name section and we don't need this image i'm going to delete this image finder match i'm going to change to what's your name we don't need that underline anymore so i'm going to delete that overlay we don't need an extra text here so i'll also delete that and let's put this so far into our view the add name section so i'm going to scroll back up case 0 welcome section and then case one we're going to add our add name section let's switch the onboarding state manually right now to one and click resume on the canvas just so we can see that first that ad name section what's your name all right so looks like we have an extra period down here so delete that period and below this what's your name i'm going to add a text field so the user can type in their name so text field open the parentheses let's use the title and text approach i've done a whole video on text fields and the placeholder text which is this title here we'll say your name here dot dot and then we need to bind it to a string and now since this is our first time in extensions i just want to show you guys this but if we try to add a variable anywhere into this extension so if we tried to add it maybe right outside this name section we did at state var text field text of type string and we'll set it equal to a blank string and then we tried to bind to it so this text field text we did money sign and text field text we're going to get an error here and that's and it's going to tell us directly that extensions cannot contain stored properties all it means is that these store properties these variables cannot be set up in the extension so i'm going to actually just cut this i'm going to go back up to the top of our screen here back up to the actual onboarding view and we're going to put it in here text field text so although this variable is up here we can still use it down at the bottom because we're in an extension of this view so text field text and that error should go away let's click try again on the preview to see if we can see that text field probably going to have to format it a little bit i see it doesn't look very good so let's give it a font of headline let's give it a background of color.white let's get before the background let's add a frame with a height of 55 and it's actually aligned to the center i don't want that so let's delete that multi-line text alignment at the bottom here it's all in the left but i want to add a little bit of padding so so before we set uh the background let's add dot padding dot horizontal looks better and then let's add corner radius of 10 and that looks like a much better text field the spacing looks a little big so let's make it 20 what's your name and this looks great before we move on i actually want to quickly re change the name of this text field text instead of saying text field text let's just call it uh name so i'm going to go up to where we declared that text field text and we're going to use something new here that we haven't used in this course and so we're going to do is right click on this variable and we're going to click refactor and rename and this is one of the coolest features in xcode so when we click this it's going to pull up all the locations in our app where we use this variable so you can see that we're using it on this text field text and it automatically highlighted this text and now i can retype a new name so i'm just going to call this name now and you'll see that not only did it update where we right clicked it but it refactored in all of the places where we used this variable so it automatically updated down on that text field i'm going to click enter and now it just says name and if i scroll back down the text field is also updated to just name i don't know why it hit our canvas so let's get that back let's click these lines on the right and show that canvas and click resume to make sure we're all connected looking good we're going to do the same thing for an add age section so underneath this variable let's do private var add age section of type some view open the brackets i'm going to copy this add name section i'm going to paste it in the add age section all right so this one this text is going to say what's your age let's give it this let's keep these same modifiers and then of course we're not going to add a text field for age so it's going to delete this and we're going to add a slider open the parentheses and this slider is going to have to have a step and that's because we want the slider to be only on full numbers so zero one two three because if someone's adding their age to the to our app we don't want them to put uh 18.5 we'd rather just be 18 or 19. so let's go down to this completion here with the value in step click enter and we need to bind this to a value and just like we did with that with a name up here we need to set that up in the top of our screen so i'm going to scroll all the way up again and underneath the name let's do at state var age of type double and we'll set it equal to maybe 50 just to start and while we're here let's also add the case for this so we'll do case 2 and then we're going to do add age section so now we can bind to this age variable scroll on down and the value of course money sign age and then in so this is the range and we want everyone on our app to be maybe at least 18 years old so let's do 18 dot dot dot and the oldest you could be is a hundred and for the step we want it to be every one whole number so let's just do one and then we actually don't need this on editing change so i'm just going to delete it let's click resume on the canvas uh it looks and we actually i want to see what this add age section is so scrolling back up onboarding state let's make it number two just for now scrolling back down click resume see this looks good let's change the color from that blue to white so let's do dot accent color dot white looks good and we also want one more label to actually show us what the current age is so let's add underneath this text let's add another text and we'll add two quotes and then then forward slash open close parenthesis and in here we can reference age and it's going to look a little ugly 50.000 but we'll format it in a second so let's add font of large title font weight of semi-bold foreground color of white and let's format this age so i've done this so i did this actually in the slider video as well there is a shortcut in swift we can add string open the parenthesis and look for the format and when we click the format we can set the format that we want this string so this will be a string as well the format is going to be percent uh dot zero f so that basically just means zero decimals and then in here we can put in age so this is what we're gonna format and i'm gonna cut this string here and paste it where we have our age directly in here so it should read now reformat our string just to be a full number if i click resume on the canvas and we move the slider around we should see it updates perfectly which is exactly what we wanted that's good for the age section and then we're gonna have one more section for gender so one more time underneath here let's add private var add gender section of type some view open brackets i'm going to copy this v stack again paste it down here in our ad gender section it's going to say what's your gender and of course we don't want a slider here so i'm going to delete this and we're going to add a picker here so let's do picker open parentheses and we're going to use the selection label content and for the selection we need to bind it to something and we're going to bind it to a string so again just like we did with the age and the name we need to add this at the top so scrolling way up to the top and now you can start to see why we separated and try to keep this as neat as possible let's add an at state var gender of type string and right now we'll just set sql to a blank string as if they didn't actually select the gender and for this case let's add case 3 colon add gender section and let's set the onboarding state to 3 right now so we can see the gender section i don't think it will build because we should have some errors down in our code oh it does build all right so now let's edit this so scrolling down to the bottom again add gender section and the selection is going to be money sign gender the label we're going to leave a text but let's say select a gender for the content it's going gonna just we'll just leave one and two for now we're gonna change this picker to a different style so let's do dot picker style and i'm gonna start typing picker style and we're gonna go down to the menu picker style open close parenthesis and let's format this a little bit so this what we actually see here selected gender is actually this label so i want to add all of the modifiers onto this label here so i'm going to hit enter before label hit enter before content just to clean this up and then let's put this text on its own line so i'm going to hit enter right after the text as well as before the text so it's kind of by itself here and let's just start adding modifiers like we normally do so let's do font maybe headline dot foreground color purple dot frame with a height of 55 a dot frame with a max width of infinity let's give it a background the color.white and of course dot corner radius of 10. so that looks good already and when i click on this button we get our options now of course gender is not one and two uh so let's add a couple options here and the first one is going to be male the second one is going to be female and the third one we'll just add text and it will say non-binary now i did a whole video on pickers and you should know that the tag is what we're actually selecting so the selection of gender is actually a string and we need to make these tags into strings so i'm just going to basically copy this and put it into the tag here as well so male female tag non binary and this should be it for our picker so if i click it let's see so if i click on the picker we have male female non-binary and if i select one if i select one i actually want to update this label here so the text here says selected gender let's make that dynamic we'll say if gender which is the variable at the top of our screen dot count is greater than one if it's greater than one question mark we'll add we'll just use the gender otherwise we're going to add selected gender so we know when we set up this gender that was a blank string and when we call count on a string it's just the number of characters inside so if we had a blank string like this which is how we set it up there the count here is zero but if we have male the count here is one two three four so if the count is greater than one let's put in whatever the gender says otherwise let's add selected gender let's check it out in the preview select the gender female and now it updates perfectly alright so we have our views all set up and now we need to add some logic to actually go through these screens and then sign in so i'm going to scroll back up to the top of our view here i hope that the length of this is not making it confusing because it's actually fairly simple code we're just doing a lot of coding here so onboarding state let's put it back to zero click resume on the canvas i'm gonna hide this comment with option command left just to fold that up and when we click this sign in view we want to then change the onboarding state from 0 to 1 and then move from the welcome section to the add name section so we need some logic i'm going to scroll down and that logic is going to be in our bottom button it's we're going to have a function but there's going to be a bunch of different functions we're going to do so i want to keep these organized as well so what i'm going to do is go to the bottom of this extension so this is the extension for all of our components where all of our some views are i'm gonna go to the bottom of this extension i'm gonna add another extension for onboarding view open the brackets i'm gonna add a mark here this will be functions and when you get into coding you can set up these files however you want i like these extensions just keeps it clean because if we click on this editor button and show the mini map we can now see how much code we have in our file here and i'm going to even zoom out a little bit here by pressing command minus and we'll start to see that we have all this code in our component section you can see the components title that mark that we made and now we're going to have a bunch of code in our functions as well so this is getting pretty long here but we are staying organized so in this functions let's create a function we'll do funk uh handle next button pressed open close parenthesis open the brackets and handle next button press is just going to be called every time we click this button at the bottom of our view so i'm going to go up to the components i'm going to go to this bottom button and i'm here i'm just going to add handle next button pressed and now the coolest part about having these extensions that we can fold them up so we're done working in this component section for a little while so i'm going to click right here in front of this and then fold it up with option command left and all that code is nice and neatly folded in here now and we are now working uh just in this little function section handle next button pressed so what do we want to happen when we click this button well we want to go from onboarding state from zero to one and let's do it with animation so in this function let's add with animation dot spring because spring looks awesome and all we're going to do is add one to the onboarding state so onboarding state plus equals 1. click resume on the canvas just to check it out and let's click resume here one thing i want to know is that this should say sign up and not sign in so let's fix that and when we click this button i want this to change to say next because we're already signing in so we because we're already signing up we don't need this button to keep saying sign in or sign up so it should say next and then we got to this screen we click the next button we get to this screen we click the next button and then when we get to our final screen i wanted to say finish i don't want to say keep saying sign in or next so let's edit that quickly and i guess i folded this components too soon i'm going to double click it to open it up this text let's just make it dynamic so we'll say if onboarding state is equal to zero we'll have it say sign in we'll have it say sign up actually so let's make it capitalized to sign up otherwise uh we'll do if onboarding state is equal to three i think three is our last state three is the gender yes so where were we so if it is three question mark we'll have finish otherwise we'll do next so if it's zero it's the first one should say sign up if it's three in the last one say finish otherwise next let's check it out quickly sign up next next finish looks good to me it looks like there's a little bit of animation on that text change so let's just so let's just cancel out the animation on this button so i'll just do dot animation nil try one more time and now it just says sign up next next finish looks good and if we click this finish button it is now going to that third default rectangle because at the top here we had this default case where we had this rounded rectangle so we want to make sure if we click the button while we're on the add gender section it actually just finishes up it doesn't actually just go to the next number so i'm going to fold up our components again go down to our section and let's make that check here we'll say if onboarding state is equal to three open brackets and here we should add a comment uh sign in else with animation so if we are done with the onboarding and we're on the last page the onboarding we're going to do some sign in logic here if we're not done with the onboarding we're going to actually just go to the next section in the onboarding so now i want to add some transitions to make that whole process look really seamless and i find that it's much easier to work with transitions on the actual simulator than the preview here so i'm going to actually just hide the canvas and start working on a simulator so we've done this before let's hide the canvas let's also hide the minimap because i don't need that for right now i'm going to open up the project navigator so before we run it on the simulator let's connect it into our intro view which we did at the beginning here so let's go to the intro view and we have if current users signed in profile view which we have not done yet otherwise let's show the onboarding view so here let's add onboarding view which is what we just made and now let's get this intro view to be the first screen when we run our simulator so i'm gonna go up to our app.swift file and you should be familiar this is where your at main call is and we've done a couple times in this video but let's make that first screen our intro view and then let's click run on the simulator which is this play button on the top left and it's going to build your app to whatever simulator here i have an iphone 12 and uh this is looking pretty cool so far um let's before we click anything let's go back into our file so i'm going to go back to the onboarding view here i'm going to hide the navigator because we don't need it for a second and this looks pretty cool we have our purple background and we have our welcome screen on top it says find your match this is the number one app for finding your match and then we can click sign up and if i click sign up it should kind of animate to the next screen so click it and it was kind of like a fade to the next screen it looked alright but i think we can approve it so let's get some practice with transitions here i'm going to go up in our file to where we have all these welcome sections and and we can add a transition i'm going to use the same transition for all of these so i'm going to make it a variable at the top so let's do let transition of type any transition i'm going to set it equal to dot asymmetric because we want to be different on insertion and removal i'm going to hit enter before insertion and hit enter before removal and on the insertion i want to come in from the right side of the screen so we'll do dot move and the edge is trailing and then for removal we're going to do dot move and the edge is leading so it leaves out the left side of the screen and let's add this transition now to all of these views so we'll do welcome section dot transition and we'll add our transition and i'm just going to copy that modifier paste it on all these views beautiful so again right now in our file if i click next it kind of just fades into the next view but let's rerun the preview click play again and now we should get some pretty cool animation here find your match sign up and now it pushes to the left this slides into the right and that looks sexy click it again look how nice and professional this looks just a couple lines of code ages 33 and one more gender we can pick our gender and then finish of course we didn't do anything but it's good that when we click finish it's not actually going to that last screen so our onboarding is really coming together i'm going to rerun it one more time click play because there's something i want to point out here that this looks fine sign up let me go here and as we as you just saw i could click next without actually typing anything in right so if i just click next it's going to go to the next screen so i want to add some logic that is going to check that we did actually type something in here so that you can actually get past this screen unless you actually add some text here so the easiest place to add it is when we actually click this button before we go to the next screen we just check some logic so we already have a function for that button handle next button pressed so this section of code is going to be handling actually moving screens so let's add a comment here go to next go to next section and let's add another comment at the top here check inputs so here we need to check if there's text here and we only need to check if the onboarding state is this current state so i'm going to add a switch statement for the onboarding state open the brackets and we're going to add a case here and we're going to say case if it is the number one which is when we had the add your name we're gonna add some logic in here but let's just put a break for right now so that the errors go away and we'll do default and another break so error should go away a break is basically just if we're in the switch statement and we get to this case or we get to another case that is not one of these cases and we go into this break it basically means just get out of this switch statement and continue with the rest of the code so break doesn't have much significance except just we're done with the switch statement move on to the next section so now in this case one we want to check that there is text here so let's say guard name dot count i remember that's what we use to bind to the actual text field the variable called name we're going to make sure we're going to check we're going to make sure the guard dot count is greater than or equal to 3 else open the brackets so if it is greater than equal to 3 the rest of this code will run if it is not this will run and we're just going to return out of this function so click resume on the canvas just to check it out really quickly sorry click play on the simulator sign up and when i click next it shouldn't actually do anything right now i'm clicking it it's not moving and that's because we're failing this guard statement so this fails and it's just returning out so this never gets executed and we're just returning out and what i want to do before we return out is to show a quick alert on the screen that alerts the the user that they need to add their name so this will be like a nice little ui effect and we're gonna do that with an alert and we've learned alerts i did a whole video on them so you should be familiar uh let's at the top of the onboarding view let's create an at state var alert title of type string and we'll set it equal to a blank string and we'll do at state var show alert of type bull equals false all right and in our view here on our master z stack i'm just going to add a dot alert is presented we're going to bind it to the show alert variable we just made and the content is going to return an alert open the parentheses and we're just going to use a title the title looks for a text so let's add a text and then the actual string will be our alert title which we just made so every time you show an alert it's just going to pop up with whatever the alert title is so scrolling down now we all we need to do is show an alert so we can do alert title equals and then we'll put our title in here and after we call alert title we'll call show alert dot toggle so we update the title and then we show an alert and now these kind of go hand in hand so i want to make sure that anytime we call an alert we know that we have to set the title beforehand so to do that i'm just going to actually create its own function so that we never call show alert directly we just call this new function so underneath uh this function we'll do func show alert open the parentheses we're going to add a parameter here that has the title so we'll do title of type string and then open the brackets and we're going to first set the alert title equal to title that we passed in and then show alert dot toggle and now anytime we actually want to show an alert we're going to call this little function here and we're not going to type in these two lines of code so here we will call show alert look for our function with the title and the title is going to say your your name must be at least three characters long and then i'm going to press ctrl command space to open up the emoji keyboard and uh maybe put a funny emoji in just for the user can see it click play on the simulator and check out how easy this was to add that alert find your match sign up we're not going to add a name we're going to click next your name must be at least three characters long and we can do that until we actually add three characters and if i add my name in nick click next it now goes so it was that easy to create little checks and balances in our app and for the age i don't think we need any checks and balances here because as we know it stops at 100 it stops at 18 and these are all valid ages so let's click next and then here i think we need one more check because at this current state they didn't actually select a gender but we need to make sure that they did actually select one of these options so again in our handle next button press we are going to check that we do have a gender so before we add the logic i'm going to scroll back up and make sure we know we're talking about here so this is going to be case 3 when we're on the gender section and we started our gender with this blank string so we're just going to make sure that the gender is not a blank string it actually has at least one character in it so very simply going back down to handle next button pressed case 3 and we're going to do guard gender dot count is greater than one else open the brackets and we're going to show an alert this alert will say please select a gender before moving forward and again i'll do control command space and put in another emoji and put in another emoji just because i find that adding these emojis is just so easy and it gives a really nice comfortable ui that people really like to see and of course after the show alert we'll just return out because if we hit this we want to end here we don't actually want to go to the next section so let's click resume on the canvas make sure this alert is working as well sign up alert 1 is working uh nick next next what's your gender finish please select the gender before moving forwards we got our alert and now if we click mail and i click finish it doesn't give me that error and we can move forward now of course we need this logic to actually sign in which we haven't done yet and that logic is actually pretty simple we're just going to set some app storage values with all of these values that the user just added so going back up to the top of our view here let's let's add some comments here so the these are the onboarding inputs these are for the alert and then we're gonna have another little section here for app storage let's create our app storage variables and we need one for each of these so we'll do at app storage open the parentheses the key here is going to be name var we'll call it current user name it'll be of type optional string at app storage and we'll do age var current user age of type optional int and then at app storage gender var current user gender of type optional string we're making these optional because if we open the app and we didn't actually set anything yet these will all be nil but if we did set them of course they will be the values so in our finish button we're just going to set these three and then we need to set one more which is that the current user is signed in so i'm going to actually open up the navigator go down to that other file the intro view and just make sure that we're using the exact same app storage that we use for the current user signed in so i'm going to copy this i'm going to go back into our onboarding view hide the navigator again and just paste it in here so we have our signed in and remember we set this one equal to false so that if it is nil it will default to false so this will always ever be true or false um whereas these if they are nil we're going to leave them as nil hope that makes sense and now let's set these when we click the finish button so scrolling back down in our file here so below this let's create a function we'll do funk sign in open and close parenthesis open the brackets we're going to call that right here we'll call sign in and just like i said we're just going to set those new variables so current user name equals name right this is the app storage this is the text field text that we just checked in our in our code here we're going to do current user age equals age we're going to quick error here because the age was a double and the current user age is an int so we can just transform the double into an into really quickly by just adding int open the parentheses close the parentheses we know that double is always going to be a full number anyway so this isn't an issue and then of course current user gender equals gender lastly we're going to do current user signed in equals true when i set this current user signed in i want to do it with animation and it's going to transition to our signed in view so let's again do with animation dot spring open brackets current user signed in we'll put that inside if i click resume on the or click play on the simulator and we check it out let's see if we can get through the onboarding now sign up nick age what's your gender finish and we get that profile view so if you remember and we go back into the intro view dot swift we set the current user signed in in the last screen and once that is set this is now true so instead of showing the onboarding view it went right to the profile view which is awesome and now the last thing we need to do in this video is set up the profile view so this is going to be a very simple screen uh but let's stop working in the in the simulator again let's move back to our canvas so i'm going to open up the project navigator i'm going to go to the onboarding views i'm going to right click create a new file this will be a swift ui view and let's just call this profile view click create let's open up the canvas on the right side i'm moving a little faster here because it's been a long video this should be easy stuff by now um and and the first thing we're going to need when we have this profile view is all the values that the user just added into app storage so i'm going to open back up the onboarding view quick and scroll the top and we have all of these app storage variables i'm just going to copy them because since they're in app storage we can access them in any view in our app now i'm going to go back into the profile view and make these all variables at the top of this as well so click resume and by the time we get to this profile view we should now have values for all the name name age and gender so let's very quickly add some stuff here i'm going to start with a v stack open the brackets i'm going to add an image and we don't have a profile picture for this person so i'm just going to use a system image that says person.circle.fill let's make it resizable dot scaled to fit with a frame of maybe 150 by 150. underneath the image let's add a text and here we're going to put the current user's name and remember this is optional so we need to safely unwrap it so we could use an iflat statement but because we know this is going to have a value i don't really i don't really need to unwrap it like that so i'm going to click fix and use this coalescent using double question marks so we're just going to give it a default value in case there is no value here and we'll just put uh your name here again this should never actually come up because in our actual app we have already set this name let's add another text for their age and here we'll say maybe uh this user is forward slash open and close parentheses and we're going to use the current user age and of course we need to double question marks again in case this for some reason is in case for some reason this is uh nil so if it's nil we'll just put this as a zero we know it's going to be a value this user is zero is what the preview says right now we'll do zero years old and one more text their gender is and then we'll do forward slash open close parenthesis and we'll put the current user gender and two question marks in case we don't have the current use gender and we'll just do unknown in case we don't have it but of course we're always going to have it to add some formatting here so on the whole v stack i'm going to add a dot font of title let's do dot background of color.white let's give some padding before the background after the background let's add a shadow of maybe 10 and before the shadow let's actually add a corner radius of 10 as well and let's add a little more padding so i'm going to do padding dot vertical comma 40. and let's also change the text to be purple so let's do.foregroundcolor.purple and of course this doesn't look that good i wouldn't use this in a real app but what we're doing here is just practicing using different app storage variables different modifiers and then navigating around our screen using some of these app storage variables as well so this looks good the last thing i want to do is add one more button at the bottom of the z-stack so let's do text out and this i'm going to give a dot background color the background to this will be color dot black let's give it the foreground color of white text let's give it a font of headline let's give it a frame with a height of 55 a frame with a max width of infinity and after let's give it a dot corner radius of 10. let's add some spacing in this v stack so spacing maybe 20. and when we click that sign out button of course we want to sign out of our app so i'm going to create a function underneath the body we'll do funk sign out open close parenthesis open the brackets and on the sign out text let's add a dot on tap gesture we're going to call sign out and all we're going to do to sign out is remove all the current user information so name age gender signed in just like we did signing in except now it's the opposite so we're going to do current user name equals nil current user age equals nil current user gender equals nil and then current user signed in equals false because remember this one this one is true or false it's not optional and lastly i want to do this with animation because we're going to we would then segue to another screen so we'll do with animation dot spring open the brackets current user signed in right here and let's check out what we've built click play click run on the simulator all right it looks like we didn't add the profile view into our actual app yet so let's go to the onboarding view uh in the onboarding i'm gonna hide the navigator here hide the canvas and sorry let's go to the intro view and we have our text profile view here we'll just put in profile view open and close parenthesis and let's click play on the simulator i'm sorry this is such a long video there's a lot to cover here uh this looks pretty good doesn't look great but uh but we do have the name that saved in app storage 32 years old female if we click sign out it goes back to our onboarding screen and so now we can sign up i can add my name let's add joe age 18 gender male finish and it goes right into our profile and of course we can sign out again last final touch let's add some animation let's add a transition for that final for that final switch between the onboarding and the profile so on the profile view i'm going to add dot transition and we'll do dot asymmetric and and i want the profile view to come up from the bottom so we'll do dot move dot bottom and on removal we'll do dot move dot top and for the onboarding view we'll do the exact opposite so i'll copy the transition paste it on the onboarding view then we're gonna do dot top and top bottom this could be a pretty cool effect click run in the simulator possibly one last time here so let's run through it one final time we have find your match i'm gonna click sign up we have this nice animation to the second screen what's your name i'm going to click next your name must be at least three characters long all right so my name is going to be nick next what's your age let's do maybe 71 click next and what's your gender i'm going to click finish please select agenda before moving forward okay i'll select the gender mail when i click finish we have this nice transition into the profile view so this person is now signed in we have their name we have their age we have their gender and we have the ability to sign out and if i don't sign out and i just close my app here and then reopen the app all that value is still saved in app storage so it's persisting between sessions and we can keep our users signed in and when they open the app this time they're already on the profile view they're not back on the onboarding view if i click sign out it now removed all those values from the app storage and we're back to our onboarding view so if we click sign up it's going to take us through the whole process again and if i cut and close the app again and now i reopen the app you'll see that it's starting on the beginning state because we are removed all those values from app storage and we are back as if we are not signed in of course if this was your actual app you would save the user's information somewhere in like a database so that they could sign in and sign out and you didn't have to keep re-signing up but this was just a tutorial so we did a lot of practice here on using transitions and using app storage and as you can see the app storage is so powerful because we can use these variables across all the screens in our app we use them in our intro view we use the same variable in our profile view as well as our onboarding view and then based on those variables we kind of manage the entire state of our app so i hope this was a good practice i know this was one of the longer videos but now you are really becoming an expert swift ui developer so thank you guys again for watching hope you enjoyed it leave a comment if anything was confusing because i know we did a ton of code here as always i'm nick this is swivel thinking and i'll see you guys in the next video

Channel: Swiftful Thinking

Views: 4,086

Keywords: SwiftUI Bootcamp, Learn SwiftUI, SwiftUI how to use @AppStorage, SwiftUI onboarding, SwiftUI user onboarding, SwiftUI how to manage onboarding, SwiftUI onboarding flow, SwiftUI how to use transitions, SwiftUI app, SwiftUI how to use AppStorage, SwiftUI AppStorage, SwiftUI @AppStorage, SwiftUI save user info, SwiftUI save user information, SwiftUI persist data, SwiftUI persist user info, SwiftUI user info with @AppStorage, SwiftUI example, SwiftUI onboarding example

Id: gm7Xct50CFo

Length: 65min 8sec (3908 seconds)

Published: Sat Mar 13 2021